ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use rhf for login and onboarding

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-10-02 21:52:55 +02:00
parent 2be7e18ab5
commit 1ad8f69355
2 changed files with 145 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
apps/client/app/routes/login.tsx
View File

@@ -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>

146
apps/client/app/routes/onboarding.tsx
View File

@@ -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>