dev: fix space authentication

.eslintrc-staged.js

@@ -1,59 +0,0 @@
-/**
- * Adds three new lint plugins over the existing configuration:
- * This is used to lint staged files only.
- * We should remove this file once the entire codebase follows these rules.
- */
-module.exports = {
-  root: true,
-  extends: [
-    "custom",
-  ],
-  parser: "@typescript-eslint/parser",
-  settings: {
-    "import/resolver": {
-      typescript: {},
-      node: {
-        moduleDirectory: ["node_modules", "."],
-      },
-    },
-  },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-};

.github/workflows/build-aio-base.yml

@@ -1,91 +0,0 @@
-name: Build AIO Base Image
-
-on:
-  workflow_dispatch:
-
-env:
-  TARGET_BRANCH: ${{ github.ref_name }}
-
-jobs:
-  base_build_setup:
-    name: Build Preparation
-    runs-on: ubuntu-latest
-    outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
-      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
-      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
-      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
-      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
-      build_base: ${{ steps.changed_files.outputs.base_any_changed }}
-
-    steps:
-      - id: set_env_variables
-        name: Set Environment Variables
-        run: |
-          echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
-          echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
-          echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
-          echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
-          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
-
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-      - name: Get changed files
-        id: changed_files
-        uses: tj-actions/changed-files@v42
-        with:
-          files_yaml: |
-            base: 
-              - aio/Dockerfile.base
-
-  base_build_push:
-    if: ${{ needs.base_build_setup.outputs.build_base == 'true' || github.event_name == 'workflow_dispatch' || needs.base_build_setup.outputs.gh_branch_name == 'master' }}
-    runs-on: ubuntu-latest
-    needs: [base_build_setup]
-    env:
-      BASE_IMG_TAG: makeplane/plane-aio-base:${{ needs.base_build_setup.outputs.gh_branch_name }}
-      TARGET_BRANCH: ${{ needs.base_build_setup.outputs.gh_branch_name }}
-      BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.base_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.base_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Set Docker Tag
-        run: |
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-aio-base:latest
-          else
-            TAG=${{ env.BASE_IMG_TAG }}
-          fi
-          echo "BASE_IMG_TAG=${TAG}" >> $GITHUB_ENV
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v5.1.0
-        with:
-          context: ./aio
-          file: ./aio/Dockerfile.base
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.BASE_IMG_TAG }}
-          push: true
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/build-branch.yml

@@ -14,7 +14,7 @@ env:
 
 jobs:
   branch_build_setup:
-    name: Build Setup
+    name: Build-Push Web/Space/API/Proxy Docker Image
     runs-on: ubuntu-latest
     outputs:
       gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
@@ -85,7 +85,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      FRONTEND_TAG: makeplane/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -95,9 +95,9 @@ jobs:
       - name: Set Frontend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-frontend:stable,makeplane/plane-frontend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-frontend:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest
           else
             TAG=${{ env.FRONTEND_TAG }}
           fi
@@ -137,7 +137,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      ADMIN_TAG: makeplane/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      ADMIN_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -147,9 +147,9 @@ jobs:
       - name: Set Admin Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-admin:stable,makeplane/plane-admin:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-admin:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:latest
           else
             TAG=${{ env.ADMIN_TAG }}
           fi
@@ -189,7 +189,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      SPACE_TAG: makeplane/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -199,9 +199,9 @@ jobs:
       - name: Set Space Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-space:stable,makeplane/plane-space:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-space:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
           else
             TAG=${{ env.SPACE_TAG }}
           fi
@@ -241,7 +241,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      BACKEND_TAG: makeplane/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -251,9 +251,9 @@ jobs:
       - name: Set Backend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-backend:stable,makeplane/plane-backend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-backend:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
@@ -293,7 +293,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      PROXY_TAG: makeplane/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -303,9 +303,9 @@ jobs:
       - name: Set Proxy Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-proxy:stable,makeplane/plane-proxy:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-proxy:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest
           else
             TAG=${{ env.PROXY_TAG }}
           fi

.github/workflows/build-test-pull-request.yml

@@ -3,11 +3,10 @@ name: Build and Lint on Pull Request
 on:
   workflow_dispatch:
   pull_request:
-    types: ["opened", "synchronize", "ready_for_review"]
+    types: ["opened", "synchronize"]
 
 jobs:
   get-changed-files:
-    if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     outputs:
       apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}
@@ -15,10 +14,10 @@ jobs:
       space_changed: ${{ steps.changed-files.outputs.space_any_changed }}
       web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v44
+        uses: tj-actions/changed-files@v41
         with:
           files_yaml: |
             apiserver:
@@ -50,9 +49,9 @@ jobs:
     runs-on: ubuntu-latest
     if: needs.get-changed-files.outputs.apiserver_changed == 'true'
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Set up Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v4
         with:
           python-version: "3.x" # Specify the Python version you need
       - name: Install Pylint
@@ -67,9 +66,9 @@ jobs:
     if: needs.get-changed-files.outputs.admin_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -80,9 +79,9 @@ jobs:
     if: needs.get-changed-files.outputs.space_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -93,9 +92,9 @@ jobs:
     if: needs.get-changed-files.outputs.web_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -105,9 +104,9 @@ jobs:
     needs: lint-admin
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -117,9 +116,9 @@ jobs:
     needs: lint-space
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -129,9 +128,9 @@ jobs:
     needs: lint-web
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install

.github/workflows/create-sync-pr.yml

@@ -64,6 +64,6 @@ jobs:
             echo "Pull Request already exists: $PR_EXISTS"
           else
             echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: community changes" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.gitignore

@@ -81,7 +81,4 @@ tmp/
 ## packages
 dist
 .temp/
-deploy/selfhost/plane-app/
-## Storybook
-*storybook.log
-output.css
+deploy/selfhost/plane-app/

.lintstagedrc.json

@@ -1,3 +0,0 @@
-{
-  "*.{ts,tsx,js,jsx}": ["eslint -c ./.eslintrc-staged.js", "prettier --check"]
-}

Dockerfile

@@ -0,0 +1,124 @@
+FROM node:18-alpine AS builder
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
+
+RUN yarn global add turbo
+RUN apk add tree
+COPY . .
+
+RUN turbo prune --scope=app --scope=plane-deploy --docker
+CMD tree -I node_modules/
+
+# Add lockfile and package.json's of isolated subworkspace
+FROM node:18-alpine AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install
+
+# # Build the project
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+COPY replace-env-vars.sh /usr/local/bin/
+
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+
+RUN yarn turbo run build
+
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL}
+
+FROM python:3.11.1-alpine3.17 AS backend
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1 
+
+WORKDIR /code
+
+RUN apk --no-cache add \
+    "libpq~=15" \
+    "libxslt~=1.1" \
+    "nodejs-current~=19" \
+    "xmlsec~=1.2" \
+    "nginx" \
+    "nodejs" \
+    "npm" \
+    "supervisor"
+
+COPY apiserver/requirements.txt ./
+COPY apiserver/requirements ./requirements
+RUN apk add --no-cache libffi-dev
+RUN apk add --no-cache --virtual .build-deps \
+    "bash~=5.2" \
+    "g++~=12.2" \
+    "gcc~=12.2" \
+    "cargo~=1.64" \
+    "git~=2" \
+    "make~=4.3" \
+    "postgresql13-dev~=13" \
+    "libc-dev" \
+    "linux-headers" \
+    && \
+    pip install -r requirements.txt --compile --no-cache-dir \
+    && \
+    apk del .build-deps
+
+# Add in Django deps and generate Django's static files
+COPY apiserver/manage.py manage.py
+COPY apiserver/plane plane/
+COPY apiserver/templates templates/
+
+RUN apk --no-cache add "bash~=5.2"
+COPY apiserver/bin ./bin/
+
+RUN chmod +x ./bin/takeoff ./bin/worker
+RUN chmod -R 777 /code
+
+# Expose container port and run entry point script
+
+WORKDIR /app
+
+COPY --from=installer /app/apps/app/next.config.js .
+COPY --from=installer /app/apps/app/package.json .
+COPY --from=installer /app/apps/space/next.config.js .
+COPY --from=installer /app/apps/space/package.json .
+
+COPY --from=installer /app/apps/app/.next/standalone ./
+
+COPY --from=installer /app/apps/app/.next/static ./apps/app/.next/static
+
+COPY --from=installer /app/apps/space/.next/standalone ./
+COPY --from=installer /app/apps/space/.next ./apps/space/.next
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN rm /etc/nginx/conf.d/default.conf
+#######################################################################
+COPY nginx/nginx-single-docker-image.conf /etc/nginx/http.d/default.conf
+#######################################################################
+
+COPY nginx/supervisor.conf /code/supervisor.conf
+
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+COPY replace-env-vars.sh /usr/local/bin/
+COPY start.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+RUN chmod +x /usr/local/bin/start.sh
+
+EXPOSE 80
+
+CMD ["supervisord","-c","/code/supervisor.conf"]

README.md

@@ -48,7 +48,7 @@ Meet [Plane](https://dub.sh/plane-website-readme), an open-source project manage
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account.
 
-If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/self-hosting/overview).
+If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/docker-compose).
 
 | Installation methods | Docs link                                                                                                                                          |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |

admin/.eslintrc.js

@@ -10,43 +10,5 @@ module.exports = {
       },
     },
   },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling",],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          }
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
+  rules: {}
 }

admin/Dockerfile.admin

@@ -29,21 +29,15 @@ COPY turbo.json turbo.json
 ARG NEXT_PUBLIC_API_BASE_URL=""
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
 
-ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
-ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
 
 ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
 ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
 
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
-
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV TURBO_TELEMETRY_DISABLED 1
 
@@ -65,21 +59,15 @@ COPY --from=installer /app/admin/public ./admin/public
 ARG NEXT_PUBLIC_API_BASE_URL=""
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
 
-ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
-ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
 
 ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
 ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
 
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
-
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV TURBO_TELEMETRY_DISABLED 1
 

admin/app/ai/components/ai-config-form.tsx

@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
-import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
+import { ControllerInput, TControllerInputFormField } from "components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/ai/components/index.ts

@@ -0,0 +1 @@
+export * from "./ai-config-form";

admin/app/ai/layout.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
-export const metadata: Metadata = {
-  title: "AI Settings - God Mode",
-};
-
-export default function AILayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface AILayoutProps {
+  children: ReactNode;
 }
+
+const AILayout = ({ children }: AILayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default AILayout;

admin/app/ai/page.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { InstanceAIForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import { InstanceAIForm } from "./form";
 
 const InstanceAIPage = observer(() => {
   // store
@@ -19,14 +18,14 @@ const InstanceAIPage = observer(() => {
   return (
     <>
       <PageHeader title="Artificial Intelligence - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceAIForm config={formattedConfig} />
           ) : (

admin/app/authentication/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./authentication-method-card";

admin/app/authentication/components/email-config-switch.tsx

@@ -3,11 +3,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
 import { useInstance } from "@/hooks/store";
 // ui
+import { ToggleSwitch } from "@plane/ui";
 // types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/components/gitlab-config.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react-lite";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// types
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GitlabConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
-  const isGitlabConfigured = !!formattedConfig?.GITLAB_CLIENT_ID && !!formattedConfig?.GITLAB_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGitlabConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGitlabConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGitlabConfig)) === true
-                ? updateConfig("IS_GITLAB_ENABLED", "0")
-                : updateConfig("IS_GITLAB_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/gitlab"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/app/authentication/components/index.ts

@@ -1,6 +1,3 @@
+export * from "./common";
 export * from "./email-config-switch";
 export * from "./password-config-switch";
-export * from "./authentication-method-card";
-export * from "./gitlab-config";
-export * from "./github-config";
-export * from "./google-config";

admin/app/authentication/components/password-config-switch.tsx

@@ -3,11 +3,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
 import { useInstance } from "@/hooks/store";
 // ui
+import { ToggleSwitch } from "@plane/ui";
 // types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/github/components/github-config-form.tsx

@@ -1,9 +1,8 @@
 import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import Link from "next/link";
+// hooks
+import { useInstance } from "@/hooks/store";
 // ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
@@ -13,11 +12,12 @@ import {
   CopyField,
   TControllerInputFormField,
   TCopyField,
-} from "@/components/common";
+} from "components/common";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { API_BASE_URL, cn } from "helpers/common.helper";
+import isEmpty from "lodash/isEmpty";
 
 type Props = {
   config: IFormattedInstanceConfiguration;
@@ -46,7 +46,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
 
   const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
 
-  const GITHUB_FORM_FIELDS: TControllerInputFormField[] = [
+  const githubFormFields: TControllerInputFormField[] = [
     {
       key: "GITHUB_CLIENT_ID",
       type: "text",
@@ -55,7 +55,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         <>
           You will get this from your{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-custom-primary-100 hover:underline"
@@ -77,7 +76,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         <>
           Your client secret is also found in your{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-custom-primary-100 hover:underline"
@@ -93,7 +91,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const GITHUB_SERVICE_FIELD: TCopyField[] = [
+  const githubCopyFields: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -102,7 +100,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         <>
           We will auto-generate this. Paste this into the Authorized origin URL field{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-custom-primary-100 hover:underline"
@@ -121,7 +118,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         <>
           We will auto-generate this. Paste this into your Authorized Callback URI field{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-custom-primary-100 hover:underline"
@@ -138,16 +134,13 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
     const payload: Partial<GithubConfigFormValues> = { ...formData };
 
     await updateInstanceConfigurations(payload)
-      .then((response = []) => {
+      .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message: "Github Configuration Settings updated successfully",
         });
-        reset({
-          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
-          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
-        });
+        reset();
       })
       .catch((err) => console.error(err));
   };
@@ -170,7 +163,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
           <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
             <div className="pt-2 text-xl font-medium">Configuration</div>
-            {GITHUB_FORM_FIELDS.map((field) => (
+            {githubFormFields.map((field) => (
               <ControllerInput
                 key={field.key}
                 control={control}
@@ -201,7 +194,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
           <div className="col-span-2 md:col-span-1">
             <div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
               <div className="pt-2 text-xl font-medium">Service provider details</div>
-              {GITHUB_SERVICE_FIELD.map((field) => (
+              {githubCopyFields.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
             </div>

admin/app/authentication/github/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./github-config-form";

admin/app/authentication/github/components/root.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks/store";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // icons
 import { Settings2 } from "lucide-react";
 // types
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { cn } from "helpers/common.helper";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/github/page.tsx

@@ -1,23 +1,22 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGithubConfigForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
 // icons
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
-// local components
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGithubConfigForm } from "./form";
 
 const InstanceGithubAuthenticationPage = observer(() => {
   // store
@@ -64,8 +63,8 @@ const InstanceGithubAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Github"
             description="Allow members to login or sign up to plane with their Github accounts."
@@ -93,7 +92,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceGithubConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/gitlab/form.tsx

@@ -1,212 +0,0 @@
-import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
-// ui
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// components
-import {
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
-
-export const InstanceGitlabConfigForm: FC<Props> = (props) => {
-  const { config } = props;
-  // states
-  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
-  // store hooks
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors, isDirty, isSubmitting },
-  } = useForm<GitlabConfigFormValues>({
-    defaultValues: {
-      GITLAB_HOST: config["GITLAB_HOST"],
-      GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
-      GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
-    },
-  });
-
-  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
-
-  const GITLAB_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "GITLAB_HOST",
-      type: "text",
-      label: "Host",
-      description: (
-        <>
-          This is the <b>GitLab host</b> to use for login, <b>including scheme</b>.
-        </>
-      ),
-      placeholder: "https://gitlab.com",
-      error: Boolean(errors.GITLAB_HOST),
-      required: true,
-    },
-    {
-      key: "GITLAB_CLIENT_ID",
-      type: "text",
-      label: "Application ID",
-      description: (
-        <>
-          Get this from your{" "}
-          <a
-            tabIndex={-1}
-            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitLab OAuth application settings
-          </a>
-          .
-        </>
-      ),
-      placeholder: "c2ef2e7fc4e9d15aa7630f5637d59e8e4a27ff01dceebdb26b0d267b9adcf3c3",
-      error: Boolean(errors.GITLAB_CLIENT_ID),
-      required: true,
-    },
-    {
-      key: "GITLAB_CLIENT_SECRET",
-      type: "password",
-      label: "Secret",
-      description: (
-        <>
-          The client secret is also found in your{" "}
-          <a
-            tabIndex={-1}
-            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitLab OAuth application settings
-          </a>
-          .
-        </>
-      ),
-      placeholder: "gloas-f79cfa9a03c97f6ffab303177a5a6778a53c61e3914ba093412f68a9298a1b28",
-      error: Boolean(errors.GITLAB_CLIENT_SECRET),
-      required: true,
-    },
-  ];
-
-  const GITLAB_SERVICE_FIELD: TCopyField[] = [
-    {
-      key: "Callback_URL",
-      label: "Callback URL",
-      url: `${originURL}/auth/gitlab/callback/`,
-      description: (
-        <>
-          We will auto-generate this. Paste this into the <b>Redirect URI</b> field of your{" "}
-          <a
-            tabIndex={-1}
-            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitLab OAuth application
-          </a>
-          .
-        </>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: GitlabConfigFormValues) => {
-    const payload: Partial<GitlabConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "GitLab Configuration Settings updated successfully",
-        });
-        reset({
-          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
-          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
-          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
-  };
-
-  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    if (isDirty) {
-      e.preventDefault();
-      setIsDiscardChangesModalOpen(true);
-    }
-  };
-
-  return (
-    <>
-      <ConfirmDiscardModal
-        isOpen={isDiscardChangesModalOpen}
-        onDiscardHref="/authentication"
-        handleClose={() => setIsDiscardChangesModalOpen(false)}
-      />
-      <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
-            <div className="pt-2 text-xl font-medium">Configuration</div>
-            {GITLAB_FORM_FIELDS.map((field) => (
-              <ControllerInput
-                key={field.key}
-                control={control}
-                type={field.type}
-                name={field.key}
-                label={field.label}
-                description={field.description}
-                placeholder={field.placeholder}
-                error={field.error}
-                required={field.required}
-              />
-            ))}
-            <div className="flex flex-col gap-1 pt-4">
-              <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
-                  Go back
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Service provider details</div>
-              {GITLAB_SERVICE_FIELD.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

admin/app/authentication/gitlab/page.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-import useSWR from "swr";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/core";
-// hooks
-import { useInstance } from "@/hooks/store";
-// icons
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-// local components
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGitlabConfigForm } from "./form";
-
-const InstanceGitlabAuthenticationPage = observer(() => {
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-  // state
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // config
-  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
-
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
-  const updateConfig = async (key: "IS_GITLAB_ENABLED", value: string) => {
-    setIsSubmitting(true);
-
-    const payload = {
-      [key]: value,
-    };
-
-    const updateConfigPromise = updateInstanceConfigurations(payload);
-
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
-      success: {
-        title: "Configuration saved",
-        message: () => `GitLab authentication is now ${value ? "active" : "disabled"}.`,
-      },
-      error: {
-        title: "Error",
-        message: () => "Failed to save configuration",
-      },
-    });
-
-    await updateConfigPromise
-      .then(() => {
-        setIsSubmitting(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmitting(false);
-      });
-  };
-  return (
-    <>
-      <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <AuthenticationMethodCard
-            name="GitLab"
-            description="Allow members to login or sign up to plane with their GitLab accounts."
-            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
-            config={
-              <ToggleSwitch
-                value={Boolean(parseInt(enableGitlabConfig))}
-                onChange={() => {
-                  Boolean(parseInt(enableGitlabConfig)) === true
-                    ? updateConfig("IS_GITLAB_ENABLED", "0")
-                    : updateConfig("IS_GITLAB_ENABLED", "1");
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
-          {formattedConfig ? (
-            <InstanceGitlabConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default InstanceGitlabAuthenticationPage;

admin/app/authentication/google/components/google-config-form.tsx

@@ -1,9 +1,8 @@
 import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import Link from "next/link";
+// hooks
+import { useInstance } from "@/hooks/store";
 // ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
@@ -13,11 +12,12 @@ import {
   CopyField,
   TControllerInputFormField,
   TCopyField,
-} from "@/components/common";
+} from "components/common";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { API_BASE_URL, cn } from "helpers/common.helper";
+import isEmpty from "lodash/isEmpty";
 
 type Props = {
   config: IFormattedInstanceConfiguration;
@@ -46,7 +46,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
 
   const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
 
-  const GOOGLE_FORM_FIELDS: TControllerInputFormField[] = [
+  const googleFormFields: TControllerInputFormField[] = [
     {
       key: "GOOGLE_CLIENT_ID",
       type: "text",
@@ -55,7 +55,6 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
         <>
           Your client ID lives in your Google API Console.{" "}
           <a
-            tabIndex={-1}
             href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
             target="_blank"
             className="text-custom-primary-100 hover:underline"
@@ -77,7 +76,6 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
         <>
           Your client secret should also be in your Google API Console.{" "}
           <a
-            tabIndex={-1}
             href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
             target="_blank"
             className="text-custom-primary-100 hover:underline"
@@ -93,7 +91,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+  const googleCopyFeilds: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -136,16 +134,13 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
     const payload: Partial<GoogleConfigFormValues> = { ...formData };
 
     await updateInstanceConfigurations(payload)
-      .then((response = []) => {
+      .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message: "Google Configuration Settings updated successfully",
         });
-        reset({
-          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
-          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
-        });
+        reset();
       })
       .catch((err) => console.error(err));
   };
@@ -168,7 +163,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
         <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
           <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
             <div className="pt-2 text-xl font-medium">Configuration</div>
-            {GOOGLE_FORM_FIELDS.map((field) => (
+            {googleFormFields.map((field) => (
               <ControllerInput
                 key={field.key}
                 control={control}
@@ -199,7 +194,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
           <div className="col-span-2 md:col-span-1">
             <div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
               <div className="pt-2 text-xl font-medium">Service provider details</div>
-              {GOOGLE_SERVICE_DETAILS.map((field) => (
+              {googleCopyFeilds.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
             </div>

admin/app/authentication/google/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./google-config-form";

admin/app/authentication/google/components/root.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks/store";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // icons
 import { Settings2 } from "lucide-react";
 // types
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { cn } from "helpers/common.helper";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/google/page.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGoogleConfigForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
 import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGoogleConfigForm } from "./form";
 
 const InstanceGoogleAuthenticationPage = observer(() => {
   // store
@@ -58,8 +57,8 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Google"
             description="Allow members to login or sign up to plane with their Google
@@ -81,7 +80,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceGoogleConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/layout.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
-export const metadata: Metadata = {
-  title: "Authentication Settings - God Mode",
-};
-
-export default function AuthenticationLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface AuthenticationLayoutProps {
+  children: ReactNode;
 }
+
+const AuthenticationLayout = ({ children }: AuthenticationLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default AuthenticationLayout;

admin/app/authentication/page.tsx

@@ -1,33 +1,26 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Mails, KeyRound } from "lucide-react";
+import { Loader, setPromiseToast } from "@plane/ui";
 import { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
+import { AuthenticationMethodCard, EmailCodesConfiguration, PasswordLoginConfiguration } from "./components";
+import { GoogleConfiguration } from "./google/components";
+import { GithubConfiguration } from "./github/components";
 import { PageHeader } from "@/components/core";
 // hooks
-// helpers
-import { cn, resolveGeneralTheme } from "@/helpers/common.helper";
 import { useInstance } from "@/hooks/store";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
 // images
+import GoogleLogo from "@/public/logos/google-logo.svg";
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import {
-  AuthenticationMethodCard,
-  EmailCodesConfiguration,
-  PasswordLoginConfiguration,
-  GitlabConfiguration,
-  GithubConfiguration,
-  GoogleConfiguration,
-} from "./components";
 
 type TInstanceAuthenticationMethodCard = {
   key: string;
@@ -47,8 +40,6 @@ const InstanceAuthenticationPage = observer(() => {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // theme
   const { resolvedTheme } = useTheme();
-  // derived values
-  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
   const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
     setIsSubmitting(true);
@@ -118,56 +109,22 @@ const InstanceAuthenticationPage = observer(() => {
       ),
       config: <GithubConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
     },
-    {
-      key: "gitlab",
-      name: "GitLab",
-      description: "Allow members to login or sign up to plane with their GitLab accounts.",
-      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-      config: <GitlabConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
   ];
 
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure authentication modes for your team and restrict sign ups to be invite only.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className="text-lg font-medium pb-1">Sign-up configuration</div>
-              <div className={cn("w-full flex items-center gap-14 rounded")}>
-                <div className="flex grow items-center gap-4">
-                  <div className="grow">
-                    <div className={cn("font-medium leading-5 text-custom-text-100 text-sm")}>
-                      Allow anyone to sign up without invite
-                    </div>
-                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                      Toggling this off will disable self sign ups.
-                    </div>
-                  </div>
-                </div>
-                <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
-                  <div className="flex items-center gap-4">
-                    <ToggleSwitch
-                      value={Boolean(parseInt(enableSignUpConfig))}
-                      onChange={() => {
-                        Boolean(parseInt(enableSignUpConfig)) === true
-                          ? updateConfig("ENABLE_SIGNUP", "0")
-                          : updateConfig("ENABLE_SIGNUP", "1");
-                      }}
-                      size="sm"
-                      disabled={isSubmitting}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="text-lg font-medium pt-6">Authentication modes</div>
+              <div className="text-lg font-medium">Authentication modes</div>
               {authenticationMethodsCard.map((method) => (
                 <AuthenticationMethodCard
                   key={method.key}

admin/app/email/components/email-config-form.tsx

@@ -1,15 +1,14 @@
 import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
 // ui
 import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-// local components
+import { ControllerInput, TControllerInputFormField } from "components/common";
 import { SendTestEmailModal } from "./test-email-modal";
+// types
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
 
 type IInstanceEmailForm = {
   config: IFormattedInstanceConfiguration;

admin/app/email/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./email-config-form";
+export * from "./test-email-modal";

admin/app/email/components/test-email-modal.tsx

@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, Input } from "@plane/ui";
 // services
-import { InstanceService } from "@/services/instance.service";
+import { InstanceService } from "services/instance.service";
 
 type Props = {
   isOpen: boolean;
@@ -51,7 +51,7 @@ export const SendTestEmailModal: FC<Props> = (props) => {
         setSendEmailStep(ESendEmailSteps.SUCCESS);
       })
       .catch((error) => {
-        setError(error?.error || "Failed to send email");
+        setError(error?.message || "Failed to send email");
         setSendEmailStep(ESendEmailSteps.FAILED);
       })
       .finally(() => {

admin/app/email/layout.tsx

@@ -1,15 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
 interface EmailLayoutProps {
   children: ReactNode;
 }
 
-export const metadata: Metadata = {
-  title: "Email Settings - God Mode",
-};
-
-const EmailLayout = ({ children }: EmailLayoutProps) => <AdminLayout>{children}</AdminLayout>;
+const EmailLayout = ({ children }: EmailLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
 
 export default EmailLayout;

admin/app/email/page.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { InstanceEmailForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import { InstanceEmailForm } from "./email-config-form";
 
 const InstanceEmailPage = observer(() => {
   // store
@@ -19,8 +18,8 @@ const InstanceEmailPage = observer(() => {
   return (
     <>
       <PageHeader title="Email - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Plane can send useful emails to you and your users from your own instance without talking to the Internet.
@@ -30,7 +29,7 @@ const InstanceEmailPage = observer(() => {
             </div>
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceEmailForm config={formattedConfig} />
           ) : (

admin/app/error.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-export default function RootErrorPage() {
-  return (
-    <div>
-      <p>Something went wrong.</p>
-    </div>
-  );
-}

admin/app/general/components/general-config-form.tsx

@@ -1,23 +1,19 @@
-"use client";
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
-// types
 import { IInstance, IInstanceAdmin } from "@plane/types";
-// ui
 import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 
 export interface IGeneralConfigurationForm {
-  instance: IInstance;
+  instance: IInstance["instance"];
   instanceAdmins: IInstanceAdmin[];
 }
 
-export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = (props) => {
   const { instance, instanceAdmins } = props;
   // hooks
   const { updateInstanceInfo } = useInstance();
@@ -26,15 +22,15 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
     handleSubmit,
     control,
     formState: { errors, isSubmitting },
-  } = useForm<Partial<IInstance>>({
+  } = useForm<Partial<IInstance["instance"]>>({
     defaultValues: {
-      instance_name: instance?.instance_name,
-      is_telemetry_enabled: instance?.is_telemetry_enabled,
+      instance_name: instance.instance_name,
+      is_telemetry_enabled: instance.is_telemetry_enabled,
     },
   });
 
-  const onSubmit = async (formData: Partial<IInstance>) => {
-    const payload: Partial<IInstance> = { ...formData };
+  const onSubmit = async (formData: Partial<IInstance["instance"]>) => {
+    const payload: Partial<IInstance["instance"]> = { ...formData };
 
     console.log("payload", payload);
 
@@ -137,4 +133,4 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
       </div>
     </div>
   );
-});
+};

admin/app/general/components/index.ts

@@ -0,0 +1 @@
+export * from "./general-config-form";

admin/app/general/layout.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
-export const metadata: Metadata = {
-  title: "General Settings - God Mode",
-};
-
-export default function GeneralLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface GeneralLayoutProps {
+  children: ReactNode;
 }
+
+const GeneralLayout = ({ children }: GeneralLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default GeneralLayout;

admin/app/general/page.tsx

@@ -1,31 +1,34 @@
 "use client";
+
 import { observer } from "mobx-react-lite";
+// components
+import { PageHeader } from "@/components/core";
+import { GeneralConfigurationForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import { GeneralConfigurationForm } from "./form";
 
-function GeneralPage() {
+const GeneralPage = observer(() => {
   const { instance, instanceAdmins } = useInstance();
-  console.log("instance", instance);
+
   return (
     <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <PageHeader title="General Settings - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">General settings</div>
           <div className="text-sm font-normal text-custom-text-300">
             Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
             instance.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {instance && instanceAdmins && (
-            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
+        <div className="flex-grow overflow-hidden overflow-y-auto">
+          {instance?.instance && instanceAdmins && instanceAdmins?.length > 0 && (
+            <GeneralConfigurationForm instance={instance?.instance} instanceAdmins={instanceAdmins} />
           )}
         </div>
       </div>
     </>
   );
-}
+});
 
-export default observer(GeneralPage);
+export default GeneralPage;

admin/app/globals.css

@@ -45,8 +45,8 @@
     --color-primary-900: 13, 24, 51;
 
     --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
 
     --color-text-100: 23, 23, 23; /* primary text */
     --color-text-200: 58, 58, 58; /* secondary text */
@@ -60,39 +60,66 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.06),
       0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16),
+      0px 2px 4px 0px rgba(16, 24, 40, 0.12),
       0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
-      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01),
+      0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1),
+      0px 4px 4px 0px rgba(16, 24, 40, 0.08),
       0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12),
+      0px 6px 12px 0px rgba(16, 24, 40, 0.12),
       0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12),
+      0px 8px 16px 0px rgba(0, 0, 0, 0.12),
       0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16),
+      0px 0px 24px 0px rgba(16, 24, 40, 0.16),
       0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 12px 24px 0px rgba(16, 24, 40, 0.12),
       0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12),
+      0px 16px 32px 0px rgba(0, 0, 0, 0.12),
       0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05),
+      0px 12px 32px -16px rgba(0, 0, 0, 0.05);
 
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+    --color-sidebar-background-100: var(
+      --color-background-100
+    ); /* primary sidebar bg */
+    --color-sidebar-background-90: var(
+      --color-background-90
+    ); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(
+      --color-background-80
+    ); /* tertiary sidebar bg */
 
     --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-200: var(
+      --color-text-200
+    ); /* secondary sidebar text */
     --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+    --color-sidebar-text-400: var(
+      --color-text-400
+    ); /* sidebar placeholder text */
 
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-100: var(
+      --color-border-100
+    ); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(
+      --color-border-100
+    ); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(
+      --color-border-100
+    ); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(
+      --color-border-100
+    ); /* strong sidebar border- 2 */
 
     --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
     --color-sidebar-shadow-xs: var(--color-shadow-xs);
@@ -111,8 +138,8 @@
     color-scheme: light !important;
 
     --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
   }
 
   [data-theme="light"] {
@@ -129,10 +156,26 @@
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
     /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+    --gradient-onboarding-100: linear-gradient(
+      106deg,
+      #f2f6ff 29.8%,
+      #e1eaff 99.34%
+    );
+    --gradient-onboarding-200: linear-gradient(
+      129deg,
+      rgba(255, 255, 255, 0) -22.23%,
+      rgba(255, 255, 255, 0.8) 62.98%
+    );
+    --gradient-onboarding-300: linear-gradient(
+      164deg,
+      #fff 4.25%,
+      rgba(255, 255, 255, 0.06) 93.5%
+    );
+    --gradient-onboarding-400: linear-gradient(
+      129deg,
+      rgba(255, 255, 255, 0) -22.23%,
+      rgba(255, 255, 255, 0.8) 62.98%
+    );
 
     --color-onboarding-text-100: 23, 23, 23;
     --color-onboarding-text-200: 58, 58, 58;
@@ -190,19 +233,28 @@
   [data-theme="dark-contrast"] {
     color-scheme: dark !important;
 
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
 
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2),
+      0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2),
+      0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2),
+      0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25),
+      0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25),
+      0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3),
+      0px 12px 40px 0px rgba(0, 0, 0, 0.65);
   }
 
   [data-theme="dark"] {
@@ -219,9 +271,21 @@
     --color-border-400: 58, 58, 58; /* strong border- 2 */
 
     /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
+    --gradient-onboarding-100: linear-gradient(
+      106deg,
+      #18191b 25.17%,
+      #18191b 99.34%
+    );
+    --gradient-onboarding-200: linear-gradient(
+      129deg,
+      rgba(47, 49, 53, 0.8) -22.23%,
+      rgba(33, 34, 37, 0.8) 62.98%
+    );
+    --gradient-onboarding-300: linear-gradient(
+      167deg,
+      rgba(47, 49, 53, 0.45) 19.22%,
+      #212225 98.48%
+    );
 
     --color-onboarding-text-100: 237, 238, 240;
     --color-onboarding-text-200: 176, 180, 187;
@@ -298,19 +362,37 @@
     --color-primary-800: 19, 35, 76;
     --color-primary-900: 13, 24, 51;
 
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+    --color-sidebar-background-100: var(
+      --color-background-100
+    ); /* primary sidebar bg */
+    --color-sidebar-background-90: var(
+      --color-background-90
+    ); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(
+      --color-background-80
+    ); /* tertiary sidebar bg */
 
     --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-200: var(
+      --color-text-200
+    ); /* secondary sidebar text */
     --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+    --color-sidebar-text-400: var(
+      --color-text-400
+    ); /* sidebar placeholder text */
 
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+    --color-sidebar-border-100: var(
+      --color-border-100
+    ); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(
+      --color-border-200
+    ); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(
+      --color-border-300
+    ); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(
+      --color-border-400
+    ); /* strong sidebar border- 2 */
   }
 }
 
@@ -332,90 +414,42 @@ body {
 }
 
 /* scrollbar style */
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
+::-webkit-scrollbar {
+  display: none;
 }
 
-.vertical-scrollbar {
-  overflow-y: auto;
+.horizontal-scroll-enable {
+  overflow-x: scroll;
 }
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
+
+.horizontal-scroll-enable::-webkit-scrollbar {
   display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
+  height: 7px;
+  width: 0;
 }
 
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+  height: 7px;
+  background-color: rgba(var(--color-background-100));
 }
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
 
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
+.horizontal-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-scrollbar));
 }
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
+
+.vertical-scroll-enable::-webkit-scrollbar {
+  display: block;
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-track {
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-90));
 }
 /* end scrollbar style */
 

admin/app/image/components/image-config-form.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { useForm } from "react-hook-form";
-import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/image/components/index.ts

@@ -0,0 +1 @@
+export * from "./image-config-form";

admin/app/image/layout.tsx

@@ -1,15 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
 interface ImageLayoutProps {
   children: ReactNode;
 }
 
-export const metadata: Metadata = {
-  title: "Images Settings - God Mode",
-};
-
-const ImageLayout = ({ children }: ImageLayoutProps) => <AdminLayout>{children}</AdminLayout>;
+const ImageLayout = ({ children }: ImageLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
 
 export default ImageLayout;

admin/app/image/page.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { InstanceImageConfigForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// local
-import { InstanceImageConfigForm } from "./form";
 
 const InstanceImagePage = observer(() => {
   // store
@@ -19,14 +18,14 @@ const InstanceImagePage = observer(() => {
   return (
     <>
       <PageHeader title="Image - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
           <div className="text-sm font-normal text-custom-text-300">
             Let your users search and choose images from third-party libraries
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceImageConfigForm config={formattedConfig} />
           ) : (

admin/app/layout.tsx

@@ -1,48 +1,46 @@
 "use client";
 
 import { ReactNode } from "react";
-import { ThemeProvider, useTheme } from "next-themes";
-import { SWRConfig } from "swr";
-// ui
-import { Toast } from "@plane/ui";
-// constants
-import { SWR_CONFIG } from "@/constants/swr-config";
-// helpers
-import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
+import { ThemeProvider } from "next-themes";
 // lib
-import { InstanceProvider } from "@/lib/instance-provider";
-import { StoreProvider } from "@/lib/store-provider";
-import { UserProvider } from "@/lib/user-provider";
+import { StoreProvider } from "@/lib/store-context";
+import { AppWrapper } from "@/lib/wrappers";
+// constants
+import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
+// helpers
+import { ASSET_PREFIX } from "@/helpers/common.helper";
 // styles
 import "./globals.css";
 
-function RootLayout({ children }: { children: ReactNode }) {
-  // themes
-  const { resolvedTheme } = useTheme();
-
-  return (
-    <html lang="en">
-      <head>
-        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
-      </head>
-      <body className={`antialiased`}>
-        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <Toast theme={resolveGeneralTheme(resolvedTheme)} />
-          <SWRConfig value={SWR_CONFIG}>
-            <StoreProvider>
-              <InstanceProvider>
-                <UserProvider>{children}</UserProvider>
-              </InstanceProvider>
-            </StoreProvider>
-          </SWRConfig>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
+interface RootLayoutProps {
+  children: ReactNode;
 }
 
+const RootLayout = ({ children, ...pageProps }: RootLayoutProps) => (
+  <html lang="en">
+    <head>
+      <title>{SITE_TITLE}</title>
+      <meta property="og:site_name" content={SITE_NAME} />
+      <meta property="og:title" content={SITE_TITLE} />
+      <meta property="og:url" content={SITE_URL} />
+      <meta name="description" content={SITE_DESCRIPTION} />
+      <meta property="og:description" content={SITE_DESCRIPTION} />
+      <meta name="keywords" content={SITE_KEYWORDS} />
+      <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+      <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
+      <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
+      <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
+      <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
+      <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
+    </head>
+    <body className={`antialiased`}>
+      <StoreProvider {...pageProps}>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <AppWrapper>{children}</AppWrapper>
+        </ThemeProvider>
+      </StoreProvider>
+    </body>
+  </html>
+);
+
 export default RootLayout;

admin/app/page.tsx

@@ -1,30 +1,26 @@
-import { Metadata } from "next";
-// components
-import { InstanceSignInForm } from "@/components/login";
+"use client";
+
 // layouts
-import { DefaultLayout } from "@/layouts/default-layout";
+import { DefaultLayout } from "@/layouts";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceSignInForm } from "@/components/login";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+// helpers
+import { EAuthenticationPageType, EInstancePageType } from "@/helpers";
 
-export const metadata: Metadata = {
-  title: "Plane | Simple, extensible, open-source project management tool.",
-  description:
-    "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-  openGraph: {
-    title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-    url: "https://plane.so/",
-  },
-  keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
-  twitter: {
-    site: "@planepowers",
-  },
-};
+const LoginPage = () => (
+  <>
+    <PageHeader title="Login - God Mode" />
+    <InstanceWrapper pageType={EInstancePageType.POST_SETUP}>
+      <AuthWrapper authType={EAuthenticationPageType.NOT_AUTHENTICATED}>
+        <DefaultLayout>
+          <InstanceSignInForm />
+        </DefaultLayout>
+      </AuthWrapper>
+    </InstanceWrapper>
+  </>
+);
 
-export default async function LoginPage() {
-  return (
-    <DefaultLayout>
-      <InstanceSignInForm />
-    </DefaultLayout>
-  );
-}
+export default LoginPage;

admin/app/setup/components/index.ts

@@ -0,0 +1 @@
+export * from "./sign-up-form";

admin/app/setup/components/sign-up-form.tsx

@@ -2,17 +2,17 @@
 
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
-// icons
-import { Eye, EyeOff } from "lucide-react";
+// services
+import { AuthService } from "@/services/auth.service";
 // ui
 import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 // components
-import { Banner, PasswordStrengthMeter } from "@/components/common";
+import { Banner, PasswordStrengthMeter } from "components/common";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
-// services
-import { AuthService } from "@/services/auth.service";
 
 // service initialization
 const authService = new AuthService();
@@ -52,7 +52,7 @@ const defaultFromData: TFormData = {
   is_telemetry_enabled: true,
 };
 
-export const InstanceSetupForm: FC = (props) => {
+export const InstanceSignUpForm: FC = (props) => {
   const {} = props;
   // search params
   const searchParams = useSearchParams();
@@ -64,18 +64,11 @@ export const InstanceSetupForm: FC = (props) => {
   const errorCode = searchParams.get("error_code") || undefined;
   const errorMessage = searchParams.get("error_message") || undefined;
   // state
-  const [showPassword, setShowPassword] = useState({
-    password: false,
-    retypePassword: false,
-  });
+  const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
-
-  const handleShowPassword = (key: keyof typeof showPassword) =>
-    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -128,12 +121,8 @@ export const InstanceSetupForm: FC = (props) => {
     [formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
   );
 
-  const password = formData?.password ?? "";
-  const confirmPassword = formData?.confirm_password ?? "";
-  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
-
   return (
-    <div className="max-w-lg lg:max-w-md w-full">
+    <div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 flex flex-col justify-center items-center">
       <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">
@@ -158,15 +147,14 @@ export const InstanceSetupForm: FC = (props) => {
           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="flex 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"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="first_name"
                 name="first_name"
                 type="text"
@@ -179,10 +167,10 @@ export const InstanceSetupForm: FC = (props) => {
             </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>
+                Last name
               </label>
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="last_name"
                 name="last_name"
                 type="text"
@@ -199,7 +187,7 @@ export const InstanceSetupForm: FC = (props) => {
               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"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -216,10 +204,10 @@ export const InstanceSetupForm: FC = (props) => {
 
           <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>
+              Company name
             </label>
             <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="company_name"
               name="company_name"
               type="text"
@@ -236,10 +224,10 @@ export const InstanceSetupForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
-                type={showPassword.password ? "text" : "password"}
+                type={showPassword ? "text" : "password"}
                 inputSize="md"
                 placeholder="New password..."
                 value={formData.password}
@@ -248,21 +236,19 @@ export const InstanceSetupForm: FC = (props) => {
                 onFocus={() => setIsPasswordInputFocused(true)}
                 onBlur={() => setIsPasswordInputFocused(false)}
               />
-              {showPassword.password ? (
+              {showPassword ? (
                 <button
                   type="button"
-                  tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
+                  onClick={() => setShowPassword(false)}
                 >
                   <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")}
+                  onClick={() => setShowPassword(true)}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
@@ -276,11 +262,11 @@ export const InstanceSetupForm: FC = (props) => {
 
           <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>
+              Confirm password
             </label>
             <div className="relative">
               <Input
-                type={showPassword.retypePassword ? "text" : "password"}
+                type={showPassword ? "text" : "password"}
                 id="confirm_password"
                 name="confirm_password"
                 inputSize="md"
@@ -288,38 +274,36 @@ export const InstanceSetupForm: FC = (props) => {
                 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 ? (
+              {showPassword ? (
                 <button
                   type="button"
-                  tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
+                  onClick={() => setShowPassword(false)}
                 >
                   <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")}
+                  onClick={() => setShowPassword(true)}
                 >
                   <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>}
+            {!!formData.confirm_password && formData.password !== formData.confirm_password && (
+              <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
                 id="is_telemetry_enabled"
+                name="is_telemetry_enabled"
+                value={formData.is_telemetry_enabled ? "True" : "False"}
                 onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
                 checked={formData.is_telemetry_enabled}
               />
@@ -330,13 +314,7 @@ export const InstanceSetupForm: FC = (props) => {
             >
               Allow Plane to anonymously collect usage events.
             </label>
-            <a
-              tabIndex={-1}
-              href="https://docs.plane.so/telemetry"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-500 hover:text-blue-600"
-            >
+            <a href="https://docs.plane.so/telemetry" className="text-sm font-medium text-blue-500 hover:text-blue-600">
               See More
             </a>
           </div>

admin/app/setup/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ReactNode } from "react";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+// helpers
+import { EAuthenticationPageType, EInstancePageType } from "@/helpers";
+
+interface SetupLayoutProps {
+  children: ReactNode;
+}
+
+const SetupLayout = ({ children }: SetupLayoutProps) => (
+  <InstanceWrapper pageType={EInstancePageType.PRE_SETUP}>
+    <AuthWrapper authType={EAuthenticationPageType.NOT_AUTHENTICATED}>{children}</AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default SetupLayout;

admin/app/setup/page.tsx

@@ -0,0 +1,16 @@
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceSignUpForm } from "./components";
+
+const SetupPage = () => (
+  <>
+    <PageHeader title="Setup - God Mode" />
+    <DefaultLayout>
+      <InstanceSignUpForm />
+    </DefaultLayout>
+  </>
+);
+
+export default SetupPage;

admin/components/admin-sidebar/help-section.tsx

@@ -1,16 +1,13 @@
 "use client";
 
 import { FC, useState, useRef } from "react";
-import { observer } from "mobx-react-lite";
 import Link from "next/link";
-import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { Transition } from "@headlessui/react";
-// ui
+import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
-// helpers
-import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
-import { useTheme } from "@/hooks/store";
+import { useInstance, useTheme } from "@/hooks/store";
 // assets
 import packageJson from "package.json";
 
@@ -33,6 +30,8 @@ const helpOptions = [
 ];
 
 export const HelpSection: FC = observer(() => {
+  // hooks
+  const { instance } = useInstance();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store
@@ -40,16 +39,13 @@ export const HelpSection: FC = observer(() => {
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
+  const redirectionLink = `${instance?.config?.app_base_url ? `${instance?.config?.app_base_url}/create-workspace` : `/god-mode/`}`;
 
   return (
     <div
-      className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
-        {
-          "flex-col h-auto py-1.5": isSidebarCollapsed,
-        }
-      )}
+      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+        isSidebarCollapsed ? "flex-col" : ""
+      }`}
     >
       <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
         <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>

admin/components/admin-sidebar/root.tsx

@@ -3,10 +3,10 @@
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 import { useTheme } from "@/hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 
 export interface IInstanceSidebar {}
 

admin/components/admin-sidebar/sidebar-dropdown.tsx

@@ -1,17 +1,17 @@
 "use client";
 
 import { Fragment, useEffect, useState } from "react";
-import { observer } from "mobx-react-lite";
 import { useTheme as useNextTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 import { Avatar } from "@plane/ui";
 // hooks
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 import { useTheme, useUser } from "@/hooks/store";
 // helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // services
-import { AuthService } from "@/services/auth.service";
+import { AuthService } from "@/services";
 
 // service initialization
 const authService = new AuthService();

admin/components/admin-sidebar/sidebar-menu-hamburger-toogle.tsx

@@ -3,9 +3,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { Menu } from "lucide-react";
 import { useTheme } from "@/hooks/store";
 // icons
+import { Menu } from "lucide-react";
 
 export const SidebarHamburgerToggle: FC = observer(() => {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();

admin/components/admin-sidebar/sidebar-menu.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { observer } from "mobx-react-lite";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 import { Tooltip } from "@plane/ui";
 // hooks
-import { cn } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
 // helpers
+import { cn } from "@/helpers/common.helper";
 
 const INSTANCE_ADMIN_LINKS = [
   {
@@ -56,7 +56,7 @@ export const SidebarMenu = observer(() => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-4">
       {INSTANCE_ADMIN_LINKS.map((item, index) => {
         const isActive = item.href === pathName || pathName.includes(item.href);
         return (

admin/components/auth-header.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
 import { usePathname } from "next/navigation";
 // mobx
+import { observer } from "mobx-react-lite";
 // ui
 import { Settings } from "lucide-react";
 // icons
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
 import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
 
 export const InstanceHeader: FC = observer(() => {
   const pathName = usePathname();
@@ -31,8 +31,6 @@ export const InstanceHeader: FC = observer(() => {
         return "Google";
       case "github":
         return "Github";
-      case "gitlab":
-        return "GitLab";
       default:
         return pathName.toUpperCase();
     }

admin/components/common/controller-input.tsx

@@ -2,10 +2,10 @@
 
 import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
-// icons
-import { Eye, EyeOff } from "lucide-react";
 // ui
 import { Input } from "@plane/ui";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -37,9 +37,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">
-        {label} {!required && "(optional)"}
-      </h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <div className="relative">
         <Controller
           control={control}
@@ -64,7 +62,6 @@ export const ControllerInput: React.FC<Props> = (props) => {
         {type === "password" &&
           (showPassword ? (
             <button
-              tabIndex={-1}
               className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(false)}
             >
@@ -72,7 +69,6 @@ export const ControllerInput: React.FC<Props> = (props) => {
             </button>
           ) : (
             <button
-              tabIndex={-1}
               className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(true)}
             >

admin/components/common/copy-field.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 // ui
-import { Copy } from "lucide-react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
+import { Copy } from "lucide-react";
 
 type Props = {
   label: string;
@@ -24,7 +24,7 @@ export const CopyField: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-200">{label}</h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <Button
         variant="neutral-primary"
         className="flex items-center justify-between py-2"
@@ -40,7 +40,7 @@ export const CopyField: React.FC<Props> = (props) => {
         <p className="text-sm font-medium">{url}</p>
         <Copy size={18} color="#B9B9B9" />
       </Button>
-      <div className="text-xs text-custom-text-300">{description}</div>
+      <p className="text-xs text-custom-text-400">{description}</p>
     </div>
   );
 };

admin/components/common/index.ts

@@ -5,5 +5,3 @@ export * from "./copy-field";
 export * from "./password-strength-meter";
 export * from "./banner";
 export * from "./empty-state";
-export * from "./logo-spinner";
-export * from "./toast";

admin/components/common/logo-spinner.tsx

@@ -1,17 +0,0 @@
-import Image from "next/image";
-import { useTheme } from "next-themes";
-// assets
-import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
-import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
-
-export const LogoSpinner = () => {
-  const { resolvedTheme } = useTheme();
-
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
-
-  return (
-    <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
-    </div>
-  );
-};

admin/components/common/password-strength-meter.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 // helpers
-import { CircleCheck } from "lucide-react";
 import { cn } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // icons
+import { CircleCheck } from "lucide-react";
 
 type Props = {
   password: string;
@@ -43,7 +43,7 @@ export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => {
   ];
 
   return (
-    <div className="w-full">
+    <div className="w-full p-1">
       <div className="flex w-full gap-1.5">
         {bars.map((color, index) => (
           <div key={index} className={cn("w-full h-1 rounded-full", color)} />

admin/components/common/toast.tsx

@@ -1,11 +0,0 @@
-import { useTheme } from "next-themes";
-// ui
-import { Toast as ToastComponent } from "@plane/ui";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
-
-export const Toast = () => {
-  const { theme } = useTheme();
-
-  return <ToastComponent theme={resolveGeneralTheme(theme)} />;
-};

admin/components/instance/index.ts

@@ -1,3 +1 @@
 export * from "./instance-not-ready";
-export * from "./instance-failure-view";
-export * from "./setup-form";

admin/components/instance/instance-failure-view.tsx

@@ -1,42 +0,0 @@
-"use client";
-import { FC } from "react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-import { Button } from "@plane/ui";
-// assets
-import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
-import InstanceFailureImage from "@/public/instance/instance-failure.svg";
-
-type InstanceFailureViewProps = {
-  // mutate: () => void;
-};
-
-export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
-  const { resolvedTheme } = useTheme();
-
-  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
-
-  const handleRetry = () => {
-    window.location.reload();
-  };
-
-  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>
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { FC } from "react";
-import Image from "next/image";
 import Link from "next/link";
+import Image from "next/image";
 import { Button } from "@plane/ui";
 // assets
 import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";

admin/components/login/sign-in-form.tsx

@@ -3,15 +3,15 @@
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // services
-import { Eye, EyeOff } from "lucide-react";
-import { Button, Input, Spinner } from "@plane/ui";
-// components
-import { Banner } from "@/components/common";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
 import { AuthService } from "@/services/auth.service";
 // ui
+import { Button, Input, Spinner } from "@plane/ui";
+// components
+import { Banner } from "components/common";
 // icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
 
 // service initialization
 const authService = new AuthService();
@@ -57,8 +57,6 @@ export const InstanceSignInForm: FC = (props) => {
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
 
-  console.log("csrfToken", csrfToken);
-
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -94,7 +92,7 @@ export const InstanceSignInForm: FC = (props) => {
   );
 
   return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+    <div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 flex flex-col justify-center items-center">
       <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">
@@ -121,7 +119,7 @@ export const InstanceSignInForm: FC = (props) => {
               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"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -139,7 +137,7 @@ export const InstanceSignInForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
                 type={showPassword ? "text" : "password"}

admin/components/new-user-popup.tsx

@@ -7,9 +7,9 @@ import { useTheme as nextUseTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/ui";
 // helpers
-import { WEB_BASE_URL, resolveGeneralTheme } from "helpers/common.helper";
+import { resolveGeneralTheme } from "helpers/common.helper";
 // hooks
-import { useTheme } from "@/hooks/store";
+import { useInstance, useTheme } from "@/hooks/store";
 // icons
 import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
 import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
@@ -17,10 +17,11 @@ import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
 export const NewUserPopup: React.FC = observer(() => {
   // hooks
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
+  const { instance } = useInstance();
   // theme
   const { resolvedTheme } = nextUseTheme();
 
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/create-workspace");
+  const redirectionLink = `${instance?.config?.app_base_url ? `${instance?.config?.app_base_url}/create-workspace` : `/god-mode/`}`;
 
   if (!isNewUserPopup) return <></>;
   return (

admin/helpers/authentication.helper.tsx

@@ -1,14 +1,10 @@
 import { ReactNode } from "react";
-import Link from "next/link";
-// helpers
-import { SUPPORT_EMAIL } from "./common.helper";
 
 export enum EPageTypes {
-  PUBLIC = "PUBLIC",
-  NON_AUTHENTICATED = "NON_AUTHENTICATED",
-  SET_PASSWORD = "SET_PASSWORD",
-  ONBOARDING = "ONBOARDING",
-  AUTHENTICATED = "AUTHENTICATED",
+  "PUBLIC" = "PUBLIC",
+  "NON_AUTHENTICATED" = "NON_AUTHENTICATED",
+  "ONBOARDING" = "ONBOARDING",
+  "AUTHENTICATED" = "AUTHENTICATED",
 }
 
 export enum EAuthModes {
@@ -22,27 +18,28 @@ export enum EAuthSteps {
   UNIQUE_CODE = "UNIQUE_CODE",
 }
 
+export enum EAuthenticationErrorCodes {
+  INSTANCE_NOT_CONFIGURED = "5000",
+  // Admin
+  ADMIN_ALREADY_EXIST = "5029",
+  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5030",
+  INVALID_ADMIN_EMAIL = "5031",
+  INVALID_ADMIN_PASSWORD = "5032",
+  REQUIRED_ADMIN_EMAIL_PASSWORD = "5033",
+  ADMIN_AUTHENTICATION_FAILED = "5034",
+  ADMIN_USER_ALREADY_EXIST = "5035",
+  ADMIN_USER_DOES_NOT_EXIST = "5036",
+}
+
 export enum EErrorAlertType {
   BANNER_ALERT = "BANNER_ALERT",
+  TOAST_ALERT = "TOAST_ALERT",
   INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
   INLINE_EMAIL = "INLINE_EMAIL",
   INLINE_PASSWORD = "INLINE_PASSWORD",
   INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
 }
 
-export enum EAuthenticationErrorCodes {
-  // Admin
-  ADMIN_ALREADY_EXIST = "5150",
-  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
-  INVALID_ADMIN_EMAIL = "5160",
-  INVALID_ADMIN_PASSWORD = "5165",
-  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
-  ADMIN_AUTHENTICATION_FAILED = "5175",
-  ADMIN_USER_ALREADY_EXIST = "5180",
-  ADMIN_USER_DOES_NOT_EXIST = "5185",
-  ADMIN_USER_DEACTIVATED = "5190",
-}
-
 export type TAuthErrorInfo = {
   type: EErrorAlertType;
   code: EAuthenticationErrorCodes;
@@ -53,58 +50,41 @@ export type TAuthErrorInfo = {
 const errorCodeMessages: {
   [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
 } = {
-  // admin
+  [EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED]: {
+    title: "Instance not configured",
+    message: () => "Please contact your administrator to configure the instance.",
+  },
   [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
-    title: `Admin already exists`,
-    message: () => `Admin already exists. Please try again.`,
+    title: "Admin already exists",
+    message: () => "Admin already exists. Please sign in.",
   },
   [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
-    title: `Email, password and first name required`,
-    message: () => `Email, password and first name required. Please try again.`,
+    title: "Required",
+    message: () => "Please enter email, password and first name.",
   },
   [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
-    title: `Invalid admin email`,
-    message: () => `Invalid admin email. Please try again.`,
+    title: "Invalid email",
+    message: () => "Please enter a valid email.",
   },
   [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
-    title: `Invalid admin password`,
-    message: () => `Invalid admin password. Please try again.`,
+    title: "Invalid password",
+    message: () => "Password must be at least 8 characters long.",
   },
   [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
-    title: `Email and password required`,
-    message: () => `Email and password required. Please try again.`,
+    title: "Required",
+    message: () => "Please enter email and password.",
   },
   [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
-    title: `Authentication failed`,
-    message: () => `Authentication failed. Please try again.`,
+    title: "Authentication failed",
+    message: () => "Please check your email and password and try again.",
   },
   [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
-    title: `Admin user already exists`,
-    message: () => (
-      <div>
-        Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
+    title: "User already exists",
+    message: () => "User already exists. Please sign in.",
   },
   [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
-    title: `Admin user does not exist`,
-    message: () => (
-      <div>
-        Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED]: {
-    title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+    title: "User does not exist",
+    message: () => "User does not exist. Please sign up.",
   },
 };
 
@@ -112,18 +92,28 @@ export const authErrorHandler = (
   errorCode: EAuthenticationErrorCodes,
   email?: string | undefined
 ): TAuthErrorInfo | undefined => {
-  const bannerAlertErrorCodes = [
+  const toastAlertErrorCodes = [
     EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
-    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
     EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
     EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
-    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
     EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+  ];
+  const bannerAlertErrorCodes = [
+    EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
     EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
     EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
-    EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED,
   ];
 
+  if (toastAlertErrorCodes.includes(errorCode))
+    return {
+      type: EErrorAlertType.TOAST_ALERT,
+      code: errorCode,
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+    };
+
   if (bannerAlertErrorCodes.includes(errorCode))
     return {
       type: EErrorAlertType.BANNER_ALERT,

admin/helpers/common.helper.ts

@@ -10,8 +10,6 @@ export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
 
 export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || "";
 
-export const SUPPORT_EMAIL = process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "";
-
 export const ASSET_PREFIX = ADMIN_BASE_PATH;
 
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

admin/hooks/store/use-instance.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/store-provider";
+import { StoreContext } from "@/lib/store-context";
 import { IInstanceStore } from "@/store/instance.store";
 
 export const useInstance = (): IInstanceStore => {

admin/hooks/store/use-theme.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/store-provider";
+import { StoreContext } from "@/lib/store-context";
 import { IThemeStore } from "@/store/theme.store";
 
 export const useTheme = (): IThemeStore => {

admin/hooks/store/use-user.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/store-provider";
+import { StoreContext } from "@/lib/store-context";
 import { IUserStore } from "@/store/user.store";
 
 export const useUser = (): IUserStore => {

admin/layouts/admin-layout.tsx

@@ -1,38 +1,15 @@
-"use client";
-import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react-lite";
-import { useRouter } from "next/navigation";
+import { FC, ReactNode } from "react";
 // components
 import { InstanceSidebar } from "@/components/admin-sidebar";
 import { InstanceHeader } from "@/components/auth-header";
-import { LogoSpinner } from "@/components/common";
 import { NewUserPopup } from "@/components/new-user-popup";
-// hooks
-import { useUser } from "@/hooks/store";
 
 type TAdminLayout = {
   children: ReactNode;
 };
 
-export const AdminLayout: FC<TAdminLayout> = observer((props) => {
+export const AdminLayout: FC<TAdminLayout> = (props) => {
   const { children } = props;
-  // router
-  const router = useRouter();
-  const { isUserLoggedIn } = useUser();
-
-  useEffect(() => {
-    if (isUserLoggedIn === false) {
-      router.push("/");
-    }
-  }, [router, isUserLoggedIn]);
-
-  if (isUserLoggedIn === undefined) {
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-  }
 
   return (
     <div className="relative flex h-screen w-screen overflow-hidden">
@@ -44,4 +21,4 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
       <NewUserPopup />
     </div>
   );
-});
+};

admin/layouts/default-layout.tsx

@@ -2,13 +2,11 @@
 
 import { FC, ReactNode } from "react";
 import Image from "next/image";
-import Link from "next/link";
 import { useTheme } from "next-themes";
 // logo/ images
 import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
 import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
-import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TDefaultLayout = {
   children: ReactNode;
@@ -19,26 +17,26 @@ export const DefaultLayout: FC<TDefaultLayout> = (props) => {
   const { children, withoutBackground = false } = props;
   // hooks
   const { resolvedTheme } = useTheme();
-  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
-
-  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
 
   return (
     <div className="relative">
       <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
         <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
           <div className="flex items-center gap-x-2 py-10">
-            <Link href={`/`} className="h-[30px] w-[133px]">
-              <Image src={logo} alt="Plane logo" />
-            </Link>
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
         </div>
         {!withoutBackground && (
           <div className="absolute inset-0 z-0">
-            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+            <Image
+              src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
+              className="w-screen h-full object-cover"
+              alt="Plane background pattern"
+            />
           </div>
         )}
-        <div className="relative z-10 flex-grow">{children}</div>
+        <div className="relative z-10 mb-[110px] flex-grow">{children}</div>
       </div>
     </div>
   );

admin/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from "./default-layout";
+export * from "./admin-layout";

admin/lib/instance-provider.tsx

@@ -1,55 +0,0 @@
-import { FC, ReactNode } from "react";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-// components
-import { LogoSpinner } from "@/components/common";
-import { InstanceSetupForm, InstanceFailureView } from "@/components/instance";
-// hooks
-import { useInstance } from "@/hooks/store";
-// layout
-import { DefaultLayout } from "@/layouts/default-layout";
-
-type InstanceProviderProps = {
-  children: ReactNode;
-};
-
-export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
-  const { children } = props;
-  // store hooks
-  const { instance, error, fetchInstanceInfo } = useInstance();
-  // fetching instance details
-  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    errorRetryCount: 0,
-  });
-
-  if (!instance && !error)
-    return (
-      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
-        <LogoSpinner />
-      </div>
-    );
-
-  if (error) {
-    return (
-      <DefaultLayout>
-        <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-          <InstanceFailureView />
-        </div>
-      </DefaultLayout>
-    );
-  }
-
-  if (!instance?.is_setup_done) {
-    return (
-      <DefaultLayout>
-        <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-          <InstanceSetupForm />
-        </div>
-      </DefaultLayout>
-    );
-  }
-
-  return <>{children}</>;
-});

admin/lib/store-context.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactElement, createContext } from "react";
+// mobx store
+import { RootStore } from "@/store/root-store";
+
+export let rootStore = new RootStore();
+
+export const StoreContext = createContext<RootStore>(rootStore);
+
+const initializeStore = () => {
+  const newRootStore = rootStore ?? new RootStore();
+  if (typeof window === "undefined") return newRootStore;
+  if (!rootStore) rootStore = newRootStore;
+  return newRootStore;
+};
+
+export const StoreProvider = ({ children }: { children: ReactElement }) => {
+  const store = initializeStore();
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+};

admin/lib/store-provider.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { ReactNode, createContext } from "react";
-// store
-import { RootStore } from "@/store/root.store";
-
-let rootStore = new RootStore();
-
-export const StoreContext = createContext(rootStore);
-
-function initializeStore(initialData = {}) {
-  const singletonRootStore = rootStore ?? new RootStore();
-  // If your page has Next.js data fetching methods that use a Mobx store, it will
-  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
-  if (initialData) {
-    singletonRootStore.hydrate(initialData);
-  }
-  // For SSG and SSR always create a new store
-  if (typeof window === "undefined") return singletonRootStore;
-  // Create the store once in the client
-  if (!rootStore) rootStore = singletonRootStore;
-  return singletonRootStore;
-}
-
-export type StoreProviderProps = {
-  children: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  initialState?: any;
-};
-
-export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
-  const store = initializeStore(initialState);
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};

admin/lib/user-provider.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-// hooks
-import { useInstance, useTheme, useUser } from "@/hooks/store";
-
-interface IUserProvider {
-  children: ReactNode;
-}
-
-export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
-  // hooks
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  const { currentUser, fetchCurrentUser } = useUser();
-  const { fetchInstanceAdmins } = useInstance();
-
-  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
-    shouldRetryOnError: false,
-  });
-  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
-
-  useEffect(() => {
-    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
-    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
-    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
-  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
-
-  return <>{children}</>;
-});

admin/lib/wrappers/app-wrapper.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { FC, ReactNode, useEffect, Suspense } from "react";
+import { observer } from "mobx-react-lite";
+import { SWRConfig } from "swr";
+// hooks
+import { useTheme, useUser } from "@/hooks/store";
+// ui
+import { Toast } from "@plane/ui";
+// constants
+import { SWR_CONFIG } from "@/constants/swr-config";
+// helpers
+import { resolveGeneralTheme } from "helpers/common.helper";
+
+interface IAppWrapper {
+  children: ReactNode;
+}
+
+export const AppWrapper: FC<IAppWrapper> = observer(({ children }) => {
+  // hooks
+  const { theme, isSidebarCollapsed, toggleSidebar } = useTheme();
+  const { currentUser } = useUser();
+
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
+  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
+
+  return (
+    <Suspense>
+      <Toast theme={resolveGeneralTheme(theme)} />
+      <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
+    </Suspense>
+  );
+});

admin/lib/wrappers/auth-wrapper.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useInstance, useUser } from "@/hooks/store";
+// helpers
+import { EAuthenticationPageType } from "@/helpers";
+
+export interface IAuthWrapper {
+  children: ReactNode;
+  authType?: EAuthenticationPageType;
+}
+
+export const AuthWrapper: FC<IAuthWrapper> = observer((props) => {
+  const router = useRouter();
+  // props
+  const { children, authType = EAuthenticationPageType.AUTHENTICATED } = props;
+  // hooks
+  const { instance } = useInstance();
+  const { isLoading, currentUser, fetchCurrentUser } = useUser();
+
+  const { isLoading: isSWRLoading } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+
+  if (isSWRLoading || isLoading)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+
+  if (authType === EAuthenticationPageType.NOT_AUTHENTICATED) {
+    if (currentUser === undefined) return <>{children}</>;
+    else {
+      router.push("/general/");
+      return <></>;
+    }
+  }
+
+  if (authType === EAuthenticationPageType.AUTHENTICATED) {
+    if (currentUser) return <>{children}</>;
+    else {
+      if (instance && instance?.instance?.is_setup_done) {
+        router.push("/");
+        return <></>;
+      } else {
+        router.push("/setup/");
+        return <></>;
+      }
+    }
+  }
+
+  return <>{children}</>;
+});

admin/lib/wrappers/index.ts

@@ -0,0 +1,3 @@
+export * from "./app-wrapper";
+export * from "./instance-wrapper";
+export * from "./auth-wrapper";

admin/lib/wrappers/instance-wrapper.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { redirect, useSearchParams } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Spinner } from "@plane/ui";
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { InstanceNotReady } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks/store";
+// helpers
+import { EInstancePageType } from "@/helpers";
+import { EmptyState } from "@/components/common";
+
+type TInstanceWrapper = {
+  children: ReactNode;
+  pageType?: EInstancePageType;
+};
+
+export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
+  const { children, pageType } = props;
+  const searchparams = useSearchParams();
+  const authEnabled = searchparams.get("auth_enabled") || "1";
+  // hooks
+  const { isLoading, instance, fetchInstanceInfo } = useInstance();
+
+  const { isLoading: isSWRLoading } = useSWR("INSTANCE_INFORMATION", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: false,
+    errorRetryCount: 0,
+  });
+
+  if (isSWRLoading || isLoading)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+
+  if (!instance) {
+    return (
+      <EmptyState
+        title="Your instance wasn't configured successfully."
+        description="Please try re-installing Plane to fix the problem. If the issue still persists please reach out to support@plane.so."
+      />
+    );
+  }
+
+  if (instance?.instance?.is_setup_done === false && authEnabled === "1")
+    return (
+      <DefaultLayout withoutBackground>
+        <InstanceNotReady />
+      </DefaultLayout>
+    );
+
+  if (instance?.instance?.is_setup_done && pageType === EInstancePageType.PRE_SETUP) redirect("/");
+
+  if (!instance?.instance?.is_setup_done && pageType === EInstancePageType.POST_SETUP) redirect("/setup");
+
+  return <>{children}</>;
+});

admin/next.config.js

@@ -1,5 +1,4 @@
 /** @type {import('next').NextConfig} */
-
 const nextConfig = {
   trailingSlash: true,
   reactStrictMode: false,

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "0.21.0",
+  "version": "0.17.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -14,7 +14,6 @@
     "@headlessui/react": "^1.7.19",
     "@plane/types": "*",
     "@plane/ui": "*",
-    "@plane/constants": "*",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.17.0",
     "autoprefixer": "10.4.14",
@@ -26,7 +25,7 @@
     "mobx-react-lite": "^4.0.5",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",
-    "postcss": "^8.4.38",
+    "postcss": "8.4.23",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.0",

admin/public/instance/instance-failure-dark.svg

@@ -1,40 +0,0 @@
-<svg width="210" height="206" viewBox="0 0 210 206" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="107.5" cy="103" r="102.5" fill="#24252C"/>
-<path d="M140.625 162.125V148.875C138.868 148.875 137.183 148.177 135.94 146.935C134.698 145.692 134 144.007 134 142.25V135.625C134 132.111 135.396 128.741 137.881 126.256C140.366 123.771 143.736 122.375 147.25 122.375H160.5C164.014 122.375 167.384 123.771 169.869 126.256C172.354 128.741 173.75 132.111 173.75 135.625V142.25C173.75 144.007 173.052 145.692 171.81 146.935C170.567 148.177 168.882 148.875 167.125 148.875" stroke="#454961" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M153.875 122.375V66.0625C153.875 59.9128 151.432 54.015 147.084 49.6665C142.735 45.318 136.837 42.875 130.687 42.875C124.538 42.875 118.64 45.318 114.291 49.6665C109.943 54.015 107.5 59.9128 107.5 66.0625M107.5 138.937C107.5 145.087 105.057 150.985 100.709 155.334C96.36 159.682 90.4622 162.125 84.3125 162.125C78.1628 162.125 72.265 159.682 67.9165 155.334C63.568 150.985 61.125 145.087 61.125 138.937V82.625" stroke="#454961" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M167.125 162.125V148.875H140.625" stroke="#454961" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M47.875 56.125H74.375V42.875" stroke="#454961" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M74.375 56.125C76.1321 56.125 77.8172 56.823 79.0596 58.0654C80.302 59.3078 81 60.9929 81 62.75V69.375C81 72.8891 79.604 76.2593 77.1192 78.7442C74.6343 81.229 71.2641 82.625 67.75 82.625H54.5C50.9859 82.625 47.6157 81.229 45.1308 78.7442C42.646 76.2593 41.25 72.8891 41.25 69.375V62.75C41.25 60.9929 41.948 59.3078 43.1904 58.0654C44.4328 56.823 46.1179 56.125 47.875 56.125V42.875" stroke="#454961" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<g filter="url(#filter0_ddd_11437_265561)">
-<circle cx="107.911" cy="102.911" r="23.7938" fill="#3A5BC7"/>
-<path d="M114.051 96.7712L101.771 109.052" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M101.771 96.7712L114.051 109.052" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_ddd_11437_265561" x="76.1172" y="74.1177" width="63.5879" height="64.5876" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_11437_265561"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="1.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11437_265561"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_11437_265561"/>
-<feOffset dy="3"/>
-<feGaussianBlur stdDeviation="6"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_11437_265561" result="effect2_dropShadow_11437_265561"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_11437_265561"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="8"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
-<feBlend mode="normal" in2="effect2_dropShadow_11437_265561" result="effect3_dropShadow_11437_265561"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_11437_265561" result="shape"/>
-</filter>
-</defs>
-</svg>

admin/public/instance/instance-failure.svg

@@ -1,40 +0,0 @@
-<svg width="210" height="206" viewBox="0 0 210 206" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="107.5" cy="103" r="102.5" fill="#F3F6FF"/>
-<path d="M140.625 162.125V148.875C138.868 148.875 137.183 148.177 135.94 146.935C134.698 145.692 134 144.007 134 142.25V135.625C134 132.111 135.396 128.741 137.881 126.256C140.366 123.771 143.736 122.375 147.25 122.375H160.5C164.014 122.375 167.384 123.771 169.869 126.256C172.354 128.741 173.75 132.111 173.75 135.625V142.25C173.75 144.007 173.052 145.692 171.81 146.935C170.567 148.177 168.882 148.875 167.125 148.875" stroke="#3E63DD" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M153.875 122.375V66.0625C153.875 59.9128 151.432 54.015 147.084 49.6665C142.735 45.318 136.837 42.875 130.687 42.875C124.538 42.875 118.64 45.318 114.291 49.6665C109.943 54.015 107.5 59.9128 107.5 66.0625M107.5 138.937C107.5 145.087 105.057 150.985 100.709 155.334C96.36 159.682 90.4622 162.125 84.3125 162.125C78.1628 162.125 72.265 159.682 67.9165 155.334C63.568 150.985 61.125 145.087 61.125 138.937V82.625" stroke="#3E63DD" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M167.125 162.125V148.875H140.625" stroke="#3E63DD" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M47.875 56.125H74.375V42.875" stroke="#3E63DD" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M74.375 56.125C76.1321 56.125 77.8172 56.823 79.0596 58.0654C80.302 59.3078 81 60.9929 81 62.75V69.375C81 72.8891 79.604 76.2593 77.1192 78.7442C74.6343 81.229 71.2641 82.625 67.75 82.625H54.5C50.9859 82.625 47.6157 81.229 45.1308 78.7442C42.646 76.2593 41.25 72.8891 41.25 69.375V62.75C41.25 60.9929 41.948 59.3078 43.1904 58.0654C44.4328 56.823 46.1179 56.125 47.875 56.125V42.875" stroke="#3E63DD" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
-<g filter="url(#filter0_ddd_11424_265422)">
-<circle cx="107.911" cy="102.911" r="23.7938" fill="#3A5BC7"/>
-<path d="M114.051 96.7712L101.771 109.052" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M101.771 96.7712L114.051 109.052" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_ddd_11424_265422" x="76.1172" y="74.1177" width="63.5879" height="64.5876" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_11424_265422"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="1.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11424_265422"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_11424_265422"/>
-<feOffset dy="3"/>
-<feGaussianBlur stdDeviation="6"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_11424_265422" result="effect2_dropShadow_11424_265422"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_11424_265422"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="8"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
-<feBlend mode="normal" in2="effect2_dropShadow_11424_265422" result="effect3_dropShadow_11424_265422"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_11424_265422" result="shape"/>
-</filter>
-</defs>
-</svg>

admin/public/logos/gitlab-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 80 220 220"><defs><style>.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-2" d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-3" d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z"/><path class="cls-2" d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z"/></g></svg>

admin/services/api.service.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
 // store
-// import { rootStore } from "@/lib/store-context";
+import { rootStore } from "@/lib/store-context";
 
 export abstract class APIService {
   protected baseURL: string;
@@ -17,14 +17,14 @@ export abstract class APIService {
   }
 
   private setupInterceptors() {
-    // this.axiosInstance.interceptors.response.use(
-    //   (response) => response,
-    //   (error) => {
-    //     const store = rootStore;
-    //     if (error.response && error.response.status === 401 && store.user.currentUser) store.user.reset();
-    //     return Promise.reject(error);
-    //   }
-    // );
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        const store = rootStore;
+        if (error.response && error.response.status === 401 && store.user.currentUser) store.user.reset();
+        return Promise.reject(error);
+      }
+    );
   }
 
   get<ResponseType>(url: string, params = {}): Promise<AxiosResponse<ResponseType>> {

admin/services/auth.service.ts

@@ -1,7 +1,7 @@
-// helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // services
 import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
 
 type TCsrfTokenResponse = {
   csrf_token: string;