refac: cria middleware guest e melhora logica de login

app/middleware/guest.ts

@@ -0,0 +1,12 @@
+/**
+ * Middleware para rotas guest.
+ * Redireciona para a página de home se o usuário estiver autenticado.
+ */
+
+export default defineNuxtRouteMiddleware(() => {
+  const token = useCookie('token')
+
+  if (token.value) {
+    return navigateTo('/home')
+  }
+})

app/pages/(auth)/login/index.vue

@@ -1,8 +1,7 @@
 <template>
     <div
         class="relative grid min-h-screen place-items-center overflow-hidden bg-[#f5f5f5] px-4 py-12 font-sans text-[#0c0a09] md:py-24">
-        <div
+        <div class="pointer-events-none absolute left-1/2 top-10 h-[420px] w-[min(92vw,760px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(167,229,211,0.62),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.56),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(200,184,224,0.5),transparent_34%)] blur-2xl"
-            class="pointer-events-none absolute left-1/2 top-10 h-[420px] w-[min(92vw,760px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(167,229,211,0.62),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.56),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(200,184,224,0.5),transparent_34%)] blur-2xl"
             aria-hidden="true"></div>
         <main
             class="relative grid w-full max-w-[1120px] grid-cols-1 items-center gap-8 md:grid-cols-[minmax(0,1fr)_minmax(340px,420px)] md:gap-16"
@@ -36,28 +35,31 @@
 
                 <Form :validation-schema="schema" @submit="entrarConta" class="grid gap-5">
                     <div class="grid gap-2">
-                        <label class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]"
+                        <label
+                            class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]"
                             for="email">
                             Email
                         </label>
                         <Field name="email" v-slot="{ field, meta }">
                             <input v-bind="field" :disabled="isLoading"
                                 class="h-11 w-full rounded-lg border bg-white px-4 py-3 text-base leading-6 tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-50"
-                            :class="meta.touched && !meta.valid ? 'border-red-400' : 'border-[#d6d3d1]'" type="email" id="email" />
+                                :class="meta.touched && !meta.valid ? 'border-red-400' : 'border-[#d6d3d1]'"
+                                type="email" id="email" />
                         </Field>
                         <ErrorMessage name="email" class="text-xs text-red-500" />
                     </div>
 
                     <div class="grid gap-2">
-                        <label class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]"
+                        <label
+                            class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]"
                             for="senha">
                             Senha
                         </label>
                         <Field name="password" v-slot="{ field, meta }">
                             <input v-bind="field" :disabled="isLoading"
                                 class="h-11 w-full rounded-lg border bg-white px-4 py-3 text-base leading-6 tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-50"
-                            :class="meta.touched && !meta.valid ? 'border-red-400' : 'border-[#d6d3d1]'" type="password"
+                                :class="meta.touched && !meta.valid ? 'border-red-400' : 'border-[#d6d3d1]'"
-                            id="senha" />
+                                type="password" id="senha" />
                         </Field>
                         <ErrorMessage name="password" class="text-xs text-red-500" />
                     </div>
@@ -77,11 +79,19 @@
 import { toTypedSchema } from '@vee-validate/zod'
 import { z } from 'zod'
 
+definePageMeta({ middleware: 'guest' })
+
 const { $toast } = useNuxtApp()
 
+const token = useCookie('token', {
+    secure: true,
+    sameSite: 'lax',
+    maxAge: 900
+})
+
 const isLoading = ref(false)
 
-    const toStr = (val) => (val == null ? '' : val)
+const toStr = (val) => (val == null ? '' : String(val))
 
 const schema = toTypedSchema(
     z.object({
@@ -93,30 +103,21 @@
 async function entrarConta({ email, password }) {
     isLoading.value = true
     try {
-            const res = await fetch('/auth/login', {
+        const data = await $fetch('/auth/login', {
             method: 'POST',
-                headers: { 
+            body: { email, password },
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ email, password }),
         })
 
-            const data = await res.json()
+        token.value = data.access_token
-
-            if (!res.ok) {
-                const data = await res.json().catch(() => ({}))
-                $toast.error(data.message ?? 'Erro para efetuar o login. Tente novamente.')
-                return
-            }
-
-            const token = useCookie('token')
-            if(data) token.value = data.access_token
 
         $toast.success('Login realizado com sucesso!')
 
         await navigateTo('/home')
-        } catch {
+    } catch (error) {
-            $toast.error('Erro para efetuar o login. Tente novamente.')
+        const message = error?.data?.statusMessage
+        $toast.error(message ?? 'Erro para efetuar o login. Tente novamente.', {
+            duration: 8000,
+        })
     } finally {
         isLoading.value = false
     }