diff --git a/frontend/src/components/UserForm.js b/frontend/src/components/UserForm.js index 3e0c291..6641ad1 100644 --- a/frontend/src/components/UserForm.js +++ b/frontend/src/components/UserForm.js @@ -1,39 +1,118 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; -export function UserForm({ data = { username: '', password: '', passwordVerification: ''}, onSubmit }) { - const [ formData, setFormData ] = useState(data); +const defaultData = { + 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 onInputChange = evt => { const name = evt.target.name; 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 => { evt.preventDefault(); + if (hasFormErrors) return; if (typeof onSubmit === 'function') onSubmit(formData); }; + return (
); }; diff --git a/frontend/src/pages/home.js b/frontend/src/pages/home.js index 4bed870..4960c9b 100644 --- a/frontend/src/pages/home.js +++ b/frontend/src/pages/home.js @@ -15,7 +15,7 @@ export default class HomePage extends React.PureComponent {