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 importMap(model: ImportMapInfo): Promise createMap(map: BasicMapInfo): Promise; deleteMaps(ids: number[]): Promise; 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 { + return Promise.resolve(); + } + updateAccountInfo(firstname: string, lastname: string): Promise { - throw new Error('Method not implemented.'); + return Promise.resolve(); } updateAccountPassword(pasword: string): Promise { 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 { + 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 { 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(false); const [model, setModel] = React.useState(defaultModel); const [error, setError] = React.useState(); const intl = useIntl(); - const mutation = useMutation((model: AccountInfoModel) => { + const mutationChangeName = useMutation((model: AccountInfoModel) => { return client.updateAccountInfo(model.firstname, model.lastname); }, { @@ -42,6 +44,20 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => { } ); + const mutationRemove = useMutation(() => { + 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): void => { event.preventDefault(); - mutation.mutate(model); + if (remove) { + mutationRemove.mutate(); + } else { + mutationChangeName.mutate(model); + } }; const handleOnChange = (event: React.ChangeEvent): 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 ( + submitButton={intl.formatMessage({ id: 'accountinfo.button', defaultMessage: 'Accept' })}> { + + + {remove && + + + + } + } + label="Delete Account" + /> + + ); }