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.

Author: shubham-padia

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'>

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'
                         >