UserForm avec validation
This commit is contained in:
parent
6901b1eca4
commit
85acbcbdb5
@ -1,39 +1,118 @@
|
|||||||
import { useState } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
export function UserForm({ data = { username: '', password: '', passwordVerification: ''}, onSubmit }) {
|
const defaultData = {
|
||||||
const [ formData, setFormData ] = useState(data);
|
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 { username, password, passwordVerification } = formData;
|
||||||
|
|
||||||
const onInputChange = evt => {
|
const onInputChange = evt => {
|
||||||
const name = evt.target.name;
|
const name = evt.target.name;
|
||||||
const value = evt.target.value;
|
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 => {
|
const dispatchSubmit = evt => {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
if (hasFormErrors) return;
|
||||||
if (typeof onSubmit === 'function') onSubmit(formData);
|
if (typeof onSubmit === 'function') onSubmit(formData);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className="form" onSubmit={dispatchSubmit}>
|
<form className="form" onSubmit={dispatchSubmit}>
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label className="label" htmlFor="username">Nom d'utilisateur</label>
|
<label className="label" htmlFor="username">Nom d'utilisateur</label>
|
||||||
<div className="control">
|
<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>
|
</div>
|
||||||
|
{
|
||||||
|
formErrors.username.hasError ?
|
||||||
|
<p className="help is-danger">{formErrors.username.message}</p>
|
||||||
|
: null
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label className="label" htmlFor="password">Mot de passe</label>
|
<label className="label" htmlFor="password">Mot de passe</label>
|
||||||
<div className="control">
|
<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>
|
</div>
|
||||||
|
{
|
||||||
|
formErrors.password.hasError ?
|
||||||
|
<p className="help is-danger">{formErrors.password.message}</p>
|
||||||
|
: null
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
|
<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
|
||||||
<div className="control">
|
<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} />
|
onChange={onInputChange} />
|
||||||
</div>
|
</div>
|
||||||
|
{
|
||||||
|
formErrors.passwordVerification.hasError ?
|
||||||
|
<p className="help is-danger">{formErrors.passwordVerification.message}</p>
|
||||||
|
: null
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" className="button">Envoyer</button>
|
<button type="submit" disabled={hasFormErrors} className="button">Envoyer</button>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -15,7 +15,7 @@ export default class HomePage extends React.PureComponent {
|
|||||||
<h1 className="title">Bienvenue sur PleaseWait !</h1>
|
<h1 className="title">Bienvenue sur PleaseWait !</h1>
|
||||||
<h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
|
<h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
|
||||||
<a href="#/logout">Se déconnecter</a>
|
<a href="#/logout">Se déconnecter</a>
|
||||||
<UserForm onSubmit={onUserFormSubmit} />
|
<UserForm onSubmit={onUserFormSubmit} />
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user