frontend: Mot de passe oublié + ajustement backend

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">