feat(ui): improve admin setup ux

ee/tabby-ui/app/auth/signup/components/admin-register.css

@@ -0,0 +1,36 @@
+.admin-register-wrap {
+  transition: transform 0.35s ease-out;
+}
+
+.step-mask {
+  position: relative;
+  pointer-events: none;
+  border-color: hsl(var(--muted-foreground) / 0.1);
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(
+      0deg,
+      hsl(var(--background) / 1) 0%,
+      hsl(var(--background) / 1) 30%,
+      hsl(var(--background) / 0.5) 100%
+    );
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  &.remote {
+    &:after {
+      background: linear-gradient(
+        0deg,
+        hsl(var(--background) / 1) 0%,
+        hsl(var(--background) / 1) 30%,
+        hsl(var(--background) / 0.9) 100%
+      );
+    }
+  }
+}

ee/tabby-ui/app/auth/signup/components/admin-register.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from 'next/navigation'
+
+import { cn } from "@/lib/utils";
+
+import { Button } from "@/components/ui/button"
+import { UserAuthForm } from './user-register-form'
+
+import './admin-register.css'
+
+export default function AdminRegister () {
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+
+  return (
+    <div className={cn("admin-register-wrap w-[550px]", {
+      "translate-y-1/3": step === 1,
+      "-translate-y-10": step === 2,
+      "-translate-y-20": step === 3
+    })}>
+
+      <div className={cn('border-l border-foreground py-8 pl-12', { 'step-mask': step !== 1, 'remote': step > 2 })}>
+        <h2 className="text-3xl font-semibold tracking-tight first:mt-0">
+          Welcome To Tabby Enterprise
+        </h2>
+        <p className="mt-2 leading-7 text-muted-foreground">
+          To get started, please create an admin account for your instance.
+        </p>
+        <p className="leading-7 text-muted-foreground">
+          This will allow you to invite team members and manage your instance.
+        </p>
+        <Button
+          className='mt-5 w-48'
+          onClick={() => setStep(2)}>
+            Create admin account
+        </Button>
+      </div>
+
+      <div className={cn("border-l border-foreground py-8 pl-12", { 'step-mask': step !== 2 })}>
+        <h3 className="text-2xl font-semibold tracking-tight">
+          Create Admin Account
+        </h3>
+        <p className="mb-3 leading-7 text-muted-foreground">
+          Your instance will be secured, only registered users can access it.
+        </p>
+        <UserAuthForm onSuccess={() => setStep(3)} buttonClass="self-start w-48" />
+      </div>
+
+      <div className={cn("border-l border-foreground py-8 pl-12", { 'step-mask': step !== 3, 'remote': step < 2 })}>
+        <h3 className="text-2xl font-semibold tracking-tight">
+          Enter The Instance
+        </h3>
+        <p className="leading-7 text-muted-foreground">
+          Congratulations! You have successfully created an admin account.
+        </p>
+        <p className="mb-3 leading-7 text-muted-foreground">
+        To begin collaborating with your team, please open the dashboard and invite members to join your instance.
+        </p>
+        <Button
+          className='mt-5 w-48'
+          onClick={() => router.replace("/")}>
+            Open the dashboard
+        </Button>
+      </div>
+    </div>
+  )
+}

ee/tabby-ui/app/auth/signup/components/signup.tsx

@@ -3,28 +3,29 @@
 import { useSearchParams } from 'next/navigation'
 
 import { UserAuthForm } from './user-register-form'
+import AdminRegister from './admin-register'
 
 export default function Signup() {
   const searchParams = useSearchParams()
   const invitationCode = searchParams.get('invitationCode') || undefined
   const isAdmin = searchParams.get('isAdmin') || false
-
-  const title = isAdmin ? 'Create an admin account' : 'Create an account'
-
-  const description = isAdmin
-    ? 'Your instance will be secured, only registered users can access it.'
-    : 'Fill form below to create your account'
-
-  if (isAdmin || invitationCode) {
-    return <Content title={title} description={description} show />
-  } else {
+
+  if (isAdmin) return <AdminRegister />
+  if (invitationCode) {
     return (
       <Content
-        title="No invitation code"
-        description="Please contact your Tabby admin for an invitation code to register"
+        title="Create an account"
+        description="Fill form below to create your account"
+        show
       />
     )
   }
+  return (
+    <Content
+      title="No invitation code"
+      description="Please contact your Tabby admin for an invitation code to register"
+    />
+  )
 }
 
 function Content({

ee/tabby-ui/app/auth/signup/components/user-register-form.tsx

@@ -50,12 +50,16 @@ const formSchema = z.object({
 })
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
-  invitationCode?: string
+  invitationCode?: string;
+  onSuccess?: () => void;
+  buttonClass?: string;
 }
 
 export function UserAuthForm({
   className,
   invitationCode,
+  onSuccess,
+  buttonClass,
   ...props
 }: UserAuthFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
@@ -71,7 +75,11 @@ export function UserAuthForm({
   const onSubmit = useMutation(registerUser, {
     async onCompleted(values) {
       if (await signIn(values?.register)) {
-        router.replace('/')
+        if (onSuccess) {
+          onSuccess()
+        } else {
+          router.replace('/')
+        }
       }
     },
     form
@@ -138,7 +146,10 @@ export function UserAuthForm({
               </FormItem>
             )}
           />
-          <Button type="submit" className="mt-2" disabled={isSubmitting}>
+          <Button
+            type="submit"
+            className={cn("mt-2", buttonClass)}
+            disabled={isSubmitting}>
             {isSubmitting && (
               <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
             )}