Cover the split-screen auth layout in Storybook

web/frontend/app/components/ui/forms/FormField.tsx

@@ -21,19 +21,26 @@ const FormField = ({
 }: FormFieldProps) => {
     return (
         <Field className={className ?? 'space-y-1'}>
-            <Label htmlFor={inputProps.id} className={labelClassName ?? 'label font-medium'}>
+            <Label
+                htmlFor={inputProps.id}
+                className={labelClassName ?? 'label text-sm font-semibold text-base-content'}
+            >
                 {label}
             </Label>
 
             <input
                 {...inputProps}
-                className={inputClassName ?? `input w-full ${error ? 'input-error' : ''}`}
+                className={
+                    inputClassName ?? `input h-11 w-full text-base ${error ? 'input-error' : ''}`
+                }
             />
 
             {error ? (
-                <Description className={hintClassName ?? 'label text-error'}>{error}</Description>
+                <Description className={hintClassName ?? 'text-xs text-error'}>{error}</Description>
             ) : hint ? (
-                <Description className={hintClassName ?? 'label'}>{hint}</Description>
+                <Description className={hintClassName ?? 'text-xs text-[var(--color-muted)]'}>
+                    {hint}
+                </Description>
             ) : null}
         </Field>
     );

web/frontend/app/components/ui/navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
-import { Link } from 'react-router';
+import { Link, useLocation } from 'react-router';
 import NavLinks from './NavLinks';
 import UserMenu from './UserMenu';
 
@@ -12,7 +12,12 @@ interface NavbarProps {
     } | null;
 }
 
-const Navbar = ({ auth }: NavbarProps) => (
+const Navbar = ({ auth }: NavbarProps) => {
+    const { pathname } = useLocation();
+    const onAuthRoute = pathname === '/login' || pathname === '/register';
+    const showAuthActions = !auth && !onAuthRoute;
+
+    return (
         <Disclosure
             as="nav"
             className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
@@ -54,10 +59,10 @@ const Navbar = ({ auth }: NavbarProps) => (
                             </Link>
                         </div>
 
-                    <NavLinks variant="desktop" showRegister={!auth} />
+                        <NavLinks variant="desktop" showRegister={showAuthActions} />
 
                         <div className="navbar-end gap-2">
-                        {!auth && (
+                            {showAuthActions && (
                                 <Link
                                     to="/register"
                                     className="btn btn-ghost btn-sm hidden sm:inline-flex"
@@ -78,19 +83,22 @@ const Navbar = ({ auth }: NavbarProps) => (
                                     />
                                 </>
                             ) : (
+                                !onAuthRoute && (
                                     <Link to="/login" className="btn btn-primary btn-sm">
                                         Login
                                     </Link>
+                                )
                             )}
                         </div>
                     </div>
 
                     <DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
-                    <NavLinks variant="mobile" showRegister={!auth} />
+                        <NavLinks variant="mobile" showRegister={showAuthActions} />
                     </DisclosurePanel>
                 </>
             )}
         </Disclosure>
     );
+};
 
 export default Navbar;

web/frontend/app/features/auth/components/AuthSplitLayout.stories.tsx

@@ -0,0 +1,107 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { expect, within } from 'storybook/test';
+import AuthSplitLayout from './AuthSplitLayout';
+import AuthSwitchPrompt from './AuthSwitchPrompt';
+import LoginForm from './LoginForm';
+import RegisterForm from './RegisterForm';
+import { loginSchema, registerSchema, type LoginSchema, type RegisterSchema } from '../schemas';
+
+const authSplitLayoutDescription = `The shared split-screen shell behind /login and /register: a brand panel carrying the headline and a form panel that centers the page's own heading, form, and switch prompt. Both stories compose the real forms, so they show the production layout at any viewport.`;
+
+const LoginPanel = () => {
+    const form = useForm<LoginSchema>({ resolver: zodResolver(loginSchema) });
+
+    return (
+        <div className="flex w-full max-w-[25rem] flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+                <h1 className="text-[2.125rem]">Sign in</h1>
+                <p className="text-[var(--color-muted)]">Sign in to your Biergarten account</p>
+            </div>
+
+            <LoginForm
+                onSubmit={form.handleSubmit(() => {})}
+                formState={form.formState}
+                register={form.register}
+                submitting={false}
+            />
+
+            <AuthSwitchPrompt lead="New to Biergarten?" to="/register" label="Create an account" />
+        </div>
+    );
+};
+
+const RegisterPanel = () => {
+    const form = useForm<RegisterSchema>({ resolver: zodResolver(registerSchema) });
+
+    return (
+        <div className="flex w-full max-w-[32.5rem] flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+                <h1 className="text-[2.125rem]">Create your account</h1>
+                <p className="text-[var(--color-muted)]">Create your Biergarten account</p>
+            </div>
+
+            <RegisterForm
+                onSubmit={form.handleSubmit(() => {})}
+                formState={form.formState}
+                register={form.register}
+                submitting={false}
+            />
+
+            <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
+        </div>
+    );
+};
+
+const meta = {
+    title: 'Layout/AuthSplitLayout',
+    component: AuthSplitLayout,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: authSplitLayoutDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof AuthSplitLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Login: Story = {
+    args: {
+        headline: 'Good to see you again.',
+        blurb: 'Sign in to pick up where you left off with our partner breweries.',
+        children: <LoginPanel />,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('heading', { name: 'Sign in' })).toBeInTheDocument();
+        await expect(canvas.getByRole('button', { name: /show password/i })).toBeInTheDocument();
+    },
+};
+
+export const Register: Story = {
+    args: {
+        headline: 'Pull up a chair.',
+        blurb: 'Create an account to explore partner breweries and their beers.',
+        children: <RegisterPanel />,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByLabelText(/date of birth/i)).toBeInTheDocument();
+        await expect(canvas.getByRole('button', { name: /create account/i })).toBeInTheDocument();
+    },
+};
+
+export const RegisterMobile: Story = {
+    args: Register.args,
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile1',
+        },
+    },
+};

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

@@ -0,0 +1,20 @@
+interface AuthSplitLayoutProps {
+    headline: string;
+    blurb: string;
+    children: React.ReactNode;
+}
+
+const AuthSplitLayout = ({ headline, blurb, children }: AuthSplitLayoutProps) => (
+    <div className="grid flex-1 grid-cols-1 bg-base-200 lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)]">
+        <aside className="flex flex-col justify-end gap-5 bg-secondary px-5 py-7 text-secondary-content lg:px-14 lg:py-12">
+            <h2 className="text-3xl leading-[1.15] text-balance lg:text-[2.75rem]">{headline}</h2>
+            <p className="max-w-[23.75rem] text-base leading-relaxed lg:text-lg">{blurb}</p>
+        </aside>
+
+        <main className="flex items-start justify-center px-5 pt-7 pb-10 lg:items-center lg:px-6 lg:py-10">
+            {children}
+        </main>
+    </div>
+);
+
+export default AuthSplitLayout;

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

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+interface AuthSwitchPromptProps {
+    lead: string;
+    to: string;
+    label: string;
+}
+
+const AuthSwitchPrompt = ({ lead, to, label }: AuthSwitchPromptProps) => (
+    <p className="text-center text-[0.9375rem] text-[var(--color-muted)]">
+        {lead}{' '}
+        <Link to={to} className="font-semibold text-secondary hover:text-primary">
+            {label}
+        </Link>
+    </p>
+);
+
+export default AuthSwitchPrompt;

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

@@ -1,18 +0,0 @@
-import { Link } from 'react-router';
-
-const LoginCallout = () => (
-    <>
-        <div className="divider text-xs">Already have an account?</div>
-
-        <div className="text-center space-y-2">
-            <Link to="/login" className="btn btn-outline btn-sm w-full">
-                Sign in
-            </Link>
-            <Link to="/" className="link link-hover text-sm text-base-content/70">
-                Back to home
-            </Link>
-        </div>
-    </>
-);
-
-export default LoginCallout;

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/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/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;

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

@@ -0,0 +1,18 @@
+import { Button } from '@headlessui/react';
+
+interface ShowPasswordToggleProps {
+    shown: boolean;
+    onToggle: () => void;
+}
+
+const ShowPasswordToggle = ({ shown, onToggle }: ShowPasswordToggleProps) => (
+    <Button
+        type="button"
+        onClick={onToggle}
+        className="inline-flex min-h-11 items-center self-start text-[0.9375rem] font-semibold text-secondary hover:underline"
+    >
+        {shown ? 'Hide password' : 'Show password'}
+    </Button>
+);
+
+export default ShowPasswordToggle;

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

@@ -1,10 +1,10 @@
 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 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,15 +54,14 @@ 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">
+            <div className="flex w-full max-w-[25rem] flex-col gap-4">
-                            <LogIn className="size-7" aria-hidden="true" />
+                <div className="flex flex-col gap-1.5">
-                            Login
+                    <h1 className="text-[2.125rem]">Sign in</h1>
-                        </h1>
+                    <p className="text-[var(--color-muted)]">Sign in to your Biergarten account</p>
-                        <p className="text-base-content/70">Sign in to your Biergarten account</p>
                 </div>
 
                 {actionData?.error && (
@@ -78,10 +77,13 @@ const Login = ({ actionData }: Route.ComponentProps) => {
                     submitting={isSubmitting}
                 />
 
-                    <RegisterCallout />
+                <AuthSwitchPrompt
-                </div>
+                    lead="New to Biergarten?"
-            </div>
+                    to="/register"
+                    label="Create an account"
+                />
             </div>
+        </AuthSplitLayout>
     );
 };
 

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

@@ -2,7 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { redirect, useNavigation, useSubmit } from 'react-router';
 import { createAuthSession, getOptionalAuth, register } from '../auth.server';
-import LoginCallout from '../components/LoginCallout';
+import AuthSplitLayout from '../components/AuthSplitLayout';
+import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
 import RegisterForm from '../components/RegisterForm';
 import { useActionErrorToast } from '../hooks/useActionErrorToast';
 import { registerSchema, type RegisterSchema } from '../schemas';
@@ -75,12 +76,14 @@ const Register = ({ actionData }: Route.ComponentProps) => {
     useActionErrorToast(actionData?.error);
 
     return (
-        <div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
+        <AuthSplitLayout
-            <div className="card w-full max-w-lg bg-base-100 shadow-xl">
+            headline="Pull up a chair."
-                <div className="card-body gap-4">
+            blurb="Create an account to explore partner breweries and their beers."
-                    <div className="text-center">
+        >
-                        <h1 className="card-title text-3xl justify-center">Register</h1>
+            <div className="flex w-full max-w-[32.5rem] flex-col gap-4">
-                        <p className="text-base-content/70">Create your Biergarten account</p>
+                <div className="flex flex-col gap-1.5">
+                    <h1 className="text-[2.125rem]">Create your account</h1>
+                    <p className="text-[var(--color-muted)]">Create your Biergarten account</p>
                 </div>
 
                 {actionData?.error && (
@@ -96,10 +99,9 @@ const Register = ({ actionData }: Route.ComponentProps) => {
                     submitting={isSubmitting}
                 />
 
-                    <LoginCallout />
+                <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
-                </div>
-            </div>
             </div>
+        </AuthSplitLayout>
     );
 };
 

web/frontend/app/root.tsx

@@ -63,12 +63,14 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 const App = ({ loaderData }: Route.ComponentProps) => {
     const { auth } = loaderData;
     return (
-        <>
+        <div className="flex min-h-screen flex-col">
             <Navbar auth={auth} />
             <ToastProvider />
             <AiDisclosureDialog />
+            <div className="flex flex-1 flex-col">
                 <Outlet />
-        </>
+            </div>
+        </div>
     );
 };