account deletion

tdjsnelling · tdjsnelling · commit ef920ba9dde4 · 2023-02-21T13:59:02.000Z
diff --git a/api/src/controllers/user.js b/api/src/controllers/user.js
@@ -1003,3 +1003,36 @@ export const disableTotp = async (req, res) => {
     res.status(400).send('Request must include token')
   }
 }
+
+export const deleteAccount = async (req, res) => {
+  if (req.body.password) {
+    try {
+      const user = await User.findOne({ _id: req.userId }).lean()
+
+      if (!user) {
+        res.status(404).send('User does not exist')
+        return
+      }
+
+      if (user.username === 'admin') {
+        res.status(403).send('Primary admin account cannot be deleted')
+        return
+      }
+
+      const matches = await bcrypt.compare(req.body.password, user.password)
+
+      if (!matches) {
+        res.status(401).send('Incorrect password')
+        return
+      }
+
+      await User.deleteOne({ _id: req.userId })
+
+      res.sendStatus(200)
+    } catch (e) {
+      res.status(500).send(e.message)
+    }
+  } else {
+    res.status(400).send('Request must include password')
+  }
+}
diff --git a/api/src/routes/account.js b/api/src/routes/account.js
@@ -10,6 +10,7 @@ import {
   generateTotpSecret,
   enableTotp,
   disableTotp,
+  deleteAccount,
 } from '../controllers/user'
 
 const router = express.Router()
@@ -25,5 +26,6 @@ export default (mail) => {
   router.get('/totp/generate', generateTotpSecret)
   router.post('/totp/enable', enableTotp)
   router.post('/totp/disable', disableTotp)
+  router.post('/delete', deleteAccount)
   return router
 }
diff --git a/client/components/Button.js b/client/components/Button.js
@@ -9,7 +9,7 @@ const StyledButton = styled.button(
     css({
       appearance: 'none',
       bg: 'primary',
-      color: getLuminance(theme.colors.primary) >= 0.5 ? '#000' : '#fff',
+      color: getLuminance(theme.colors.primary) >= 0.5 ? '#202224' : '#f8f8f8',
       border: '2px solid',
       borderColor: 'primary',
       borderRadius: 1,
@@ -99,6 +99,35 @@ const StyledButton = styled.button(
                 : lighten(0.1, theme.colors.sidebar),
           },
         },
+        danger: {
+          bg: 'error',
+          color: '#f8f8f8',
+          borderColor: 'error',
+          '&:hover': {
+            borderColor:
+              theme.name === 'light'
+                ? darken(0.1, theme.colors.error)
+                : lighten(0.1, theme.colors.error),
+          },
+          '&:focus, &:active': {
+            bg:
+              theme.name === 'light'
+                ? darken(0.1, theme.colors.error)
+                : lighten(0.1, theme.colors.error),
+            borderColor:
+              theme.name === 'light'
+                ? darken(0.1, theme.colors.error)
+                : lighten(0.1, theme.colors.error),
+          },
+          '&[disabled]': {
+            '&:hover': {
+              borderColor: 'sidebar',
+            },
+            '&:focus, &:active': {
+              bg: 'sidebar',
+            },
+          },
+        },
       },
     }),
   layout,
diff --git a/client/components/Comment.js b/client/components/Comment.js
@@ -100,7 +100,12 @@ const Comment = ({ comment }) => {
             )}
           </Text>
         ) : (
-          <Text>Comment by deleted user</Text>
+          <Text>
+            Comment by{' '}
+            <Text as="span" color="grey">
+              deleted user
+            </Text>
+          </Text>
         )}
         <Text color="grey" textAlign="right">
           Posted {moment(comment.created).format('HH:mm Do MMM YYYY')}
diff --git a/client/pages/account.js b/client/pages/account.js
@@ -1,9 +1,12 @@
 import React, { useState, useContext } from 'react'
 import getConfig from 'next/config'
+import { useRouter } from 'next/router'
 import moment from 'moment'
 import copy from 'copy-to-clipboard'
 import jwt from 'jsonwebtoken'
 import pluralize from 'pluralize'
+import { ThemeContext } from 'styled-components'
+import { transparentize } from 'polished'
 import { Copy } from '@styled-icons/boxicons-regular/Copy'
 import { Check } from '@styled-icons/boxicons-regular/Check'
 import { X } from '@styled-icons/boxicons-regular/X'
@@ -74,10 +77,13 @@ const Account = ({ token, invites = [], user, userRole }) => {
   const [totpEnabled, setTotpEnabled] = useState(user.totp.enabled)
   const [totpQrData, setTotpQrData] = useState()
   const [totpBackupCodes, setTotpBackupCodes] = useState()
+  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false)
 
   const { addNotification } = useContext(NotificationContext)
   const { setLoading } = useContext(LoadingContext)
 
+  const theme = useContext(ThemeContext)
+
   const {
     publicRuntimeConfig: {
       SQ_API_URL,
@@ -88,6 +94,8 @@ const Account = ({ token, invites = [], user, userRole }) => {
     },
   } = getConfig()
 
+  const router = useRouter()
+
   const handleGenerateInvite = async (e) => {
     e.preventDefault()
     setLoading(true)
@@ -283,6 +291,34 @@ const Account = ({ token, invites = [], user, userRole }) => {
     }
   }
 
+  const handleDeleteAccount = async (e) => {
+    e.preventDefault()
+    const form = new FormData(e.target)
+
+    try {
+      const deleteAccountRes = await fetch(`${SQ_API_URL}/account/delete`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          password: form.get('password'),
+        }),
+      })
+
+      if (deleteAccountRes.status !== 200) {
+        const reason = await deleteAccountRes.text()
+        throw new Error(reason)
+      }
+
+      await router.push('/logout')
+    } catch (e) {
+      addNotification('error', `Could not delete account: ${e.message}`)
+      console.error(e)
+    }
+  }
+
   return (
     <>
       <SEO title="My account" />
@@ -527,27 +563,46 @@ const Account = ({ token, invites = [], user, userRole }) => {
           )}
         </form>
       </Box>
-      <Text as="h2" mb={4}>
-        Change password
-      </Text>
-      <form onSubmit={handleChangePassword}>
-        <Input
-          name="password"
-          type="password"
-          label="Current password"
-          mb={4}
-          required
-        />
-        <Input
-          name="newPassword"
-          type="password"
-          label="New password"
-          autoComplete="new-password"
-          mb={4}
-          required
-        />
-        <Button>Change password</Button>
-      </form>
+      <Box mb={5}>
+        <Text as="h2" mb={4}>
+          Change password
+        </Text>
+        <form onSubmit={handleChangePassword}>
+          <Input
+            name="password"
+            type="password"
+            label="Current password"
+            mb={4}
+            required
+          />
+          <Input
+            name="newPassword"
+            type="password"
+            label="New password"
+            autoComplete="new-password"
+            mb={4}
+            required
+          />
+          <Button>Change password</Button>
+        </form>
+      </Box>
+      {user.username !== 'admin' && (
+        <Box
+          bg={transparentize(0.7, theme.colors.error)}
+          borderRadius={1}
+          p={4}
+        >
+          <Text as="h2" mb={4}>
+            Danger zone
+          </Text>
+          <Button
+            variant="danger"
+            onClick={() => setShowDeleteAccountModal(true)}
+          >
+            Delete my account
+          </Button>
+        </Box>
+      )}
       {showInviteModal && (
         <Modal close={() => setShowInviteModal(false)}>
           <Text mb={5}>
@@ -566,6 +621,7 @@ const Account = ({ token, invites = [], user, userRole }) => {
             <Box display="flex" justifyContent="flex-end">
               <Button
                 onClick={() => setShowInviteModal(false)}
+                type="button"
                 variant="secondary"
                 mr={3}
               >
@@ -576,6 +632,35 @@ const Account = ({ token, invites = [], user, userRole }) => {
           </form>
         </Modal>
       )}
+      {showDeleteAccountModal && (
+        <Modal close={() => setShowDeleteAccountModal(false)}>
+          <Text mb={5}>
+            Are you sure you want to delete your account? This action cannot be
+            undone, and you may not be able to register again. Your personal
+            information will be deleted but your uploaded torrents will remain.
+          </Text>
+          <form onSubmit={handleDeleteAccount}>
+            <Input
+              name="password"
+              type="password"
+              label="Password"
+              mb={4}
+              required
+            />
+            <Box display="flex" justifyContent="flex-end">
+              <Button
+                onClick={() => setShowDeleteAccountModal(false)}
+                type="button"
+                variant="secondary"
+                mr={3}
+              >
+                Cancel
+              </Button>
+              <Button variant="danger">Yes, delete my account</Button>
+            </Box>
+          </form>
+        </Modal>
+      )}
     </>
   )
 }
diff --git a/client/pages/requests/[index].js b/client/pages/requests/[index].js
@@ -207,7 +207,7 @@ const Request = ({ request, token, user }) => {
         <Box display="flex" alignItems="center">
           <Text as="h1">{request.title}</Text>
         </Box>
-        {user === request.createdBy._id && (
+        {user === request.createdBy?._id && (
           <Button onClick={handleDelete} variant="secondary">
             Delete
           </Button>
