website refactor
This commit is contained in:
@@ -22,9 +22,11 @@ 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 { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
|
||||
|
||||
interface ResetPasswordTemplateProps extends ResetPasswordViewData {
|
||||
interface ResetPasswordTemplateProps {
|
||||
viewData: ResetPasswordViewData;
|
||||
formActions: {
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
@@ -42,18 +44,21 @@ interface ResetPasswordTemplateProps extends ResetPasswordViewData {
|
||||
};
|
||||
}
|
||||
|
||||
export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
const { formActions, uiState, mutationState, ...viewData } = props;
|
||||
|
||||
export function ResetPasswordTemplate({
|
||||
viewData,
|
||||
formActions,
|
||||
uiState,
|
||||
mutationState,
|
||||
}: ResetPasswordTemplateProps) {
|
||||
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>
|
||||
@@ -62,20 +67,20 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
</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">
|
||||
{/* 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 }}>
|
||||
<Box position="absolute" left="3" top="50%" zIndex={10}>
|
||||
<Icon icon={Lock} size={4} color="#6b7280" />
|
||||
</Box>
|
||||
<Input
|
||||
@@ -87,14 +92,19 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
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' }}
|
||||
position="absolute"
|
||||
right="3"
|
||||
top="50%"
|
||||
zIndex={10}
|
||||
bg="transparent"
|
||||
borderStyle="none"
|
||||
cursor="pointer"
|
||||
>
|
||||
<Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
|
||||
</Box>
|
||||
@@ -112,7 +122,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
Confirm Password
|
||||
</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={Lock} size={4} color="#6b7280" />
|
||||
</Box>
|
||||
<Input
|
||||
@@ -124,14 +134,19 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
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' }}
|
||||
position="absolute"
|
||||
right="3"
|
||||
top="50%"
|
||||
zIndex={10}
|
||||
bg="transparent"
|
||||
borderStyle="none"
|
||||
cursor="pointer"
|
||||
>
|
||||
<Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
|
||||
</Box>
|
||||
@@ -145,7 +160,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
|
||||
{/* 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>
|
||||
@@ -165,8 +180,8 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
</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>
|
||||
@@ -174,10 +189,10 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
</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>
|
||||
@@ -214,7 +229,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user