[DSAAS-11] feat(LoadingButton): Cria componente de botão que controla o estado de loading de requisição

src/app/_components/loadingButton/LoadingButton.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { forwardRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+import clsx from "clsx";
+import LoadingButtonProps from "./LoadingButtonProps";
+
+const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+    ({ text, textLoading, loading = false, className, disabled, ...props }, ref) => {
+        return (
+            <Button
+                ref={ref}
+                disabled={loading || disabled}
+                aria-busy={loading}
+                aria-live="polite"
+                className={clsx(
+                    "flex items-center justify-center gap-2 w-full my-3 cursor-pointer",
+                    className
+                )}
+                {...props}
+            >
+                {loading && <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />}
+                <span>
+                    {loading ? textLoading : text}
+                </span>
+            </Button>
+        );
+    }
+);
+
+LoadingButton.displayName = "LoadingButton";
+
+export default LoadingButton;

src/app/_components/loadingButton/LoadingButtonProps.ts

@@ -0,0 +1,7 @@
+import { Button } from "@/components/ui/button";
+
+export default interface LoadingButtonProps extends React.ComponentProps<typeof Button> {
+    text: string;
+    textLoading: string;
+    loading?: boolean;
+}

src/components/login-form.tsx

@@ -2,167 +2,113 @@
 
 import Image from "next/image";
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
-import { UsuarioFormSchema } from "@/app/(protected)/(administrativo)/_schemas/GUsuarioSchema"
+import { GUsuarioSchema } from "@/app/(protected)/(administrativo)/_schemas/GUsuarioSchema"
 import z from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import GUsuarioLoginService from "@/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioLogin"
 import { useForm } from "react-hook-form"
+import { useState } from "react"
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage
 } from "./ui/form"
+import LoadingButton from "@/app/_components/loadingButton/LoadingButton";
+import { Button } from "./ui/button";
 
-type FormValues = z.infer<typeof UsuarioFormSchema>
+type FormValues = z.infer<typeof GUsuarioSchema>
 
-export function LoginForm({
+export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
-  className,
+
-  ...props
+  const [loading, setLoading] = useState(false);
-}: React.ComponentProps<"div">) {
 
   const form = useForm<FormValues>({
-    resolver: zodResolver(UsuarioFormSchema),
+    resolver: zodResolver(GUsuarioSchema),
     defaultValues: {
       login: '',
       senha_api: ''
     },
   });
 
-  async function onSubmit(values: FormValues) {
+  // onSubmit agora recebe o evento do form através do handleSubmit
-    const data = await GUsuarioLoginService(values);
+  const onSubmit = async (values: FormValues) => {
+    setLoading(true);
+    try {
+      await GUsuarioLoginService(values);
+      // aqui você pode redirecionar ou mostrar mensagem de sucesso
+    } catch (error) {
+      console.error("Erro ao fazer login:", error);
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
-
     <div className={cn("flex flex-col gap-6", className)} {...props}>
-
       <Card className="overflow-hidden p-0">
-
         <CardContent className="grid p-0 md:grid-cols-2">
-
           <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="p-6 md:p-8 gap-3 flex flex-col">
 
-            <form onSubmit={form.handleSubmit(onSubmit)} className="p-6 md:p-8 gap-3">
+              <div className="flex flex-col items-center text-center mb-6">
-
+                <h1 className="text-2xl font-bold">Bem vindo de volta!</h1>
-              <div className="flex flex-col gap-6">
+                <p className="text-muted-foreground text-balance">
-
+                  Entre na sua conta Orius Tecnologia.
-                <div className="flex flex-col items-center text-center">
+                </p>
-
-                  <h1 className="text-2xl font-bold">
-
-                    Bem vindo de volta!
-
-                  </h1>
-
-                  <p className="text-muted-foreground text-balance">
-
-                    Entre na sua conta Orius Tecnologia.
-
-                  </p>
-
-                </div>
-
-                <div className="grid gap-3">
-
-                  <FormField
-                    control={form.control}
-                    name="login"
-                    render={({ field }) => (
-
-                      <FormItem>
-                        <FormLabel>
-                          Login
-                        </FormLabel>
-                        <FormControl>
-                          <Input type="text" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-
-                    )}
-                  />
-
-                </div>
-
-                <div className="grid gap-3">
-
-                  <FormField
-                    control={form.control}
-                    name="senha_api"
-                    render={({ field }) => (
-
-                      <FormItem>
-                        <FormLabel>
-                          Senha
-                        </FormLabel>
-                        <FormControl>
-                          <Input type="password" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-
-                    )}
-                  />
-
-                </div>
-
               </div>
 
-              <Button type="submit" className="w-full my-3">
+              <FormField
-                Entrar
+                control={form.control}
-              </Button>
+                name="login"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Login</FormLabel>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-              <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
+              <FormField
+                control={form.control}
+                name="senha_api"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Senha</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
+              {/* Botão de loading */}
+              <LoadingButton text="Entrar" textLoading="Aguarde..." type="submit" loading={loading} />
+
+              <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t my-4">
                 <span className="bg-card text-muted-foreground relative z-10 px-2">
-
                   Ou entre em contato
-
                 </span>
-
               </div>
 
               <div className="grid grid-cols-2 gap-4">
-
                 <Button variant="outline" type="button" className="w-full">
-
+                  Chamar no Whatsapp
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-smartphone-icon lucide-smartphone">
-                    <rect width="14" height="20" x="5" y="2" rx="2" ry="2" /><path d="M12 18h.01" />
-                  </svg>
-
-                  <span className="sr-only">
-
-                    Chamar no Whatsapp
-
-                  </span>
-
                 </Button>
-
                 <Button variant="outline" type="button" className="w-full">
-
+                  Chamar no Local
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-map-pin-icon lucide-map-pin">
-                    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />
-                  </svg>
-
-                  <span className="sr-only">
-
-                    Chamar no Whatsapp
-
-                  </span>
-
                 </Button>
-
               </div>
 
             </form>
-
           </Form>
 
           <div className="bg-brand relative hidden md:flex items-center justify-center">
@@ -174,18 +120,12 @@ export function LoginForm({
               className="object-contain dark:brightness-[0.2] dark:grayscale"
             />
           </div>
-
         </CardContent>
-
       </Card>
 
-      <div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
+      <div className="text-muted-foreground text-center text-xs">
-
+        Ao clicar você concorda com <a href="#">Nossos termos de serviços</a> e <a href="#">Políticas de Privacidade</a>.
-        Ao clicar você concordar com <a href="#">Nossos termos de serviços</a>{" "}e <a href="#">Políticas de Privacidade</a>.
-
       </div>
-
     </div>
-
   )
 }