From 3f1810289cffce3d9af3798a6c1051c0ae339d68 Mon Sep 17 00:00:00 2001
From: samyipsh <samyipsh@gmail.com>
Date: Fri, 3 Nov 2023 10:28:25 +0800
Subject: [PATCH] display zod errors on loginWithCredentials page

---
 src/components/Login.tsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 5a974b7..060b0da 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -7,21 +7,26 @@ import { useRouter } from "next/router";
 
 const email_z = z.string().email().min(1);
 const password_z = z.string().min(6);
+const createUserSchema_z = z.object({
+  email: email_z,
+  password: password_z,
+});
+type CreateUserSchemaData = z.infer<typeof createUserSchema_z>;
 
-type Props = {
+type LoginWithCredentialsProps = {
   className?: string;
   onError: (e: Error) => void;
   setIsLoading: (isLoading: boolean) => void;
 };
-const LoginWithCredentials = (props: Props) => {
+const LoginWithCredentials = (props: LoginWithCredentialsProps) => {
   const router = useRouter();
-  const createUserInput_z = z.object({
-    email: email_z,
-    password: password_z,
-  });
 
-  const { register, handleSubmit } = useForm({
-    resolver: zodResolver(createUserInput_z),
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CreateUserSchemaData>({
+    resolver: zodResolver(createUserSchema_z),
   });
 
   const handleSignIn = handleSubmit(async (formData) => {
@@ -37,8 +42,8 @@ const LoginWithCredentials = (props: Props) => {
         duration: DURATION_TO_LOAD,
       });
       return setTimeout(() => {
-        // don't reload the page for a while to show the toast
-        // reload is necessary to have ctx.session be updated
+        // Don't reload the page straightaway so that the toast can be seen.
+        // Reload is necessary to have ctx.session be updated
         void router.push("/").then(() => window.location.reload());
       }, DURATION_TO_LOAD);
     } else {
@@ -64,6 +69,11 @@ const LoginWithCredentials = (props: Props) => {
             placeholder="name@company.com"
             {...register("email")}
           />
+          {errors.email && (
+            <span className="text-sm lowercase text-red-300">
+              {errors.email.message}
+            </span>
+          )}
         </div>
         <div>
           <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
@@ -75,6 +85,11 @@ const LoginWithCredentials = (props: Props) => {
             placeholder="••••••••"
             {...register("password")}
           />
+          {errors.password && (
+            <span className="text-sm lowercase text-red-300">
+              {errors.password.message}
+            </span>
+          )}
         </div>
         <div className="py-1">
           <input