Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 1x 40x 40x | import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/collapse';
import { Button } from '@/components/button';
import { PasswordInput } from '@/components/password-input';
import { FormMessage } from '@/components/form-message';
import { Heading } from '@/components/heading';
import { usePasswordSettings } from '../hooks/use-password-settings';
import { PASSWORD_SECTION } from '@/constants/setting';
export const PasswordSection = () => {
const {
control,
error,
success,
isSubmitting,
handleSubmit,
dismissError,
dismissSuccess,
} = usePasswordSettings();
return (
<Collapsible className="border-b border-gray-200">
<CollapsibleTrigger className="w-full text-left border-0 p-6">
<Heading as="h3" size="h5">
{PASSWORD_SECTION.TITLE}
</Heading>
</CollapsibleTrigger>
<CollapsibleContent className="border-0 p-0">
<div className="w-[362px] mx-auto py-6">
{/* Error Message */}
{error && (
<FormMessage
type="error"
message={error}
onDismiss={dismissError}
/>
)}
{/* Success Message */}
{success && (
<FormMessage
type="success"
message={success}
onDismiss={dismissSuccess}
/>
)}
{/* Password Form */}
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
<PasswordInput
name={'currentPassword' as any}
control={control as any}
id="currentPassword"
label={PASSWORD_SECTION.FIELDS.CURRENT_PASSWORD.LABEL}
required
placeholder={PASSWORD_SECTION.FIELDS.CURRENT_PASSWORD.PLACEHOLDER}
className="h-[50px]"
disabled={isSubmitting}
/>
<PasswordInput
name={'newPassword' as any}
control={control as any}
id="newPassword"
label={PASSWORD_SECTION.FIELDS.NEW_PASSWORD.LABEL}
required
placeholder={PASSWORD_SECTION.FIELDS.NEW_PASSWORD.PLACEHOLDER}
className="h-[50px]"
disabled={isSubmitting}
/>
<PasswordInput
name={'confirmPassword' as any}
control={control as any}
id="confirmPassword"
label={PASSWORD_SECTION.FIELDS.CONFIRM_PASSWORD.LABEL}
required
placeholder={PASSWORD_SECTION.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER}
className="h-[50px]"
disabled={isSubmitting}
/>
{/* Save Button */}
<div className="flex justify-center mt-6 mb-6">
<Button
type="submit"
className="bg-gradient-vertical hover:opacity-90 text-white px-6 py-2"
disabled={isSubmitting}
>
{isSubmitting
? PASSWORD_SECTION.BUTTONS.UPDATE.LOADING_TEXT
: PASSWORD_SECTION.BUTTONS.UPDATE.TEXT}
</Button>
</div>
</form>
</div>
</CollapsibleContent>
</Collapsible>
);
};
|