user forms added

frontend/src/components/Header.tsx

@@ -69,7 +69,7 @@ export default function Header() {
 									</DropdownMenuLabel>
 									<DropdownMenuSeparator />
 									<DropdownMenuItem>
-										<Link to="/">Profile</Link>
+										<Link to="/user/profile">Profile</Link>
 									</DropdownMenuItem>
 
 									{/* <DropdownMenuItem>Billing</DropdownMenuItem>

frontend/src/components/ui/spinner.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }

frontend/src/lib/formSutff/Input.Field.tsx

@@ -20,7 +20,7 @@ export const InputField = ({ label, inputType, required }: InputFieldProps) => {
 	const field = useFieldContext<any>();
 
 	return (
-		<div className="grid gap-3">
+		<div className="grid gap-3 mt-2">
 			<Label htmlFor={field.name}>{label}</Label>
 			<Input
 				id={field.name}

frontend/src/lib/formSutff/SubmitButton.tsx

@@ -1,6 +1,7 @@
 import { useStore } from "@tanstack/react-form";
 import { Button } from "@/components/ui/button";
 import { useFormContext } from ".";
+import { Spinner } from "@/components/ui/spinner";
 
 type SubmitButtonProps = {
 	children: React.ReactNode;
@@ -17,7 +18,9 @@ export const SubmitButton = ({ children }: SubmitButtonProps) => {
 	return (
 		<div className="">
 			<Button type="submit" disabled={isSubmitting}>
-				{children}
+				{isSubmitting ? <><Spinner data-icon="inline-start" /> Submitting </> : <>{children}</>
+        }
+				
 			</Button>
 		</div>
 	);

frontend/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as AdminLogsRouteImport } from './routes/admin/logs'
 import { Route as authLoginRouteImport } from './routes/(auth)/login'
 import { Route as authUserSignupRouteImport } from './routes/(auth)/user.signup'
 import { Route as authUserResetpasswordRouteImport } from './routes/(auth)/user.resetpassword'
+import { Route as authUserProfileRouteImport } from './routes/(auth)/user.profile'
 
 const AboutRoute = AboutRouteImport.update({
   id: '/about',
@@ -46,12 +47,18 @@ const authUserResetpasswordRoute = authUserResetpasswordRouteImport.update({
   path: '/user/resetpassword',
   getParentRoute: () => rootRouteImport,
 } as any)
+const authUserProfileRoute = authUserProfileRouteImport.update({
+  id: '/(auth)/user/profile',
+  path: '/user/profile',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
   '/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
+  '/user/profile': typeof authUserProfileRoute
   '/user/resetpassword': typeof authUserResetpasswordRoute
   '/user/signup': typeof authUserSignupRoute
 }
@@ -60,6 +67,7 @@ export interface FileRoutesByTo {
   '/about': typeof AboutRoute
   '/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
+  '/user/profile': typeof authUserProfileRoute
   '/user/resetpassword': typeof authUserResetpasswordRoute
   '/user/signup': typeof authUserSignupRoute
 }
@@ -69,6 +77,7 @@ export interface FileRoutesById {
   '/about': typeof AboutRoute
   '/(auth)/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
+  '/(auth)/user/profile': typeof authUserProfileRoute
   '/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
   '/(auth)/user/signup': typeof authUserSignupRoute
 }
@@ -79,6 +88,7 @@ export interface FileRouteTypes {
     | '/about'
     | '/login'
     | '/admin/logs'
+    | '/user/profile'
     | '/user/resetpassword'
     | '/user/signup'
   fileRoutesByTo: FileRoutesByTo
@@ -87,6 +97,7 @@ export interface FileRouteTypes {
     | '/about'
     | '/login'
     | '/admin/logs'
+    | '/user/profile'
     | '/user/resetpassword'
     | '/user/signup'
   id:
@@ -95,6 +106,7 @@ export interface FileRouteTypes {
     | '/about'
     | '/(auth)/login'
     | '/admin/logs'
+    | '/(auth)/user/profile'
     | '/(auth)/user/resetpassword'
     | '/(auth)/user/signup'
   fileRoutesById: FileRoutesById
@@ -104,6 +116,7 @@ export interface RootRouteChildren {
   AboutRoute: typeof AboutRoute
   authLoginRoute: typeof authLoginRoute
   AdminLogsRoute: typeof AdminLogsRoute
+  authUserProfileRoute: typeof authUserProfileRoute
   authUserResetpasswordRoute: typeof authUserResetpasswordRoute
   authUserSignupRoute: typeof authUserSignupRoute
 }
@@ -152,6 +165,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof authUserResetpasswordRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/(auth)/user/profile': {
+      id: '/(auth)/user/profile'
+      path: '/user/profile'
+      fullPath: '/user/profile'
+      preLoaderRoute: typeof authUserProfileRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -160,6 +180,7 @@ const rootRouteChildren: RootRouteChildren = {
   AboutRoute: AboutRoute,
   authLoginRoute: authLoginRoute,
   AdminLogsRoute: AdminLogsRoute,
+  authUserProfileRoute: authUserProfileRoute,
   authUserResetpasswordRoute: authUserResetpasswordRoute,
   authUserSignupRoute: authUserSignupRoute,
 }

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

@@ -0,0 +1,90 @@
+import { useRouter } from "@tanstack/react-router";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+
+export default function ChangePassword() {
+	const router = useRouter();
+	const form = useAppForm({
+		defaultValues: {
+			currentPassword: "",
+			newPassword: "",
+			confirmPassword: "",
+		},
+		onSubmit: async ({ value }) => {
+			if (value.newPassword !== value.confirmPassword) {
+				toast.error("Passwords do not match");
+				return;
+			}
+			const { data, error } = await authClient.changePassword({
+				newPassword: value.newPassword,
+				currentPassword: value.currentPassword,
+				revokeOtherSessions: true,
+			});
+
+			if (data) {
+				toast.success("Password has been updated");
+				form.reset();
+				router.invalidate();
+
+				//navigate({ to: "/login" });
+			}
+
+			if (error) {
+				toast.success(error.message);
+			}
+		},
+	});
+	return (
+		<div>
+			<Card className="p-6 w-96">
+				<CardHeader>
+					<CardTitle>Change password</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						<form.AppField name="currentPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="Enter your current password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<form.AppField name="newPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="New password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<form.AppField name="confirmPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="Re-enter your password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<div className="flex justify-end mt-6">
+							<form.AppForm>
+								<form.SubmitButton>Update Profile</form.SubmitButton>
+							</form.AppForm>
+						</div>
+					</form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -4,7 +4,6 @@ import {
 	Card,
 	CardContent,
 	CardDescription,
-	CardFooter,
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";

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

@@ -0,0 +1,76 @@
+import { Link } from "@tanstack/react-router";
+import { toast } from "sonner";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+
+export default function ResetForm() {
+	const form = useAppForm({
+		defaultValues: {
+			email: "",
+		},
+		onSubmit: async ({ value }) => {
+			const { data, error } = await authClient.requestPasswordReset({
+				email: value.email,
+				redirectTo: `${window.location.origin}`,
+			});
+
+			if (data) {
+				toast.success(data.message);
+			}
+
+			if (error) {
+				toast.error(error.message);
+			}
+		},
+	});
+
+	return (
+		<div className="flex justify-center mt-2">
+			<Card className="p-6 w-96">
+				<CardHeader>
+					<CardTitle>Reset your password</CardTitle>
+					<CardDescription>
+						Enter your email address and we’ll send you a reset link
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						<form.AppField name="email">
+							{(field) => (
+								<field.InputField label="Email" inputType="email" required />
+							)}
+						</form.AppField>
+
+						<div className="flex justify-end mt-6">
+							<form.AppForm>
+								<form.SubmitButton>Send Reset Link</form.SubmitButton>
+							</form.AppForm>
+						</div>
+					</form>
+
+					<div className="mt-6 text-center text-sm text-gray-600">
+						Remembered your password?{" "}
+						<Link
+							to="/login"
+							className="text-primary underline underline-offset-4 hover:text-primary/80"
+						>
+							Back to login
+						</Link>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -0,0 +1,94 @@
+import { Link } from "@tanstack/react-router";
+import React from "react";
+import { toast } from "sonner";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+
+export default function ResetPassword({ token }: { token: string }) {
+	const form = useAppForm({
+		defaultValues: {
+			password: "",
+			confirmPassword: "",
+		},
+		onSubmit: async ({ value }) => {
+			if (!token) {
+				toast.error("No token was included");
+				return;
+			}
+
+			const { data, error } = await authClient.resetPassword({
+				newPassword: value.password,
+				token,
+			});
+
+			if (data) {
+				toast.success("Password has been reset");
+			}
+
+			if (error) {
+				toast.error(error.message);
+			}
+		},
+	});
+
+	return (
+		<div className="flex justify-center mt-2">
+			<Card className="p-6 w-96">
+				<CardHeader>
+					<CardTitle>Reset your password</CardTitle>
+					<CardDescription>
+						Enter your email address and we’ll send you a reset link
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						<form.AppField name="password">
+							{(field) => (
+								<field.InputPasswordField
+									label="New Password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+						<form.AppField name="confirmPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="Confirm Password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<div className="flex justify-end mt-6">
+							<form.AppForm>
+								<form.SubmitButton>Send Reset Link</form.SubmitButton>
+							</form.AppForm>
+						</div>
+					</form>
+
+					<div className="mt-6 text-center text-sm text-gray-600">
+						Remembered your password?{" "}
+						<Link
+							to="/login"
+							className="text-primary underline underline-offset-4 hover:text-primary/80"
+						>
+							Back to login
+						</Link>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -0,0 +1,99 @@
+import { createFileRoute, redirect, useRouter } from "@tanstack/react-router";
+import { toast } from "sonner";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { authClient, useSession } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+import ChangePassword from "./-components/ChangePassword";
+
+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 { data: session } = useSession();
+	const router = useRouter();
+	const form = useAppForm({
+		defaultValues: {
+			name: session?.user.name,
+		},
+		onSubmit: async ({ value }) => {
+			const { data, error } = await authClient.updateUser({
+				name: value.name,
+			});
+
+			if (data) {
+				toast.success("Profile has been updated");
+				form.reset();
+				//navigate({ to: "/login" });
+			}
+
+			if (error) {
+				toast.success(error.message);
+			}
+		},
+	});
+	return (
+		<div className="flex justify-center mt-2 gap-2">
+			<div>
+				<Card className="p-6 w-96">
+					<CardHeader>
+						<CardTitle>Profile</CardTitle>
+						<CardDescription>
+							Change your profile and password below
+						</CardDescription>
+					</CardHeader>
+
+					<CardContent>
+						<form
+							onSubmit={(e) => {
+								e.preventDefault();
+								form.handleSubmit();
+							}}
+						>
+							<form.AppField name="name">
+								{(field) => (
+									<field.InputField
+										label="Name"
+										inputType="string"
+										required={true}
+									/>
+								)}
+							</form.AppField>
+
+							<div className="flex justify-end mt-6">
+								<form.AppForm>
+									<form.SubmitButton>Update Profile</form.SubmitButton>
+								</form.AppForm>
+							</div>
+						</form>
+					</CardContent>
+				</Card>
+			</div>
+			<div>
+				<ChangePassword />
+			</div>
+		</div>
+	);
+}

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

@@ -1,9 +1,31 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { toast } from "sonner";
+import z from "zod";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+import ResetForm from "./-components/ResetForm";
+import ResetPassword from "./-components/ResetPassword";
 
-export const Route = createFileRoute('/(auth)/user/resetpassword')({
-  component: RouteComponent,
-})
+export const Route = createFileRoute("/(auth)/user/resetpassword")({
+	validateSearch: z.object({
+		token: z.string().optional(),
+	}),
+	component: RouteComponent,
+});
 
 function RouteComponent() {
-  return <div>Hello "/(auth)/user/resetpassword"!</div>
+	const { token } = Route.useSearch();
+
+	return (
+		<div className="">
+			{token ? <ResetPassword token={token} /> : <ResetForm />}
+		</div>
+	);
 }

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

@@ -1,9 +1,128 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
 
-export const Route = createFileRoute('/(auth)/user/signup')({
-  component: RouteComponent,
-})
+export const Route = createFileRoute("/(auth)/user/signup")({
+	component: RouteComponent,
+});
 
 function RouteComponent() {
-  return <div>Hello "/(auth)/user/signup"!</div>
+	const navigate = useNavigate();
+	const form = useAppForm({
+		defaultValues: {
+			name: "",
+			email: "",
+			password: "",
+			confirmPassword: "",
+		},
+		onSubmit: async ({ value }) => {
+			if (value.password !== value.confirmPassword) {
+				toast.error("Passwords do not match");
+				return;
+			}
+
+			const { data, error } = await authClient.signUp.email({
+				name: value.name,
+				email: value.email,
+				password: value.password,
+				callbackURL: `${window.location.origin}/lst/app`,
+			});
+
+			if (data) {
+				toast.success(`Welcome ${value.name}, to lst.`);
+				navigate({ to: "/" });
+			}
+
+			if (error) {
+				toast.error(error.message);
+			}
+		},
+	});
+	return (
+		<div className="flex justify-center mt-2">
+			<Card className="p-6 w-96">
+				<CardHeader>
+					<CardTitle>Create an account</CardTitle>
+					<CardDescription>Fill in your details to get started</CardDescription>
+				</CardHeader>
+
+				<CardContent>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						{/* Username */}
+						<form.AppField name="name">
+							{(field) => (
+								<field.InputField
+									label="Name"
+									inputType="text"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						{/* Email */}
+						<form.AppField name="email">
+							{(field) => (
+								<field.InputField
+									label="Email address"
+									inputType="email"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						{/* Password */}
+						<form.AppField name="password">
+							{(field) => (
+								<field.InputField
+									label="Password"
+									inputType="password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						{/* Confirm Password */}
+						<form.AppField name="confirmPassword">
+							{(field) => (
+								<field.InputField
+									label="Confirm Password"
+									inputType="password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<div className="flex justify-end mt-6">
+							<form.AppForm>
+								<form.SubmitButton>Sign Up</form.SubmitButton>
+							</form.AppForm>
+						</div>
+					</form>
+
+					<div className="mt-6 text-center text-sm text-gray-600">
+						Already have an account?{" "}
+						<Link
+							to={"/login"}
+							className="text-primary underline underline-offset-4 hover:text-primary/80"
+						>
+							Log in
+						</Link>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
 }

frontend/src/routes/index.tsx

@@ -1,8 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import z from "zod";
-
-import { useSession } from "../lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { authClient, useSession } from "../lib/auth-client";
 
 export const Route = createFileRoute("/")({
 	validateSearch: z.object({
@@ -13,11 +13,12 @@ export const Route = createFileRoute("/")({
 });
 
 function Index() {
-	const { data: session, isPending } = useSession();
+	const { isPending } = useSession();
 
 	if (isPending)
 		return <div className="flex justify-center mt-10">Loading...</div>;
 	// if (!session) return <button>Sign In</button>
+
 	return (
 		<div className="flex justify-center mt-10">
 			<h3 className="w-2xl text-3xl">Welcome Home!</h3>