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

import { useEffect } from 'react';
import { WithForm } from './WithForm';

export function UserForm({ form, onSubmit }) {

	useEffect(() => {
		if (form.valid && form.submitted) onSubmit(form.data);
	}, [form.valid, form.submitted]);

	return (
		<form className="form" onSubmit={form.onSubmit}>
			<div className="field">
				<label className="label" htmlFor="username">Nom d'utilisateur</label>
				<div className="control">
					<input className={`input ${form.hasError('username') ? 'is-danger' : ''}`} type="text" 
						name="username" value={form.field('username', '')}
						onChange={form.onChange('username')} />
				</div>
			{ 
				form.hasError('username') ?
				<p className="help is-danger">{form.error('username')}</p>
				: null
			}
			</div>
			<div className="field">
				<label className="label" htmlFor="password">Mot de passe</label>
				<div className="control">
					<input  className={`input ${form.hasError('password') ? 'is-danger' : ''}`} 
						type="password" name="password" 
						autoComplete='new-password' 
						value={form.field('password', '')} 
						onChange={form.onChange('password')} />
				</div>
			{ 
				form.hasError('password') ?
				<p className="help is-danger">{form.error('password')}</p>
				: null
			}
			</div>
			<div className="field">
				<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
				<div className="control">
					<input  className={`input ${form.hasError('passwordVerification') ? 'is-danger' : ''}`} 
						type="password" name="passwordVerification" 
						autoComplete='new-password' 
						value={form.field('passwordVerification', '')} 
						onChange={form.onChange('passwordVerification')} />
				</div>
			{ 
				form.hasError('passwordVerification') ?
				<p className="help is-danger">{form.error('passwordVerification')}</p>
				: null
			}
			</div>
			<button type="submit" disabled={!form.valid} className="button">Envoyer</button>
		</form>
	);
};

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: '' };
	}
};

export const ExtendedUserForm = WithForm(validators)(UserForm);