antonioandre/nuxt-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implementa feedback de carregamento ao enviar form em criar conta

Browse Source
This commit is contained in:
Antonio Andre
2026-04-29 23:11:32 -05:00
parent b6f7d5e8a0
commit cf80e63255
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/pages/(auth)/criar-conta/index.vue
View File

@@ -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>