add validation for login and sign up pages

Author: DystoriaX

src/components/auth/Login.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useForm } from "@mantine/form";
+import { useForm, zodResolver } from "@mantine/form";
 import {
   Button,
   Group,
@@ -8,11 +8,14 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
+import { z } from "zod";
 
-export type LoginFields = {
-  email: string;
-  password: string;
-};
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(6),
+});
+
+export type LoginFields = z.infer<typeof schema>;
 
 type Props = {
   onSubmit: (f: LoginFields) => void;
@@ -26,12 +29,14 @@ const Login = (props: Props) => {
       email: "",
       password: "",
     },
+
+    validate: zodResolver(schema),
   });
 
   return (
     <Stack m="md" w="50%">
       <Title order={1}>Welcome,</Title>
-      <form onSubmit={() => onSubmit(form.values)}>
+      <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
         <TextInput
           withAsterisk
           label="Email"

src/components/auth/Signup.tsx

@@ -7,15 +7,28 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import { useForm } from "@mantine/form";
+import { useForm, zodResolver } from "@mantine/form";
+import { z } from "zod";
 
-export type SignupFields = {
-  name: string;
-  committee: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-};
+const schema = z
+  .object({
+    name: z.string().nonempty({ message: "Required" }),
+    committee: z.string().nonempty({ message: "Required" }),
+    email: z.string().email().nonempty({ message: "Required" }),
+    password: z.string().min(6),
+    confirmPassword: z.string().nonempty({ message: "Required" }),
+  })
+  .superRefine(({ confirmPassword, password }, ctx) => {
+    if (confirmPassword !== password) {
+      ctx.addIssue({
+        code: "custom",
+        message: "Password did not match",
+        path: ["confirmPassword"],
+      });
+    }
+  });
+
+export type SignupFields = z.infer<typeof schema>;
 
 type Props = {
   onSubmit: (f: SignupFields) => void;
@@ -32,12 +45,14 @@ const Signup = (props: Props) => {
       password: "",
       confirmPassword: "",
     },
+
+    validate: zodResolver(schema),
   });
 
   return (
     <Stack m="md" w="50%">
       <Title order={1}>Welcome,</Title>
-      <form onSubmit={() => onSubmit(form.values)}>
+      <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
         <TextInput
           withAsterisk
           label="Name"