Update

Author: HiImLawtSimp1e

Diff for: nextjs-training-frontend/src/actions/auth-actions.ts

@@ -4,10 +4,7 @@ import { hashUserPassword } from "@/lib/hash";
 import { redirect } from "next/navigation";
 
 interface FormState {
-  errors: {
-    email: string;
-    password: string;
-  };
+  errors: string[];
 }
 
 interface AuthFormData {
@@ -28,22 +25,22 @@ export const signup = async (prevState: FormState, formData: FormData) => {
   const email = formData.get("email") as string;
   const password = formData.get("password") as string;
 
-  let errors: { email: string; password: string } = { email: "", password: "" };
+  let errors: string[] = [];
 
   if (!email.includes("@")) {
-    errors.email = "Please enter a valid email address.";
+    errors.push("Please enter a valid email address.");
   }
 
   if (password.trim().length < 8) {
-    errors.password = "Password must be at least 8 characters long.";
+    errors.push("Password must be at least 8 characters long.");
   }
 
   const isUserExist = await checkUserExists(email);
   if (isUserExist) {
-    errors.email = "It's seem like an account already exist";
+    errors.push("It's seem like an account already exist.");
   }
 
-  if (errors.email || errors.password) {
+  if (errors.length > 0) {
     return { errors };
   }
 

Diff for: nextjs-training-frontend/src/components/auth-form.tsx

@@ -5,14 +5,11 @@ import { useCustomActionState } from "@/lib/custom";
 import Link from "next/link";
 
 interface FormState {
-  errors: {
-    email: string;
-    password: string;
-  };
+  errors: string[];
 }
 
 const AuthForm: React.FC = () => {
-  const initialState: FormState = { errors: { email: "", password: "" } };
+  const initialState: FormState = { errors: [] };
   const [formState, formAction] = useCustomActionState<FormState>(
     signup,
     initialState
@@ -36,14 +33,11 @@ const AuthForm: React.FC = () => {
         <label htmlFor="password">Password</label>
         <input type="password" name="password" id="password" />
       </p>
-      {formState.errors && (
+      {formState.errors.length > 0 && (
         <ul id="form-errors">
-          {Object.entries(formState.errors).map(([key, value]) => {
-            if (typeof value === "string" && value) {
-              return <li key={key}>{value}</li>;
-            }
-            return null;
-          })}
+          {formState.errors.map((error, index) => (
+            <li key={index}>{error}</li>
+          ))}
         </ul>
       )}
       <p>