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

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

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