frontend: Page d'inscription + Hotfix backend

This commit is contained in:
Divlo
2020-03-25 18:22:03 +01:00
parent 2239df70b3
commit 7d49422108
11 changed files with 160 additions and 70 deletions

View File

@ -3,7 +3,7 @@ import HeadTag from '../../components/HeadTag';
import FunctionComponentTop from '../../components/FunctionComponentTop';
import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
import FunctionTabs from '../../components/FunctionTabs/FunctionTabs';
import FunctionForm from '../../components/FunctionForm/FunctionForm';
import FunctionForm from '../../components/FunctionForm';
import redirect from '../../utils/redirect';
import api from '../../utils/api';
import { API_URL } from '../../utils/config';

View File

@ -82,13 +82,13 @@ const Functions = () => {
</div>
<div className="Functions__search-container row justify-content-center">
<select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select form-control">
<select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select Functions__form-control">
<option value="0">Toutes catégories</option>
{categories.map((category) => (
<option key={category.id} value={category.id} className="Functions__select-option" style={{ backgroundColor: category.color }}>{category.name}</option>
))}
</select>
<input value={inputSearch.search} onChange={handleChange} type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
<input value={inputSearch.search} onChange={handleChange} type="search" className="Functions__form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
</div>
<div className="row justify-content-center">

75
website/pages/register.js Normal file
View File

@ -0,0 +1,75 @@
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 Register = () => {
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) => {
event.preventDefault();
api.post('/users/register', inputState)
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
});
}
return (
<Fragment>
<HeadTag
title="S'inscrire"
description="Créer un compte."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">S'inscrire</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Nom :</label>
<input onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
</div>
<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">
<label className="form-label" htmlFor="name">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>
);
}
export default Register;