Move the login page onto the split-screen shell

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,34 +12,42 @@ 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);
-        <FormField
-            id="username"
-            type="text"
-            autoComplete="username"
-            placeholder="your_username"
-            label="Username"
-            error={props.formState.errors.username?.message}
-            {...props.register('username')}
-        />
 
-        <FormField
+    return (
-            id="password"
+        <form onSubmit={props.onSubmit} className="flex flex-col gap-4">
-            type="password"
+            <FormField
-            autoComplete="current-password"
+                id="username"
-            placeholder="••••••••"
+                type="text"
-            label="Password"
+                autoComplete="username"
-            error={props.formState.errors.password?.message}
+                label="Username"
-            {...props.register('password')}
+                error={props.formState.errors.username?.message}
-        />
+                {...props.register('username')}
+            />
 
-        <SubmitButton
+            <FormField
-            isSubmitting={props.submitting}
+                id="password"
-            idleText="Sign In"
+                type={showPassword ? 'text' : 'password'}
-            submittingText="Signing in..."
+                autoComplete="current-password"
-        />
+                label="Password"
-    </form>
+                error={props.formState.errors.password?.message}
-);
+                {...props.register('password')}
+            />
+
+            <ShowPasswordToggle
+                shown={showPassword}
+                onToggle={() => setShowPassword((shown) => !shown)}
+            />
+
+            <SubmitButton
+                isSubmitting={props.submitting}
+                idleText="Sign in"
+                submittingText="Signing in…"
+                className="btn btn-primary min-h-12 w-full"
+            />
+        </form>
+    );
+};
 
 export default LoginForm;

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

@@ -1,23 +0,0 @@
-import { HomeSimpleDoor, UserPlus } from 'iconoir-react';
-import { Link } from 'react-router';
-
-const RegisterCallout = () => (
-    <>
-        <div className="divider text-xs">New here?</div>
-        <div className="text-center space-y-2">
-            <Link to="/register" className="btn btn-outline btn-sm w-full gap-2">
-                <UserPlus className="size-4" aria-hidden="true" />
-                Create an account
-            </Link>
-            <Link
-                to="/"
-                className="link link-hover text-sm text-base-content/70 inline-flex items-center gap-1"
-            >
-                <HomeSimpleDoor className="size-4" aria-hidden="true" />
-                Back to home
-            </Link>
-        </div>
-    </>
-);
-
-export default RegisterCallout;

web/frontend/app/features/auth/routes/login.tsx

@@ -1,10 +1,12 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { LogIn } from 'iconoir-react';
 import { useForm } from 'react-hook-form';
 import { redirect, useNavigation, useSubmit } from 'react-router';
 import { createAuthSession, getOptionalAuth, login } from '../auth.server';
+import AuthCardHeading from '../components/AuthCardHeading';
+import AuthErrorAlert from '../components/AuthErrorAlert';
+import AuthSplitLayout from '../components/AuthSplitLayout';
+import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
 import LoginForm from '../components/LoginForm';
-import RegisterCallout from '../components/RegisterCallout';
 import { useActionErrorToast } from '../hooks/useActionErrorToast';
 import { loginSchema, type LoginSchema } from '../schemas';
 import type { Route } from './+types/login';
@@ -54,34 +56,23 @@ const Login = ({ actionData }: Route.ComponentProps) => {
     useActionErrorToast(actionData?.error);
 
     return (
-        <div className="hero min-h-screen bg-base-200">
+        <AuthSplitLayout
-            <div className="card w-full max-w-md bg-base-100 shadow-xl">
+            headline="Good to see you again."
-                <div className="card-body gap-4">
+            blurb="Sign in to pick up where you left off with our partner breweries."
-                    <div className="text-center">
+        >
-                        <h1 className="card-title text-3xl justify-center gap-2">
+            <AuthCardHeading title="Sign in" subtitle="Sign in to your Biergarten account" />
-                            <LogIn className="size-7" aria-hidden="true" />
-                            Login
-                        </h1>
-                        <p className="text-base-content/70">Sign in to your Biergarten account</p>
-                    </div>
 
-                    {actionData?.error && (
+            {actionData?.error && <AuthErrorAlert message={actionData.error} />}
-                        <div role="alert" className="alert alert-error alert-soft">
-                            <span>{actionData.error}</span>
-                        </div>
-                    )}
 
-                    <LoginForm
+            <LoginForm
-                        onSubmit={onSubmit}
+                onSubmit={onSubmit}
-                        formState={formState}
+                formState={formState}
-                        register={register}
+                register={register}
-                        submitting={isSubmitting}
+                submitting={isSubmitting}
-                    />
+            />
 
-                    <RegisterCallout />
+            <AuthSwitchPrompt lead="New to Biergarten?" to="/register" label="Create an account" />
-                </div>
+        </AuthSplitLayout>
-            </div>
-        </div>
     );
 };