feat: add GitLab OAuth client (#4692)

found via:

- https://github.com/makeplane/docs/issues/48
- https://github.com/makeplane/plane/pull/3109

.eslintrc-staged.js

@@ -0,0 +1,59 @@
+/**
+ * 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,
+        },
+      },
+    ],
+  },
+};

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   extends: ["custom"],
   settings: {
     next: {
-      rootDir: ["web/", "space/"],
+      rootDir: ["web/", "space/", "admin/"],
     },
   },
 };

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

@@ -0,0 +1,91 @@
+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-Push Web/Space/API/Proxy Docker Image
+    name: Build Setup
     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: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      FRONTEND_TAG: makeplane/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=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-frontend:stable,makeplane/plane-frontend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest
+            TAG=makeplane/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: ${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      ADMIN_TAG: makeplane/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=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-admin:stable,makeplane/plane-admin:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:latest
+            TAG=makeplane/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: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      SPACE_TAG: makeplane/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=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-space:stable,makeplane/plane-space:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
+            TAG=makeplane/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: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BACKEND_TAG: makeplane/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=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-backend:stable,makeplane/plane-backend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest
+            TAG=makeplane/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: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      PROXY_TAG: makeplane/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=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-proxy:stable,makeplane/plane-proxy:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest
+            TAG=makeplane/plane-proxy:latest
           else
             TAG=${{ env.PROXY_TAG }}
           fi

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

@@ -3,10 +3,11 @@ name: Build and Lint on Pull Request
 on:
   workflow_dispatch:
   pull_request:
-    types: ["opened", "synchronize"]
+    types: ["opened", "synchronize", "ready_for_review"]
 
 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 }}
@@ -14,10 +15,10 @@ jobs:
       space_changed: ${{ steps.changed-files.outputs.space_any_changed }}
       web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v41
+        uses: tj-actions/changed-files@v44
         with:
           files_yaml: |
             apiserver:
@@ -49,9 +50,9 @@ jobs:
     runs-on: ubuntu-latest
     if: needs.get-changed-files.outputs.apiserver_changed == 'true'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.x" # Specify the Python version you need
       - name: Install Pylint
@@ -66,9 +67,9 @@ jobs:
     if: needs.get-changed-files.outputs.admin_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
       - run: yarn install
@@ -79,9 +80,9 @@ jobs:
     if: needs.get-changed-files.outputs.space_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
       - run: yarn install
@@ -92,9 +93,9 @@ jobs:
     if: needs.get-changed-files.outputs.web_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
       - run: yarn install
@@ -104,9 +105,9 @@ jobs:
     needs: lint-admin
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
       - run: yarn install
@@ -116,9 +117,9 @@ jobs:
     needs: lint-space
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
       - run: yarn install
@@ -128,9 +129,9 @@ jobs:
     needs: lint-web
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         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: merge conflicts need to be resolved" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: community changes" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.github/workflows/feature-deployment.yml

@@ -5,17 +5,17 @@ on:
     inputs:
       web-build:
         required: false
-        description: 'Build Web'
+        description: "Build Web"
         type: boolean
         default: true
       space-build:
         required: false
-        description: 'Build Space'
+        description: "Build Space"
         type: boolean
         default: false
       admin-build:
         required: false
-        description: 'Build Admin'
+        description: "Build Admin"
         type: boolean
         default: false
 
@@ -35,7 +35,7 @@ jobs:
           echo "BUILD_SPACE=$BUILD_SPACE"
           echo "BUILD_ADMIN=$BUILD_ADMIN"
     outputs:
-      web-build: ${{ env.BUILD_WEB}} 
+      web-build: ${{ env.BUILD_WEB}}
       space-build: ${{env.BUILD_SPACE}}
       admin-build: ${{env.BUILD_ADMIN}}
 
@@ -53,7 +53,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: "18"
       - name: Install AWS cli
         run: |
           sudo apt-get update
@@ -79,7 +79,7 @@ jobs:
 
           FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
           aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
-     
+
   feature-build-space:
     if: ${{ needs.setup-feature-build.outputs.space-build == 'true' }}
     needs: setup-feature-build
@@ -89,7 +89,7 @@ jobs:
       AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
       AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
-      NEXT_PUBLIC_DEPLOY_WITH_NGINX: 1
+      NEXT_PUBLIC_SPACE_BASE_PATH: "/spaces"
       NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
     outputs:
       do-build: ${{ needs.setup-feature-build.outputs.space-build }}
@@ -98,7 +98,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: "18"
       - name: Install AWS cli
         run: |
           sudo apt-get update
@@ -134,7 +134,7 @@ jobs:
       AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
       AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
-      NEXT_PUBLIC_DEPLOY_WITH_NGINX: 1
+      NEXT_PUBLIC_ADMIN_BASE_PATH: "/god-mode"
       NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
     outputs:
       do-build: ${{ needs.setup-feature-build.outputs.admin-build }}
@@ -143,7 +143,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: "18"
       - name: Install AWS cli
         run: |
           sudo apt-get update
@@ -172,7 +172,13 @@ jobs:
 
   feature-deploy:
     if: ${{ always() && (needs.setup-feature-build.outputs.web-build == 'true' || needs.setup-feature-build.outputs.space-build == 'true' || needs.setup-feature-build.outputs.admin-build == 'true') }}
-    needs: [setup-feature-build, feature-build-web, feature-build-space, feature-build-admin]
+    needs:
+      [
+        setup-feature-build,
+        feature-build-web,
+        feature-build-space,
+        feature-build-admin,
+      ]
     name: Feature Deploy
     runs-on: ubuntu-latest
     env:

.gitignore

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

.lintstagedrc.json

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

Dockerfile

@@ -1,124 +0,0 @@
-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/docker-compose).
+If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/self-hosting/overview).
 
 | Installation methods | Docs link                                                                                                                                          |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |

admin/.env.example

@@ -1,2 +1,3 @@
-NEXT_PUBLIC_APP_URL=
-NEXT_PUBLIC_API_BASE_URL=
+NEXT_PUBLIC_API_BASE_URL=""
+NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+NEXT_PUBLIC_WEB_BASE_URL=""

admin/.eslintrc.js

@@ -10,5 +10,43 @@ module.exports = {
       },
     },
   },
-  rules: {}
+  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,
+        },
+      },
+    ],
+  },
 }

admin/Dockerfile.admin

@@ -1,3 +1,6 @@
+# *****************************************************************************
+# STAGE 1: Build the project
+# *****************************************************************************
 FROM node:18-alpine AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -7,6 +10,9 @@ COPY . .
 
 RUN turbo prune --scope=admin --docker
 
+# *****************************************************************************
+# STAGE 2: Install dependencies & build the project
+# *****************************************************************************
 FROM node:18-alpine AS installer
 
 RUN apk add --no-cache libc6-compat
@@ -21,13 +27,31 @@ COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
 
 ARG NEXT_PUBLIC_API_BASE_URL=""
-ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
-
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-ENV NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX
+
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_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
 
 RUN yarn turbo run build --filter=admin
 
+# *****************************************************************************
+# STAGE 3: Copy the project and start it
+# *****************************************************************************
 FROM node:18-alpine AS runner
 WORKDIR /app
 
@@ -38,12 +62,23 @@ COPY --from=installer /app/admin/.next/standalone ./
 COPY --from=installer /app/admin/.next/static ./admin/.next/static
 COPY --from=installer /app/admin/public ./admin/public
 
-
 ARG NEXT_PUBLIC_API_BASE_URL=""
-ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
 
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL 
-ENV NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_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/Dockerfile.dev

@@ -0,0 +1,17 @@
+FROM node:18-alpine
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+COPY . .
+
+RUN yarn global add turbo
+RUN yarn install
+
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+
+EXPOSE 3000
+
+VOLUME [ "/app/node_modules", "/app/admin/node_modules" ]
+
+CMD ["yarn", "dev", "--filter=admin"]

admin/app/ai/components/index.ts

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

admin/app/ai/form.tsx

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

admin/app/ai/layout.tsx

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

admin/app/ai/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
-import { InstanceAIForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks";
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceAIForm } from "./form";
 
 const InstanceAIPage = observer(() => {
   // store
@@ -18,14 +19,14 @@ const InstanceAIPage = observer(() => {
   return (
     <>
       <PageHeader title="Artificial Intelligence - 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="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="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-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceAIForm config={formattedConfig} />
           ) : (

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

@@ -1 +0,0 @@
-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 { useInstance } from "@/hooks";
-// ui
-import { ToggleSwitch } from "@plane/ui";
-// types
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
+import { useInstance } from "@/hooks/store";
+// ui
+// types
 
 type Props = {
   disabled: boolean;

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

@@ -1,18 +1,18 @@
 "use client";
 
 import React from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useInstance } from "@/hooks";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+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";
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
 
 type Props = {
   disabled: boolean;

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

@@ -0,0 +1,59 @@
+"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/google-config.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import React from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useInstance } from "@/hooks";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+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";
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/components/index.ts

@@ -1,3 +1,6 @@
-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 { useInstance } from "@/hooks";
-// ui
-import { ToggleSwitch } from "@plane/ui";
-// types
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
+import { useInstance } from "@/hooks/store";
+// ui
+// types
 
 type Props = {
   disabled: boolean;

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

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

admin/app/authentication/github/form.tsx

@@ -1,8 +1,9 @@
 import { FC, useState } from "react";
-import { useForm } from "react-hook-form";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
-// hooks
-import { useInstance } from "@/hooks";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
 // ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
@@ -12,12 +13,11 @@ import {
   CopyField,
   TControllerInputFormField,
   TCopyField,
-} from "components/common";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+} from "@/components/common";
 // helpers
-import { API_BASE_URL, cn } from "helpers/common.helper";
-import isEmpty from "lodash/isEmpty";
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
 
 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 githubFormFields: TControllerInputFormField[] = [
+  const GITHUB_FORM_FIELDS: TControllerInputFormField[] = [
     {
       key: "GITHUB_CLIENT_ID",
       type: "text",
@@ -55,6 +55,7 @@ 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"
@@ -76,6 +77,7 @@ 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"
@@ -91,7 +93,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const githubCopyFields: TCopyField[] = [
+  const GITHUB_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -100,6 +102,7 @@ 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"
@@ -118,6 +121,7 @@ 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"
@@ -134,13 +138,16 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
     const payload: Partial<GithubConfigFormValues> = { ...formData };
 
     await updateInstanceConfigurations(payload)
-      .then(() => {
+      .then((response = []) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message: "Github Configuration Settings updated successfully",
         });
-        reset();
+        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,
+        });
       })
       .catch((err) => console.error(err));
   };
@@ -163,7 +170,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>
-            {githubFormFields.map((field) => (
+            {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
                 control={control}
@@ -194,7 +201,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>
-              {githubCopyFields.map((field) => (
+              {GITHUB_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
             </div>

admin/app/authentication/github/page.tsx

@@ -1,22 +1,23 @@
 "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";
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGithubConfigForm } from "./components";
-// hooks
-import { useInstance } from "@/hooks";
 // helpers
 import { resolveGeneralTheme } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
 // 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
@@ -63,8 +64,8 @@ const InstanceGithubAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - 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="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="Github"
             description="Allow members to login or sign up to plane with their Github accounts."
@@ -92,7 +93,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
           {formattedConfig ? (
             <InstanceGithubConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/gitlab/form.tsx

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,101 @@
+"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/index.ts

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

admin/app/authentication/google/form.tsx

@@ -1,8 +1,9 @@
 import { FC, useState } from "react";
-import { useForm } from "react-hook-form";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
-// hooks
-import { useInstance } from "@/hooks";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
 // ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
@@ -12,12 +13,11 @@ import {
   CopyField,
   TControllerInputFormField,
   TCopyField,
-} from "components/common";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+} from "@/components/common";
 // helpers
-import { API_BASE_URL, cn } from "helpers/common.helper";
-import isEmpty from "lodash/isEmpty";
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
 
 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 googleFormFields: TControllerInputFormField[] = [
+  const GOOGLE_FORM_FIELDS: TControllerInputFormField[] = [
     {
       key: "GOOGLE_CLIENT_ID",
       type: "text",
@@ -55,6 +55,7 @@ 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"
@@ -76,6 +77,7 @@ 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"
@@ -91,7 +93,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const googleCopyFeilds: TCopyField[] = [
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -134,13 +136,16 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
     const payload: Partial<GoogleConfigFormValues> = { ...formData };
 
     await updateInstanceConfigurations(payload)
-      .then(() => {
+      .then((response = []) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message: "Google Configuration Settings updated successfully",
         });
-        reset();
+        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,
+        });
       })
       .catch((err) => console.error(err));
   };
@@ -163,7 +168,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>
-            {googleFormFields.map((field) => (
+            {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
                 control={control}
@@ -194,7 +199,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>
-              {googleCopyFeilds.map((field) => (
+              {GOOGLE_SERVICE_DETAILS.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
             </div>

admin/app/authentication/google/page.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import { useState } from "react";
-import Image from "next/image";
 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";
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGoogleConfigForm } from "./components";
 // hooks
-import { useInstance } from "@/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
@@ -57,8 +58,8 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - 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="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="Google"
             description="Allow members to login or sign up to plane with their Google
@@ -80,7 +81,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
           {formattedConfig ? (
             <InstanceGoogleConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/layout.tsx

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

admin/app/authentication/page.tsx

@@ -1,26 +1,33 @@
 "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
-import { useInstance } from "@/hooks";
 // helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
+import { cn, resolveGeneralTheme } from "@/helpers/common.helper";
+import { useInstance } from "@/hooks/store";
 // 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;
@@ -40,6 +47,8 @@ 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);
@@ -109,22 +118,56 @@ 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-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="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="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-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className="text-lg font-medium">Authentication modes</div>
+              <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>
               {authenticationMethodsCard.map((method) => (
                 <AuthenticationMethodCard
                   key={method.key}

admin/app/email/components/index.ts

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

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

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

admin/app/email/layout.tsx

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

admin/app/email/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
-import { InstanceEmailForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks";
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceEmailForm } from "./email-config-form";
 
 const InstanceEmailPage = observer(() => {
   // store
@@ -18,8 +19,8 @@ const InstanceEmailPage = observer(() => {
   return (
     <>
       <PageHeader title="Email - 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="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="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.
@@ -29,7 +30,7 @@ const InstanceEmailPage = observer(() => {
             </div>
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceEmailForm config={formattedConfig} />
           ) : (

admin/app/email/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?.message || "Failed to send email");
+        setError(error?.error || "Failed to send email");
         setSendEmailStep(ESendEmailSteps.FAILED);
       })
       .finally(() => {

admin/app/error.tsx

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

admin/app/general/components/index.ts

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

admin/app/general/form.tsx

@@ -1,19 +1,23 @@
+"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";
+import { useInstance } from "@/hooks/store";
 
 export interface IGeneralConfigurationForm {
-  instance: IInstance["instance"];
+  instance: IInstance;
   instanceAdmins: IInstanceAdmin[];
 }
 
-export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = (props) => {
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
   const { instance, instanceAdmins } = props;
   // hooks
   const { updateInstanceInfo } = useInstance();
@@ -22,15 +26,15 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = (props) =
     handleSubmit,
     control,
     formState: { errors, isSubmitting },
-  } = useForm<Partial<IInstance["instance"]>>({
+  } = useForm<Partial<IInstance>>({
     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["instance"]>) => {
-    const payload: Partial<IInstance["instance"]> = { ...formData };
+  const onSubmit = async (formData: Partial<IInstance>) => {
+    const payload: Partial<IInstance> = { ...formData };
 
     console.log("payload", payload);
 
@@ -133,4 +137,4 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = (props) =
       </div>
     </div>
   );
-};
+});

admin/app/general/layout.tsx

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

admin/app/general/page.tsx

@@ -1,34 +1,31 @@
 "use client";
-
 import { observer } from "mobx-react-lite";
-// components
-import { PageHeader } from "@/components/core";
-import { GeneralConfigurationForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks";
+import { useInstance } from "@/hooks/store";
+// components
+import { GeneralConfigurationForm } from "./form";
 
-const GeneralPage = observer(() => {
+function GeneralPage() {
   const { instance, instanceAdmins } = useInstance();
-
+  console.log("instance", instance);
   return (
     <>
-      <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="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="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-auto">
-          {instance?.instance && instanceAdmins && instanceAdmins?.length > 0 && (
-            <GeneralConfigurationForm instance={instance?.instance} instanceAdmins={instanceAdmins} />
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {instance && instanceAdmins && (
+            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
           )}
         </div>
       </div>
     </>
   );
-});
+}
 
-export default GeneralPage;
+export default observer(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: 250, 250, 250; /* secondary bg */
-    --color-background-80: 245, 245, 245; /* tertiary bg */
+    --color-background-90: 247, 247, 247; /* secondary bg */
+    --color-background-80: 232, 232, 232; /* tertiary bg */
 
     --color-text-100: 23, 23, 23; /* primary text */
     --color-text-200: 58, 58, 58; /* secondary text */
@@ -60,66 +60,39 @@
     --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);
@@ -138,8 +111,8 @@
     color-scheme: light !important;
 
     --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 250, 250, 250; /* secondary bg */
-    --color-background-80: 245, 245, 245; /* tertiary bg */
+    --color-background-90: 247, 247, 247; /* secondary bg */
+    --color-background-80: 232, 232, 232; /* tertiary bg */
   }
 
   [data-theme="light"] {
@@ -156,26 +129,10 @@
     --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;
@@ -233,28 +190,19 @@
   [data-theme="dark-contrast"] {
     color-scheme: dark !important;
 
-    --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-background-100: 25, 25, 25; /* primary bg */
+    --color-background-90: 32, 32, 32; /* secondary bg */
+    --color-background-80: 44, 44, 44; /* 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"] {
@@ -271,21 +219,9 @@
     --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;
@@ -362,37 +298,19 @@
     --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 */
   }
 }
 
@@ -414,42 +332,90 @@ body {
 }
 
 /* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
+@-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;
+  }
 }
 
-.horizontal-scroll-enable {
-  overflow-x: scroll;
+.vertical-scrollbar {
+  overflow-y: auto;
 }
-
-.horizontal-scroll-enable::-webkit-scrollbar {
+.horizontal-scrollbar {
+  overflow-x: auto;
+}
+.vertical-scrollbar::-webkit-scrollbar,
+.horizontal-scrollbar::-webkit-scrollbar {
   display: block;
-  height: 7px;
-  width: 0;
+}
+.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;
 }
 
-.horizontal-scroll-enable::-webkit-scrollbar-track {
-  height: 7px;
-  background-color: rgba(var(--color-background-100));
+/* scrollbar sm size */
+.scrollbar-sm::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
 }
-
-.horizontal-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-scrollbar));
+.scrollbar-sm::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
 }
-
-.vertical-scroll-enable::-webkit-scrollbar {
-  display: block;
-  width: 5px;
+/* scrollbar md size */
+.scrollbar-md::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
 }
-
-.vertical-scroll-enable::-webkit-scrollbar-track {
-  width: 5px;
+.scrollbar-md::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
 }
+/* scrollbar lg size */
 
-.vertical-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-background-90));
+.scrollbar-lg::-webkit-scrollbar {
+  height: 16px;
+  width: 16px;
+}
+.scrollbar-lg::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
 }
 /* end scrollbar style */
 

admin/app/image/components/index.ts

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

admin/app/image/form.tsx

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

admin/app/image/layout.tsx

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

admin/app/image/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
-import { InstanceImageConfigForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks";
+import { useInstance } from "@/hooks/store";
+// local
+import { InstanceImageConfigForm } from "./form";
 
 const InstanceImagePage = observer(() => {
   // store
@@ -18,14 +19,14 @@ const InstanceImagePage = observer(() => {
   return (
     <>
       <PageHeader title="Image - 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="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="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-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceImageConfigForm config={formattedConfig} />
           ) : (

admin/app/layout.tsx

@@ -1,48 +1,48 @@
 "use client";
 
 import { ReactNode } from "react";
-import { ThemeProvider } from "next-themes";
-// lib
-import { StoreProvider } from "@/lib/store-context";
-import { AppWrapper } from "@/lib/wrappers";
+import { ThemeProvider, useTheme } from "next-themes";
+import { SWRConfig } from "swr";
+// ui
+import { Toast } from "@plane/ui";
 // constants
-import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
+import { SWR_CONFIG } from "@/constants/swr-config";
+// helpers
+import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
+// lib
+import { InstanceProvider } from "@/lib/instance-provider";
+import { StoreProvider } from "@/lib/store-provider";
+import { UserProvider } from "@/lib/user-provider";
 // styles
 import "./globals.css";
 
-interface RootLayoutProps {
-  children: ReactNode;
-}
-
-const RootLayout = ({ children, ...pageProps }: RootLayoutProps) => {
-  const prefix = parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0") === 0 ? "/" : "/god-mode/";
+function RootLayout({ children }: { children: ReactNode }) {
+  // themes
+  const { resolvedTheme } = useTheme();
 
   return (
     <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={`${prefix}favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${prefix}site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
+        <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>
+        <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>
   );
-};
+}
 
 export default RootLayout;

admin/app/login/layout.tsx

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

admin/app/login/page.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-// layouts
-import { DefaultLayout } from "@/layouts";
-// components
-import { PageHeader } from "@/components/core";
-import { InstanceSignInForm } from "./components";
-
-const LoginPage = () => (
-  <>
-    <PageHeader title="Setup - God Mode" />
-    <DefaultLayout>
-      <InstanceSignInForm />
-    </DefaultLayout>
-  </>
-);
-
-export default LoginPage;

admin/app/page.tsx

@@ -1,20 +1,30 @@
-"use client";
-
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { Metadata } from "next";
 // components
-import { PageHeader } from "@/components/core";
+import { InstanceSignInForm } from "@/components/login";
+// layouts
+import { DefaultLayout } from "@/layouts/default-layout";
 
-const RootPage = () => {
-  const router = useRouter();
-
-  useEffect(() => router.push("/login"), [router]);
-
-  return (
-    <>
-      <PageHeader title="Plane - God Mode" />
-    </>
-  );
+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",
+  },
 };
 
-export default RootPage;
+export default async function LoginPage() {
+  return (
+    <DefaultLayout>
+      <InstanceSignInForm />
+    </DefaultLayout>
+  );
+}

admin/app/setup/components/index.ts

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

admin/app/setup/layout.tsx

@@ -1,19 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-// 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,12 +1,16 @@
 "use client";
 
 import { FC, useState, useRef } from "react";
-import { Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { Transition } from "@headlessui/react";
+// ui
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+// helpers
+import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
-import { useTheme } from "@/hooks";
+import { useTheme } from "@/hooks/store";
 // assets
 import packageJson from "package.json";
 
@@ -28,7 +32,7 @@ const helpOptions = [
   },
 ];
 
-export const HelpSection: FC = () => {
+export const HelpSection: FC = observer(() => {
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store
@@ -36,13 +40,16 @@ export const HelpSection: FC = () => {
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
-  const redirectionLink = `${process.env.NEXT_PUBLIC_APP_URL ? `${process.env.NEXT_PUBLIC_APP_URL}/create-workspace` : `${process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX === "1" ? `/god-mode/` : `/`}`}`;
+  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
 
   return (
     <div
-      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" : ""
-      }`}
+      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,
+        }
+      )}
     >
       <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}>
@@ -128,4 +135,4 @@ export const HelpSection: FC = () => {
       </div>
     </div>
   );
-};
+});

admin/components/admin-sidebar/root.tsx

@@ -3,10 +3,10 @@
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useTheme } from "@/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 { useTheme as useNextTheme } from "next-themes";
 import { observer } from "mobx-react-lite";
+import { useTheme as useNextTheme } from "next-themes";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 import { Avatar } from "@plane/ui";
 // hooks
-import { useTheme, useUser } from "@/hooks";
-// helpers
 import { API_BASE_URL, cn } from "@/helpers/common.helper";
+import { useTheme, useUser } from "@/hooks/store";
+// helpers
 // services
-import { AuthService } from "@/services";
+import { AuthService } from "@/services/auth.service";
 
 // 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 { useTheme } from "@/hooks";
-// icons
 import { Menu } from "lucide-react";
+import { useTheme } from "@/hooks/store";
+// icons
 
 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 { useTheme } from "@/hooks";
-// helpers
 import { cn } from "@/helpers/common.helper";
+import { useTheme } from "@/hooks/store";
+// helpers
 
 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-auto px-4 py-4">
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm 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 { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
+import { BreadcrumbLink } from "components/common";
 
 export const InstanceHeader: FC = observer(() => {
   const pathName = usePathname();
@@ -31,6 +31,8 @@ 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";
-// ui
-import { Input } from "@plane/ui";
 // icons
 import { Eye, EyeOff } from "lucide-react";
+// ui
+import { Input } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -37,7 +37,9 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">{label}</h4>
+      <h4 className="text-sm text-custom-text-300">
+        {label} {!required && "(optional)"}
+      </h4>
       <div className="relative">
         <Controller
           control={control}
@@ -62,6 +64,7 @@ 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)}
             >
@@ -69,6 +72,7 @@ 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-300">{label}</h4>
+      <h4 className="text-sm text-custom-text-200">{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>
-      <p className="text-xs text-custom-text-400">{description}</p>
+      <div className="text-xs text-custom-text-300">{description}</div>
     </div>
   );
 };

admin/components/common/empty-state.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Image from "next/image";
+import { Button } from "@plane/ui";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image?: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  primaryButton,
+  secondaryButton,
+  disabled = false,
+}) => (
+  <div className={`flex h-full w-full items-center justify-center`}>
+    <div className="flex w-full flex-col items-center text-center">
+      {image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
+      <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
+      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+      <div className="flex items-center gap-4">
+        {primaryButton && (
+          <Button
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
+        {secondaryButton}
+      </div>
+    </div>
+  </div>
+);

admin/components/common/index.ts

@@ -4,3 +4,6 @@ export * from "./controller-input";
 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

@@ -0,0 +1,17 @@
+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 p-1">
+    <div className="w-full">
       <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

@@ -0,0 +1,11 @@
+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 +1,3 @@
 export * from "./instance-not-ready";
+export * from "./instance-failure-view";
+export * from "./setup-form";

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

@@ -0,0 +1,42 @@
+"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 Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 import { Button } from "@plane/ui";
 // assets
 import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";

admin/components/instance/setup-form.tsx

@@ -2,17 +2,17 @@
 
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
-// services
-import { AuthService } from "@/services/auth.service";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 // ui
 import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 // components
-import { Banner, PasswordStrengthMeter } from "components/common";
-// icons
-import { Eye, EyeOff } from "lucide-react";
+import { Banner, PasswordStrengthMeter } from "@/components/common";
 // 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 InstanceSignUpForm: FC = (props) => {
+export const InstanceSetupForm: FC = (props) => {
   const {} = props;
   // search params
   const searchParams = useSearchParams();
@@ -64,11 +64,18 @@ export const InstanceSignUpForm: FC = (props) => {
   const errorCode = searchParams.get("error_code") || undefined;
   const errorMessage = searchParams.get("error_message") || undefined;
   // state
-  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: 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 }));
@@ -121,8 +128,12 @@ export const InstanceSignUpForm: 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="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="max-w-lg lg:max-w-md w-full">
       <div className="relative flex flex-col space-y-6">
         <div className="text-center space-y-1">
           <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
@@ -147,14 +158,15 @@ export const InstanceSignUpForm: 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 items-center gap-4">
+          <div className="flex flex-col sm:flex-row items-center gap-4">
             <div className="w-full space-y-1">
               <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
                 First name <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="first_name"
                 name="first_name"
                 type="text"
@@ -167,10 +179,10 @@ export const InstanceSignUpForm: 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
+                Last name <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="last_name"
                 name="last_name"
                 type="text"
@@ -187,7 +199,7 @@ export const InstanceSignUpForm: FC = (props) => {
               Email <span className="text-red-500">*</span>
             </label>
             <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -204,10 +216,10 @@ export const InstanceSignUpForm: FC = (props) => {
 
           <div className="w-full space-y-1">
             <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
-              Company name
+              Company name <span className="text-red-500">*</span>
             </label>
             <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
               id="company_name"
               name="company_name"
               type="text"
@@ -224,10 +236,10 @@ export const InstanceSignUpForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
-                type={showPassword ? "text" : "password"}
+                type={showPassword.password ? "text" : "password"}
                 inputSize="md"
                 placeholder="New password..."
                 value={formData.password}
@@ -236,19 +248,21 @@ export const InstanceSignUpForm: FC = (props) => {
                 onFocus={() => setIsPasswordInputFocused(true)}
                 onBlur={() => setIsPasswordInputFocused(false)}
               />
-              {showPassword ? (
+              {showPassword.password ? (
                 <button
                   type="button"
+                  tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(false)}
+                  onClick={() => handleShowPassword("password")}
                 >
                   <EyeOff className="h-4 w-4" />
                 </button>
               ) : (
                 <button
                   type="button"
+                  tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(true)}
+                  onClick={() => handleShowPassword("password")}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
@@ -262,11 +276,11 @@ export const InstanceSignUpForm: FC = (props) => {
 
           <div className="w-full space-y-1">
             <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-              Confirm password
+              Confirm password <span className="text-red-500">*</span>
             </label>
             <div className="relative">
               <Input
-                type={showPassword ? "text" : "password"}
+                type={showPassword.retypePassword ? "text" : "password"}
                 id="confirm_password"
                 name="confirm_password"
                 inputSize="md"
@@ -274,36 +288,38 @@ export const InstanceSignUpForm: 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 ? (
+              {showPassword.retypePassword ? (
                 <button
                   type="button"
+                  tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(false)}
+                  onClick={() => handleShowPassword("retypePassword")}
                 >
                   <EyeOff className="h-4 w-4" />
                 </button>
               ) : (
                 <button
                   type="button"
+                  tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(true)}
+                  onClick={() => handleShowPassword("retypePassword")}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
               )}
             </div>
-            {!!formData.confirm_password && formData.password !== formData.confirm_password && (
-              <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
-            )}
+            {!!formData.confirm_password &&
+              formData.password !== formData.confirm_password &&
+              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
           </div>
 
           <div className="relative flex items-center pt-2 gap-2">
             <div>
               <Checkbox
                 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}
               />
@@ -314,7 +330,13 @@ export const InstanceSignUpForm: FC = (props) => {
             >
               Allow Plane to anonymously collect usage events.
             </label>
-            <a href="https://docs.plane.so/telemetry" className="text-sm font-medium text-blue-500 hover:text-blue-600">
+            <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"
+            >
               See More
             </a>
           </div>

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 { AuthService } from "@/services/auth.service";
-// ui
+import { Eye, EyeOff } from "lucide-react";
 import { Button, Input, Spinner } from "@plane/ui";
 // components
-import { Banner } from "components/common";
-// icons
-import { Eye, EyeOff } from "lucide-react";
+import { Banner } from "@/components/common";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
+import { AuthService } from "@/services/auth.service";
+// ui
+// icons
 
 // service initialization
 const authService = new AuthService();
@@ -57,6 +57,8 @@ 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));
@@ -92,7 +94,7 @@ export const InstanceSignInForm: FC = (props) => {
   );
 
   return (
-    <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="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 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">
@@ -119,7 +121,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 pr-12 placeholder:text-onboarding-text-400"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -137,7 +139,7 @@ export const InstanceSignInForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
                 type={showPassword ? "text" : "password"}

admin/components/new-user-popup.tsx

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

admin/helpers/authentication.helper.tsx

@@ -1,10 +1,14 @@
 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",
-  "ONBOARDING" = "ONBOARDING",
-  "AUTHENTICATED" = "AUTHENTICATED",
+  PUBLIC = "PUBLIC",
+  NON_AUTHENTICATED = "NON_AUTHENTICATED",
+  SET_PASSWORD = "SET_PASSWORD",
+  ONBOARDING = "ONBOARDING",
+  AUTHENTICATED = "AUTHENTICATED",
 }
 
 export enum EAuthModes {
@@ -18,28 +22,27 @@ 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;
@@ -50,41 +53,58 @@ export type TAuthErrorInfo = {
 const errorCodeMessages: {
   [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
 } = {
-  [EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED]: {
-    title: "Instance not configured",
-    message: () => "Please contact your administrator to configure the instance.",
-  },
+  // admin
   [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
-    title: "Admin already exists",
-    message: () => "Admin already exists. Please sign in.",
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
   },
   [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
-    title: "Required",
-    message: () => "Please enter email, password and first name.",
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
   },
   [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
-    title: "Invalid email",
-    message: () => "Please enter a valid email.",
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
   },
   [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
-    title: "Invalid password",
-    message: () => "Password must be at least 8 characters long.",
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
   },
   [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
-    title: "Required",
-    message: () => "Please enter email and password.",
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
   },
   [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
-    title: "Authentication failed",
-    message: () => "Please check your email and password and try again.",
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
   },
   [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
-    title: "User already exists",
-    message: () => "User already exists. Please sign in.",
+    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>
+    ),
   },
   [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
-    title: "User does not exist",
-    message: () => "User does not exist. Please sign up.",
+    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"}.`,
   },
 };
 
@@ -92,28 +112,18 @@ export const authErrorHandler = (
   errorCode: EAuthenticationErrorCodes,
   email?: string | undefined
 ): TAuthErrorInfo | undefined => {
-  const toastAlertErrorCodes = [
+  const bannerAlertErrorCodes = [
     EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
     EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
     EAuthenticationErrorCodes.INVALID_ADMIN_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_AUTHENTICATION_FAILED,
     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

@@ -1,7 +1,18 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
+
+export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
+
+export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
+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/index.ts

@@ -1,6 +0,0 @@
-export * from "./use-outside-click-detector";
-
-// store-hooks
-export * from "./store/use-theme";
-export * from "./store/use-instance";
-export * from "./store/use-user";

admin/hooks/store/index.ts

@@ -0,0 +1,3 @@
+export * from "./use-theme";
+export * from "./use-instance";
+export * from "./use-user";

admin/hooks/store/use-instance.tsx

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

admin/layouts/admin-layout.tsx

@@ -1,15 +1,38 @@
-import { FC, ReactNode } from "react";
+"use client";
+import { FC, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/navigation";
 // 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> = (props) => {
+export const AdminLayout: FC<TAdminLayout> = observer((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">
@@ -21,4 +44,4 @@ export const AdminLayout: FC<TAdminLayout> = (props) => {
       <NewUserPopup />
     </div>
   );
-};
+});

admin/layouts/default-layout.tsx

@@ -2,11 +2,13 @@
 
 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 BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
+import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
 
 type TDefaultLayout = {
   children: ReactNode;
@@ -17,26 +19,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">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
-            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+            <Link href={`/`} className="h-[30px] w-[133px]">
+              <Image src={logo} alt="Plane logo" />
+            </Link>
           </div>
         </div>
         {!withoutBackground && (
           <div className="absolute inset-0 z-0">
-            <Image
-              src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-              className="w-screen h-full object-cover"
-              alt="Plane background pattern"
-            />
+            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
           </div>
         )}
-        <div className="relative z-10 mb-[110px] flex-grow">{children}</div>
+        <div className="relative z-10 flex-grow">{children}</div>
       </div>
     </div>
   );

admin/layouts/index.ts

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

admin/lib/instance-provider.tsx

@@ -0,0 +1,55 @@
+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

@@ -1,21 +0,0 @@
-"use client";
-
-import { ReactElement, createContext } from "react";
-// mobx store
-import { RootStore } from "@/store/root-store";
-
-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

@@ -0,0 +1,34 @@
+"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

@@ -0,0 +1,31 @@
+"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

@@ -1,36 +0,0 @@
-"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";
-// 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

@@ -1,59 +0,0 @@
-"use client";
-
-import { FC, ReactNode } from "react";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-import { Spinner } from "@plane/ui";
-// hooks
-import { useInstance, useUser } from "@/hooks";
-// helpers
-import { EAuthenticationPageType, EUserStatus } from "@/helpers";
-import { redirect } from "next/navigation";
-
-export interface IAuthWrapper {
-  children: ReactNode;
-  authType?: EAuthenticationPageType;
-}
-
-export const AuthWrapper: FC<IAuthWrapper> = observer((props) => {
-  const { children, authType = EAuthenticationPageType.AUTHENTICATED } = props;
-  // hooks
-  const { instance, fetchInstanceAdmins } = useInstance();
-  const { isLoading, userStatus, currentUser, fetchCurrentUser } = useUser();
-
-  useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
-    shouldRetryOnError: false,
-  });
-  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins(), {
-    shouldRetryOnError: false,
-  });
-
-  if (isLoading)
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
-
-  if (userStatus && userStatus?.status === EUserStatus.ERROR)
-    return (
-      <div className="relative flex h-screen w-screen items-center justify-center">
-        Something went wrong. please try again later
-      </div>
-    );
-
-  if ([EAuthenticationPageType.AUTHENTICATED, EAuthenticationPageType.NOT_AUTHENTICATED].includes(authType)) {
-    if (authType === EAuthenticationPageType.NOT_AUTHENTICATED) {
-      if (currentUser === undefined) return <>{children}</>;
-      else redirect("/general/");
-    } else {
-      if (currentUser) return <>{children}</>;
-      else {
-        if (instance?.instance?.is_setup_done) redirect("/login/");
-        else redirect("/setup/");
-      }
-    }
-  }
-
-  return <>{children}</>;
-});

admin/lib/wrappers/index.ts

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

admin/lib/wrappers/instance-wrapper.tsx

@@ -1,59 +0,0 @@
-"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";
-// helpers
-import { EInstancePageType, EInstanceStatus } from "@/helpers";
-
-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, instanceStatus, instance, fetchInstanceInfo } = useInstance();
-
-  useSWR("INSTANCE_INFORMATION", () => fetchInstanceInfo(), {
-    revalidateOnFocus: false,
-  });
-
-  if (isLoading)
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
-
-  if (instanceStatus && instanceStatus?.status === EInstanceStatus.ERROR)
-    return (
-      <div className="relative flex h-screen w-screen items-center justify-center">
-        Something went wrong. please try again later
-      </div>
-    );
-
-  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,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   trailingSlash: true,
   reactStrictMode: false,
@@ -7,7 +8,7 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  basePath: "/god-mode",
+  basePath: process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "",
 };
 
 module.exports = nextConfig;

admin/package.json

@@ -1,10 +1,10 @@
 {
   "name": "admin",
-  "version": "0.17.0",
+  "version": "0.21.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
-    "develop": "next dev --port 3333",
+    "develop": "next dev --port 3001",
     "build": "next build",
     "preview": "next build && next start",
     "start": "next start",
@@ -14,6 +14,7 @@
     "@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",
@@ -25,7 +26,7 @@
     "mobx-react-lite": "^4.0.5",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",
-    "postcss": "8.4.23",
+    "postcss": "^8.4.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.0",