Merge pull request #966 from automatisch/delete-account-in-web

feat: show delete user functionality

packages/backend/src/graphql/mutations/delete-user.ee.ts

@@ -1,20 +1,11 @@
-import User from '../../models/user';
+import Context from '../../types/express/context';
 import deleteUserQueue from '../../queues/delete-user.ee';
 import { Duration } from 'luxon';
 
-type Params = {
-  input: {
-    id: string;
-  };
-};
+const deleteUser = async (_parent: unknown, params: never, context: Context) => {
+  const id = context.currentUser.id;
 
-const deleteUser = async (_parent: unknown, params: Params) => {
-  const { id } = params.input;
-  await User
-    .query()
-    .findById(id)
-    .delete()
-    .throwIfNotFound();
+  await context.currentUser.$query().delete();
 
   const jobName = `Delete user - ${id}`;
   const jobPayload = { id };

packages/backend/src/graphql/schema.graphql

@@ -54,7 +54,7 @@ type Mutation {
   updateStep(input: UpdateStepInput): Step
   deleteStep(input: DeleteStepInput): Step
   createUser(input: CreateUserInput): User
-  deleteUser(input: DeleteUserInput): Boolean
+  deleteUser: Boolean
   updateUser(input: UpdateUserInput): User
   forgotPassword(input: ForgotPasswordInput): Boolean
   resetPassword(input: ResetPasswordInput): Boolean
@@ -340,10 +340,6 @@ input CreateUserInput {
   password: String!
 }
 
-input DeleteUserInput {
-  id: String
-}
-
 input UpdateUserInput {
   email: String
   password: String

packages/web/src/components/DeleteAccountDialog/index.ee.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import * as URLS from 'config/urls';
+import apolloClient from 'graphql/client';
+import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
+import useAuthentication from 'hooks/useAuthentication';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useCurrentUser from 'hooks/useCurrentUser';
+
+type TDeleteAccountDialogProps = {
+  onClose: () => void;
+}
+
+export default function DeleteAccountDialog(props: TDeleteAccountDialogProps) {
+  const [deleteUser] = useMutation(DELETE_USER);
+  const formatMessage = useFormatMessage();
+  const currentUser = useCurrentUser();
+  const authentication = useAuthentication();
+  const navigate = useNavigate();
+
+  const handleConfirm = React.useCallback(async () => {
+    await deleteUser();
+
+    authentication.updateToken('');
+    await apolloClient.clearStore();
+
+    navigate(URLS.LOGIN);
+  }, [deleteUser, currentUser]);
+
+  return (
+    <Dialog open onClose={props.onClose}>
+      <DialogTitle >
+        {formatMessage('deleteAccountDialog.title')}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {formatMessage('deleteAccountDialog.description')}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onClose}>{formatMessage('deleteAccountDialog.cancel')}</Button>
+        <Button onClick={handleConfirm} color="error">
+          {formatMessage('deleteAccountDialog.confirm')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

packages/web/src/graphql/mutations/delete-user.ee.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_USER = gql`
+  mutation DeleteUser {
+    deleteUser
+  }
+`;

packages/web/src/locales/en.json

@@ -89,6 +89,17 @@
   "profileSettings.updatedEmail": "Your email has been updated.",
   "profileSettings.updatedPassword": "Your password has been updated.",
   "profileSettings.updatePassword": "Update password",
+  "profileSettings.deleteMyAccount": "Delete my account",
+  "profileSettings.deleteAccount": "Delete account",
+  "profileSettings.deleteAccountSubtitle": "This will permanently delete...",
+  "profileSettings.deleteAccountResult1": "Your account",
+  "profileSettings.deleteAccountResult2": "All your flows",
+  "profileSettings.deleteAccountResult3": "All your connections",
+  "profileSettings.deleteAccountResult4": "All execution history",
+  "deleteAccountDialog.title": "Delete account?",
+  "deleteAccountDialog.description": "This will permanently delete your account and all the associated data with it.",
+  "deleteAccountDialog.cancel": "Cancel?",
+  "deleteAccountDialog.confirm": "Yes, delete it",
   "notifications.title": "Notifications",
   "notification.releasedAt": "Released {relativeDate}",
   "webhookUrlInfo.title": "Your webhook URL",

packages/web/src/pages/ProfileSettings/index.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { useMutation } from '@apollo/client';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
@@ -11,6 +14,7 @@ import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
+import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
 import { UPDATE_USER } from 'graphql/mutations/update-user';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
@@ -38,6 +42,7 @@ const StyledForm = styled(Form)`
 `;
 
 function ProfileSettings() {
+  const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] = React.useState(false);
   const [passwordDefaultValues, setPasswordDefaultValues] = React.useState({});
   const { enqueueSnackbar } = useSnackbar();
   const currentUser = useCurrentUser();
@@ -179,6 +184,40 @@ function ProfileSettings() {
             )}
           />
         </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{pt: 5 }}>
+          <Alert variant="outlined" severity="error" sx={{ fontWeight: 500 }}>
+            <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('profileSettings.deleteMyAccount')}</AlertTitle>
+
+            <Typography variant="body1" gutterBottom>
+              {formatMessage('profileSettings.deleteAccountSubtitle')}
+            </Typography>
+
+            <ol>
+              <li>{formatMessage('profileSettings.deleteAccountResult1')}</li>
+              <li>{formatMessage('profileSettings.deleteAccountResult2')}</li>
+              <li>{formatMessage('profileSettings.deleteAccountResult3')}</li>
+              <li>{formatMessage('profileSettings.deleteAccountResult4')}</li>
+            </ol>
+
+            <Button
+              variant="contained"
+              type="submit"
+              color="error"
+              size="small"
+              sx={{ justifyContent: 'end' }}
+              onClick={() => setShowDeleteAccountConfirmation(true)}
+            >
+              {formatMessage('profileSettings.deleteAccount')}
+            </Button>
+
+            {showDeleteAccountConfirmation && (
+              <DeleteAccountDialog
+                onClose={() => setShowDeleteAccountConfirmation(false)}
+              />
+            )}
+          </Alert>
+        </Grid>
       </Grid>
     </Container>
   );