website refactor
This commit is contained in:
@@ -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'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'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'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>
|
||||
|
||||
Reference in New Issue
Block a user