From 1ad8f69355bb44ebfe5a330a67a93f557ddb3822 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Thu, 2 Oct 2025 21:52:55 +0200
Subject: [PATCH] refactor: use rhf for login and onboarding

---
 apps/client/app/routes/login.tsx      | 102 ++++++++++--------
 apps/client/app/routes/onboarding.tsx | 146 +++++++++++++++-----------
 2 files changed, 145 insertions(+), 103 deletions(-)

diff --git a/apps/client/app/routes/login.tsx b/apps/client/app/routes/login.tsx
index 3c3d0dc..a414fee 100644
--- a/apps/client/app/routes/login.tsx
+++ b/apps/client/app/routes/login.tsx
@@ -1,19 +1,32 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
 import { useMutation } from "@tanstack/react-query";
-import { useId, useState } from "react";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { loginMutation } from "~/api-client/@tanstack/react-query.gen";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
+
+const loginSchema = type({
+	username: "2<=string<=50",
+	password: "string>=1",
+});
+
+type LoginFormValues = typeof loginSchema.inferIn;
 
 export default function LoginPage() {
 	const navigate = useNavigate();
-	const [username, setUsername] = useState("");
-	const [password, setPassword] = useState("");
-	const usernameId = useId();
-	const passwordId = useId();
+
+	const form = useForm<LoginFormValues>({
+		resolver: arktypeResolver(loginSchema),
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+	});
 
 	const login = useMutation({
 		...loginMutation(),
@@ -26,17 +39,11 @@ export default function LoginPage() {
 		},
 	});
 
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!username.trim() || !password.trim()) {
-			toast.error("Username and password are required");
-			return;
-		}
-
+	const onSubmit = (values: LoginFormValues) => {
 		login.mutate({
 			body: {
-				username: username.trim(),
-				password: password.trim(),
+				username: values.username.trim(),
+				password: values.password.trim(),
 			},
 		});
 	};
@@ -49,36 +56,45 @@ export default function LoginPage() {
 					<CardDescription>Sign in to your account</CardDescription>
 				</CardHeader>
 				<CardContent>
-					<form onSubmit={handleSubmit} className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor={usernameId}>Username</Label>
-							<Input
-								id={usernameId}
-								type="text"
-								placeholder="Enter your username"
-								value={username}
-								onChange={(e) => setUsername(e.target.value)}
-								disabled={login.isPending}
-								autoFocus
-								required
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="text"
+												placeholder="Enter your username"
+												disabled={login.isPending}
+												autoFocus
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor={passwordId}>Password</Label>
-							<Input
-								id={passwordId}
-								type="password"
-								placeholder="Enter your password"
-								value={password}
-								onChange={(e) => setPassword(e.target.value)}
-								disabled={login.isPending}
-								required
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input {...field} type="password" placeholder="Enter your password" disabled={login.isPending} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</div>
-						<Button type="submit" className="w-full" loading={login.isPending}>
-							Sign In
-						</Button>
-					</form>
+							<Button type="submit" className="w-full" loading={login.isPending}>
+								Sign In
+							</Button>
+						</form>
+					</Form>
 				</CardContent>
 			</Card>
 		</div>
diff --git a/apps/client/app/routes/onboarding.tsx b/apps/client/app/routes/onboarding.tsx
index a9b1efc..a8ff4d4 100644
--- a/apps/client/app/routes/onboarding.tsx
+++ b/apps/client/app/routes/onboarding.tsx
@@ -1,23 +1,36 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
 import { useMutation } from "@tanstack/react-query";
-import { useId, useState } from "react";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { registerMutation } from "~/api-client/@tanstack/react-query.gen";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
+
+const onboardingSchema = type({
+	username: "2<=string<=50",
+	password: "string>=8",
+	confirmPassword: "string>=1",
+});
+
+type OnboardingFormValues = typeof onboardingSchema.inferIn;
 
 export default function OnboardingPage() {
 	const navigate = useNavigate();
-	const [username, setUsername] = useState("");
-	const [password, setPassword] = useState("");
-	const [confirmPassword, setConfirmPassword] = useState("");
-	const usernameId = useId();
-	const passwordId = useId();
-	const confirmPasswordId = useId();
 
-	const register = useMutation({
+	const form = useForm<OnboardingFormValues>({
+		resolver: arktypeResolver(onboardingSchema),
+		defaultValues: {
+			username: "",
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const registerUser = useMutation({
 		...registerMutation(),
 		onSuccess: async () => {
 			toast.success("Admin user created successfully!");
@@ -29,22 +42,19 @@ export default function OnboardingPage() {
 		},
 	});
 
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!username.trim() || !password.trim()) {
-			toast.error("Username and password are required");
+	const onSubmit = (values: OnboardingFormValues) => {
+		if (values.password !== values.confirmPassword) {
+			form.setError("confirmPassword", {
+				type: "manual",
+				message: "Passwords do not match",
+			});
 			return;
 		}
 
-		if (password !== confirmPassword) {
-			toast.error("Passwords do not match");
-			return;
-		}
-
-		register.mutate({
+		registerUser.mutate({
 			body: {
-				username: username.trim(),
-				password: password.trim(),
+				username: values.username.trim(),
+				password: values.password.trim(),
 			},
 		});
 	};
@@ -57,48 +67,64 @@ export default function OnboardingPage() {
 					<CardDescription>Create the admin user to get started</CardDescription>
 				</CardHeader>
 				<CardContent>
-					<form onSubmit={handleSubmit} className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor={usernameId}>Username</Label>
-							<Input
-								id={usernameId}
-								type="text"
-								placeholder="admin"
-								value={username}
-								onChange={(e) => setUsername(e.target.value)}
-								disabled={register.isPending}
-								autoFocus
-								required
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input {...field} type="text" placeholder="admin" disabled={registerUser.isPending} autoFocus />
+										</FormControl>
+										<FormDescription>Choose a username for the admin account (2-50 characters).</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor={passwordId}>Password</Label>
-							<Input
-								id={passwordId}
-								type="password"
-								placeholder="Enter a secure password"
-								value={password}
-								onChange={(e) => setPassword(e.target.value)}
-								disabled={register.isPending}
-								required
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="password"
+												placeholder="Enter a secure password"
+												disabled={registerUser.isPending}
+											/>
+										</FormControl>
+										<FormDescription>Password must be at least 8 characters long.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor={confirmPasswordId}>Confirm Password</Label>
-							<Input
-								id={confirmPasswordId}
-								type="password"
-								placeholder="Re-enter your password"
-								value={confirmPassword}
-								onChange={(e) => setConfirmPassword(e.target.value)}
-								disabled={register.isPending}
-								required
+							<FormField
+								control={form.control}
+								name="confirmPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Confirm Password</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="password"
+												placeholder="Re-enter your password"
+												disabled={registerUser.isPending}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</div>
-						<Button type="submit" className="w-full" disabled={register.isPending}>
-							{register.isPending ? "Creating..." : "Create Admin User"}
-						</Button>
-					</form>
+							<Button type="submit" className="w-full" loading={registerUser.isPending}>
+								Create Admin User
+							</Button>
+						</form>
+					</Form>
 				</CardContent>
 			</Card>
 		</div>