FunctionProject/website/pages/newPassword.js

77 lines
3.0 KiB
JavaScript

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;