From 6901b1eca4ddd9d46688d8e28e9d02ded6caf47d Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Tue, 25 Feb 2020 15:10:42 +0100
Subject: [PATCH] Ajout exemple UserForm

---
 frontend/src/components/UserForm.js | 39 +++++++++++++++++++++++++++++
 frontend/src/pages/home.js          |  9 ++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/UserForm.js

diff --git a/frontend/src/components/UserForm.js b/frontend/src/components/UserForm.js
new file mode 100644
index 0000000..3e0c291
--- /dev/null
+++ b/frontend/src/components/UserForm.js
@@ -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>
+	);
+};
diff --git a/frontend/src/pages/home.js b/frontend/src/pages/home.js
index 749f561..4bed870 100644
--- a/frontend/src/pages/home.js
+++ b/frontend/src/pages/home.js
@@ -1,16 +1,23 @@
 import React from 'react'
 import Page from './page';
+import { UserForm } from '../components/UserForm';
 
 export default class HomePage extends React.PureComponent {
+
+
   render() {
+  	const onUserFormSubmit = formData => {
+		console.log(formData);
+  	};
     return (
         <Page title="home">
             <div className="section">
               <h1 className="title">Bienvenue sur PleaseWait !</h1>
               <h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
               <a href="#/logout">Se déconnecter</a>
+	    	<UserForm onSubmit={onUserFormSubmit} />
             </div>
         </Page>
     );
   }
-}
\ No newline at end of file
+}