memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

confirmation utulisateur

Browse Source
This commit is contained in:
Jean-Daniel Lamontagne 2022-11-06 11:17:11 -05:00
parent 64e87477d4
commit 3013fc887b
2 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
GrossesMitaines/grosses-mitaines-ui/src/pages/Register.js
View File

@ -1,70 +1,86 @@
import { useState } from "react"; import { useState } from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { useForm } from "react-hook-form";
const Register = () => { // const Register = () => {
//const [username, setUsername] = useState(""); // //const [username, setUsername] = useState("");
//const [password, setPassword] = useState(""); // //const [password, setPassword] = useState("");
const handleLogin = async (e) => { // // const handleLogin = async (e) => {
e.preventDefault(); // // e.preventDefault();
const response = await fetch(`https://localhost:7292/api/Login?rememberme=true`, { // // const response = await fetch(`https://localhost:7292/api/Login?rememberme=true`, {
method: 'POST', // // method: 'POST',
headers: { // // headers: {
'Accept': 'application/json', // // 'Accept': 'application/json',
'Content-Type': 'application/json' // // 'Content-Type': 'application/json'
}, // // },
//body: JSON.stringify({ username, password }) // // //body: JSON.stringify({ username, password })
}) // // })
// Partie de display d'erreur ou de redirection (faudrait checker pour se faire un state de connexion). // // Partie de display d'erreur ou de redirection (faudrait checker pour se faire un state de connexion).
} // }
return ( export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
<div className="inventaire-form-container"> <div className="inventaire-form-container">
<form className="form-horizontal" onSubmit={handleLogin}> <form onSubmit={handleSubmit(onSubmit)}>
<h4 className="text-center">Nouvel utilisateur</h4> <h4 className="text-center">Nouvel utilisateur</h4>
<div className="Error_color">
<div className="form-group"> <div className="form-group">
<label>Prénom: </label> <label>Prénom: </label>
<input type='text' className="form-control form-input" <input placeholder="Votre prénom:" {...register("Prénom", { required: true, minLength: 2})} />
placeholder="Votre prénom..."/> </div>
<div>
{errors.Prénom && errors.Prénom.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
{errors.Prénom && errors.Prénom.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Nom: </label> <label>Nom: </label>
<input type='text' className="form-control form-input" <input placeholder="Votre nom:" {...register("Nom", { required: true, minLength: 2})} />
placeholder="Votre Nom..."/> </div>
<div>
{errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
{errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Numéro de téléphone: </label> <label>Numéro de téléphone: </label>
<input type='text' className="form-control form-input" <input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
placeholder="Votre numéro de téléphone..."/>
</div> </div>
{errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
{errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
<div className="form-group"> <div className="form-group">
<label>Adresse civique: </label> <label>Adresse civique: </label>
<input type='text' className="form-control form-input" <input placeholder="Votre adresse:" {...register("Adresse", { required: true })} />
placeholder="Votre adresse..."/>
</div> </div>
{errors.Adresse && errors.Adresse.type === 'required' && <span>Vous devez entrer une adresse!</span>}
<div className="form-group"> <div className="form-group">
<label>Adresse courriel: </label> <label>Adresse courriel: </label>
<input type='text' className="form-control form-input" <input placeholder="Votre courriel" {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
placeholder="Votre adresse courrirel..."/> </div>
<div>
{errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
{errors.Email && errors.Email.type === 'pattern' && <span>Adresse courriel non valide!</span>}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Mot de passe: </label> <label>Mot de passe: </label>
<input type='password' className="form-control form-input" <input placeholder="Mot de passe..." {...register("MotPasse", { required: true, minLength: 5})} />
placeholder="Mot de passe..."/> </div>
<div>
{errors.MotPasse && errors.MotPasse.type === 'required' && <span>Vous devez entrer un mot de passe!</span>}
{errors.MotPasse && errors.MotPasse.type === 'minLength' && <span>Votre mot de passe doit avoir au moins 5 caractères!</span>}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Pour un acount admin, entrer le mot de passe. Sinon laisser vide: </label> <label>Pour un acount admin, entrer le mot de passe. Sinon laisser vide: </label>
<input type='password' className="form-control form-input" <input placeholder="Mot de passe admin..." {...register("MotPasseAdmin", { minLength: 0})} />
placeholder="Mot de passe admin..."/> </div>
</div> </div>
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Confirmer</Button> <Button className="btn-primary btn-ajouter-morceau" type="submit" >Confirmer</Button>
</form> </form>
</div> </div>
) )
} }
export default Register;

4
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -634,6 +634,10 @@ a {
margin-bottom: 10px; margin-bottom: 10px;
} }
.form-group input {
width: 100%;
}
.simple-item-top-container { .simple-item-top-container {
display: flex; display: flex;
} }