login form created

2026-03-18 19:14:08 -05:00
parent e025d0f5cc
commit 6b8d7b53d0
20 changed files with 800 additions and 73 deletions
--- a/frontend/src/routes/(auth)/-components/LoginForm.tsx
+++ b/frontend/src/routes/(auth)/-components/LoginForm.tsx
@@ -0,0 +1,113 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+
+export default function LoginForm({ redirectPath }: { redirectPath: string }) {
+	const loginEmail = localStorage.getItem("loginEmail") || "";
+	const rememberMe = localStorage.getItem("rememberMe") === "true";
+	const navigate = useNavigate();
+
+	const form = useAppForm({
+		defaultValues: {
+			email: loginEmail,
+			password: "",
+			rememberMe: rememberMe,
+		},
+		onSubmit: async ({ value }) => {
+			// set remember me incase we want it later
+			if (value.rememberMe) {
+				localStorage.setItem("rememberMe", value.rememberMe.toString());
+				localStorage.setItem("loginEmail", value.email);
+			} else {
+				localStorage.removeItem("rememberMe");
+				localStorage.removeItem("loginEmail");
+			}
+
+			try {
+				const login = await authClient.signIn.email({
+					email: value.email,
+					password: value.password,
+					fetchOptions: {
+						onSuccess: () => {
+							navigate({ to: redirectPath ?? "/" });
+						},
+					},
+				});
+
+				if (login.error) {
+					toast.error(`${login.error?.message}`);
+					return;
+				}
+				toast.success(`Welcome back ${login.data?.user.name}`);
+			} catch (error) {
+				console.log(error);
+			}
+		},
+	});
+
+	return (
+		<div>
+			<Card 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="email">
+							{(field) => (
+								<field.InputField label="Email" inputType="email" required />
+							)}
+						</form.AppField>
+						<form.AppField name="password">
+							{(field) => (
+								<field.InputPasswordField label="Password" required={true} />
+							)}
+						</form.AppField>
+
+						<div className="flex flex-row justify-between mt-3 mb-3">
+							<form.AppField name="rememberMe">
+								{(field) => <field.CheckboxField label="Remember me" />}
+							</form.AppField>
+
+							<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-center mt-2">
+						Don&apos;t have an account?{" "}
+						<Link to={"/user/signup"} className="underline underline-offset-4">
+							Sign up
+						</Link>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}