website refactor
This commit is contained in:
@@ -1,25 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Mail,
|
||||
ArrowLeft,
|
||||
AlertCircle,
|
||||
Flag,
|
||||
Shield,
|
||||
CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Mail, ArrowLeft, AlertCircle, Shield, CheckCircle2 } from 'lucide-react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { LoadingSpinner } from '@/ui/LoadingSpinner';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { AuthCard } from '@/components/auth/AuthCard';
|
||||
import { AuthForm } from '@/components/auth/AuthForm';
|
||||
import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPasswordViewData';
|
||||
|
||||
@@ -37,145 +30,97 @@ interface ForgotPasswordTemplateProps {
|
||||
}
|
||||
|
||||
export function ForgotPasswordTemplate({ viewData, formActions, mutationState }: ForgotPasswordTemplateProps) {
|
||||
const isSubmitting = mutationState.isPending;
|
||||
|
||||
return (
|
||||
<Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" position="relative">
|
||||
{/* Background Pattern */}
|
||||
<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 position="relative" w="full" maxWidth="28rem" px={4}>
|
||||
{/* Header */}
|
||||
<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>
|
||||
<Text color="text-gray-400" block mt={2}>
|
||||
Enter your email and we will send you a reset link
|
||||
</Text>
|
||||
</Box>
|
||||
<AuthCard
|
||||
title="Reset Password"
|
||||
description={viewData.showSuccess ? undefined : "Enter your email and we'll send you a reset link"}
|
||||
>
|
||||
{!viewData.showSuccess ? (
|
||||
<AuthForm onSubmit={formActions.handleSubmit}>
|
||||
<Input
|
||||
label="Email Address"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value}
|
||||
onChange={formActions.handleChange}
|
||||
errorMessage={viewData.formState.fields.email.error}
|
||||
placeholder="you@example.com"
|
||||
disabled={isSubmitting}
|
||||
autoComplete="email"
|
||||
icon={<Mail size={16} />}
|
||||
/>
|
||||
|
||||
<Card position="relative" overflow="hidden">
|
||||
{/* Background accent */}
|
||||
<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 ? (
|
||||
<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 position="absolute" left="3" top="50%" zIndex={10}>
|
||||
<Icon icon={Mail} size={4} color="#6b7280" />
|
||||
</Box>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value}
|
||||
onChange={formActions.handleChange}
|
||||
variant={viewData.formState.fields.email.error ? 'error' : 'default'}
|
||||
placeholder="you@example.com"
|
||||
disabled={mutationState.isPending}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</Box>
|
||||
{viewData.formState.fields.email.error && (
|
||||
<Text size="xs" color="text-error-red" block mt={1}>
|
||||
{viewData.formState.fields.email.error}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Error Message */}
|
||||
{mutationState.error && (
|
||||
<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>
|
||||
</Stack>
|
||||
</Surface>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={mutationState.isPending}
|
||||
fullWidth
|
||||
icon={mutationState.isPending ? <LoadingSpinner size={4} color="white" /> : <Icon icon={Shield} size={4} />}
|
||||
>
|
||||
{mutationState.isPending ? 'Sending...' : 'Send Reset Link'}
|
||||
</Button>
|
||||
|
||||
{/* Back to 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>
|
||||
</Stack>
|
||||
</Link>
|
||||
</Box>
|
||||
{mutationState.error && (
|
||||
<Box p={4} bg="critical-red/10" border borderColor="critical-red/30" rounded="md">
|
||||
<Stack direction="row" align="start" gap={3}>
|
||||
<Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
|
||||
<Text size="sm" color="text-critical-red">{mutationState.error}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
) : (
|
||||
<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>
|
||||
<Text size="sm" color="text-performance-green" weight="medium" block>{viewData.successMessage}</Text>
|
||||
{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} 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
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Surface>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => window.location.href = '/auth/login'}
|
||||
fullWidth
|
||||
>
|
||||
Return to Login
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<Stack direction="row" align="center" justify="center" gap={6} mt={6}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Shield} size={4} color="#737373" />
|
||||
<Text size="sm" color="text-gray-500">Secure reset process</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={CheckCircle2} size={4} color="#737373" />
|
||||
<Text size="sm" color="text-gray-500">15 minute expiration</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={isSubmitting}
|
||||
fullWidth
|
||||
icon={isSubmitting ? <LoadingSpinner size={4} /> : <Shield size={16} />}
|
||||
>
|
||||
{isSubmitting ? 'Sending...' : 'Send Reset Link'}
|
||||
</Button>
|
||||
|
||||
{/* Footer */}
|
||||
<Box mt={6} textAlign="center">
|
||||
<Text size="xs" color="text-gray-500">
|
||||
Need help?{' '}
|
||||
<Link href="/support">
|
||||
<Text color="text-gray-400">Contact support</Text>
|
||||
<Box textAlign="center">
|
||||
<Link href={routes.auth.login}>
|
||||
<Stack direction="row" align="center" justify="center" gap={2} group>
|
||||
<Icon icon={ArrowLeft} size={3.5} color="var(--color-primary)" groupHoverScale />
|
||||
<Text size="sm" weight="bold" color="text-primary-accent">Back to Login</Text>
|
||||
</Stack>
|
||||
</Link>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</AuthForm>
|
||||
) : (
|
||||
<Stack gap={6}>
|
||||
<Box p={4} bg="success-green/10" border borderColor="success-green/30" rounded="md">
|
||||
<Stack direction="row" align="start" gap={3}>
|
||||
<Icon icon={CheckCircle2} size={5} color="var(--color-success)" />
|
||||
<Box>
|
||||
<Text size="sm" color="text-success-green" weight="bold" block>Check your email</Text>
|
||||
<Text size="xs" color="text-gray-400" block mt={1}>{viewData.successMessage}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{viewData.magicLink && (
|
||||
<Box p={3} bg="surface-charcoal" border borderColor="outline-steel" rounded="md">
|
||||
<Text size="xs" color="text-gray-500" block mb={2} weight="bold">DEVELOPMENT MAGIC LINK</Text>
|
||||
<Link href={viewData.magicLink}>
|
||||
<Text size="xs" color="text-primary-accent" block>
|
||||
{viewData.magicLink}
|
||||
</Text>
|
||||
</Link>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => window.location.href = '/auth/login'}
|
||||
fullWidth
|
||||
>
|
||||
Return to Login
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<AuthFooterLinks>
|
||||
<Text size="xs" color="text-gray-600">
|
||||
Need help?{' '}
|
||||
<Link href="/support">Contact support</Link>
|
||||
</Text>
|
||||
</AuthFooterLinks>
|
||||
</AuthCard>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user