shellphone.app/app/settings/components/account/danger-zone.tsx

94 lines
3.1 KiB
TypeScript
Raw Normal View History

2021-07-31 17:22:48 +00:00
import { useRef, useState } from "react";
import { useMutation } from "blitz";
2021-07-31 17:22:48 +00:00
import clsx from "clsx";
2021-09-30 21:36:47 +00:00
import Button from "../button";
import SettingsSection from "../settings-section";
2021-10-15 22:24:28 +00:00
import Modal, { ModalTitle } from "app/core/components/modal";
2021-09-30 21:36:47 +00:00
import deleteUser from "../../mutations/delete-user";
2021-07-31 17:22:48 +00:00
export default function DangerZone() {
const deleteUserMutation = useMutation(deleteUser)[0];
2021-07-31 17:22:48 +00:00
const [isDeletingUser, setIsDeletingUser] = useState(false);
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
const closeModal = () => {
if (isDeletingUser) {
return;
}
setIsConfirmationModalOpen(false);
};
const onConfirm = () => {
setIsDeletingUser(true);
return deleteUserMutation();
2021-07-31 17:22:48 +00:00
};
return (
2021-09-30 21:36:47 +00:00
<SettingsSection className="border border-red-300">
<div className="flex justify-between items-center flex-row space-x-2">
<p>
Once you delete your account, all of its data will be permanently deleted and any ongoing
subscription will be cancelled.
</p>
2021-07-31 17:22:48 +00:00
2021-09-30 21:36:47 +00:00
<span className="text-base font-medium">
<Button variant="error" type="button" onClick={() => setIsConfirmationModalOpen(true)}>
Delete my account
</Button>
</span>
2021-07-31 17:22:48 +00:00
</div>
2021-08-01 14:03:49 +00:00
<Modal initialFocus={modalCancelButtonRef} isOpen={isConfirmationModalOpen} onClose={closeModal}>
2021-07-31 17:22:48 +00:00
<div className="md:flex md:items-start">
<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
<ModalTitle>Delete my account</ModalTitle>
<div className="mt-2 text-sm text-gray-500">
<p>
2021-08-01 14:03:49 +00:00
Are you sure you want to delete your account? Your subscription will be cancelled and
your data permanently deleted.
2021-07-31 17:22:48 +00:00
</p>
<p>
2021-08-01 14:03:49 +00:00
You are free to create a new account with the same email address if you ever wish to
come back.
2021-07-31 17:22:48 +00:00
</p>
</div>
</div>
</div>
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
<button
type="button"
className={clsx(
"transition-colors duration-150 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-3 md:w-auto md:text-sm",
{
"bg-red-400 cursor-not-allowed": isDeletingUser,
"bg-red-600 hover:bg-red-700": !isDeletingUser,
2021-08-01 12:04:04 +00:00
},
2021-07-31 17:22:48 +00:00
)}
onClick={onConfirm}
disabled={isDeletingUser}
>
Delete my account
</button>
<button
ref={modalCancelButtonRef}
type="button"
className={clsx(
"transition-colors duration-150 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto md:text-sm",
{
"bg-gray-50 cursor-not-allowed": isDeletingUser,
"hover:bg-gray-50": !isDeletingUser,
2021-08-01 12:04:04 +00:00
},
2021-07-31 17:22:48 +00:00
)}
onClick={closeModal}
disabled={isDeletingUser}
>
Cancel
</button>
</div>
</Modal>
</SettingsSection>
);
}