login form created

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

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

@@ -0,0 +1,32 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import z from "zod";
+import { authClient } from "@/lib/auth-client";
+import LoginForm from "./-components/LoginForm";
+
+export const Route = createFileRoute("/(auth)/login")({
+	component: RouteComponent,
+	validateSearch: z.object({
+		redirect: z.string().optional(),
+	}),
+
+	beforeLoad: async () => {
+		const result = await authClient.getSession({
+			query: { disableCookieCache: true },
+		});
+
+		if (result.data) {
+			throw redirect({ to: "/" });
+		}
+	},
+});
+
+function RouteComponent() {
+	const search = Route.useSearch();
+	const redirectPath = search.redirect ?? "/";
+
+	return (
+		<div className="flex justify-center mt-10">
+			<LoginForm redirectPath={redirectPath} />
+		</div>
+	);
+}

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

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(auth)/user/resetpassword')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(auth)/user/resetpassword"!</div>
+}

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

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(auth)/user/signup')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(auth)/user/signup"!</div>
+}

frontend/src/routes/__root.tsx

@@ -1,9 +1,9 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { Toaster } from "sonner";
 import Header from "@/components/Header";
 import { AppSidebar } from "@/components/Sidebar/sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/lib/theme-provider";
 
 const RootLayout = () => (

frontend/src/routes/index.tsx

@@ -1,12 +1,8 @@
-import {
-	createFileRoute,
-	useNavigate,
-	useRouter,
-} from "@tanstack/react-router";
-import { toast } from "sonner";
+import { createFileRoute } from "@tanstack/react-router";
+
 import z from "zod";
-import { Button } from "../components/ui/button";
-import { authClient, useSession } from "../lib/auth-client";
+
+import { useSession } from "../lib/auth-client";
 
 export const Route = createFileRoute("/")({
 	validateSearch: z.object({
@@ -18,44 +14,13 @@ export const Route = createFileRoute("/")({
 
 function Index() {
 	const { data: session, isPending } = useSession();
-	const router = useRouter();
-	const navigate = useNavigate();
-	const search = Route.useSearch();
 
-	const login = async () => {
-		try {
-			await authClient.signIn.email({
-				email: "blake.matthes@alpla.com",
-				password: "nova0511",
-				fetchOptions: {
-					onSuccess: () => {
-						navigate({ to: search.redirect ?? "/" });
-					},
-				},
-			});
-
-			toast.success("logged in");
-		} catch (error: any) {
-			console.error(error.response);
-		}
-
-		//console.log(session)
-		router.invalidate();
-	};
-
-	if (isPending) return <div>Loading...</div>;
+	if (isPending)
+		return <div className="flex justify-center mt-10">Loading...</div>;
 	// if (!session) return <button>Sign In</button>
 	return (
-		<div className="p-2">
+		<div className="flex justify-center mt-10">
 			<h3 className="w-2xl text-3xl">Welcome Home!</h3>
-			{!session ? (
-				<Button onClick={login}>Sign In</Button>
-			) : (
-				<div>
-					<span>welcome {session.user?.name}</span>
-					<Button onClick={() => authClient.signOut()}>Signout</Button>
-				</div>
-			)}
 		</div>
 	);
 }