seance10 2 travaux pratiques

<input type="text" name="uname" required /> {renderErrorMessage("uname")} </div> <div className="input-container"> <label>Mot de passe </label> <input type="password" name="upass" required /> {renderErrorMessage("upass")} </div> <div className="button-container"> <input type="submit" value="Se connecter" /> </div> </form> </div> </div>

Ajouter la fonction qui gére la soumission du formulaire const database = [ { username: "user1", password: "pass1" }, { username: "user2", password: "pass2" }

const errors = { uname: "Votre identifiant est incorrect.", upass: "Votre mot de passe est incorrect."

const handleSubmit = (event) => { event.preventDefault(); var { uname, upass } = document.forms[0]; setName(uname.value); const userData = database.find((user) => user.username === uname.value); if (userData) { if (userData.password !== upass.value) { setErrorMessages({ name: "upass", message: errors.upass }); } else { setIsSubmitted(true);

Afficher le message de réussite après l'envoi return ( <div className="app"> {isSubmitted ? <div><div className="title">Accueil</div><div>Bonjour {name}</div></div> : renderForm} </div>

Styliser le formulaire en utilisant le code suivant (App.css) .app { font-family: sans-serif; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; background-color: #f8f9fd;

Afficher le message de réussite après l'envoi Je suis {name} né le {date_naissance} à {ville} et mes loisirs sont : {loisirs}