chore: added type DELETE to confirm

open-sauced · Oct 26, 2023 · cf2b031 · cf2b031
1 parent d5525d6
commit cf2b031
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -41,6 +41,9 @@ interface DeleteAccountModalProps {
 }
 
 const DeleteAccountModal = ({ open, setOpen, onDelete }: DeleteAccountModalProps) => {
+  const [confirmText, setConfirmText] = useState("");
+  const disabled = confirmText !== "DELETE";
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent className="p-4">
@@ -49,14 +52,27 @@ const DeleteAccountModal = ({ open, setOpen, onDelete }: DeleteAccountModalProps
         </DialogHeader>
         <div className="flex flex-col gap-4">
           <Text>Are you sure you want to delete your account?</Text>
+          <Text>
+            Type <span className="font-bold text-light-red-10">DELETE</span> in all caps to confirm
+          </Text>
+          <TextInput
+            onChange={(e) => {
+              setConfirmText(e.target.value);
+            }}
+          />
           <div className="flex gap-4">
             <Button
               type="submit"
               rel="noopener noreferrer"
               target="_blank"
               className="w-max border-dark-red-8 bg-dark-red-8 text-white hover:border-dark-red-7 hover:bg-dark-red-7"
               variant="primary"
-              onClick={onDelete}
+              onClick={() => {
+                if (!disabled) {
+                  onDelete();
+                }
+              }}
+              disabled={disabled}
             >
               Delete
             </Button>