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

Refactor authentication and account management with modular UI components (#242)

Browse Source
This commit is contained in:
Aaron Po
2026-08-23 01:30:58 -04:00
committed by Aaron Po
parent 6a44afd6b6
commit bfd45842fe
109 changed files with 14743 additions and 10792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/frontend/app/features/auth/components/ConfirmFailure.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Link } from 'react-router';
interface ConfirmFailureProps {
error: string;
}
const ConfirmFailure = ({ error }: ConfirmFailureProps) => (
<>
<div className="text-error text-6xl">✕</div>
<h1 className="card-title text-2xl">Confirmation Failed</h1>
<div role="alert" className="alert alert-error alert-soft w-full">
<span>{error}</span>
</div>
<p className="text-base-content/70 text-sm">
The confirmation link may have expired (valid for 30 minutes) or already been used.
</p>
<div className="card-actions w-full pt-2 flex-col gap-2">
<Link to="/dashboard" className="btn btn-primary w-full">
Back to Dashboard
</Link>
</div>
</>
);
export default ConfirmFailure;

26
web/frontend/app/features/auth/components/ConfirmSuccess.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Link } from 'react-router';
interface ConfirmSuccessProps {
confirmedDate: string;
}
const ConfirmSuccess = ({ confirmedDate }: ConfirmSuccessProps) => (
<>
<div className="text-success text-6xl">✓</div>
<h1 className="card-title text-2xl">Email Confirmed!</h1>
<p className="text-base-content/70">Your email address has been successfully verified.</p>
<div className="bg-base-200 rounded-box w-full p-3 text-sm text-left">
<span className="text-base-content/50 text-xs uppercase tracking-widest font-semibold">
Confirmed at
</span>
<p className="font-mono mt-1">{new Date(confirmedDate).toLocaleString()}</p>
</div>
<div className="card-actions w-full pt-2">
<Link to="/dashboard" className="btn btn-primary w-full">
Go to Dashboard
</Link>
</div>
</>
);
export default ConfirmSuccess;

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

@@ -0,0 +1,18 @@
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/60">
Back to home
</Link>
</div>
</>
);
export default LoginCallout;

44
web/frontend/app/features/auth/components/LoginForm.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { BaseSyntheticEvent } 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';
interface LoginFormProps {
onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
formState: FormState<LoginSchema>;
register: UseFormRegister<{ username: string; password: string }>;
submitting: boolean;
}
const LoginForm = (props: LoginFormProps) => (
<form onSubmit={props.onSubmit} className="space-y-3">
<FormField
id="username"
type="text"
autoComplete="username"
placeholder="your_username"
label="Username"
error={props.formState.errors.username?.message}
{...props.register('username')}
/>
<FormField
id="password"
type="password"
autoComplete="current-password"
placeholder="••••••••"
label="Password"
error={props.formState.errors.password?.message}
{...props.register('password')}
/>
<SubmitButton
isSubmitting={props.submitting}
idleText="Sign In"
submittingText="Signing in..."
/>
</form>
);
export default LoginForm;

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

@@ -0,0 +1,23 @@
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/60 inline-flex items-center gap-1"
>
<HomeSimpleDoor className="size-4" aria-hidden="true" />
Back to home
</Link>
</div>
</>
);
export default RegisterCallout;

97
web/frontend/app/features/auth/components/RegisterForm.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { BaseSyntheticEvent } 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';
interface RegisterFormProps {
onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
formState: FormState<RegisterSchema>;
register: UseFormRegister<RegisterSchema>;
submitting: boolean;
}
const RegisterForm = (props: RegisterFormProps) => (
<form onSubmit={props.onSubmit} className="space-y-3">
<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">
<FormField
id="firstName"
type="text"
autoComplete="given-name"
placeholder="Jane"
label="First Name"
error={props.formState.errors.firstName?.message}
{...props.register('firstName')}
/>
<FormField
id="lastName"
type="text"
autoComplete="family-name"
placeholder="Doe"
label="Last Name"
error={props.formState.errors.lastName?.message}
{...props.register('lastName')}
/>
</div>
<FormField
id="email"
type="email"
autoComplete="email"
placeholder="jane@example.com"
label="Email"
error={props.formState.errors.email?.message}
{...props.register('email')}
/>
<FormField
id="dateOfBirth"
type="date"
label="Date of Birth"
hint="Must be 19 years or older"
error={props.formState.errors.dateOfBirth?.message}
{...props.register('dateOfBirth')}
/>
<FormField
id="password"
type="password"
autoComplete="new-password"
placeholder="••••••••"
label="Password"
hint="8+ chars: uppercase, lowercase, digit, special character"
error={props.formState.errors.password?.message}
{...props.register('password')}
/>
<FormField
id="confirmPassword"
type="password"
autoComplete="new-password"
placeholder="••••••••"
label="Confirm Password"
error={props.formState.errors.confirmPassword?.message}
{...props.register('confirmPassword')}
/>
<SubmitButton
isSubmitting={props.submitting}
idleText="Create Account"
submittingText="Creating account..."
/>
</form>
);
export default RegisterForm;