snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/admin/.dockerignore

@@ -0,0 +1,5 @@
+# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
+.react-router/
+build/
+node_modules/
+README.md

apps/admin/.env.example

@@ -0,0 +1,12 @@
+VITE_API_BASE_URL="http://localhost:8000"
+
+VITE_WEB_BASE_URL="http://localhost:3000"
+
+VITE_ADMIN_BASE_URL="http://localhost:3001"
+VITE_ADMIN_BASE_PATH="/god-mode"
+
+VITE_SPACE_BASE_URL="http://localhost:3002"
+VITE_SPACE_BASE_PATH="/spaces"
+
+VITE_LIVE_BASE_URL="http://localhost:3100"
+VITE_LIVE_BASE_PATH="/live"

apps/admin/.prettierignore

@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/

apps/admin/Dockerfile.admin

@@ -0,0 +1,128 @@
+FROM node:22-alpine AS base
+
+WORKDIR /app
+
+ENV TURBO_TELEMETRY_DISABLED=1
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PNPM_HOME/bin:$PATH"
+ENV CI=1
+
+RUN corepack enable pnpm
+
+# =========================================================================== #
+
+FROM base AS builder
+
+RUN pnpm add -g turbo@2.9.18
+
+COPY . .
+
+# Create a pruned workspace for just the admin app
+RUN turbo prune --scope=admin --docker
+
+# =========================================================================== #
+
+FROM base AS installer
+
+# Build in production mode; we still install dev deps explicitly below
+ENV NODE_ENV=production
+
+# Public envs required at build time (pick up via process.env)
+ARG VITE_API_BASE_URL=""
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+ARG VITE_API_BASE_PATH="/api"
+ENV VITE_API_BASE_PATH=$VITE_API_BASE_PATH
+
+ARG VITE_ADMIN_BASE_URL=""
+ENV VITE_ADMIN_BASE_URL=$VITE_ADMIN_BASE_URL
+ARG VITE_ADMIN_BASE_PATH="/god-mode"
+ENV VITE_ADMIN_BASE_PATH=$VITE_ADMIN_BASE_PATH
+
+ARG VITE_SPACE_BASE_URL=""
+ENV VITE_SPACE_BASE_URL=$VITE_SPACE_BASE_URL
+ARG VITE_SPACE_BASE_PATH="/spaces"
+ENV VITE_SPACE_BASE_PATH=$VITE_SPACE_BASE_PATH
+
+ARG VITE_LIVE_BASE_URL=""
+ENV VITE_LIVE_BASE_URL=$VITE_LIVE_BASE_URL
+ARG VITE_LIVE_BASE_PATH="/live"
+ENV VITE_LIVE_BASE_PATH=$VITE_LIVE_BASE_PATH
+
+ARG VITE_WEB_BASE_URL=""
+ENV VITE_WEB_BASE_URL=$VITE_WEB_BASE_URL
+ARG VITE_WEB_BASE_PATH=""
+ENV VITE_WEB_BASE_PATH=$VITE_WEB_BASE_PATH
+
+ARG VITE_WEBSITE_URL="https://plane.so"
+ENV VITE_WEBSITE_URL=$VITE_WEBSITE_URL
+ARG VITE_SUPPORT_EMAIL="support@plane.so"
+ENV VITE_SUPPORT_EMAIL=$VITE_SUPPORT_EMAIL
+
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+
+# Copy full directory structure before fetch to ensure all package.json files are available
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
+
+# Build only the admin package
+RUN pnpm turbo run build --filter=admin
+
+# *****************************************************************************
+# STAGE 3: Serve with Caddy
+# *****************************************************************************
+
+FROM caddy:2.11.4-builder-alpine AS caddy-builder
+
+RUN XCADDY_SKIP_CLEANUP=1 xcaddy build \
+    --with github.com/mholt/caddy-ratelimit
+
+# Caddy's own go.mod pins x/crypto, x/net and x/text at versions with open CVEs
+# (CVE-2026-56854 CRITICAL in x/crypto, CVE-2026-46600 in x/net,
+# CVE-2026-56852 in x/text), so every xcaddy build re-ships them. xcaddy
+# preserved its build dir above, so upgrade them there and rebuild.
+# x/crypto v0.55.0 requires x/net v0.57.0 and x/text v0.41.0, hence those floors.
+# grpc and otel move together: grpc >= v1.83.0 requires otel v1.44.0, so bump
+# the otel pair in lockstep or go walks grpc backwards to satisfy the older one.
+RUN cd "$(find /tmp -maxdepth 1 -name 'buildenv_*' -type d | head -1)" && \
+    go get golang.org/x/crypto@v0.55.0 && \
+    go get golang.org/x/net@v0.57.0 && \
+    go get golang.org/x/text@v0.41.0 && \
+    go get google.golang.org/grpc@v1.83.1 && \
+    go get go.opentelemetry.io/otel@v1.44.0 && \
+    go get go.opentelemetry.io/otel/sdk@v1.44.0 && \
+    go mod tidy && \
+    go build -o /usr/bin/caddy -ldflags "-w -s" -trimpath .
+
+# `go get` resolves a module backwards rather than failing when pins conflict,
+# so assert the binary really carries the pinned grpc: a silent downgrade must
+# fail the build instead of shipping a caddy that only looks patched.
+RUN go version -m /usr/bin/caddy | grep -qE 'google\.golang\.org/grpc[[:space:]]v1\.83\.1[[:space:]]' \
+    || { echo "caddy was not built against the pinned grpc -- check the go get floors" >&2; exit 1; }
+
+FROM caddy:2.11.4-alpine AS production
+
+# curl is required by the HEALTHCHECK below and is not present in the base image.
+# OS security updates too: --available forces reinstall from the current repos;
+# bump APK_SECURITY_PATCH to bust buildx's cached layer (keyed on this command
+# string), otherwise a rebuild silently re-ships the old packages.
+ARG APK_SECURITY_PATCH=2026-09-07
+RUN echo "apk-security-patch ${APK_SECURITY_PATCH}" && apk update && apk upgrade --no-cache --available && apk add --no-cache curl && rm -rf /var/cache/apk/*
+
+COPY --from=caddy-builder /usr/bin/caddy /usr/bin/caddy
+
+COPY apps/admin/caddy/Caddyfile /etc/caddy/Caddyfile
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD curl -fsS http://127.0.0.1:3000/god-mode >/dev/null || exit 1
+
+COPY --from=installer /app/apps/admin/build/client /usr/share/caddy/html/god-mode
+
+EXPOSE 3000
+
+CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile"]

apps/admin/Dockerfile.dev

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

apps/admin/app/(all)/(dashboard)/ai/form.tsx

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useForm } from "react-hook-form";
+import { ThoughtsOutline } from "@makeplane/propel/icons";
+import { Button } from "@makeplane/propel/components/button";
+import type { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+// components
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceAIForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
+
+export function InstanceAIForm(props: IInstanceAIForm) {
+  const { config } = props;
+  // store
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<AIFormValues>({
+    defaultValues: {
+      LLM_API_KEY: config["LLM_API_KEY"],
+      LLM_MODEL: config["LLM_MODEL"],
+    },
+  });
+
+  const aiFormFields: TControllerInputFormField<AIFormValues>[] = [
+    {
+      key: "LLM_MODEL",
+      type: "text",
+      label: "LLM Model",
+      description: (
+        <>
+          Choose an OpenAI engine.{" "}
+          <a
+            href="https://platform.openai.com/docs/models/overview"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="OpenAI models documentation"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "gpt-4o-mini",
+      error: Boolean(errors.LLM_MODEL),
+      required: false,
+    },
+    {
+      key: "LLM_API_KEY",
+      type: "password",
+      label: "API key",
+      description: (
+        <>
+          You will find your API key{" "}
+          <a
+            href="https://platform.openai.com/api-keys"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="OpenAI API keys page"
+          >
+            here.
+          </a>
+        </>
+      ),
+      placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
+      error: Boolean(errors.LLM_API_KEY),
+      required: false,
+    },
+  ];
+
+  const onSubmit = async (formData: AIFormValues) => {
+    const payload: Partial<AIFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "AI Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div>
+          <div className="pb-1 text-18 font-medium text-primary">OpenAI</div>
+          <div className="text-13 font-regular text-tertiary">If you use ChatGPT, this is for you.</div>
+        </div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+          {aiFormFields.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>
+      </div>
+
+      <div className="flex flex-col items-start gap-4">
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+          label={isSubmitting ? "Saving" : "Save changes"}
+        />
+
+        <div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary">
+          <ThoughtsOutline className="size-4" />
+          <div>
+            If you have a preferred AI models vendor, please get in{" "}
+            <a className="font-medium underline" href="https://plane.so/contact">
+              touch with us.
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceAIForm } from "./form";
+
+const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <PageWrapper
+      header={{
+        title: "AI features for all your workspaces",
+        description: "Configure your AI API credentials so Plane AI features are turned on for all your workspaces.",
+      }}
+    >
+      {formattedConfig ? (
+        <InstanceAIForm config={formattedConfig} />
+      ) : (
+        <Skeleton className="space-y-8">
+          <Skeleton.Item height="50px" width="40%" />
+          <div className="grid w-2/3 grid-cols-2 gap-x-8 gap-y-4">
+            <Skeleton.Item height="50px" />
+            <Skeleton.Item height="50px" />
+          </div>
+          <Skeleton.Item height="50px" width="20%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Artificial Intelligence Settings - God Mode" }];
+
+export default InstanceAIPage;

apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx

@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGiteaAuthenticationConfigurationKeys } from "@plane/types";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
+
+const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
+  name: "ENABLE_GITEA_SYNC",
+  label: "Gitea",
+};
+
+export function InstanceGiteaConfigForm(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<GiteaConfigFormValues>({
+    defaultValues: {
+      GITEA_HOST: config["GITEA_HOST"] || "https://gitea.com",
+      GITEA_CLIENT_ID: config["GITEA_CLIENT_ID"],
+      GITEA_CLIENT_SECRET: config["GITEA_CLIENT_SECRET"],
+      ENABLE_GITEA_SYNC: config["ENABLE_GITEA_SYNC"] || "0",
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITEA_FORM_FIELDS: TControllerInputFormField<GiteaConfigFormValues>[] = [
+    {
+      key: "GITEA_HOST",
+      type: "text",
+      label: "Gitea Host",
+      description: (
+        <>Use the URL of your Gitea instance. For the official Gitea instance, use &quot;https://gitea.com&quot;.</>
+      ),
+      placeholder: "https://gitea.com",
+      error: Boolean(errors.GITEA_HOST),
+      required: true,
+    },
+    {
+      key: "GITEA_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            href="https://gitea.com/user/settings/applications"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            Gitea OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITEA_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITEA_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            href="https://gitea.com/user/settings/applications"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            Gitea OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITEA_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITEA_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/gitea/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
+          <a
+            href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="Gitea OAuth application settings"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GiteaConfigFormValues) => {
+    const payload: Partial<GiteaConfigFormValues> = { ...formData };
+
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your Gitea authentication is configured. You should test it now.",
+      });
+      reset({
+        GITEA_HOST: response.find((item) => item.key === "GITEA_HOST")?.value,
+        GITEA_CLIENT_ID: response.find((item) => item.key === "GITEA_CLIENT_ID")?.value,
+        GITEA_CLIENT_SECRET: response.find((item) => item.key === "GITEA_CLIENT_SECRET")?.value,
+        ENABLE_GITEA_SYNC: response.find((item) => item.key === "ENABLE_GITEA_SYNC")?.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 w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
+            {GITEA_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}
+              />
+            ))}
+            <ControllerSwitch control={control} field={GITEA_FORM_SWITCH_FIELD} />
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                  label={isSubmitting ? "Saving" : "Save changes"}
+                />
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  nativeButton={false}
+                  render={<Link href="/authentication" onClick={handleGoBack} />}
+                  label="Go back"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 pt-1.5 pb-4">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
+              {GITEA_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane internal packages
+import { Switch } from "@makeplane/propel/components/switch";
+// assets
+import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+import { setPromiseToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceGiteaConfigForm } from "./form";
+
+const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGiteaConfig = formattedConfig?.IS_GITEA_ENABLED ?? "";
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITEA_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration",
+      success: {
+        title: "Configuration saved",
+        message: () => `Gitea authentication is now ${value === "1" ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  const isGiteaEnabled = enableGiteaConfig === "1";
+
+  return (
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="Gitea"
+          description="Allow members to login or sign up to plane with their Gitea accounts."
+          icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
+          config={
+            <Switch
+              checked={isGiteaEnabled}
+              onCheckedChange={() => {
+                updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGiteaConfigForm config={formattedConfig} />
+      ) : (
+        <Skeleton className="space-y-8">
+          <Skeleton.Item height="50px" width="25%" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" width="50%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+export const meta: Route.MetaFunction = () => [{ title: "Gitea Authentication - God Mode" }];
+
+export default InstanceGiteaAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { MonitorOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
+
+const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
+  name: "ENABLE_GITHUB_SYNC",
+  label: "GitHub",
+};
+
+export function InstanceGithubConfigForm(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<GithubConfigFormValues>({
+    defaultValues: {
+      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
+      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
+      GITHUB_ORGANIZATION_ID: config["GITHUB_ORGANIZATION_ID"],
+      ENABLE_GITHUB_SYNC: config["ENABLE_GITHUB_SYNC"] || "0",
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITHUB_FORM_FIELDS: TControllerInputFormField<GithubConfigFormValues>[] = [
+    {
+      key: "GITHUB_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITHUB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITHUB_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITHUB_CLIENT_SECRET),
+      required: true,
+    },
+    {
+      key: "GITHUB_ORGANIZATION_ID",
+      type: "text",
+      label: "Organization ID",
+      description: <>The organization github ID.</>,
+      placeholder: "123456789",
+      error: Boolean(errors.GITHUB_ORGANIZATION_ID),
+      required: false,
+    },
+  ];
+
+  const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="GitHub OAuth application settings"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const GITHUB_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/github/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="GitHub OAuth application settings"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GithubConfigFormValues) => {
+    const payload: Partial<GithubConfigFormValues> = { ...formData };
+
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your GitHub authentication is configured. You should test it now.",
+      });
+      reset({
+        GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
+        GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
+        GITHUB_ORGANIZATION_ID: response.find((item) => item.key === "GITHUB_ORGANIZATION_ID")?.value,
+        ENABLE_GITHUB_SYNC: response.find((item) => item.key === "ENABLE_GITHUB_SYNC")?.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 w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
+            {GITHUB_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}
+              />
+            ))}
+            <ControllerSwitch control={control} field={GITHUB_FORM_SWITCH_FIELD} />
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                  label={isSubmitting ? "Saving" : "Save changes"}
+                />
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  nativeButton={false}
+                  render={<Link href="/authentication" onClick={handleGoBack} />}
+                  label="Go back"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
+            <div className="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
+                {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col overflow-hidden rounded-lg">
+                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
+                  <MonitorOutline className="h-3 w-3" />
+                  Web
+                </div>
+                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
+                  {GITHUB_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane internal packages
+import { Switch } from "@makeplane/propel/components/switch";
+import { resolveGeneralTheme } from "@plane/utils";
+// assets
+import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
+import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+import { setPromiseToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceGithubConfigForm } from "./form";
+
+const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
+  _props: Route.ComponentProps
+) {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // theme
+  const { resolvedTheme } = useTheme();
+  // config
+  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITHUB_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration",
+      success: {
+        title: "Configuration saved",
+        message: () => `GitHub authentication is now ${value === "1" ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  const isGithubEnabled = enableGithubConfig === "1";
+
+  return (
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="GitHub"
+          description="Allow members to login or sign up to plane with their GitHub accounts."
+          icon={
+            <img
+              src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+              height={24}
+              width={24}
+              alt="GitHub Logo"
+            />
+          }
+          config={
+            <Switch
+              checked={isGithubEnabled}
+              onCheckedChange={() => {
+                updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGithubConfigForm config={formattedConfig} />
+      ) : (
+        <Skeleton className="space-y-8">
+          <Skeleton.Item height="50px" width="25%" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" width="50%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "GitHub Authentication - God Mode" }];
+
+export default InstanceGithubAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx

@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
+
+const GITLAB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GitlabConfigFormValues> = {
+  name: "ENABLE_GITLAB_SYNC",
+  label: "GitLab",
+};
+
+export function InstanceGitlabConfigForm(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"],
+      ENABLE_GITLAB_SYNC: config["ENABLE_GITLAB_SYNC"] || "0",
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITLAB_FORM_FIELDS: TControllerInputFormField<GitlabConfigFormValues>[] = [
+    {
+      key: "GITLAB_HOST",
+      type: "text",
+      label: "Host",
+      description: (
+        <>
+          This is either https://gitlab.com or the <CodeBlock>domain.tld</CodeBlock> where you host GitLab.
+        </>
+      ),
+      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
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-accent-primary 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
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-accent-primary 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 <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
+          <a
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application
+          </a>
+          .
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GitlabConfigFormValues) => {
+    const payload: Partial<GitlabConfigFormValues> = { ...formData };
+
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your GitLab authentication is configured. You should test it now.",
+      });
+      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,
+        ENABLE_GITLAB_SYNC: response.find((item) => item.key === "ENABLE_GITLAB_SYNC")?.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 w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</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}
+              />
+            ))}
+            <ControllerSwitch control={control} field={GITLAB_FORM_SWITCH_FIELD} />
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                  label={isSubmitting ? "Saving" : "Save changes"}
+                />
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  nativeButton={false}
+                  render={<Link href="/authentication" onClick={handleGoBack} />}
+                  label="Go back"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-3 px-6 pt-1.5 pb-4">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
+              {GITLAB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Switch } from "@makeplane/propel/components/switch";
+// assets
+import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+import { setPromiseToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceGitlabConfigForm } from "./form";
+
+const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthenticationPage(
+  _props: Route.ComponentProps
+) {
+  // 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 === "1" ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="GitLab"
+          description="Allow members to login or sign up to plane with their GitLab accounts."
+          icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+          config={
+            <Switch
+              checked={Boolean(parseInt(enableGitlabConfig))}
+              onCheckedChange={() => {
+                if (Boolean(parseInt(enableGitlabConfig)) === true) {
+                  updateConfig("IS_GITLAB_ENABLED", "0");
+                } else {
+                  updateConfig("IS_GITLAB_ENABLED", "1");
+                }
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGitlabConfigForm config={formattedConfig} />
+      ) : (
+        <Skeleton className="space-y-8">
+          <Skeleton.Item height="50px" width="25%" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" width="50%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "GitLab Authentication - God Mode" }];
+
+export default InstanceGitlabAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -0,0 +1,258 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { MonitorOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
+
+const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
+  name: "ENABLE_GOOGLE_SYNC",
+  label: "Google",
+};
+
+export function InstanceGoogleConfigForm(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<GoogleConfigFormValues>({
+    defaultValues: {
+      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
+      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+      ENABLE_GOOGLE_SYNC: config["ENABLE_GOOGLE_SYNC"] || "0",
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GOOGLE_FORM_FIELDS: TControllerInputFormField<GoogleConfigFormValues>[] = [
+    {
+      key: "GOOGLE_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          Your client ID lives in your Google API Console.{" "}
+          <a
+            href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="Google OAuth client ID documentation"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com",
+      error: Boolean(errors.GOOGLE_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GOOGLE_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret should also be in your Google API Console.{" "}
+          <a
+            href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="Google OAuth client secret documentation"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E",
+      error: Boolean(errors.GOOGLE_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your{" "}
+          <CodeBlock darkerShade>Authorized JavaScript origins</CodeBlock> field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="Google Cloud Console OAuth client credentials"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+  ];
+
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/google/callback/`,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Redirect URI</CodeBlock>{" "}
+          field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="Google Cloud Console OAuth client credentials"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your Google authentication is configured. You should test it now.",
+      });
+      reset({
+        GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
+        GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
+        ENABLE_GOOGLE_SYNC: response.find((item) => item.key === "ENABLE_GOOGLE_SYNC")?.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 w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
+            {GOOGLE_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}
+              />
+            ))}
+            <ControllerSwitch control={control} field={GOOGLE_FORM_SWITCH_FIELD} />
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                  label={isSubmitting ? "Saving" : "Save changes"}
+                />
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  nativeButton={false}
+                  render={<Link href="/authentication" onClick={handleGoBack} />}
+                  label="Go back"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
+            <div className="pt-2 text-18 font-medium">Plane-provided details for Google</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
+                {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col overflow-hidden rounded-lg">
+                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
+                  <MonitorOutline className="h-3 w-3" />
+                  Web
+                </div>
+                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
+                  {GOOGLE_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Switch } from "@makeplane/propel/components/switch";
+// assets
+import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+import { setPromiseToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceGoogleConfigForm } from "./form";
+
+const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthenticationPage(
+  _props: Route.ComponentProps
+) {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GOOGLE_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration",
+      success: {
+        title: "Configuration saved",
+        message: () => `Google authentication is now ${value === "1" ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="Google"
+          description="Allow members to login or sign up to plane with their Google
+            accounts."
+          icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+          config={
+            <Switch
+              checked={Boolean(parseInt(enableGoogleConfig))}
+              onCheckedChange={() => {
+                if (Boolean(parseInt(enableGoogleConfig)) === true) {
+                  updateConfig("IS_GOOGLE_ENABLED", "0");
+                } else {
+                  updateConfig("IS_GOOGLE_ENABLED", "1");
+                }
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGoogleConfigForm config={formattedConfig} />
+      ) : (
+        <Skeleton className="space-y-8">
+          <Skeleton.Item height="50px" width="25%" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" />
+          <Skeleton.Item height="50px" width="50%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Google Authentication - God Mode" }];
+
+export default InstanceGoogleAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane internal packages
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceConfigurationKeys, TInstanceAuthenticationModes } from "@plane/types";
+import { cn, resolveGeneralTheme } from "@plane/utils";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { Skeleton } from "@/components/common/skeleton";
+import { setPromiseToast, setToast, TOAST_TYPE } from "@/providers/toast";
+// helpers
+import { canDisableAuthMethod } from "@/helpers/authentication";
+// hooks
+import { useAuthenticationModes } from "@/hooks/oauth";
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+
+const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
+  // theme
+  const { resolvedTheme: resolvedThemeAdmin } = useTheme();
+  const resolvedTheme = resolveGeneralTheme(resolvedThemeAdmin);
+  // Ref to store authentication modes for validation (avoids circular dependency)
+  const authenticationModesRef = useRef<TInstanceAuthenticationModes[]>([]);
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // store hooks
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // derived values
+  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  // Create updateConfig with validation - uses authenticationModesRef for current modes
+  const updateConfig = useCallback(
+    (key: TInstanceConfigurationKeys, value: string): void => {
+      // Check if trying to disable (value === "0")
+      if (value === "0") {
+        // Check if this key is an authentication method key
+        const currentAuthModes = authenticationModesRef.current;
+        const isAuthMethodKey = currentAuthModes.some((method) => method.enabledConfigKey === key);
+
+        // Only validate if this is an authentication method key
+        if (isAuthMethodKey) {
+          const canDisable = canDisableAuthMethod(key, currentAuthModes, formattedConfig);
+
+          if (!canDisable) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Cannot disable authentication",
+              message:
+                "At least one authentication method must remain enabled. Please enable another method before disabling this one.",
+            });
+            return;
+          }
+        }
+      }
+
+      // Proceed with the update
+      setIsSubmitting(true);
+
+      const payload = {
+        [key]: value,
+      };
+
+      const updateConfigPromise = updateInstanceConfigurations(payload);
+
+      setPromiseToast(updateConfigPromise, {
+        loading: "Saving configuration",
+        success: {
+          title: "Success",
+          message: () => "Configuration saved successfully",
+        },
+        error: {
+          title: "Error",
+          message: () => "Failed to save configuration",
+        },
+      });
+
+      void updateConfigPromise
+        .then(() => {
+          setIsSubmitting(false);
+          return undefined;
+        })
+        .catch((err) => {
+          console.error(err);
+          setIsSubmitting(false);
+        });
+    },
+    [formattedConfig, updateInstanceConfigurations]
+  );
+
+  // Get authentication modes - this will use updateConfig which includes validation
+  const authenticationModes = useAuthenticationModes({
+    disabled: isSubmitting,
+    updateConfig,
+    resolvedTheme,
+  });
+
+  // Update ref with latest authentication modes (updateConfig reads it only from event handlers)
+  useEffect(() => {
+    authenticationModesRef.current = authenticationModes;
+  }, [authenticationModes]);
+
+  return (
+    <PageWrapper
+      header={{
+        title: "Manage authentication modes for your instance",
+        description: "Configure authentication modes for your team and restrict sign-ups to be invite only.",
+      }}
+    >
+      {formattedConfig ? (
+        <div className="space-y-3">
+          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
+            <div className="flex grow items-center gap-4">
+              <div className="grow">
+                <div className="pb-1 text-16 font-medium">Allow anyone to sign up even without an invite</div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
+                  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">
+                <Switch
+                  checked={Boolean(parseInt(enableSignUpConfig))}
+                  onCheckedChange={() => {
+                    if (Boolean(parseInt(enableSignUpConfig)) === true) {
+                      updateConfig("ENABLE_SIGNUP", "0");
+                    } else {
+                      updateConfig("ENABLE_SIGNUP", "1");
+                    }
+                  }}
+                  size="sm"
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="text-lg pt-6 font-medium">Available authentication modes</div>
+          {authenticationModes.map((method) => (
+            <AuthenticationMethodCard
+              key={method.key}
+              name={method.name}
+              description={method.description}
+              icon={method.icon}
+              config={method.config}
+              disabled={isSubmitting}
+              unavailable={method.unavailable}
+            />
+          ))}
+        </div>
+      ) : (
+        <Skeleton className="space-y-10">
+          <Skeleton.Item height="50px" width="75%" />
+          <Skeleton.Item height="50px" width="75%" />
+          <Skeleton.Item height="50px" width="40%" />
+          <Skeleton.Item height="50px" width="40%" />
+          <Skeleton.Item height="50px" width="20%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Authentication Settings - Plane Web" }];
+
+export default InstanceAuthenticationPage;

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+// types
+import { Button } from "@makeplane/propel/components/button";
+import { Select, SelectContent, SelectItem, SelectList, SelectTrigger } from "@makeplane/propel/components/select";
+import type { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+// components
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+// local components
+import { SendTestEmailModal } from "./test-email-modal";
+
+type IInstanceEmailForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type EmailFormValues = Record<TInstanceEmailConfigurationKeys, string>;
+
+type TEmailSecurityKeys = "EMAIL_USE_TLS" | "EMAIL_USE_SSL" | "NONE";
+
+const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
+  EMAIL_USE_TLS: "TLS",
+  EMAIL_USE_SSL: "SSL",
+  NONE: "No email security",
+};
+
+export function InstanceEmailForm(props: IInstanceEmailForm) {
+  const { config } = props;
+  // states
+  const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+    formState: { errors, isValid, isDirty, isSubmitting },
+  } = useForm<EmailFormValues>({
+    defaultValues: {
+      EMAIL_HOST: config["EMAIL_HOST"],
+      EMAIL_PORT: config["EMAIL_PORT"],
+      EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
+      EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
+      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
+      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_FROM: config["EMAIL_FROM"],
+      ENABLE_SMTP: config["ENABLE_SMTP"],
+    },
+  });
+  const emailFormFields: TControllerInputFormField<EmailFormValues>[] = [
+    {
+      key: "EMAIL_HOST",
+      type: "text",
+      label: "Host",
+      placeholder: "email.google.com",
+      error: Boolean(errors.EMAIL_HOST),
+      required: true,
+    },
+    {
+      key: "EMAIL_PORT",
+      type: "text",
+      label: "Port",
+      placeholder: "8080",
+      error: Boolean(errors.EMAIL_PORT),
+      required: true,
+    },
+    {
+      key: "EMAIL_FROM",
+      type: "text",
+      label: "Sender's email address",
+      description:
+        "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
+      placeholder: "no-reply@projectplane.so",
+      error: Boolean(errors.EMAIL_FROM),
+      required: true,
+    },
+  ];
+
+  const OptionalEmailFormFields: TControllerInputFormField<EmailFormValues>[] = [
+    {
+      key: "EMAIL_HOST_USER",
+      type: "text",
+      label: "Username",
+      placeholder: "getitdone@projectplane.so",
+      error: Boolean(errors.EMAIL_HOST_USER),
+      required: false,
+    },
+    {
+      key: "EMAIL_HOST_PASSWORD",
+      type: "password",
+      label: "Password",
+      placeholder: "Password",
+      error: Boolean(errors.EMAIL_HOST_PASSWORD),
+      required: false,
+    },
+  ];
+
+  const onSubmit = async (formData: EmailFormValues) => {
+    const payload: Partial<EmailFormValues> = { ...formData, ENABLE_SMTP: "1" };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Email Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const useTLSValue = watch("EMAIL_USE_TLS");
+  const useSSLValue = watch("EMAIL_USE_SSL");
+  const emailSecurityKey: TEmailSecurityKeys = useMemo(() => {
+    if (useTLSValue === "1") return "EMAIL_USE_TLS";
+    if (useSSLValue === "1") return "EMAIL_USE_SSL";
+    return "NONE";
+  }, [useTLSValue, useSSLValue]);
+
+  const handleEmailSecurityChange = (key: TEmailSecurityKeys) => {
+    if (key === "EMAIL_USE_SSL") {
+      setValue("EMAIL_USE_TLS", "0");
+      setValue("EMAIL_USE_SSL", "1");
+    }
+    if (key === "EMAIL_USE_TLS") {
+      setValue("EMAIL_USE_TLS", "1");
+      setValue("EMAIL_USE_SSL", "0");
+    }
+    if (key === "NONE") {
+      setValue("EMAIL_USE_TLS", "0");
+      setValue("EMAIL_USE_SSL", "0");
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <SendTestEmailModal isOpen={isSendTestEmailModalOpen} handleClose={() => setIsSendTestEmailModalOpen(false)} />
+        <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-10 lg:grid-cols-2">
+          {emailFormFields.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">
+            <h4 className="text-13 text-tertiary">Email security</h4>
+            <Select
+              value={emailSecurityKey}
+              onValueChange={(value) => handleEmailSecurityChange(value as TEmailSecurityKeys)}
+            >
+              <SelectTrigger size="lg" placeholder="Select email security" />
+              <SelectContent>
+                <SelectList>
+                  {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
+                    <SelectItem key={key} value={key} label={value} size="lg" />
+                  ))}
+                </SelectList>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="my-6 flex flex-col gap-6 border-t border-subtle pt-4">
+          <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
+            <div className="mr-8 flex items-center gap-10 pt-4">
+              <div className="grow">
+                <div className="text-13 font-medium text-primary">Authentication</div>
+                <div className="text-11 font-regular text-tertiary">
+                  This is optional, but we recommend setting up a username and a password for your SMTP server.
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-10 lg:grid-cols-2">
+            {OptionalEmailFormFields.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>
+        </div>
+      </div>
+      <div className="flex max-w-4xl items-center gap-4 py-1">
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+          disabled={!isValid || !isDirty}
+          label={isSubmitting ? "Saving" : "Save changes"}
+        />
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          onClick={() => setIsSendTestEmailModalOpen(true)}
+          loading={isSubmitting}
+          disabled={!isValid}
+          label="Send test email"
+        />
+      </div>
+    </div>
+  );
+}

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Switch } from "@makeplane/propel/components/switch";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceEmailForm } from "./email-config-form";
+
+const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
+
+  const { isLoading } = useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSMTPEnabled, setIsSMTPEnabled] = useState(false);
+
+  const handleToggle = async () => {
+    if (isSMTPEnabled) {
+      setIsSubmitting(true);
+      try {
+        await disableEmail();
+        setIsSMTPEnabled(false);
+        setToast({
+          title: "Email feature disabled",
+          message: "Email feature has been disabled",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (_error) {
+        setToast({
+          title: "Error disabling email",
+          message: "Failed to disable email feature. Please try again.",
+          type: TOAST_TYPE.ERROR,
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+      return;
+    }
+    setIsSMTPEnabled(true);
+  };
+  useEffect(() => {
+    if (formattedConfig) {
+      setIsSMTPEnabled(formattedConfig.ENABLE_SMTP === "1");
+    }
+  }, [formattedConfig]);
+
+  return (
+    <PageWrapper
+      header={{
+        title: "Secure emails from your own instance",
+        description: (
+          <>
+            Plane can send useful emails to you and your users from your own instance without talking to the Internet.
+            <div className="text-13 font-regular text-tertiary">
+              Set it up below and please test your settings before you save them.&nbsp;
+              <span className="text-danger-primary">Misconfigs can lead to email bounces and errors.</span>
+            </div>
+          </>
+        ),
+        actions: isLoading ? (
+          <Skeleton>
+            <Skeleton.Item width="24px" height="16px" className="rounded-full" />
+          </Skeleton>
+        ) : (
+          <Switch checked={isSMTPEnabled} onCheckedChange={handleToggle} size="sm" disabled={isSubmitting} />
+        ),
+      }}
+    >
+      {isSMTPEnabled && !isLoading && (
+        <>
+          {formattedConfig ? (
+            <InstanceEmailForm config={formattedConfig} />
+          ) : (
+            <Skeleton className="space-y-10">
+              <Skeleton.Item height="50px" width="75%" />
+              <Skeleton.Item height="50px" width="75%" />
+              <Skeleton.Item height="50px" width="40%" />
+              <Skeleton.Item height="50px" width="40%" />
+              <Skeleton.Item height="50px" width="20%" />
+            </Skeleton>
+          )}
+        </>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Email Settings - God Mode" }];
+
+export default InstanceEmailPage;

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// plane imports
+import { Button } from "@makeplane/propel/components/button";
+import { Input } from "@makeplane/propel/components/input";
+import { InstanceService } from "@plane/services";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+enum ESendEmailSteps {
+  SEND_EMAIL = "SEND_EMAIL",
+  SUCCESS = "SUCCESS",
+  FAILED = "FAILED",
+}
+
+const instanceService = new InstanceService();
+
+export function SendTestEmailModal(props: Props) {
+  const { isOpen, handleClose } = props;
+
+  // state
+  const [receiverEmail, setReceiverEmail] = useState("");
+  const [sendEmailStep, setSendEmailStep] = useState<ESendEmailSteps>(ESendEmailSteps.SEND_EMAIL);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  // reset state
+  const resetState = () => {
+    setReceiverEmail("");
+    setSendEmailStep(ESendEmailSteps.SEND_EMAIL);
+    setIsLoading(false);
+    setError("");
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      resetState();
+    }
+  }, [isOpen]);
+
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+
+    setIsLoading(true);
+    await instanceService
+      .sendTestEmail(receiverEmail)
+      .then(() => {
+        setSendEmailStep(ESendEmailSteps.SUCCESS);
+      })
+      .catch((error) => {
+        setError(error?.error || "Failed to send email");
+        setSendEmailStep(ESendEmailSteps.FAILED);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative w-full transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all sm:max-w-xl">
+                <h3 className="text-16 leading-6 font-medium text-primary">
+                  {sendEmailStep === ESendEmailSteps.SEND_EMAIL
+                    ? "Send test email"
+                    : sendEmailStep === ESendEmailSteps.SUCCESS
+                      ? "Email send"
+                      : "Failed"}{" "}
+                </h3>
+                <div className="pt-6 pb-2">
+                  {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
+                    <div className="w-full">
+                      <Input
+                        id="receiver_email"
+                        type="email"
+                        size="lg"
+                        value={receiverEmail}
+                        onChange={(e) => setReceiverEmail(e.target.value)}
+                        placeholder="Receiver email"
+                        tabIndex={0}
+                      />
+                    </div>
+                  )}
+                  {sendEmailStep === ESendEmailSteps.SUCCESS && (
+                    <div className="flex flex-col gap-y-4 text-13">
+                      <p>
+                        We have sent the test email to {receiverEmail}. Please check your spam folder if you cannot find
+                        it.
+                      </p>
+                      <p>If you still cannot find it, recheck your SMTP configuration and trigger a new test email.</p>
+                    </div>
+                  )}
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
+                  <div className="mt-5 flex items-center justify-end gap-2">
+                    <Button
+                      variant="secondary"
+                      size="md"
+                      stretch="auto"
+                      onClick={handleClose}
+                      tabIndex={0}
+                      label={sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
+                    />
+                    {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
+                      <Button
+                        variant="primary"
+                        size="md"
+                        stretch="auto"
+                        loading={isLoading}
+                        onClick={handleSubmit}
+                        tabIndex={0}
+                        label={isLoading ? "Sending email" : "Send email"}
+                      />
+                    )}
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

apps/admin/app/(all)/(dashboard)/general/form.tsx

@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { UsageOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Button } from "@makeplane/propel/components/button";
+import { Input } from "@makeplane/propel/components/input";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { IInstance, IInstanceAdmin } from "@plane/types";
+// components
+import { ControllerInput } from "@/components/common/controller-input";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+export interface IGeneralConfigurationForm {
+  instance: IInstance;
+  instanceAdmins: IInstanceAdmin[];
+}
+
+export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
+  const { instance, instanceAdmins } = props;
+  // hooks
+  const { updateInstanceInfo } = useInstance();
+
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<Partial<IInstance>>({
+    defaultValues: {
+      instance_name: instance?.instance_name,
+      is_telemetry_enabled: instance?.is_telemetry_enabled,
+    },
+  });
+
+  const onSubmit = async (formData: Partial<IInstance>) => {
+    const payload: Partial<IInstance> = { ...formData };
+
+    await updateInstanceInfo(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <div className="text-16 font-medium text-primary">Instance details</div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <ControllerInput
+            key="instance_name"
+            name="instance_name"
+            control={control}
+            type="text"
+            label="Name of instance"
+            placeholder="Instance name"
+            error={Boolean(errors.instance_name)}
+            required
+          />
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-13 text-tertiary">Email</h4>
+            <div className="w-full">
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                size="lg"
+                value={instanceAdmins[0]?.user_detail?.email ?? ""}
+                placeholder="Admin email"
+                autoComplete="on"
+                disabled
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-13 text-tertiary">Instance ID</h4>
+            <div className="w-full">
+              <Input id="instance_id" name="instance_id" type="text" size="lg" value={instance.instance_id} disabled />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div className="border-b border-subtle pb-1.5 text-16 font-medium text-primary">Telemetry</div>
+        <div className="flex items-center gap-14">
+          <div className="flex grow items-center gap-4">
+            <div className="shrink-0">
+              <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
+                <UsageOutline className="size-5 text-tertiary" />
+              </div>
+            </div>
+            <div className="grow">
+              <div className="text-13 leading-5 font-medium text-primary">Let Plane collect anonymous usage data</div>
+              <div className="text-11 leading-5 font-regular text-tertiary">
+                No PII is collected.This anonymized data is used to understand how you use Plane and build new features
+                in line with{" "}
+                <a
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  className="text-accent-primary hover:underline"
+                  rel="noreferrer"
+                >
+                  our Telemetry Policy.
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
+            <Controller
+              control={control}
+              name="is_telemetry_enabled"
+              render={({ field: { value, onChange } }) => (
+                <Switch checked={value ?? false} onCheckedChange={onChange} size="sm" disabled={isSubmitting} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          onClick={() => {
+            void handleSubmit(onSubmit)();
+          }}
+          loading={isSubmitting}
+          label={isSubmitting ? "Saving" : "Save changes"}
+        />
+      </div>
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/general/page.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+// hooks
+import { useInstance } from "@/hooks/store";
+// local imports
+import { GeneralConfigurationForm } from "./form";
+// types
+import type { Route } from "./+types/page";
+
+function GeneralPage() {
+  const { instance, instanceAdmins } = useInstance();
+
+  return (
+    <PageWrapper
+      header={{
+        title: "General settings",
+        description:
+          "Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your instance.",
+      }}
+    >
+      {instance && instanceAdmins && <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />}
+    </PageWrapper>
+  );
+}
+
+export const meta: Route.MetaFunction = () => [{ title: "General Settings - God Mode" }];
+
+export default observer(GeneralPage);

apps/admin/app/(all)/(dashboard)/image/form.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useForm } from "react-hook-form";
+import { Button } from "@makeplane/propel/components/button";
+import type { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+// components
+import { ControllerInput } from "@/components/common/controller-input";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceImageConfigForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
+
+export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
+  const { config } = props;
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ImageConfigFormValues>({
+    defaultValues: {
+      UNSPLASH_ACCESS_KEY: config["UNSPLASH_ACCESS_KEY"],
+    },
+  });
+
+  const onSubmit = async (formData: ImageConfigFormValues) => {
+    const payload: Partial<ImageConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Image Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <ControllerInput
+          control={control}
+          type="password"
+          name="UNSPLASH_ACCESS_KEY"
+          label="Access key from your Unsplash account"
+          description={
+            <>
+              You will find your access key in your Unsplash developer console.&nbsp;
+              <a
+                href="https://unsplash.com/documentation#creating-a-developer-account"
+                target="_blank"
+                className="text-accent-primary hover:underline"
+                rel="noreferrer"
+                aria-label="Unsplash developer account documentation"
+              >
+                Learn more.
+              </a>
+            </>
+          }
+          placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+          error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
+          required
+        />
+      </div>
+
+      <div>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+          label={isSubmitting ? "Saving" : "Save changes"}
+        />
+      </div>
+    </div>
+  );
+}

apps/admin/app/(all)/(dashboard)/image/page.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+// hooks
+import { useInstance } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+// local
+import { InstanceImageConfigForm } from "./form";
+
+const InstanceImagePage = observer(function InstanceImagePage(_props: Route.ComponentProps) {
+  // store
+  const { formattedConfig, fetchInstanceConfigurations } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <PageWrapper
+      header={{
+        title: "Third-party image libraries",
+        description: "Let your users search and choose images from third-party libraries",
+      }}
+    >
+      {formattedConfig ? (
+        <InstanceImageConfigForm config={formattedConfig} />
+      ) : (
+        <Skeleton className="space-y-8">
+          <Skeleton.Item height="50px" width="50%" />
+          <Skeleton.Item height="50px" width="20%" />
+        </Skeleton>
+      )}
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Images Settings - God Mode" }];
+
+export default InstanceImagePage;

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+import { Outlet } from "react-router";
+// components
+import { AdminHeader } from "@/components/common/header";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { NewUserPopup } from "@/components/common/new-user-popup";
+// hooks
+import { useUser } from "@/hooks/store";
+// local components
+import type { Route } from "./+types/layout";
+import { AdminSidebar } from "./sidebar";
+
+function AdminLayout(_props: Route.ComponentProps) {
+  // router
+  const { replace } = useRouter();
+  // store hooks
+  const { isUserLoggedIn } = useUser();
+
+  useEffect(() => {
+    if (isUserLoggedIn === false) replace("/");
+  }, [replace, isUserLoggedIn]);
+
+  if (isUserLoggedIn === undefined) {
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  if (isUserLoggedIn) {
+    return (
+      <div className="relative flex h-screen w-screen overflow-hidden">
+        <AdminSidebar />
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
+          <AdminHeader />
+          <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">
+            <Outlet />
+          </div>
+        </main>
+        <NewUserPopup />
+      </div>
+    );
+  }
+
+  return <></>;
+}
+
+export default observer(AdminLayout);

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useTheme as useNextTheme } from "next-themes";
+import { AccessAndRolesOutline, LogOutOutline, PaletteOutline } from "@makeplane/propel/icons";
+import { Menu, Transition } from "@headlessui/react";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";
+import { AuthService } from "@plane/services";
+import { getFileURL, cn } from "@plane/utils";
+// hooks
+import { useTheme, useUser } from "@/hooks/store";
+
+// service initialization
+const authService = new AuthService();
+
+export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
+  // store hooks
+  const { isSidebarCollapsed } = useTheme();
+  const { currentUser, signOut } = useUser();
+  // hooks
+  const { resolvedTheme, setTheme } = useNextTheme();
+  // state
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+
+  const handleThemeSwitch = () => {
+    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+  };
+
+  const handleSignOut = () => signOut();
+
+  const getSidebarMenuItems = () => (
+    <Menu.Items
+      className={cn(
+        "shadow-lg absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 outline-none",
+        {
+          "left-4": isSidebarCollapsed,
+        }
+      )}
+    >
+      <div className="flex flex-col gap-2.5 pb-2">
+        <span className="truncate px-2 text-secondary">{currentUser?.email}</span>
+      </div>
+      <div className="py-2">
+        <Menu.Item
+          as="button"
+          type="button"
+          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+          onClick={handleThemeSwitch}
+        >
+          <PaletteOutline className="h-4 w-4 stroke-[1.5]" />
+          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+        </Menu.Item>
+      </div>
+      <div className="py-2">
+        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <Menu.Item
+            as="button"
+            type="submit"
+            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+          >
+            <LogOutOutline className="h-4 w-4 stroke-[1.5]" />
+            Sign out
+          </Menu.Item>
+        </form>
+      </div>
+    </Menu.Items>
+  );
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      void authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  return (
+    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-subtle px-4 py-2.5">
+      <div className="h-full w-full truncate">
+        <div
+          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm ${
+            isSidebarCollapsed ? "justify-center" : ""
+          }`}
+        >
+          <Menu as="div" className="flex-shrink-0">
+            <Menu.Button
+              className={cn("grid place-items-center outline-none", {
+                "cursor-default": !isSidebarCollapsed,
+              })}
+            >
+              <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
+                <AccessAndRolesOutline className="size-5 text-primary" />
+              </div>
+            </Menu.Button>
+            {isSidebarCollapsed && (
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                {getSidebarMenuItems()}
+              </Transition>
+            )}
+          </Menu>
+
+          {!isSidebarCollapsed && (
+            <div className="flex w-full gap-2">
+              <h4 className="grow truncate text-body-md-medium text-primary">Instance admin</h4>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!isSidebarCollapsed && currentUser && (
+        <Menu as="div" className="relative flex-shrink-0">
+          <Menu.Button className="grid place-items-center outline-none">
+            <WorkspaceAvatar
+              alt={currentUser.display_name ?? "Admin user"}
+              fallback={currentUser.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(currentUser.avatar_url)}
+              size="sm"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            {getSidebarMenuItems()}
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { Transition } from "@headlessui/react";
+import { WEB_BASE_URL } from "@plane/constants";
+// plane internal packages
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import {
+  ArrowNarrowLeftOutline,
+  ChatOutline,
+  Github,
+  HelpOutline,
+  NewTabOutline,
+  PagesOutline,
+} from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+// hooks
+import { useInstance, useTheme } from "@/hooks/store";
+// assets
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: PagesOutline,
+  },
+  {
+    name: "Join our Forum",
+    href: "https://forum.plane.so",
+    Icon: ChatOutline,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: Github,
+  },
+];
+
+export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection() {
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // store
+  const { instance } = useInstance();
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
+  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
+
+  return (
+    <div
+      className={cn(
+        "flex h-14 w-full flex-shrink-0 items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4",
+        {
+          "h-auto flex-col py-1.5": isSidebarCollapsed,
+        }
+      )}
+    >
+      <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
+        {!isSidebarCollapsed ? (
+          <>
+            <a
+              href={redirectionLink}
+              className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`}
+            >
+              <NewTabOutline width={14} height={14} />
+              {!isSidebarCollapsed && "Redirect to Plane"}
+            </a>
+          </>
+        ) : (
+          <Tooltip label="Redirect to Plane" side="right">
+            <a
+              href={redirectionLink}
+              className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`}
+            >
+              <NewTabOutline width={14} height={14} />
+              {!isSidebarCollapsed && "Redirect to Plane"}
+            </a>
+          </Tooltip>
+        )}
+        <Tooltip label="Help" side={isSidebarCollapsed ? "right" : "top"}>
+          <button
+            type="button"
+            aria-label="Help"
+            className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+          >
+            <HelpOutline className="size-4" />
+          </button>
+        </Tooltip>
+        <Tooltip label="Toggle sidebar" side={isSidebarCollapsed ? "right" : "top"}>
+          <button
+            type="button"
+            aria-label="Toggle sidebar"
+            className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => toggleSidebar(!isSidebarCollapsed)}
+          >
+            <ArrowNarrowLeftOutline className={`size-4 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+          </button>
+        </Tooltip>
+      </div>
+      <div className="relative">
+        <Transition
+          as="div"
+          show={isNeedHelpOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div
+            className={`absolute bottom-2 z-[15] min-w-[10rem] ${
+              isSidebarCollapsed ? "left-full" : "-left-[75px]"
+            } divide-y divide-subtle-1 rounded-sm bg-surface-1 p-1 whitespace-nowrap shadow-raised-100`}
+            ref={helpOptionsRef}
+          >
+            <div className="space-y-1 pb-2">
+              {helpOptions.map(({ name, Icon, href }) => {
+                if (href)
+                  return (
+                    <Link href={href} key={name} target="_blank">
+                      <div className="flex items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1-hover">
+                        <div className="grid flex-shrink-0 place-items-center">
+                          <Icon className="h-3.5 w-3.5 text-secondary" />
+                        </div>
+                        <span className="text-11">{name}</span>
+                      </div>
+                    </Link>
+                  );
+                else
+                  return (
+                    <button
+                      key={name}
+                      type="button"
+                      className="flex w-full items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1"
+                    >
+                      <div className="grid flex-shrink-0 place-items-center">
+                        <Icon className="h-3.5 w-3.5 text-secondary" />
+                      </div>
+                      <span className="text-11">{name}</span>
+                    </button>
+                  );
+              })}
+            </div>
+            <div className="px-2 pt-2 pb-1 text-10">Version: v{instance?.current_version}</div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// plane internal packages
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useTheme } from "@/hooks/store";
+import { useSidebarMenu } from "@/hooks/use-sidebar-menu";
+
+export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
+  // router
+  const pathName = usePathname();
+  // store hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // derived values
+  const sidebarMenu = useSidebarMenu();
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar(!isSidebarCollapsed);
+    }
+  };
+
+  return (
+    <div className="vertical-scrollbar scrollbar-sm flex h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
+      {sidebarMenu.map((item) => {
+        const isActive = item.href === pathName || pathName?.startsWith(item.href);
+        return (
+          <Link key={item.href} href={item.href} onClick={handleItemClick}>
+            <div>
+              {!isSidebarCollapsed ? (
+                <>
+                  <div
+                    className={cn(
+                      "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
+                      {
+                        "!bg-layer-transparent-active text-primary": isActive,
+                        "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
+                      },
+                      isSidebarCollapsed ? "justify-center" : "w-[260px]"
+                    )}
+                  >
+                    {<item.Icon className="h-4 w-4 flex-shrink-0" />}
+                    {!isSidebarCollapsed && (
+                      <div className="w-full">
+                        <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
+                        <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
+                      </div>
+                    )}
+                  </div>
+                </>
+              ) : (
+                <Tooltip label={item.name} side="right">
+                  <div
+                    className={cn(
+                      "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
+                      {
+                        "!bg-layer-transparent-active text-primary": isActive,
+                        "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
+                      },
+                      isSidebarCollapsed ? "justify-center" : "w-[260px]"
+                    )}
+                  >
+                    {<item.Icon className="h-4 w-4 flex-shrink-0" />}
+                    {!isSidebarCollapsed && (
+                      <div className="w-full">
+                        <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
+                        <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
+                      </div>
+                    )}
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/sidebar.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// hooks
+import { useTheme } from "@/hooks/store";
+// components
+import { AdminSidebarDropdown } from "./sidebar-dropdown";
+import { AdminSidebarHelpSection } from "./sidebar-help-section";
+import { AdminSidebarMenu } from "./sidebar-menu";
+
+export const AdminSidebar = observer(function AdminSidebar() {
+  // store
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (isSidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleSidebar(!isSidebarCollapsed);
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toggleSidebar]);
+
+  return (
+    <div
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300 md:relative ${isSidebarCollapsed ? "-ml-[290px]" : ""} sm:${isSidebarCollapsed ? "-ml-[290px]" : ""} md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
+        <AdminSidebarDropdown />
+        <AdminSidebarMenu />
+        <AdminSidebarHelpSection />
+      </div>
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Select, SelectContent, SelectItem, SelectList, SelectTrigger } from "@makeplane/propel/components/select";
+import { InstanceWorkspaceService } from "@plane/services";
+import type { IWorkspace } from "@plane/types";
+import { validateSlug, validateWorkspaceName } from "@plane/utils";
+// components
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+
+const instanceWorkspaceService = new InstanceWorkspaceService();
+
+export function WorkspaceCreateForm() {
+  // router
+  const router = useRouter();
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  const [defaultValues, setDefaultValues] = useState<Partial<IWorkspace>>({
+    name: "",
+    slug: "",
+    organization_size: "",
+  });
+  // store hooks
+  const { createWorkspace } = useWorkspace();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
+  // derived values
+  const [workspaceBaseURL, setWorkspaceBaseURL] = useState(() => encodeURI(WEB_BASE_URL || ""));
+
+  useEffect(() => {
+    if (!WEB_BASE_URL) {
+      setWorkspaceBaseURL(encodeURI(window.location.origin + "/"));
+    }
+  }, []);
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    await instanceWorkspaceService
+      .slugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+          setSlugError(false);
+          await createWorkspace(formData)
+            .then(async () => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+              router.push(`/workspace`);
+            })
+            .catch(() => {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: "Workspace could not be created. Please try again.",
+              });
+            });
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
+
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-x-10 gap-y-6 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13 text-tertiary">Name your workspace</h4>
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                validate: (value) => validateWorkspaceName(value, true),
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <InputGroup size="lg">
+                  <Input
+                    size="lg"
+                    id="workspaceName"
+                    type="text"
+                    value={value}
+                    onChange={(e) => {
+                      onChange(e.target.value);
+                      setValue("name", e.target.value);
+                      setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                        shouldValidate: true,
+                      });
+                    }}
+                    ref={ref}
+                    aria-invalid={Boolean(errors.name)}
+                    placeholder="Something familiar and recognizable is always best."
+                  />
+                </InputGroup>
+              )}
+            />
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+          </div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
+          <div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
+            <span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
+            <Controller
+              control={control}
+              name="slug"
+              rules={{
+                validate: (value) => validateSlug(value),
+              }}
+              render={({ field: { onChange, value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  type="text"
+                  size="lg"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    else setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  aria-invalid={Boolean(errors.slug)}
+                  placeholder="workspace-name"
+                />
+              )}
+            />
+          </div>
+          {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+          )}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: "This is a required field." }}
+              render={({ field: { value, onChange } }) => (
+                <Select value={value} onValueChange={onChange}>
+                  <SelectTrigger size="lg" placeholder={<span className="text-placeholder">Select a range</span>} />
+                  <SelectContent>
+                    <SelectList>
+                      {ORGANIZATION_SIZE.map((item) => (
+                        <SelectItem key={item} value={item} label={item} size="lg" />
+                      ))}
+                    </SelectList>
+                  </SelectContent>
+                </Select>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex max-w-4xl items-center gap-4 py-1">
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          onClick={handleSubmit(handleCreateWorkspace)}
+          disabled={!isValid}
+          loading={isSubmitting}
+          label={isSubmitting ? "Creating workspace" : "Create workspace"}
+        />
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/workspace" />}
+          label="Go back"
+        />
+      </div>
+    </div>
+  );
+}

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+// types
+import type { Route } from "./+types/page";
+// local
+import { WorkspaceCreateForm } from "./form";
+
+const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
+  return (
+    <PageWrapper
+      header={{
+        title: "Create a new workspace on this instance.",
+        description: "You will need to invite users from Workspace Settings after you create this workspace.",
+      }}
+    >
+      <WorkspaceCreateForm />
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Create Workspace - God Mode" }];
+
+export default WorkspaceCreatePage;

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+import { LoadingOutline as LoaderIcon } from "@makeplane/propel/icons";
+// types
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceConfigurationKeys } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { Skeleton } from "@/components/common/skeleton";
+import { WorkspaceListItem } from "@/components/workspace/list-item";
+import { setPromiseToast } from "@/providers/toast";
+// hooks
+import { useInstance, useWorkspace } from "@/hooks/store";
+// types
+import type { Route } from "./+types/page";
+
+const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props: Route.ComponentProps) {
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // store
+  const { formattedConfig, fetchInstanceConfigurations, updateInstanceConfigurations } = useInstance();
+  const {
+    workspaceIds,
+    loader: workspaceLoader,
+    paginationInfo,
+    fetchWorkspaces,
+    fetchNextWorkspaces,
+  } = useWorkspace();
+  // derived values
+  const disableWorkspaceCreation = formattedConfig?.DISABLE_WORKSPACE_CREATION ?? "";
+  const hasNextPage = paginationInfo?.next_page_results && paginationInfo?.next_cursor !== undefined;
+
+  // fetch data
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+  useSWR("INSTANCE_WORKSPACES", () => fetchWorkspaces());
+
+  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving configuration",
+      success: {
+        title: "Success",
+        message: () => "Configuration saved successfully",
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <PageWrapper
+      header={{
+        title: "Workspaces on this instance",
+        description: "See all workspaces and control who can create them.",
+      }}
+    >
+      <div className="space-y-3">
+        {formattedConfig ? (
+          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
+            <div className="flex grow items-center gap-4">
+              <div className="grow">
+                <div className="pb-1 text-16 font-medium">Prevent anyone else from creating a workspace.</div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
+                  Toggling this on will let only you create workspaces. You will have to invite users to new workspaces.
+                </div>
+              </div>
+            </div>
+            <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+              <div className="flex items-center gap-4">
+                <Switch
+                  checked={Boolean(parseInt(disableWorkspaceCreation))}
+                  onCheckedChange={() => {
+                    if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
+                      updateConfig("DISABLE_WORKSPACE_CREATION", "0");
+                    } else {
+                      updateConfig("DISABLE_WORKSPACE_CREATION", "1");
+                    }
+                  }}
+                  size="sm"
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <Skeleton>
+            <Skeleton.Item height="50px" width="100%" />
+          </Skeleton>
+        )}
+        {workspaceLoader !== "init-loader" ? (
+          <>
+            <div className="flex items-center justify-between gap-2 pt-6">
+              <div className="flex flex-col items-start gap-x-2">
+                <div className="flex items-center gap-2 text-16 font-medium">
+                  All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
+                  {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                  )}
+                </div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
+                  You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
+                  Member.
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  nativeButton={false}
+                  render={<Link href="/workspace/create" />}
+                  label="Create workspace"
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-4 py-2">
+              {workspaceIds.map((workspaceId) => (
+                <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
+              ))}
+            </div>
+            {hasNextPage && (
+              <div className="flex justify-center">
+                <AnchorButton
+                  variant="primary"
+                  size="md"
+                  onClick={() => fetchNextWorkspaces()}
+                  loading={workspaceLoader === "pagination"}
+                  label="Load more"
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <Skeleton className="space-y-10 py-8">
+            <Skeleton.Item height="24px" width="20%" />
+            <Skeleton.Item height="92px" width="100%" />
+            <Skeleton.Item height="92px" width="100%" />
+            <Skeleton.Item height="92px" width="100%" />
+          </Skeleton>
+        )}
+      </div>
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Workspace Management - God Mode" }];
+
+export default WorkspaceManagementPage;

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane constants
+import type { TAdminAuthErrorInfo } from "@plane/constants";
+// icons
+import { CloseOutline, InfoOutline } from "@makeplane/propel/icons";
+
+type TAuthBanner = {
+  bannerData: TAdminAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAdminAuthErrorInfo | undefined) => void;
+};
+
+export function AuthBanner(props: TAuthBanner) {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
+      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
+        <InfoOutline width={16} height={16} className="text-accent-primary" />
+      </div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
+      <button
+        type="button"
+        aria-label="Dismiss banner"
+        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary transition-all hover:bg-accent-primary/20"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <CloseOutline className="h-4 w-4 flex-shrink-0" />
+      </button>
+    </div>
+  );
+}

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { PlaneLockup } from "@/components/common/plane-lockup";
+
+export function AuthHeader() {
+  return (
+    <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
+      <Link href="/">
+        <PlaneLockup height={20} width={95} className="text-primary" />
+      </Link>
+    </div>
+  );
+}

apps/admin/app/(all)/(home)/auth-helpers.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+// plane packages
+import type { TAdminAuthErrorInfo } from "@plane/constants";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
+
+export enum EErrorAlertType {
+  BANNER_ALERT = "BANNER_ALERT",
+  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
+  INLINE_EMAIL = "INLINE_EMAIL",
+  INLINE_PASSWORD = "INLINE_PASSWORD",
+  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
+}
+
+const errorCodeMessages: {
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string) => React.ReactNode };
+} = {
+  // admin
+  [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => (
+      <div>
+        Admin user already exists.&nbsp;
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => (
+      <div>
+        Admin user does not exist.&nbsp;
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => `User account deactivated. Please contact ${SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+  },
+};
+
+export const authErrorHandler = (errorCode: EAdminAuthErrorCodes, email?: string): TAdminAuthErrorInfo | undefined => {
+  const bannerAlertErrorCodes = [
+    EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL,
+    EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED,
+  ];
+
+  if (bannerAlertErrorCodes.includes(errorCode))
+    return {
+      type: EErrorAlertType.BANNER_ALERT,
+      code: errorCode,
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+    };
+
+  return undefined;
+};

apps/admin/app/(all)/(home)/layout.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+import { Outlet } from "react-router";
+// hooks
+import { useUser } from "@/hooks/store/use-user";
+
+function RootLayout() {
+  // router
+  const { replace } = useRouter();
+  // store hooks
+  const { isUserLoggedIn } = useUser();
+
+  useEffect(() => {
+    if (isUserLoggedIn === true) replace("/general");
+  }, [replace, isUserLoggedIn]);
+
+  return (
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
+      <Outlet />
+    </div>
+  );
+}
+
+export default observer(RootLayout);

apps/admin/app/(all)/(home)/page.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { InstanceFailureView } from "@/components/instance/failure";
+import { InstanceSetupForm } from "@/components/instance/setup-form";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import type { Route } from "./+types/page";
+import { InstanceSignInForm } from "./sign-in-form";
+
+function HomePage() {
+  // store hooks
+  const { instance, error } = useInstance();
+
+  // if instance is not fetched, show loading
+  if (!instance && !error) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  // if instance fetch fails, show failure view
+  if (error) {
+    return <InstanceFailureView />;
+  }
+
+  // if instance is fetched and setup is not done, show setup form
+  if (instance && !instance?.is_setup_done) {
+    return <InstanceSetupForm />;
+  }
+
+  // if instance is fetched and setup is done, show sign in form
+  return <InstanceSignInForm />;
+}
+
+export default observer(HomePage);
+
+export const meta: Route.MetaFunction = () => [
+  { title: "Admin – Instance Setup & Sign-In" },
+  { name: "description", content: "Configure your Plane instance or sign in to the admin portal." },
+];

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import type { EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { AuthService } from "@plane/services";
+// components
+import { Banner } from "@/components/common/banner";
+// local components
+import { FormHeader } from "@/components/instance/form-header";
+import { AuthBanner } from "./auth-banner";
+import { AuthHeader } from "./auth-header";
+import { authErrorHandler } from "./auth-helpers";
+
+// service initialization
+const authService = new AuthService();
+
+// error codes
+enum EErrorCodes {
+  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
+  REQUIRED_EMAIL_PASSWORD = "REQUIRED_EMAIL_PASSWORD",
+  INVALID_EMAIL = "INVALID_EMAIL",
+  USER_DOES_NOT_EXIST = "USER_DOES_NOT_EXIST",
+  AUTHENTICATION_FAILED = "AUTHENTICATION_FAILED",
+}
+
+type TError = {
+  type: EErrorCodes | undefined;
+  message: string | undefined;
+};
+
+// form data
+type TFormData = {
+  email: string;
+  password: string;
+};
+
+const defaultFromData: TFormData = {
+  email: "",
+  password: "",
+};
+
+export function InstanceSignInForm() {
+  // search params
+  const searchParams = useSearchParams();
+  const emailParam = searchParams.get("email") || undefined;
+  const errorCode = searchParams.get("error_code") || undefined;
+  const errorMessage = searchParams.get("error_message") || undefined;
+  // state
+  const [showPassword, setShowPassword] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAdminAuthErrorInfo | undefined>(undefined);
+
+  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
+    setFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  useEffect(() => {
+    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
+  }, [emailParam]);
+
+  // derived values
+  const errorData: TError = useMemo(() => {
+    if (errorCode && errorMessage) {
+      switch (errorCode) {
+        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
+          return { type: EErrorCodes.INSTANCE_NOT_CONFIGURED, message: errorMessage };
+        case EErrorCodes.REQUIRED_EMAIL_PASSWORD:
+          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD, message: errorMessage };
+        case EErrorCodes.INVALID_EMAIL:
+          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
+        case EErrorCodes.USER_DOES_NOT_EXIST:
+          return { type: EErrorCodes.USER_DOES_NOT_EXIST, message: errorMessage };
+        case EErrorCodes.AUTHENTICATION_FAILED:
+          return { type: EErrorCodes.AUTHENTICATION_FAILED, message: errorMessage };
+        default:
+          return { type: undefined, message: undefined };
+      }
+    } else return { type: undefined, message: undefined };
+  }, [errorCode, errorMessage]);
+
+  const isButtonDisabled = useMemo(
+    () => (!isSubmitting && formData.email && formData.password ? false : true),
+    [formData.email, formData.password, isSubmitting]
+  );
+
+  useEffect(() => {
+    if (errorCode) {
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
+      if (errorDetail) {
+        setErrorInfo(errorDetail);
+      }
+    }
+  }, [errorCode]);
+
+  return (
+    <>
+      <AuthHeader />
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <FormHeader
+            heading="Manage your Plane instance"
+            subHeading="Configure instance-wide settings to secure your instance"
+          />
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            {errorData.type && errorData?.message ? (
+              <Banner type="error" message={errorData?.message} />
+            ) : (
+              <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={setErrorInfo} />}</>
+            )}
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
+                Email <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="name@company.com"
+                  value={formData.email}
+                  onChange={(e) => handleFormChange("email", e.target.value)}
+                  autoComplete="off"
+                  autoFocus
+                />
+              </InputGroup>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Password <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="password"
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  autoComplete="off"
+                />
+                {showPassword ? (
+                  <button
+                    type="button"
+                    aria-label="Hide password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => setShowPassword(false)}
+                  >
+                    <HideOutline className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    aria-label="Show password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => setShowPassword(true)}
+                  >
+                    <ShowOutline className="h-4 w-4" />
+                  </button>
+                )}
+              </InputGroup>
+            </div>
+            <div className="py-2">
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                stretch="full"
+                disabled={isButtonDisabled}
+                loading={isSubmitting}
+                label="Sign in"
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/app/assets/images/404.svg

@@ -0,0 +1,17 @@
+<svg width="596" height="568" viewBox="0 0 596 568" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="293" cy="284" r="284" fill="#F1F3F5"/>
+<path d="M191.016 181.117H178.242V174.008H190.293V169.477H178.242V162.68H191.016V157.816H172.344V186H191.016V181.117ZM230.172 162.426H235.191C238.121 162.426 239.957 164.184 239.957 166.918C239.957 169.711 238.219 171.41 235.25 171.41H230.172V162.426ZM230.172 175.688H234.898L240.152 186H246.832L240.895 174.809C244.137 173.539 246.012 170.414 246.012 166.801C246.012 161.234 242.301 157.816 235.816 157.816H224.273V186H230.172V175.688ZM284.797 162.426H289.816C292.746 162.426 294.582 164.184 294.582 166.918C294.582 169.711 292.844 171.41 289.875 171.41H284.797V162.426ZM284.797 175.688H289.523L294.777 186H301.457L295.52 174.809C298.762 173.539 300.637 170.414 300.637 166.801C300.637 161.234 296.926 157.816 290.441 157.816H278.898V186H284.797V175.688ZM346.238 157.328C337.879 157.328 332.645 162.934 332.645 171.918C332.645 180.883 337.879 186.488 346.238 186.488C354.578 186.488 359.832 180.883 359.832 171.918C359.832 162.934 354.578 157.328 346.238 157.328ZM346.238 162.25C350.848 162.25 353.797 166 353.797 171.918C353.797 177.816 350.848 181.547 346.238 181.547C341.609 181.547 338.66 177.816 338.66 171.918C338.66 166 341.629 162.25 346.238 162.25ZM398.539 162.426H403.559C406.488 162.426 408.324 164.184 408.324 166.918C408.324 169.711 406.586 171.41 403.617 171.41H398.539V162.426ZM398.539 175.688H403.266L408.52 186H415.199L409.262 174.809C412.504 173.539 414.379 170.414 414.379 166.801C414.379 161.234 410.668 157.816 404.184 157.816H392.641V186H398.539V175.688Z" fill="black"/>
+<path d="M191.016 181.117H178.242V174.008H190.293V169.477H178.242V162.68H191.016V157.816H172.344V186H191.016V181.117ZM230.172 162.426H235.191C238.121 162.426 239.957 164.184 239.957 166.918C239.957 169.711 238.219 171.41 235.25 171.41H230.172V162.426ZM230.172 175.688H234.898L240.152 186H246.832L240.895 174.809C244.137 173.539 246.012 170.414 246.012 166.801C246.012 161.234 242.301 157.816 235.816 157.816H224.273V186H230.172V175.688ZM284.797 162.426H289.816C292.746 162.426 294.582 164.184 294.582 166.918C294.582 169.711 292.844 171.41 289.875 171.41H284.797V162.426ZM284.797 175.688H289.523L294.777 186H301.457L295.52 174.809C298.762 173.539 300.637 170.414 300.637 166.801C300.637 161.234 296.926 157.816 290.441 157.816H278.898V186H284.797V175.688ZM346.238 157.328C337.879 157.328 332.645 162.934 332.645 171.918C332.645 180.883 337.879 186.488 346.238 186.488C354.578 186.488 359.832 180.883 359.832 171.918C359.832 162.934 354.578 157.328 346.238 157.328ZM346.238 162.25C350.848 162.25 353.797 166 353.797 171.918C353.797 177.816 350.848 181.547 346.238 181.547C341.609 181.547 338.66 177.816 338.66 171.918C338.66 166 341.629 162.25 346.238 162.25ZM398.539 162.426H403.559C406.488 162.426 408.324 164.184 408.324 166.918C408.324 169.711 406.586 171.41 403.617 171.41H398.539V162.426ZM398.539 175.688H403.266L408.52 186H415.199L409.262 174.809C412.504 173.539 414.379 170.414 414.379 166.801C414.379 161.234 410.668 157.816 404.184 157.816H392.641V186H398.539V175.688Z" fill="black"/>
+<mask id="mask0_468_2978" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="258" width="568" height="222">
+<path d="M115.723 475H157.764V437.354H185.303V401.904H157.764V263.623H95.3613C52.002 327.49 29.0039 364.551 10.5469 399.707V437.354H115.723V475ZM49.3652 402.051C66.5039 368.945 84.9609 340.088 115.723 294.971H116.602V403.223H49.3652V402.051ZM292.857 479.688C346.031 479.688 378.258 437.061 378.258 368.799C378.258 300.537 345.738 258.789 292.857 258.789C239.977 258.789 207.311 300.684 207.311 368.945C207.311 437.354 239.684 479.688 292.857 479.688ZM292.857 444.238C267.662 444.238 252.281 416.992 252.281 368.945C252.281 321.338 267.955 294.238 292.857 294.238C317.906 294.238 333.287 321.191 333.287 368.945C333.287 417.139 318.053 444.238 292.857 444.238ZM507.785 475H549.826V437.354H577.365V401.904H549.826V263.623H487.424C444.064 327.49 421.066 364.551 402.609 399.707V437.354H507.785V475ZM441.428 402.051C458.566 368.945 477.023 340.088 507.785 294.971H508.664V403.223H441.428V402.051Z" fill="#858E96"/>
+</mask>
+<g mask="url(#mask0_468_2978)">
+<path d="M369.5 527L243 223.5H-27.5V527H369.5Z" fill="#858E96"/>
+</g>
+<mask id="mask1_468_2978" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="277" width="568" height="222">
+<path d="M124.723 494H166.764V456.354H194.303V420.904H166.764V282.623H104.361C61.002 346.49 38.0039 383.551 19.5469 418.707V456.354H124.723V494ZM58.3652 421.051C75.5039 387.945 93.9609 359.088 124.723 313.971H125.602V422.223H58.3652V421.051ZM301.857 498.688C355.031 498.688 387.258 456.061 387.258 387.799C387.258 319.537 354.738 277.789 301.857 277.789C248.977 277.789 216.311 319.684 216.311 387.945C216.311 456.354 248.684 498.688 301.857 498.688ZM301.857 463.238C276.662 463.238 261.281 435.992 261.281 387.945C261.281 340.338 276.955 313.238 301.857 313.238C326.906 313.238 342.287 340.191 342.287 387.945C342.287 436.139 327.053 463.238 301.857 463.238ZM516.785 494H558.826V456.354H586.365V420.904H558.826V282.623H496.424C453.064 346.49 430.066 383.551 411.609 418.707V456.354H516.785V494ZM450.428 421.051C467.566 387.945 486.023 359.088 516.785 313.971H517.664V422.223H450.428V421.051Z" fill="#ACB5BD"/>
+</mask>
+<g mask="url(#mask1_468_2978)">
+<path d="M250 242.5L376.5 546H647V242.5H250Z" fill="#858E96"/>
+</g>
+</svg>

apps/admin/app/assets/instance/instance-failure-dark.svg

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

apps/admin/app/assets/instance/instance-failure.svg

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

apps/admin/app/assets/logos/gitea-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 640 640" width="32" height="32"><path d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12" style="fill:#fff"/><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1" style="fill:#609926"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z" style="fill:#609926"/></svg>

apps/admin/app/assets/logos/gitlab-logo.svg

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

apps/admin/app/assets/logos/google-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>

apps/admin/app/assets/logos/takeoff-icon-dark.svg

@@ -0,0 +1,35 @@
+<svg width="91" height="90" viewBox="0 0 91 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="45.1309" cy="45" r="45" fill="#1F2D5C"/>
+<path d="M61.2694 60.8093H29.1265C28.6487 60.8093 28.2578 60.4184 28.2578 59.9406V59.0719C28.2578 58.5941 28.6487 58.2031 29.1265 58.2031H61.2694C61.7472 58.2031 62.1381 58.5941 62.1381 59.0719V59.9406C62.1381 60.4184 61.7472 60.8093 61.2694 60.8093Z" fill="url(#paint0_linear_2783_1138)"/>
+<path d="M51.341 35.5623L39.1059 29.8104C38.0009 29.2909 36.6891 29.5203 35.8256 30.3838L35.168 31.0414L43.387 38.1485L51.341 35.5623Z" fill="url(#paint1_linear_2783_1138)"/>
+<path d="M61.0698 36.2872L59.2611 31.4023L33.7223 41.1182L31.1092 38.8178C30.389 38.1836 29.3561 38.049 28.4969 38.4772L28.324 38.5633C28.1034 38.6736 28.0069 38.9368 28.1042 39.1627L30.7825 45.4062L33.9933 46.7666L61.0698 36.2872Z" fill="url(#paint2_linear_2783_1138)"/>
+<path d="M60.073 36.4877C61.5123 36.4877 62.6792 35.3209 62.6792 33.8816C62.6792 32.4422 61.5123 31.2754 60.073 31.2754C58.6336 31.2754 57.4668 32.4422 57.4668 33.8816C57.4668 35.3209 58.6336 36.4877 60.073 36.4877Z" fill="url(#paint3_linear_2783_1138)"/>
+<path d="M33.1433 46.9116C34.5826 46.9116 35.7495 45.7447 35.7495 44.3054C35.7495 42.866 34.5826 41.6992 33.1433 41.6992C31.7039 41.6992 30.5371 42.866 30.5371 44.3054C30.5371 45.7447 31.7039 46.9116 33.1433 46.9116Z" fill="url(#paint4_linear_2783_1138)"/>
+<path d="M45.3319 40.3661C45.0304 40.4799 44.8228 40.7587 44.7993 41.0802L43.8516 54.1501H44.7811C46.0017 54.1501 47.0919 53.3839 47.5046 52.2363L52.5154 38.3376C52.6292 38.0231 52.3208 37.7199 52.008 37.839L45.3319 40.3661Z" fill="url(#paint5_linear_2783_1138)"/>
+<defs>
+<linearGradient id="paint0_linear_2783_1138" x1="35.9269" y1="50.2343" x2="53.6594" y2="67.9676" gradientUnits="userSpaceOnUse">
+<stop stop-color="#74A0E2"/>
+<stop offset="1" stop-color="#4F90EF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2783_1138" x1="35.168" y1="33.8413" x2="51.341" y2="33.8413" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3079D6"/>
+<stop offset="1" stop-color="#297CD2"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2783_1138" x1="28.066" y1="39.0854" x2="61.0698" y2="39.0854" gradientUnits="userSpaceOnUse">
+<stop stop-color="#42A3F2"/>
+<stop offset="1" stop-color="#42A4EB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2783_1138" x1="57.4668" y1="33.8816" x2="62.6792" y2="33.8816" gradientUnits="userSpaceOnUse">
+<stop stop-color="#42A3F2"/>
+<stop offset="1" stop-color="#42A4EB"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2783_1138" x1="30.5371" y1="44.3054" x2="35.7495" y2="44.3054" gradientUnits="userSpaceOnUse">
+<stop stop-color="#42A3F2"/>
+<stop offset="1" stop-color="#42A4EB"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2783_1138" x1="43.8516" y1="45.9815" x2="52.5397" y2="45.9815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3079D6"/>
+<stop offset="1" stop-color="#297CD2"/>
+</linearGradient>
+</defs>
+</svg>

apps/admin/app/assets/logos/takeoff-icon-light.svg

@@ -0,0 +1,40 @@
+<svg width="91" height="90" viewBox="0 0 91 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8747_25960)">
+<circle cx="45.1309" cy="45" r="45" fill="#F7F9FF"/>
+<path d="M61.2694 60.8093H29.1265C28.6487 60.8093 28.2578 60.4184 28.2578 59.9406V59.0719C28.2578 58.5941 28.6487 58.2031 29.1265 58.2031H61.2694C61.7472 58.2031 62.1381 58.5941 62.1381 59.0719V59.9406C62.1381 60.4184 61.7472 60.8093 61.2694 60.8093Z" fill="url(#paint0_linear_8747_25960)"/>
+<path d="M51.341 35.5623L39.1059 29.8104C38.0009 29.2909 36.6891 29.5203 35.8256 30.3838L35.168 31.0414L43.387 38.1485L51.341 35.5623Z" fill="url(#paint1_linear_8747_25960)"/>
+<path d="M61.0698 36.2872L59.2611 31.4023L33.7223 41.1182L31.1092 38.8178C30.389 38.1836 29.3561 38.049 28.4969 38.4772L28.324 38.5633C28.1034 38.6736 28.0069 38.9368 28.1042 39.1627L30.7825 45.4062L33.9933 46.7666L61.0698 36.2872Z" fill="url(#paint2_linear_8747_25960)"/>
+<path d="M60.073 36.4858C61.5123 36.4858 62.6792 35.319 62.6792 33.8796C62.6792 32.4403 61.5123 31.2734 60.073 31.2734C58.6336 31.2734 57.4668 32.4403 57.4668 33.8796C57.4668 35.319 58.6336 36.4858 60.073 36.4858Z" fill="url(#paint3_linear_8747_25960)"/>
+<path d="M33.1433 46.9116C34.5826 46.9116 35.7495 45.7447 35.7495 44.3054C35.7495 42.866 34.5826 41.6992 33.1433 41.6992C31.7039 41.6992 30.5371 42.866 30.5371 44.3054C30.5371 45.7447 31.7039 46.9116 33.1433 46.9116Z" fill="url(#paint4_linear_8747_25960)"/>
+<path d="M45.3319 40.3661C45.0304 40.4799 44.8228 40.7587 44.7993 41.0802L43.8516 54.1501H44.7811C46.0017 54.1501 47.0919 53.3839 47.5046 52.2363L52.5154 38.3376C52.6292 38.0231 52.3208 37.7199 52.008 37.839L45.3319 40.3661Z" fill="url(#paint5_linear_8747_25960)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8747_25960" x1="35.9269" y1="50.2343" x2="53.6594" y2="67.9676" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D59B3"/>
+<stop offset="1" stop-color="#195BBC"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8747_25960" x1="35.168" y1="33.8413" x2="51.341" y2="33.8413" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3079D6"/>
+<stop offset="1" stop-color="#297CD2"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8747_25960" x1="28.066" y1="39.0854" x2="61.0698" y2="39.0854" gradientUnits="userSpaceOnUse">
+<stop stop-color="#42A3F2"/>
+<stop offset="1" stop-color="#42A4EB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_8747_25960" x1="57.4668" y1="33.8796" x2="62.6792" y2="33.8796" gradientUnits="userSpaceOnUse">
+<stop stop-color="#42A3F2"/>
+<stop offset="1" stop-color="#42A4EB"/>
+</linearGradient>
+<linearGradient id="paint4_linear_8747_25960" x1="30.5371" y1="44.3054" x2="35.7495" y2="44.3054" gradientUnits="userSpaceOnUse">
+<stop stop-color="#42A3F2"/>
+<stop offset="1" stop-color="#42A4EB"/>
+</linearGradient>
+<linearGradient id="paint5_linear_8747_25960" x1="43.8516" y1="45.9815" x2="52.5397" y2="45.9815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3079D6"/>
+<stop offset="1" stop-color="#297CD2"/>
+</linearGradient>
+<clipPath id="clip0_8747_25960">
+<rect width="90" height="90" fill="white" transform="translate(0.130859)"/>
+</clipPath>
+</defs>
+</svg>

apps/admin/app/compat/next/helper.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Ensures that a URL has a trailing slash while preserving query parameters and fragments
+ * @param url - The URL to process
+ * @returns The URL with a trailing slash added to the pathname (if not already present)
+ */
+export function ensureTrailingSlash(url: string): string {
+  try {
+    const fallbackBaseUrl =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "http://dummy.com";
+    // Handle relative URLs by creating a URL object with a fallback base URL
+    const urlObj = new URL(url, fallbackBaseUrl);
+
+    // Don't modify root path
+    if (urlObj.pathname === "/") {
+      return url;
+    }
+
+    // Add trailing slash if it doesn't exist
+    if (!urlObj.pathname.endsWith("/")) {
+      urlObj.pathname += "/";
+    }
+
+    // For relative URLs, return just the path + search + hash
+    if (url.startsWith("/")) {
+      return urlObj.pathname + urlObj.search + urlObj.hash;
+    }
+
+    // For absolute URLs, return the full URL
+    return urlObj.toString();
+  } catch (error) {
+    // If URL parsing fails, return the original URL
+    console.warn("Failed to parse URL for trailing slash enforcement:", url, error);
+    return url;
+  }
+}

apps/admin/app/compat/next/link.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Link as RRLink } from "react-router";
+import { ensureTrailingSlash } from "./helper";
+
+type NextLinkProps = React.ComponentProps<"a"> & {
+  href: string;
+  replace?: boolean;
+  prefetch?: boolean; // next.js prop, ignored
+  scroll?: boolean; // next.js prop, ignored
+  shallow?: boolean; // next.js prop, ignored
+};
+
+function Link({ href, replace, prefetch: _prefetch, scroll: _scroll, shallow: _shallow, ...rest }: NextLinkProps) {
+  return <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+}
+
+export default Link;

apps/admin/app/compat/next/navigation.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { useLocation, useNavigate, useSearchParams as useSearchParamsRR } from "react-router";
+import { ensureTrailingSlash } from "./helper";
+
+export function useRouter() {
+  const navigate = useNavigate();
+  return useMemo(
+    () => ({
+      push: (to: string) => navigate(ensureTrailingSlash(to)),
+      replace: (to: string) => navigate(ensureTrailingSlash(to), { replace: true }),
+      back: () => navigate(-1),
+      forward: () => navigate(1),
+      refresh: () => {
+        location.reload();
+      },
+      prefetch: async (_to: string) => {
+        // no-op in this shim
+      },
+    }),
+    [navigate]
+  );
+}
+
+export function usePathname(): string {
+  const { pathname } = useLocation();
+  return pathname;
+}
+
+export function useSearchParams(): URLSearchParams {
+  const [searchParams] = useSearchParamsRR();
+  return searchParams;
+}

apps/admin/app/components/404.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Link } from "react-router";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+// images
+import Image404 from "@/app/assets/images/404.svg?url";
+
+function PageNotFound() {
+  return (
+    <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
+      <div className="grid h-full place-items-center p-4">
+        <div className="space-y-8 text-center">
+          <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
+            <img src={Image404} alt="404 - Page not found" className="h-full w-full object-contain" />
+          </div>
+          <div className="space-y-2">
+            <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
+            <p className="text-13 text-secondary">
+              Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+              temporarily unavailable.
+            </p>
+          </div>
+          <Link to="/general/">
+            <span className="flex justify-center py-4">
+              <Button variant="secondary" size="md" stretch="auto" label="Go to general settings" />
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PageNotFound;

apps/admin/app/entry.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>
+  );
+});

apps/admin/app/root.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { Links, Meta, Outlet, Scripts } from "react-router";
+import type { LinksFunction } from "react-router";
+import appleTouchIcon from "@/app/assets/favicon/apple-touch-icon.png?url";
+import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url";
+import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url";
+import faviconIco from "@/app/assets/favicon/favicon.ico?url";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import globalStyles from "@/styles/globals.css?url";
+import { AppProviders } from "@/providers";
+import type { Route } from "./+types/root";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
+
+const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
+const APP_DESCRIPTION =
+  "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.";
+
+export const links: LinksFunction = () => [
+  { rel: "apple-touch-icon", sizes: "180x180", href: appleTouchIcon },
+  { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32 },
+  { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16 },
+  { rel: "shortcut icon", href: faviconIco },
+  { rel: "manifest", href: `/site.webmanifest.json` },
+  { rel: "stylesheet", href: globalStyles },
+  {
+    rel: "preload",
+    href: interVariableWoff2,
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous",
+  },
+];
+
+export function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="antialiased" suppressHydrationWarning>
+        <AppProviders>{children}</AppProviders>
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export const meta: Route.MetaFunction = () => [
+  { title: APP_TITLE },
+  { name: "description", content: APP_DESCRIPTION },
+  { property: "og:title", content: APP_TITLE },
+  { property: "og:description", content: APP_DESCRIPTION },
+  { property: "og:url", content: "https://plane.so/" },
+  {
+    name: "keywords",
+    content:
+      "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
+  },
+  { name: "twitter:site", content: "@planepowers" },
+];
+
+export default function Root() {
+  return (
+    <div className="min-h-screen bg-canvas">
+      <Outlet />
+    </div>
+  );
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="relative flex h-screen w-full items-center justify-center">
+      <LogoSpinner />
+    </div>
+  );
+}
+
+export function ErrorBoundary({ error: _error }: Route.ErrorBoundaryProps) {
+  return (
+    <div>
+      <p>Something went wrong.</p>
+    </div>
+  );
+}

apps/admin/app/routes.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { index, layout, route } from "@react-router/dev/routes";
+import type { RouteConfig } from "@react-router/dev/routes";
+
+export default [
+  layout("./(all)/(home)/layout.tsx", [index("./(all)/(home)/page.tsx")]),
+  layout("./(all)/(dashboard)/layout.tsx", [
+    route("general", "./(all)/(dashboard)/general/page.tsx"),
+    route("workspace", "./(all)/(dashboard)/workspace/page.tsx"),
+    route("workspace/create", "./(all)/(dashboard)/workspace/create/page.tsx"),
+    route("email", "./(all)/(dashboard)/email/page.tsx"),
+    route("authentication", "./(all)/(dashboard)/authentication/page.tsx"),
+    route("authentication/github", "./(all)/(dashboard)/authentication/github/page.tsx"),
+    route("authentication/gitlab", "./(all)/(dashboard)/authentication/gitlab/page.tsx"),
+    route("authentication/google", "./(all)/(dashboard)/authentication/google/page.tsx"),
+    route("authentication/gitea", "./(all)/(dashboard)/authentication/gitea/page.tsx"),
+    route("ai", "./(all)/(dashboard)/ai/page.tsx"),
+    route("image", "./(all)/(dashboard)/image/page.tsx"),
+  ]),
+  // Catch-all route for 404 handling - must be last
+  route("*", "./components/404.tsx"),
+] satisfies RouteConfig;

apps/admin/app/types/next-link.d.ts

@@ -0,0 +1,12 @@
+declare module "next/link" {
+  type Props = React.ComponentProps<"a"> & {
+    href: string;
+    replace?: boolean;
+    prefetch?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+  };
+
+  const Link: React.FC<Props>;
+  export default Link;
+}

apps/admin/app/types/next-navigation.d.ts

@@ -0,0 +1,13 @@
+declare module "next/navigation" {
+  export function useRouter(): {
+    push: (to: string) => void;
+    replace: (to: string) => void;
+    back: () => void;
+    forward: () => void;
+    refresh: () => void;
+    prefetch: (to: string) => Promise<void> | void;
+  };
+
+  export function usePathname(): string;
+  export function useSearchParams(): URLSearchParams;
+}

apps/admin/app/types/react-router-virtual.d.ts

@@ -0,0 +1,5 @@
+declare module "virtual:react-router/server-build" {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const build: any;
+  export default build;
+}

apps/admin/caddy/Caddyfile

@@ -0,0 +1,37 @@
+{
+	servers {
+		trusted_proxies static private_ranges
+	}
+
+	order rate_limit before file_server
+}
+
+:3000 {
+	root * /usr/share/caddy/html
+
+	# Per-client-IP rate limiting for static asset requests
+	rate_limit {
+		zone static {
+			key {client_ip}
+			events 300
+			window 1m
+		}
+	}
+
+	# Security headers (HSTS is set at the TLS terminator)
+	header {
+		X-Frame-Options "DENY"
+		X-Content-Type-Options "nosniff"
+		X-XSS-Protection "1; mode=block"
+	}
+
+	# SPA fallback: the admin build is served from /god-mode
+	try_files {path} /god-mode/index.html
+	file_server
+
+	# Access logs to stdout (default in Caddy)
+	log {
+		output stdout
+		format console
+	}
+}

apps/admin/components/authentication/authentication-method-card.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  config: React.ReactNode;
+  disabled?: boolean;
+  withBorder?: boolean;
+  unavailable?: boolean;
+};
+
+export function AuthenticationMethodCard(props: Props) {
+  const { name, description, icon, config, disabled = false, withBorder = true, unavailable = false } = props;
+
+  return (
+    <div
+      className={cn("flex w-full items-center gap-14 rounded-lg bg-layer-2", {
+        "border border-subtle px-4 py-3": withBorder,
+      })}
+    >
+      <div
+        className={cn("flex grow items-center gap-4", {
+          "opacity-50": unavailable,
+        })}
+      >
+        <div className="shrink-0">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-layer-1">{icon}</div>
+        </div>
+        <div className="grow">
+          <div
+            className={cn("leading-5 font-medium text-primary", {
+              "text-13": withBorder,
+              "text-18": !withBorder,
+            })}
+          >
+            {name}
+          </div>
+          <div
+            className={cn("leading-5 font-regular text-tertiary", {
+              "text-11": withBorder,
+              "text-13": !withBorder,
+            })}
+          >
+            {description}
+          </div>
+        </div>
+      </div>
+      <div className={`shrink-0 ${disabled && "opacity-70"}`}>{config}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { useInstance } from "@/hooks/store";
+// ui
+// types
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const EmailCodesConfiguration = observer(function EmailCodesConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "";
+
+  return (
+    <Switch
+      checked={Boolean(parseInt(enableMagicLogin))}
+      onCheckedChange={() => {
+        const newEnableMagicLogin = Boolean(parseInt(enableMagicLogin)) === true ? "0" : "1";
+        updateConfig("ENABLE_MAGIC_LINK_LOGIN", newEnableMagicLogin);
+      }}
+      size="sm"
+      disabled={disabled}
+    />
+  );
+});

apps/admin/components/authentication/gitea-config.tsx

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GiteaConfiguration = observer(function GiteaConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const GiteaConfig = formattedConfig?.IS_GITEA_ENABLED ?? "";
+  const GiteaConfigured =
+    !!formattedConfig?.GITEA_HOST && !!formattedConfig?.GITEA_CLIENT_ID && !!formattedConfig?.GITEA_CLIENT_SECRET;
+
+  return (
+    <>
+      {GiteaConfigured ? (
+        <div className="flex items-center gap-4">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/gitea" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(GiteaConfig))}
+            onCheckedChange={() => {
+              Boolean(parseInt(GiteaConfig)) === true
+                ? updateConfig("IS_GITEA_ENABLED", "0")
+                : updateConfig("IS_GITEA_ENABLED", "1");
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/gitea" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GithubConfiguration = observer(function GithubConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
+  const isGithubConfigured = !!formattedConfig?.GITHUB_CLIENT_ID && !!formattedConfig?.GITHUB_CLIENT_SECRET;
+
+  return (
+    <>
+      {isGithubConfigured ? (
+        <div className="flex items-center gap-4">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/github" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(enableGithubConfig))}
+            onCheckedChange={() => {
+              const newEnableGithubConfig = Boolean(parseInt(enableGithubConfig)) === true ? "0" : "1";
+              updateConfig("IS_GITHUB_ENABLED", newEnableGithubConfig);
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/github" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GitlabConfiguration = observer(function GitlabConfiguration(props: 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">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/gitlab" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(enableGitlabConfig))}
+            onCheckedChange={() => {
+              const newEnableGitlabConfig = Boolean(parseInt(enableGitlabConfig)) === true ? "0" : "1";
+              updateConfig("IS_GITLAB_ENABLED", newEnableGitlabConfig);
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/gitlab" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GoogleConfiguration = observer(function GoogleConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
+  const isGoogleConfigured = !!formattedConfig?.GOOGLE_CLIENT_ID && !!formattedConfig?.GOOGLE_CLIENT_SECRET;
+
+  return (
+    <>
+      {isGoogleConfigured ? (
+        <div className="flex items-center gap-4">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/google" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(enableGoogleConfig))}
+            onCheckedChange={() => {
+              const newEnableGoogleConfig = Boolean(parseInt(enableGoogleConfig)) === true ? "0" : "1";
+              updateConfig("IS_GOOGLE_ENABLED", newEnableGoogleConfig);
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/google" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { useInstance } from "@/hooks/store";
+// ui
+// types
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const PasswordLoginConfiguration = observer(function PasswordLoginConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "";
+
+  return (
+    <Switch
+      checked={Boolean(parseInt(enableEmailPassword))}
+      onCheckedChange={() => {
+        const newEnableEmailPassword = Boolean(parseInt(enableEmailPassword)) === true ? "0" : "1";
+        updateConfig("ENABLE_EMAIL_PASSWORD", newEnableEmailPassword);
+      }}
+      size="sm"
+      disabled={disabled}
+    />
+  );
+});

apps/admin/components/common/banner.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickCircleOutline, WarningCircleOutline } from "@makeplane/propel/icons";
+
+type TBanner = {
+  type: "success" | "error";
+  message: string;
+};
+
+export function Banner(props: TBanner) {
+  const { type, message } = props;
+
+  return (
+    <div
+      className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
+    >
+      <div className="flex items-center justify-center">
+        <div className="flex-shrink-0">
+          {type === "error" ? (
+            <span className="flex h-6 w-6 items-center justify-center rounded-full">
+              <WarningCircleOutline className="h-5 w-5 text-danger-primary" aria-hidden="true" />
+            </span>
+          ) : (
+            <TickCircleOutline className="h-5 w-5 text-success-primary" aria-hidden="true" />
+          )}
+        </div>
+        <div className="ml-1">
+          <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
+            {message}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/admin/components/common/code-block.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+
+type TProps = {
+  children: React.ReactNode;
+  className?: string;
+  darkerShade?: boolean;
+};
+
+export function CodeBlock({ children, className, darkerShade }: TProps) {
+  return (
+    <span
+      className={cn(
+        "rounded-md border border-subtle bg-surface-2 px-0.5 text-11 font-semibold text-tertiary",
+        {
+          "border-subtle bg-layer-1 text-secondary": darkerShade,
+        },
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import Link from "next/link";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscardHref: string;
+};
+
+export function ConfirmDiscardModal(props: Props) {
+  const { isOpen, handleClose, onDiscardHref } = props;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
+                <div className="px-4 pt-5 pb-4 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-16 leading-6 font-medium text-tertiary">
+                        You have unsaved changes
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-13 text-placeholder">
+                          Changes you made will be lost if you go back. Do you wish to go back?
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="secondary" size="md" stretch="auto" onClick={handleClose} label="Keep editing" />
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    stretch="auto"
+                    nativeButton={false}
+                    render={<Link href={onDiscardHref} />}
+                    label="Go back"
+                  />
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

apps/admin/components/common/controller-input.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// icons
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+
+// Generic over the form's values because react-hook-form's Control is invariant: its
+// `_options.validate` narrows `name` to a keyof union, so `Control<any>` no longer
+// accepts a typed form's control. Inferring from `control` keeps call sites unchanged.
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  control: Control<TFieldValues>;
+  type: "text" | "password";
+  name: FieldPath<TFieldValues>;
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export type TControllerInputFormField<TFieldValues extends FieldValues = FieldValues> = {
+  key: FieldPath<TFieldValues>;
+  type: "text" | "password";
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export function ControllerInput<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {
+  const { name, control, type, label, description, placeholder, error, required } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <h4 className="text-13 text-tertiary">{label}</h4>
+      <InputGroup size="lg">
+        <Controller
+          control={control}
+          name={name}
+          rules={{ required: required ? `${label} is required.` : false }}
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              size="lg"
+              id={name}
+              name={name}
+              type={type === "password" && showPassword ? "text" : type}
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              aria-invalid={error}
+              placeholder={placeholder}
+            />
+          )}
+        />
+        {type === "password" &&
+          (showPassword ? (
+            <button
+              type="button"
+              aria-label="Hide password"
+              className="flex items-center justify-center text-placeholder"
+              onClick={() => setShowPassword(false)}
+            >
+              <HideOutline className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              aria-label="Show password"
+              className="flex items-center justify-center text-placeholder"
+              onClick={() => setShowPassword(true)}
+            >
+              <ShowOutline className="h-4 w-4" />
+            </button>
+          ))}
+      </InputGroup>
+      {description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
+    </div>
+  );
+}

apps/admin/components/common/controller-switch.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane internal packages
+import { Switch } from "@makeplane/propel/components/switch";
+
+type Props<T extends FieldValues = FieldValues> = {
+  control: Control<T>;
+  field: TControllerSwitchFormField<T>;
+};
+
+export type TControllerSwitchFormField<T extends FieldValues = FieldValues> = {
+  name: FieldPath<T>;
+  label: string;
+};
+
+export function ControllerSwitch<T extends FieldValues>(props: Props<T>) {
+  const {
+    control,
+    field: { name, label },
+  } = props;
+
+  return (
+    <div className="flex items-center justify-between gap-1">
+      <h4 className="text-sm text-custom-text-300">Refresh user attributes from {label} during sign in</h4>
+      <div className="relative">
+        <Controller
+          control={control}
+          name={name as FieldPath<T>}
+          render={({ field: { value, onChange } }) => {
+            const parsedValue = Number.parseInt(typeof value === "string" ? value : String(value ?? "0"), 10);
+            const isOn = !Number.isNaN(parsedValue) && parsedValue !== 0;
+            return <Switch checked={isOn} onCheckedChange={() => onChange(isOn ? "0" : "1")} size="sm" />;
+          }}
+        />
+      </div>
+    </div>
+  );
+}

apps/admin/components/common/copy-field.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+import { CopyOutline } from "@makeplane/propel/icons";
+// components
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+
+type Props = {
+  label: string;
+  url: string;
+  description: string | React.ReactNode;
+};
+
+export type TCopyField = {
+  key: string;
+  label: string;
+  url: string;
+  description: string | React.ReactNode;
+};
+
+export function CopyField(props: Props) {
+  const { label, url, description } = props;
+
+  return (
+    <div className="flex flex-col gap-1">
+      <h4 className="text-13 text-secondary">{label}</h4>
+      <Button
+        variant="secondary"
+        size="md"
+        stretch="auto"
+        icon={<CopyOutline width={18} height={18} color="#B9B9B9" />}
+        iconPosition="end"
+        label={url}
+        onClick={() => {
+          navigator.clipboard.writeText(url);
+          setToast({
+            type: TOAST_TYPE.INFO,
+            title: "Copied to clipboard",
+            message: `The ${label} has been successfully copied to your clipboard`,
+          });
+        }}
+      />
+      <div className="text-11 text-tertiary">{description}</div>
+    </div>
+  );
+}

apps/admin/components/common/header/core.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CORE_HEADER_SEGMENT_LABELS: Record<string, string> = {
+  general: "General",
+  ai: "Artificial Intelligence",
+  email: "Email",
+  authentication: "Authentication",
+  image: "Image",
+  google: "Google",
+  github: "GitHub",
+  gitlab: "GitLab",
+  gitea: "Gitea",
+  workspace: "Workspace",
+  create: "Create",
+};

apps/admin/components/common/header/extended.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const EXTENDED_HEADER_SEGMENT_LABELS: Record<string, string> = {};

apps/admin/components/common/header/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// icons
+import { Menu } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@makeplane/propel/components/breadcrumb";
+// hooks
+import { useTheme } from "@/hooks/store";
+// local imports
+import { CORE_HEADER_SEGMENT_LABELS } from "./core";
+import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
+
+export const HamburgerToggle = observer(function HamburgerToggle() {
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  return (
+    <button
+      type="button"
+      aria-label="Toggle sidebar"
+      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
+      onClick={() => toggleSidebar(!isSidebarCollapsed)}
+    >
+      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
+    </button>
+  );
+});
+
+const HEADER_SEGMENT_LABELS = {
+  ...CORE_HEADER_SEGMENT_LABELS,
+  ...EXTENDED_HEADER_SEGMENT_LABELS,
+};
+
+// Function to dynamically generate breadcrumb items based on pathname
+const generateBreadcrumbItems = (pathname: string) => {
+  const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
+  pathSegments.pop();
+
+  let currentUrl = "";
+  const breadcrumbItems = pathSegments.map((segment) => {
+    currentUrl += "/" + segment;
+    return {
+      title: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
+      href: currentUrl,
+    };
+  });
+  return breadcrumbItems;
+};
+
+export const AdminHeader = observer(function AdminHeader() {
+  const pathName = usePathname();
+
+  const breadcrumbItems = generateBreadcrumbItems(pathName || "");
+
+  return (
+    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-subtle bg-surface-1 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <HamburgerToggle />
+        <div>
+          <Breadcrumb aria-label="Breadcrumb">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  label="Settings"
+                  icon={<SettingsOutline className="h-4 w-4 text-tertiary" />}
+                  render={<Link href="/general/" />}
+                />
+              </BreadcrumbItem>
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Fragment key={item.title}>
+                      <BreadcrumbSeparator />
+                      <BreadcrumbItem>
+                        <BreadcrumbLink label={item.title} render={<Link href={item.href} />} />
+                      </BreadcrumbItem>
+                    </Fragment>
+                  )
+              )}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </div>
+    </div>
+  );
+});

apps/admin/components/common/logo-spinner.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
+import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
+
+export function LogoSpinner() {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
+
+  return (
+    <div className="flex items-center justify-center">
+      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+    </div>
+  );
+}

apps/admin/components/common/new-user-popup.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useTheme as useNextTheme } from "next-themes";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+import { resolveGeneralTheme } from "@plane/utils";
+// hooks
+import TakeoffIconDark from "@/app/assets/logos/takeoff-icon-dark.svg?url";
+import TakeoffIconLight from "@/app/assets/logos/takeoff-icon-light.svg?url";
+import { useTheme } from "@/hooks/store";
+// icons
+
+export const NewUserPopup = observer(function NewUserPopup() {
+  // hooks
+  const { isNewUserPopup, toggleNewUserPopup } = useTheme();
+  // theme
+  const { resolvedTheme } = useNextTheme();
+
+  if (!isNewUserPopup) return <></>;
+  return (
+    <div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
+      <div className="flex gap-4">
+        <div className="grow">
+          <div className="text-14 font-semibold">Create workspace</div>
+          <div className="py-2 text-13 font-medium text-tertiary">
+            Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
+            workspace.
+          </div>
+          <div className="flex items-center gap-4 pt-2">
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              nativeButton={false}
+              render={<Link href="/workspace/create" />}
+              label="Create workspace"
+            />
+            <Button variant="secondary" size="md" stretch="auto" onClick={toggleNewUserPopup} label="Close" />
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center justify-center">
+          <img
+            src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
+            height={80}
+            width={80}
+            alt="Plane icon"
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

apps/admin/components/common/page-wrapper.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+
+type TPageWrapperProps = {
+  children: ReactNode;
+  header?: {
+    title: string;
+    description: string | ReactNode;
+    actions?: ReactNode;
+  };
+  customHeader?: ReactNode;
+  size?: "lg" | "md";
+};
+
+export const PageWrapper = (props: TPageWrapperProps) => {
+  const { children, header, customHeader, size = "md" } = props;
+
+  return (
+    <div
+      className={cn("mx-auto h-full w-full space-y-6 py-4", {
+        "max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
+        "px-4 lg:px-12": size === "lg",
+      })}
+    >
+      {customHeader ? (
+        <div className="mx-4 shrink-0 space-y-1 border-b border-subtle py-4">{customHeader}</div>
+      ) : (
+        header && (
+          <div className="mx-4 flex shrink-0 items-center justify-between gap-4 space-y-1 border-b border-subtle py-4">
+            <div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
+              <div className="text-h5-semibold text-primary">{header.title}</div>
+              <div className="text-body-sm-regular text-secondary">{header.description}</div>
+            </div>
+            {header.actions && <div className="shrink-0">{header.actions}</div>}
+          </div>
+        )
+      )}
+      <div className="vertical-scrollbar scrollbar-sm flex-grow overflow-hidden overflow-y-scroll px-4 pb-4">
+        {children}
+      </div>
+    </div>
+  );
+};

apps/admin/components/common/password-strength-indicator.tsx

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickCircleOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { cn, getPasswordCriteria, getPasswordStrength } from "@plane/utils";
+
+interface StrengthInfo {
+  message: string;
+  textColor: string;
+  activeFragments: number;
+}
+
+/**
+ * Get strength information including message, color, and active fragments
+ */
+const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo => {
+  switch (strength) {
+    case E_PASSWORD_STRENGTH.EMPTY:
+      return {
+        message: "Please enter your password",
+        textColor: "text-primary",
+        activeFragments: 0,
+      };
+    case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
+      return {
+        message: "Password is too short",
+        textColor: "text-danger-primary",
+        activeFragments: 1,
+      };
+    case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
+      return {
+        message: "Password is weak",
+        textColor: "text-orange-500",
+        activeFragments: 2,
+      };
+    case E_PASSWORD_STRENGTH.STRENGTH_VALID:
+      return {
+        message: "Password is strong",
+        textColor: "text-success-primary",
+        activeFragments: 3,
+      };
+    default:
+      return {
+        message: "Please enter your password",
+        textColor: "text-primary",
+        activeFragments: 0,
+      };
+  }
+};
+
+/**
+ * Get fragment color based on position and active state
+ */
+const getFragmentColor = (fragmentIndex: number, activeFragments: number): string => {
+  if (fragmentIndex >= activeFragments) {
+    return "bg-layer-1";
+  }
+
+  switch (activeFragments) {
+    case 1:
+      return "bg-danger-primary";
+    case 2:
+      return "bg-orange-500";
+    case 3:
+      return "bg-success-primary";
+    default:
+      return "bg-layer-1";
+  }
+};
+
+export interface PasswordStrengthIndicatorProps {
+  password: string;
+  showCriteria?: boolean;
+  isFocused?: boolean;
+}
+
+export function PasswordStrengthIndicator({
+  password,
+  showCriteria = true,
+  isFocused = false,
+}: PasswordStrengthIndicatorProps) {
+  const strength = getPasswordStrength(password);
+  const criteria = getPasswordCriteria(password);
+  const strengthInfo = getStrengthInfo(strength);
+
+  const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
+
+  if ((!password && !showCriteria) || !isPasswordMeterVisible) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-3")}>
+      {/* Strength Indicator */}
+      <div className="space-y-2">
+        <div className="flex w-full gap-1 transition-all duration-300 ease-linear">
+          {[0, 1, 2].map((fragmentIndex) => (
+            <div
+              key={fragmentIndex}
+              className={cn(
+                "h-1 flex-1 rounded-xs transition-all duration-300 ease-in-out",
+                getFragmentColor(fragmentIndex, strengthInfo.activeFragments)
+              )}
+            />
+          ))}
+        </div>
+
+        {/* Strength Message */}
+        {password && <p className={cn("!text-13 font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
+      </div>
+
+      {/* Criteria list */}
+      {showCriteria && (
+        <div className="flex flex-wrap gap-2">
+          {criteria.map((criterion) => (
+            <div key={criterion.key} className="flex items-center gap-1.5">
+              <div className="flex items-center justify-center p-0.5">
+                <TickCircleOutline
+                  className={cn("h-3 w-3 flex-shrink-0", {
+                    "text-success-primary": criterion.isValid,
+                    "text-primary": !criterion.isValid,
+                  })}
+                />
+              </div>
+              <span
+                className={cn("!text-11", {
+                  "text-success-primary": criterion.isValid,
+                  "text-primary": !criterion.isValid,
+                })}
+              >
+                {criterion.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/admin/components/common/plane-lockup.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+// Plane logo lockup. Not part of @makeplane/propel's icon set, so it is kept as a local asset.
+
+type PlaneLockupProps = {
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  color?: string;
+};
+
+export function PlaneLockup({ width = "253", height = "53", className, color = "currentColor" }: PlaneLockupProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 253 53"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_27_76)">
+        <path
+          d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z"
+          fill={color}
+        />
+        <path
+          d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z"
+          fill={color}
+        />
+        <path
+          d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z"
+          fill={color}
+        />
+        <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill={color} />
+        <path
+          d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z"
+          fill={color}
+        />
+        <path
+          d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_27_76">
+          <rect width="252" height="53" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/admin/components/common/skeleton.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+// Loading-placeholder skeleton. @makeplane/propel has no skeleton component yet;
+// this matches the API the workspace @plane/propel skeleton exposed.
+
+type SkeletonProps = {
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+};
+
+function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
+  return (
+    <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
+function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
+  return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
+}
+
+const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
+
+SkeletonRoot.displayName = "plane-ui-skeleton";
+SkeletonItem.displayName = "plane-ui-skeleton-item";
+
+export { Skeleton };

apps/admin/components/instance/failure.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { Button } from "@makeplane/propel/components/button";
+// assets
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
+import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
+
+const handleRetry = () => {
+  window.location.reload();
+};
+
+export const InstanceFailureView = observer(function InstanceFailureView() {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  return (
+    <>
+      <AuthHeader />
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <div className="relative flex flex-col items-center justify-center space-y-4">
+            <img src={instanceImage} alt="Instance failure illustration" />
+            <h3 className="text-center text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+            <p className="text-center text-14 font-medium">
+              We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <Button variant="primary" size="md" stretch="auto" onClick={handleRetry} label="Retry" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
+      <span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,386 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// icons
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { AuthService } from "@plane/services";
+import { getPasswordStrength, validatePersonName, validateCompanyName } from "@plane/utils";
+// components
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import { PasswordStrengthIndicator } from "@/components/common/password-strength-indicator";
+import { Banner } from "../common/banner";
+import { FormHeader } from "./form-header";
+
+// service initialization
+const authService = new AuthService();
+
+// error codes
+enum EErrorCodes {
+  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
+  ADMIN_ALREADY_EXIST = "ADMIN_ALREADY_EXIST",
+  REQUIRED_EMAIL_PASSWORD_FIRST_NAME = "REQUIRED_EMAIL_PASSWORD_FIRST_NAME",
+  INVALID_EMAIL = "INVALID_EMAIL",
+  INVALID_PASSWORD = "INVALID_PASSWORD",
+  USER_ALREADY_EXISTS = "USER_ALREADY_EXISTS",
+}
+
+type TError = {
+  type: EErrorCodes | undefined;
+  message: string | undefined;
+};
+
+// form data
+type TFormData = {
+  first_name: string;
+  last_name: string;
+  email: string;
+  company_name: string;
+  password: string;
+  confirm_password?: string;
+  is_telemetry_enabled: boolean;
+};
+
+const defaultFromData: TFormData = {
+  first_name: "",
+  last_name: "",
+  email: "",
+  company_name: "",
+  password: "",
+  is_telemetry_enabled: true,
+};
+
+export function InstanceSetupForm() {
+  // search params
+  const searchParams = useSearchParams();
+  const firstNameParam = searchParams?.get("first_name") || undefined;
+  const lastNameParam = searchParams?.get("last_name") || undefined;
+  const companyParam = searchParams?.get("company") || undefined;
+  const emailParam = searchParams?.get("email") || undefined;
+  const isTelemetryEnabledParam = (searchParams?.get("is_telemetry_enabled") === "True" ? true : false) || true;
+  const errorCode = searchParams?.get("error_code") || undefined;
+  const errorMessage = searchParams?.get("error_message") || undefined;
+  // state
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
+    setFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  useEffect(() => {
+    if (firstNameParam) setFormData((prev) => ({ ...prev, first_name: firstNameParam }));
+    if (lastNameParam) setFormData((prev) => ({ ...prev, last_name: lastNameParam }));
+    if (companyParam) setFormData((prev) => ({ ...prev, company_name: companyParam }));
+    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
+    if (isTelemetryEnabledParam) setFormData((prev) => ({ ...prev, is_telemetry_enabled: isTelemetryEnabledParam }));
+  }, [firstNameParam, lastNameParam, companyParam, emailParam, isTelemetryEnabledParam]);
+
+  // derived values
+  const errorData: TError = useMemo(() => {
+    if (errorCode && errorMessage) {
+      switch (errorCode) {
+        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
+          return { type: EErrorCodes.INSTANCE_NOT_CONFIGURED, message: errorMessage };
+        case EErrorCodes.ADMIN_ALREADY_EXIST:
+          return { type: EErrorCodes.ADMIN_ALREADY_EXIST, message: errorMessage };
+        case EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME:
+          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME, message: errorMessage };
+        case EErrorCodes.INVALID_EMAIL:
+          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
+        case EErrorCodes.INVALID_PASSWORD:
+          return { type: EErrorCodes.INVALID_PASSWORD, message: errorMessage };
+        case EErrorCodes.USER_ALREADY_EXISTS:
+          return { type: EErrorCodes.USER_ALREADY_EXISTS, message: errorMessage };
+        default:
+          return { type: undefined, message: undefined };
+      }
+    } else return { type: undefined, message: undefined };
+  }, [errorCode, errorMessage]);
+
+  const isButtonDisabled = useMemo(
+    () =>
+      !isSubmitting &&
+      formData.first_name &&
+      formData.email &&
+      formData.password &&
+      getPasswordStrength(formData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
+      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 (
+    <>
+      <AuthHeader />
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <FormHeader
+            heading="Setup your Plane Instance"
+            subHeading="Post setup you will be able to manage this Plane instance."
+          />
+          {errorData.type &&
+            errorData?.message &&
+            ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+              <Banner type="error" message={errorData?.message} />
+            )}
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+            <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
+
+            <div className="flex flex-col items-center gap-4 sm:flex-row">
+              <div className="w-full space-y-1">
+                <label className="text-13 font-medium text-tertiary" htmlFor="first_name">
+                  First name <span className="text-danger-primary">*</span>
+                </label>
+                <InputGroup size="lg">
+                  <Input
+                    size="lg"
+                    id="first_name"
+                    name="first_name"
+                    type="text"
+                    placeholder="Wilber"
+                    value={formData.first_name}
+                    onChange={(e) => {
+                      const validation = validatePersonName(e.target.value);
+                      if (validation === true || e.target.value === "") {
+                        handleFormChange("first_name", e.target.value);
+                      }
+                    }}
+                    autoComplete="off"
+                    autoFocus
+                    maxLength={50}
+                  />
+                </InputGroup>
+              </div>
+              <div className="w-full space-y-1">
+                <label className="text-13 font-medium text-tertiary" htmlFor="last_name">
+                  Last name <span className="text-danger-primary">*</span>
+                </label>
+                <InputGroup size="lg">
+                  <Input
+                    size="lg"
+                    id="last_name"
+                    name="last_name"
+                    type="text"
+                    placeholder="Wright"
+                    value={formData.last_name}
+                    onChange={(e) => {
+                      const validation = validatePersonName(e.target.value);
+                      if (validation === true || e.target.value === "") {
+                        handleFormChange("last_name", e.target.value);
+                      }
+                    }}
+                    autoComplete="off"
+                    maxLength={50}
+                  />
+                </InputGroup>
+              </div>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
+                Email <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="name@company.com"
+                  value={formData.email}
+                  onChange={(e) => handleFormChange("email", e.target.value)}
+                  aria-invalid={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+                  autoComplete="off"
+                />
+              </InputGroup>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
+              )}
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="company_name">
+                Company name <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="company_name"
+                  name="company_name"
+                  type="text"
+                  placeholder="Company name"
+                  value={formData.company_name}
+                  onChange={(e) => {
+                    const validation = validateCompanyName(e.target.value, false);
+                    if (validation === true || e.target.value === "") {
+                      handleFormChange("company_name", e.target.value);
+                    }
+                  }}
+                  maxLength={80}
+                />
+              </InputGroup>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Set a password <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="password"
+                  name="password"
+                  type={showPassword.password ? "text" : "password"}
+                  placeholder="New password"
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  aria-invalid={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                  onFocus={() => setIsPasswordInputFocused(true)}
+                  onBlur={() => setIsPasswordInputFocused(false)}
+                  autoComplete="new-password"
+                />
+                {showPassword.password ? (
+                  <button
+                    type="button"
+                    aria-label="Hide password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <HideOutline className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    aria-label="Show password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <ShowOutline className="h-4 w-4" />
+                  </button>
+                )}
+              </InputGroup>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
+              )}
+              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
+                Confirm password <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  type={showPassword.retypePassword ? "text" : "password"}
+                  id="confirm_password"
+                  name="confirm_password"
+                  value={formData.confirm_password}
+                  onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                  placeholder="Confirm password"
+                  onFocus={() => setIsRetryPasswordInputFocused(true)}
+                  onBlur={() => setIsRetryPasswordInputFocused(false)}
+                  autoComplete="new-password"
+                />
+                {showPassword.retypePassword ? (
+                  <button
+                    type="button"
+                    aria-label="Hide password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <HideOutline className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    aria-label="Show password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <ShowOutline className="h-4 w-4" />
+                  </button>
+                )}
+              </InputGroup>
+              {!!formData.confirm_password &&
+                formData.password !== formData.confirm_password &&
+                renderPasswordMatchError && (
+                  <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
+                )}
+            </div>
+
+            <div className="relative flex gap-2">
+              <div>
+                <Checkbox
+                  id="is_telemetry_enabled"
+                  aria-label="Allow Plane to anonymously collect usage events"
+                  onCheckedChange={(checked) => handleFormChange("is_telemetry_enabled", checked)}
+                  checked={formData.is_telemetry_enabled}
+                />
+              </div>
+              <label className="cursor-pointer text-13 font-medium text-tertiary" htmlFor="is_telemetry_enabled">
+                Allow Plane to anonymously collect usage events.{" "}
+                <a
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:text-blue-600 flex-shrink-0 text-13 font-medium"
+                >
+                  See More
+                </a>
+              </label>
+            </div>
+
+            <div className="py-2">
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                stretch="full"
+                disabled={isButtonDisabled}
+                loading={isSubmitting}
+                label="Continue"
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/components/workspace/list-item.tsx

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// plane internal packages
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { NewTabOutline } from "@makeplane/propel/icons";
+import { WEB_BASE_URL } from "@plane/constants";
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+
+type TWorkspaceListItemProps = {
+  workspaceId: string;
+};
+
+export const WorkspaceListItem = observer(function WorkspaceListItem({ workspaceId }: TWorkspaceListItemProps) {
+  // store hooks
+  const { getWorkspaceById } = useWorkspace();
+  // derived values
+  const workspace = getWorkspaceById(workspaceId);
+
+  if (!workspace) return null;
+  return (
+    <a
+      key={workspaceId}
+      href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
+      target="_blank"
+      className="group flex items-center justify-between gap-2.5 truncate rounded-lg border border-subtle bg-layer-1 p-3 hover:border-subtle-1 hover:bg-layer-1-hover hover:shadow-raised-100"
+      rel="noreferrer"
+    >
+      <div className="flex items-start gap-4">
+        <span
+          className={`relative mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
+            !workspace?.logo_url && "rounded-lg bg-accent-primary text-on-color"
+          }`}
+        >
+          {workspace?.logo_url && workspace.logo_url !== "" ? (
+            <img
+              src={getFileURL(workspace.logo_url)}
+              className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
+              alt="Workspace Logo"
+            />
+          ) : (
+            (workspace?.name?.[0] ?? "...")
+          )}
+        </span>
+        <div className="flex flex-col items-start gap-1">
+          <div className="flex w-full flex-wrap items-center gap-2.5">
+            <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
+            <Tooltip label="The unique URL of your workspace">
+              <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
+            </Tooltip>
+          </div>
+          {workspace.owner.email && (
+            <div className="flex items-center gap-1 text-11">
+              <h3 className="font-medium text-secondary">Owned by:</h3>
+              <h4 className="text-tertiary">{workspace.owner.email}</h4>
+            </div>
+          )}
+          <div className="flex items-center gap-2.5 text-11">
+            {workspace.total_projects !== null && (
+              <span className="flex items-center gap-1">
+                <h3 className="font-medium text-secondary">Total projects:</h3>
+                <h4 className="text-tertiary">{workspace.total_projects}</h4>
+              </span>
+            )}
+            {workspace.total_members !== null && (
+              <>
+                •
+                <span className="flex items-center gap-1">
+                  <h3 className="font-medium text-secondary">Total members:</h3>
+                  <h4 className="text-tertiary">{workspace.total_members}</h4>
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex-shrink-0">
+        <NewTabOutline width={14} height={16} className="text-placeholder group-hover:text-secondary" />
+      </div>
+    </a>
+  );
+});

apps/admin/helpers/authentication.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  IFormattedInstanceConfiguration,
+  TInstanceAuthenticationModes,
+  TInstanceConfigurationKeys,
+} from "@plane/types";
+
+/**
+ * Checks if a given authentication method can be disabled.
+ * @param configKey - The configuration key to check.
+ * @param authModes - The authentication modes to check.
+ * @param formattedConfig - The formatted configuration to check.
+ * @returns True if the authentication method can be disabled, false otherwise.
+ */
+export const canDisableAuthMethod = (
+  configKey: TInstanceConfigurationKeys,
+  authModes: TInstanceAuthenticationModes[],
+  formattedConfig: IFormattedInstanceConfiguration | undefined
+): boolean => {
+  // Count currently enabled methods
+  const enabledCount = authModes.reduce((count, method) => {
+    const enabledKey = method.enabledConfigKey;
+    if (!enabledKey || !formattedConfig) return count;
+    const isEnabled = Boolean(parseInt(formattedConfig[enabledKey] ?? "0"));
+    return isEnabled ? count + 1 : count;
+  }, 0);
+
+  // If trying to disable and only 1 method is enabled, prevent it
+  const isCurrentlyEnabled = Boolean(parseInt(formattedConfig?.[configKey] ?? "0"));
+  return !(isCurrentlyEnabled && enabledCount === 1);
+};

apps/admin/hooks/oauth/core.tsx

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { KeyOutline, MailOutline } from "@makeplane/propel/icons";
+// types
+import type {
+  TCoreInstanceAuthenticationModeKeys,
+  TGetBaseAuthenticationModeProps,
+  TInstanceAuthenticationModes,
+} from "@plane/types";
+// assets
+import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
+import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
+import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
+import gitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import googleLogo from "@/app/assets/logos/google-logo.svg?url";
+// components
+import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
+import { GiteaConfiguration } from "@/components/authentication/gitea-config";
+import { GithubConfiguration } from "@/components/authentication/github-config";
+import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
+import { GoogleConfiguration } from "@/components/authentication/google-config";
+import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
+
+// Authentication methods
+export const getCoreAuthenticationModesMap: (
+  props: TGetBaseAuthenticationModeProps
+) => Record<TCoreInstanceAuthenticationModeKeys, TInstanceAuthenticationModes> = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => ({
+  "unique-codes": {
+    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: <MailOutline className="h-6 w-6 p-0.5 text-tertiary" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "ENABLE_MAGIC_LINK_LOGIN",
+  },
+  "passwords-login": {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyOutline className="h-6 w-6 p-0.5 text-tertiary" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "ENABLE_EMAIL_PASSWORD",
+  },
+  google: {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <img src={googleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GOOGLE_ENABLED",
+  },
+  github: {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <img
+        src={resolvedTheme === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GITHUB_ENABLED",
+  },
+  gitlab: {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <img src={gitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GITLAB_ENABLED",
+  },
+  gitea: {
+    key: "gitea",
+    name: "Gitea",
+    description: "Allow members to log in or sign up to plane with their Gitea accounts.",
+    icon: <img src={giteaLogo} height={20} width={20} alt="Gitea Logo" />,
+    config: <GiteaConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GITEA_ENABLED",
+  },
+});

apps/admin/hooks/oauth/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TInstanceAuthenticationModes } from "@plane/types";
+import { getCoreAuthenticationModesMap } from "./core";
+import type { TGetAuthenticationModeProps } from "./types";
+
+export const useAuthenticationModes = (props: TGetAuthenticationModeProps): TInstanceAuthenticationModes[] => {
+  // derived values
+  const authenticationModes = getCoreAuthenticationModesMap(props);
+
+  const availableAuthenticationModes: TInstanceAuthenticationModes[] = [
+    authenticationModes["unique-codes"],
+    authenticationModes["passwords-login"],
+    authenticationModes["google"],
+    authenticationModes["github"],
+    authenticationModes["gitlab"],
+    authenticationModes["gitea"],
+  ];
+
+  return availableAuthenticationModes;
+};

apps/admin/hooks/oauth/types.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+
+export type TGetAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+  resolvedTheme: string | undefined;
+};

apps/admin/hooks/store/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-theme";
+export * from "./use-instance";
+export * from "./use-user";
+export * from "./use-workspace";

apps/admin/hooks/store/use-instance.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/providers/store-context";
+import type { IInstanceStore } from "@/store/instance.store";
+
+export const useInstance = (): IInstanceStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useInstance must be used within StoreProvider");
+  return context.instance;
+};

apps/admin/hooks/store/use-theme.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/providers/store-context";
+import type { IThemeStore } from "@/store/theme.store";
+
+export const useTheme = (): IThemeStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useTheme must be used within StoreProvider");
+  return context.theme;
+};

apps/admin/hooks/store/use-user.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/providers/store-context";
+import type { IUserStore } from "@/store/user.store";
+
+export const useUser = (): IUserStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUser must be used within StoreProvider");
+  return context.user;
+};

apps/admin/hooks/store/use-workspace.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/providers/store-context";
+import type { IWorkspaceStore } from "@/store/workspace.store";
+
+export const useWorkspace = (): IWorkspaceStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWorkspace must be used within StoreProvider");
+  return context.workspace;
+};