104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import Link from "next/link"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Input } from "@/shared/components/ui/input"
|
|
import { Label } from "@/shared/components/ui/label"
|
|
import { cn } from "@/shared/lib/utils"
|
|
import { Loader2, Github } from "lucide-react"
|
|
|
|
type LoginFormProps = React.HTMLAttributes<HTMLDivElement>
|
|
|
|
export function LoginForm({ className, ...props }: LoginFormProps) {
|
|
const [isLoading, setIsLoading] = React.useState<boolean>(false)
|
|
|
|
async function onSubmit(event: React.SyntheticEvent) {
|
|
event.preventDefault()
|
|
setIsLoading(true)
|
|
|
|
setTimeout(() => {
|
|
setIsLoading(false)
|
|
}, 3000)
|
|
}
|
|
|
|
return (
|
|
<div className={cn("grid gap-6", className)} {...props}>
|
|
<div className="flex flex-col space-y-2 text-center">
|
|
<h1 className="text-2xl font-semibold tracking-tight">
|
|
Welcome back
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enter your email to sign in to your account
|
|
</p>
|
|
</div>
|
|
<form onSubmit={onSubmit}>
|
|
<div className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
placeholder="name@example.com"
|
|
type="email"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
autoCorrect="off"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Link
|
|
href="/forgot-password"
|
|
className="text-sm font-medium text-muted-foreground hover:underline"
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<Button disabled={isLoading}>
|
|
{isLoading && (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
)}
|
|
Sign In with Email
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<span className="w-full border-t" />
|
|
</div>
|
|
<div className="relative flex justify-center text-xs uppercase">
|
|
<span className="bg-background px-2 text-muted-foreground">
|
|
Or continue with
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" type="button" disabled={isLoading}>
|
|
{isLoading ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Github className="mr-2 h-4 w-4" />
|
|
)}{" "}
|
|
GitHub
|
|
</Button>
|
|
<p className="px-8 text-center text-sm text-muted-foreground">
|
|
Don't have an account?{" "}
|
|
<Link
|
|
href="/register"
|
|
className="underline underline-offset-4 hover:text-primary"
|
|
>
|
|
Sign up
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|