polish codes

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

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+export default function AdminRegisterStep ({
+  step,
+  currentStep,
+  children
+}: {
+  step: number;
+  currentStep: number;
+  children: React.ReactNode
+}) {
+  return (
+    <div id={`step-${step}`} className={cn('border-l border-foreground py-8 pl-12', {
+      'step-mask': step !== currentStep,
+      'remote': Math.abs(currentStep - step) > 1
+    })}>
+      {children}
+    </div>
+  )
+}

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

@@ -1,5 +1,7 @@
 .admin-register-wrap {
   transition: transform 0.35s ease-out;
+  padding-top: 20vh;
+  padding-bottom: 20vh;
 }
 
 .step-mask {
@@ -21,6 +23,7 @@
     );
     pointer-events: none;
     z-index: 10;
+    width: 110%;
   }
 
   &.remote {

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

@@ -1,27 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } 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 AdminRegisterStep from './admin-register-step'
 
 import './admin-register.css'
 
 export default function AdminRegister () {
   const router = useRouter()
-  const [step, setStep] = useState(1)
+  const [currentStep, setCurrentStep] = 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
-    })}>
+  useEffect(() => {
+    if (currentStep === 1) return
+    document.getElementById(`step-${currentStep}`)?.scrollIntoView({ behavior: 'smooth' });
+  }, [currentStep])
 
-      <div className={cn('border-l border-foreground py-8 pl-12', { 'step-mask': step !== 1, 'remote': step > 2 })}>
+  return (
+    <div className="admin-register-wrap w-[550px]">
+      <AdminRegisterStep step={1} currentStep={currentStep}>
         <h2 className="text-3xl font-semibold tracking-tight first:mt-0">
           Welcome To Tabby Enterprise
         </h2>
@@ -33,22 +32,22 @@ export default function AdminRegister () {
         </p>
         <Button
           className='mt-5 w-48'
-          onClick={() => setStep(2)}>
+          onClick={() => setCurrentStep(2)}>
             Create admin account
         </Button>
-      </div>
+      </AdminRegisterStep>
 
-      <div className={cn("border-l border-foreground py-8 pl-12", { 'step-mask': step !== 2 })}>
+      <AdminRegisterStep step={2} currentStep={currentStep}>
         <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>
+        <UserAuthForm onSuccess={() => setCurrentStep(3)} buttonClass="self-start w-48" />
+      </AdminRegisterStep>
 
-      <div className={cn("border-l border-foreground py-8 pl-12", { 'step-mask': step !== 3, 'remote': step < 2 })}>
+      <AdminRegisterStep step={3} currentStep={currentStep}>
         <h3 className="text-2xl font-semibold tracking-tight">
           Enter The Instance
         </h3>
@@ -63,7 +62,7 @@ export default function AdminRegister () {
           onClick={() => router.replace("/")}>
             Open the dashboard
         </Button>
-      </div>
+      </AdminRegisterStep>
     </div>
   )
 }