131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
import { toast } from "sonner"
|
|
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"
|
|
import type { ActionState } from "@/shared/types/action-state"
|
|
|
|
type RegisterFormProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
registerAction: (formData: FormData) => Promise<ActionState>
|
|
}
|
|
|
|
export function RegisterForm({ className, registerAction, ...props }: RegisterFormProps) {
|
|
const [isLoading, setIsLoading] = React.useState<boolean>(false)
|
|
const router = useRouter()
|
|
|
|
async function onSubmit(event: React.SyntheticEvent) {
|
|
event.preventDefault()
|
|
setIsLoading(true)
|
|
|
|
try {
|
|
const form = event.currentTarget as HTMLFormElement
|
|
const formData = new FormData(form)
|
|
const res = await registerAction(formData)
|
|
|
|
if (res.success) {
|
|
toast.success(res.message || "Account created")
|
|
router.push("/login")
|
|
router.refresh()
|
|
} else {
|
|
toast.error(res.message || "Failed to create account")
|
|
}
|
|
} catch {
|
|
toast.error("Failed to create account")
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
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">
|
|
Create an account
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enter your email below to create your account
|
|
</p>
|
|
</div>
|
|
<form onSubmit={onSubmit}>
|
|
<div className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">Full Name</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
placeholder="John Doe"
|
|
type="text"
|
|
autoCapitalize="words"
|
|
autoComplete="name"
|
|
autoCorrect="off"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
placeholder="name@example.com"
|
|
type="email"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
autoCorrect="off"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<Button disabled={isLoading}>
|
|
{isLoading && (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
)}
|
|
Create Account
|
|
</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">
|
|
Already have an account?{" "}
|
|
<Link
|
|
href="/login"
|
|
className="underline underline-offset-4 hover:text-primary"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|