[WEB-4542] feat: god mode auth revamp and code refactor (#7563)

* chore: auth color updated and remove unused tokens

* chore: god-mode brand revamp

* fix: space app spinner logo

apps/admin/core/components/instance/failure.tsx

@@ -1,13 +1,15 @@
 "use client";
 import { FC } from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/ui";
 // assets
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "@/public/instance/instance-failure.svg";
 
-export const InstanceFailureView: FC = () => {
+export const InstanceFailureView: FC = observer(() => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -17,22 +19,24 @@ export const InstanceFailureView: FC = () => {
   };
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane Logo" />
-          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
-          <p className="font-medium text-base text-center">
-            We were unable to fetch the details of the instance. <br />
-            Fret not, it might just be a connectivity issue.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <Button size="md" onClick={handleRetry}>
-            Retry
-          </Button>
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <div className="relative flex flex-col justify-center items-center space-y-4">
+            <Image src={instanceImage} alt="Plane Logo" />
+            <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
+            <p className="font-medium text-base text-center">
+              We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <Button size="md" onClick={handleRetry}>
+              Retry
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
-};
+});

apps/admin/core/components/instance/form-header.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
+  <div className="flex flex-col gap-1">
+    <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
+    <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
+  </div>
+);

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (
       <div className="relative flex flex-col justify-center items-center space-y-4">
         <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
         <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-onboarding-text-400">
+        <p className="font-medium text-base text-custom-text-400">
           Get started by setting up your instance and workspace
         </p>
       </div>

apps/admin/core/components/instance/loading.tsx

@@ -6,16 +6,12 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 
 export const InstanceLoading = () => {
   const { resolvedTheme } = useTheme();
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
-          <h3 className="font-medium text-2xl text-white ">Fetching instance details...</h3>
-        </div>
-      </div>
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/instance/setup-form.tsx

@@ -10,7 +10,9 @@ import { AuthService } from "@plane/services";
 import { Button, Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import { Banner } from "@/components/common/banner";
+import { FormHeader } from "@/components/instance/form-header";
 
 // service initialization
 const authService = new AuthService();
@@ -131,227 +133,221 @@ export const InstanceSetupForm: FC = (props) => {
   const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
 
   return (
-    <div className="max-w-lg lg:max-w-md w-full">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Setup your Plane Instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Post setup you will be able to manage this Plane instance.
-          </p>
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <FormHeader
+            heading="Setup your Plane Instance"
+            subHeading="Post setup you will be able to manage this Plane instance."
+          />
+          {errorData.type &&
+            errorData?.message &&
+            ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+              <Banner type="error" message={errorData?.message} />
+            )}
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+            <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
+
+            <div className="flex flex-col sm:flex-row items-center gap-4">
+              <div className="w-full space-y-1">
+                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
+                  First name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="first_name"
+                  name="first_name"
+                  type="text"
+                  inputSize="md"
+                  placeholder="Wilber"
+                  value={formData.first_name}
+                  onChange={(e) => handleFormChange("first_name", e.target.value)}
+                  autoComplete="on"
+                  autoFocus
+                />
+              </div>
+              <div className="w-full space-y-1">
+                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+                  Last name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="last_name"
+                  name="last_name"
+                  type="text"
+                  inputSize="md"
+                  placeholder="Wright"
+                  value={formData.last_name}
+                  onChange={(e) => handleFormChange("last_name", e.target.value)}
+                  autoComplete="on"
+                />
+              </div>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="email"
+                name="email"
+                type="email"
+                inputSize="md"
+                placeholder="name@company.com"
+                value={formData.email}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+                autoComplete="on"
+              />
+              {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+              )}
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+                Company name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="company_name"
+                name="company_name"
+                type="text"
+                inputSize="md"
+                placeholder="Company name"
+                value={formData.company_name}
+                onChange={(e) => handleFormChange("company_name", e.target.value)}
+              />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                Set a password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="password"
+                  name="password"
+                  type={showPassword.password ? "text" : "password"}
+                  inputSize="md"
+                  placeholder="New password..."
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                  onFocus={() => setIsPasswordInputFocused(true)}
+                  onBlur={() => setIsPasswordInputFocused(false)}
+                  autoComplete="on"
+                />
+                {showPassword.password ? (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+              )}
+              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+                Confirm password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  type={showPassword.retypePassword ? "text" : "password"}
+                  id="confirm_password"
+                  name="confirm_password"
+                  inputSize="md"
+                  value={formData.confirm_password}
+                  onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                  placeholder="Confirm password"
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                  onFocus={() => setIsRetryPasswordInputFocused(true)}
+                  onBlur={() => setIsRetryPasswordInputFocused(false)}
+                />
+                {showPassword.retypePassword ? (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              {!!formData.confirm_password &&
+                formData.password !== formData.confirm_password &&
+                renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+            </div>
+
+            <div className="relative flex gap-2">
+              <div>
+                <Checkbox
+                  className="w-4 h-4"
+                  iconClassName="w-3 h-3"
+                  id="is_telemetry_enabled"
+                  onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
+                  checked={formData.is_telemetry_enabled}
+                />
+              </div>
+              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+                Allow Plane to anonymously collect usage events.{" "}
+                <a
+                  tabIndex={-1}
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                >
+                  See More
+                </a>
+              </label>
+            </div>
+
+            <div className="py-2">
+              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+              </Button>
+            </div>
+          </form>
         </div>
-
-        {errorData.type &&
-          errorData?.message &&
-          ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
-            <Banner type="error" message={errorData?.message} />
-          )}
-
-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
-
-          <div className="flex flex-col sm:flex-row items-center gap-4">
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
-                First name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="first_name"
-                name="first_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wilber"
-                value={formData.first_name}
-                onChange={(e) => handleFormChange("first_name", e.target.value)}
-                autoComplete="on"
-                autoFocus
-              />
-            </div>
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
-                Last name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="last_name"
-                name="last_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wright"
-                value={formData.last_name}
-                onChange={(e) => handleFormChange("last_name", e.target.value)}
-                autoComplete="on"
-              />
-            </div>
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="email"
-              name="email"
-              type="email"
-              inputSize="md"
-              placeholder="name@company.com"
-              value={formData.email}
-              onChange={(e) => handleFormChange("email", e.target.value)}
-              hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-              autoComplete="on"
-            />
-            {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
-              Company name <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="company_name"
-              name="company_name"
-              type="text"
-              inputSize="md"
-              placeholder="Company name"
-              value={formData.company_name}
-              onChange={(e) => handleFormChange("company_name", e.target.value)}
-            />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              Set a password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="password"
-                name="password"
-                type={showPassword.password ? "text" : "password"}
-                inputSize="md"
-                placeholder="New password..."
-                value={formData.password}
-                onChange={(e) => handleFormChange("password", e.target.value)}
-                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
-                onFocus={() => setIsPasswordInputFocused(true)}
-                onBlur={() => setIsPasswordInputFocused(false)}
-                autoComplete="on"
-              />
-              {showPassword.password ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-            <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-              Confirm password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                type={showPassword.retypePassword ? "text" : "password"}
-                id="confirm_password"
-                name="confirm_password"
-                inputSize="md"
-                value={formData.confirm_password}
-                onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                placeholder="Confirm password"
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                onFocus={() => setIsRetryPasswordInputFocused(true)}
-                onBlur={() => setIsRetryPasswordInputFocused(false)}
-              />
-              {showPassword.retypePassword ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {!!formData.confirm_password &&
-              formData.password !== formData.confirm_password &&
-              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-          </div>
-
-          <div className="relative flex items-center pt-2 gap-2">
-            <div>
-              <Checkbox
-                className="w-4 h-4"
-                iconClassName="w-3 h-3"
-                id="is_telemetry_enabled"
-                onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
-                checked={formData.is_telemetry_enabled}
-              />
-            </div>
-            <label
-              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
-              htmlFor="is_telemetry_enabled"
-            >
-              Allow Plane to anonymously collect usage events.
-            </label>
-            <a
-              tabIndex={-1}
-              href="https://developers.plane.so/self-hosting/telemetry"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-500 hover:text-blue-600"
-            >
-              See More
-            </a>
-          </div>
-
-          <div className="py-2">
-            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-            </Button>
-          </div>
-        </form>
       </div>
-    </div>
+    </>
   );
 };