Skip to content

Commit f9df765

Browse files
committed
PEER-231 Add verbose form validation messages
Signed-off-by: SeeuSim <[email protected]>
1 parent b7e1b45 commit f9df765

File tree

6 files changed

+122
-24
lines changed

6 files changed

+122
-24
lines changed

frontend/src/lib/forms/errors.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const getEmptyFieldErrorMessage = (fieldName: string) => {
2+
return `${fieldName} must not be empty`;
3+
};
4+
5+
export const getFieldMinLengthErrorMessage = (fieldName: string, length: number) => {
6+
return `${fieldName} must contain at least ${length} character(s)`;
7+
};
8+
9+
export const getFieldMaxLengthErrorMessage = (fieldName: string, length: number) => {
10+
return `${fieldName} must contain at most ${length} character(s)`;
11+
};

frontend/src/lib/forms/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './errors';

frontend/src/routes/forgot-password/logic.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { zodResolver } from '@hookform/resolvers/zod';
22
import { useForm } from 'react-hook-form';
33
import { z } from 'zod';
44

5+
import { getEmptyFieldErrorMessage } from '@/lib/forms';
6+
57
export const forgotPasswordSchema = z.object({
6-
email: z.string().email(),
8+
email: z.string().email().min(1, getEmptyFieldErrorMessage('Email')),
79
});
810

911
export type IForgotPasswordSchema = z.infer<typeof forgotPasswordSchema>;

frontend/src/routes/login/logic.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
22
import { z } from 'zod';
33
import { useForm } from 'react-hook-form';
44

5+
import { getEmptyFieldErrorMessage } from '@/lib/forms';
6+
57
export const loginFormSchema = z.object({
6-
username: z.string().min(1),
7-
password: z.string().min(1),
8+
username: z.string().min(1, getEmptyFieldErrorMessage('Username')),
9+
password: z.string().min(1, getEmptyFieldErrorMessage('Password')),
810
});
911

1012
type ILoginFormSchema = z.infer<typeof loginFormSchema>;

frontend/src/routes/signup/logic.ts

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
1+
import {
2+
getEmptyFieldErrorMessage,
3+
getFieldMaxLengthErrorMessage,
4+
getFieldMinLengthErrorMessage,
5+
} from '@/lib/forms';
16
import { zodResolver } from '@hookform/resolvers/zod';
27
import { useForm } from 'react-hook-form';
38
import { z } from 'zod';
49

510
export const signUpSchema = z
611
.object({
7-
email: z.string().email(),
8-
username: z.string().min(2).max(50),
9-
firstName: z.string().min(2).max(50),
10-
lastName: z.string().min(2).max(50),
11-
password: z.string().min(8),
12-
confirmPassword: z.string().min(8),
12+
email: z.string().email().min(1, getEmptyFieldErrorMessage('Email')),
13+
username: z
14+
.string()
15+
.min(2, getFieldMinLengthErrorMessage('Username', 2))
16+
.max(50, getFieldMaxLengthErrorMessage('Username', 50)),
17+
firstName: z
18+
.string()
19+
.min(2, getFieldMinLengthErrorMessage('First Name', 2))
20+
.max(50, getFieldMaxLengthErrorMessage('First Name', 50)),
21+
lastName: z
22+
.string()
23+
.min(2, getFieldMinLengthErrorMessage('Last Name', 2))
24+
.max(50, getFieldMaxLengthErrorMessage('Last Name', 50)),
25+
password: z.string().min(8, getFieldMinLengthErrorMessage('Password', 8)),
26+
confirmPassword: z.string().min(8, getFieldMinLengthErrorMessage('Password', 8)),
1327
})
1428
.superRefine(({ password, confirmPassword }, ctx) => {
1529
if (confirmPassword !== password) {

package-lock.json

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

0 commit comments

Comments
 (0)