92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import { useRef, useState } from "react";
|
|
import { Form, useTransition } from "@remix-run/react";
|
|
import clsx from "clsx";
|
|
|
|
import Button from "../button";
|
|
import SettingsSection from "../settings-section";
|
|
import Modal, { ModalTitle } from "~/features/core/components/modal";
|
|
|
|
export default function DangerZone() {
|
|
const transition = useTransition();
|
|
const isCurrentFormTransition = transition.submission?.formData.get("_action") === "deleteUser";
|
|
const isDeletingUser = isCurrentFormTransition && transition.state === "submitting";
|
|
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
|
|
const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
const closeModal = () => {
|
|
if (isDeletingUser) {
|
|
return;
|
|
}
|
|
|
|
setIsConfirmationModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<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>
|
|
|
|
<span className="text-base font-medium">
|
|
<Button variant="error" type="button" onClick={() => setIsConfirmationModalOpen(true)}>
|
|
Delete my account
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
|
|
<Modal initialFocus={modalCancelButtonRef} isOpen={isConfirmationModalOpen} onClose={closeModal}>
|
|
<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>
|
|
Are you sure you want to delete your account? Your subscription will be cancelled and
|
|
your data permanently deleted.
|
|
</p>
|
|
<p>
|
|
You are free to create a new account with the same email address if you ever wish to
|
|
come back.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
|
|
<Form method="post">
|
|
<button
|
|
type="submit"
|
|
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,
|
|
},
|
|
)}
|
|
disabled={isDeletingUser}
|
|
>
|
|
Delete my account
|
|
</button>
|
|
<input type="hidden" name="_action" value="deleteUser" />
|
|
</Form>
|
|
<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,
|
|
},
|
|
)}
|
|
onClick={closeModal}
|
|
disabled={isDeletingUser}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
</SettingsSection>
|
|
);
|
|
}
|