Rework the login and register forms for the split-screen layout

web/frontend/app/features/auth/components/LoginForm.tsx

@@ -1,8 +1,9 @@
-import { BaseSyntheticEvent } from 'react';
+import { BaseSyntheticEvent, useState } from 'react';
 import { FormState, UseFormRegister } from 'react-hook-form';
 import FormField from '../../../components/ui/forms/FormField';
 import SubmitButton from '../../../components/ui/forms/SubmitButton';
 import type { LoginSchema } from '../schemas';
+import ShowPasswordToggle from './ShowPasswordToggle';
 
 interface LoginFormProps {
     onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
@@ -11,13 +12,15 @@ interface LoginFormProps {
     submitting: boolean;
 }
 
-const LoginForm = (props: LoginFormProps) => (
+const LoginForm = (props: LoginFormProps) => {
-    <form onSubmit={props.onSubmit} className="space-y-3">
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+        <form onSubmit={props.onSubmit} className="flex flex-col gap-4">
             <FormField
                 id="username"
                 type="text"
                 autoComplete="username"
-            placeholder="your_username"
                 label="Username"
                 error={props.formState.errors.username?.message}
                 {...props.register('username')}
@@ -25,20 +28,26 @@ const LoginForm = (props: LoginFormProps) => (
 
             <FormField
                 id="password"
-            type="password"
+                type={showPassword ? 'text' : 'password'}
                 autoComplete="current-password"
-            placeholder="••••••••"
                 label="Password"
                 error={props.formState.errors.password?.message}
                 {...props.register('password')}
             />
 
+            <ShowPasswordToggle
+                shown={showPassword}
+                onToggle={() => setShowPassword((shown) => !shown)}
+            />
+
             <SubmitButton
                 isSubmitting={props.submitting}
-            idleText="Sign In"
+                idleText="Sign in"
-            submittingText="Signing in..."
+                submittingText="Signing in…"
+                className="btn btn-primary min-h-12 w-full"
             />
         </form>
     );
+};
 
 export default LoginForm;

web/frontend/app/features/auth/components/RegisterForm.tsx

@@ -1,8 +1,9 @@
-import { BaseSyntheticEvent } from 'react';
+import { BaseSyntheticEvent, useState } from 'react';
 import { FormState, UseFormRegister } from 'react-hook-form';
 import FormField from '../../../components/ui/forms/FormField';
 import SubmitButton from '../../../components/ui/forms/SubmitButton';
 import type { RegisterSchema } from '../schemas';
+import ShowPasswordToggle from './ShowPasswordToggle';
 
 interface RegisterFormProps {
     onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
@@ -11,26 +12,17 @@ interface RegisterFormProps {
     submitting: boolean;
 }
 
-const RegisterForm = (props: RegisterFormProps) => (
+const RegisterForm = (props: RegisterFormProps) => {
-    <form onSubmit={props.onSubmit} className="space-y-3">
+    const [showPassword, setShowPassword] = useState(false);
-        <FormField
-            id="username"
-            type="text"
-            autoComplete="username"
-            placeholder="your_username"
-            label="Username"
-            hint="3-64 characters, alphanumeric and . _ -"
-            error={props.formState.errors.username?.message}
-            {...props.register('username')}
-        />
 
-        <div className="grid grid-cols-2 gap-3">
+    return (
+        <form onSubmit={props.onSubmit} className="flex flex-col gap-4">
+            <div className="grid grid-cols-1 gap-3.5 min-[420px]:grid-cols-2">
                 <FormField
                     id="firstName"
                     type="text"
                     autoComplete="given-name"
-                placeholder="Jane"
+                    label="First name"
-                label="First Name"
                     error={props.formState.errors.firstName?.message}
                     {...props.register('firstName')}
                 />
@@ -39,18 +31,26 @@ const RegisterForm = (props: RegisterFormProps) => (
                     id="lastName"
                     type="text"
                     autoComplete="family-name"
-                placeholder="Doe"
+                    label="Last name"
-                label="Last Name"
                     error={props.formState.errors.lastName?.message}
                     {...props.register('lastName')}
                 />
             </div>
 
+            <FormField
+                id="username"
+                type="text"
+                autoComplete="username"
+                label="Username"
+                hint="3-64 characters, alphanumeric and . _ -"
+                error={props.formState.errors.username?.message}
+                {...props.register('username')}
+            />
+
             <FormField
                 id="email"
                 type="email"
                 autoComplete="email"
-            placeholder="jane@example.com"
                 label="Email"
                 error={props.formState.errors.email?.message}
                 {...props.register('email')}
@@ -59,17 +59,16 @@ const RegisterForm = (props: RegisterFormProps) => (
             <FormField
                 id="dateOfBirth"
                 type="date"
-            label="Date of Birth"
+                label="Date of birth"
-            hint="Must be 19 years or older"
+                hint="Must be 19 years or older."
                 error={props.formState.errors.dateOfBirth?.message}
                 {...props.register('dateOfBirth')}
             />
 
             <FormField
                 id="password"
-            type="password"
+                type={showPassword ? 'text' : 'password'}
                 autoComplete="new-password"
-            placeholder="••••••••"
                 label="Password"
                 hint="8+ chars: uppercase, lowercase, digit, special character"
                 error={props.formState.errors.password?.message}
@@ -78,20 +77,26 @@ const RegisterForm = (props: RegisterFormProps) => (
 
             <FormField
                 id="confirmPassword"
-            type="password"
+                type={showPassword ? 'text' : 'password'}
                 autoComplete="new-password"
-            placeholder="••••••••"
+                label="Confirm password"
-            label="Confirm Password"
                 error={props.formState.errors.confirmPassword?.message}
                 {...props.register('confirmPassword')}
             />
 
+            <ShowPasswordToggle
+                shown={showPassword}
+                onToggle={() => setShowPassword((shown) => !shown)}
+            />
+
             <SubmitButton
                 isSubmitting={props.submitting}
-            idleText="Create Account"
+                idleText="Create account"
-            submittingText="Creating account..."
+                submittingText="Creating account…"
+                className="btn btn-primary min-h-12 w-full"
             />
         </form>
     );
+};
 
 export default RegisterForm;