Complete account change

2024-11-22 06:37:56 +01:00 · 2021-02-15 15:42:10 -08:00 · 2021-02-15 15:42:10 -08:00 · d9add8605c
commit d9add8605c
parent 3a10dce222
7 changed files with 245 additions and 112 deletions
--- a/packages/webapp/src/classes/client/index.ts
+++ b/packages/webapp/src/classes/client/index.ts
@ -58,8 +58,8 @@ export type ErrorInfo = {
 }

 export type AccountInfo = {
-    firstName: string;
-    lastName: string;
+    firstname: string;
+    lastname: string;
    email: string;
    locale: Locale;
 }
@ -75,6 +75,7 @@ interface Client {
   
    updateAccountLanguage(locale: LocaleCode): Promise<void>;
    updateAccountPassword(pasword: string): Promise<void>;
+    updateAccountInfo(firstname: string,lastname: string): Promise<void>;

    updateStarred(id: number, starred: boolean): Promise<void>;
    updateMapToPublic(id: number, starred: boolean): Promise<void>;
--- a/packages/webapp/src/classes/client/mock-client/index.ts
+++ b/packages/webapp/src/classes/client/mock-client/index.ts
@ -34,6 +34,9 @@ class MockClient implements Client {
        ];

    }
+    updateAccountInfo(firstname: string, lastname: string): Promise<void> {
+        throw new Error('Method not implemented.');
+    }

    updateAccountPassword(pasword: string): Promise<void> {
        return Promise.resolve();
@ -52,8 +55,8 @@ class MockClient implements Client {
        console.log('Fetch account info ...')
        const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode;
        return Promise.resolve({
-            firstName: 'Costme',
-            lastName: 'Fulanito',
+            firstname: 'Costme',
+            lastname: 'Fulanito',
            email: 'test@example.com',
            locale: localeFromStr(locale)
        });
--- a/packages/webapp/src/classes/client/rest-client/index.ts
+++ b/packages/webapp/src/classes/client/rest-client/index.ts
@ -11,6 +11,27 @@ export default class RestClient implements Client {
        this.sessionExpired = sessionExpired;
    }

+    updateAccountInfo(firstname: string, lastname: string): Promise<void> {
+        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+            axios.put(`${this.baseUrl}/c/restful/account/firstname`,
+                firstname,
+                { headers: { 'Content-Type': 'text/plain' } }
+            ).then(() => {
+                return axios.put(`${this.baseUrl}/c/restful/account/lastname`,
+                    lastname,
+                    { headers: { 'Content-Type': 'text/plain' } }
+                )
+            }).then(() => {
+                // All was ok, let's sent to success page ...;
+                success();
+            }).catch(error => {
+                const errorInfo = this.parseResponseOnError(error.response);
+                reject(errorInfo);
+            });
+        }
+        return new Promise(handler);
+    }
+
    updateAccountPassword(pasword: string): Promise<void> {
        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
            axios.put(`${this.baseUrl}/c/restful/account/password`,
@ -23,7 +44,8 @@ export default class RestClient implements Client {
                reject(errorInfo);
            });
        }
-        return new Promise(handler);    }
+        return new Promise(handler);
+    }

    updateAccountLanguage(locale: LocaleCode): Promise<void> {
        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
@ -68,8 +90,8 @@ export default class RestClient implements Client {
                const account = response.data;
                const locale: LocaleCode | null = account.locale;
                success({
-                    lastName: account.lastName ? account.lastName : '',
-                    firstName: account.fistName ? account.fistName : '',
+                    lastname: account.lastname ? account.lastname : '',
+                    firstname: account.firstname ? account.firstname : '',
                    email: account.email,
                    locale: locale ? localeFromStr(locale) : Locales.EN
                });
--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/packages/webapp/src/components/form/input/index.tsx
@ -1,6 +1,5 @@
 import { TextField } from "@material-ui/core";
 import React, { ChangeEvent } from "react";
-import { MessageDescriptor, useIntl } from "react-intl";
 import { ErrorInfo } from "../../../classes/client";

 type InputProps = {
@ -13,24 +12,29 @@ type InputProps = {
    value?: string
    autoComplete?: string;
    fullWidth?: boolean
+    disabled?: boolean
 }

-const Input = (props: InputProps) => {
+const Input = ({
+    name,
+    error,
+    onChange,
+    required = true,
+    type,
+    value,
+    label,
+    autoComplete,
+    fullWidth = true,
+    disabled = false
+
+}: InputProps) => {

-    const intl = useIntl();
-    const error: ErrorInfo | undefined = props?.error;
-    const name = props.name;
-    const value = props.value;
-    const onChange = props.onChange ? props.onChange : () => { };
    const fieldError = error?.fields?.[name];
-    const required = props.required != undefined ? props.required : true;
-    const fullWidth = props.fullWidth != undefined ? props.required : true;
-
    return (
-        <TextField name={name} type={props.type} label={props.label}
+        <TextField name={name} type={type} label={label}
            value={value} onChange={onChange}
            error={Boolean(fieldError)} helperText={fieldError}
-            variant="outlined" required={required} fullWidth={fullWidth} margin="dense"/>
+            variant="outlined" required={required} fullWidth={fullWidth} margin="dense" disabled={disabled} autoComplete={autoComplete} />

    );
 }
--- 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
@ -0,0 +1,94 @@
+import { FormControl } from "@material-ui/core";
+import React, { useEffect } from "react";
+import { 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";
+
+
+type AccountInfoDialogProps = {
+    onClose: () => void
+}
+
+type AccountInfoModel = {
+    email: string,
+    firstname: string,
+    lastname: string
+}
+
+const defaultModel: AccountInfoModel = { firstname: '', lastname: '', email: '' };
+const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
+    const client: Client = useSelector(activeInstance);
+    const queryClient = useQueryClient();
+
+    const [model, setModel] = React.useState<AccountInfoModel>(defaultModel);
+    const [error, setError] = React.useState<ErrorInfo>();
+    const intl = useIntl();
+
+    const mutation = useMutation<void, ErrorInfo, AccountInfoModel>((model: AccountInfoModel) => {
+        return client.updateAccountInfo(model.firstname, model.lastname);
+    },
+        {
+            onSuccess: () => {
+                queryClient.invalidateQueries('account')
+                onClose()
+            },
+            onError: (error) => {
+                setError(error);
+            }
+        }
+    );
+
+    const account = fetchAccount();
+    useEffect(() => {
+        if (account) {
+            setModel({
+                email: account?.email,
+                lastname: account?.lastname,
+                firstname: account?.firstname
+            });
+        }
+    }, [account?.email])
+
+
+    const handleOnClose = (): void => {
+        onClose();
+        setModel(defaultModel);
+        setError(undefined);
+    };
+
+    const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+        event.preventDefault();
+        mutation.mutate(model);
+    };
+
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        event.preventDefault();
+
+        const name = event.target.name;
+        const value = event.target.value;
+        setModel({ ...model, [name as keyof AccountInfoModel]: value });
+    }
+    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' })}>
+
+            <FormControl fullWidth={true}>
+                <Input name="email" type="text" disabled={true} label={intl.formatMessage({ id: "accountinfo.email", defaultMessage: "Email" })}
+                    value={model.email} onChange={handleOnChange} error={error} fullWidth={true} />
+
+                <Input name="firstname" type="text" label={intl.formatMessage({ id: "accountinfo.firstname", defaultMessage: "First Name" })}
+                    value={model.firstname} onChange={handleOnChange} required={true} fullWidth={true} />
+
+                <Input name="lastname" type="text" label={intl.formatMessage({ id: "accountinfo.lastname", defaultMessage: "Last Name" })}
+                    value={model.lastname} onChange={handleOnChange} required={true} fullWidth={true} />
+            </FormControl>
+        </BaseDialog>
+    );
+}
+export default AccountInfoDialog;
+
--- a/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
@ -0,0 +1,84 @@
+import { FormControl } from "@material-ui/core";
+import React from "react";
+import { useIntl } from "react-intl";
+import { useMutation } 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 } from "../../../../redux/clientSlice";
+
+
+type ChangePasswordDialogProps = {
+    onClose: () => void
+}
+
+type ChangePasswordModel = {
+    password: string,
+    retryPassword: string
+}
+
+const defaultModel: ChangePasswordModel = { password: '', retryPassword: '' };
+const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps) => {
+    const client: Client = useSelector(activeInstance);
+    const [model, setModel] = React.useState<ChangePasswordModel>(defaultModel);
+    const [error, setError] = React.useState<ErrorInfo>();
+    const intl = useIntl();
+
+    const mutation = useMutation<void, ErrorInfo, ChangePasswordModel>((model: ChangePasswordModel) => {
+        return client.updateAccountPassword(model.password);
+    },
+        {
+            onSuccess: () => {
+                onClose()
+            },
+            onError: (error) => {
+                setError(error);
+            }
+        }
+    );
+
+    const handleOnClose = (): void => {
+        onClose();
+        setModel(defaultModel);
+        setError(undefined);
+    };
+
+    const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+        event.preventDefault();
+
+        // Check password are equal ...
+        if (model.password != model.retryPassword) {
+            setError({ msg: intl.formatMessage({ id: 'changepwd.password-match', defaultMessage: 'Password do not match. Please, try again.' }) });
+            return;
+        }
+
+        mutation.mutate(model);
+    };
+
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        event.preventDefault();
+
+        const name = event.target.name;
+        const value = event.target.value;
+        setModel({ ...model, [name as keyof ChangePasswordModel]: value });
+    }
+
+    return (
+        <BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+            title={intl.formatMessage({ id: 'changepwd.title', defaultMessage: 'Change Password' })}
+            description={intl.formatMessage({ id: 'changepwd.description', defaultMessage: 'Please, provide the new password for your account.' })}
+            submitButton={intl.formatMessage({ id: 'changepwd.button', defaultMessage: 'Change' })}>
+
+            <FormControl fullWidth={true}>
+                <Input name="password" type="password" label={intl.formatMessage({ id: "changepwd.password", defaultMessage: "Password" })}
+                    value={model.password} onChange={handleOnChange} error={error} fullWidth={true} autoComplete="new-password" />
+
+                <Input name="retryPassword" type="password" label={intl.formatMessage({ id: "changepwd.confirm-password", defaultMessage: "Confirm Password" })}
+                    value={model.retryPassword} onChange={handleOnChange} required={true} fullWidth={true} autoComplete="new-password" />
+            </FormControl>
+        </BaseDialog>
+    );
+}
+export default ChangePasswordDialog;
+
--- a/packages/webapp/src/components/maps-page/account-menu/index.tsx
+++ b/packages/webapp/src/components/maps-page/account-menu/index.tsx
@ -1,19 +1,16 @@
-import { FormControl, IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
+import { IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import { AccountCircle, ExitToAppOutlined, LockOpenOutlined, SettingsApplicationsOutlined } from '@material-ui/icons';
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useMutation } from "react-query";
-import Client, { ErrorInfo } from "../../../classes/client";
-import { useSelector } from 'react-redux';
-import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
-import BaseDialog from '../action-dispatcher/base-dialog';
-import Input from '../../form/input';
-
+import { FormattedMessage } from "react-intl";
+import { fetchAccount } from '../../../redux/clientSlice';
+import AccountInfoDialog from './account-info-dialog';
+import ChangePasswordDialog from './change-password-dialog';

+type ActionType = 'change-password' | 'account-info' | undefined;
 const AccountMenu = () => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
-    const [openRenameDialog, setOpenRenameDialog] = React.useState<boolean>(false);
+    const [action, setAction] = React.useState<ActionType>(undefined);


    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
@ -27,7 +24,7 @@ const AccountMenu = () => {
    const account = fetchAccount();
    return (
        <span>
-            <Tooltip title={`${account?.firstName} ${account?.lastName} <${account?.email}>`}>
+            <Tooltip title={`${account?.firstname} ${account?.lastname} <${account?.email}>`}>
                <IconButton
                    onClick={handleMenu}>
                    <AccountCircle fontSize="large" style={{ color: 'black' }} />
@ -48,18 +45,18 @@ const AccountMenu = () => {
                    horizontal: 'right',
                }}
            >
-                <MenuItem onClick={handleClose}>
+                <MenuItem onClick={() => { handleClose(), setAction('account-info') }}>
                    <ListItemIcon>
                        <SettingsApplicationsOutlined fontSize="small" />
                    </ListItemIcon>
                    <FormattedMessage id="menu.account" defaultMessage="Account" />
                </MenuItem>

-                <MenuItem onClick={() => { handleClose(), setOpenRenameDialog(true) }}>
+                <MenuItem onClick={() => { handleClose(), setAction('change-password') }}>
                    <ListItemIcon>
                        <LockOpenOutlined fontSize="small" />
                    </ListItemIcon>
-                    <FormattedMessage id="menu.change-password" defaultMessage="Change Password" />
+                    <FormattedMessage id="menu.change-password" defaultMessage="Change password" />
                </MenuItem>

                <MenuItem onClick={handleClose}>
@ -71,87 +68,15 @@ const AccountMenu = () => {
                    </Link>
                </MenuItem>
            </Menu>
-            {openRenameDialog &&
-                <ChangePasswordDialog onClose={() => setOpenRenameDialog(false)} />
+            {action == 'change-password' &&
+                <ChangePasswordDialog onClose={() => setAction(undefined)} />
+            }
+            {action == 'account-info' &&
+                <AccountInfoDialog onClose={() => setAction(undefined)} />
            }
        </span>);
 }


-type ChangePasswordDialogProps = {
-    onClose: () => void
-}
-
-type ChangePasswordModel = {
-    password: string,
-    retryPassword: string
-}
-
-const defaultModel: ChangePasswordModel = { password: '', retryPassword: '' };
-const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps) => {
-    const client: Client = useSelector(activeInstance);
-    const [model, setModel] = React.useState<ChangePasswordModel>(defaultModel);
-    const [error, setError] = React.useState<ErrorInfo>();
-    const intl = useIntl();
-
-    const mutation = useMutation<void, ErrorInfo, ChangePasswordModel>((model: ChangePasswordModel) => {
-        return client.updateAccountPassword(model.password);
-    },
-        {
-            onSuccess: () => {
-                onClose()
-            },
-            onError: (error) => {
-                setError(error);
-            }
-        }
-    );
-
-    const handleOnClose = (): void => {
-        onClose();
-        setModel(defaultModel);
-        setError(undefined);
-    };
-
-    const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-        event.preventDefault();
-
-        // Check password are equal ...
-        if (model.password != model.retryPassword) {
-            setError({ msg: intl.formatMessage({ id: 'changepwd.password-match', defaultMessage: 'Password do not match. Please, try again.' }) });
-            return;
-        }
-
-        mutation.mutate(model);
-    };
-
-    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        event.preventDefault();
-
-        const name = event.target.name;
-        const value = event.target.value;
-        setModel({ ...model, [name as keyof ChangePasswordModel]: value });
-    }
-
-    return (
-        <div>
-            <BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
-                title={intl.formatMessage({ id: 'changepwd.title', defaultMessage: 'Change Password' })}
-                description={intl.formatMessage({ id: 'changepwd.description', defaultMessage: 'Please, provide the new password for your account.' })}
-                submitButton={intl.formatMessage({ id: 'changepwd.button', defaultMessage: 'Change' })}>
-
-                <FormControl fullWidth={true}>
-                    <Input name="password" type="password" label={intl.formatMessage({ id: "changepwd.password", defaultMessage: "Password" })}
-                        value={model.password} onChange={handleOnChange} error={error} fullWidth={true} autoComplete="new-password" />
-
-                    <Input name="retryPassword" type="password" label={intl.formatMessage({ id: "changepwd.confirm-password", defaultMessage: "Confirm Password" })}
-                        value={model.retryPassword} onChange={handleOnChange} required={true} fullWidth={true} autoComplete="new-password" />
-                </FormControl>
-            </BaseDialog>
-        </div>
-    );
-}
-
-

 export default AccountMenu;