Move the login and register routes onto the split-screen shell

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/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,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,34 +54,36 @@ 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 && (
-                        <div role="alert" className="alert alert-error alert-soft">
-                            <span>{actionData.error}</span>
-                        </div>
-                    )}
-
-                    <LoginForm
-                        onSubmit={onSubmit}
-                        formState={formState}
-                        register={register}
-                        submitting={isSubmitting}
-                    />
-
-                    <RegisterCallout />
                 </div>
+
+                {actionData?.error && (
+                    <div role="alert" className="alert alert-error alert-soft">
+                        <span>{actionData.error}</span>
+                    </div>
+                )}
+
+                <LoginForm
+                    onSubmit={onSubmit}
+                    formState={formState}
+                    register={register}
+                    submitting={isSubmitting}
+                />
+
+                <AuthSwitchPrompt
+                    lead="New to Biergarten?"
+                    to="/register"
+                    label="Create an account"
+                />
             </div>
-        </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,31 +76,32 @@ 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">
-                    </div>
+                    <h1 className="text-[2.125rem]">Create your account</h1>
-
+                    <p className="text-[var(--color-muted)]">Create your Biergarten account</p>
-                    {actionData?.error && (
-                        <div role="alert" className="alert alert-error alert-soft">
-                            <span>{actionData.error}</span>
-                        </div>
-                    )}
-
-                    <RegisterForm
-                        onSubmit={onSubmit}
-                        formState={formState}
-                        register={field}
-                        submitting={isSubmitting}
-                    />
-
-                    <LoginCallout />
                 </div>
+
+                {actionData?.error && (
+                    <div role="alert" className="alert alert-error alert-soft">
+                        <span>{actionData.error}</span>
+                    </div>
+                )}
+
+                <RegisterForm
+                    onSubmit={onSubmit}
+                    formState={formState}
+                    register={field}
+                    submitting={isSubmitting}
+                />
+
+                <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
             </div>
-        </div>
+        </AuthSplitLayout>
     );
 };