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

feat: adiciona validacao de formulario na criacao de conta

Browse Source
This commit is contained in:
Antonio Andre
2026-04-29 22:38:59 -05:00
parent 3e688c1d0f
commit 1acde7202e
1 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,56 +35,66 @@
</h2> </h2>
</div> </div>
<Form :validation-schema="schema" @submit="criarConta" class="grid gap-5">
<div class="grid gap-2"> <div class="grid gap-2">
<label class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]" for="email"> <label class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]"
for="email">
Email Email
</label> </label>
<input v-model="formData.email" <Field name="email" v-slot="{ field, meta }">
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]" <input v-bind="field"
type="text" id="email" name="email" /> 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>
<div class="grid gap-2"> <div class="grid gap-2">
<label class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]" for="senha"> <label class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]"
for="senha">
Senha Senha
</label> </label>
<input v-model="formData.password" <Field name="password" v-slot="{ field, meta }">
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]" <input v-bind="field"
type="password" id="senha" name="senha" /> 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> </div>
<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]" 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 Criar Conta
</button> </button>
</Form>
</section> </section>
</main> </main>
</div> </div>
</template> </template>
<script setup> <script setup>
const formData = reactive({ import { toTypedSchema } from '@vee-validate/zod'
email: '', import { z } from 'zod'
password: ''
})
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 { try {
; (
await fetch('/auth/register', { await fetch('/auth/register', {
method: 'POST', method: 'POST',
headers: { headers: { 'Content-Type': 'application/json' },
'Content-Type': 'application/json' body: JSON.stringify({ email, password }),
},
body: JSON.stringify({
email: formData.email,
password: formData.password
}) })
})
)()
} catch (error) { } 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> </script>