From 23b0935fb1d5741b958e4e2a7865d744675a66ed Mon Sep 17 00:00:00 2001
From: Meng Zhang <meng@tabbyml.com>
Date: Tue, 5 Dec 2023 14:34:02 +0800
Subject: [PATCH] feat: add auth page for signup

---
 .../app/auth/components/user-auth-form.tsx    | 63 +++++++++++++++++++
 ee/tabby-ui/app/auth/page.tsx                 | 30 +++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 ee/tabby-ui/app/auth/components/user-auth-form.tsx
 create mode 100644 ee/tabby-ui/app/auth/page.tsx

diff --git a/ee/tabby-ui/app/auth/components/user-auth-form.tsx b/ee/tabby-ui/app/auth/components/user-auth-form.tsx
new file mode 100644
index 0000000..de57837
--- /dev/null
+++ b/ee/tabby-ui/app/auth/components/user-auth-form.tsx
@@ -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>
+  )
+}
\ No newline at end of file
diff --git a/ee/tabby-ui/app/auth/page.tsx b/ee/tabby-ui/app/auth/page.tsx
new file mode 100644
index 0000000..5943578
--- /dev/null
+++ b/ee/tabby-ui/app/auth/page.tsx
@@ -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>
+  )
+}
\ No newline at end of file