feat(users): add reset password functionality for users and implement forgot password page

2026-02-03 17:33:47 +07:00
parent 9bc15192ec
commit dca363275e
35 changed files with 1592 additions and 321 deletions
--- a/src/pages/Manager/User/components/ResetPassword.tsx
+++ b/src/pages/Manager/User/components/ResetPassword.tsx
@@ -0,0 +1,168 @@
+import { apiResetUserPassword } from '@/services/master/UserController';
+import { LockOutlined } from '@ant-design/icons';
+import {
+  ModalForm,
+  ProFormInstance,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { MessageInstance } from 'antd/es/message/interface';
+import { useRef } from 'react';
+
+type ResetPasswordProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  user: MasterModel.UserResponse;
+  message: MessageInstance;
+  onSuccess?: (isSuccess: boolean) => void;
+};
+
+type ResetPasswordFormValues = {
+  password: string;
+  confirmPassword: string;
+};
+
+const ResetPassword = ({
+  isOpen,
+  setIsOpen,
+  user,
+  message,
+  onSuccess,
+}: ResetPasswordProps) => {
+  const formRef = useRef<ProFormInstance<ResetPasswordFormValues>>();
+  const intl = useIntl();
+
+  return (
+    <ModalForm<ResetPasswordFormValues>
+      title={`${intl.formatMessage({
+        id: 'master.users.resetPassword.modal.title',
+        defaultMessage: 'Reset Password',
+      })}: ${user.metadata?.full_name || user.email}`}
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      formRef={formRef}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnHidden: true,
+      }}
+      onFinish={async (values: ResetPasswordFormValues) => {
+        try {
+          const resp = await apiResetUserPassword(
+            user.id || '',
+            values.password,
+          );
+          message.success(
+            intl.formatMessage({
+              id: 'master.users.resetPassword.success',
+              defaultMessage: 'Reset password successfully',
+            }),
+          );
+          formRef.current?.resetFields();
+          onSuccess?.(true);
+          return true;
+        } catch (error) {
+          message.error(
+            intl.formatMessage({
+              id: 'master.users.resetPassword.error',
+              defaultMessage: 'Failed to reset password',
+            }),
+          );
+          onSuccess?.(false);
+          return false;
+        }
+      }}
+    >
+      <ProFormText.Password
+        rules={[
+          {
+            required: true,
+            message: (
+              <FormattedMessage
+                id="master.users.password.required"
+                defaultMessage="Password is required"
+              />
+            ),
+          },
+          {
+            pattern: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*.]{6,16}$/g,
+            message: intl.formatMessage({
+              id: 'master.profile.change-password.password.strong',
+              defaultMessage:
+                'A password contains at least 8 characters, including at least one number and includes both lower and uppercase letters and special characters, for example #, ?, !',
+            }),
+          },
+          {
+            validator: async (rule, value) => {
+              if (value && value.length < 8) {
+                return Promise.reject(
+                  intl.formatMessage({
+                    id: 'master.users.password.minimum',
+                    defaultMessage: 'Minimum password length is 8',
+                  }),
+                );
+              }
+              return Promise.resolve();
+            },
+          },
+        ]}
+        name="password"
+        label={intl.formatMessage({
+          id: 'master.users.password',
+          defaultMessage: 'Password',
+        })}
+        fieldProps={{
+          prefix: <LockOutlined />,
+          autoComplete: 'new-password',
+        }}
+        placeholder={intl.formatMessage({
+          id: 'master.users.password.placeholder',
+          defaultMessage: 'Password',
+        })}
+      />
+      <ProFormText.Password
+        dependencies={['password']}
+        rules={[
+          {
+            required: true,
+            message: (
+              <FormattedMessage
+                id="master.users.confirmPassword.required"
+                defaultMessage="Please confirm your password"
+              />
+            ),
+          },
+          ({ getFieldValue }) => ({
+            validator(_: unknown, value) {
+              if (!value || getFieldValue('password') === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(
+                new Error(
+                  intl.formatMessage({
+                    id: 'master.users.confirmPassword.mismatch',
+                    defaultMessage: 'The two passwords do not match',
+                  }),
+                ),
+              );
+            },
+          }),
+        ]}
+        name="confirmPassword"
+        label={intl.formatMessage({
+          id: 'master.users.confirmPassword',
+          defaultMessage: 'Confirm Password',
+        })}
+        fieldProps={{
+          prefix: <LockOutlined />,
+          autoComplete: 'new-password',
+        }}
+        placeholder={intl.formatMessage({
+          id: 'master.users.confirmPassword.placeholder',
+          defaultMessage: 'Confirm Password',
+        })}
+      />
+    </ModalForm>
+  );
+};
+
+export default ResetPassword;