first commit

resources/js/pages/Auth/ForgotPassword.tsx

@@ -0,0 +1,45 @@
+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 été 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

resources/js/pages/Auth/Login.tsx

@@ -0,0 +1,56 @@
+import React, {FormEvent, SyntheticEvent, useState} from "react"
+import axios from "axios";
+import {Link, useNavigate} from "react-router-dom";
+import useAxiosTools from "../../hooks/AxiosTools";
+import Field from "../../components/Field";
+import useAuthUser from "../../hooks/AuthUser";
+import Card from "../../components/Card";
+
+const Login = () => {
+
+    const navigate = useNavigate()
+    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 {
+            cleanErrors()
+            await axiosGet('/sanctum/csrf-cookie')
+            const res = await axiosPost('/api/login', {email, password})
+            setAuthUser(res.data)
+            navigate('/')
+        } catch (e) {
+            errorCatch(e)
+        }
+    }
+
+    return <div>
+        <Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
+            <form onSubmit={handleSubmit}>
+                <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"
+                       placeholder="Email"
+                       value={email}
+                       onChange={event => setEmail(event.target.value)}
+                       autoFocus>Email</Field>
+                <Field type="password"
+                       name="password"
+                       placeholder="******"
+                       value={password}
+                       onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
+                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+                <Link to="/mot-de-passe-oubliee" className="mt-2 inline-block">Mot de passe oublié ?</Link>
+            </form>
+        </Card>
+    </div>
+}
+
+export default Login

resources/js/pages/Auth/Profile.tsx

@@ -0,0 +1,77 @@
+import React, {FormEvent, useState} from "react"
+import useAuthUser from "../../hooks/AuthUser"
+import Field from "../../components/Field";
+import useAxiosTools from "../../hooks/AxiosTools";
+import PageLayout from "../../components/PageLayout";
+import Card from "../../components/Card";
+
+const Profile = () => {
+
+    const {authUser, setAuthUser, logout} = useAuthUser()
+    const [latitude, setLatitude] = useState(0)
+    const [longitude, setLongitude] = useState(0)
+    const {errorCatch, axiosPost} = useAxiosTools()
+
+    const submitLocation = async (event: FormEvent) => {
+        event.preventDefault()
+
+        try {
+            const res = await axiosPost(`/api/locations`, {latitude, longitude})
+            setAuthUser(res.data)
+        } catch (e) {
+            errorCatch(e)
+        }
+    }
+
+    return <PageLayout>
+        <div className="m-1 my-5 flex justify-between">
+            <h1 className="text-lg font-bold">Profile de l&apos;utilisateur</h1>
+            <div>
+                <button type="button" onClick={logout} className="btn-primary text-lg font-bold">Se déconnecter</button>
+            </div>
+        </div>
+        <Card className="mb-5">
+            <div>Nom : <strong>{authUser?.name}</strong></div>
+            <div>Email : <strong>{authUser?.email}</strong></div>
+        </Card>
+        {/*<div>Update name & email</div>*/}
+        {/*<div>Change password</div>*/}
+        {/*<div>Delete Account</div>*/}
+        <Card>
+            <h2>Météo</h2>
+
+            {authUser?.locations && authUser.locations.length > 0 ? <>
+                <h3>Emplacements</h3>
+                <ul>
+                    {authUser?.locations.map(location => <li key={location.id}>{location.latitude} - {location.longitude}</li>)}
+                </ul>
+            </> : <form onSubmit={submitLocation}>
+                <h3>Ajouter un emplacement</h3>
+                <div className="flex gap-2">
+                    <Field name="latitude"
+                           type="number"
+                           step="0.0001"
+                           value={latitude}
+                           className="h-10"
+                           onChange={event => setLatitude(Number(event.target.value))}>
+                        Latitude
+                    </Field>
+                    <Field name="longitude"
+                           type="number"
+                           step="0.0001"
+                           value={longitude}
+                           className="h-10"
+                           onChange={event => setLongitude(Number(event.target.value))}>
+                        Longitude
+                    </Field>
+                    <div className="self-end">
+                        <button type="submit" className="btn-primary w-24 h-10">Valider</button>
+                    </div>
+                </div>
+            </form>}
+
+        </Card>
+    </PageLayout>
+}
+
+export default Profile

resources/js/pages/Auth/Register.tsx

@@ -0,0 +1,58 @@
+import React, {ChangeEvent, FormEvent, SyntheticEvent, useState} from "react"
+import Field from "../../components/Field";
+import axios from "axios";
+import {useNavigate} from "react-router-dom";
+import Card from "../../components/Card";
+import useAuthUser from "../../hooks/AuthUser";
+
+const Register = () => {
+
+    const navigate = useNavigate()
+    const {setAuthUser} = useAuthUser()
+    const [name, setName] = useState('')
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+
+    const handleSubmit = async (event: FormEvent) => {
+        event.preventDefault()
+        try {
+            await axios.get('/sanctum/csrf-cookie')
+            const res = await axios.post('/api/register', {name, email, password})
+            setAuthUser(res.data)
+            navigate('/')
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    return <div>
+        <Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
+            <form onSubmit={handleSubmit}>
+                <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
+                    S'inscrire
+                </h1>
+
+                <Field placeholder="Nom"
+                       name="name"
+                       value={name}
+                       onChange={event => setName(event.target.value)}
+                       autoFocus>Nom</Field>
+                <Field type="email"
+                       name="email"
+                       placeholder="Email"
+                       value={email}
+                       onChange={event => setEmail(event.target.value)}
+                       autoFocus>Email</Field>
+                <Field type="password"
+                       name="password"
+                       placeholder="******"
+                       value={password}
+                       onChange={event => setPassword(event.target.value)}
+                       autoFocus>Mot de passe</Field>
+                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+            </form>
+        </Card>
+    </div>
+}
+
+export default Register

resources/js/pages/Auth/Reset.tsx

@@ -0,0 +1,58 @@
+import Field from "../../components/Field";
+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 = () => {
+
+    let {token} = useParams()
+    const navigate = useNavigate()
+    const {setAuthUser} = useAuthUser()
+    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 {
+            cleanErrors()
+            await axiosGet('/sanctum/csrf-cookie')
+            const res = await axiosPost('/api/reset', {email, token, password, samePassword})
+            setAuthUser(res.data.user)
+            navigate('/connexion')
+        } catch (e) {
+            errorCatch(e)
+        }
+    }
+
+    return <div>
+        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
+            <h1 className="text-center">Modifier voter mot de passe</h1>
+
+            {errorLabel()}
+
+            <Field type="email"
+                   name="email"
+                   placeholder="Email"
+                   value={email}
+                   onChange={event => setEmail(event.target.value)}
+                   autoFocus>Email</Field>
+            <Field type="password"
+                   name="password"
+                   placeholder="******"
+                   value={password}
+                   onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
+            <Field type="password"
+                   name="same_password"
+                   placeholder="******"
+                   value={samePassword}
+                   onChange={event => setSamePassword(event.target.value)}>Confirmation du mot de passe</Field>
+            <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+        </form>
+    </div>
+}
+
+export default Reset