From 35f32578e398f84e8930ca893ebd09675d4e53ec Mon Sep 17 00:00:00 2001
From: Antonio Andre <antonioandre1008@gmail.com>
Date: Mon, 4 May 2026 18:14:41 -0500
Subject: [PATCH] refac: cria middleware guest e melhora logica de login

---
 app/middleware/guest.ts          |  12 +++
 app/pages/(auth)/login/index.vue | 129 ++++++++++++++++---------------
 2 files changed, 77 insertions(+), 64 deletions(-)
 create mode 100644 app/middleware/guest.ts

diff --git a/app/middleware/guest.ts b/app/middleware/guest.ts
new file mode 100644
index 0000000..7a12bc1
--- /dev/null
+++ b/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')
+  }
+})
diff --git a/app/pages/(auth)/login/index.vue b/app/pages/(auth)/login/index.vue
index 772805b..6552fb6 100644
--- a/app/pages/(auth)/login/index.vue
+++ b/app/pages/(auth)/login/index.vue
@@ -1,23 +1,22 @@
 <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
-            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"
+        <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"
             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"
             aria-labelledby="create-account-title">
             <section class="relative pt-2 md:py-8">
                 <p
-                class="m-0 inline-flex rounded-full bg-[rgba(200,184,224,0.5)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
-                Login
+                    class="m-0 inline-flex rounded-full bg-[rgba(200,184,224,0.5)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
+                    Login
                 </p>
                 <h1 id="create-account-title"
-                class="my-5 max-w-[640px] font-serif text-[40px] font-light leading-[1.05] tracking-[-1.2px] text-[#0c0a09] md:text-[64px] md:tracking-[-1.92px]">
-                Faça seu login
+                    class="my-5 max-w-[640px] font-serif text-[40px] font-light leading-[1.05] tracking-[-1.2px] text-[#0c0a09] md:text-[64px] md:tracking-[-1.92px]">
+                    Faça seu login
                 </h1>
                 <p class="m-0 max-w-[520px] text-base font-normal leading-6 tracking-[0.16px] text-[#4e4e4e]">
-                Faça seu login com email e senha.
+                    Faça seu login com email e senha.
                 </p>
             </section>
 
@@ -25,39 +24,42 @@
                 class="grid gap-5 rounded-2xl border border-[#e7e5e4] bg-white p-6 shadow-[0_4px_16px_rgba(0,0,0,0.04)] md:p-8"
                 aria-label="Formulario de criacao de conta">
                 <div class="mb-1">
-                <span
-                    class="inline-flex min-h-6 items-center rounded-full bg-[rgba(200,184,224,0.5)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
-                    Login
-                </span>
-                <h2 class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09]">
-                    Dados de entrada
-                </h2>
+                    <span
+                        class="inline-flex min-h-6 items-center rounded-full bg-[rgba(200,184,224,0.5)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
+                        Login
+                    </span>
+                    <h2 class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09]">
+                        Dados de entrada
+                    </h2>
                 </div>
 
                 <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]"
-                        for="email">
-                        Email
+                        <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" />
+                            <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" />
                         </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]"
-                        for="senha">
-                        Senha
+                        <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"
-                            id="senha" />
+                            <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" id="senha" />
                         </Field>
                         <ErrorMessage name="password" class="text-xs text-red-500" />
                     </div>
@@ -74,51 +76,50 @@
 </template>
 
 <script setup>
-    import { toTypedSchema } from '@vee-validate/zod'
-    import { z } from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
 
-    const { $toast } = useNuxtApp()
+definePageMeta({ middleware: 'guest' })
 
-    const isLoading = ref(false)
+const { $toast } = useNuxtApp()
 
-    const toStr = (val) => (val == null ? '' : val)
+const token = useCookie('token', {
+    secure: true,
+    sameSite: 'lax',
+    maxAge: 900
+})
 
-    const schema = toTypedSchema(
-        z.object({
-            email: z.preprocess(toStr, z.string().min(1, 'Email é obrigatório').email('Email inválido')),
-            password: z.preprocess(toStr, z.string().min(1, 'A senha é obrigatória')),
-        }),
-    )
+const isLoading = ref(false)
 
-    async function entrarConta({ email, password }) {
-        isLoading.value = true
-        try {
-            const res = await fetch('/auth/login', {
-                method: 'POST',
-                headers: { 
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ email, password }),
-            })
+const toStr = (val) => (val == null ? '' : String(val))
 
-            const data = await res.json()
+const schema = toTypedSchema(
+    z.object({
+        email: z.preprocess(toStr, z.string().min(1, 'Email é obrigatório').email('Email inválido')),
+        password: z.preprocess(toStr, z.string().min(1, 'A senha é obrigatória')),
+    }),
+)
 
-            if (!res.ok) {
-                const data = await res.json().catch(() => ({}))
-                $toast.error(data.message ?? 'Erro para efetuar o login. Tente novamente.')
-                return
-            }
+async function entrarConta({ email, password }) {
+    isLoading.value = true
+    try {
+        const data = await $fetch('/auth/login', {
+            method: 'POST',
+            body: { email, password },
+        })
 
-            const token = useCookie('token')
-            if(data) token.value = data.access_token
+        token.value = data.access_token
 
-            $toast.success('Login realizado com sucesso!')
+        $toast.success('Login realizado com sucesso!')
 
-            await navigateTo('/home')
-        } catch {
-            $toast.error('Erro para efetuar o login. Tente novamente.')
-        } finally {
-            isLoading.value = false
-        }
+        await navigateTo('/home')
+    } catch (error) {
+        const message = error?.data?.statusMessage
+        $toast.error(message ?? 'Erro para efetuar o login. Tente novamente.', {
+            duration: 8000,
+        })
+    } finally {
+        isLoading.value = false
     }
-</script>
\ No newline at end of file
+}
+</script>