Files
SMATEC-FRONTEND/src/pages/Manager/User/components/Disable2FA.tsx

137 lines
3.9 KiB
TypeScript

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;