prompt before deleting account

This commit is contained in:
Roland Osborne 2022-09-06 10:55:10 -07:00
parent e3d67a63bb
commit a912ceadd7

View File

@ -1,13 +1,24 @@
import { Logo } from 'logo/Logo'; import { Logo } from 'logo/Logo';
import { AccountItemWrapper, AccessLayout, DeleteButton, EnableButton, DisableButton, ResetButton } from './AccountItem.styled'; import { AccountItemWrapper, AccessLayout, DeleteButton, EnableButton, DisableButton, ResetButton } from './AccountItem.styled';
import { useAccountItem } from './useAccountItem.hook'; import { useAccountItem } from './useAccountItem.hook';
import { CopyOutlined, UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons'; import { ExclamationCircleOutlined, CopyOutlined, UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { Modal, Tooltip, Button } from 'antd'; import { Modal, Tooltip, Button } from 'antd';
export function AccountItem({ token, item, remove }) { export function AccountItem({ token, item, remove }) {
const { state, actions } = useAccountItem(token, item, remove); const { state, actions } = useAccountItem(token, item, remove);
const removeAccount = () => {
Modal.confirm({
title: 'Are you sure you want to delete the account?',
icon: <ExclamationCircleOutlined />,
onOk() {
actions.remove();
},
onCancel() {},
});
}
const onClipboard = (value) => { const onClipboard = (value) => {
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
}; };
@ -50,7 +61,7 @@ export function AccountItem({ token, item, remove }) {
<Enable /> <Enable />
<Tooltip placement="topLeft" title="Delete Account"> <Tooltip placement="topLeft" title="Delete Account">
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />} <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={() => actions.remove()}></DeleteButton> loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
</Tooltip> </Tooltip>
</div> </div>
<Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent" <Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent"