|
1 | | -import { cn, Input, Label, TextField } from '@heroui/react'; |
2 | | -import { type SubmitEventHandler } from 'react'; |
| 1 | +import { Input, Label, TextField } from '@heroui/react'; |
| 2 | +import { type ReactNode, type SubmitEventHandler } from 'react'; |
3 | 3 |
|
4 | 4 | import { CustomButton } from '@components'; |
5 | 5 | import { useTextField } from '@hooks'; |
6 | 6 |
|
7 | 7 | import PasswordInput from './PasswordInput'; |
8 | 8 |
|
9 | 9 | type AuthFormProps = { |
| 10 | + canReset?: boolean; |
| 11 | + description?: ReactNode; |
| 12 | + footer?: ReactNode; |
10 | 13 | isAuthenticating: boolean; |
11 | | - mode: 'login' | 'register' | 'reset-password'; |
12 | | - submitButtonLabel: string; |
13 | | - goBackToLogin: () => void; |
14 | | - onCancel: () => void; |
15 | | - onModeChange: (mode: 'login' | 'register' | 'reset-password') => void; |
16 | | - onSubmit: (email: string, password: string, name: string) => void; |
| 14 | + passwordAutoComplete?: string; |
| 15 | + submitLabel: string; |
| 16 | + withPassword?: boolean; |
| 17 | + onSubmit: (email: string, password: string) => void; |
17 | 18 | }; |
18 | 19 |
|
19 | 20 | const AuthForm = ({ |
20 | | - goBackToLogin, |
| 21 | + canReset, |
| 22 | + description, |
| 23 | + footer, |
21 | 24 | isAuthenticating, |
22 | | - mode, |
23 | | - onCancel, |
24 | | - onModeChange, |
25 | 25 | onSubmit, |
26 | | - submitButtonLabel, |
| 26 | + passwordAutoComplete, |
| 27 | + submitLabel, |
| 28 | + withPassword = true, |
27 | 29 | }: AuthFormProps) => { |
28 | | - const [email, handleEmailChange, clearEmail] = useTextField(); |
29 | | - const [name, handleNameChange, clearName] = useTextField(); |
30 | | - const [password, handlePasswordChange, clearPassword] = useTextField(); |
| 30 | + const [email, handleEmailChange] = useTextField(); |
| 31 | + const [password, handlePasswordChange] = useTextField(); |
31 | 32 |
|
32 | | - const handleSubmit: SubmitEventHandler = async (event) => { |
| 33 | + const handleSubmit: SubmitEventHandler = (event) => { |
33 | 34 | event.preventDefault(); |
34 | | - onSubmit(email, password, name); |
35 | | - }; |
36 | | - |
37 | | - const clearValues = () => { |
38 | | - clearEmail(); |
39 | | - clearPassword(); |
40 | | - clearName(); |
41 | | - }; |
42 | | - |
43 | | - const handleCancel = () => { |
44 | | - clearValues(); |
45 | | - onCancel(); |
| 35 | + onSubmit(email, password); |
46 | 36 | }; |
47 | 37 |
|
48 | 38 | return ( |
49 | | - <form |
50 | | - onSubmit={handleSubmit} |
51 | | - data-testid="submit-form" |
52 | | - className={cn(mode === 'reset-password' && 'py-3')} |
53 | | - > |
| 39 | + <form className="w-full" onSubmit={handleSubmit} data-testid="submit-form"> |
54 | 40 | <div className="flex flex-col gap-4"> |
55 | | - {mode === 'reset-password' && ( |
56 | | - <p> |
57 | | - Enter your email address below and we will send you a link to reset |
58 | | - your password. |
59 | | - </p> |
60 | | - )} |
61 | | - <div> |
62 | | - <TextField |
63 | | - fullWidth |
64 | | - name="email" |
65 | | - type="email" |
66 | | - value={email} |
67 | | - variant="secondary" |
68 | | - onChange={handleEmailChange} |
69 | | - isDisabled={isAuthenticating} |
70 | | - > |
71 | | - <Label>Email</Label> |
72 | | - <Input placeholder="me@email.com" /> |
73 | | - </TextField> |
74 | | - {mode === 'reset-password' && ( |
75 | | - <div className="text-right"> |
76 | | - <CustomButton |
77 | | - onPress={goBackToLogin} |
78 | | - className="h-auto bg-transparent p-0 text-gray-400 hover:text-gray-700" |
79 | | - > |
80 | | - Back to login |
81 | | - </CustomButton> |
82 | | - </div> |
83 | | - )} |
84 | | - </div> |
85 | | - {mode === 'register' && ( |
86 | | - <TextField |
87 | | - fullWidth |
88 | | - name="name" |
89 | | - value={name} |
90 | | - variant="secondary" |
91 | | - onChange={handleNameChange} |
92 | | - isDisabled={isAuthenticating} |
93 | | - > |
94 | | - <Label>Name</Label> |
95 | | - <Input placeholder="Optional" /> |
96 | | - </TextField> |
97 | | - )} |
98 | | - {['login', 'register'].includes(mode) && ( |
| 41 | + {!!description && <p className="text-muted text-sm">{description}</p>} |
| 42 | + <TextField |
| 43 | + fullWidth |
| 44 | + name="email" |
| 45 | + type="email" |
| 46 | + value={email} |
| 47 | + variant="secondary" |
| 48 | + onChange={handleEmailChange} |
| 49 | + isDisabled={isAuthenticating} |
| 50 | + > |
| 51 | + <Label className="h-6">Email</Label> |
| 52 | + <Input autoComplete="email" placeholder="me@email.com" /> |
| 53 | + </TextField> |
| 54 | + {withPassword && ( |
99 | 55 | <PasswordInput |
100 | 56 | value={password} |
101 | 57 | label="Password" |
102 | 58 | variant="secondary" |
| 59 | + canReset={canReset} |
103 | 60 | isDisabled={isAuthenticating} |
104 | 61 | onChange={handlePasswordChange} |
105 | | - onReset={ |
106 | | - mode === 'login' |
107 | | - ? () => { |
108 | | - return onModeChange('reset-password'); |
109 | | - } |
110 | | - : undefined |
111 | | - } |
| 62 | + autoComplete={passwordAutoComplete} |
112 | 63 | /> |
113 | 64 | )} |
114 | 65 | </div> |
115 | | - <div className="mt-4 flex justify-end gap-2"> |
116 | | - <CustomButton |
117 | | - variant="secondary" |
118 | | - onPress={handleCancel} |
119 | | - isDisabled={isAuthenticating} |
120 | | - > |
121 | | - Cancel |
122 | | - </CustomButton> |
123 | | - <CustomButton |
124 | | - type="submit" |
125 | | - variant="primary" |
126 | | - data-testid="submit-button" |
127 | | - isPending={isAuthenticating} |
128 | | - > |
129 | | - {submitButtonLabel} |
130 | | - </CustomButton> |
131 | | - </div> |
| 66 | + <CustomButton |
| 67 | + fullWidth |
| 68 | + type="submit" |
| 69 | + className="mt-6" |
| 70 | + variant="primary" |
| 71 | + data-testid="submit-button" |
| 72 | + isPending={isAuthenticating} |
| 73 | + > |
| 74 | + {submitLabel} |
| 75 | + </CustomButton> |
| 76 | + {!!footer && ( |
| 77 | + <div className="text-muted mt-4 text-center text-sm">{footer}</div> |
| 78 | + )} |
132 | 79 | </form> |
133 | 80 | ); |
134 | 81 | }; |
|
0 commit comments