refactor(front end): login fixes to account for the forced password change

frontend/src/routes/(auth)/-components/LoginForm.tsx

@@ -1,133 +1,129 @@
 import { Link, useRouter, useSearch } from "@tanstack/react-router";
-import {
-    getSession,
-    signin,
-    useAuth,
-    useUserRoles,
-} from "../../../lib/authClient";
-import { useAppForm } from "../../../lib/formStuff";
-import { LstCard } from "../../../components/ui/lstCard";
+import axios from "axios";
 import { toast } from "sonner";
 import {
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
 } from "../../../components/ui/card";
+import { LstCard } from "../../../components/ui/lstCard";
+import { getSession, useAuth, useUserRoles } from "../../../lib/authClient";
+import { useAppForm } from "../../../lib/formStuff";
 
 export default function LoginForm() {
-    const router = useRouter();
-    const search = useSearch({ from: "/(auth)/login" });
-    const username = localStorage.getItem("username") || "";
-    const rememeberMe = localStorage.getItem("rememberMe") === "true";
-    const { setSession } = useAuth();
-    const { fetchRoles } = useUserRoles();
+	const router = useRouter();
+	const search = useSearch({ from: "/(auth)/login" });
+	const username = localStorage.getItem("username") || "";
+	const rememberMe = localStorage.getItem("rememberMe") === "true";
+	const { setSession } = useAuth();
+	const { fetchRoles } = useUserRoles();
 
-    const form = useAppForm({
-        defaultValues: {
-            username: username,
-            password: "",
-            rememberMe: rememeberMe,
-        },
-        onSubmit: async ({ value }) => {
-            if (value.rememberMe) {
-                localStorage.setItem("rememberMe", value.rememberMe.toString());
-                localStorage.setItem("username", value.username);
-            } else {
-                localStorage.removeItem("rememberMe");
-                localStorage.removeItem("username");
-            }
+	const form = useAppForm({
+		defaultValues: {
+			username: username,
+			password: "",
+			rememberMe: rememberMe,
+		},
+		onSubmit: async ({ value }) => {
+			if (value.rememberMe) {
+				localStorage.setItem("rememberMe", value.rememberMe.toString());
+				localStorage.setItem("username", value.username);
+			} else {
+				localStorage.removeItem("rememberMe");
+				localStorage.removeItem("username");
+			}
 
-            try {
-                await signin({
-                    username: value.username,
-                    password: value.password,
-                });
+			try {
+				await axios.post("/lst/api/user/login", {
+					username: value.username,
+					password: value.password,
+				});
 
-                const session = await getSession();
-                setSession(session);
-                form.reset();
-                fetchRoles();
+				const session = await getSession();
+				setSession(session);
+				form.reset();
+				fetchRoles();
 
-                toast.success(
-                    `Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `
-                );
-                router.invalidate();
-                router.history.push(search.redirect ? search.redirect : "/");
-            } catch (error) {
-                // @ts-ignore
-                toast.error(error?.message);
-            }
-        },
-    });
-    return (
-        <div className="">
-            <LstCard className="p-3 w-96">
-                <CardHeader>
-                    <CardTitle>Login to your account</CardTitle>
-                    <CardDescription>
-                        Enter your username and password below
-                    </CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <form
-                        onSubmit={(e) => {
-                            e.preventDefault();
-                            form.handleSubmit();
-                        }}
-                    >
-                        <form.AppField
-                            name="username"
-                            children={(field) => (
-                                <field.InputField
-                                    label="Username"
-                                    inputType="string"
-                                    required={true}
-                                />
-                            )}
-                        />
-                        <form.AppField
-                            name="password"
-                            children={(field) => (
-                                <field.InputPasswordField
-                                    label="Password"
-                                    required={true}
-                                />
-                            )}
-                        />
-                        <div className="flex flex-row justify-between mt-3 mb-3">
-                            <form.AppField
-                                name="rememberMe"
-                                children={(field) => (
-                                    <field.CheckboxField label="Remember me" />
-                                )}
-                            />
-                            <Link
-                                to="/user/resetpassword"
-                                className="inline-block text-sm underline-offset-4 hover:underline"
-                            >
-                                Forgot your password?
-                            </Link>
-                        </div>
+				toast.success(
+					`Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `,
+				);
+				router.invalidate();
+				router.history.push(search.redirect ? search.redirect : "/");
+			} catch (error) {
+				// @ts-ignore
+				if (!error.response.success) {
+					// @ts-ignore
+					toast.error(error.response.data.message);
+				} else {
+					// @ts-ignore
+					toast.error(error?.message);
+				}
+			}
+		},
+	});
+	return (
+		<div className="">
+			<LstCard className="p-3 w-96">
+				<CardHeader>
+					<CardTitle>Login to your account</CardTitle>
+					<CardDescription>
+						Enter your username and password below
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						<form.AppField
+							name="username"
+							children={(field) => (
+								<field.InputField
+									label="Username"
+									inputType="string"
+									required={true}
+								/>
+							)}
+						/>
+						<form.AppField
+							name="password"
+							children={(field) => (
+								<field.InputPasswordField label="Password" required={true} />
+							)}
+						/>
+						<div className="flex flex-row justify-between mt-3 mb-3">
+							<form.AppField
+								name="rememberMe"
+								children={(field) => (
+									<field.CheckboxField label="Remember me" />
+								)}
+							/>
+							<Link
+								to="/user/resetpassword"
+								className="inline-block text-sm underline-offset-4 hover:underline"
+							>
+								Forgot your password?
+							</Link>
+						</div>
 
-                        <div className="flex justify-end mt-2">
-                            <form.AppForm>
-                                <form.SubmitButton>Login</form.SubmitButton>
-                            </form.AppForm>
-                        </div>
-                    </form>
+						<div className="flex justify-end mt-2">
+							<form.AppForm>
+								<form.SubmitButton>Login</form.SubmitButton>
+							</form.AppForm>
+						</div>
+					</form>
 
-                    <div className="mt-4 text-center text-sm">
-                        Don&apos;t have an account?{" "}
-                        <Link
-                            to={"/user/signup"}
-                            className="underline underline-offset-4"
-                        >
-                            Sign up
-                        </Link>
-                    </div>
-                </CardContent>
-            </LstCard>
-        </div>
-    );
+					<div className="mt-4 text-center text-sm">
+						Don&apos;t have an account?{" "}
+						<Link to={"/user/signup"} className="underline underline-offset-4">
+							Sign up
+						</Link>
+					</div>
+				</CardContent>
+			</LstCard>
+		</div>
+	);
 }

frontend/src/routes/(auth)/user/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/(auth)/user/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div>
+			<span>Nothing here </span>
+		</div>
+	);
+}

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

@@ -0,0 +1,40 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { authClient, useAuth } from "../../../lib/authClient";
+
+export const Route = createFileRoute("/(auth)/user/profile")({
+	beforeLoad: async () => {
+		const result = await authClient.getSession({
+			query: { disableCookieCache: true }, // force DB/Server lookup
+		});
+
+		//console.log("session check:", result.data);
+
+		if (!result.data) {
+			throw redirect({
+				to: "/login",
+				search: {
+					redirect: location.pathname + location.search,
+				},
+			});
+		}
+	},
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { session } = useAuth();
+
+	return (
+		<div className="m-2">
+			<div>
+				<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>
+			</div>
+		</div>
+	);
+}