From a912ceadd7213d4f21f52cad6f3ef50751b9c05b Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 6 Sep 2022 10:55:10 -0700
Subject: [PATCH] prompt before deleting account

---
 .../admin/dashboard/accountItem/AccountItem.jsx   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/net/web/src/admin/dashboard/accountItem/AccountItem.jsx b/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
index e0f8a370..159297c5 100644
--- a/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
+++ b/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
@@ -1,13 +1,24 @@
 import { Logo } from 'logo/Logo';
 import { AccountItemWrapper, AccessLayout, DeleteButton, EnableButton, DisableButton, ResetButton } from './AccountItem.styled';
 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';
 
 export function AccountItem({ 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) => {
     navigator.clipboard.writeText(value);
   };
@@ -50,7 +61,7 @@ export function AccountItem({ token, item, remove }) {
         <Enable />
         <Tooltip placement="topLeft" title="Delete Account">
           <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
-              loading={state.removeBusy} onClick={() => actions.remove()}></DeleteButton>
+              loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
         </Tooltip>
       </div>
       <Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent"