From 02fae8e18dab5aeddceae18daed9b9a1c65b02a2 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Mon, 15 Feb 2021 17:15:54 -0800
Subject: [PATCH] Delete account support

---
 packages/webapp/src/classes/client/index.ts   |  1 +
 .../src/classes/client/mock-client/index.ts   |  7 ++-
 .../src/classes/client/rest-client/index.ts   | 13 +++++
 .../account-info-dialog/index.tsx             | 48 +++++++++++++++++--
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/classes/client/index.ts b/packages/webapp/src/classes/client/index.ts
index bd82380d..580ec5f1 100644
--- a/packages/webapp/src/classes/client/index.ts
+++ b/packages/webapp/src/classes/client/index.ts
@@ -65,6 +65,7 @@ export type AccountInfo = {
 }
 
 interface Client {
+    deleteAccount(): Promise<void>
     importMap(model: ImportMapInfo): Promise<number>
     createMap(map: BasicMapInfo): Promise<number>;
     deleteMaps(ids: number[]): Promise<void>;
diff --git a/packages/webapp/src/classes/client/mock-client/index.ts b/packages/webapp/src/classes/client/mock-client/index.ts
index 45b624f4..9363d190 100644
--- a/packages/webapp/src/classes/client/mock-client/index.ts
+++ b/packages/webapp/src/classes/client/mock-client/index.ts
@@ -34,8 +34,13 @@ class MockClient implements Client {
         ];
 
     }
+
+    deleteAccount(): Promise<void> {
+         return Promise.resolve();
+    }
+
     updateAccountInfo(firstname: string, lastname: string): Promise<void> {
-        throw new Error('Method not implemented.');
+         return Promise.resolve();
     }
 
     updateAccountPassword(pasword: string): Promise<void> {
diff --git a/packages/webapp/src/classes/client/rest-client/index.ts b/packages/webapp/src/classes/client/rest-client/index.ts
index 85f70663..02a7096d 100644
--- a/packages/webapp/src/classes/client/rest-client/index.ts
+++ b/packages/webapp/src/classes/client/rest-client/index.ts
@@ -10,6 +10,19 @@ export default class RestClient implements Client {
         this.baseUrl = baseUrl;
         this.sessionExpired = sessionExpired;
     }
+    deleteAccount(): Promise<void> {
+        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+            axios.delete(this.baseUrl + `/c/restful/account`,
+                { headers: { 'Content-Type': 'text/plain' } }
+            ).then(() => {
+                success();
+            }).catch(error => {
+                const errorInfo = this.parseResponseOnError(error.response);
+                reject(errorInfo);
+            });
+        }
+        return new Promise(handler);
+    }
 
     updateAccountInfo(firstname: string, lastname: string): Promise<void> {
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
diff --git a/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx b/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
index 307eef70..ba680167 100644
--- a/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
@@ -1,12 +1,13 @@
-import { FormControl } from "@material-ui/core";
+import { FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Switch } from "@material-ui/core";
 import React, { useEffect } from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import Client, { ErrorInfo } from "../../../../classes/client";
 import Input from "../../../form/input";
 import BaseDialog from "../../action-dispatcher/base-dialog";
 import { useSelector } from 'react-redux';
 import { activeInstance, fetchAccount } from "../../../../redux/clientSlice";
+import { Alert } from "@material-ui/lab";
 
 
 type AccountInfoDialogProps = {
@@ -23,12 +24,13 @@ const defaultModel: AccountInfoModel = { firstname: '', lastname: '', email: ''
 const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
     const client: Client = useSelector(activeInstance);
     const queryClient = useQueryClient();
+    const [remove, setRemove] = React.useState<boolean>(false);
 
     const [model, setModel] = React.useState<AccountInfoModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();
     const intl = useIntl();
 
-    const mutation = useMutation<void, ErrorInfo, AccountInfoModel>((model: AccountInfoModel) => {
+    const mutationChangeName = useMutation<void, ErrorInfo, AccountInfoModel>((model: AccountInfoModel) => {
         return client.updateAccountInfo(model.firstname, model.lastname);
     },
         {
@@ -42,6 +44,20 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
         }
     );
 
+    const mutationRemove = useMutation<void, ErrorInfo, void>(() => {
+        return client.deleteAccount();
+    },
+        {
+            onSuccess: () => {
+                window.location.href = '/c/logout'
+                onClose()
+            },
+            onError: (error) => {
+                setError(error);
+            }
+        }
+    );
+
     const account = fetchAccount();
     useEffect(() => {
         if (account) {
@@ -62,7 +78,11 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
 
     const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
         event.preventDefault();
-        mutation.mutate(model);
+        if (remove) {
+            mutationRemove.mutate();
+        } else {
+            mutationChangeName.mutate(model);
+        }
     };
 
     const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -72,10 +92,15 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
         const value = event.target.value;
         setModel({ ...model, [name as keyof AccountInfoModel]: value });
     }
+
+    const handleOnRemoveChange = (event) => {
+        setRemove(event.target.checked);
+    };
+
     return (
         <BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
             title={intl.formatMessage({ id: 'accountinfo.title', defaultMessage: 'Account info' })}
-            submitButton={intl.formatMessage({ id: 'accountinfo.button', defaultMessage: 'Save' })}>
+            submitButton={intl.formatMessage({ id: 'accountinfo.button', defaultMessage: 'Accept' })}>
 
             <FormControl fullWidth={true}>
                 <Input name="email" type="text" disabled={true} label={intl.formatMessage({ id: "accountinfo.email", defaultMessage: "Email" })}
@@ -86,7 +111,20 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
 
                 <Input name="lastname" type="text" label={intl.formatMessage({ id: "accountinfo.lastname", defaultMessage: "Last Name" })}
                     value={model.lastname} onChange={handleOnChange} required={true} fullWidth={true} />
+
+                <FormGroup>
+                    {remove &&
+                        <Alert severity="error">
+                            <FormattedMessage id="account.delete-warning" defaultMessage=" Keep in mind that you will not be able retrieve any mindmap you have added.If you would still like your account deleted." />
+                        </Alert>
+                    }
+                    <FormControlLabel
+                        control={<Switch checked={remove} onChange={(handleOnRemoveChange)} name="remove" color="primary" />}
+                        label="Delete Account"
+                    />
+                </FormGroup>
             </FormControl>
+
         </BaseDialog>
     );
 }