77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Input } from '@heroui/react';
|
|
import { useState } from 'react';
|
|
import { isValidPassword } from '../account/validate';
|
|
import { AdminMessages } from '@/types/user';
|
|
|
|
type Props = {
|
|
isOpen: boolean;
|
|
onCancel: () => void;
|
|
onReset: (newPassword: string) => void;
|
|
messages: AdminMessages;
|
|
};
|
|
|
|
export default function PasswordResetDialog({ isOpen, onCancel, onReset, messages }: Props) {
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [errorMessage, setErrorMessage] = useState('');
|
|
|
|
const validate = async () => {
|
|
if (newPassword !== confirmPassword) {
|
|
setErrorMessage(messages.passwordNotMatch);
|
|
return;
|
|
}
|
|
|
|
if (!isValidPassword(newPassword)) {
|
|
setErrorMessage(messages.invalidPassword);
|
|
return;
|
|
}
|
|
|
|
onReset(newPassword);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onOpenChange={() => {
|
|
onCancel();
|
|
}}
|
|
>
|
|
<ModalContent>
|
|
<ModalHeader className="flex flex-col gap-1">{messages.resetPassword}</ModalHeader>
|
|
<ModalBody>
|
|
<div className="space-y-3">
|
|
<form>
|
|
{errorMessage && <div className="my-3 text-danger">{errorMessage}</div>}
|
|
<Input
|
|
size="sm"
|
|
type="password"
|
|
label="New Password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
autoComplete="new-password"
|
|
/>
|
|
<Input
|
|
size="sm"
|
|
type="password"
|
|
label="Confirm New Password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
autoComplete="new-password"
|
|
className="mt-3"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button variant="light" onPress={onCancel}>
|
|
{messages.close}
|
|
</Button>
|
|
<Button color="danger" onPress={validate}>
|
|
{messages.reset}
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
}
|