AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 10:04:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aaron Po
2026-10-08 23:10:48 -04:00
parent 9af8b968a8
commit d0c4958338
4 changed files with 56 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/frontend/app/features/auth/components/LoginCallout.tsx
View File

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

23
web/frontend/app/features/auth/components/RegisterCallout.tsx
View File

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

30
web/frontend/app/features/auth/routes/login.tsx
View File

@@ -1,10 +1,10 @@
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { LogIn } from 'iconoir-react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { redirect, useNavigation, useSubmit } from 'react-router'; import { redirect, useNavigation, useSubmit } from 'react-router';
import { createAuthSession, getOptionalAuth, login } from '../auth.server'; import { createAuthSession, getOptionalAuth, login } from '../auth.server';
import AuthSplitLayout from '../components/AuthSplitLayout';
import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
import LoginForm from '../components/LoginForm'; import LoginForm from '../components/LoginForm';
import RegisterCallout from '../components/RegisterCallout';
import { useActionErrorToast } from '../hooks/useActionErrorToast'; import { useActionErrorToast } from '../hooks/useActionErrorToast';
import { loginSchema, type LoginSchema } from '../schemas'; import { loginSchema, type LoginSchema } from '../schemas';
import type { Route } from './+types/login'; import type { Route } from './+types/login';
@@ -54,15 +54,14 @@ const Login = ({ actionData }: Route.ComponentProps) => {
useActionErrorToast(actionData?.error); useActionErrorToast(actionData?.error);
return ( 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> </div>
{actionData?.error && ( {actionData?.error && (
@@ -78,10 +77,13 @@ const Login = ({ actionData }: Route.ComponentProps) => {
submitting={isSubmitting} submitting={isSubmitting}
/> />
<RegisterCallout /> <AuthSwitchPrompt
</div> lead="New to Biergarten?"
</div> to="/register"
label="Create an account"
/>
</div> </div>
</AuthSplitLayout>
); );
}; };

22
web/frontend/app/features/auth/routes/register.tsx
View File

@@ -2,7 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { redirect, useNavigation, useSubmit } from 'react-router'; import { redirect, useNavigation, useSubmit } from 'react-router';
import { createAuthSession, getOptionalAuth, register } from '../auth.server'; 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 RegisterForm from '../components/RegisterForm';
import { useActionErrorToast } from '../hooks/useActionErrorToast'; import { useActionErrorToast } from '../hooks/useActionErrorToast';
import { registerSchema, type RegisterSchema } from '../schemas'; import { registerSchema, type RegisterSchema } from '../schemas';
@@ -75,12 +76,14 @@ const Register = ({ actionData }: Route.ComponentProps) => {
useActionErrorToast(actionData?.error); useActionErrorToast(actionData?.error);
return ( 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> </div>
{actionData?.error && ( {actionData?.error && (
@@ -96,10 +99,9 @@ const Register = ({ actionData }: Route.ComponentProps) => {
submitting={isSubmitting} submitting={isSubmitting}
/> />
<LoginCallout /> <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
</div>
</div>
</div> </div>
</AuthSplitLayout>
); );
}; };