feat: add modal to delete account

client/components/LinksTable.tsx

@@ -13,8 +13,8 @@ import { useStoreActions, useStoreState } from "../store";
 import { Link as LinkType } from "../store/links";
 import { Checkbox, TextInput } from "./Input";
 import { NavButton, Button } from "./Button";
-import Text, { H2, H4, Span } from "./Text";
 import { Col, RowCenter } from "./Layout";
+import Text, { H2, Span } from "./Text";
 import { useMessage } from "../hooks";
 import Animation from "./Animation";
 import { Colors } from "../consts";

client/components/Settings/SettingsDeleteAccount.tsx

@@ -4,17 +4,19 @@ import Router from "next/router";
 import axios from "axios";
 
 import { getAxiosConfig } from "../../utils";
-import { Col, RowCenterV } from "../Layout";
+import { Col, RowCenterV, RowCenterH } from "../Layout";
 import Text, { H2, Span } from "../Text";
 import { useMessage } from "../../hooks";
 import { TextInput } from "../Input";
-import { APIv2 } from "../../consts";
+import { APIv2, Colors } from "../../consts";
 import { Button } from "../Button";
 import Icon from "../Icon";
+import Modal from "../Modal";
 
 const SettingsDeleteAccount: FC = () => {
   const [message, setMessage] = useMessage(1500);
   const [loading, setLoading] = useState(false);
+  const [modal, setModal] = useState(false);
   const [formState, { password, label }] = useFormState<{ accpass: string }>(
     null,
     {
@@ -23,6 +25,12 @@ const SettingsDeleteAccount: FC = () => {
   );
 
   const onSubmit = async e => {
+    e.preventDefault();
+    if (loading) return;
+    setModal(true);
+  };
+
+  const onDelete = async e => {
     e.preventDefault();
     if (loading) return;
     setLoading(true);
@@ -44,11 +52,7 @@ const SettingsDeleteAccount: FC = () => {
       <H2 mb={4} bold>
         Delete account
       </H2>
-      <Text mb={4}>
-        Delete your account from {process.env.SITE_NAME}. All of your data
-        including your <Span bold>LINKS</Span> and <Span bold>STATS</Span> will
-        be deleted.
-      </Text>
+      <Text mb={4}>Delete your account from {process.env.SITE_NAME}.</Text>
       <Text
         {...label("password")}
         as="label"
@@ -67,12 +71,45 @@ const SettingsDeleteAccount: FC = () => {
         />
         <Button color="red" type="submit" disabled={loading}>
           <Icon name={loading ? "spinner" : "trash"} mr={2} stroke="white" />
-          {loading ? "Deleting..." : "Delete"}
+          Delete
         </Button>
       </RowCenterV>
-      <Text fontSize={15} mt={3} color={message.color}>
-        {message.text}
-      </Text>
+      <Modal
+        id="delete-account"
+        show={modal}
+        closeHandler={() => setModal(false)}
+      >
+        <>
+          <H2 mb={24} textAlign="center" bold>
+            Delete account?
+          </H2>
+          <Text textAlign="center">
+            All of your data including your <Span bold>LINKS</Span> and{" "}
+            <Span bold>STATS</Span> will be deleted.
+          </Text>
+          <RowCenterH mt={44}>
+            {loading ? (
+              <>
+                <Icon name="spinner" size={20} stroke={Colors.Spinner} />
+              </>
+            ) : message.text ? (
+              <Text fontSize={15} color={message.color}>
+                {message.text}
+              </Text>
+            ) : (
+              <>
+                <Button color="gray" mr={3} onClick={() => setModal(false)}>
+                  Cancel
+                </Button>
+                <Button color="red" ml={3} onClick={onDelete}>
+                  <Icon name="trash" stroke="white" mr={2} />
+                  Delete
+                </Button>
+              </>
+            )}
+          </RowCenterH>
+        </>
+      </Modal>
     </Col>
   );
 };