Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version

This commit is contained in:
MarcEricMartel 2022-11-01 11:34:21 -07:00
commit 8819cf3b71
4 changed files with 91 additions and 14 deletions

View File

@ -25,6 +25,7 @@
"react-devtools": "^4.26.0", "react-devtools": "^4.26.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1", "react-fontawesome": "^1.7.1",
"react-hook-form": "^7.38.0",
"react-icons": "^4.6.0", "react-icons": "^4.6.0",
"react-router-dom": "^6.4.1", "react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
@ -15344,6 +15345,21 @@
"react": ">=0.12.0" "react": ">=0.12.0"
} }
}, },
"node_modules/react-hook-form": {
"version": "7.38.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
"integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-icons": { "node_modules/react-icons": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
@ -29471,6 +29487,12 @@
"prop-types": "^15.5.6" "prop-types": "^15.5.6"
} }
}, },
"react-hook-form": {
"version": "7.38.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
"integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==",
"requires": {}
},
"react-icons": { "react-icons": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",

View File

@ -20,6 +20,7 @@
"react-devtools": "^4.26.0", "react-devtools": "^4.26.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1", "react-fontawesome": "^1.7.1",
"react-hook-form": "^7.38.0",
"react-icons": "^4.6.0", "react-icons": "^4.6.0",
"react-router-dom": "^6.4.1", "react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",

View File

@ -1,18 +1,63 @@
import React from "react"; import { useForm } from "react-hook-form";
import { useEffect } from "react";
import ContactForm from "../components/ContactForm";
const ContactUs = () => { export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
useEffect(() => { const onSubmit = data => console.log(data);
document.title = 'Nous contacter';
});
return ( return (
<div className="contactUs"> /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<ContactForm/> <form onSubmit={handleSubmit(onSubmit)}>
<div className="Contact">
<h1>Contacter-nous!</h1>
<div className="Error_color">
<div>
<div>
<label>Nom*</label>
</div> </div>
{/* include validation with required or other standard HTML validation rules */}
<input {...register("Nom", { required: true, minLength: 2})} />
{/* errors will return when field validation fails */}
<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>
<div>
<label>Email*</label>
</div>
<input {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
<div>
{errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse!</span>}
{errors.Email && errors.Email.type === 'pattern' && <span>Adresse non valide!</span>}
</div>
</div>
<div>
<div>
<label>Téléphone*</label>
</div>
<input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
<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>
</div>
<div>
<div>
<label>Message</label>
</div>
<textarea {...register("Message")} />
</div>
</div>
<input type="submit" value="Contacter"/>
</div>
</form>
); );
} }
export default ContactUs;

View File

@ -20,6 +20,15 @@ a {
text-decoration: none; text-decoration: none;
} }
.Contact {
background-color: beige;
text-align: center;
}
.Error_color span {
color: red;
}
.contactUs { .contactUs {
height: 100vh; height: 100vh;
} }