feat: Implement Two-Factor Authentication (2FA) with new OTP and login forms, updated API endpoints, and manager functionality to disable 2FA.

2026-02-07 08:24:13 +07:00
parent a011405d92
commit 155101491b
22 changed files with 803 additions and 144 deletions
--- a/src/pages/Manager/User/components/Disable2FA.tsx
+++ b/src/pages/Manager/User/components/Disable2FA.tsx
@@ -0,0 +1,136 @@
+import IconFont from '@/components/IconFont';
+import { apiAdminDisable2FA } from '@/services/master/AuthController';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Modal, Tooltip } from 'antd';
+import { MessageInstance } from 'antd/es/message/interface';
+import { useState } from 'react';
+
+interface Disable2FAProps {
+  user: MasterModel.UserResponse;
+  message: MessageInstance;
+  onSuccess?: (isSuccess: boolean) => void;
+}
+
+const Disable2FA = ({ user, message, onSuccess }: Disable2FAProps) => {
+  const intl = useIntl();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Only show if user has 2FA enabled
+  if (!user.enable_2fa) {
+    return null;
+  }
+
+  const handleConfirmDisable = async () => {
+    if (!user.id) return;
+
+    setIsLoading(true);
+    try {
+      await apiAdminDisable2FA(user.id);
+      message.success(
+        intl.formatMessage({
+          id: 'master.users.disable2fa.success',
+          defaultMessage: '2FA has been disabled successfully',
+        }),
+      );
+      setIsModalOpen(false);
+      onSuccess?.(true);
+    } catch (error) {
+      console.error('Disable 2FA error:', error);
+      message.error(
+        intl.formatMessage({
+          id: 'master.users.disable2fa.error',
+          defaultMessage: 'Failed to disable 2FA',
+        }),
+      );
+      onSuccess?.(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Tooltip
+        title={intl.formatMessage({
+          id: 'master.users.disable2fa.title',
+          defaultMessage: 'Disable 2FA',
+        })}
+      >
+        <Button
+          shape="default"
+          size="small"
+          danger
+          icon={<IconFont type="icon-security" />}
+          onClick={() => setIsModalOpen(true)}
+          style={{ borderColor: '#ff4d4f', color: '#ff4d4f' }}
+        />
+      </Tooltip>
+
+      <Modal
+        title={
+          <span style={{ color: '#ff4d4f' }}>
+            <ExclamationCircleOutlined style={{ marginRight: 8 }} />
+            {intl.formatMessage({
+              id: 'master.users.disable2fa.modal.title',
+              defaultMessage: 'Disable Two-Factor Authentication',
+            })}
+          </span>
+        }
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        footer={[
+          <Button key="cancel" onClick={() => setIsModalOpen(false)}>
+            {intl.formatMessage({
+              id: 'common.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>,
+          <Button
+            key="confirm"
+            type="primary"
+            danger
+            loading={isLoading}
+            onClick={handleConfirmDisable}
+          >
+            {intl.formatMessage({
+              id: 'common.confirm',
+              defaultMessage: 'Confirm',
+            })}
+          </Button>,
+        ]}
+      >
+        <div style={{ marginBottom: 16 }}>
+          <p>
+            {intl.formatMessage({
+              id: 'master.users.disable2fa.modal.warning',
+              defaultMessage:
+                'Are you sure you want to disable 2FA for this user?',
+            })}
+          </p>
+          <p style={{ fontWeight: 'bold' }}>{user.email}</p>
+        </div>
+        <div
+          style={{
+            backgroundColor: '#fff2f0',
+            border: '1px solid #ffccc7',
+            borderRadius: 6,
+            padding: 12,
+          }}
+        >
+          <p style={{ color: '#ff4d4f', margin: 0 }}>
+            <ExclamationCircleOutlined style={{ marginRight: 8 }} />
+            {intl.formatMessage({
+              id: 'master.users.disable2fa.modal.caution',
+              defaultMessage:
+                'Warning: Disabling 2FA will reduce account security. The user will need to re-enable 2FA from their profile settings.',
+            })}
+          </p>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default Disable2FA;