react-logo/frontend/src/components/UserForm.js

import { useState, useEffect } from 'react';

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 => {
			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 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  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  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" disabled={hasFormErrors} className="button">Envoyer</button>
		</form>
	);
};