Files
lara-bermite/resources/js/pages/Auth/ForgotPassword.tsx
2023-12-25 14:25:05 +01:00

46 lines
1.5 KiB
TypeScript

import React, {FormEvent, SyntheticEvent, useState} from "react"
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 {
cleanErrors()
await axiosGet('/sanctum/csrf-cookie')
const res = await axiosPost('/api/forgot', {email})
setMessage(true)
} catch (e) {
errorCatch(e)
}
}
return <div>
<form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
<h1 className="text-center">Mot de passe oublié</h1>
{message && <p className="bg-green-600">Un email vous a é envoyé pour modifier le mot de passe.</p>}
{errorLabel()}
<Field type="email"
name="email"
placeholder="Email"
value={email}
onChange={event => setEmail(event.target.value)}
autoFocus>Email</Field>
<button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
</form>
</div>
}
export default ForgotPassword