SMATEC-FRONTEND/src/pages/Manager/User/components/ResetPassword.tsx

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;