UserForm avec validation

frontend/src/components/UserForm.js

@@ -1,39 +1,118 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
-export function UserForm({ data = { username: '', password: '', passwordVerification: ''}, onSubmit }) {
-	const [ formData, setFormData ] = useState(data);
+const defaultData = {
+ username: '',
+ password: '',
+ passwordVerification: ''
+};
+
+const defaultErrors = {
+  username: { hasError: false, message: '' },
+  password: { hasError: false, message: '' },
+  passwordVerification: { hasError: false, message: '' },
+};
+
+export function UserForm({ data = defaultData, errors = defaultErrors, onSubmit }) {
+
+	const validators = {
+		username: (value, formData) => {
+			if (value === "") return  { hasError: true, message: 'Le nom d\'utilisateur ne peut pas être vide !' }
+			return { hasError: false, message: '' };
+		},
+		password: (value, formData) => {
+			if (value === "") return  { hasError: true, message: 'Le mot de passe ne peut pas être vide !' }
+			if (value !== formData.passwordVerification) return  { hasError: true, message: 'Vos deux mots de passe sont différents !' }
+			return { hasError: false, message: '' };
+		},
+		passwordVerification: (value, formData) => {
+			if (value !== formData.password) return  { hasError: true, message: 'Vos deux mots de passe sont différents !' }
+			return { hasError: false, message: '' };
+		}
+	};
+	
+	const [ formErrors, setFormErrors ] = useState({ ...defaultErrors, ...errors });
+	const [ formData, setFormData ] = useState({ ...defaultData, ...data });
+
+	useEffect(() => {
+		setFormErrors(formErrors => {
+			return { ...formErrors, ...errors };
+		});
+	}, [errors]);
+
+	useEffect(() => {
+		setFormData(formData => {
+			return { ...formData, ...data };
+		});
+	}, [data]);
+
+
+	const hasFormErrors = Object.values(formErrors).reduce((hasFormErrors, fieldError) => {
+		return hasFormErrors || fieldError.hasError;
+	}, false);
 	const { username, password, passwordVerification } = formData;
+	
 	const onInputChange = evt => {
 		const name = evt.target.name;
 		const value = evt.target.value;
-		setFormData({ ...formData, [name]: value });
+		setFormData(formData => {
+			return { ...formData, [name]: value };
+		});
 	}
+
+	useEffect(() => {
+		Object.keys(formData).forEach(name => {
+			if (typeof validators[name] !== 'function') return;
+			const value = formData[name];
+			const result = validators[name](value, formData);
+			setFormErrors(formErrors => {
+				return { ...formErrors, [name]: result };
+			});
+		});
+	}, [formData]);
+
 	const dispatchSubmit = evt => {
 		evt.preventDefault();
+		if (hasFormErrors) return;
 		if (typeof onSubmit === 'function') onSubmit(formData); 
 	};
+
 	return (
 		<form className="form" onSubmit={dispatchSubmit}>
 			<div className="field">
 				<label className="label" htmlFor="username">Nom d'utilisateur</label>
 				<div className="control">
-					<input type="text" name="username" value={username} onChange={onInputChange} />
+					<input className={`input ${formErrors.username.hasError ? 'is-danger' : ''}`} type="text" name="username" value={username} onChange={onInputChange} />
 				</div>
+			{ 
+				formErrors.username.hasError ?
+				<p className="help is-danger">{formErrors.username.message}</p>
+				: null
+			}
 			</div>
 			<div className="field">
 				<label className="label" htmlFor="password">Mot de passe</label>
 				<div className="control">
-					<input type="password" name="password" autoComplete='new-password' value={password} onChange={onInputChange} />
+					<input  className={`input ${formErrors.password.hasError ? 'is-danger' : ''}`} type="password" name="password" autoComplete='new-password' value={password} onChange={onInputChange} />
 				</div>
+			{ 
+				formErrors.password.hasError ?
+				<p className="help is-danger">{formErrors.password.message}</p>
+				: null
+			}
 			</div>
 			<div className="field">
 				<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
 				<div className="control">
-					<input type="password" name="passwordVerification" autoComplete='new-password' value={passwordVerification} 
+					<input  className={`input ${formErrors.passwordVerification.hasError ? 'is-danger' : ''}`} type="password" name="passwordVerification" autoComplete='new-password' value={passwordVerification} 
 						onChange={onInputChange} />
 				</div>
+			{ 
+				formErrors.passwordVerification.hasError ?
+				<p className="help is-danger">{formErrors.passwordVerification.message}</p>
+				: null
+			}
 			</div>
-			<button type="submit" className="button">Envoyer</button>
+			<button type="submit" disabled={hasFormErrors} className="button">Envoyer</button>
 		</form>
 	);
 };