Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version
This commit is contained in:
Victor Turgeon
@@ -65,6 +65,7 @@ const Topbar = () => {
|
||||
S'inscrire
|
||||
</Link>
|
||||
}
|
||||
</Nav>
|
||||
{user !== null && user.LoggedIn &&
|
||||
<Dropdown className="dropdown-gestion-container">
|
||||
<Dropdown.Toggle className="dropdown-gestion" >
|
||||
@@ -95,7 +96,7 @@ const Topbar = () => {
|
||||
<Container>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.ItemText>
|
||||
Gestion
|
||||
<b>Gestion</b>
|
||||
</Dropdown.ItemText>
|
||||
<Dropdown.Item>
|
||||
<Link className="nav-link" to="/inventaire" >
|
||||
@@ -122,7 +123,6 @@ const Topbar = () => {
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
}
|
||||
</Nav>
|
||||
<CartButton/>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Cookies from "universal-cookie";
|
||||
|
||||
const Login = () => {
|
||||
|
||||
const [rememberme, setPersistence] = useState(true);
|
||||
const [rememberme, setPersistence] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [returnmess, returnMessage] = useState("");
|
||||
@@ -81,6 +81,13 @@ const Login = () => {
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group" styles="display:flex;">
|
||||
<label>Se souvenir de moi
|
||||
<input type="checkbox"
|
||||
value={rememberme}
|
||||
onChange={(e) => setPersistence(!rememberme)} />
|
||||
</label>
|
||||
</div>
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Connexion</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,39 +1,27 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "react-bootstrap";
|
||||
import { useForm } from "react-hook-form";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
// const Register = () => {
|
||||
|
||||
// //const [username, setUsername] = useState("");
|
||||
// //const [password, setPassword] = useState("");
|
||||
|
||||
// // const handleLogin = async (e) => {
|
||||
// // e.preventDefault();
|
||||
|
||||
// // const response = await fetch(`https://localhost:7292/api/Login?rememberme=true`, {
|
||||
// // method: 'POST',
|
||||
// // headers: {
|
||||
// // 'Accept': 'application/json',
|
||||
// // 'Content-Type': 'application/json'
|
||||
// // },
|
||||
// // //body: JSON.stringify({ username, password })
|
||||
// // })
|
||||
|
||||
// // Partie de display d'erreur ou de redirection (faudrait checker pour se faire un state de connexion).
|
||||
|
||||
// }
|
||||
|
||||
export default function App() {
|
||||
const Register = () => {
|
||||
const mySwal = withReactContent(Swal);
|
||||
const { register, handleSubmit, watch, formState: { errors } } = useForm();
|
||||
const onSubmit = data => {
|
||||
const response = fetch(`https://localhost:7292/api/User`, {
|
||||
fetch(`https://localhost:7292/api/User`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'text/json',
|
||||
'Content-Type': 'text/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
}).then((response) => {
|
||||
if (response.ok)
|
||||
mySwal.fire({
|
||||
text: 'Vous vous êtes incrit avec succès!',
|
||||
confirmButtonText: 'Ok'
|
||||
}).then((response) => window.location.href = "/login");
|
||||
})
|
||||
|
||||
}
|
||||
return (
|
||||
@@ -43,34 +31,76 @@ return (
|
||||
<div className="Error_color">
|
||||
<div className="form-group">
|
||||
<label>Prénom: </label>
|
||||
<input placeholder="Votre prénom:" {...register("Prénom", { required: true, minLength: 2})} />
|
||||
<input placeholder="Votre prénom:" {...register("FirstName", { required: true, minLength: 2})} />
|
||||
</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>}
|
||||
{errors.FirstName && errors.FirstName.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
|
||||
{errors.FirstName && errors.FirstName.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nom: </label>
|
||||
<input placeholder="Votre nom:" {...register("Nom", { required: true, minLength: 2})} />
|
||||
<input placeholder="Votre nom:" {...register("LastName", { required: true, minLength: 2})} />
|
||||
</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>}
|
||||
{errors.LastName && errors.LastName.type === 'required' && <span>Vous devez entrer votre nom!</span>}
|
||||
{errors.LastName && errors.LastName.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Numéro de téléphone: </label>
|
||||
<input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
|
||||
<input placeholder="Exemple: 111-111-1111" {...register("Phone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
|
||||
</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>}
|
||||
{errors.Phone && errors.Phone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
|
||||
{errors.Phone && errors.Phone.type === 'pattern' && <span>Téléphone non valide!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adresse civique: </label>
|
||||
<input placeholder="Votre adresse:" {...register("Adresse", { required: true })} />
|
||||
<label>Numéro civique: </label>
|
||||
<input placeholder="Votre numéro civique:" {...register("CivicNumber", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.Adresse && errors.Adresse.type === 'required' && <span>Vous devez entrer une adresse!</span>}
|
||||
{errors.CivicNumber && errors.CivicNumber.type === 'required' && <span>Vous devez entrer un numéro civique!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Appartement: </label>
|
||||
<input placeholder="Votre identifiant d'appartement:" {...register("Appartment")} />
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Rue: </label>
|
||||
<input placeholder="Votre rue:" {...register("Street", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.Street && errors.Street.type === 'required' && <span>Vous devez entrer une rue!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ville: </label>
|
||||
<input placeholder="Votre ville:" {...register("City", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.City && errors.City.type === 'required' && <span>Vous devez entrer une vile!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Province: </label>
|
||||
<input placeholder="Votre province:" {...register("Province", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.Province && errors.Province.type === 'required' && <span>Vous devez entrer une province!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Pays: </label>
|
||||
<input placeholder="Votre pays:" {...register("Country", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.Country && errors.Country.type === 'required' && <span>Vous devez entrer un pays!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Code Postal: </label>
|
||||
<input placeholder="Votre code postal:" {...register("PostalCode", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.PostalCode && errors.PostalCode.type === 'required' && <span>Vous devez entrer un code postal!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adresse courriel: </label>
|
||||
@@ -82,19 +112,17 @@ return (
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Mot de passe: </label>
|
||||
<input placeholder="Mot de passe..." {...register("MotPasse", { required: true, minLength: 5})} />
|
||||
<input placeholder="Mot de passe..." {...register("Password", { required: true, minLength: 5})} />
|
||||
</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 className="form-group">
|
||||
<label>Pour un acount admin, entrer le mot de passe. Sinon laisser vide: </label>
|
||||
<input placeholder="Mot de passe admin..." {...register("MotPasseAdmin", { minLength: 0})} />
|
||||
{errors.Password && errors.Password.type === 'required' && <span>Vous devez entrer un mot de passe!</span>}
|
||||
{errors.Password && errors.Password.type === 'minLength' && <span>Votre mot de passe doit avoir au moins 5 caractères!</span>}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Confirmer</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Register;
|
||||
Reference in New Issue
Block a user