Luciano Milani
94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import { useForm } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { z } from 'zod'
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useLogin } from '@/hooks/useAuth'
|
|
|
|
const schema = z.object({
|
|
email: z.string().email('Email inválido'),
|
|
password: z.string().min(1, 'Password obrigatória'),
|
|
tenant_slug: z.string().optional(),
|
|
})
|
|
type FormData = z.infer<typeof schema>
|
|
|
|
export default function LoginPage() {
|
|
const [showSlug, setShowSlug] = useState(false)
|
|
const { mutate: login, isPending, error } = useLogin()
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<FormData>({ resolver: zodResolver(schema) })
|
|
|
|
const onSubmit = (data: FormData) => {
|
|
login({
|
|
email: data.email,
|
|
password: data.password,
|
|
tenant_slug: data.tenant_slug || undefined,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div className="w-full max-w-sm">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">TechXCar</h1>
|
|
<p className="text-gray-500 mt-1 text-sm">Gestão de Oficina</p>
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="bg-white p-8 rounded-lg shadow-sm border border-gray-200 space-y-4"
|
|
>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" type="email" autoComplete="email" {...register('email')} />
|
|
{errors.email && <p className="text-red-500 text-xs">{errors.email.message}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
{...register('password')}
|
|
/>
|
|
{errors.password && <p className="text-red-500 text-xs">{errors.password.message}</p>}
|
|
</div>
|
|
|
|
{showSlug && (
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="tenant_slug">Workspace (slug da oficina)</Label>
|
|
<Input
|
|
id="tenant_slug"
|
|
type="text"
|
|
placeholder="minha-oficina"
|
|
{...register('tenant_slug')}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{error && <p className="text-red-500 text-sm text-center">{error.message}</p>}
|
|
|
|
<Button type="submit" className="w-full" disabled={isPending}>
|
|
{isPending ? 'A entrar...' : 'Entrar'}
|
|
</Button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowSlug((v) => !v)}
|
|
className="w-full text-xs text-gray-400 hover:text-gray-600 text-center"
|
|
>
|
|
{showSlug ? 'Ocultar campo workspace' : 'Entrar numa oficina específica'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|