Complete change password.

packages/webapp/src/classes/client/index.ts

@@ -13,8 +13,8 @@ export type ImportMapInfo = {
     description?: string;
     contentType?: string;
     content?: ArrayBuffer | null | string;
-
 }
+
 export type Label = {
     id: number;
     title: string;
@@ -72,7 +72,9 @@ interface Client {
     renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
     fetchAllMaps(): Promise<MapInfo[]>;
     duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number>;
+   
     updateAccountLanguage(locale: LocaleCode): Promise<void>;
+    updateAccountPassword(pasword: string): Promise<void>;
 
     updateStarred(id: number, starred: boolean): Promise<void>;
     updateMapToPublic(id: number, starred: boolean): Promise<void>;

packages/webapp/src/classes/client/mock-client/index.ts

@@ -35,6 +35,10 @@ class MockClient implements Client {
 
     }
 
+    updateAccountPassword(pasword: string): Promise<void> {
+        return Promise.resolve();
+    }
+
     updateAccountLanguage(locale: LocaleCode): Promise<void> {
         localStorage.setItem('locale', locale);
         return Promise.resolve();

packages/webapp/src/classes/client/rest-client/index.ts

@@ -11,6 +11,20 @@ export default class RestClient implements Client {
         this.sessionExpired = sessionExpired;
     }
     
+    updateAccountPassword(pasword: string): Promise<void> {
+        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+            axios.put(`${this.baseUrl}/c/restful/account/password`,
+            pasword,
+                { headers: { 'Content-Type': 'text/plain' } }
+            ).then(() => {
+                success();
+            }).catch(error => {
+                const errorInfo = this.parseResponseOnError(error.response);
+                reject(errorInfo);
+            });
+        }
+        return new Promise(handler);    }
+
     updateAccountLanguage(locale: LocaleCode): Promise<void> {
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
             axios.put(`${this.baseUrl}/c/restful/account/locale`,

packages/webapp/src/components/maps-page/account-menu/index.tsx

@@ -1,18 +1,20 @@
-import { IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
+import { FormControl, IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
-import { AccountCircle, ExitToAppOutlined, SettingsApplicationsOutlined } from '@material-ui/icons';
+import { AccountCircle, ExitToAppOutlined, LockOpenOutlined, SettingsApplicationsOutlined } from '@material-ui/icons';
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
-import { useQueryClient } from "react-query";
+import { useMutation } from "react-query";
-import Client, {  } from "../../../classes/client";
+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';
 
 
 const AccountMenu = () => {
-
-
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
+    const [openRenameDialog, setOpenRenameDialog] = React.useState<boolean>(false);
+
 
     const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorEl(event.currentTarget);
@@ -28,7 +30,7 @@ const AccountMenu = () => {
             <Tooltip title={`${account?.firstName} ${account?.lastName} <${account?.email}>`}>
                 <IconButton
                     onClick={handleMenu}>
-                    <AccountCircle fontSize="large" style={{color:'black'}}/>
+                    <AccountCircle fontSize="large" style={{ color: 'black' }} />
                 </IconButton >
             </Tooltip>
             <Menu id="appbar-profile"
@@ -53,6 +55,13 @@ const AccountMenu = () => {
                     <FormattedMessage id="menu.account" defaultMessage="Account" />
                 </MenuItem>
 
+                <MenuItem onClick={() => { handleClose(), setOpenRenameDialog(true) }}>
+                    <ListItemIcon>
+                        <LockOpenOutlined fontSize="small" />
+                    </ListItemIcon>
+                    <FormattedMessage id="menu.change-password" defaultMessage="Change Password" />
+                </MenuItem>
+
                 <MenuItem onClick={handleClose}>
                     <Link color="textSecondary" href="/c/logout">
                         <ListItemIcon>
@@ -61,8 +70,88 @@ const AccountMenu = () => {
                         <FormattedMessage id="menu.signout" defaultMessage="Sign Out" />
                     </Link>
                 </MenuItem>
-
             </Menu>
+            {openRenameDialog &&
+                <ChangePasswordDialog onClose={() => setOpenRenameDialog(false)} />
+            }
         </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;

packages/webapp/src/components/maps-page/language-menu/index.tsx

@@ -13,7 +13,7 @@ const LanguageMenu = () => {
     const queryClient = useQueryClient();
     const client: Client = useSelector(activeInstance);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const [helpDialogOpen, setHelpDialogOpen] = React.useState<boolean>(false);
+    const [openHelpDialog, setHelpDialogOpen] = React.useState<boolean>(false);
 
     const open = Boolean(anchorEl);
     const intl = useIntl();
@@ -92,25 +92,26 @@ const LanguageMenu = () => {
                     <FormattedMessage id="language.help" defaultMessage="Help to Translate" />
                 </MenuItem>
             </Menu>
-            <HelpUsToTranslateDialog open={helpDialogOpen} onClose={() => setHelpDialogOpen(false)} />
+            {openHelpDialog &&
+                <HelpUsToTranslateDialog onClose={() => setHelpDialogOpen(false)} />
+            }           
         </span>);
 }
 
 type HelpUsToTranslateDialogProp = {
-    open: boolean,
     onClose: () => void
 }
-const HelpUsToTranslateDialog = ({ open, onClose }: HelpUsToTranslateDialogProp) => {
+const HelpUsToTranslateDialog = ({ onClose }: HelpUsToTranslateDialogProp) => {
 
     return (
         <Dialog
-            open={open}
+            open={true}
             onClose={onClose}
         >
-            <DialogTitle>Help us to Translate !</DialogTitle>
+            <DialogTitle>Help us to support more languages !</DialogTitle>
             <DialogContent>
                 <DialogContentText>
-                    We need your help !. You could help us to support more languages. If you are interested, send us an email to team@wisemapping.com.
+                    We need your help !. If you are interested, send us an email to team@wisemapping.com.
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
@@ -120,4 +121,5 @@ const HelpUsToTranslateDialog = ({ open, onClose }: HelpUsToTranslateDialogProp)
     );
 }
 
+
 export default LanguageMenu;