feat: enhance LoginForm component with FormControl and FormMessage for improved validation feedback

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>
               )}
             />