refactor(auth): modularize login hook and remove duplicate schema

src/hooks/use-form-action.ts

@@ -13,7 +13,7 @@ interface UseFormActionOptions<TFieldValues extends FieldValues, TData> {
 }
 
 interface UseFormActionReturn<TFieldValues extends FieldValues> {
-    form: UseFormReturn<TFieldValues, any>; // Add 'any' context parameter to align return types
+    form: UseFormReturn<TFieldValues, any>;
     onSubmit: (data: TFieldValues) => void;
 }
 

src/hooks/use-log-in.ts → src/modules/auth/auth.hooks.ts

@@ -2,8 +2,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { actions } from "astro:actions";
 import { navigate } from "astro:transitions/client";
-import { type LoginInput, loginSchema } from "@/schema/login";
 import { useAction } from "@/hooks/use-action";
+import { LoginInput, loginSchema } from "./auth.schema";
 
 export default function useLogIn() {
   const form = useForm<LoginInput>({
@@ -15,7 +15,7 @@ export default function useLogIn() {
   });
 
   // Setup the action runner using your custom hook
-  const { execute } = useAction(
+  const { execute, isLoading } = useAction(
     async (data: LoginInput) => {
       const result = await actions.login(data);
 
@@ -45,5 +45,5 @@ export default function useLogIn() {
     execute(data);
   };
 
-  return { form, onSubmit };
+  return { form, onSubmit, isLoading };
 }

src/modules/auth/components/login.tsx

@@ -1,13 +1,13 @@
+import { FormInput } from "@/components/ui/form-input";
 import { logInFields } from "@/config/login-fields";
+import { Spinner } from "@/components/ui/spinner";
 import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
-import { FormInput } from "@/components/ui/form-input";
-import useLogIn from "@/hooks/use-log-in";
-import { Spinner } from "@/components/ui/spinner";
+import useLogIn from "../auth.hooks";
 
 export function LogInForm() {
-    const { form, isPending, onSubmit } = useLogIn();
+    const { form, isLoading, onSubmit } = useLogIn();
 
     return (
         <Form {...form}>
@@ -22,11 +22,11 @@ export function LogInForm() {
                         label={field.label}
                         placeholder={field.placeholder}
                         type={field.type}
-                        disabled={isPending}
+                        disabled={isLoading}
                     />
                 ))}
-                <Button type="submit" className="w-full font-bold" disabled={isPending}>
-                    {isPending ? <Spinner /> : "Log in"}
+                <Button type="submit" className="w-full font-bold" disabled={isLoading}>
+                    {isLoading ? <Spinner /> : "Log in"}
                 </Button>
             </form>
         </Form>