diff options
author | poeti8 <ezzati.upt@gmail.com> | 2020-02-15 16:57:36 +0300 |
---|---|---|
committer | poeti8 <ezzati.upt@gmail.com> | 2020-02-15 16:57:36 +0300 |
commit | bd5b7f0de936131bfafbc87cebd361e0303ae554 (patch) | |
tree | 30dd2d15771a4fbb92ef41d001ed08e9fb78dc94 /client | |
parent | a5fa5a711fec971b2749876e24a2e3d12c3c3487 (diff) |
feat: add modal to delete account
Diffstat (limited to 'client')
-rw-r--r-- | client/components/LinksTable.tsx | 2 | ||||
-rw-r--r-- | client/components/Settings/SettingsDeleteAccount.tsx | 59 |
2 files changed, 49 insertions, 12 deletions
diff --git a/client/components/LinksTable.tsx b/client/components/LinksTable.tsx index 152cb3e..3332b5f 100644 --- a/client/components/LinksTable.tsx +++ b/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"; diff --git a/client/components/Settings/SettingsDeleteAccount.tsx b/client/components/Settings/SettingsDeleteAccount.tsx index 6cf840c..f070fa0 100644 --- a/client/components/Settings/SettingsDeleteAccount.tsx +++ b/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, { @@ -25,6 +27,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); try { await axios.post( @@ -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> ); }; |