mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 18:52:03 +01:00
parent f035cfe7ce
commit 5ef149b782
39 changed files with 564 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/website/templates/auth/ForgotPasswordTemplate.tsx
View File

@@ -20,6 +20,7 @@ import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { LoadingSpinner } from '@/ui/LoadingSpinner';
import { routes } from '@/lib/routing/RouteConfig';
import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPasswordViewData';
interface ForgotPasswordTemplateProps {
@@ -37,14 +38,14 @@ interface ForgotPasswordTemplateProps {
export function ForgotPasswordTemplate({ viewData, formActions, mutationState }: ForgotPasswordTemplateProps) {
return (
<Box as="main" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
<Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" position="relative">
{/* Background Pattern */}
<Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))' }} />
<Box position="absolute" inset={0} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
<Box style={{ position: 'relative', width: '100%', maxWidth: '28rem', padding: '0 1rem' }}>
<Box position="relative" w="full" maxWidth="28rem" px={4}>
{/* Header */}
<Box style={{ textAlign: 'center' }} mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} style={{ width: '4rem', height: '4rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1rem' }}>
<Box textAlign="center" mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
<Icon icon={Flag} size={8} color="#3b82f6" />
</Surface>
<Heading level={1}>Reset Password</Heading>
@@ -53,20 +54,20 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
</Text>
</Box>
<Card style={{ position: 'relative', overflow: 'hidden' }}>
<Card position="relative" overflow="hidden">
{/* Background accent */}
<Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)', borderBottomLeftRadius: '9999px' }} />
<Box position="absolute" top={0} right={0} w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
{!viewData.showSuccess ? (
<form onSubmit={formActions.handleSubmit}>
<Stack gap={5} style={{ position: 'relative' }}>
<Box as="form" onSubmit={formActions.handleSubmit}>
<Stack gap={5} position="relative">
{/* Email */}
<Box>
<Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
Email Address
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Mail} size={4} color="#6b7280" />
</Box>
<Input
@@ -77,7 +78,6 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
variant={viewData.formState.fields.email.error ? 'error' : 'default'}
placeholder="you@example.com"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem' }}
autoComplete="email"
/>
</Box>
@@ -90,7 +90,7 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
{/* Error Message */}
{mutationState.error && (
<Surface variant="muted" rounded="lg" border padding={3} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={3} bg="bg-red-500/10" borderColor="border-red-500/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={AlertCircle} size={5} color="#ef4444" />
<Text size="sm" color="text-error-red">{mutationState.error}</Text>
@@ -110,8 +110,8 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
</Button>
{/* Back to Login */}
<Box style={{ textAlign: 'center' }}>
<Link href="/auth/login">
<Box textAlign="center">
<Link href={routes.auth.login}>
<Stack direction="row" align="center" justify="center" gap={1}>
<Icon icon={ArrowLeft} size={4} color="#3b82f6" />
<Text size="sm" color="text-primary-blue">Back to Login</Text>
@@ -119,10 +119,10 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
</Link>
</Box>
</Stack>
</form>
</Box>
) : (
<Stack gap={4} style={{ position: 'relative' }}>
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' }}>
<Stack gap={4} position="relative">
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={CheckCircle2} size={6} color="#10b981" />
<Box>
@@ -130,8 +130,8 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
{viewData.magicLink && (
<Box mt={2}>
<Text size="xs" color="text-gray-400" block mb={1}>Development Mode - Magic Link:</Text>
<Surface variant="muted" rounded="md" border padding={2} style={{ backgroundColor: '#262626' }}>
<Text size="xs" color="text-primary-blue" style={{ wordBreak: 'break-all' }}>{viewData.magicLink}</Text>
<Surface variant="muted" rounded="md" border padding={2} bg="bg-neutral-800">
<Text size="xs" color="text-primary-blue">{viewData.magicLink}</Text>
</Surface>
<Text size="xs" color="text-gray-500" block mt={1}>
In production, this would be sent via email
@@ -167,7 +167,7 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
</Stack>
{/* Footer */}
<Box mt={6} style={{ textAlign: 'center' }}>
<Box mt={6} textAlign="center">
<Text size="xs" color="text-gray-500">
Need help?{' '}
<Link href="/support">

77
apps/website/templates/auth/LoginTemplate.tsx
View File

@@ -25,6 +25,7 @@ import { LoadingSpinner } from '@/ui/LoadingSpinner';
import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
import { UserRolesPreview } from '@/components/auth/UserRolesPreview';
import { AuthWorkflowMockup } from '@/components/auth/AuthWorkflowMockup';
import { routes } from '@/lib/routing/RouteConfig';
import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
import { FormState } from '@/lib/builders/view-data/types/FormState';
@@ -45,16 +46,16 @@ interface LoginTemplateProps {
export function LoginTemplate({ viewData, formActions, mutationState }: LoginTemplateProps) {
return (
<Box as="main" style={{ minHeight: '100vh', display: 'flex', position: 'relative' }}>
<Box as="main" minHeight="100vh" display="flex" position="relative">
{/* Background Pattern */}
<Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))' }} />
<Box position="absolute" inset="0" bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
{/* Left Side - Info Panel (Hidden on mobile) */}
<Box className="hidden lg:flex lg:w-1/2" style={{ position: 'relative', alignItems: 'center', justifyContent: 'center', padding: '3rem' }}>
<Box style={{ maxWidth: '32rem' }}>
<Box display={{ base: 'none', lg: 'flex' }} w={{ lg: '1/2' }} position="relative" alignItems="center" justifyContent="center" p={12}>
<Box maxWidth="32rem">
{/* Logo */}
<Stack direction="row" align="center" gap={3} mb={8}>
<Surface variant="muted" rounded="xl" border padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
<Surface variant="muted" rounded="xl" border padding={2} bg="bg-blue-500/10" borderColor="border-blue-500/30">
<Icon icon={Flag} size={6} color="#3b82f6" />
</Surface>
<Text size="2xl" weight="bold" color="text-white">GridPilot</Text>
@@ -90,11 +91,11 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
</Box>
{/* Right Side - Login Form */}
<Box style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '3rem 1rem', position: 'relative' }}>
<Box style={{ width: '100%', maxWidth: '28rem' }}>
<Box flex={1} display="flex" alignItems="center" justifyContent="center" p={{ base: 4, lg: 12 }} position="relative">
<Box w="full" maxWidth="28rem">
{/* Mobile Logo/Header */}
<Box className="lg:hidden" style={{ textAlign: 'center' }} mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} style={{ width: '4rem', height: '4rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1rem' }}>
<Box display={{ base: 'block', lg: 'none' }} textAlign="center" mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
<Icon icon={Flag} size={8} color="#3b82f6" />
</Surface>
<Heading level={1}>Welcome Back</Heading>
@@ -104,26 +105,26 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
</Box>
{/* Desktop Header */}
<Box className="hidden lg:block" style={{ textAlign: 'center' }} mb={8}>
<Box display={{ base: 'none', lg: 'block' }} textAlign="center" mb={8}>
<Heading level={2}>Welcome Back</Heading>
<Text color="text-gray-400" block mt={2}>
Sign in to access your racing dashboard
</Text>
</Box>
<Card style={{ position: 'relative', overflow: 'hidden' }}>
<Card position="relative" overflow="hidden">
{/* Background accent */}
<Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)', borderBottomLeftRadius: '9999px' }} />
<Box position="absolute" top="0" right="0" w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
<form onSubmit={formActions.handleSubmit}>
<Stack gap={5} style={{ position: 'relative' }}>
<Box as="form" onSubmit={formActions.handleSubmit}>
<Stack gap={5} position="relative">
{/* Email */}
<Box>
<Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
Email Address
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Mail} size={4} color="#6b7280" />
</Box>
<Input
@@ -135,7 +136,6 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
variant={viewData.formState.fields.email.error ? 'error' : 'default'}
placeholder="you@example.com"
disabled={viewData.formState.isSubmitting || mutationState.isPending}
style={{ paddingLeft: '2.5rem' }}
autoComplete="email"
/>
</Box>
@@ -152,12 +152,12 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
<Text size="sm" weight="medium" color="text-gray-300">
Password
</Text>
<Link href="/auth/forgot-password">
<Link href={routes.auth.forgotPassword}>
<Text size="xs" color="text-primary-blue">Forgot password?</Text>
</Link>
</Stack>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Lock} size={4} color="#6b7280" />
</Box>
<Input
@@ -169,14 +169,19 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
variant={viewData.formState.fields.password.error ? 'error' : 'default'}
placeholder="••••••••"
disabled={viewData.formState.isSubmitting || mutationState.isPending}
style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
autoComplete="current-password"
/>
<Box
as="button"
type="button"
onClick={() => formActions.setShowPassword(!viewData.showPassword)}
style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
position="absolute"
right="3"
top="50%"
zIndex={10}
bg="transparent"
borderStyle="none"
cursor="pointer"
>
<Icon icon={viewData.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
</Box>
@@ -190,27 +195,27 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
{/* Remember Me */}
<Stack direction="row" align="center" gap={2}>
<input
<Box
as="input"
id="rememberMe"
name="rememberMe"
type="checkbox"
checked={viewData.formState.fields.rememberMe.value as boolean}
onChange={formActions.handleChange}
disabled={viewData.formState.isSubmitting || mutationState.isPending}
className="w-4 h-4 rounded border-charcoal-outline bg-iron-gray text-primary-blue focus:ring-primary-blue focus:ring-offset-0"
/>
<Text size="sm" color="text-gray-300">Keep me signed in</Text>
</Stack>
{/* Insufficient Permissions Message */}
{viewData.hasInsufficientPermissions && (
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-amber-500/10" borderColor="border-amber-500/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={AlertCircle} size={5} color="#f59e0b" />
<Box>
<Text weight="bold" color="text-warning-amber" block>Insufficient Permissions</Text>
<Text size="sm" color="text-gray-300" block mt={1}>
You don't have permission to access that page. Please log in with an account that has the required role.
You don&apos;t have permission to access that page. Please log in with an account that has the required role.
</Text>
</Box>
</Stack>
@@ -239,24 +244,24 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
{mutationState.isPending || viewData.formState.isSubmitting ? 'Signing in...' : 'Sign In'}
</Button>
</Stack>
</form>
</Box>
{/* Divider */}
<Box style={{ position: 'relative' }} my={6}>
<Box style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
<Box style={{ width: '100%', borderTop: '1px solid #262626' }} />
<Box position="relative" my={6}>
<Box position="absolute" inset="0" display="flex" alignItems="center">
<Box w="full" borderTop borderColor="border-neutral-800" />
</Box>
<Box style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
<Box px={4} style={{ backgroundColor: '#171717' }}>
<Box position="relative" display="flex" justifyContent="center">
<Box px={4} bg="bg-neutral-900">
<Text size="xs" color="text-gray-500">or continue with</Text>
</Box>
</Box>
</Box>
{/* Sign Up Link */}
<Box style={{ textAlign: 'center' }} mt={6}>
<Box textAlign="center" mt={6}>
<Text size="sm" color="text-gray-400">
Don't have an account?{' '}
Don&apos;t have an account?{' '}
<Link
href={viewData.returnTo && viewData.returnTo !== '/dashboard' ? `/auth/signup?returnTo=${encodeURIComponent(viewData.returnTo)}` : '/auth/signup'}
>
@@ -268,18 +273,18 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
{/* Name Immutability Notice */}
<Box mt={6}>
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}>
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/30" borderColor="border-neutral-800">
<Stack direction="row" align="start" gap={3}>
<Icon icon={AlertCircle} size={5} color="#737373" />
<Text size="xs" color="text-gray-400">
<Text weight="bold">Note:</Text> Your display name cannot be changed after signup. Please ensure it's correct when creating your account.
<Text weight="bold">Note:</Text> Your display name cannot be changed after signup. Please ensure it&apos;s correct when creating your account.
</Text>
</Stack>
</Surface>
</Box>
{/* Footer */}
<Box mt={6} style={{ textAlign: 'center' }}>
<Box mt={6} textAlign="center">
<Text size="xs" color="text-gray-500">
By signing in, you agree to our{' '}
<Link href="/terms">
@@ -293,7 +298,7 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
</Box>
{/* Mobile Role Info */}
<Box mt={8} className="lg:hidden">
<Box mt={8} display={{ base: 'block', lg: 'none' }}>
<UserRolesPreview variant="compact" />
</Box>
</Box>

67
apps/website/templates/auth/ResetPasswordTemplate.tsx
View File

@@ -22,9 +22,11 @@ import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { LoadingSpinner } from '@/ui/LoadingSpinner';
import { routes } from '@/lib/routing/RouteConfig';
import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
interface ResetPasswordTemplateProps extends ResetPasswordViewData {
interface ResetPasswordTemplateProps {
viewData: ResetPasswordViewData;
formActions: {
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
@@ -42,18 +44,21 @@ interface ResetPasswordTemplateProps extends ResetPasswordViewData {
};
}
export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
const { formActions, uiState, mutationState, ...viewData } = props;
export function ResetPasswordTemplate({
viewData,
formActions,
uiState,
mutationState,
}: ResetPasswordTemplateProps) {
return (
<Box as="main" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
<Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" position="relative">
{/* Background Pattern */}
<Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))' }} />
<Box position="absolute" inset="0" bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
<Box style={{ position: 'relative', width: '100%', maxWidth: '28rem', padding: '0 1rem' }}>
<Box position="relative" w="full" maxWidth="28rem" px={4}>
{/* Header */}
<Box style={{ textAlign: 'center' }} mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} style={{ width: '4rem', height: '4rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1rem' }}>
<Box textAlign="center" mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
<Icon icon={Flag} size={8} color="#3b82f6" />
</Surface>
<Heading level={1}>Reset Password</Heading>
@@ -62,20 +67,20 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
</Text>
</Box>
<Card style={{ position: 'relative', overflow: 'hidden' }}>
<Card position="relative" overflow="hidden">
{/* Background accent */}
<Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)', borderBottomLeftRadius: '9999px' }} />
<Box position="absolute" top="0" right="0" w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
{!viewData.showSuccess ? (
<form onSubmit={formActions.handleSubmit}>
<Stack gap={5} style={{ position: 'relative' }}>
<Box as="form" onSubmit={formActions.handleSubmit}>
<Stack gap={5} position="relative">
{/* New Password */}
<Box>
<Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
New Password
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Lock} size={4} color="#6b7280" />
</Box>
<Input
@@ -87,14 +92,19 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
variant={viewData.formState.fields.newPassword.error ? 'error' : 'default'}
placeholder="••••••••"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
autoComplete="new-password"
/>
<Box
as="button"
type="button"
onClick={() => formActions.setShowPassword(!uiState.showPassword)}
style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
position="absolute"
right="3"
top="50%"
zIndex={10}
bg="transparent"
borderStyle="none"
cursor="pointer"
>
<Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
</Box>
@@ -112,7 +122,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
Confirm Password
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Lock} size={4} color="#6b7280" />
</Box>
<Input
@@ -124,14 +134,19 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
variant={viewData.formState.fields.confirmPassword.error ? 'error' : 'default'}
placeholder="••••••••"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
autoComplete="new-password"
/>
<Box
as="button"
type="button"
onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
position="absolute"
right="3"
top="50%"
zIndex={10}
bg="transparent"
borderStyle="none"
cursor="pointer"
>
<Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
</Box>
@@ -145,7 +160,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
{/* Error Message */}
{mutationState.error && (
<Surface variant="muted" rounded="lg" border padding={3} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={3} bg="bg-red-500/10" borderColor="border-red-500/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={AlertCircle} size={5} color="#ef4444" />
<Text size="sm" color="text-error-red">{mutationState.error}</Text>
@@ -165,8 +180,8 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
</Button>
{/* Back to Login */}
<Box style={{ textAlign: 'center' }}>
<Link href="/auth/login">
<Box textAlign="center">
<Link href={routes.auth.login}>
<Stack direction="row" align="center" justify="center" gap={1}>
<Icon icon={ArrowLeft} size={4} color="#3b82f6" />
<Text size="sm" color="text-primary-blue">Back to Login</Text>
@@ -174,10 +189,10 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
</Link>
</Box>
</Stack>
</form>
</Box>
) : (
<Stack gap={4} style={{ position: 'relative' }}>
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' }}>
<Stack gap={4} position="relative">
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={CheckCircle2} size={6} color="#10b981" />
<Box>
@@ -214,7 +229,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
</Stack>
{/* Footer */}
<Box mt={6} style={{ textAlign: 'center' }}>
<Box mt={6} textAlign="center">
<Text size="xs" color="text-gray-500">
Need help?{' '}
<Link href="/support">

103
apps/website/templates/auth/SignupTemplate.tsx
View File

@@ -56,18 +56,21 @@ const USER_ROLES = [
title: 'Driver',
description: 'Race, track stats, join teams',
color: '#3b82f6',
bg: 'bg-blue-500/10',
},
{
icon: Trophy,
title: 'League Admin',
description: 'Organize leagues and events',
color: '#10b981',
bg: 'bg-green-500/10',
},
{
icon: Users,
title: 'Team Manager',
description: 'Manage team and drivers',
color: '#a855f7',
bg: 'bg-purple-500/10',
},
];
@@ -91,16 +94,16 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
];
return (
<Box as="main" style={{ minHeight: '100vh', display: 'flex', position: 'relative' }}>
<Box as="main" minHeight="100vh" display="flex" position="relative">
{/* Background Pattern */}
<Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))' }} />
<Box position="absolute" inset="0" bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
{/* Left Side - Info Panel (Hidden on mobile) */}
<Box className="hidden lg:flex lg:w-1/2" style={{ position: 'relative', alignItems: 'center', justifyContent: 'center', padding: '3rem' }}>
<Box style={{ maxWidth: '32rem' }}>
<Box display={{ base: 'none', lg: 'flex' }} w={{ lg: '1/2' }} position="relative" alignItems="center" justifyContent="center" p={12}>
<Box maxWidth="32rem">
{/* Logo */}
<Stack direction="row" align="center" gap={3} mb={8}>
<Surface variant="muted" rounded="xl" border padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
<Surface variant="muted" rounded="xl" border padding={2} bg="bg-blue-500/10" borderColor="border-blue-500/30">
<Icon icon={Flag} size={6} color="#3b82f6" />
</Surface>
<Text size="2xl" weight="bold" color="text-white">GridPilot</Text>
@@ -123,10 +126,11 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
rounded="xl"
border
padding={4}
style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}
bg="bg-neutral-800/30"
borderColor="border-neutral-800"
>
<Stack direction="row" align="center" gap={4}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: `${role.color}1A` }}>
<Surface variant="muted" rounded="lg" padding={2} bg={role.bg}>
<Icon icon={role.icon} size={5} color={role.color} />
</Surface>
<Box>
@@ -140,7 +144,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
{/* Features List */}
<Box mb={8}>
<Surface variant="muted" rounded="xl" border padding={5} style={{ backgroundColor: 'rgba(38, 38, 38, 0.2)', borderColor: '#262626' }}>
<Surface variant="muted" rounded="xl" border padding={5} bg="bg-neutral-800/20" borderColor="border-neutral-800">
<Stack direction="row" align="center" gap={2} mb={4}>
<Icon icon={Sparkles} size={4} color="#3b82f6" />
<Text size="sm" weight="medium" color="text-white">What you&apos;ll get</Text>
@@ -168,11 +172,11 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
</Box>
{/* Right Side - Signup Form */}
<Box style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '3rem 1rem', position: 'relative', overflowY: 'auto' }}>
<Box style={{ width: '100%', maxWidth: '28rem' }}>
<Box flex={1} display="flex" alignItems="center" justifyContent="center" p={{ base: 4, lg: 12 }} position="relative" overflow="auto">
<Box w="full" maxWidth="28rem">
{/* Mobile Logo/Header */}
<Box className="lg:hidden" style={{ textAlign: 'center' }} mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} style={{ width: '4rem', height: '4rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1rem' }}>
<Box display={{ base: 'block', lg: 'none' }} textAlign="center" mb={8}>
<Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
<Icon icon={Flag} size={8} color="#3b82f6" />
</Surface>
<Heading level={1}>Join GridPilot</Heading>
@@ -182,26 +186,26 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
</Box>
{/* Desktop Header */}
<Box className="hidden lg:block" style={{ textAlign: 'center' }} mb={8}>
<Box display={{ base: 'none', lg: 'block' }} textAlign="center" mb={8}>
<Heading level={2}>Create Account</Heading>
<Text color="text-gray-400" block mt={2}>
Get started with your free account
</Text>
</Box>
<Card style={{ position: 'relative', overflow: 'hidden' }}>
<Card position="relative" overflow="hidden">
{/* Background accent */}
<Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)', borderBottomLeftRadius: '9999px' }} />
<Box position="absolute" top="0" right="0" w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
<form onSubmit={formActions.handleSubmit}>
<Stack gap={4} style={{ position: 'relative' }}>
<Box as="form" onSubmit={formActions.handleSubmit}>
<Stack gap={4} position="relative">
{/* First Name */}
<Box>
<Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
First Name
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={User} size={4} color="#6b7280" />
</Box>
<Input
@@ -213,7 +217,6 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
variant={viewData.formState.fields.firstName.error ? 'error' : 'default'}
placeholder="John"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem' }}
autoComplete="given-name"
/>
</Box>
@@ -230,7 +233,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
Last Name
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={User} size={4} color="#6b7280" />
</Box>
<Input
@@ -242,7 +245,6 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
variant={viewData.formState.fields.lastName.error ? 'error' : 'default'}
placeholder="Smith"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem' }}
autoComplete="family-name"
/>
</Box>
@@ -255,11 +257,11 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
</Box>
{/* Name Immutability Warning */}
<Surface variant="muted" rounded="lg" border padding={3} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={3} bg="bg-amber-500/10" borderColor="border-amber-500/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={AlertCircle} size={5} color="#f59e0b" />
<Text size="sm" color="text-warning-amber">
<Text weight="bold">Important:</Text> Your name cannot be changed after signup. Please ensure it's correct.
<Text weight="bold">Important:</Text> Your name cannot be changed after signup. Please ensure it&apos;s correct.
</Text>
</Stack>
</Surface>
@@ -270,7 +272,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
Email Address
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Mail} size={4} color="#6b7280" />
</Box>
<Input
@@ -282,7 +284,6 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
variant={viewData.formState.fields.email.error ? 'error' : 'default'}
placeholder="you@example.com"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem' }}
autoComplete="email"
/>
</Box>
@@ -299,7 +300,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
Password
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Lock} size={4} color="#6b7280" />
</Box>
<Input
@@ -311,14 +312,19 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
variant={viewData.formState.fields.password.error ? 'error' : 'default'}
placeholder="••••••••"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
autoComplete="new-password"
/>
<Box
as="button"
type="button"
onClick={() => formActions.setShowPassword(!uiState.showPassword)}
style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
position="absolute"
right="3"
top="50%"
zIndex={10}
bg="transparent"
borderStyle="none"
cursor="pointer"
>
<Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
</Box>
@@ -333,14 +339,14 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
{viewData.formState.fields.password.value && (
<Box mt={3}>
<Stack direction="row" align="center" gap={2} mb={2}>
<Box style={{ flex: 1, height: '0.375rem', borderRadius: '9999px', backgroundColor: '#262626', overflow: 'hidden' }}>
<Box style={{ height: '100%', width: `${(passwordStrength.score / 5) * 100}%`, backgroundColor: passwordStrength.color === 'bg-red-500' ? '#ef4444' : passwordStrength.color === 'bg-yellow-500' ? '#f59e0b' : passwordStrength.color === 'bg-blue-500' ? '#3b82f6' : '#10b981' }} />
<Box flex={1} h="1.5" rounded="full" bg="bg-neutral-800" overflow="hidden">
<Box h="full" w={`${(passwordStrength.score / 5) * 100}%`} bg={passwordStrength.color === 'bg-red-500' ? 'bg-red-500' : passwordStrength.color === 'bg-yellow-500' ? 'bg-amber-500' : passwordStrength.color === 'bg-blue-500' ? 'bg-blue-500' : 'bg-green-500'} />
</Box>
<Text size="xs" weight="medium" style={{ color: passwordStrength.color === 'bg-red-500' ? '#f87171' : passwordStrength.color === 'bg-yellow-500' ? '#fbbf24' : passwordStrength.color === 'bg-blue-500' ? '#60a5fa' : '#34d399' }}>
<Text size="xs" weight="medium" color={passwordStrength.color === 'bg-red-500' ? 'text-red-400' : passwordStrength.color === 'bg-yellow-500' ? 'text-amber-400' : passwordStrength.color === 'bg-blue-500' ? 'text-blue-400' : 'text-green-400'}>
{passwordStrength.label}
</Text>
</Stack>
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '0.25rem' }}>
<Box display="grid" gridCols={2} gap={1}>
{passwordRequirements.map((req, index) => (
<Stack key={index} direction="row" align="center" gap={1.5}>
<Icon icon={req.met ? Check : X} size={3} color={req.met ? '#10b981' : '#525252'} />
@@ -360,7 +366,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
Confirm Password
</Text>
<Box position="relative">
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
<Box position="absolute" left="3" top="50%" zIndex={10}>
<Icon icon={Lock} size={4} color="#6b7280" />
</Box>
<Input
@@ -372,14 +378,19 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
variant={viewData.formState.fields.confirmPassword.error ? 'error' : 'default'}
placeholder="••••••••"
disabled={mutationState.isPending}
style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
autoComplete="new-password"
/>
<Box
as="button"
type="button"
onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
position="absolute"
right="3"
top="50%"
zIndex={10}
bg="transparent"
borderStyle="none"
cursor="pointer"
>
<Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
</Box>
@@ -408,22 +419,22 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
{mutationState.isPending ? 'Creating account...' : 'Create Account'}
</Button>
</Stack>
</form>
</Box>
{/* Divider */}
<Box style={{ position: 'relative' }} my={6}>
<Box style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
<Box style={{ width: '100%', borderTop: '1px solid #262626' }} />
<Box position="relative" my={6}>
<Box position="absolute" inset="0" display="flex" alignItems="center">
<Box w="full" borderTop borderColor="border-neutral-800" />
</Box>
<Box style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
<Box px={4} style={{ backgroundColor: '#171717' }}>
<Box position="relative" display="flex" justifyContent="center">
<Box px={4} bg="bg-neutral-900">
<Text size="xs" color="text-gray-500">or continue with</Text>
</Box>
</Box>
</Box>
{/* Login Link */}
<Box style={{ textAlign: 'center' }} mt={6}>
<Box textAlign="center" mt={6}>
<Text size="sm" color="text-gray-400">
Already have an account?{' '}
<Link
@@ -436,7 +447,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
</Card>
{/* Footer */}
<Box mt={6} style={{ textAlign: 'center' }}>
<Box mt={6} textAlign="center">
<Text size="xs" color="text-gray-500">
By creating an account, you agree to our{' '}
<Link href="/terms">
@@ -450,12 +461,12 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
</Box>
{/* Mobile Role Info */}
<Box mt={8} className="lg:hidden">
<Text size="xs" color="text-gray-500" block mb={4} style={{ textAlign: 'center' }}>One account for all roles</Text>
<Box mt={8} display={{ base: 'block', lg: 'none' }}>
<Text size="xs" color="text-gray-500" block mb={4} textAlign="center">One account for all roles</Text>
<Stack direction="row" align="center" justify="center" gap={6}>
{USER_ROLES.map((role) => (
<Stack key={role.title} align="center" gap={1}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: `${role.color}1A` }}>
<Surface variant="muted" rounded="lg" padding={2} bg={role.bg}>
<Icon icon={role.icon} size={4} color={role.color} />
</Surface>
<Text size="xs" color="text-gray-500">{role.title}</Text>