-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add client-side validation to login (#1438)
Fixes #139, at least in the sense that the infrastructure is now set-up. However, some other forms still need to be endowed with validation.
- Loading branch information
1 parent
3ccf264
commit d60eb62
Showing
7 changed files
with
184 additions
and
87 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,28 @@ | ||
| import { z } from 'zod' | ||
| import { SignupInput } from './graphql' | ||
| import { SignupInputSchema as InternalSignupInputSchema } from './validation.internal' | ||
| import { LoginInput, SignupInput } from './graphql' | ||
| import { | ||
| LoginInputSchema as InternalLoginInputSchema, | ||
| SignupInputSchema as InternalSignupInputSchema, | ||
| } from './validation.internal' | ||
|
|
||
| type Properties<T> = Required<{ | ||
| [K in keyof T]: z.ZodType<T[K], any, T[K]> | ||
| }> | ||
|
|
||
| const passwordSchema = z | ||
| .string() | ||
| .min(8, { message: 'The password must be at least 8 characters long' }) | ||
|
|
||
| export function SignupInputSchema(): z.ZodObject<Properties<SignupInput>> { | ||
| return InternalSignupInputSchema().extend({ | ||
| email: z.string().email(), | ||
| password: z | ||
| .string() | ||
| .min(8, { message: 'The password must be at least 8 characters long' }), | ||
| password: passwordSchema, | ||
| }) | ||
| } | ||
|
|
||
| export function LoginInputSchema(): z.ZodObject<Properties<LoginInput>> { | ||
| return InternalLoginInputSchema().extend({ | ||
| email: z.string().email(), | ||
| password: passwordSchema, | ||
| }) | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { toFormValidator } from '@vee-validate/zod' | ||
| import { SubmissionContext, useField, useForm } from 'vee-validate' | ||
| import { Ref } from 'vue' | ||
| import * as zod from 'zod' | ||
|
|
||
| type MaybeRef<T> = Ref<T> | T | ||
|
|
||
| // I had to reimpliment this interface as it is not exported by vee-validate | ||
| interface FieldOptions<TValue = unknown> { | ||
| initialValue?: MaybeRef<TValue> | ||
| validateOnValueUpdate: boolean | ||
| validateOnMount?: boolean | ||
| bails?: boolean | ||
| type?: string | ||
| valueProp?: MaybeRef<TValue> | ||
| checkedValue?: MaybeRef<TValue> | ||
| uncheckedValue?: MaybeRef<TValue> | ||
| label?: MaybeRef<string | undefined> | ||
| standalone?: boolean | ||
| } | ||
|
|
||
| // I had to reimpliment this interface as it is not exported by vee-validate | ||
| interface FormOptions<TValues extends Record<string, any>> { | ||
| initialValues?: MaybeRef<TValues> | ||
| initialErrors?: Record<keyof TValues, string | undefined> | ||
| initialTouched?: Record<keyof TValues, boolean> | ||
| validateOnMount?: boolean | ||
| } | ||
|
|
||
| // Essentially taken from https://github.com/logaretm/vee-validate/issues/3375#issuecomment-909407701 | ||
| // Only change: useField doesn't return a reactive | ||
| export function useZodForm< | ||
| Schema extends zod.ZodObject<any>, | ||
| Values extends zod.infer<Schema> | ||
| >(schema: Schema, options: Omit<FormOptions<Values>, 'validationSchema'> = {}) { | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment | ||
| const validationSchema = toFormValidator(schema) | ||
| const form = useForm<Values>({ | ||
| ...options, | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment | ||
| validationSchema, | ||
| }) | ||
| return { | ||
| ...form, | ||
| useField: <Field extends keyof Values, FieldType extends Values[Field]>( | ||
| field: Field, | ||
| opts?: FieldOptions<FieldType> | ||
| ) => useField<FieldType>(field as string, undefined, opts), | ||
| handleSubmit: ( | ||
| cb: (values: Values, ctx: SubmissionContext<Values>) => unknown | ||
| ) => form.handleSubmit(cb), | ||
| } | ||
| } |
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