fix(principal): integra auth, agenda e laudos com a api

src/pages/AuthPages.jsx

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 
+import { authRepository } from '../repositories/authRepository.js'
+
 import { BrandLogo } from '../components/Brand.jsx'
 import loginClinicImage from '../assets/figma/login-clinic.png'
 
@@ -9,14 +11,26 @@ export function LoginPage({ navigate }) {
     password: '',
   })
   const [showPassword, setShowPassword] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
 
   function updateField(field, value) {
     setForm((current) => ({ ...current, [field]: value }))
   }
 
-  function handleSubmit(event) {
+  async function handleSubmit(event) {
     event.preventDefault()
-    navigate('/inicio')
+    setLoading(true)
+    setError('')
+
+    try {
+      await authRepository.login(form)
+      navigate('/inicio')
+    } catch (err) {
+      setError(err.message || 'Erro de autenticação')
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -74,6 +88,12 @@ export function LoginPage({ navigate }) {
               </p>
             </div>
 
+            {error && (
+              <div className="mt-4 rounded bg-red-500/10 p-3 text-sm font-semibold text-red-500 border border-red-500/20">
+                {error}
+              </div>
+            )}
+
             <form className="mt-8 grid gap-5" onSubmit={handleSubmit}>
               <LoginField htmlFor="login-email" label="E-mail">
                 <input
@@ -122,10 +142,11 @@ export function LoginPage({ navigate }) {
               </LoginField>
 
               <button
-                className="inline-flex h-11 w-full items-center justify-center rounded-[6px] border border-[#3b82f6] bg-[#3b82f6] px-4 py-2 text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2),0_4px_6px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3b82f6]"
+                className="inline-flex h-11 w-full items-center justify-center rounded-[6px] border border-[#3b82f6] bg-[#3b82f6] px-4 py-2 text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2),0_4px_6px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3b82f6] disabled:opacity-50"
+                disabled={loading}
                 type="submit"
               >
-                Entrar
+                {loading ? 'Entrando...' : 'Entrar'}
               </button>
             </form>
           </div>
@@ -204,29 +225,52 @@ export function RegisterPage({ navigate }) {
 
 export function ForgotPasswordPage({ navigate }) {
   const [sent, setSent] = useState(false)
+  const [email, setEmail] = useState('recepcao@mediconnect.com')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(event) {
+    event.preventDefault()
+    setLoading(true)
+    setError('')
+    try {
+      await authRepository.requestPasswordReset(email)
+      setSent(true)
+    } catch (err) {
+      setError(err.message || 'Erro ao comunicar com o servidor.')
+    } finally {
+      setLoading(false)
+    }
+  }
 
   return (
     <AuthLayout
-      description="Informe o e-mail cadastrado para receber um link mockado."
+      description="Informe o e-mail cadastrado para receber o link de acesso."
       title="Recuperar senha"
     >
       {sent ? (
         <div className="mt-8 rounded-[6px] border border-emerald-500/30 bg-emerald-500/10 p-4 text-sm leading-6 text-emerald-300">
-          Link de recuperação mockado enviado para o e-mail informado.
+          Link de recuperação enviado para o e-mail informado. Siga as instruções do link!
         </div>
       ) : (
         <form
           className="mt-8 grid gap-5"
-          onSubmit={(event) => {
-            event.preventDefault()
-            setSent(true)
-          }}
+          onSubmit={handleSubmit}
         >
+          {error && (
+            <div className="rounded bg-red-500/10 p-3 text-sm font-semibold text-red-500 border border-red-500/20">
+              {error}
+            </div>
+          )}
           <AuthField label="E-mail cadastrado">
-            <input autoComplete="email" className={authInputClass} defaultValue="recepcao@mediconnect.com" type="email" />
+            <input autoComplete="email" className={authInputClass} onChange={e => setEmail(e.target.value)} value={email} type="email" />
           </AuthField>
-          <button className="inline-flex h-11 w-full items-center justify-center rounded-[6px] bg-[#3b82f6] text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed]" type="submit">
-            Enviar link
+          <button 
+            className="inline-flex h-11 w-full items-center justify-center rounded-[6px] bg-[#3b82f6] text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed] disabled:opacity-50" 
+            disabled={loading}
+            type="submit"
+          >
+            {loading ? "Enviando..." : "Enviar link"}
           </button>
         </form>
       )}