From c3f1ef9b4e1d3fbd2ddf53001e0c5a3dbd70abf1 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 3 Dec 2024 18:18:55 +0800
Subject: [PATCH] feat: enhance LoginForm component with FormControl and
 FormMessage for improved validation feedback

---
 .../(main)/login/components/login-form.tsx    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/login/components/login-form.tsx b/src/app/(main)/login/components/login-form.tsx
index a907595..ded8e99 100644
--- a/src/app/(main)/login/components/login-form.tsx
+++ b/src/app/(main)/login/components/login-form.tsx
@@ -9,6 +9,14 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import logger from "@/lib/logger";
 import { useEffect } from "react";
 import { Loader2 } from "lucide-react";
@@ -19,7 +27,6 @@ import { Button } from "@/components/ui/button";
 import { ToastAction } from "@/components/ui/toast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import userGetCurrentStore from "@/app/actions/(gitea)/user/store";
-import { Form, FormField, FormItem, FormLabel } from "@/components/ui/form";
 
 const formSchema = z.object({
   username: z.string().refine(
@@ -113,7 +120,10 @@ export function LoginForm() {
               render={({ field }) => (
                 <FormItem className="grid gap-2">
                   <FormLabel>Username or Email Address</FormLabel>
-                  <Input {...field} />
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -131,7 +141,10 @@ export function LoginForm() {
                       Forgot your password?
                     </Link>
                   </div>
-                  <Input {...field} type="password" />
+                  <FormControl>
+                    <Input {...field} type="password" />
+                  </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />