[DSAAS-11] feat(LoadingButton): Cria componente de botão que controla o estado de loading de requisição
This commit is contained in:
parent
7ec1259ba0
commit
f46c05ab97
3 changed files with 101 additions and 120 deletions
34
src/app/_components/loadingButton/LoadingButton.tsx
Normal file
34
src/app/_components/loadingButton/LoadingButton.tsx
Normal file
|
|
@ -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;
|
||||
7
src/app/_components/loadingButton/LoadingButtonProps.ts
Normal file
7
src/app/_components/loadingButton/LoadingButtonProps.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(UsuarioFormSchema),
|
||||
resolver: zodResolver(GUsuarioSchema),
|
||||
defaultValues: {
|
||||
login: '',
|
||||
senha_api: ''
|
||||
},
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<div className="grid gap-3">
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="login"
|
||||
render={({ field }) => (
|
||||
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Login
|
||||
</FormLabel>
|
||||
<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>
|
||||
<FormLabel>Senha</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
||||
)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full my-3">
|
||||
Entrar
|
||||
</Button>
|
||||
|
||||
<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">
|
||||
{/* 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">
|
||||
|
||||
<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>
|
||||
|
||||
Chamar no Local
|
||||
</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">
|
||||
|
||||
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>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue