refactor(frontend): moved the login to its own componet

frontend/src/routes/login.tsx

@@ -1,15 +1,6 @@
-import {createFileRoute, redirect, useRouter} from "@tanstack/react-router";
-import {useForm, Controller} from "react-hook-form";
-import {zodResolver} from "@hookform/resolvers/zod";
-import {LstCard} from "../components/extendedUI/LstCard";
-import {Button} from "../components/ui/button";
-import {Input} from "../components/ui/input";
-import {CardHeader} from "../components/ui/card";
-import {Label} from "../components/ui/label";
-import {toast} from "sonner";
-import {useSessionStore} from "../lib/store/sessionStore";
-import {Checkbox} from "../components/ui/checkbox";
-import {z} from "zod";
+import {createFileRoute, redirect} from "@tanstack/react-router";
+
+import LoginForm from "@/components/auth/LoginForm";
 
 export const Route = createFileRoute("/login")({
     component: RouteComponent,
@@ -23,117 +14,10 @@ export const Route = createFileRoute("/login")({
     },
 });
 
-const FormSchema = z.object({
-    username: z.string().min(1, "You must enter a valid username"),
-    password: z.string().min(4, "You must enter a valid password"),
-    rememberMe: z.boolean(),
-});
-
 function RouteComponent() {
-    const {setSession} = useSessionStore();
-    const rememeberMe = localStorage.getItem("rememberMe") === "true";
-    const username = localStorage.getItem("username") || "";
-    const router = useRouter();
-    const {
-        register,
-        handleSubmit,
-        control,
-        formState: {errors},
-    } = useForm<z.infer<typeof FormSchema>>({
-        resolver: zodResolver(FormSchema),
-        defaultValues: {
-            username: username || "",
-            password: "",
-            rememberMe: rememeberMe,
-        },
-    });
-
-    const onSubmitLogin = async (value: z.infer<typeof FormSchema>) => {
-        // Do something with form data
-        console.log(value);
-        // first update the rememberMe incase it was selected
-        if (value.rememberMe) {
-            localStorage.setItem("rememberMe", value.rememberMe.toString());
-            localStorage.setItem("username", value.username);
-        } else {
-            localStorage.removeItem("rememberMe");
-            localStorage.removeItem("username");
-        }
-
-        try {
-            const response = await fetch("/api/auth/login", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({username: value.username, password: value.password}),
-            });
-
-            const data = await response.json();
-
-            // Store token in localStorage
-            // localStorage.setItem("auth_token", data.data.token);
-
-            setSession(data.user, data.token);
-            toast.success(`You are logged in as ${data.user.username}`);
-            router.navigate({to: "/"});
-        } catch (err) {
-            toast.error("Invalid credentials");
-        }
-    };
     return (
         <div className="ml-[25%]">
-            <LstCard className="p-3 w-96">
-                <CardHeader>
-                    <div>
-                        <p className="text-2xl">Login to LST</p>
-                    </div>
-                </CardHeader>
-                <hr className="rounded"></hr>
-                <form onSubmit={handleSubmit(onSubmitLogin)}>
-                    <div>
-                        <Label>Username</Label>
-                        <Input
-                            placeholder="smith001"
-                            {...register("username")}
-                            className={errors.username ? "border-red-500" : ""}
-                            aria-invalid={!!errors.username}
-                        />
-                        {errors.username && <p className="text-red-500 text-sm mt-1">{errors.username.message}</p>}
-                    </div>
-                    <div>
-                        <>
-                            <Label htmlFor={"password"}>Password</Label>
-                            <Input
-                                type="password"
-                                {...register("password")}
-                                className={errors.password ? "border-red-500" : ""}
-                                aria-invalid={!!errors.password}
-                            />
-                            {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password.message}</p>}
-                        </>
-                    </div>
-                    <div className="flex justify-between pt-2">
-                        <div className="flex">
-                            <Controller
-                                render={({field}) => (
-                                    <Checkbox id="remember" checked={field.value} onCheckedChange={field.onChange} />
-                                )}
-                                control={control}
-                                name="rememberMe"
-                                defaultValue={rememeberMe}
-                            />
-                            <Label htmlFor="remember" className="pl-2">
-                                remember me
-                            </Label>
-                        </div>
-
-                        <div className="flex justify-end">
-                            <Button type="submit">Submit</Button>
-                        </div>
-                    </div>
-                </form>
-            </LstCard>
+            <LoginForm />
         </div>
     );
 }