Romain/lara-bermite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add form errors

Browse Source
This commit is contained in:
Romulus21
2023-09-17 10:01:31 +02:00
parent 1e39c1b79f
commit 9b7a11dbd0
7 changed files with 87 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/css/app.css
View File

@@ -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;
}

3
resources/js/components/Field.tsx
View File

@@ -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>
}

14
resources/js/hooks/AxiosTools.tsx
View File

@@ -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,7 +14,11 @@ const useAxiosTools = () => {
const axiosDelete = axios.delete
const errorCatch = (error: any) => {
setError(error.response.data.message || error.message)
if (error.response && error.response.status === 422) {
displayFormErrors(error)
} else {
setError(error.response.data.message || error.message)
}
}
const errorLabel = () => {
@@ -21,7 +26,12 @@ const useAxiosTools = () => {
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

13
resources/js/pages/Auth/ForgotPassword.tsx
View File

@@ -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')
const res = await axios.post('/api/forgot', {email})
cleanErrors()
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"

10
resources/js/pages/Auth/Login.tsx
View File

@@ -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')
const res = await axios.post('/api/login', {email, password})
cleanErrors()
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"

13
resources/js/pages/Auth/Reset.tsx
View File

@@ -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')
const res = await axios.post('/api/reset', {email, token, password, samePassword})
cleanErrors()
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"

41
resources/js/utilities/form.ts Normal file
View File

@@ -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 = ''
}
})
}