From c4ae545bcb76248b62fbc8d4ea45daeff4c14533 Mon Sep 17 00:00:00 2001
From: Meng Zhang <meng@tabbyml.com>
Date: Tue, 5 Dec 2023 15:52:57 +0800
Subject: [PATCH] extract signup component

---
 ee/tabby-ui/app/auth/components/signup.tsx    | 24 +++++++++++++
 .../app/auth/components/user-auth-form.tsx    | 36 +++++++++++++------
 ee/tabby-ui/app/auth/page.tsx                 | 16 ++-------
 3 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 ee/tabby-ui/app/auth/components/signup.tsx

diff --git a/ee/tabby-ui/app/auth/components/signup.tsx b/ee/tabby-ui/app/auth/components/signup.tsx
new file mode 100644
index 0000000..0528fd7
--- /dev/null
+++ b/ee/tabby-ui/app/auth/components/signup.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { UserAuthForm } from "./user-auth-form"
+import { useGraphQL } from "@/lib/hooks/use-graphql"
+import { getIsAdminInitialized } from "@/lib/gql/request-documents"
+
+export default function Signup() {
+  const { data } = useGraphQL(getIsAdminInitialized)
+  const title = data?.isAdminInitialized ? "Create an account" : "Create an admin account"
+
+  return (
+    <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">
+          {title}
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Enter your credentials below to create account
+        </p>
+      </div>
+      <UserAuthForm />
+    </div>
+  )
+}
diff --git a/ee/tabby-ui/app/auth/components/user-auth-form.tsx b/ee/tabby-ui/app/auth/components/user-auth-form.tsx
index de57837..3dd1b73 100644
--- a/ee/tabby-ui/app/auth/components/user-auth-form.tsx
+++ b/ee/tabby-ui/app/auth/components/user-auth-form.tsx
@@ -8,9 +8,11 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 
-interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> { }
+interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
+  invitationCode?: string
+}
 
-export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+export function UserAuthForm({ className, invitationCode, ...props }: UserAuthFormProps) {
   const [isLoading, setIsLoading] = React.useState<boolean>(false)
 
   async function onSubmit(event: React.SyntheticEvent) {
@@ -26,13 +28,13 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
     <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">
+          <div className="space-y-2">
+            <Label htmlFor="email">
               Email
             </Label>
             <Input
               id="email"
-              placeholder="name@example.com"
+              placeholder=""
               type="email"
               autoCapitalize="none"
               autoComplete="email"
@@ -40,17 +42,29 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
               disabled={isLoading}
             />
           </div>
-          <div className="grid gap-1">
-            <Label className="sr-only" htmlFor="email">
-              Email
+          <div className="space-y-2">
+            <Label htmlFor="password1">
+              Password
             </Label>
             <Input
-              id="password"
-              placeholder="password"
+              id="password1"
+              placeholder=""
               type="password"
+              disabled={isLoading}
             />
           </div>
-          <Button disabled={isLoading}>
+          <div className="space-y-2">
+            <Label htmlFor="">
+              Confirm Password
+            </Label>
+            <Input
+              id="password2"
+              placeholder=""
+              type="password"
+              disabled={isLoading}
+            />
+          </div>
+          <Button className="mt-2" disabled={isLoading}>
             {isLoading && (
               <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
             )}
diff --git a/ee/tabby-ui/app/auth/page.tsx b/ee/tabby-ui/app/auth/page.tsx
index 333813e..e3b92a7 100644
--- a/ee/tabby-ui/app/auth/page.tsx
+++ b/ee/tabby-ui/app/auth/page.tsx
@@ -1,8 +1,6 @@
 import { Metadata } from "next"
 
-import { UserAuthForm } from "./components/user-auth-form"
-import { useGraphQL } from "@/lib/hooks/use-graphql"
-import { getIsAdminInitialized } from "@/lib/gql/request-documents"
+import Signup from "./components/signup"
 
 export const metadata: Metadata = {
   title: "Authentication",
@@ -12,17 +10,7 @@ export const metadata: Metadata = {
 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>
+      <Signup />
     </div>
   )
 }