- added page reset password;

src/assets/scss/components/misc.scss

@@ -8,8 +8,8 @@
 .p-badge {
   color: var(--menuitem-active-color);
 }
-.p-button:not(.p-button-outlined, .p-button-secondary, .p-confirm-popup-reject),
-.p-button:not(.p-button-outlined, .p-button-secondary, .p-confirm-popup-reject) span {
+.p-button:not(.p-button-outlined, .p-button-secondary, .p-confirm-popup-reject, .p-button-link),
+.p-button:not(.p-button-outlined, .p-button-secondary, .p-confirm-popup-reject, .p-button-link) span {
   color: var(--menuitem-active-color);
 }
 .p-fileupload-row {
@@ -35,6 +35,13 @@
   color: var(--global-textColor);
 }
 
+.p-message-wrapper {
+  .p-message-close {
+    flex: 0 0 auto;
+    margin-left: 10px;
+  }
+}
+
 .p-message.p-message-error {
   background: var(--message-error-background);
   border-left: 5px solid var(--message-error-color);

src/pages/LoginAdmin/index.js

@@ -3,6 +3,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useForm } from 'react-hook-form';
 import { classNames } from 'primereact/utils';
 import { isEmpty } from 'ramda';
+import { useNavigate } from 'react-router-dom';
 
 // tools
 import AuthenticationService from '../../service/authentication-service';
@@ -17,6 +18,7 @@ import { Button } from 'primereact/button';
 import { Messages } from 'primereact/messages';
 
 const LoginAdmin = () => {
+    const navigate = useNavigate();
     const token = useStore().main.token();
     const [loading, setLoading] = useState(false);
     const errorMsgs = useRef(null);
@@ -38,7 +40,6 @@ const LoginAdmin = () => {
     };
 
     const loginCallback = (data) => {
-        //console.log('loginCallback', data);
         if (data.status === 'SUCCESS') {
             storeSet.main.setAuthData({
                 token: data.data.token,
@@ -57,17 +58,19 @@ const LoginAdmin = () => {
     const loginError = (err) => {
         errorMsgs.current.show([
             { sticky: true, severity: 'error', summary: '',
-                detail: sprintf(__('%s', 'gepafin'), err),
+                detail: sprintf(__('%s', 'gepafin'), err.message),
                 closable: true }
         ]);
         setLoading(false);
     }
 
+    const gotToResetPassword = () => {
+        navigate('/reset-password');
+    }
+
     useEffect(() => {
-        //console.log('login admin, updated token:', token);
         if (!isEmpty(token)) {
             setLoading(true);
-            //console.log('login admin, do redirect to "/"');
             window.location.replace('/')
         }
     }, [token]);
@@ -79,8 +82,6 @@ const LoginAdmin = () => {
 
                 <h1>{__('Accedi o Registrati', 'gepafin')}</h1>
 
-                <div className="appPage__spacer"></div>
-
                 <Messages ref={errorMsgs}/>
 
                 <div className="appPage__spacer"></div>
@@ -109,6 +110,10 @@ const LoginAdmin = () => {
                     <Button
                         label={__('Accedi', 'gepafin')}
                         disabled={loading}/>
+
+                    <Button
+                        label={__('Password dimenticata?', 'gepafin')}
+                        link onClick={gotToResetPassword}/>
                 </form>
             </div>
         </div>

src/pages/ResetPassword/index.js

@@ -0,0 +1,153 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { useForm } from 'react-hook-form';
+import { classNames } from 'primereact/utils';
+import { isEmpty } from 'ramda';
+
+// tools
+import AuthenticationService from '../../service/authentication-service';
+
+// store
+import { useStore } from '../../store';
+
+// components
+import FormField from '../../components/FormField';
+import LogoIcon from '../../icons/LogoIcon';
+import { Button } from 'primereact/button';
+import { Messages } from 'primereact/messages';
+
+const ResetPassword = () => {
+    const token = useStore().main.token();
+    const [loading, setLoading] = useState(false);
+    const [resetPassToken, setResetPassToken] = useState('');
+    const errorMsgs = useRef(null);
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        reset,
+        register,
+        setValue
+    } = useForm({ mode: 'onChange' });
+
+    const onSubmit = (formData) => {
+        errorMsgs.current.clear();
+        setLoading(true);
+        const request = {
+            ...formData
+        }
+
+        AuthenticationService.forgotPassword(request, getCallback, errCallback);
+    };
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setResetPassToken(data.data)
+        } else {
+            errorMsgs.current.show([
+                {
+                    sticky: true, severity: 'error', summary: '',
+                    detail: data.message,
+                    closable: true
+                }
+            ]);
+        }
+        setLoading(false);
+    }
+
+    const errCallback = (err) => {
+        errorMsgs.current.show([
+            {
+                sticky: true, severity: 'error', summary: '',
+                detail: sprintf(__('%s', 'gepafin'), err),
+                closable: true
+            }
+        ]);
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        if (!isEmpty(token)) {
+            setLoading(true);
+            window.location.replace('/')
+        }
+    }, [token]);
+
+    useEffect(() => {
+        setValue('token', resetPassToken);
+        reset();
+    }, [resetPassToken])
+
+    return (
+        <div className={classNames(['appPage', 'appPageLogin'])}>
+            <div className="appPageLogin__wrapper">
+                <LogoIcon/>
+
+                <h1>{__('Password dimenticata', 'gepafin')}</h1>
+
+                <Messages ref={errorMsgs}/>
+
+                <div className="appPage__spacer"></div>
+
+                <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                    <FormField
+                        type="textinput"
+                        fieldName="email"
+                        label={__('Email', 'gepafin')}
+                        control={control}
+                        errors={errors}
+                        config={{ required: __('È obbligatorio', 'gepafin') }}
+                        placeholder="sample@example.com"
+                    />
+
+                    {!isEmpty(resetPassToken)
+                        ? <input
+                            type="hidden"
+                            name="token"
+                            {...register('test', {
+                                required: true
+                            })}
+                        /> : null}
+
+                    {!isEmpty(resetPassToken)
+                        ? <FormField
+                            type="textinput"
+                            inputtype="password"
+                            fieldName="newPassword"
+                            label={__('Password', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{
+                                required: __('È obbligatorio', 'gepafin'),
+                                validate: {
+                                    passEqual: (value, values) => values.confirmPassword === value
+                                }
+                            }}
+                        /> : null}
+
+                    {!isEmpty(resetPassToken)
+                        ? <FormField
+                            type="textinput"
+                            inputtype="password"
+                            fieldName="confirmPassword"
+                            label={__('Conferma Password', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{
+                                required: __('È obbligatorio', 'gepafin'),
+                                validate: {
+                                    passEqual: (value, values) => values.newPassword === value
+                                }
+                            }}
+                        /> : null}
+
+                    <Button
+                        label={__('Invia', 'gepafin')}
+                        disabled={loading}/>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default ResetPassword;

src/routes.js

@@ -24,6 +24,7 @@ import Profile from './pages/Profile';
 import ProfileCompany from './pages/ProfileCompany';
 import Users from './pages/Users';
 import AddCompany from './pages/AddCompany';
+import ResetPassword from './pages/ResetPassword';
 
 const routes = ({ role, chosenCompanyId }) => {
 
@@ -91,10 +92,10 @@ const routes = ({ role, chosenCompanyId }) => {
                     {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
                 </DefaultLayout>}/>
             </Route>
+            <Route exact path="/reset-password" element={<ResetPassword/>}/>
             <Route exact path="/login" element={<Login/>}/>
             <Route exact path="/loginAdmin" element={<LoginAdmin/>}/>
             <Route exact path="/registration" element={<Registration/>}/>
-            {/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}
             <Route path="*" element={<PageNotFound/>}/>
         </Routes>)
 };

src/service/authentication-service.js

@@ -65,8 +65,12 @@ export default class AuthenticationService {
         NetworkService.unauthorizedPost(`${API_BASE_URL}/user`, registerRequest, callback, errCallback, queryParams);
     };
 
-    static forgotPassword = (request, callback, errCallback) => {
-        NetworkService.unauthorizedPost(`${API_BASE_URL}/user/reset-password`, {}, callback, errCallback);
+    static forgotPassword = (body, callback, errCallback) => {
+        NetworkService.unauthorizedPost(`${API_BASE_URL}/user/reset-password/initiate`, body, callback, errCallback);
+    }
+
+    static resetPassword = (body, callback, errCallback) => {
+        NetworkService.unauthorizedPost(`${API_BASE_URL}/user/reset-password`, body, callback, errCallback);
     }
 
     static me = (callback, errCallback) => {