Skip to content

Commit 74a8df5

Browse files
LasimLasim
committed
refactor(frontend): simplify validation schema definitions using Zod
1 parent 078887f commit 74a8df5

File tree

6 files changed

+105
-157
lines changed

6 files changed

+105
-157
lines changed

‎package-lock.json‎

Lines changed: 37 additions & 76 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎services/frontend/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
"dependencies": {
1717
"@tailwindcss/vite": "^4.1.18",
1818
"@tanstack/vue-table": "^8.21.3",
19-
"@vee-validate/zod": "^4.15.1",
2019
"@vueuse/core": "^14.2.1",
2120
"class-variance-authority": "^0.7.1",
2221
"clsx": "^2.1.1",
@@ -29,7 +28,7 @@
2928
"reka-ui": "^2.8.0",
3029
"tailwind-merge": "^3.4.1",
3130
"tailwindcss-animate": "^1.0.7",
32-
"vee-validate": "^4.15.1",
31+
"vee-validate": "5.0.0-beta.0",
3332
"vue": "^3.5.28",
3433
"vue-echarts": "^8.0.1",
3534
"vue-router": "^5.0.2",

‎services/frontend/src/views/ForgotPassword.vue‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { useForm } from 'vee-validate'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import * as z from 'zod'
54
import { ref } from 'vue'
65
import { useRouter } from 'vue-router'
@@ -30,14 +29,12 @@ const isLoading = ref(false)
3029
const { t } = useI18n()
3130
3231
// Define validation schema using Zod
33-
const formSchema = toTypedSchema(
34-
z.object({
35-
email: z
36-
.string()
37-
.min(1, { message: t('validation.required') })
38-
.email({ message: t('validation.email') }),
39-
})
40-
)
32+
const formSchema = z.object({
33+
email: z
34+
.string()
35+
.min(1, { message: t('validation.required') })
36+
.email({ message: t('validation.email') }),
37+
})
4138
4239
const form = useForm({
4340
validationSchema: formSchema,

‎services/frontend/src/views/Login.vue‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { useForm } from 'vee-validate'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import * as z from 'zod'
54
import { ref, onMounted } from 'vue'
65
import { useRouter, useRoute } from 'vue-router'
@@ -58,19 +57,17 @@ const isValidReturnTo = (url: string): boolean => {
5857
}
5958
6059
// Define validation schema using Zod
61-
const formSchema = toTypedSchema(
62-
z.object({
63-
login: z
64-
.string()
65-
.min(1, { message: t('validation.required', { field: t('login.form.email.label') }) })
66-
.email({ message: t('validation.email') }),
67-
password: z
68-
.string()
69-
.min(6, {
70-
message: t('validation.minLength', { field: t('login.form.password.label'), length: 6 }),
71-
}),
72-
})
73-
)
60+
const formSchema = z.object({
61+
login: z
62+
.string()
63+
.min(1, { message: t('validation.required', { field: t('login.form.email.label') }) })
64+
.email({ message: t('validation.email') }),
65+
password: z
66+
.string()
67+
.min(6, {
68+
message: t('validation.minLength', { field: t('login.form.password.label'), length: 6 }),
69+
}),
70+
})
7471
7572
const form = useForm({
7673
validationSchema: formSchema,

‎services/frontend/src/views/Register.vue‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { useForm } from 'vee-validate'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import * as z from 'zod'
54
import { ref, onMounted } from 'vue'
65
import { useRouter } from 'vue-router'
@@ -36,49 +35,47 @@ const { t } = useI18n()
3635
const apiUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
3736
3837
// Define validation schema using Zod
39-
const formSchema = toTypedSchema(
40-
z
41-
.object({
42-
name: z
43-
.string()
44-
.min(3, {
45-
message: t('validation.minLength', { field: t('register.form.name.label'), length: 3 }),
46-
})
47-
.max(30, {
48-
message: t('validation.maxLength', { field: t('register.form.name.label'), length: 30 }),
49-
})
50-
.regex(/^[a-zA-Z0-9_.-]+$/, {
51-
message: 'Username can only contain letters, numbers, underscores, dots, and hyphens (no spaces)',
52-
}),
53-
email: z
54-
.string()
55-
.min(1, { message: t('validation.required', { field: t('register.form.email.label') }) })
56-
.email({ message: t('validation.email') }),
57-
password: z
58-
.string()
59-
.min(8, {
60-
message: t('validation.minLength', {
61-
field: t('register.form.password.label'),
62-
length: 8,
63-
}),
64-
})
65-
.max(100, {
66-
message: t('validation.maxLength', {
67-
field: t('register.form.password.label'),
68-
length: 100,
69-
}),
38+
const formSchema = z
39+
.object({
40+
name: z
41+
.string()
42+
.min(3, {
43+
message: t('validation.minLength', { field: t('register.form.name.label'), length: 3 }),
44+
})
45+
.max(30, {
46+
message: t('validation.maxLength', { field: t('register.form.name.label'), length: 30 }),
47+
})
48+
.regex(/^[a-zA-Z0-9_.-]+$/, {
49+
message: 'Username can only contain letters, numbers, underscores, dots, and hyphens (no spaces)',
50+
}),
51+
email: z
52+
.string()
53+
.min(1, { message: t('validation.required', { field: t('register.form.email.label') }) })
54+
.email({ message: t('validation.email') }),
55+
password: z
56+
.string()
57+
.min(8, {
58+
message: t('validation.minLength', {
59+
field: t('register.form.password.label'),
60+
length: 8,
7061
}),
71-
confirmPassword: z
72-
.string()
73-
.min(1, {
74-
message: t('validation.required', { field: t('register.form.confirmPassword.label') }),
62+
})
63+
.max(100, {
64+
message: t('validation.maxLength', {
65+
field: t('register.form.password.label'),
66+
length: 100,
7567
}),
76-
})
77-
.refine((data) => data.password === data.confirmPassword, {
78-
message: t('validation.passwordMatch'),
79-
path: ['confirmPassword'],
80-
})
81-
)
68+
}),
69+
confirmPassword: z
70+
.string()
71+
.min(1, {
72+
message: t('validation.required', { field: t('register.form.confirmPassword.label') }),
73+
}),
74+
})
75+
.refine((data) => data.password === data.confirmPassword, {
76+
message: t('validation.passwordMatch'),
77+
path: ['confirmPassword'],
78+
})
8279
8380
const form = useForm({
8481
validationSchema: formSchema,

‎services/frontend/src/views/ResetPassword.vue‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { useForm } from 'vee-validate'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import * as z from 'zod'
54
import { ref, onMounted } from 'vue'
65
import { useRouter, useRoute } from 'vue-router'
@@ -32,19 +31,17 @@ const token = ref('')
3231
const { t } = useI18n()
3332
3433
// Define validation schema using Zod
35-
const formSchema = toTypedSchema(
36-
z.object({
37-
password: z
38-
.string()
39-
.min(8, { message: t('validation.minLength', { length: 8 }) }),
40-
confirmPassword: z
41-
.string()
42-
.min(1, { message: t('validation.required') }),
43-
}).refine((data) => data.password === data.confirmPassword, {
44-
message: t('validation.passwordMatch'),
45-
path: ['confirmPassword'],
46-
})
47-
)
34+
const formSchema = z.object({
35+
password: z
36+
.string()
37+
.min(8, { message: t('validation.minLength', { length: 8 }) }),
38+
confirmPassword: z
39+
.string()
40+
.min(1, { message: t('validation.required') }),
41+
}).refine((data) => data.password === data.confirmPassword, {
42+
message: t('validation.passwordMatch'),
43+
path: ['confirmPassword'],
44+
})
4845
4946
const form = useForm({
5047
validationSchema: formSchema,

0 commit comments

Comments
 (0)