From cf80e6325528142064d49bbaf9d8f15fb5f62c5d Mon Sep 17 00:00:00 2001
From: Antonio Andre <antonioandre1008@gmail.com>
Date: Wed, 29 Apr 2026 23:11:32 -0500
Subject: [PATCH] feat: implementa feedback de carregamento ao enviar form em
 criar conta

---
 app/pages/(auth)/criar-conta/index.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/pages/(auth)/criar-conta/index.vue b/app/pages/(auth)/criar-conta/index.vue
index 750230f..f6a9320 100644
--- a/app/pages/(auth)/criar-conta/index.vue
+++ b/app/pages/(auth)/criar-conta/index.vue
@@ -42,8 +42,8 @@
               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]"
+              <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" />
@@ -55,17 +55,18 @@
               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]"
+              <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>
 
-          <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 type="submit" :disabled="isLoading"
+            class="mt-1 inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-70">
+            <Icon v-if="isLoading" name="mdi:loading" class="animate-spin text-base" />
+            <span v-else>Criar Conta</span>
           </button>
         </Form>
       </section>
@@ -79,6 +80,8 @@ import { z } from 'zod'
 
 const { $toast } = useNuxtApp()
 
+const isLoading = ref(false)
+
 const toStr = (val) => (val == null ? '' : val)
 
 const schema = toTypedSchema(
@@ -89,6 +92,7 @@ const schema = toTypedSchema(
 )
 
 async function criarConta({ email, password }) {
+  isLoading.value = true
   try {
     const res = await fetch('/auth/register', {
       method: 'POST',
@@ -105,6 +109,8 @@ async function criarConta({ email, password }) {
     $toast.success('Conta criada com sucesso!')
   } catch {
     $toast.error('Erro ao criar conta. Tente novamente.')
+  } finally {
+    isLoading.value = false
   }
 }
 </script>