add form errors

resources/css/app.css

@@ -9,3 +9,10 @@
 .btn-primary {
     @apply btn bg-blue-700 border-blue-700 hover:bg-blue-800 focus:bg-blue-800;
 }
+
+.form-control .error-message,
+.form-control.invalid-control input,
+.form-control.invalid-control select,
+.form-control.invalid-control textarea  {
+    @apply text-red-600 border-red-600;
+}

resources/js/components/Field.tsx

@@ -5,7 +5,7 @@ import React, {
 
 const Field: FC<FieldProps> = ({children, type = 'text', ...props}) => {
 
-    return <div className="form-group">
+    return <div className="form-control">
         {children && <label className="block text-gray-900 dark:text-gray-200"
                htmlFor={props.id ?? undefined}>
             {children}
@@ -13,6 +13,7 @@ const Field: FC<FieldProps> = ({children, type = 'text', ...props}) => {
         <input className="w-full mt-2 rounded dark:bg-gray-700"
                type={type}
                {...props}/>
+        <div className={`error-message`} />
     </div>
 }
 

resources/js/hooks/AxiosTools.tsx

@@ -1,6 +1,7 @@
 import {useState} from "react";
 import axios from "axios";
 import React from "react";
+import {cleanErrorsForm, displayFormErrors} from "../utilities/form";
 
 const useAxiosTools = () => {
 
@@ -13,15 +14,24 @@ const useAxiosTools = () => {
     const axiosDelete = axios.delete
 
     const errorCatch = (error: any) => {
+        if (error.response && error.response.status === 422) {
+            displayFormErrors(error)
+        } else {
             setError(error.response.data.message || error.message)
         }
+    }
 
     const errorLabel = () => {
 
         return error ? <div className="bg-red-600 rounded m-2 text-center text-white px-2 py-1 mx-auto">{error}</div>: null
     }
 
-    return {loading, setLoading, error, setError, errorCatch, errorLabel, axiosGet, axiosPost, axiosPut, axiosDelete}
+    const cleanErrors = () => {
+        cleanErrorsForm()
+        setError(null)
+    }
+
+    return {loading, setLoading, error, setError, errorCatch, errorLabel, cleanErrors, axiosGet, axiosPost, axiosPut, axiosDelete}
 }
 
 export default useAxiosTools

resources/js/pages/Auth/ForgotPassword.tsx

@@ -3,29 +3,34 @@ import Field from "../../components/Field";
 import axios from "axios";
 import {useNavigate} from "react-router-dom";
 import useAuthUser from "../../hooks/AuthUser";
+import useAxiosTools from "../../hooks/AxiosTools";
 
 const ForgotPassword = () => {
 
     const [email, setEmail] = useState('')
     const [message, setMessage] = useState(false)
+    const {errorCatch, errorLabel, cleanErrors, axiosGet, axiosPost} = useAxiosTools()
 
     const handleSubmit = async (event: FormEvent) => {
         event.preventDefault()
         try {
-            await axios.get('/sanctum/csrf-cookie')
+            cleanErrors()
-            const res = await axios.post('/api/forgot', {email})
+            await axiosGet('/sanctum/csrf-cookie')
+            const res = await axiosPost('/api/forgot', {email})
             setMessage(true)
         } catch (e) {
-            console.error(e)
+            errorCatch(e)
         }
     }
 
     return <div>
         <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
-            <h1 className="text-center">Connexion</h1>
+            <h1 className="text-center">Mot de passe oublié</h1>
 
             {message && <p className="bg-green-600">Un email vous a été envoyer pour modifier le mot de passe.</p>}
 
+            {errorLabel()}
+
             <Field type="email"
                    name="email"
                    placeholder="Email"

resources/js/pages/Auth/Login.tsx

@@ -4,6 +4,7 @@ import axios from "axios";
 import {Link, useNavigate} from "react-router-dom";
 import useAuthUser from "../../hooks/AuthUser";
 import Card from "../../components/Card";
+import useAxiosTools from "../../hooks/AxiosTools";
 
 const Login = () => {
 
@@ -11,16 +12,18 @@ const Login = () => {
     const {setAuthUser} = useAuthUser()
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
+    const {errorCatch, errorLabel, cleanErrors, axiosGet, axiosPost} = useAxiosTools()
 
     const handleSubmit = async (event: FormEvent) => {
         event.preventDefault()
         try {
-            await axios.get('/sanctum/csrf-cookie')
+            cleanErrors()
-            const res = await axios.post('/api/login', {email, password})
+            await axiosGet('/sanctum/csrf-cookie')
+            const res = await axiosPost('/api/login', {email, password})
             setAuthUser(res.data.user)
             navigate('/')
         } catch (e) {
-            console.error(e)
+            errorCatch(e)
         }
     }
 
@@ -30,6 +33,7 @@ const Login = () => {
                 <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
                     Connexion
                 </h1>
+                {errorLabel()}
 
                 <Field type="email"
                        name="email"

resources/js/pages/Auth/Reset.tsx

@@ -4,6 +4,7 @@ import React, {FormEvent, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
 import useAuthUser from "../../hooks/AuthUser";
 import axios from "axios";
+import useAxiosTools from "../../hooks/AxiosTools";
 
 const Reset = () => {
 
@@ -13,22 +14,26 @@ const Reset = () => {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
     const [samePassword, setSamePassword] = useState('')
+    const {errorCatch, errorLabel, cleanErrors, axiosGet, axiosPost} = useAxiosTools()
 
     const handleSubmit = async (event: FormEvent) => {
         event.preventDefault()
         try {
-            await axios.get('/sanctum/csrf-cookie')
+            cleanErrors()
-            const res = await axios.post('/api/reset', {email, token, password, samePassword})
+            await axiosGet('/sanctum/csrf-cookie')
+            const res = await axiosPost('/api/reset', {email, token, password, samePassword})
             setAuthUser(res.data.user)
             navigate('/connexion')
         } catch (e) {
-            console.error(e)
+            errorCatch(e)
         }
     }
 
     return <div>
         <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
-            <h1 className="text-center">Connexion</h1>
+            <h1 className="text-center">Modifier voter mot de passe</h1>
+
+            {errorLabel()}
 
             <Field type="email"
                    name="email"

resources/js/utilities/form.ts

@@ -0,0 +1,41 @@
+
+export function displayFormErrors(error: any, form: HTMLElement|null = null) {
+    if (error.response && error.response.status === 422) {
+        let errors = error.response.data.errors
+        const formBase = (form) ? form : document.body
+        Object.keys(errors).forEach(key => {
+            displayError(key, errors[key], formBase)
+        })
+    }
+}
+
+export function displayError(key: string, message: string, form: HTMLElement|null = null) {
+    const formBase = (form) ? form : document
+    const input = formBase.querySelector(`input[name="${key}"], select[name="${key}"], textarea[name="${key}"]`)
+    console.log(input)
+    if (input) {
+        const formControl = input.closest('.form-control')
+        if (formControl) {
+            formControl.classList.add('invalid-control')
+            const errorMessage: HTMLElement|null =  formControl.querySelector('.error-message')
+                if (errorMessage) {
+                    errorMessage.innerText = message
+                }
+            if(key === 'form_info') {
+                formControl.classList.remove('hidden')
+            }
+        }
+    }
+}
+
+export function cleanErrorsForm(form = null) {
+    const formBase = (form) ? form : document.body
+    const inputsErrors = formBase.querySelectorAll('.invalid-control')
+    inputsErrors.forEach(input => {
+        input.classList.remove('invalid-control')
+        const errorMessage: HTMLElement|null = input.querySelector('.error-message')
+        if (errorMessage) {
+            errorMessage.innerText = ''
+        }
+    })
+}