dev: instance setup workflow (#2935)

* chore: instance type updated * chore: instance not ready screen added * chore: instance layout added * chore: instance magic sign in endpoint and type added * chore: instance admin password endpoint added * chore: instance setup page added * chore: instance setup form added * chore: instance layout updated * fix: instance admin workflow setup * fix: admin workflow setup --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
2023-11-29 20:33:08 +05:30 · 2023-11-29 20:33:08 +05:30 · a779fa1497
commit a779fa1497
parent 5eb7740833
25 changed files with 905 additions and 38 deletions
--- a/web/components/account/sign-in-forms/root.tsx
+++ b/web/components/account/sign-in-forms/root.tsx
@ -31,7 +31,7 @@ export const SignInRoot: React.FC<Props> = (props) => {

  return (
    <>
-      <div className="mx-auto flex flex-col divide-y divide-custom-border-200">
+      <div className="mx-auto flex flex-col">
        {signInStep === ESignInSteps.EMAIL && (
          <EmailForm
            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
--- a/web/components/common/index.ts
+++ b/web/components/common/index.ts
@ -1,2 +1,3 @@
 export * from "./product-updates-modal";
 export * from "./empty-state";
+export * from "./latest-feature-block";
--- a/web/components/common/latest-feature-block.tsx
+++ b/web/components/common/latest-feature-block.tsx
@ -0,0 +1,35 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// icons
+import { Lightbulb } from "lucide-react";
+// images
+import signInIssues from "public/onboarding/onboarding-issues.svg";
+
+export const LatestFeatureBlock = () => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      <div
+        className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
+      >
+        <Lightbulb className="h-7 w-7 mr-2 mx-3" />
+        <p className={`text-sm text-left text-onboarding-text-100`}>
+          Try the latest features, like Tiptap editor, to write compelling responses.{" "}
+          <span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}>
+            See new features
+          </span>
+        </p>
+      </div>
+      <div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
+        <Image
+          src={signInIssues}
+          alt="Plane Issues"
+          className={`flex object-cover rounded-md ${
+            resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
+          } `}
+        />
+      </div>
+    </>
+  );
+};
--- a/web/components/instance/index.ts
+++ b/web/components/instance/index.ts
@ -8,3 +8,7 @@ export * from "./github-config-form";
 export * from "./google-config-form";
 export * from "./image-config-form";
 export * from "./instance-admin-restriction";
+export * from "./not-ready-view";
+export * from "./setup-view";
+export * from "./setup-done-view";
+export * from "./setup-form";
--- a/web/components/instance/not-ready-view.tsx
+++ b/web/components/instance/not-ready-view.tsx
@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// image
+import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
+import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+import PlaneDarkLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+
+export const InstanceNotReady = () => {
+  const { resolvedTheme } = useTheme();
+
+  const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneDarkLogo;
+
+  return (
+    <div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
+      <div className={`h-screen w-full pt-24`}>
+        <div className="h-auto bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 p-4 rounded-md mx-auto shadow-sm border border-custom-border-100 ">
+          <div className={`relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-md`}>
+            <div className="flex items-center py-10 justify-center">
+              <Image src={planeLogo} className="h-44 w-full" alt="image" />
+            </div>
+            <div className="mt-20">
+              <Image src={instanceNotReady} className="h-46 w-full" alt="image" />
+            </div>
+            <div className="flex flex-col gap-5 items-center py-12 pb-20 w-full">
+              <h3 className="text-2xl font-medium">Your Plane instance isn’t ready yet</h3>
+              <p className="text-sm">Ask your Instance Admin to complete set-up first.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/web/components/instance/setup-done-view.tsx
+++ b/web/components/instance/setup-done-view.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import Image from "next/image";
+
+// ui
+import { Button } from "@plane/ui";
+import { UserCog2 } from "lucide-react";
+// image
+import instanceSetupDone from "public/instance-setup-done.svg";
+import PlaneLogo from "public/plane-logos/blue-without-text.png";
+
+export const InstanceSetupDone = () => (
+  <div className="h-screen w-full overflow-hidden">
+    <div className={`bg-onboarding-gradient-100 h-screen w-full pt-12`}>
+      <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
+        <div
+          className={`flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-auto`}
+        >
+          <div className="flex items-center gap-5 py-10 justify-center">
+            <Image src={PlaneLogo} height={44} width={44} alt="image" />
+            <span className="text-4xl font-semibold">To the stratosphere now!</span>
+          </div>
+
+          <div className="flex items-center justify-center">
+            <Image src={instanceSetupDone} height={360} width={444} alt="image" />
+          </div>
+
+          <div className="flex flex-col gap-8 items-center py-12 w-full">
+            <span className="text-xl font-medium">
+              Your instance is now ready for more security, more controls, and more intelligence.
+            </span>
+            <Button size="lg" prependIcon={<UserCog2 />}>
+              Go to God Mode
+            </Button>
+
+            <div className="flex p-2.5 text-custom-primary-100 bg-custom-primary-10 border border-custom-primary-100 text-sm text-left mx-auto rounded">
+              Use this wisely. Remember, with great power comes great responsibility.🕷️
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
--- a/web/components/instance/setup-form/email-code-form.tsx
+++ b/web/components/instance/setup-form/email-code-form.tsx
@ -0,0 +1,167 @@
+import { FC } from "react";
+import { useForm, Controller } from "react-hook-form";
+// ui
+import { Input, Button } from "@plane/ui";
+// icons
+import { XCircle } from "lucide-react";
+// services
+import { AuthService } from "services/auth.service";
+const authService = new AuthService();
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+
+export interface InstanceSetupEmailCodeFormValues {
+  email: string;
+  token: string;
+}
+
+export interface IInstanceSetupEmailCodeForm {
+  email: string;
+  handleNextStep: () => void;
+  moveBack: () => void;
+}
+
+export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => {
+  const { handleNextStep, email, moveBack } = props;
+  // form info
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<InstanceSetupEmailCodeFormValues>({
+    defaultValues: {
+      email,
+      token: "",
+    },
+  });
+  // hooks
+  const { setToastAlert } = useToast();
+  const { timer, setTimer } = useTimer(30);
+  // computed
+  const isResendDisabled = timer > 0 || isSubmitting;
+
+  const handleEmailCodeFormSubmit = (formValues: InstanceSetupEmailCodeFormValues) =>
+    authService
+      .instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
+      .then(() => {
+        reset();
+        handleNextStep();
+      })
+      .catch((err) => {
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: err?.error,
+        });
+      });
+
+  const resendMagicCode = () => {
+    setTimer(30);
+    authService
+      .instanceAdminEmailCode({ email })
+      .then(() => {
+        // setCodeResending(false);
+        setTimer(30);
+      })
+      .catch((err) => {
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: err?.error,
+        });
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
+      <div className="pb-2">
+        <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+          Let’s secure your instance
+        </h1>
+        <div className="text-center text-sm text-onboarding-text-200 mt-3">
+          <p>Paste the code you got at </p>
+          <span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{email}</span>
+          <span className="text-onboarding-text-200">below.</span>
+        </div>
+
+        <div className="relative mt-10 w-full sm:w-[360px] mx-auto">
+          <Controller
+            name="email"
+            control={control}
+            rules={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={value}
+                  onChange={onChange}
+                  disabled
+                  placeholder="orville.wright@firstflight.com"
+                  className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
+                />
+                <XCircle
+                  className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
+                  onClick={() => moveBack()}
+                />
+              </div>
+            )}
+          />
+          <div
+            className={`flex w-full justify-end text-xs outline-none ${
+              isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
+            } `}
+          >
+            {timer > 0 ? (
+              <span className="text-right">Request new code in {timer}s</span>
+            ) : isSubmitting ? (
+              "Sending new code..."
+            ) : (
+              <div className="flex justify-end w-full">
+                <button
+                  type="button"
+                  className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
+                  onClick={resendMagicCode}
+                  disabled={isResendDisabled}
+                >
+                  <span className="font-medium">Resend</span>
+                </button>
+              </div>
+            )}
+          </div>
+          <Controller
+            name="token"
+            control={control}
+            rules={{ required: true }}
+            render={({ field: { value, onChange } }) => (
+              <div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
+                <Input
+                  id="token"
+                  name="token"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  placeholder="gets-sets-flys"
+                  className="border-onboarding-border-100 h-[46px] w-full "
+                />
+              </div>
+            )}
+          />
+
+          <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Verifying..." : "Next step"}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
--- a/web/components/instance/setup-form/email-form.tsx
+++ b/web/components/instance/setup-form/email-form.tsx
@ -0,0 +1,105 @@
+import { FC } from "react";
+import { useForm, Controller } from "react-hook-form";
+// ui
+import { Input, Button } from "@plane/ui";
+// icons
+import { XCircle } from "lucide-react";
+// services
+import { AuthService } from "services/auth.service";
+const authService = new AuthService();
+// hooks
+import useToast from "hooks/use-toast";
+
+export interface InstanceSetupEmailFormValues {
+  email: string;
+}
+
+export interface IInstanceSetupEmailForm {
+  handleNextStep: (email: string) => void;
+}
+
+export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
+  const { handleNextStep } = props;
+  // form info
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<InstanceSetupEmailFormValues>({
+    defaultValues: {
+      email: "",
+    },
+  });
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleEmailFormSubmit = (formValues: InstanceSetupEmailFormValues) =>
+    authService
+      .instanceAdminEmailCode({ email: formValues.email })
+      .then(() => {
+        reset();
+        handleNextStep(formValues.email);
+      })
+      .catch((err) => {
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: err?.error,
+        });
+      });
+
+  return (
+    <form onSubmit={handleSubmit(handleEmailFormSubmit)}>
+      <div className="pb-2">
+        <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+          Let’s secure your instance
+        </h1>
+        <p className="text-center text-sm text-onboarding-text-200 mt-3">
+          Explore privacy options. Get AI features. Secure access. <br /> Takes 2 minutes.
+        </p>
+
+        <div className="relative mt-10 w-full sm:w-[360px] mx-auto">
+          <Controller
+            name="email"
+            control={control}
+            rules={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={value}
+                  onChange={onChange}
+                  placeholder="orville.wright@firstflight.com"
+                  className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
+                />
+                {value.length > 0 && (
+                  <XCircle
+                    className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
+                    onClick={() => setValue("email", "")}
+                  />
+                )}
+              </div>
+            )}
+          />
+          <p className="text-xs text-custom-text-400 mt-0 py-2">
+            Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not.
+          </p>
+
+          <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Sending code..." : "Send unique code"}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
--- a/web/components/instance/setup-form/index.ts
+++ b/web/components/instance/setup-form/index.ts
@ -0,0 +1,3 @@
+export * from "./email-code-form";
+export * from "./email-form";
+export * from "./root";
--- a/web/components/instance/setup-form/password-form.tsx
+++ b/web/components/instance/setup-form/password-form.tsx
@ -0,0 +1,120 @@
+import React from "react";
+import { useForm, Controller } from "react-hook-form";
+// ui
+import { Input, Button } from "@plane/ui";
+// icons
+import { XCircle } from "lucide-react";
+// services
+import { AuthService } from "services/auth.service";
+const authService = new AuthService();
+
+export interface InstanceSetupPasswordFormValues {
+  email: string;
+  password: string;
+}
+
+export interface IInstanceSetupPasswordForm {
+  email: string;
+  onNextStep: () => void;
+  resetSteps: () => void;
+}
+
+export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (props) => {
+  const { onNextStep, email, resetSteps } = props;
+  // form info
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<InstanceSetupPasswordFormValues>({
+    defaultValues: {
+      email,
+      password: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const handlePasswordSubmit = (formData: InstanceSetupPasswordFormValues) =>
+    authService.setInstanceAdminPassword({ password: formData.password }).then(() => {
+      onNextStep();
+    });
+
+  return (
+    <form onSubmit={handleSubmit(handlePasswordSubmit)}>
+      <div className="pb-2">
+        <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+          Moving to the runway
+        </h1>
+        <p className="text-center text-sm text-onboarding-text-200 mt-3">
+          {"Let's set a password so you can do away with codes."}
+        </p>
+
+        <div className="relative mt-10 w-full sm:w-[360px] mx-auto">
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: "Email is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={value}
+                  onChange={onChange}
+                  placeholder="orville.wright@firstflight.com"
+                  className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
+                />
+                <XCircle
+                  className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
+                  onClick={() => resetSteps()}
+                />
+              </div>
+            )}
+          />
+
+          <div className="mt-4">
+            <Controller
+              control={control}
+              name="password"
+              rules={{
+                required: "Password is required",
+                minLength: {
+                  value: 8,
+                  message: "Minimum 8 characters required",
+                },
+              }}
+              render={({ field: { value, onChange } }) => (
+                <div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
+                  <Input
+                    id="password"
+                    type="password"
+                    name="password"
+                    value={value}
+                    onChange={onChange}
+                    hasError={Boolean(errors.password)}
+                    placeholder="Enter your password..."
+                    className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
+                  />
+                </div>
+              )}
+            />
+          </div>
+          <p className="text-xs mt-2 text-onboarding-text-200">
+            {"Whatever you choose now will be your account's password"}
+          </p>
+          <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Submitting..." : "Next Step"}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
--- a/web/components/instance/setup-form/root.tsx
+++ b/web/components/instance/setup-form/root.tsx
@ -0,0 +1,70 @@
+import { useState } from "react";
+// components
+import { InstanceSetupEmailCodeForm } from "./email-code-form";
+import { InstanceSetupEmailForm } from "./email-form";
+import { InstanceSetupPasswordForm } from "./password-form";
+import { LatestFeatureBlock } from "components/common";
+import { InstanceSetupDone } from "components/instance";
+
+export enum EInstanceSetupSteps {
+  EMAIL = "EMAIL",
+  VERIFY_CODE = "VERIFY_CODE",
+  PASSWORD = "PASSWORD",
+  DONE = "DONE",
+}
+
+export const InstanceSetupFormRoot = () => {
+  // states
+  const [setupStep, setSetupStep] = useState(EInstanceSetupSteps.EMAIL);
+  const [email, setEmail] = useState<string>("");
+
+  return (
+    <>
+      {setupStep === EInstanceSetupSteps.DONE ? (
+        <div>
+          <InstanceSetupDone />
+        </div>
+      ) : (
+        <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
+          <div className={`px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto`}>
+            <div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
+              {setupStep === EInstanceSetupSteps.EMAIL && (
+                <InstanceSetupEmailForm
+                  handleNextStep={(email) => {
+                    setEmail(email);
+                    setSetupStep(EInstanceSetupSteps.VERIFY_CODE);
+                  }}
+                />
+              )}
+
+              {setupStep === EInstanceSetupSteps.VERIFY_CODE && (
+                <InstanceSetupEmailCodeForm
+                  email={email}
+                  handleNextStep={() => {
+                    setSetupStep(EInstanceSetupSteps.PASSWORD);
+                  }}
+                  moveBack={() => {
+                    setSetupStep(EInstanceSetupSteps.EMAIL);
+                  }}
+                />
+              )}
+
+              {setupStep === EInstanceSetupSteps.PASSWORD && (
+                <InstanceSetupPasswordForm
+                  email={email}
+                  onNextStep={() => {
+                    setSetupStep(EInstanceSetupSteps.DONE);
+                  }}
+                  resetSteps={() => {
+                    setSetupStep(EInstanceSetupSteps.EMAIL);
+                  }}
+                />
+              )}
+            </div>
+            <LatestFeatureBlock />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
--- a/web/components/instance/setup-view.tsx
+++ b/web/components/instance/setup-view.tsx
@ -0,0 +1,38 @@
+import { useEffect, useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+// components
+import { InstanceSetupFormRoot } from "components/instance";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+
+export const InstanceSetupView = observer(() => {
+  // store
+  const {
+    user: { fetchCurrentUser },
+  } = useMobxStore();
+
+  const mutateUserInfo = useCallback(() => {
+    fetchCurrentUser();
+  }, [fetchCurrentUser]);
+
+  useEffect(() => {
+    mutateUserInfo();
+  }, [mutateUserInfo]);
+
+  return (
+    <>
+      <div className={`bg-onboarding-gradient-100 h-full w-full`}>
+        <div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
+          <div className="flex gap-x-2 py-10 items-center">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <span className="font-semibold text-2xl sm:text-3xl">Plane</span>
+          </div>
+        </div>
+        <InstanceSetupFormRoot />
+      </div>
+    </>
+  );
+});
--- a/web/layouts/admin-layout/layout.tsx
+++ b/web/layouts/admin-layout/layout.tsx
@ -4,6 +4,9 @@ import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
 // components
 import { InstanceAdminSidebar } from "./sidebar";
 import { InstanceAdminHeader } from "./header";
+import { InstanceSetupView } from "components/instance";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";

 export interface IInstanceAdminLayout {
  children: ReactNode;
@ -11,6 +14,18 @@ export interface IInstanceAdminLayout {

 export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
  const { children } = props;
+  // store
+  const {
+    instance: { instance },
+    user: { currentUser },
+  } = useMobxStore();
+  // fetch
+
+  console.log("instance", instance);
+
+  if (instance?.is_setup_done === false) {
+    return <InstanceSetupView />;
+  }

  return (
    <>
--- a/web/layouts/instance-layout/index.tsx
+++ b/web/layouts/instance-layout/index.tsx
@ -0,0 +1,52 @@
+import { FC, ReactNode, useEffect } from "react";
+
+import useSWR from "swr";
+
+// route
+import { useRouter } from "next/router";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { Spinner } from "@plane/ui";
+import { InstanceNotReady } from "components/instance";
+
+type Props = {
+  children: ReactNode;
+};
+
+const InstanceLayout: FC<Props> = observer(({ children }) => {
+  // store
+  const {
+    instance: { fetchInstanceInfo, instance, createInstance },
+  } = useMobxStore();
+
+  const router = useRouter();
+  const isGodMode = router.pathname.includes("god-mode");
+
+  useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
+
+  useEffect(() => {
+    if (instance?.is_activated === false) {
+      createInstance();
+    }
+  }, [instance?.is_activated, createInstance]);
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      {instance ? (
+        !instance.is_setup_done && !isGodMode ? (
+          <InstanceNotReady />
+        ) : (
+          children
+        )
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default InstanceLayout;
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@ -102,21 +102,20 @@ export const ProfileLayoutSidebar = observer(() => {
      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
    >
      <div className="h-full w-full flex flex-col gap-y-4">
-        <div
-          className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
-            sidebarCollapsed ? "justify-center" : ""
-          }`}
-        >
-          <Link href={`/${redirectWorkspaceSlug}`}>
-            <a className="flex-shrink-0 grid place-items-center h-5 w-5">
+        <Link href={`/${redirectWorkspaceSlug}`}>
+          <a
+            className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
+              sidebarCollapsed ? "justify-center" : ""
+            }`}
+          >
+            <span className="flex-shrink-0 grid place-items-center h-5 w-5">
              <ChevronLeft className="h-5 w-5" strokeWidth={1} />
-            </a>
-          </Link>
-
-          {!sidebarCollapsed && (
-            <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
-          )}
-        </div>
+            </span>
+            {!sidebarCollapsed && (
+              <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
+            )}
+          </a>
+        </Link>
        <div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
          {!sidebarCollapsed && (
            <h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your account</h6>
--- a/web/lib/app-provider.tsx
+++ b/web/lib/app-provider.tsx
@ -3,8 +3,15 @@ import dynamic from "next/dynamic";
 import Router from "next/router";
 import NProgress from "nprogress";
 import { observer } from "mobx-react-lite";
+import { ThemeProvider } from "next-themes";
 // mobx store provider
 import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { THEMES } from "constants/themes";
+// layouts
+import InstanceLayout from "layouts/instance-layout";
+// contexts
+import { ToastContextProvider } from "contexts/toast.context";
 // dynamic imports
 const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
 const PosthogWrapper = dynamic(() => import("lib/wrappers/posthog-wrapper"), { ssr: false });
@ -29,18 +36,24 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
  } = useMobxStore();

  return (
-    <StoreWrapper>
-      <CrispWrapper user={currentUser}>
-        <PosthogWrapper
-          user={currentUser}
-          workspaceRole={currentWorkspaceRole}
-          projectRole={currentProjectRole}
-          posthogAPIKey={envConfig?.posthog_api_key || null}
-          posthogHost={envConfig?.posthog_host || null}
-        >
-          {children}
-        </PosthogWrapper>
-      </CrispWrapper>
-    </StoreWrapper>
+    <ThemeProvider themes={THEMES} defaultTheme="system">
+      <ToastContextProvider>
+        <InstanceLayout>
+          <StoreWrapper>
+            <CrispWrapper user={currentUser}>
+              <PosthogWrapper
+                user={currentUser}
+                workspaceRole={currentWorkspaceRole}
+                projectRole={currentProjectRole}
+                posthogAPIKey={envConfig?.posthog_api_key || null}
+                posthogHost={envConfig?.posthog_host || null}
+              >
+                {children}
+              </PosthogWrapper>
+            </CrispWrapper>
+          </StoreWrapper>
+        </InstanceLayout>
+      </ToastContextProvider>
+    </ThemeProvider>
  );
 });
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@ -1,7 +1,6 @@
 import { ReactElement } from "react";
 import Head from "next/head";
 import { AppProps } from "next/app";
-import { ThemeProvider } from "next-themes";
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
@ -9,10 +8,7 @@ import "styles/table.css";
 import "styles/command-pallette.css";
 import "styles/nprogress.css";
 import "styles/react-datepicker.css";
-// contexts
-import { ToastContextProvider } from "contexts/toast.context";
 // constants
-import { THEMES } from "constants/themes";
 import { SITE_TITLE } from "constants/seo-variables";
 // mobx store provider
 import { MobxStoreProvider } from "lib/mobx/store-provider";
@ -34,11 +30,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
        <title>{SITE_TITLE}</title>
      </Head>
      <MobxStoreProvider {...pageProps}>
-        <ThemeProvider themes={THEMES} defaultTheme="system">
-          <ToastContextProvider>
-            <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
-          </ToastContextProvider>
-        </ThemeProvider>
+        <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
      </MobxStoreProvider>
    </>
  );
--- a/web/public/instance-not-ready.svg
+++ b/web/public/instance-not-ready.svg
--- a/web/public/instance-setup-done.svg
+++ b/web/public/instance-setup-done.svg
--- a/web/public/instance/plane-instance-not-ready.webp
+++ b/web/public/instance/plane-instance-not-ready.webp
--- a/web/services/auth.service.ts
+++ b/web/services/auth.service.ts
@ -80,6 +80,18 @@ export class AuthService extends APIService {
      });
  }

+  async setInstanceAdminPassword(data: any): Promise<any> {
+    return this.post("/api/licenses/instances/admins/set-password/", data)
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
  async socialAuth(data: any): Promise<ILoginTokenResponse> {
    return this.post("/api/social-auth/", data, { headers: {} })
      .then((response) => {
@ -100,6 +112,14 @@ export class AuthService extends APIService {
      });
  }

+  async instanceAdminEmailCode(data: any): Promise<any> {
+    return this.post("/api/licenses/instances/admins/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
  async magicSignIn(data: IMagicSignInData): Promise<any> {
    return await this.post("/api/magic-sign-in/", data, { headers: {} })
      .then((response) => {
@ -114,6 +134,16 @@ export class AuthService extends APIService {
      });
  }

+  async instanceMagicSignIn(data: any): Promise<any> {
+    const response = await this.post("/api/licenses/instances/admins/magic-sign-in/", data);
+    if (response?.status === 200) {
+      this.setAccessToken(response?.data?.access_token);
+      this.setRefreshToken(response?.data?.refresh_token);
+      return response?.data;
+    }
+    throw response.response.data;
+  }
+
  async signOut(): Promise<any> {
    return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
      .then((response) => {
--- a/web/services/instance.service.ts
+++ b/web/services/instance.service.ts
@ -15,7 +15,15 @@ export class InstanceService extends APIService {
  }

  async getInstanceInfo(): Promise<IInstance> {
-    return this.get("/api/licenses/instances/")
+    return this.get("/api/licenses/instances/", { headers: {} })
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async createInstance(): Promise<IInstance> {
+    return this.post("/api/licenses/instances/", {}, { headers: {} })
      .then((response) => response.data)
      .catch((error) => {
        throw error;
--- a/web/store/instance/instance.store.ts
+++ b/web/store/instance/instance.store.ts
@ -17,6 +17,7 @@ export interface IInstanceStore {
  formattedConfig: IFormattedInstanceConfiguration | null;
  // action
  fetchInstanceInfo: () => Promise<IInstance>;
+  createInstance: () => Promise<IInstance>;
  fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
  updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
  fetchInstanceConfigurations: () => Promise<any>;
@ -45,6 +46,7 @@ export class InstanceStore implements IInstanceStore {
      formattedConfig: computed,
      // actions
      fetchInstanceInfo: action,
+      createInstance: action,
      fetchInstanceAdmins: action,
      updateInstanceInfo: action,
      fetchInstanceConfigurations: action,
@ -84,6 +86,22 @@ export class InstanceStore implements IInstanceStore {
    }
  };

+  /**
+   * Creating new Instance In case of no instance found
+   */
+  createInstance = async () => {
+    try {
+      const instance = await this.instanceService.createInstance();
+      runInAction(() => {
+        this.instance = instance;
+      });
+      return instance;
+    } catch (error) {
+      console.log("Error while creating the instance");
+      throw error;
+    }
+  };
+
  /**
   * fetch instance admins from API
   */
--- a/web/types/instance.d.ts
+++ b/web/types/instance.d.ts
@ -16,6 +16,8 @@ export interface IInstance {
  is_support_required: boolean;
  created_by: string | null;
  updated_by: string | null;
+  is_activated: boolean;
+  is_setup_done: boolean;
 }

 export interface IInstanceConfiguration {
--- a/web/types/users.d.ts
+++ b/web/types/users.d.ts
@ -16,6 +16,7 @@ export interface IUser {
  is_onboarded: boolean;
  is_password_autoset: boolean;
  is_tour_completed: boolean;
+  is_password_autoset: boolean;
  mobile_number: string | null;
  role: string | null;
  onboarding_step: {