refactor(logins): added a proper redirect to the last place you were
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { Link, useRouterState } from "@tanstack/react-router";
|
||||
import { useAuth, useLogout } from "../../lib/authClient";
|
||||
import { ModeToggle } from "../mode-toggle";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
|
||||
@@ -15,6 +15,8 @@ import {
|
||||
export default function Nav() {
|
||||
const { session } = useAuth();
|
||||
const logout = useLogout();
|
||||
const router = useRouterState();
|
||||
const currentPath = router.location.href;
|
||||
return (
|
||||
<nav className="flex justify-end w-full shadow ">
|
||||
<div className="m-2 flex flex-row gap-1">
|
||||
@@ -67,7 +69,9 @@ export default function Nav() {
|
||||
) : (
|
||||
<div className="m-1">
|
||||
<Button>
|
||||
<Link to="/login">Login</Link>
|
||||
<Link to="/login" search={{ redirect: currentPath }}>
|
||||
Login
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
145
frontend/src/routes/_app/(auth)/-components/ChangePassword.tsx
Normal file
145
frontend/src/routes/_app/(auth)/-components/ChangePassword.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { LstCard } from "@/components/ui/lstCard";
|
||||
import { authClient, useLogout } from "@/lib/authClient";
|
||||
import { useAppForm } from "@/lib/formStuff";
|
||||
|
||||
export default function ChangePassword() {
|
||||
//const navigate = useNavigate();
|
||||
const logout = useLogout();
|
||||
const router = useRouter();
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
currentPassword: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
if (value.newPassword != value.confirmPassword) {
|
||||
toast.error("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { data, error } = await authClient.changePassword({
|
||||
newPassword: value.newPassword, // required
|
||||
currentPassword: value.currentPassword, // required
|
||||
revokeOtherSessions: true,
|
||||
});
|
||||
console.log("Data", data);
|
||||
console.log("Error", error);
|
||||
if (data) {
|
||||
toast.success("Password has been updated");
|
||||
form.reset();
|
||||
router.invalidate();
|
||||
logout();
|
||||
//navigate({ to: "/login" });
|
||||
}
|
||||
|
||||
if (error) {
|
||||
toast.success(error.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
// @ts-ignore
|
||||
toast.error(error?.response.data.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<LstCard className="p-6 w-96">
|
||||
<CardHeader>
|
||||
<CardTitle>Set a new password</CardTitle>
|
||||
<CardDescription>
|
||||
After Entering your new password you will need to sign in again.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<form.AppField
|
||||
name="currentPassword"
|
||||
children={(field) => (
|
||||
<field.InputPasswordField
|
||||
label="Enter your current password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name="newPassword"
|
||||
// validators={{
|
||||
// onChangeListenTo: ["password"],
|
||||
// onChange: ({ value, fieldApi }) => {
|
||||
// if (
|
||||
// value !==
|
||||
// fieldApi.form.getFieldValue("password")
|
||||
// ) {
|
||||
// return "Passwords do not match";
|
||||
// }
|
||||
// return undefined;
|
||||
// },
|
||||
// }}
|
||||
children={(field) => (
|
||||
<field.InputPasswordField
|
||||
label="New password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<form.AppField
|
||||
name="confirmPassword"
|
||||
// validators={{
|
||||
// onChangeListenTo: ["password"],
|
||||
// onChange: ({ value, fieldApi }) => {
|
||||
// if (
|
||||
// value !==
|
||||
// fieldApi.form.getFieldValue("password")
|
||||
// ) {
|
||||
// return "Passwords do not match";
|
||||
// }
|
||||
// return undefined;
|
||||
// },
|
||||
// }}
|
||||
children={(field) => (
|
||||
<field.InputPasswordField
|
||||
label="Re-enter your password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>Reset Password</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* <div className="mt-6 text-center text-sm text-gray-600">
|
||||
Remembered your account?{" "}
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary underline underline-offset-4 hover:text-primary/80"
|
||||
>
|
||||
Back to login
|
||||
</Link>
|
||||
</div> */}
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -22,9 +22,11 @@ export const Route = createFileRoute("/_app/(auth)/login")({
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const search = Route.useSearch();
|
||||
const redirectPath = search.redirect ?? "/";
|
||||
return (
|
||||
<div className="ml-[25%] mt-[0.5%]">
|
||||
<LoginForm />
|
||||
<LoginForm redirectPath={redirectPath} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { authClient, useAuth } from "../../../../lib/authClient";
|
||||
import { authClient } from "../../../../lib/authClient";
|
||||
import ChangePassword from "../-components/ChangePassword";
|
||||
|
||||
export const Route = createFileRoute("/_app/(auth)/user/profile")({
|
||||
beforeLoad: async () => {
|
||||
@@ -22,19 +23,20 @@ export const Route = createFileRoute("/_app/(auth)/user/profile")({
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { session } = useAuth();
|
||||
//const { session } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<div>
|
||||
<span>Things you can change</span>
|
||||
{/* <span>Things you can change</span>
|
||||
<ol>
|
||||
<li>Display name: {session?.user.displayUsername}</li>
|
||||
<li>Name: {session?.user.name}</li>
|
||||
<li>Image: To be added</li>
|
||||
<li>password: **************</li>
|
||||
</ol>
|
||||
<li></li>
|
||||
</ol> */}
|
||||
</div>
|
||||
<ChangePassword />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
|
||||
import {
|
||||
createFileRoute,
|
||||
Link,
|
||||
Outlet,
|
||||
useRouterState,
|
||||
} from "@tanstack/react-router";
|
||||
import Cookies from "js-cookie";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ModeToggle } from "../../../components/mode-toggle";
|
||||
@@ -30,6 +35,8 @@ function RouteComponent() {
|
||||
const sidebarState = Cookies.get("sidebar_state") === "true";
|
||||
const { session } = useAuth();
|
||||
const logout = useLogout();
|
||||
const router = useRouterState();
|
||||
const currentPath = router.location.href;
|
||||
//const { settings } = useSettingStore();
|
||||
//console.log(location.pathname);
|
||||
return (
|
||||
@@ -86,7 +93,9 @@ function RouteComponent() {
|
||||
<DropdownMenuItem>
|
||||
{/* <Link to="/passwordChange">Password Change</Link> */}
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuItem>
|
||||
<Link to="/user/profile">Profile</Link>
|
||||
</DropdownMenuItem>
|
||||
{/* <DropdownMenuItem>Billing</DropdownMenuItem>
|
||||
<DropdownMenuItem>Team</DropdownMenuItem>
|
||||
<DropdownMenuItem>Subscription</DropdownMenuItem> */}
|
||||
@@ -101,7 +110,9 @@ function RouteComponent() {
|
||||
</div>
|
||||
) : (
|
||||
<Button className="m-1">
|
||||
<Link to="/login">Login</Link>
|
||||
<Link to="/login" search={{ redirect: currentPath }}>
|
||||
Login
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user