fix: Add email confirmation field when deleting users with no password.

We are only checking the email match on the frontend, because if user is directly using the API, we can assume they know their stuff enough not to accidentally delete their account. Social auth users with password will also get the email confirmation screen.
Flagsmith · Apr 17, 2024 · d1fe382 · d1fe382
1 parent 03f1ff8
commit d1fe382
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 23 deletions.
diff --git a/frontend/web/components/modals/ConfirmDeleteAccount.tsx b/frontend/web/components/modals/ConfirmDeleteAccount.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import Button from 'components/base/forms/Button'
 import Utils from 'common/utils/utils'
-import { Organisation } from 'common/types/responses'
+import { AuthType, Organisation } from 'common/types/responses'
 import { useDeleteAccountMutation } from 'common/services/useAccount'
 import InputGroup from 'components/base/forms/InputGroup'
 import ModalHR from './ModalHR'
@@ -10,13 +10,35 @@ import ErrorMessage from 'components/ErrorMessage'
 
 type ConfirmDeleteAccountType = {
   lastUserOrganisations: Organisation[]
+  email?: string
+  auth_type?: AuthType
+}
+
+const ERROR_MESSAGES = {
+  default: 'Error deleting your account.',
+  mismatchEmail:
+    'Error deleting your account, please ensure you have entered your current email.',
+  mismatchPassword:
+    'Error deleting your account, please ensure you have entered your current password.',
 }
 const ConfirmDeleteAccount: FC<ConfirmDeleteAccountType> = ({
+  auth_type,
+  email,
   lastUserOrganisations,
 }) => {
   const [password, setPassword] = useState<string>('')
-  const [deleteUserAccount, { isError, isSuccess: updateSuccess }] =
-    useDeleteAccountMutation()
+  const [currentEmail, setCurrentEmail] = useState<string>('')
+  const [errorMessage, setErrorMessage] = useState<string>(
+    ERROR_MESSAGES.default,
+  )
+  const [isEmailMismatchError, setIsEmailMismatchError] =
+    useState<boolean>(false)
+  const [
+    deleteUserAccount,
+    { isError: isMutationError, isSuccess: updateSuccess },
+  ] = useDeleteAccountMutation()
+  const skipPasswordConfirmation =
+    auth_type === 'GOOGLE' || auth_type === 'GITHUB'
 
   useEffect(() => {
     if (updateSuccess) {
@@ -54,6 +76,20 @@ const ConfirmDeleteAccount: FC<ConfirmDeleteAccountType> = ({
       <form
         onSubmit={(e) => {
           Utils.preventDefault(e)
+
+          if (skipPasswordConfirmation) {
+            if (currentEmail !== email) {
+              setIsEmailMismatchError(true)
+              setErrorMessage(ERROR_MESSAGES.mismatchEmail)
+              return
+            } else {
+              setIsEmailMismatchError(false)
+              setErrorMessage(ERROR_MESSAGES.default)
+            }
+          } else {
+            setErrorMessage(ERROR_MESSAGES.mismatchPassword)
+          }
+
           deleteUserAccount({
             current_password: password,
             delete_orphan_organisations: true,
@@ -64,26 +100,40 @@ const ConfirmDeleteAccount: FC<ConfirmDeleteAccountType> = ({
           <FormGroup>
             <ModalBody lastUserOrganisations={lastUserOrganisations} />
           </FormGroup>
-          <InputGroup
-            title='Confirm Password'
-            className='mb-0'
-            inputProps={{
-              className: 'full-width',
-              name: 'currentPassword',
-            }}
-            value={password}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setPassword(Utils.safeParseEventValue(event))
-            }}
-            type='password'
-            name='password'
-          />
-          {isError && (
-            <ErrorMessage
-              error='Error deleting your account, please ensure you have entered your
-              current password.'
+          {skipPasswordConfirmation ? (
+            <InputGroup
+              title='Confirm Email'
+              className='mb-0'
+              inputProps={{
+                className: 'full-width',
+                name: 'currentEmail',
+              }}
+              value={currentEmail}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                setCurrentEmail(Utils.safeParseEventValue(event))
+              }}
+              type='email'
+              name='currentEmail'
+            />
+          ) : (
+            <InputGroup
+              title='Confirm Password'
+              className='mb-0'
+              inputProps={{
+                className: 'full-width',
+                name: 'currentPassword',
+              }}
+              value={password}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                setPassword(Utils.safeParseEventValue(event))
+              }}
+              type='password'
+              name='password'
             />
           )}
+          {(isMutationError || isEmailMismatchError) && (
+            <ErrorMessage error={errorMessage} />
+          )}
         </div>
         <ModalHR />
         <div className='modal-footer'>

diff --git a/frontend/web/components/pages/AccountSettingsPage.js b/frontend/web/components/pages/AccountSettingsPage.js
@@ -56,12 +56,14 @@ class TheComponent extends Component {
     })
   }
 
-  confirmDeleteAccount = (lastUserOrganisations, id) => {
+  confirmDeleteAccount = (lastUserOrganisations, id, email, auth_type) => {
     openModal(
       'Are you sure?',
       <ConfirmDeleteAccount
         userId={id}
         lastUserOrganisations={lastUserOrganisations}
+        email={email}
+        auth_type={auth_type}
       />,
       'p-0',
     )
@@ -126,6 +128,7 @@ class TheComponent extends Component {
   render() {
     const {
       state: {
+        auth_type,
         current_password,
         email,
         error,
@@ -305,7 +308,12 @@ class TheComponent extends Component {
                           id='delete-user-btn'
                           data-test='delete-user-btn'
                           onClick={() =>
-                            this.confirmDeleteAccount(lastUserOrganisations, id)
+                            this.confirmDeleteAccount(
+                              lastUserOrganisations,
+                              id,
+                              email,
+                              auth_type,
+                            )
                           }
                           className='btn-with-icon btn-remove'
                         >