229 lines
10 KiB
TypeScript
229 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
Lock,
|
|
Eye,
|
|
EyeOff,
|
|
AlertCircle,
|
|
Flag,
|
|
Shield,
|
|
CheckCircle2,
|
|
ArrowLeft,
|
|
} from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
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 { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
|
|
|
|
interface ResetPasswordTemplateProps extends ResetPasswordViewData {
|
|
formActions: {
|
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
setShowSuccess: (show: boolean) => void;
|
|
setShowPassword: (show: boolean) => void;
|
|
setShowConfirmPassword: (show: boolean) => void;
|
|
};
|
|
uiState: {
|
|
showPassword: boolean;
|
|
showConfirmPassword: boolean;
|
|
};
|
|
mutationState: {
|
|
isPending: boolean;
|
|
error: string | null;
|
|
};
|
|
}
|
|
|
|
export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
|
const { formActions, uiState, mutationState, ...viewData } = props;
|
|
|
|
return (
|
|
<Box as="main" style={{ 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 style={{ position: 'relative', width: '100%', maxWidth: '28rem', padding: '0 1rem' }}>
|
|
{/* 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' }}>
|
|
<Icon icon={Flag} size={8} color="#3b82f6" />
|
|
</Surface>
|
|
<Heading level={1}>Reset Password</Heading>
|
|
<Text color="text-gray-400" block mt={2}>
|
|
Create a new secure password for your account
|
|
</Text>
|
|
</Box>
|
|
|
|
<Card style={{ 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' }} />
|
|
|
|
{!viewData.showSuccess ? (
|
|
<form onSubmit={formActions.handleSubmit}>
|
|
<Stack gap={5} style={{ 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 }}>
|
|
<Icon icon={Lock} size={4} color="#6b7280" />
|
|
</Box>
|
|
<Input
|
|
id="newPassword"
|
|
name="newPassword"
|
|
type={uiState.showPassword ? 'text' : 'password'}
|
|
value={viewData.formState.fields.newPassword.value}
|
|
onChange={formActions.handleChange}
|
|
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' }}
|
|
>
|
|
<Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
|
|
</Box>
|
|
</Box>
|
|
{viewData.formState.fields.newPassword.error && (
|
|
<Text size="xs" color="text-error-red" block mt={1}>
|
|
{viewData.formState.fields.newPassword.error}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Confirm Password */}
|
|
<Box>
|
|
<Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
|
|
Confirm Password
|
|
</Text>
|
|
<Box position="relative">
|
|
<Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
|
|
<Icon icon={Lock} size={4} color="#6b7280" />
|
|
</Box>
|
|
<Input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type={uiState.showConfirmPassword ? 'text' : 'password'}
|
|
value={viewData.formState.fields.confirmPassword.value}
|
|
onChange={formActions.handleChange}
|
|
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' }}
|
|
>
|
|
<Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
|
|
</Box>
|
|
</Box>
|
|
{viewData.formState.fields.confirmPassword.error && (
|
|
<Text size="xs" color="text-error-red" block mt={1}>
|
|
{viewData.formState.fields.confirmPassword.error}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{/* 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)' }}>
|
|
<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 ? 'Resetting...' : 'Reset Password'}
|
|
</Button>
|
|
|
|
{/* Back to Login */}
|
|
<Box style={{ textAlign: 'center' }}>
|
|
<Link href="/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>
|
|
</Stack>
|
|
</form>
|
|
) : (
|
|
<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 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>
|
|
<Text size="xs" color="text-gray-400" block mt={1}>
|
|
Your password has been successfully reset
|
|
</Text>
|
|
</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 password reset</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={CheckCircle2} size={4} color="#737373" />
|
|
<Text size="sm" color="text-gray-500">Encrypted transmission</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Footer */}
|
|
<Box mt={6} style={{ textAlign: 'center' }}>
|
|
<Text size="xs" color="text-gray-500">
|
|
Need help?{' '}
|
|
<Link href="/support">
|
|
<Text color="text-gray-400">Contact support</Text>
|
|
</Link>
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|