From 1acde7202e655bcec140c83c15bd64aea20ce4ac Mon Sep 17 00:00:00 2001
From: Antonio Andre <antonioandre1008@gmail.com>
Date: Wed, 29 Apr 2026 22:38:59 -0500
Subject: [PATCH] feat: adiciona validacao de formulario na criacao de conta

---
 app/pages/(auth)/criar-conta/index.vue | 88 ++++++++++++++------------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/app/pages/(auth)/criar-conta/index.vue b/app/pages/(auth)/criar-conta/index.vue
index bc989af..c40afd8 100644
--- a/app/pages/(auth)/criar-conta/index.vue
+++ b/app/pages/(auth)/criar-conta/index.vue
@@ -35,56 +35,66 @@
           </h2>
         </div>
 
-        <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>
-          <input v-model="formData.email"
-            class="h-11 w-full rounded-lg border border-[#d6d3d1] bg-white px-4 py-3 text-base leading-6 tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09]"
-            type="text" id="email" name="email" />
-        </div>
+        <Form :validation-schema="schema" @submit="criarConta" 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>
+            <Field name="email" v-slot="{ field, meta }">
+              <input v-bind="field"
+                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]"
+                :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>
-          <input v-model="formData.password"
-            class="h-11 w-full rounded-lg border border-[#d6d3d1] bg-white px-4 py-3 text-base leading-6 tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09]"
-            type="password" id="senha" name="senha" />
-        </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>
+            <Field name="password" v-slot="{ field, meta }">
+              <input v-bind="field"
+                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]"
+                :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>
 
-        <button
-          class="mt-1 h-10 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09]"
-          @click="criarConta">
-          Criar Conta
-        </button>
+          <button type="submit"
+            class="mt-1 h-10 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09]">
+            Criar Conta
+          </button>
+        </Form>
       </section>
     </main>
   </div>
 </template>
 
 <script setup>
-const formData = reactive({
-  email: '',
-  password: ''
-})
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
 
-async function criarConta() {
+const toStr = (val) => (val == null ? '' : val)
+
+const schema = toTypedSchema(
+  z.object({
+    email: z.preprocess(toStr, z.string().min(1, 'Email é obrigatório').pipe(z.email('Email inválido'))),
+    password: z.preprocess(toStr, z.string().min(8, 'A senha deve ter no mínimo 8 caracteres')),
+  }),
+)
+
+async function criarConta({ email, password }) {
   try {
-    ; (
-      await fetch('/auth/register', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          email: formData.email,
-          password: formData.password
-        })
-      })
-    )()
+    await fetch('/auth/register', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    })
   } catch (error) {
-    window.alert('Ocorreu um erro ao criar a conta. Tente novamente mais tarde.', error.statusText)
+    window.alert('Ocorreu um erro ao criar a conta. Tente novamente mais tarde.')
   }
 }
 </script>