40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
import { useState } from 'react';
|
|
|
|
export function UserForm({ data = { username: '', password: '', passwordVerification: ''}, onSubmit }) {
|
|
const [ formData, setFormData ] = useState(data);
|
|
const { username, password, passwordVerification } = formData;
|
|
const onInputChange = evt => {
|
|
const name = evt.target.name;
|
|
const value = evt.target.value;
|
|
setFormData({ ...formData, [name]: value });
|
|
}
|
|
const dispatchSubmit = evt => {
|
|
evt.preventDefault();
|
|
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} />
|
|
</div>
|
|
</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} />
|
|
</div>
|
|
</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}
|
|
onChange={onInputChange} />
|
|
</div>
|
|
</div>
|
|
<button type="submit" className="button">Envoyer</button>
|
|
</form>
|
|
);
|
|
};
|