dev: update the magic login expire check

.eslintrc-staged.js

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

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

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

.github/workflows/build-branch.yml

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

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

@@ -3,11 +3,10 @@ name: Build and Lint on Pull Request
 on:
   workflow_dispatch:
   pull_request:
-    types: ["opened", "synchronize", "ready_for_review"]
+    types: ["opened", "synchronize"]
 
 jobs:
   get-changed-files:
-    if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     outputs:
       apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}

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

@@ -29,7 +29,7 @@ jobs:
           else
             echo "MATCH=false" >> $GITHUB_OUTPUT
           fi
-  Create_PR:
+  Auto_Merge:
     if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
     needs: [Check_Branch]
     runs-on: ubuntu-latest
@@ -64,6 +64,6 @@ jobs:
             echo "Pull Request already exists: $PR_EXISTS"
           else
             echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: community changes" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.gitignore

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

.lintstagedrc.json

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

Dockerfile

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

admin/Dockerfile.admin

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

admin/app/ai/form.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";

admin/app/ai/layout.tsx

@@ -1,10 +1,8 @@
-import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+"use client";
 
-export const metadata: Metadata = {
-  title: "Artificial Intelligence Settings - Plane Web",
-};
+import { ReactNode } from "react";
+// layouts
+import { AdminLayout } from "@/layouts/admin-layout";
 
 export default function AILayout({ children }: { children: ReactNode }) {
   return <AdminLayout>{children}</AdminLayout>;

admin/app/ai/page.tsx

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

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";

admin/app/authentication/components/index.ts

@@ -1,6 +1,5 @@
 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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";

admin/app/authentication/github/form.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";

admin/app/authentication/github/page.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { PageHeader } from "@/components/core";
 // helpers
 import { resolveGeneralTheme } from "@/helpers/common.helper";
 // hooks
@@ -17,6 +16,7 @@ import { useInstance } from "@/hooks/store";
 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(() => {
@@ -63,9 +63,9 @@ const InstanceGithubAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="GitHub Authentication - Plane Web" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <PageHeader title="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">
           <AuthenticationMethodCard
             name="Github"
             description="Allow members to login or sign up to plane with their Github accounts."
@@ -93,7 +93,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceGithubConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/gitlab/form.tsx

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

admin/app/authentication/gitlab/page.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-import useSWR from "swr";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-// icons
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-// local 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="GitLab Authentication - Plane Web" />
-      <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/form.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";

admin/app/authentication/google/page.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-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 { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { PageHeader } from "@/components/core";
 // 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(() => {
@@ -57,9 +57,9 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Google Authentication - Plane Web" />
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <PageHeader title="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">
           <AuthenticationMethodCard
             name="Google"
             description="Allow members to login or sign up to plane with their Google
@@ -81,7 +81,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceGoogleConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/layout.tsx

@@ -1,10 +1,8 @@
-import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+"use client";
 
-export const metadata: Metadata = {
-  title: "Authentication Settings - Plane Web",
-};
+import { ReactNode } from "react";
+// layouts
+import { AdminLayout } from "@/layouts/admin-layout";
 
 export default function AuthenticationLayout({ children }: { children: ReactNode }) {
   return <AdminLayout>{children}</AdminLayout>;

admin/app/authentication/page.tsx

@@ -1,16 +1,39 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+import { useTheme } from "next-themes";
 import useSWR from "swr";
+import { Mails, KeyRound } from "lucide-react";
 import { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { Loader, setPromiseToast } from "@plane/ui";
+// components
+import { PageHeader } from "@/components/core";
 // hooks
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
 import { useInstance } from "@/hooks/store";
-// plane admin components
-import { AuthenticationModes } from "@/plane-admin/components/authentication";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+// local components
+import {
+  AuthenticationMethodCard,
+  EmailCodesConfiguration,
+  PasswordLoginConfiguration,
+  GithubConfiguration,
+  GoogleConfiguration,
+} from "./components";
+
+type TInstanceAuthenticationMethodCard = {
+  key: string;
+  name: string;
+  description: string;
+  icon: JSX.Element;
+  config: JSX.Element;
+};
 
 const InstanceAuthenticationPage = observer(() => {
   // store
@@ -20,8 +43,8 @@ const InstanceAuthenticationPage = observer(() => {
 
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // derived values
-  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
+  // theme
+  const { resolvedTheme } = useTheme();
 
   const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
     setIsSubmitting(true);
@@ -33,7 +56,7 @@ const InstanceAuthenticationPage = observer(() => {
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving configuration",
+      loading: "Saving Configuration...",
       success: {
         title: "Success",
         message: () => "Configuration saved successfully",
@@ -54,44 +77,69 @@ const InstanceAuthenticationPage = observer(() => {
       });
   };
 
+  // Authentication methods
+  const authenticationMethodsCard: TInstanceAuthenticationMethodCard[] = [
+    {
+      key: "email-codes",
+      name: "Email codes",
+      description: "Login or sign up using codes sent via emails. You need to have email setup here and enabled.",
+      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <EmailCodesConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+    {
+      key: "password-login",
+      name: "Password based login",
+      description: "Allow members to create accounts with passwords for emails to sign in.",
+      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <PasswordLoginConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+    {
+      key: "google",
+      name: "Google",
+      description: "Allow members to login or sign up to plane with their Google accounts.",
+      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+      config: <GoogleConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+    {
+      key: "github",
+      name: "Github",
+      description: "Allow members to login or sign up to plane with their Github accounts.",
+      icon: (
+        <Image
+          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+          height={20}
+          width={20}
+          alt="GitHub Logo"
+        />
+      ),
+      config: <GithubConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+  ];
+
   return (
     <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
+      <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="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure authentication modes for your team and restrict sign ups to be invite only.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className={cn("w-full flex items-center gap-14 rounded")}>
-                <div className="flex grow items-center gap-4">
-                  <div className="grow">
-                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
-                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                      Toggling this off will only let users sign up when they are invited.
-                    </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>
-              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
+              <div className="text-lg font-medium">Authentication modes</div>
+              {authenticationMethodsCard.map((method) => (
+                <AuthenticationMethodCard
+                  key={method.key}
+                  name={method.name}
+                  description={method.description}
+                  icon={method.icon}
+                  config={method.config}
+                  disabled={isSubmitting}
+                />
+              ))}
             </div>
           ) : (
             <Loader className="space-y-10">

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

@@ -1,5 +1,3 @@
-"use client";
-
 import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types

admin/app/email/layout.tsx

@@ -1,15 +1,13 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
+// layouts
 import { AdminLayout } from "@/layouts/admin-layout";
 
 interface EmailLayoutProps {
   children: ReactNode;
 }
 
-export const metadata: Metadata = {
-  title: "Email Settings - Plane Web",
-};
+const EmailLayout = ({ children }: EmailLayoutProps) => <AdminLayout>{children}</AdminLayout>;
 
-export default function EmailLayout({ children }: EmailLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
-}
+export default EmailLayout;

admin/app/email/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
+// components
+import { PageHeader } from "@/components/core";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@@ -16,8 +18,9 @@ const InstanceEmailPage = observer(() => {
 
   return (
     <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <PageHeader title="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="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.
@@ -27,7 +30,7 @@ const InstanceEmailPage = observer(() => {
             </div>
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceEmailForm config={formattedConfig} />
           ) : (

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

@@ -51,7 +51,7 @@ export const SendTestEmailModal: FC<Props> = (props) => {
         setSendEmailStep(ESendEmailSteps.SUCCESS);
       })
       .catch((error) => {
-        setError(error?.error || "Failed to send email");
+        setError(error?.message || "Failed to send email");
         setSendEmailStep(ESendEmailSteps.FAILED);
       })
       .finally(() => {

admin/app/general/form.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { FC } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
 // types
@@ -13,7 +13,7 @@ import { ControllerInput } from "@/components/common";
 import { useInstance } from "@/hooks/store";
 
 export interface IGeneralConfigurationForm {
-  instance: IInstance;
+  instance: IInstance["instance"];
   instanceAdmins: IInstanceAdmin[];
 }
 
@@ -26,15 +26,15 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
     handleSubmit,
     control,
     formState: { errors, isSubmitting },
-  } = useForm<Partial<IInstance>>({
+  } = useForm<Partial<IInstance["instance"]>>({
     defaultValues: {
       instance_name: instance?.instance_name,
       is_telemetry_enabled: instance?.is_telemetry_enabled,
     },
   });
 
-  const onSubmit = async (formData: Partial<IInstance>) => {
-    const payload: Partial<IInstance> = { ...formData };
+  const onSubmit = async (formData: Partial<IInstance["instance"]>) => {
+    const payload: Partial<IInstance["instance"]> = { ...formData };
 
     console.log("payload", payload);
 

admin/app/general/layout.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
+// components
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "General Settings - Plane Web",
+  title: "General Settings - God Mode",
 };
 
 export default function GeneralLayout({ children }: { children: ReactNode }) {

admin/app/general/page.tsx

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

admin/app/globals.css

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

admin/app/image/form.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";

admin/app/image/layout.tsx

@@ -1,15 +1,11 @@
 import { ReactNode } from "react";
-import { Metadata } from "next";
+// layouts
 import { AdminLayout } from "@/layouts/admin-layout";
 
 interface ImageLayoutProps {
   children: ReactNode;
 }
 
-export const metadata: Metadata = {
-  title: "Images Settings - Plane Web",
-};
+const ImageLayout = ({ children }: ImageLayoutProps) => <AdminLayout>{children}</AdminLayout>;
 
-export default function ImageLayout({ children }: ImageLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
-}
+export default ImageLayout;

admin/app/image/page.tsx

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

admin/app/layout.tsx

@@ -1,27 +1,40 @@
-"use client";
-
 import { ReactNode } from "react";
-import { ThemeProvider, useTheme } from "next-themes";
-import { SWRConfig } from "swr";
-// ui
-import { Toast } from "@plane/ui";
-// constants
-import { SWR_CONFIG } from "@/constants/swr-config";
+import { Metadata } from "next";
+// components
+import { InstanceFailureView, InstanceSetupForm } from "@/components/instance";
 // helpers
-import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
+import { ASSET_PREFIX } from "@/helpers/common.helper";
+// layout
+import { DefaultLayout } from "@/layouts/default-layout";
 // lib
-import { InstanceProvider } from "@/lib/instance-provider";
-import { StoreProvider } from "@/lib/store-provider";
-import { UserProvider } from "@/lib/user-provider";
+import { AppProvider } from "@/lib/app-providers";
 // styles
 import "./globals.css";
+// services
+import { InstanceService } from "@/services/instance.service";
 
-const ToastWithTheme = () => {
-  const { resolvedTheme } = useTheme();
-  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+const instanceService = new InstanceService();
+
+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 function RootLayout({ children }: { children: ReactNode }) {
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const instanceDetails = await instanceService.getInstanceInfo().catch(() => null);
+
   return (
     <html lang="en">
       <head>
@@ -32,16 +45,27 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
       </head>
       <body className={`antialiased`}>
-        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <ToastWithTheme />
-          <SWRConfig value={SWR_CONFIG}>
-            <StoreProvider>
-              <InstanceProvider>
-                <UserProvider>{children}</UserProvider>
-              </InstanceProvider>
-            </StoreProvider>
-          </SWRConfig>
-        </ThemeProvider>
+        <AppProvider initialState={{ instance: instanceDetails }}>
+          {instanceDetails ? (
+            <>
+              {instanceDetails?.instance?.is_setup_done ? (
+                <>{children}</>
+              ) : (
+                <DefaultLayout>
+                  <div className="relative w-screen min-h-screen overflow-y-auto px-5 py-10 mx-auto flex justify-center items-center">
+                    <InstanceSetupForm />
+                  </div>
+                </DefaultLayout>
+              )}
+            </>
+          ) : (
+            <DefaultLayout>
+              <div className="relative w-screen min-h-[500px] overflow-y-auto px-5 mx-auto flex justify-center items-center">
+                <InstanceFailureView />
+              </div>
+            </DefaultLayout>
+          )}
+        </AppProvider>
       </body>
     </html>
   );

admin/app/page.tsx

@@ -1,26 +1,7 @@
-import { Metadata } from "next";
-// components
 import { InstanceSignInForm } from "@/components/login";
 // layouts
 import { DefaultLayout } from "@/layouts/default-layout";
 
-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 async function LoginPage() {
   return (
     <DefaultLayout>

admin/ce/components/authentication/authentication-modes.tsx

@@ -1,104 +0,0 @@
-import { observer } from "mobx-react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-import { KeyRound, Mails } from "lucide-react";
-// types
-import { TInstanceAuthenticationMethodKeys, TInstanceAuthenticationModes } from "@plane/types";
-// components
-import {
-  AuthenticationMethodCard,
-  EmailCodesConfiguration,
-  GithubConfiguration,
-  GitlabConfiguration,
-  GoogleConfiguration,
-  PasswordLoginConfiguration,
-} from "@/components/authentication";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
-// images
-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";
-
-export type TAuthenticationModeProps = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export type TGetAuthenticationModeProps = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-  resolvedTheme: string | undefined;
-};
-
-// Authentication methods
-export const getAuthenticationModes: (props: TGetAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-    {
-    key: "unique-codes",
-    name: "Unique codes",
-    description: "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "passwords-login",
-      name: "Passwords",
-      description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "google",
-      name: "Google",
-      description: "Allow members to log in or sign up for Plane with their Google accounts.",
-      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
-      config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "github",
-      name: "GitHub",
-      description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
-      icon: (
-        <Image
-          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-          height={20}
-          width={20}
-          alt="GitHub Logo"
-        />
-      ),
-      config: <GithubConfiguration disabled={disabled} 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={disabled} updateConfig={updateConfig} />,
-    },
-  ];
-
-export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // next-themes
-  const { resolvedTheme } = useTheme();
-
-  return (
-    <>
-      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
-        <AuthenticationMethodCard
-          key={method.key}
-          name={method.name}
-          description={method.description}
-          icon={method.icon}
-          config={method.config}
-          disabled={disabled}
-        />
-      ))}
-    </>
-  );
-});

admin/ce/components/authentication/index.ts

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

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

@@ -1,15 +1,13 @@
 "use client";
 
 import { FC, useState, useRef } from "react";
-import { observer } from "mobx-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 { WEB_BASE_URL } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
 // assets
 import packageJson from "package.json";
@@ -40,16 +38,13 @@ export const HelpSection: FC = observer(() => {
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
+  const redirectionLink = encodeURI(WEB_BASE_URL + "/create-workspace");
 
   return (
     <div
-      className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
-        {
-          "flex-col h-auto py-1.5": isSidebarCollapsed,
-        }
-      )}
+      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+        isSidebarCollapsed ? "flex-col" : ""
+      }`}
     >
       <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
         <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>

admin/components/admin-sidebar/root.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { FC, useEffect, useRef } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 import { useTheme } from "@/hooks/store";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 
 export interface IInstanceSidebar {}
@@ -43,8 +43,8 @@ export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
         fixed md:relative
         ${isSidebarCollapsed ? "-ml-[280px]" : ""}
         sm:${isSidebarCollapsed ? "-ml-[280px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[280px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[280px]"}
+        md:ml-0 ${isSidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${isSidebarCollapsed ? "w-[80px]" : "w-[280px]"}
       `}
     >
       <div ref={ref} className="flex h-full w-full flex-1 flex-col">

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Fragment, useEffect, useState } from "react";
-import { observer } from "mobx-react";
+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";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import { Menu } from "lucide-react";
 import { useTheme } from "@/hooks/store";

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

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

admin/components/auth-header.tsx

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

admin/components/common/breadcrumb-link.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import Link from "next/link";
 import { Tooltip } from "@plane/ui";
 

admin/components/common/confirm-discard-modal.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Link from "next/link";
 // headless ui
@@ -45,22 +43,33 @@ export const ConfirmDiscardModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-custom-text-300"
+                      >
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-400">
-                          Changes you made will be lost if you go back. Do you wish to go back?
+                          Changes you made will be lost if you go back. Do you
+                          wish to go back?
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    onClick={handleClose}
+                  >
                     Keep editing
                   </Button>
-                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
+                  <Link
+                    href={onDiscardHref}
+                    className={getButtonStyling("primary", "sm")}
+                  >
                     Go back
                   </Link>
                 </div>

admin/components/common/controller-input.tsx

@@ -2,10 +2,10 @@
 
 import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
-// icons
-import { Eye, EyeOff } from "lucide-react";
 // ui
+import { Eye, EyeOff } from "lucide-react";
 import { Input } from "@plane/ui";
+// icons
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -37,9 +37,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">
-        {label} {!required && "(optional)"}
-      </h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <div className="relative">
         <Controller
           control={control}

admin/components/common/copy-field.tsx

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

admin/components/common/empty-state.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Image from "next/image";
 import { Button } from "@plane/ui";

admin/components/common/index.ts

@@ -6,4 +6,3 @@ export * from "./password-strength-meter";
 export * from "./banner";
 export * from "./empty-state";
 export * from "./logo-spinner";
-export * from "./page-header";

admin/components/common/logo-spinner.tsx

@@ -11,7 +11,7 @@ export const LogoSpinner = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
+      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
     </div>
   );
 };

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

@@ -0,0 +1,69 @@
+"use client";
+
+// helpers
+import { CircleCheck } from "lucide-react";
+import { cn } from "@/helpers/common.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";
+// icons
+
+type Props = {
+  password: string;
+};
+
+export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => {
+  const { password } = props;
+
+  const strength = getPasswordStrength(password);
+  let bars = [];
+  let text = "";
+  let textColor = "";
+
+  if (password.length === 0) {
+    bars = [`bg-[#F0F0F3]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
+    text = "Password requirements";
+  } else if (password.length < 8) {
+    bars = [`bg-[#DC3E42]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
+    text = "Password is too short";
+    textColor = `text-[#DC3E42]`;
+  } else if (strength < 3) {
+    bars = [`bg-[#FFBA18]`, `bg-[#FFBA18]`, `bg-[#F0F0F3]`];
+    text = "Password is weak";
+    textColor = `text-[#FFBA18]`;
+  } else {
+    bars = [`bg-[#3E9B4F]`, `bg-[#3E9B4F]`, `bg-[#3E9B4F]`];
+    text = "Password is strong";
+    textColor = `text-[#3E9B4F]`;
+  }
+
+  const criteria = [
+    { label: "Min 8 characters", isValid: password.length >= 8 },
+    { label: "Min 1 upper-case letter", isValid: /[A-Z]/.test(password) },
+    { label: "Min 1 number", isValid: /\d/.test(password) },
+    { label: "Min 1 special character", isValid: /[!@#$%^&*]/.test(password) },
+  ];
+
+  return (
+    <div className="w-full p-1">
+      <div className="flex w-full gap-1.5">
+        {bars.map((color, index) => (
+          <div key={index} className={cn("w-full h-1 rounded-full", color)} />
+        ))}
+      </div>
+      <p className={cn("text-xs font-medium py-1", textColor)}>{text}</p>
+      <div className="flex flex-wrap gap-x-4 gap-y-2">
+        {criteria.map((criterion, index) => (
+          <div
+            key={index}
+            className={cn(
+              "flex items-center gap-1 text-xs font-medium",
+              criterion.isValid ? `text-[#3E9B4F]` : "text-custom-text-400"
+            )}
+          >
+            <CircleCheck width={14} height={14} />
+            {criterion.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

admin/components/core/index.ts

@@ -0,0 +1 @@
+export * from "./page-header";

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

@@ -21,7 +21,7 @@ export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
   };
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
+    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
       <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" />

admin/components/instance/setup-form.tsx

@@ -10,7 +10,7 @@ import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 import { Banner, PasswordStrengthMeter } from "@/components/common";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
-import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 
@@ -64,19 +64,13 @@ export const InstanceSetupForm: FC = (props) => {
   const errorCode = searchParams.get("error_code") || undefined;
   const errorMessage = searchParams.get("error_message") || undefined;
   // state
-  const [showPassword, setShowPassword] = useState({
-    password: false,
-    retypePassword: false,
-  });
+  const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
 
-  const handleShowPassword = (key: keyof typeof showPassword) =>
-    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
 
@@ -121,19 +115,15 @@ export const InstanceSetupForm: FC = (props) => {
       formData.first_name &&
       formData.email &&
       formData.password &&
-      getPasswordStrength(formData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
+      getPasswordStrength(formData.password) >= 3 &&
       formData.password === formData.confirm_password
         ? false
         : true,
     [formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
   );
 
-  const password = formData?.password ?? "";
-  const confirmPassword = formData?.confirm_password ?? "";
-  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
-
   return (
-    <div className="max-w-lg lg:max-w-md w-full">
+    <div className="max-w-lg px-10 lg:max-w-md lg:px-5">
       <div className="relative flex flex-col space-y-6">
         <div className="text-center space-y-1">
           <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
@@ -158,9 +148,8 @@ export const InstanceSetupForm: FC = (props) => {
           onError={() => setIsSubmitting(false)}
         >
           <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
 
-          <div className="flex flex-col sm:flex-row items-center gap-4">
+          <div className="flex items-center gap-4">
             <div className="w-full space-y-1">
               <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
                 First name <span className="text-red-500">*</span>
@@ -239,7 +228,7 @@ export const InstanceSetupForm: FC = (props) => {
                 className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
-                type={showPassword.password ? "text" : "password"}
+                type={showPassword ? "text" : "password"}
                 inputSize="md"
                 placeholder="New password..."
                 value={formData.password}
@@ -248,12 +237,12 @@ export const InstanceSetupForm: FC = (props) => {
                 onFocus={() => setIsPasswordInputFocused(true)}
                 onBlur={() => setIsPasswordInputFocused(false)}
               />
-              {showPassword.password ? (
+              {showPassword ? (
                 <button
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
+                  onClick={() => setShowPassword(false)}
                 >
                   <EyeOff className="h-4 w-4" />
                 </button>
@@ -262,7 +251,7 @@ export const InstanceSetupForm: FC = (props) => {
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
+                  onClick={() => setShowPassword(true)}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
@@ -271,7 +260,7 @@ export const InstanceSetupForm: FC = (props) => {
             {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
               <p className="px-1 text-xs text-red-500">{errorData.message}</p>
             )}
-            <PasswordStrengthMeter password={formData.password} isFocused={isPasswordInputFocused} />
+            {isPasswordInputFocused && <PasswordStrengthMeter password={formData.password} />}
           </div>
 
           <div className="w-full space-y-1">
@@ -280,7 +269,7 @@ export const InstanceSetupForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                type={showPassword.retypePassword ? "text" : "password"}
+                type={showPassword ? "text" : "password"}
                 id="confirm_password"
                 name="confirm_password"
                 inputSize="md"
@@ -291,12 +280,12 @@ export const InstanceSetupForm: FC = (props) => {
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
               />
-              {showPassword.retypePassword ? (
+              {showPassword ? (
                 <button
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
+                  onClick={() => setShowPassword(false)}
                 >
                   <EyeOff className="h-4 w-4" />
                 </button>
@@ -305,7 +294,7 @@ export const InstanceSetupForm: FC = (props) => {
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
+                  onClick={() => setShowPassword(true)}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
@@ -313,15 +302,15 @@ export const InstanceSetupForm: FC = (props) => {
             </div>
             {!!formData.confirm_password &&
               formData.password !== formData.confirm_password &&
-              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+              !isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
           </div>
 
           <div className="relative flex items-center pt-2 gap-2">
             <div>
               <Checkbox
-                className="w-4 h-4"
-                iconClassName="w-3 h-3"
                 id="is_telemetry_enabled"
+                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}
               />

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

@@ -94,7 +94,7 @@ export const InstanceSignInForm: FC = (props) => {
   );
 
   return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+    <div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 flex flex-col justify-center items-center">
       <div className="relative flex flex-col space-y-6">
         <div className="text-center space-y-1">
           <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">

admin/components/new-user-popup.tsx

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

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

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-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/core/components/common/password-strength-meter.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import { FC, useMemo } from "react";
-// import { CircleCheck } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import {
-  E_PASSWORD_STRENGTH,
-  // PASSWORD_CRITERIA,
-  getPasswordStrength,
-} from "@/helpers/password.helper";
-
-type TPasswordStrengthMeter = {
-  password: string;
-  isFocused?: boolean;
-};
-
-export const PasswordStrengthMeter: FC<TPasswordStrengthMeter> = (props) => {
-  const { password, isFocused = false } = props;
-  // derived values
-  const strength = useMemo(() => getPasswordStrength(password), [password]);
-  const strengthBars = useMemo(() => {
-    switch (strength) {
-      case E_PASSWORD_STRENGTH.EMPTY: {
-        return {
-          bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Please enter your password.",
-          textColor: "text-custom-text-100",
-        };
-      }
-      case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID: {
-        return {
-          bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Password length should me more than 8 characters.",
-          textColor: "text-red-500",
-        };
-      }
-      case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID: {
-        return {
-          bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Password is weak.",
-          textColor: "text-red-500",
-        };
-      }
-      case E_PASSWORD_STRENGTH.STRENGTH_VALID: {
-        return {
-          bars: [`bg-green-500`, `bg-green-500`, `bg-green-500`],
-          text: "Password is strong.",
-          textColor: "text-green-500",
-        };
-      }
-      default: {
-        return {
-          bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Please enter your password.",
-          textColor: "text-custom-text-100",
-        };
-      }
-    }
-  }, [strength]);
-
-  const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
-
-  if (!isPasswordMeterVisible) return <></>;
-  return (
-    <div className="w-full space-y-2 pt-2">
-      <div className="space-y-1.5">
-        <div className="relative flex items-center gap-2">
-          {strengthBars?.bars.map((color, index) => (
-            <div key={`${color}-${index}`} className={cn("w-full h-1 rounded-full", color)} />
-          ))}
-        </div>
-        <div className={cn(`text-xs font-medium text-custom-text-100`, strengthBars?.textColor)}>
-          {strengthBars?.text}
-        </div>
-      </div>
-
-      {/* <div className="relative flex flex-wrap gap-x-4 gap-y-2">
-        {PASSWORD_CRITERIA.map((criteria) => (
-          <div
-            key={criteria.key}
-            className={cn(
-              "relative flex items-center gap-1 text-xs",
-              criteria.isCriteriaValid(password) ? `text-green-500/70` : "text-custom-text-300"
-            )}
-          >
-            <CircleCheck width={14} height={14} />
-            {criteria.label}
-          </div>
-        ))}
-      </div> */}
-    </div>
-  );
-};

admin/core/lib/instance-provider.tsx

@@ -1,55 +0,0 @@
-import { FC, ReactNode } from "react";
-import { observer } from "mobx-react";
-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/core/lib/user-provider.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react";
-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/ee/components/authentication/authentication-modes.tsx

@@ -1 +0,0 @@
-export * from "ce/components/authentication/authentication-modes";

admin/ee/components/authentication/index.ts

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

admin/helpers/authentication.helper.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from "react";
 import Link from "next/link";
-// helpers
-import { SUPPORT_EMAIL } from "./common.helper";
 
 export enum EPageTypes {
   PUBLIC = "PUBLIC",
@@ -40,7 +38,6 @@ export enum EAuthenticationErrorCodes {
   ADMIN_AUTHENTICATION_FAILED = "5175",
   ADMIN_USER_ALREADY_EXIST = "5180",
   ADMIN_USER_DOES_NOT_EXIST = "5185",
-  ADMIN_USER_DEACTIVATED = "5190",
 }
 
 export type TAuthErrorInfo = {
@@ -102,10 +99,6 @@ const errorCodeMessages: {
       </div>
     ),
   },
-  [EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED]: {
-    title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
-  },
 };
 
 export const authErrorHandler = (
@@ -113,7 +106,6 @@ export const authErrorHandler = (
   email?: string | undefined
 ): TAuthErrorInfo | undefined => {
   const bannerAlertErrorCodes = [
-    EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
     EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
     EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
     EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
@@ -121,7 +113,6 @@ export const authErrorHandler = (
     EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
     EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
     EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
-    EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED,
   ];
 
   if (bannerAlertErrorCodes.includes(errorCode))

admin/helpers/common.helper.ts

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

admin/helpers/password.helper.ts

@@ -1,67 +1,16 @@
 import zxcvbn from "zxcvbn";
 
-export enum E_PASSWORD_STRENGTH {
-  EMPTY = "empty",
-  LENGTH_NOT_VALID = "length_not_valid",
-  STRENGTH_NOT_VALID = "strength_not_valid",
-  STRENGTH_VALID = "strength_valid",
-}
+export const isPasswordCriteriaMet = (password: string) => {
+  const criteria = [password.length >= 8, /[A-Z]/.test(password), /\d/.test(password), /[!@#$%^&*]/.test(password)];
 
-const PASSWORD_MIN_LENGTH = 8;
-// const PASSWORD_NUMBER_REGEX = /\d/;
-// const PASSWORD_CHAR_CAPS_REGEX = /[A-Z]/;
-// const PASSWORD_SPECIAL_CHAR_REGEX = /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/;
-
-export const PASSWORD_CRITERIA = [
-  {
-    key: "min_8_char",
-    label: "Min 8 characters",
-    isCriteriaValid: (password: string) => password.length >= PASSWORD_MIN_LENGTH,
-  },
-  // {
-  //   key: "min_1_upper_case",
-  //   label: "Min 1 upper-case letter",
-  //   isCriteriaValid: (password: string) => PASSWORD_NUMBER_REGEX.test(password),
-  // },
-  // {
-  //   key: "min_1_number",
-  //   label: "Min 1 number",
-  //   isCriteriaValid: (password: string) => PASSWORD_CHAR_CAPS_REGEX.test(password),
-  // },
-  // {
-  //   key: "min_1_special_char",
-  //   label: "Min 1 special character",
-  //   isCriteriaValid: (password: string) => PASSWORD_SPECIAL_CHAR_REGEX.test(password),
-  // },
-];
-
-export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
-  let passwordStrength: E_PASSWORD_STRENGTH = E_PASSWORD_STRENGTH.EMPTY;
-
-  if (!password || password === "" || password.length <= 0) {
-    return passwordStrength;
-  }
-
-  if (password.length >= PASSWORD_MIN_LENGTH) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
-  } else {
-    passwordStrength = E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
-    return passwordStrength;
-  }
-
-  const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every(
-    (criterion) => criterion
-  );
-  const passwordStrengthScore = zxcvbn(password).score;
-
-  if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
-    return passwordStrength;
-  }
-
-  if (passwordCriteriaValidation === true && passwordStrengthScore >= 3) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_VALID;
-  }
-
-  return passwordStrength;
+  return criteria.every((criterion) => criterion);
+};
+
+export const getPasswordStrength = (password: string) => {
+  if (password.length === 0) return 0;
+  if (password.length < 8) return 1;
+  if (!isPasswordCriteriaMet(password)) return 2;
+
+  const result = zxcvbn(password);
+  return result.score;
 };

admin/hooks/store/use-instance.tsx

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

admin/hooks/store/use-theme.tsx

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

admin/hooks/store/use-user.tsx

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

admin/layouts/admin-layout.tsx

@@ -1,14 +1,15 @@
 "use client";
 import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/navigation";
+import useSWR from "swr";
 // 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";
+import { useInstance, useUser } from "@/hooks/store";
 
 type TAdminLayout = {
   children: ReactNode;
@@ -18,7 +19,15 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
   const { children } = props;
   // router
   const router = useRouter();
-  const { isUserLoggedIn } = useUser();
+  // hooks
+  const { fetchInstanceAdmins } = useInstance();
+  const { fetchCurrentUser, isUserLoggedIn } = useUser();
+
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
+
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
 
   useEffect(() => {
     if (isUserLoggedIn === false) {

admin/layouts/default-layout.tsx

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

admin/lib/app-providers.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { ReactNode, createContext } from "react";
+import { ThemeProvider } from "next-themes";
 // store
 import { RootStore } from "@/store/root.store";
+// store initialization
+import { AppWrapper } from "./app-wrapper";
 
 let rootStore = new RootStore();
 
@@ -22,13 +25,19 @@ function initializeStore(initialData = {}) {
   return singletonRootStore;
 }
 
-export type StoreProviderProps = {
+export type AppProviderProps = {
   children: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  initialState?: any;
+  initialState: any;
 };
 
-export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
+export const AppProvider = ({ children, initialState = {} }: AppProviderProps) => {
   const store = initializeStore(initialState);
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+
+  return (
+    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+      <StoreContext.Provider value={store}>
+        <AppWrapper>{children}</AppWrapper>
+      </StoreContext.Provider>
+    </ThemeProvider>
+  );
 };

admin/lib/app-wrapper.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { FC, ReactNode, useEffect, Suspense } from "react";
+import { observer } from "mobx-react-lite";
+import { SWRConfig } from "swr";
+// ui
+import { Toast } from "@plane/ui";
+// constants
+import { SWR_CONFIG } from "@/constants/swr-config";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
+// hooks
+import { useTheme, useUser } from "@/hooks/store";
+
+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/next.config.js

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

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "0.21.0",
+  "version": "0.17.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -14,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",
@@ -22,7 +23,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.356.0",
     "mobx": "^6.12.0",
-    "mobx-react": "^9.1.1",
+    "mobx-react-lite": "^4.0.5",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.38",

admin/public/logos/gitlab-logo.svg

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

admin/services/auth.service.ts

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

admin/services/instance.service.ts

@@ -1,11 +1,5 @@
 // types
-import type {
-  IFormattedInstanceConfiguration,
-  IInstance,
-  IInstanceAdmin,
-  IInstanceConfiguration,
-  IInstanceInfo,
-} from "@plane/types";
+import type { IFormattedInstanceConfiguration, IInstance, IInstanceAdmin, IInstanceConfiguration } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
@@ -15,8 +9,8 @@ export class InstanceService extends APIService {
     super(API_BASE_URL);
   }
 
-  async getInstanceInfo(): Promise<IInstanceInfo> {
-    return this.get<IInstanceInfo>("/api/instances/")
+  async getInstanceInfo(): Promise<IInstance> {
+    return this.get<IInstance>("/api/instances/")
       .then((response) => response.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -31,8 +25,8 @@ export class InstanceService extends APIService {
       });
   }
 
-  async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
-    return this.patch<Partial<IInstance>, IInstance>("/api/instances/", data)
+  async updateInstanceInfo(data: Partial<IInstance["instance"]>): Promise<IInstance["instance"]> {
+    return this.patch<Partial<IInstance["instance"]>, IInstance["instance"]>("/api/instances/", data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

admin/services/user.service.ts

@@ -1,9 +1,9 @@
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
 // types
 import type { IUser } from "@plane/types";
-// services
-import { APIService } from "@/services/api.service";
 
 interface IUserSession extends IUser {
   isAuthenticated: boolean;

admin/store/instance.store.ts

@@ -1,15 +1,8 @@
 import set from "lodash/set";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
-import {
-  IInstance,
-  IInstanceAdmin,
-  IInstanceConfiguration,
-  IFormattedInstanceConfiguration,
-  IInstanceInfo,
-  IInstanceConfig,
-} from "@plane/types";
+import { IInstance, IInstanceAdmin, IInstanceConfiguration, IFormattedInstanceConfiguration } from "@plane/types";
 // helpers
-import { EInstanceStatus, TInstanceStatus } from "@/helpers/instance.helper";
+import { EInstanceStatus, TInstanceStatus } from "@/helpers";
 // services
 import { InstanceService } from "@/services/instance.service";
 // root store
@@ -18,18 +11,16 @@ import { RootStore } from "@/store/root.store";
 export interface IInstanceStore {
   // issues
   isLoading: boolean;
-  error: any;
   instanceStatus: TInstanceStatus | undefined;
   instance: IInstance | undefined;
-  config: IInstanceConfig | undefined;
   instanceAdmins: IInstanceAdmin[] | undefined;
   instanceConfigurations: IInstanceConfiguration[] | undefined;
   // computed
   formattedConfig: IFormattedInstanceConfiguration | undefined;
   // action
-  hydrate: (data: IInstanceInfo) => void;
-  fetchInstanceInfo: () => Promise<IInstanceInfo | undefined>;
-  updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance | undefined>;
+  hydrate: (data: any) => void;
+  fetchInstanceInfo: () => Promise<IInstance | undefined>;
+  updateInstanceInfo: (data: Partial<IInstance["instance"]>) => Promise<IInstance["instance"] | undefined>;
   fetchInstanceAdmins: () => Promise<IInstanceAdmin[] | undefined>;
   fetchInstanceConfigurations: () => Promise<IInstanceConfiguration[] | undefined>;
   updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
@@ -37,10 +28,8 @@ export interface IInstanceStore {
 
 export class InstanceStore implements IInstanceStore {
   isLoading: boolean = true;
-  error: any = undefined;
   instanceStatus: TInstanceStatus | undefined = undefined;
   instance: IInstance | undefined = undefined;
-  config: IInstanceConfig | undefined = undefined;
   instanceAdmins: IInstanceAdmin[] | undefined = undefined;
   instanceConfigurations: IInstanceConfiguration[] | undefined = undefined;
   // service
@@ -50,7 +39,6 @@ export class InstanceStore implements IInstanceStore {
     makeObservable(this, {
       // observable
       isLoading: observable.ref,
-      error: observable.ref,
       instanceStatus: observable,
       instance: observable,
       instanceAdmins: observable,
@@ -69,11 +57,8 @@ export class InstanceStore implements IInstanceStore {
     this.instanceService = new InstanceService();
   }
 
-  hydrate = (data: IInstanceInfo) => {
-    if (data) {
-      this.instance = data.instance;
-      this.config = data.config;
-    }
+  hydrate = (data: any) => {
+    if (data) this.instance = data;
   };
 
   /**
@@ -95,22 +80,17 @@ export class InstanceStore implements IInstanceStore {
   fetchInstanceInfo = async () => {
     try {
       if (this.instance === undefined) this.isLoading = true;
-      this.error = undefined;
-      const instanceInfo = await this.instanceService.getInstanceInfo();
+      const instance = await this.instanceService.getInstanceInfo();
       // handling the new user popup toggle
-      if (this.instance === undefined && !instanceInfo?.instance?.workspaces_exist)
-        this.store.theme.toggleNewUserPopup();
+      if (this.instance === undefined && !instance?.instance?.workspaces_exist) this.store.theme.toggleNewUserPopup();
       runInAction(() => {
-        console.log("instanceInfo: ", instanceInfo);
         this.isLoading = false;
-        this.instance = instanceInfo.instance;
-        this.config = instanceInfo.config;
+        this.instance = instance;
       });
-      return instanceInfo;
+      return instance;
     } catch (error) {
       console.error("Error fetching the instance info");
       this.isLoading = false;
-      this.error = { message: "Failed to fetch the instance info" };
       this.instanceStatus = {
         status: EInstanceStatus.ERROR,
       };
@@ -120,10 +100,10 @@ export class InstanceStore implements IInstanceStore {
 
   /**
    * @description updating instance information
-   * @param {Partial<IInstance>} data
+   * @param {Partial<IInstance["instance"]>} data
    * @returns void
    */
-  updateInstanceInfo = async (data: Partial<IInstance>) => {
+  updateInstanceInfo = async (data: Partial<IInstance["instance"]>) => {
     try {
       const instanceResponse = await this.instanceService.updateInstanceInfo(data);
       if (instanceResponse) {

admin/store/root.store.ts

@@ -1,4 +1,4 @@
-import { enableStaticRendering } from "mobx-react";
+import { enableStaticRendering } from "mobx-react-lite";
 // stores
 import { IInstanceStore, InstanceStore } from "./instance.store";
 import { IThemeStore, ThemeStore } from "./theme.store";

admin/store/user.store.ts

@@ -1,7 +1,7 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
 import { IUser } from "@plane/types";
 // helpers
-import { EUserStatus, TUserStatus } from "@/helpers/user.helper";
+import { EUserStatus, TUserStatus } from "@/helpers";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";