feat(user-update-form): display field errors in user update form ✨

components/auth/verify-otp-form.tsx

@@ -1,17 +1,18 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
-import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
+import { signIn } from "next-auth/react";
 import { useTransition } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
 const OTPSchema = z.object({
 	pin: z.string().min(6, {
 		message: "Your one-time password must be 6 characters.",
@@ -59,7 +60,7 @@ export default function VerifyOTPForm({
 	return (
 		<form
 			onSubmit={handleSubmit(onSubmit)}
-			className="w-full max-w-xs title-bg border rounded-lg shadow my-4"
+			className="w-full max-w-xs title-bg border-2 border-sarLinkOrange/50 rounded-lg shadow my-4"
 		>
 			<div className="grid pb-4 pt-4 gap-4 px-4">
 				<div className="flex flex-col gap-4">

components/user/user-update-form.tsx

@@ -6,15 +6,6 @@ import { type UpdateUserFormState, updateUser } from "@/actions/user-actions";
 import { Button } from "@/components/ui/button";
 import { FloatingLabelInput } from "@/components/ui/floating-label";
 import type { UserProfile } from "@/lib/types/user";
-// import {
-//   Select,
-//   SelectContent,
-//   SelectGroup,
-//   SelectItem,
-//   SelectLabel,
-//   SelectTrigger,
-//   SelectValue,
-// } from "@/components/ui/select";
 
 export default function UserUpdateForm({ user }: { user: UserProfile }) {
 	const initialState: UpdateUserFormState = {
@@ -59,6 +50,21 @@ export default function UserUpdateForm({ user }: { user: UserProfile }) {
 					Update User Information
 				</h4>
 				<div className="border border-dashed border-sarLinkOrange p-4 rounded-lg  max-w-2xl">
+					<div>
+						{state.fieldErrors && Object.keys(state.fieldErrors).length > 0 ? (
+							<div className="text-red-500 mb-5 border border-red-500 p-2 rounded">
+								{Object.entries(state.fieldErrors).map(([field, errors]) => (
+									<div key={field}>
+										{errors.map((error, index) => (
+											<p key={`${index + 1}`}>
+												Error in {field}: {error}
+											</p>
+										))}
+									</div>
+								))}
+							</div>
+						) : null}
+					</div>
 					<fieldset
 						disabled={isPending}
 						className="space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-4"