From 9968f4458ac77efe521fda6138f15db8b2f36ed7 Mon Sep 17 00:00:00 2001
From: Aaron Po <apo2@uwo.ca>
Date: Thu, 8 Oct 2026 23:10:48 -0400
Subject: [PATCH] Add the split-screen auth shell, switch prompt, and password
 toggle

---
 .../auth/components/AuthSplitLayout.tsx       | 20 +++++++++++++++++++
 .../auth/components/AuthSwitchPrompt.tsx      | 18 +++++++++++++++++
 .../auth/components/ShowPasswordToggle.tsx    | 18 +++++++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 web/frontend/app/features/auth/components/AuthSplitLayout.tsx
 create mode 100644 web/frontend/app/features/auth/components/AuthSwitchPrompt.tsx
 create mode 100644 web/frontend/app/features/auth/components/ShowPasswordToggle.tsx

diff --git a/web/frontend/app/features/auth/components/AuthSplitLayout.tsx b/web/frontend/app/features/auth/components/AuthSplitLayout.tsx
new file mode 100644
index 00000000..73338500
--- /dev/null
+++ b/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;
diff --git a/web/frontend/app/features/auth/components/AuthSwitchPrompt.tsx b/web/frontend/app/features/auth/components/AuthSwitchPrompt.tsx
new file mode 100644
index 00000000..953960e1
--- /dev/null
+++ b/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;
diff --git a/web/frontend/app/features/auth/components/ShowPasswordToggle.tsx b/web/frontend/app/features/auth/components/ShowPasswordToggle.tsx
new file mode 100644
index 00000000..c61c9e14
--- /dev/null
+++ b/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;