frontend: Mot de passe oublié + ajustement backend

api/controllers/users.js

@@ -104,7 +104,7 @@ exports.resetPassword = async (req, res, next) => {
             from: `"FunctionProject" <${EMAIL_INFO.auth.user}>`,
             to: email,
             subject: "FunctionProject - Réinitialisation du mot de passe",
-            html: emailTemplate("Veuillez confirmer la réinitialisation du mot de passe", "Oui, je change mon mot de passe.", `${FRONT_END_HOST}/new-password?token=${tempToken}`, "Si vous avez reçu ce message par erreur, il suffit de le supprimer. Votre mot de passe ne sera pas réinitialiser si vous ne cliquez pas sur le lien ci-dessus. Par ailleurs, pour la sécurité de votre compte, la réinitialisation du mot de passe est disponible pendant un délai de 1 heure, passez ce temps, la réinitialisation ne sera plus valide.")
+            html: emailTemplate("Veuillez confirmer la réinitialisation du mot de passe", "Oui, je change mon mot de passe.", `${FRONT_END_HOST}/newPassword?token=${tempToken}`, "Si vous avez reçu ce message par erreur, il suffit de le supprimer. Votre mot de passe ne sera pas réinitialiser si vous ne cliquez pas sur le lien ci-dessus. Par ailleurs, pour la sécurité de votre compte, la réinitialisation du mot de passe est disponible pendant un délai de 1 heure, passez ce temps, la réinitialisation ne sera plus valide.")
         });
         return res.status(200).json({ result: "Demande de réinitialisation du mot de passe réussi, veuillez vérifier vos emails!" });
     } catch (error) {

website/components/Header/Header.js

@@ -1,6 +1,7 @@
 import { Fragment, useState, useContext } from 'react';
 import { UserContext } from '../../contexts/UserContext';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import NavigationLink from './NavigationLink';
 import './Header.css';
 
@@ -8,6 +9,7 @@ export default function Header() {
 
     const { isAuth, logoutUser, user } = useContext(UserContext);
     const [isActive, setIsActive]      = useState(false);
+    const { pathname }                 = useRouter();
 
     const toggleNavbar = () => {
         setIsActive(!isActive);
@@ -44,10 +46,9 @@ export default function Header() {
                                 </Fragment>
                             :
                                 <Fragment>
-                                    {/* <NavigationLink name="Mon Profil" path={`/profile/${user.name}`} /> */}
                                     <li className="navbar-item">
                                         <Link href={"/profile/[name]"} as={`/profile/${user.name}`}>
-                                            <a className={"navbar-link"}>Mon Profil</a>
+                                            <a className={`navbar-link ${pathname === "/profile/[name]" ? "navbar-link-active" : null}`}>Mon Profil</a>
                                         </Link>
                                     </li>
                                     <li className="navbar-item">

website/contexts/UserContext.js

@@ -41,9 +41,9 @@ function UserContextProvider(props) {
     }
 
     const logoutUser = () => {
+        cookies.remove('user');
         setUser(null);
         setIsAuth(false);
-        cookies.remove('user');
     } 
 
     return (

website/pages/forgotPassword.js

@@ -0,0 +1,73 @@
+import { Fragment, useState } from 'react';
+import htmlParser from 'html-react-parser';
+import Loader from '../components/Loader';
+import HeadTag from '../components/HeadTag';
+import '../public/css/pages/register-login.css';
+import api from '../utils/api';
+
+const forgotPassword = () => {
+
+    const [inputState, setInputState] = useState({});
+    const [message, setMessage] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleChange = () => {
+        const inputStateNew = { ...inputState };
+        inputStateNew[event.target.name] = event.target.value;
+        setInputState(inputStateNew);
+    }
+
+    const handleSubmit = (event) => {
+        setIsLoading(true);
+        event.preventDefault();
+        api.post('/users/reset-password', inputState)
+            .then(({ data }) => {
+                setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
+                setIsLoading(false);
+                setInputState({});
+            })
+            .catch((error) => {
+                setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
+                setIsLoading(false);
+            });
+    }
+
+    return (
+        <Fragment>
+            <HeadTag 
+                title="Mot de passe oublié - FunctionProject" 
+                description="Vous vous ne souvenez pas de votre mot de passe ? Demandez une demande de réinitialisation de mot de passe par email." 
+            />
+            <div className="container Register-Login__container">
+                <div className="row Register-Login__row justify-content-center">
+                    <div className="col-20">
+                        <h1 className="Register-Login__title">Mot de passe oublié ?</h1>
+                        <div className="text-center">
+                            <p>Demandez une demande de réinitialisation de mot de passe par email.</p>
+                        </div>
+                        <form onSubmit={handleSubmit}>
+                            <div className="form-group">
+                                <label className="form-label" htmlFor="name">Email :</label>
+                                <input onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
+                            </div>
+                            <div className="form-group text-center">
+                                <button type="submit" className="btn btn-dark">Envoyer</button>
+                            </div>
+                        </form>
+                        <div className="form-result text-center">
+                            {
+                                (isLoading) ? 
+                                    <Loader />
+                                :
+                                    htmlParser(message)
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+
+}
+
+export default forgotPassword;

website/pages/login.js

@@ -27,7 +27,7 @@ const Login = () => {
     return (
         <Fragment>
             <HeadTag 
-                title="Se connecter" 
+                title="Se connecter - FunctionProject" 
                 description="Connexion à FunctionProject." 
             />
             <div className="container Register-Login__container">
@@ -44,7 +44,7 @@ const Login = () => {
                                 <label className="form-label" htmlFor="password">Mot de passe :</label>
                                 <input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
                                 <p>
-                                    <Link href={"/register"}>
+                                    <Link href={"/forgotPassword"}>
                                         <a className="Register-Login__Forgot-password">Mot de passe oublié ?</a>
                                     </Link>
                                 </p>

website/pages/newPassword.js

@@ -0,0 +1,77 @@
+import { Fragment, useState } from 'react';
+import htmlParser from 'html-react-parser';
+import Loader from '../components/Loader';
+import HeadTag from '../components/HeadTag';
+import '../public/css/pages/register-login.css';
+import api from '../utils/api';
+import redirect from '../utils/redirect';
+
+const newPassword = (props) => {
+
+    const [inputState, setInputState] = useState({});
+    const [message, setMessage]       = useState("");
+    const [isLoading, setIsLoading]   = useState(false);
+
+    const handleChange = () => {
+        const inputStateNew = { ...inputState };
+        inputStateNew[event.target.name] = event.target.value;
+        setInputState(inputStateNew);
+    }
+
+    const handleSubmit = (event) => {
+        setIsLoading(true);
+        event.preventDefault();
+        api.put('/users/reset-password', { ...inputState, tempToken: props.token })
+            .then(({ data }) => {
+                setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
+                setIsLoading(false);
+                setInputState({});
+            })
+            .catch((error) => {
+                setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
+                setIsLoading(false);
+            });
+    }
+
+    return (
+        <Fragment>
+            <HeadTag 
+                title="Nouveau mot de passe - FunctionProject" 
+                description="Mise à jour du mot de passe." 
+            />
+            <div className="container Register-Login__container">
+                <div className="row Register-Login__row justify-content-center">
+                    <div className="col-20">
+                        <h1 className="Register-Login__title">Nouveau mot de passe</h1>
+                        <form onSubmit={handleSubmit}>
+                            <div className="form-group">
+                                <label className="form-label" htmlFor="password">Mot de passe :</label>
+                                <input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
+                            </div>
+                            <div className="form-group text-center">
+                                <button type="submit" className="btn btn-dark">Envoyer</button>
+                            </div>
+                        </form>
+                        <div className="form-result text-center">
+                            {
+                                (isLoading) ? 
+                                    <Loader />
+                                :
+                                    htmlParser(message)
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+}
+
+newPassword.getInitialProps = (context) => {
+    if (context.query.token != undefined) {
+        return context.query;
+    }
+    return redirect(context, '/404');
+}
+
+export default newPassword;

website/pages/register.js

@@ -35,7 +35,7 @@ const Register = () => {
     return (
         <Fragment>
             <HeadTag 
-                title="S'inscrire" 
+                title="S'inscrire - FunctionProject" 
                 description="Créer un compte." 
             />
             <div className="container Register-Login__container">