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">