GGMM/GrossesMitaines/grosses-mitaines-ui/src/pages/Register.js

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 mySwal = withReactContent(Swal);
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const onSubmit = data => {
        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 (
        <div className="inventaire-form-container">
            <form onSubmit={handleSubmit(onSubmit)}>
                <h4 className="text-center">Nouvel utilisateur</h4>
                <div className="Error_color">
                <div className="form-group">
                    <label>Prénom: </label>
                    <input placeholder="Votre prénom:" {...register("FirstName", { required: true, minLength: 2})} />
                </div>
                <div>
                    {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("LastName", { required: true, minLength: 2})} />
                </div>
                <div>
                    {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("Phone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
                </div>
                <div>
                    {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>Numéro civique: </label>
                    <input placeholder="Votre numéro civique:" {...register("CivicNumber", { required: true })} />
                </div>
                <div>
                    {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>
                    <input placeholder="Votre courriel" {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
                </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 className="form-group">
                    <label>Mot de passe: </label>
                    <input placeholder="Mot de passe..." {...register("Password", { required: true, minLength: 5})} />
                </div>
                <div>
                    {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;