127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Mail, ArrowLeft, AlertCircle, Shield, CheckCircle2 } from 'lucide-react';
|
|
import { Button } from '@/ui/Button';
|
|
import { Input } from '@/ui/Input';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
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';
|
|
|
|
interface ForgotPasswordTemplateProps {
|
|
viewData: ForgotPasswordViewData;
|
|
formActions: {
|
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
setShowSuccess: (show: boolean) => void;
|
|
};
|
|
mutationState: {
|
|
isPending: boolean;
|
|
error: string | null;
|
|
};
|
|
}
|
|
|
|
export function ForgotPasswordTemplate({ viewData, formActions, mutationState }: ForgotPasswordTemplateProps) {
|
|
const isSubmitting = mutationState.isPending;
|
|
|
|
return (
|
|
<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} />}
|
|
/>
|
|
|
|
{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>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
disabled={isSubmitting}
|
|
fullWidth
|
|
icon={isSubmitting ? <LoadingSpinner size={4} /> : <Shield size={16} />}
|
|
>
|
|
{isSubmitting ? 'Sending...' : 'Send Reset Link'}
|
|
</Button>
|
|
|
|
<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>
|
|
</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>
|
|
);
|
|
}
|