Add validation form

apps/nextjs/package.json

@@ -16,6 +16,7 @@
     "@acme/api": "^0.1.0",
     "@acme/auth": "^0.1.0",
     "@acme/db": "^0.1.0",
+    "@hookform/resolvers": "^3.1.1",
     "@sentry/nextjs": "^7.54.0",
     "@t3-oss/env-nextjs": "^0.3.1",
     "@tanstack/react-query": "^4.29.5",
@@ -27,6 +28,7 @@
     "next-auth": "^4.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.1",
     "react-otp-input": "^3.0.2",
     "superjson": "1.9.1",
     "zod": "^3.21.4"

apps/nextjs/src/pages/login.tsx

@@ -1,7 +1,28 @@
 import { type NextPage } from "next";
 import Image from "next/image";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, type SubmitHandler } from "react-hook-form";
+import { z } from "zod";
+
+const phoneRegex = new RegExp(
+  /^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)])?([-]?[\s]?[0-9])+$/,
+);
+const formSchema = z.object({
+  phoneNumber: z.string().regex(phoneRegex, "Invalid Number!"),
+});
+type FormSchemaType = z.infer<typeof formSchema>;
 
 const Login: NextPage = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormSchemaType>({
+    resolver: zodResolver(formSchema),
+  });
+  const onSubmit: SubmitHandler<FormSchemaType> = (data) => {
+    console.log(data);
+  };
   return (
     <div className="m-auto flex h-screen w-screen max-w-7xl flex-wrap justify-center gap-5 p-5">
       <div className="flex flex-col  justify-center ">
@@ -26,17 +47,27 @@ const Login: NextPage = () => {
       <form
         action="submit"
         className="mt-4 flex flex-col items-start justify-center gap-2"
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        onSubmit={handleSubmit(onSubmit)}
       >
-        <label htmlFor="" className="text-base">
+        <label htmlFor="phoneNumber" className="text-base">
           Enter your phone number
         </label>
         <input
+          {...register("phoneNumber")}
+          id="phoneNumber"
           type="text"
           className="h-[50px] w-[321px] rounded-md border-[0.5px] border-solid border-[#14224A]"
         />
+        {errors.phoneNumber && (
+          <span className="mt-2 block text-red-800">
+            {errors.phoneNumber.message}
+          </span>
+        )}
         <button
           type="submit"
           className="mt-11 h-[50px] w-[321px] rounded-md border-none bg-[#14224A] text-[18px] font-bold text-white"
+          disabled={isSubmitting}
         >
           submit
         </button>