feat: add auth page for signup
parent
62b10f3723
commit
23b0935fb1
|
|
@ -0,0 +1,63 @@
|
||||||
|
"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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Metadata } from "next"
|
||||||
|
import Image from "next/image"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { buttonVariants } from "@/components/ui/button"
|
||||||
|
import { UserAuthForm } from "./components/user-auth-form"
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Authentication",
|
||||||
|
description: "Authentication forms built using the components.",
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AuthenticationPage() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center flex-1">
|
||||||
|
<div className="space-y-6 w-[350px]">
|
||||||
|
<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 credentials below to create admin account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<UserAuthForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue