Ajout exemple UserForm

This commit is contained in:
wpetit 2020-02-25 15:10:42 +01:00
parent 60267305cb
commit 6901b1eca4
2 changed files with 47 additions and 1 deletions

View File

@ -0,0 +1,39 @@
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>
);
};

View File

@ -1,14 +1,21 @@
import React from 'react' import React from 'react'
import Page from './page'; import Page from './page';
import { UserForm } from '../components/UserForm';
export default class HomePage extends React.PureComponent { export default class HomePage extends React.PureComponent {
render() { render() {
const onUserFormSubmit = formData => {
console.log(formData);
};
return ( return (
<Page title="home"> <Page title="home">
<div className="section"> <div className="section">
<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} />
</div> </div>
</Page> </Page>
); );