refactor(logins): added a proper redirect to the last place you were

app/src/internal/admin/routes/users/getActiveSessions.ts

@@ -3,7 +3,7 @@ import { auth } from "../../../../pkg/auth/auth.js";
 
 const router = Router();
 
-router.patch("/:userId", async (req: Request, res: Response) => {
+router.get("/:userId", async (req: Request, res: Response) => {
 	const userId = req.params.userId;
 	const cookieHeader = req.headers.cookie ?? "";
 	const authorization = req.headers.authorization ?? "";

frontend/src/components/navBar/Nav.tsx

@@ -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>
 				)}

frontend/src/routes/_app/(auth)/-components/ChangePassword.tsx

@@ -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>
+	);
+}

frontend/src/routes/_app/(auth)/login.tsx

@@ -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>
 	);
 }

frontend/src/routes/_app/(auth)/user/profile.tsx

@@ -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>
+					<li></li>
-				</ol>
+				</ol> */}
 			</div>
+			<ChangePassword />
 		</div>
 	);
 }

frontend/src/routes/_old/old/route.tsx

@@ -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>