63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import * as React from "react"
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
import { IconSpinner } from "@/components/ui/icons"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Input } from "@/components/ui/input"
|
||
|
|
import { Label } from "@/components/ui/label"
|
||
|
|
|
||
|
|
interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> { }
|
||
|
|
|
||
|
|
export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
|
||
|
|
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}>
|
||
|
|
<form onSubmit={onSubmit}>
|
||
|
|
<div className="grid gap-2">
|
||
|
|
<div className="grid gap-1">
|
||
|
|
<Label className="sr-only" 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-1">
|
||
|
|
<Label className="sr-only" htmlFor="email">
|
||
|
|
Email
|
||
|
|
</Label>
|
||
|
|
<Input
|
||
|
|
id="password"
|
||
|
|
placeholder="password"
|
||
|
|
type="password"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Button disabled={isLoading}>
|
||
|
|
{isLoading && (
|
||
|
|
<IconSpinner className="mr-2 h-4 w-4 animate-spin" />
|
||
|
|
)}
|
||
|
|
Sign In
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|