theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: Mot de passe oublié + ajustement backend

Browse Source
This commit is contained in:
Divlo 2020-04-07 13:56:56 +02:00
parent 7d69561499
commit de28cbe706
7 changed files with 158 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/controllers/users.js
View File

@ -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) {

5
website/components/Header/Header.js
View File

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

2
website/contexts/UserContext.js
View File

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

73
website/pages/forgotPassword.js Normal file
View File

@ -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;

4
website/pages/login.js
View File

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

77
website/pages/newPassword.js Normal file
View File

@ -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;

2
website/pages/register.js
View File

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