77 lines
3.4 KiB
JavaScript
77 lines
3.4 KiB
JavaScript
import React, { 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 ê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);
|