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 Email
</label> </label>
<Field name="email" v-slot="{ field, meta }"> <Field name="email" v-slot="{ field, meta }">
<input v-bind="field" <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]" 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> </Field>
<ErrorMessage name="email" class="text-xs text-red-500" /> <ErrorMessage name="email" class="text-xs text-red-500" />
@@ -55,17 +55,18 @@
Senha Senha
</label> </label>
<Field name="password" v-slot="{ field, meta }"> <Field name="password" v-slot="{ field, meta }">
<input v-bind="field" <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]" 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]'" type="password"
id="senha" /> id="senha" />
</Field> </Field>
<ErrorMessage name="password" class="text-xs text-red-500" /> <ErrorMessage name="password" class="text-xs text-red-500" />
</div> </div>
<button type="submit" <button type="submit" :disabled="isLoading"
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]"> 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">
Criar Conta <Icon v-if="isLoading" name="mdi:loading" class="animate-spin text-base" />
<span v-else>Criar Conta</span>
</button> </button>
</Form> </Form>
</section> </section>
@@ -79,6 +80,8 @@ import { z } from 'zod'
const { $toast } = useNuxtApp() const { $toast } = useNuxtApp()
const isLoading = ref(false)
const toStr = (val) => (val == null ? '' : val) const toStr = (val) => (val == null ? '' : val)
const schema = toTypedSchema( const schema = toTypedSchema(
@@ -89,6 +92,7 @@ const schema = toTypedSchema(
) )
async function criarConta({ email, password }) { async function criarConta({ email, password }) {
isLoading.value = true
try { try {
const res = await fetch('/auth/register', { const res = await fetch('/auth/register', {
method: 'POST', method: 'POST',
@@ -105,6 +109,8 @@ async function criarConta({ email, password }) {
$toast.success('Conta criada com sucesso!') $toast.success('Conta criada com sucesso!')
} catch { } catch {
$toast.error('Erro ao criar conta. Tente novamente.') $toast.error('Erro ao criar conta. Tente novamente.')
} finally {
isLoading.value = false
} }
} }
</script> </script>