-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(vee-validate): add i18n to zod schemas, refactor: forms and layout
- Loading branch information
Showing
43 changed files
with
724 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,21 @@ | ||
| <script setup lang="ts"> | ||
| import { UiButton, UiInput } from '@/shared/ui' | ||
| import { z } from '@/shared/libs/vee-validate' | ||
| import { | ||
| UiButton, | ||
| UiFormField, | ||
| UiFormLabel, | ||
| UiFormMessage, | ||
| UiInput, | ||
| } from '@/shared/ui' | ||
| import { toTypedSchema } from '@vee-validate/zod' | ||
| import { createReusableTemplate } from '@vueuse/core' | ||
| import { useField, useForm } from 'vee-validate' | ||
| import { toast } from 'vue-sonner' | ||
| import { z } from 'zod' | ||
| const validationSchema = toTypedSchema( | ||
| z.object({ | ||
| email: z | ||
| .string({ required_error: 'Email is a required field' }) | ||
| .nonempty('Email is a required field') | ||
| .email('Email must be a valid'), | ||
| password: z | ||
| .string({ required_error: 'Password is a required field' }) | ||
| .nonempty('Password is a required field') | ||
| .min(8, 'Password must be at least 8 characters'), | ||
| email: z.string().min(1).email(), | ||
| password: z.string().min(8), | ||
| }), | ||
| ) | ||
|
|
@@ -28,42 +29,41 @@ const onLogin = handleSubmit((values) => { | |
| // on login event | ||
| toast.warning('Jenda in dev mode and temporarily unavailable') | ||
| }) | ||
| const [DefineTemplate, ReuseTemplate] = createReusableTemplate() | ||
| </script> | ||
|
|
||
| <template> | ||
| <DefineTemplate v-slot="{ $slots, field, error }"> | ||
| <UiFormField v-auto-animate> | ||
| <UiFormLabel | ||
| :for="field" | ||
| > | ||
| {{ $t(`authentication.form.${field}`) }} | ||
| </UiFormLabel> | ||
| <component :is="$slots.default" /> | ||
| <UiFormMessage v-if="error" :content="error" /> | ||
| </UiFormField> | ||
| </DefineTemplate> | ||
| <form @submit.prevent="onLogin"> | ||
| <div class="grid gap-6"> | ||
| <div class="grid gap-4"> | ||
| <div v-auto-animate class="form-field"> | ||
| <label | ||
| class="form-label" | ||
| for="email" | ||
| > | ||
| {{ $t('authentication.form.email') }} | ||
| </label> | ||
| <UiInput id="email" v-model="email" placeholder="[email protected]" type="email" /> | ||
| <span | ||
| v-if="errors.email" | ||
| class="text-xs text-red-500 !fw500" | ||
| > | ||
| {{ errors.email }} | ||
| </span> | ||
| </div> | ||
| <div v-auto-animate class="form-field"> | ||
| <label | ||
| class="form-label" | ||
| for="password" | ||
| > | ||
| {{ $t('authentication.form.password') }} | ||
| </label> | ||
| <UiInput id="password" v-model="password" placeholder="user_password_example" type="password" /> | ||
| <span | ||
| v-if="errors.password" | ||
| class="text-xs text-red-500 !fw500" | ||
| > | ||
| {{ errors.password }} | ||
| </span> | ||
| </div> | ||
| <ReuseTemplate field="email" :error="errors.email"> | ||
| <UiInput | ||
| id="email" | ||
| v-model="email" | ||
| placeholder="[email protected]" | ||
| type="email" | ||
| /> | ||
| </ReuseTemplate> | ||
| <ReuseTemplate field="password" :error="errors.password"> | ||
| <UiInput | ||
| id="password" | ||
| v-model="password" | ||
| placeholder="user_password_example" | ||
| type="password" | ||
| /> | ||
| </ReuseTemplate> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <UiButton type="submit"> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,22 @@ | ||
| <script setup lang="ts"> | ||
| import { UiButton, UiInput } from '@/shared/ui' | ||
| import { z } from '@/shared/libs/vee-validate' | ||
| import { | ||
| UiButton, | ||
| UiFormField, | ||
| UiFormLabel, | ||
| UiFormMessage, | ||
| UiInput, | ||
| } from '@/shared/ui' | ||
| import { toTypedSchema } from '@vee-validate/zod' | ||
| import { createReusableTemplate } from '@vueuse/core' | ||
| import { useField, useForm } from 'vee-validate' | ||
| import { useRouter } from 'vue-router/auto' | ||
| import { z } from 'zod' | ||
| import { toast } from 'vue-sonner' | ||
| const validationSchema = toTypedSchema( | ||
| z.object({ | ||
| email: z | ||
| .string({ required_error: 'Email is a required field' }) | ||
| .nonempty('Email is a required field') | ||
| .email('Email must be a valid'), | ||
| password: z | ||
| .string({ required_error: 'Password is a required field' }) | ||
| .nonempty('Password is a required field') | ||
| .min(8, 'Password must be at least 8 characters'), | ||
| email: z.string().min(1).email(), | ||
| password: z.string().min(8), | ||
| }), | ||
| ) | ||
|
|
@@ -27,45 +29,45 @@ const { value: password } = useField<string>('password') | |
| const router = useRouter() | ||
| const onRegistration = handleSubmit((values) => { | ||
| toast.warning('Jenda in dev mode and temporarily unavailable') | ||
| // on registration event | ||
| router.push({ name: 'confirm' }) | ||
| }) | ||
| const [DefineTemplate, ReuseTemplate] = createReusableTemplate() | ||
| </script> | ||
|
|
||
| <template> | ||
| <DefineTemplate v-slot="{ $slots, field, error }"> | ||
| <UiFormField v-auto-animate> | ||
| <UiFormLabel | ||
| :for="field" | ||
| > | ||
| {{ $t(`authentication.form.${field}`) }} | ||
| </UiFormLabel> | ||
| <component :is="$slots.default" /> | ||
| <UiFormMessage v-if="error" :content="error" /> | ||
| </UiFormField> | ||
| </DefineTemplate> | ||
| <form @submit.prevent="onRegistration"> | ||
| <div class="grid gap-6"> | ||
| <div class="grid gap-4"> | ||
| <div v-auto-animate class="form-field"> | ||
| <label | ||
| class="form-label" | ||
| for="email" | ||
| > | ||
| {{ $t('authentication.form.email') }} | ||
| </label> | ||
| <UiInput id="email" v-model="email" placeholder="[email protected]" type="email" /> | ||
| <span | ||
| v-if="errors.email" | ||
| class="text-xs text-red-500 !fw500" | ||
| > | ||
| {{ errors.email }} | ||
| </span> | ||
| </div> | ||
| <div v-auto-animate class="form-field"> | ||
| <label | ||
| class="form-label" | ||
| for="password" | ||
| > | ||
| {{ $t('authentication.form.password') }} | ||
| </label> | ||
| <UiInput id="password" v-model="password" placeholder="user_password_example" type="password" /> | ||
| <span | ||
| v-if="errors.password" | ||
| class="text-xs text-red-500 !fw500" | ||
| > | ||
| {{ errors.password }} | ||
| </span> | ||
| </div> | ||
| <ReuseTemplate field="email" :error="errors.email"> | ||
| <UiInput | ||
| id="email" | ||
| v-model="email" | ||
| placeholder="[email protected]" | ||
| type="email" | ||
| /> | ||
| </ReuseTemplate> | ||
| <ReuseTemplate field="password" :error="errors.password"> | ||
| <UiInput | ||
| id="password" | ||
| v-model="password" | ||
| placeholder="user_password_example" | ||
| type="password" | ||
| /> | ||
| </ReuseTemplate> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <UiButton type="submit"> | ||
|
|
@@ -74,7 +76,7 @@ const onRegistration = handleSubmit((values) => { | |
| <p class="text-sm text-center select-none text-neutral-500 dark:text-neutral-300"> | ||
| {{ $t('authentication.registration.proposal') }} | ||
| <span | ||
| class="cursor-pointer underline underline-offset-4 duration-100 ease-in hover:text-neutral-900 dark:hover:text-neutral-400" | ||
| class="form-text-underline" | ||
| @click="router.push({ name: 'sign-in' })" | ||
| > | ||
| {{ $t('authentication.registration.route') }} | ||
|
|
||
Oops, something went wrong.