feat: password reset by admin (#360)

frontend/src/app/[locale]/admin/PasswordResetDialog.tsx

@@ -0,0 +1,76 @@
+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>
+  );
+}