Add secure wipe

src/components/Account/Settings.tsx

@@ -2,16 +2,9 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import Avatar from '@material-ui/core/Avatar';
-import ImageIcon from '@material-ui/icons/Image';
-import WorkIcon from '@material-ui/icons/Work';
-import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 import SettingsPageHead from '@/components/Account/SettingsPageHead';
 import { Button } from '@material-ui/core';
-import ClearDialog from '@/components/Account/AccountDialog/ClearDialog';
-import DeleteAndClearDialog from '@/components/Account/AccountDialog/DeleteAndClearDialog';
-import { useState } from 'react';
 
 export default function Settings() {
   const openDeleteDialog = () => {
@@ -21,27 +14,20 @@ export default function Settings() {
     window.location.replace(`/secure/clear/`);
   };
 
-  const [deleteAndClearDialogOpen, setDeleteAndClearDialogOpen] = useState(
-    false,
-  );
   const openDeleteAndClearDialog = () => {
-    setDeleteAndClearDialogOpen(true);
-  };
-  const closeDeleteAndClearDialog = () => {
-    setDeleteAndClearDialogOpen(false);
+    window.location.replace(`/secure/wipe/`);
   };
 
   return (
     <div className="w-full flex flex-col justify-center items-center">
-      <DeleteAndClearDialog
-        open={deleteAndClearDialogOpen}
-        handleClose={closeDeleteAndClearDialog}
-      />
       <SettingsPageHead />
       <p className="text-xl m-6">Manage Your Account</p>
       <List className="w-80 sm:w-3/4 bg-gray-200 dark:bg-gray-500 rounded-md">
         <ListItem className="flex flex-col sm:flex-row justify-center items-center">
-          <ListItemText primary="Delete Account" secondary="This will delete your user account but keep all of your uploaded files accessible on Firevault." />
+          <ListItemText
+            primary="Delete Account"
+            secondary="This will delete your user account but keep all of your uploaded files accessible on Firevault."
+          />
           <ListItemAvatar>
             <Button
               onClick={openDeleteDialog}
@@ -55,9 +41,18 @@ export default function Settings() {
         </ListItem>
         <Divider variant="middle" component="li" />
         <ListItem className="flex flex-col sm:flex-row justify-center items-center">
-          <ListItemText className="text-white" primary="Clear Data" secondary="This will clear all of your existing files on Firevault." />
+          <ListItemText
+            className="text-white"
+            primary="Clear Data"
+            secondary="This will clear all of your existing files on Firevault."
+          />
           <ListItemAvatar>
-            <Button onClick={openClearDialog} className="m-3" variant="contained" color="secondary">
+            <Button
+              onClick={openClearDialog}
+              className="m-3"
+              variant="contained"
+              color="secondary"
+            >
               Clear Data
             </Button>
           </ListItemAvatar>

src/components/Secure/DeleteAndClear/DeleteAndClearAppBar.tsx

@@ -0,0 +1,41 @@
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { useState } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Avatar from '@material-ui/core/Avatar';
+import { IconButton } from '@material-ui/core';
+import AutorenewIcon from '@material-ui/icons/Autorenew';
+import fire from '../../../../utils/firebase';
+
+export default function DeleteAndClearAppBar() {
+  const photoURL = fire.auth()?.currentUser?.photoURL;
+  const name = fire.auth().currentUser!.displayName;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const isMenuOpen = Boolean(anchorEl);
+
+  return (
+    <div>
+      <AppBar position="fixed">
+        <Toolbar
+          style={{
+            display: `flex`,
+            flexDirection: `row`,
+            justifyContent: `space-between`,
+          }}
+        >
+          <a href="/" className="flex flex-row text-center align-bottom">
+            <img className="m-1 p-1 w-9 h-10" alt="Logo" src="/firevault.png" />
+            <Typography variant="h6" className="flex flex-col justify-center">
+              Firevault | Delete Account and Clear Files
+            </Typography>
+          </a>
+          <div className="flex flex-row justify-center items-center h-full">
+            <Avatar src={photoURL as string} />
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

src/components/Secure/DeleteAndClear/DeleteAndClearPage.tsx

@@ -0,0 +1,61 @@
+import DeleteAndClearAppBar from '@/components/Secure/DeleteAndClear/DeleteAndClearAppBar';
+import Footer from '@/components/Home/Footer';
+import Button from '@material-ui/core/Button';
+import React from 'react';
+import fire from '../../../../utils/firebase';
+
+export default function DeleteAndClearPage() {
+  const deleteAccount = () => {
+    fire
+      .auth()
+      .currentUser?.getIdToken(false)
+      .then((idToken) => {
+        fetch(`${process.env.NEXT_PUBLIC_UPLOAD_BASE}/api/clearData`, {
+          method: `POST`,
+          headers: {
+            Authorization: idToken,
+          },
+        })
+          .then((res) => res.json())
+          .then((json) => {
+            fire
+              .auth()
+              .currentUser?.delete()
+              .then((r) => {
+                window.location.replace(`/`);
+              });
+          });
+      });
+  };
+  const goBack = () => {
+    window.location.replace(`/account`);
+  };
+  return (
+    <div>
+      <DeleteAndClearAppBar />
+      <div className="flex flex-col justify-center items-center pt-20">
+        <main className="flex flex-col justify-center flex-1 items-center p-5 dark:text-blue-50">
+          <p className="text-4xl">Delete Account Clear Data</p>
+          <p className="text-xl w-80 text-center m-10">
+            This will clear all of your files on Firevault and delete your user
+            account. This action cannot be undone.
+          </p>
+          <div className="w-80 flex flex-row justify-center items-center">
+            <Button
+              autoFocus
+              onClick={goBack}
+              variant="contained"
+              color="primary"
+            >
+              No
+            </Button>
+            <Button onClick={deleteAccount} className="m-3" variant="contained">
+              Delete Account and Clear Files
+            </Button>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    </div>
+  );
+}

src/pages/secure/wipe.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import Loading from '@/components/Home/Loading';
+import SecureLanding from '@/components/Secure/SecureLanding';
+import HomePage from '@/components/Home/Home';
+import PageHead from '@/components/PageHead';
+import UploadStick from '@/components/UploadStick';
+import DeleteAndClearPage from "@/components/Secure/DeleteAndClear/DeleteAndClearPage";
+import fire from '../../../utils/firebase';
+
+export default function Wipe() {
+  const [isSignedIn, setIsSignedIn] = useState(false);
+  const [signed, setSigned] = useState(false);
+  let one = false;
+
+  useEffect(() => {
+    const unregisterAuthObserver = fire.auth().onAuthStateChanged((user) => {
+      if (!one && fire.auth().currentUser) {
+        fire.auth().signOut();
+        one = true;
+      }
+      setIsSignedIn(!!user);
+      setSigned(true);
+    });
+    return () => unregisterAuthObserver();
+  }, []);
+
+  const returnElement = () => {
+    if (!isSignedIn && !signed) {
+      return <Loading />;
+    }
+    if (!isSignedIn) {
+      return <SecureLanding />;
+    }
+    return <DeleteAndClearPage />;
+  };
+
+  return (
+    <div className="h-full min-h-screen bg-white dark:bg-gray-800">
+      <PageHead />
+      {process.env.NEXT_PUBLIC_BASE_NAME === `HEROKU` ? (
+        <UploadStick />
+      ) : (
+        returnElement()
+      )}
+    </div>
+  );
+}