diff --git a/src/components/RegisterUserForm.tsx b/src/components/RegisterUserForm.tsx index f5cdd58..a8ecf26 100644 --- a/src/components/RegisterUserForm.tsx +++ b/src/components/RegisterUserForm.tsx @@ -1,5 +1,7 @@ import sendRegisterUserRequest from '@/requests/sendRegisterUserRequest'; -import CreateUserValidationSchema from '@/services/User/schema/CreateUserValidationSchema'; +import CreateUserValidationSchema, { + CreateUserValidationSchemaWithUsernameAndEmailCheck, +} from '@/services/User/schema/CreateUserValidationSchema'; import { zodResolver } from '@hookform/resolvers/zod'; import { useRouter } from 'next/router'; import { FC, useState } from 'react'; @@ -18,7 +20,7 @@ const RegisterUserForm: FC = () => { const router = useRouter(); const { reset, register, handleSubmit, formState } = useForm< z.infer - >({ resolver: zodResolver(CreateUserValidationSchema) }); + >({ resolver: zodResolver(CreateUserValidationSchemaWithUsernameAndEmailCheck) }); const { errors } = formState; const [serverResponseError, setServerResponseError] = useState(''); diff --git a/src/config/nextConnect/middleware/validateRequest.ts b/src/config/nextConnect/middleware/validateRequest.ts index 37f5bfd..a3db126 100644 --- a/src/config/nextConnect/middleware/validateRequest.ts +++ b/src/config/nextConnect/middleware/validateRequest.ts @@ -3,6 +3,11 @@ import { NextApiRequest, NextApiResponse } from 'next'; import { NextHandler } from 'next-connect'; import { z } from 'zod'; +interface ValidateRequestArgs { + bodySchema?: z.ZodSchema; + querySchema?: z.ZodSchema; +} + /** * Middleware to validate the request body and/or query against a zod schema. * @@ -18,15 +23,8 @@ import { z } from 'zod'; * @param args.querySchema The query schema to validate against. * @throws ServerError with status code 400 if the request body or query is invalid. */ -const validateRequest = - ({ - bodySchema, - querySchema, - }: { - bodySchema?: z.ZodSchema; - querySchema?: z.ZodSchema; - }) => - async (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => { +const validateRequest = ({ bodySchema, querySchema }: ValidateRequestArgs) => { + return (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => { if (bodySchema) { const parsed = bodySchema.safeParse(JSON.parse(JSON.stringify(req.body))); if (!parsed.success) { @@ -42,8 +40,8 @@ const validateRequest = } req.query = parsed.data; } - return next(); }; +}; export default validateRequest; diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx index 0a925da..0a68738 100644 --- a/src/pages/account/index.tsx +++ b/src/pages/account/index.tsx @@ -26,11 +26,11 @@ const AccountInfo: FC<{ >({ resolver: zodResolver(GetUserSchema), defaultValues: { - username: 'test', - email: 'test@example.com', - firstName: 'test', - lastName: 'icle', - dateOfBirth: new Date(), + username: user.username, + email: user.email, + firstName: user.firstName, + lastName: user.lastName, + dateOfBirth: user.dateOfBirth, }, }); diff --git a/src/pages/api/users/check-email.ts b/src/pages/api/users/check-email.ts new file mode 100644 index 0000000..d122d1e --- /dev/null +++ b/src/pages/api/users/check-email.ts @@ -0,0 +1,43 @@ +import NextConnectOptions from '@/config/nextConnect/NextConnectOptions'; + +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { NextApiRequest, NextApiResponse } from 'next'; +import { createRouter } from 'next-connect'; +import { z } from 'zod'; +import validateRequest from '@/config/nextConnect/middleware/validateRequest'; +import findUserByEmail from '@/services/User/findUserByEmail'; + +const CheckEmailRequestQuerySchema = z.object({ + email: z.string(), +}); + +interface CheckEmailRequestSchema extends NextApiRequest { + query: z.infer; +} + +const router = createRouter< + CheckEmailRequestSchema, + NextApiResponse> +>(); + +const checkEmail = async (req: NextApiRequest, res: NextApiResponse) => { + const { email: emailToCheck } = req.query; + + const email = await findUserByEmail(emailToCheck as string); + + res.json({ + success: true, + payload: { emailIsTaken: !!email }, + statusCode: 200, + message: 'Getting username availability.', + }); +}; + +router.get( + validateRequest({ querySchema: z.object({ email: z.string().email() }) }), + checkEmail, +); + +const handler = router.handler(NextConnectOptions); + +export default handler; diff --git a/src/pages/api/users/check-username.ts b/src/pages/api/users/check-username.ts new file mode 100644 index 0000000..ebf4f60 --- /dev/null +++ b/src/pages/api/users/check-username.ts @@ -0,0 +1,43 @@ +import NextConnectOptions from '@/config/nextConnect/NextConnectOptions'; + +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { NextApiRequest, NextApiResponse } from 'next'; +import { createRouter } from 'next-connect'; +import { z } from 'zod'; +import validateRequest from '@/config/nextConnect/middleware/validateRequest'; +import findUserByUsername from '@/services/User/findUserByUsername'; + +const CheckUsernameRequestQuerySchema = z.object({ + username: z.string(), +}); + +interface CheckUsernameRequestSchema extends NextApiRequest { + query: z.infer; +} + +const router = createRouter< + CheckUsernameRequestSchema, + NextApiResponse> +>(); + +const checkUsername = async (req: NextApiRequest, res: NextApiResponse) => { + const { username: usernameToCheck } = req.query; + + const user = await findUserByUsername(usernameToCheck as string); + + res.json({ + success: true, + payload: { usernameIsTaken: !!user }, + statusCode: 200, + message: 'Getting username availability.', + }); +}; + +router.get( + validateRequest({ querySchema: z.object({ username: z.string() }) }), + checkUsername, +); + +const handler = router.handler(NextConnectOptions); + +export default handler; diff --git a/src/prisma/seed/create/createNewUsers.ts b/src/prisma/seed/create/createNewUsers.ts index aa55174..a8a6c54 100644 --- a/src/prisma/seed/create/createNewUsers.ts +++ b/src/prisma/seed/create/createNewUsers.ts @@ -53,7 +53,16 @@ const createNewUsers = async ({ numberOfUsers }: CreateNewUsersArgs) => { const dateOfBirth = faker.date.birthdate({ mode: 'age', min: 19 }); const createdAt = faker.date.past(1); - const user = { firstName, lastName, email, username, dateOfBirth, createdAt, hash }; + const user = { + firstName, + lastName, + email, + username, + dateOfBirth, + createdAt, + hash, + accountIsVerified: true, + }; data.push(user); } diff --git a/src/requests/valdiateEmail.ts b/src/requests/valdiateEmail.ts new file mode 100644 index 0000000..b10f0a7 --- /dev/null +++ b/src/requests/valdiateEmail.ts @@ -0,0 +1,25 @@ +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { z } from 'zod'; + +const validateEmail = async (email: string) => { + const response = await fetch(`/api/users/check-email?email=${email}`); + const json = await response.json(); + + const parsed = APIResponseValidationSchema.safeParse(json); + + if (!parsed.success) { + return false; + } + + const parsedPayload = z + .object({ usernameIsTaken: z.boolean() }) + .safeParse(parsed.data.payload); + + if (!parsedPayload.success) { + return false; + } + + return !parsedPayload.data.usernameIsTaken; +}; + +export default validateEmail; diff --git a/src/requests/validateUsername.ts b/src/requests/validateUsername.ts new file mode 100644 index 0000000..264c010 --- /dev/null +++ b/src/requests/validateUsername.ts @@ -0,0 +1,25 @@ +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { z } from 'zod'; + +const validateUsername = async (username: string) => { + const response = await fetch(`/api/users/check-username?username=${username}`); + const json = await response.json(); + + const parsed = APIResponseValidationSchema.safeParse(json); + + if (!parsed.success) { + return false; + } + + const parsedPayload = z + .object({ usernameIsTaken: z.boolean() }) + .safeParse(parsed.data.payload); + + if (!parsedPayload.success) { + return false; + } + + return !parsedPayload.data.usernameIsTaken; +}; + +export default validateUsername; diff --git a/src/services/User/schema/CreateUserValidationSchema.ts b/src/services/User/schema/CreateUserValidationSchema.ts index 850f815..feffe4a 100644 --- a/src/services/User/schema/CreateUserValidationSchema.ts +++ b/src/services/User/schema/CreateUserValidationSchema.ts @@ -1,53 +1,75 @@ +import validateEmail from '@/requests/valdiateEmail'; +import validateUsername from '@/requests/validateUsername'; import sub from 'date-fns/sub'; import { z } from 'zod'; const minimumDateOfBirth = sub(new Date(), { years: 19 }); -const CreateUserValidationSchema = z - .object({ - email: z.string().email({ message: 'Email must be a valid email address.' }), - // use special characters, numbers, and uppercase letters - password: z +const CreateUserValidationSchema = z.object({ + // use special characters, numbers, and uppercase letters + password: z + .string() + .min(8, { message: 'Password must be at least 8 characters.' }) + .refine((password) => /[A-Z]/.test(password), { + message: 'Password must contain at least one uppercase letter.', + }) + .refine((password) => /[0-9]/.test(password), { + message: 'Password must contain at least one number.', + }) + .refine((password) => /[^a-zA-Z0-9]/.test(password), { + message: 'Password must contain at least one special character.', + }), + confirmPassword: z.string(), + firstName: z + .string() + .min(1, { message: 'First name must not be empty.' }) + .max(20, { message: 'First name must be less than 20 characters.' }) + .refine((firstName) => /^[a-zA-Z]+$/.test(firstName), { + message: 'First name must only contain letters.', + }), + lastName: z + .string() + .min(1, { message: 'Last name must not be empty.' }) + .max(20, { message: 'Last name must be less than 20 characters.' }) + .refine((lastName) => /^[a-zA-Z]+$/.test(lastName), { + message: 'Last name must only contain letters.', + }), + dateOfBirth: z.string().refine( + (dateOfBirth) => { + const parsedDateOfBirth = new Date(dateOfBirth); + return parsedDateOfBirth <= minimumDateOfBirth; + }, + { message: 'You must be at least 19 years old to register.' }, + ), +}); + +export default CreateUserValidationSchema.extend({ + username: z + .string() + .min(1, { message: 'Username must not be empty.' }) + .max(20, { message: 'Username must be less than 20 characters.' }), + + email: z.string().email({ message: 'Email must be a valid email address.' }), +}).refine((data) => data.password === data.confirmPassword, { + message: 'Passwords do not match.', + path: ['confirmPassword'], +}); + +export const CreateUserValidationSchemaWithUsernameAndEmailCheck = + CreateUserValidationSchema.extend({ + email: z .string() - .min(8, { message: 'Password must be at least 8 characters.' }) - .refine((password) => /[A-Z]/.test(password), { - message: 'Password must contain at least one uppercase letter.', - }) - .refine((password) => /[0-9]/.test(password), { - message: 'Password must contain at least one number.', - }) - .refine((password) => /[^a-zA-Z0-9]/.test(password), { - message: 'Password must contain at least one special character.', - }), - confirmPassword: z.string(), - firstName: z - .string() - .min(1, { message: 'First name must not be empty.' }) - .max(20, { message: 'First name must be less than 20 characters.' }) - .refine((firstName) => /^[a-zA-Z]+$/.test(firstName), { - message: 'First name must only contain letters.', - }), - lastName: z - .string() - .min(1, { message: 'Last name must not be empty.' }) - .max(20, { message: 'Last name must be less than 20 characters.' }) - .refine((lastName) => /^[a-zA-Z]+$/.test(lastName), { - message: 'Last name must only contain letters.', + .email({ message: 'Email must be a valid email address.' }) + .refine(async (email) => validateEmail(email), { + message: 'Email is already taken.', }), username: z .string() .min(1, { message: 'Username must not be empty.' }) - .max(20, { message: 'Username must be less than 20 characters.' }), - dateOfBirth: z.string().refine( - (dateOfBirth) => { - const parsedDateOfBirth = new Date(dateOfBirth); - return parsedDateOfBirth <= minimumDateOfBirth; - }, - { message: 'You must be at least 19 years old to register.' }, - ), - }) - .refine((data) => data.password === data.confirmPassword, { + .max(20, { message: 'Username must be less than 20 characters.' }) + .refine(async (username) => validateUsername(username), { + message: 'Username is already taken.', + }), + }).refine((data) => data.password === data.confirmPassword, { message: 'Passwords do not match.', path: ['confirmPassword'], }); - -export default CreateUserValidationSchema;