From 957bb86be1de52c0a949f37fb2def2541127c8de Mon Sep 17 00:00:00 2001
From: keven <keven@oriustecnologia.com.br>
Date: Fri, 19 Sep 2025 17:08:35 -0300
Subject: [PATCH] =?UTF-8?q?feat(LoadingButton):=20Implementa=20parcialment?=
 =?UTF-8?q?e=20bot=C3=A3o=20de=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../loadingButton/LoadingButton.tsx           |  30 +++
 src/components/login-form.tsx                 | 177 ++++++------------
 2 files changed, 86 insertions(+), 121 deletions(-)
 create mode 100644 src/app/_components/loadingButton/LoadingButton.tsx

diff --git a/src/app/_components/loadingButton/LoadingButton.tsx b/src/app/_components/loadingButton/LoadingButton.tsx
new file mode 100644
index 0000000..051c4eb
--- /dev/null
+++ b/src/app/_components/loadingButton/LoadingButton.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+
+interface LoadingButtonProps {
+    text: string;
+    loading?: boolean; // recebe loading do form
+    type?: "button" | "submit" | "reset";
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive";
+}
+
+export default function LoadingButton({
+    text,
+    loading = false,
+    type = "button",
+    variant = "default",
+}: LoadingButtonProps) {
+    return (
+        <Button
+            type={type}
+            disabled={loading}
+            variant={variant}
+            className="flex items-center gap-2 w-full my-3 justify-center"
+        >
+            {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {loading ? "Processando..." : text}
+        </Button>
+    );
+}
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index 602127c..28d1d2b 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -2,7 +2,6 @@
 
 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 { GUsuarioSchema } from "@/app/(protected)/(administrativo)/_schemas/GUsuarioSchema"
@@ -10,22 +9,22 @@ 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 GUsuarioSchema>
 
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
+  const [loading, setLoading] = useState(false);
 
   const form = useForm<FormValues>({
     resolver: zodResolver(GUsuarioSchema),
@@ -35,134 +34,76 @@ export function LoginForm({
     },
   });
 
-  async function onSubmit(values: FormValues) {
-    const data = await GUsuarioLoginService(values);
+  // onSubmit agora recebe o evento do form através do handleSubmit
+  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 gap-6">
-
-                <div className="flex flex-col items-center text-center">
-
-                  <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 className="flex flex-col items-center text-center mb-6">
+                <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>
 
-              <Button type="submit" className="w-full my-3">
-                Entrar
-              </Button>
+              <FormField
+                control={form.control}
+                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" 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">
-
-                  <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">
-
-                  <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>
-
+                <Button variant="outline" type="button" className="w-full">Chamar no Whatsapp</Button>
+                <Button variant="outline" type="button" className="w-full">Chamar no Local</Button>
               </div>
 
             </form>
-
           </Form>
 
           <div className="bg-brand relative hidden md:flex items-center justify-center">
@@ -174,18 +115,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">
-
-        Ao clicar você concordar com <a href="#">Nossos termos de serviços</a>{" "}e <a href="#">Políticas de Privacidade</a>.
-
+      <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>.
       </div>
-
     </div>
-
   )
 }