{children}
+
+
+
+ );
+});
+
+export default InstanceGithubAuthenticationPage;
diff --git a/admin/app/authentication/google/page.tsx b/admin/app/authentication/google/page.tsx
new file mode 100644
index 000000000..50275aea3
--- /dev/null
+++ b/admin/app/authentication/google/page.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { AuthenticationMethodCard, InstanceGoogleConfigForm } from "components/authentication";
+import { PageHeader } from "@/components/core";
+// hooks
+import { useInstance } from "@/hooks";
+// icons
+import GoogleLogo from "@/public/logos/google-logo.svg";
+
+const InstanceGoogleAuthenticationPage = observer(() => {
+ // store
+ const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+ // state
+ const [isSubmitting, setIsSubmitting] = useState
+ {
+ Boolean(parseInt(enableGithubConfig)) === true
+ ? updateConfig("IS_GITHUB_ENABLED", "0")
+ : updateConfig("IS_GITHUB_ENABLED", "1");
+ }}
+ size="sm"
+ disabled={isSubmitting || !formattedConfig}
+ />
+ }
+ disabled={isSubmitting || !formattedConfig}
+ withBorder={false}
+ />
+
+
+ {formattedConfig ? (
+
+
+ )}
+
+
+
+
+ );
+});
+
+export default InstanceGoogleAuthenticationPage;
diff --git a/admin/app/authentication/layout.tsx b/admin/app/authentication/layout.tsx
new file mode 100644
index 000000000..30082f442
--- /dev/null
+++ b/admin/app/authentication/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactNode } from "react";
+// layouts
+import { AuthLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+
+interface AuthenticationLayoutProps {
+ children: ReactNode;
+}
+
+const AuthenticationLayout = ({ children }: AuthenticationLayoutProps) => (
+
+ {
+ Boolean(parseInt(enableGoogleConfig)) === true
+ ? updateConfig("IS_GOOGLE_ENABLED", "0")
+ : updateConfig("IS_GOOGLE_ENABLED", "1");
+ }}
+ size="sm"
+ disabled={isSubmitting || !formattedConfig}
+ />
+ }
+ disabled={isSubmitting || !formattedConfig}
+ withBorder={false}
+ />
+
+
+ {formattedConfig ? (
+
+
+ )}
+
+
+
+
+ );
+});
+
+export default InstanceAuthenticationPage;
diff --git a/admin/app/email/layout.tsx b/admin/app/email/layout.tsx
new file mode 100644
index 000000000..f6881fcf3
--- /dev/null
+++ b/admin/app/email/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactNode } from "react";
+// layouts
+import { AuthLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+
+interface EmailLayoutProps {
+ children: ReactNode;
+}
+
+const EmailLayout = ({ children }: EmailLayoutProps) => (
+
+
+ Manage authentication for your instance
+
+ Configure authentication modes for your team and restrict sign ups to be invite only.
+
+
+ {formattedConfig ? (
+
+
+ )}
+
+
+
+ ) : (
+ Authentication modes
+ {authenticationMethodsCard.map((method) => (
+
+
+
+ );
+});
+
+export default InstanceEmailPage;
diff --git a/admin/app/general/layout.tsx b/admin/app/general/layout.tsx
new file mode 100644
index 000000000..2760c0cd3
--- /dev/null
+++ b/admin/app/general/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactNode } from "react";
+// layouts
+import { AuthLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+
+interface GeneralLayoutProps {
+ children: ReactNode;
+}
+
+const GeneralLayout = ({ children }: GeneralLayoutProps) => (
+
+
+ Secure emails from your own instance
+
+ Plane can send useful emails to you and your users from your own instance without talking to the Internet.
+
+
+ Set it up below and please test your settings before you save them.
+ Misconfigs can lead to email bounces and errors.
+
+
+ {formattedConfig ? (
+
+
+ )}
+
+
+
+
+ );
+});
+
+export default GeneralPage;
diff --git a/admin/app/globals.css b/admin/app/globals.css
new file mode 100644
index 000000000..4a7599d49
--- /dev/null
+++ b/admin/app/globals.css
@@ -0,0 +1,466 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+ .text-1\.5xl {
+ font-size: 1.375rem;
+ line-height: 1.875rem;
+ }
+
+ .text-2\.5xl {
+ font-size: 1.75rem;
+ line-height: 2.25rem;
+ }
+}
+
+@layer base {
+ html {
+ font-family: "Inter", sans-serif;
+ }
+
+ :root {
+ color-scheme: light !important;
+
+ --color-primary-10: 236, 241, 255;
+ --color-primary-20: 217, 228, 255;
+ --color-primary-30: 197, 214, 255;
+ --color-primary-40: 178, 200, 255;
+ --color-primary-50: 159, 187, 255;
+ --color-primary-60: 140, 173, 255;
+ --color-primary-70: 121, 159, 255;
+ --color-primary-80: 101, 145, 255;
+ --color-primary-90: 82, 132, 255;
+ --color-primary-100: 63, 118, 255;
+ --color-primary-200: 57, 106, 230;
+ --color-primary-300: 50, 94, 204;
+ --color-primary-400: 44, 83, 179;
+ --color-primary-500: 38, 71, 153;
+ --color-primary-600: 32, 59, 128;
+ --color-primary-700: 25, 47, 102;
+ --color-primary-800: 19, 35, 76;
+ --color-primary-900: 13, 24, 51;
+
+ --color-background-100: 255, 255, 255; /* primary bg */
+ --color-background-90: 250, 250, 250; /* secondary bg */
+ --color-background-80: 245, 245, 245; /* tertiary bg */
+
+ --color-text-100: 23, 23, 23; /* primary text */
+ --color-text-200: 58, 58, 58; /* secondary text */
+ --color-text-300: 82, 82, 82; /* tertiary text */
+ --color-text-400: 163, 163, 163; /* placeholder text */
+
+ --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+ --color-border-100: 245, 245, 245; /* subtle border= 1 */
+ --color-border-200: 229, 229, 229; /* subtle border- 2 */
+ --color-border-300: 212, 212, 212; /* strong border- 1 */
+ --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+ --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06),
+ 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+ 0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+ --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16),
+ 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+ 0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+ --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01),
+ 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+ --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1),
+ 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+ 0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+ --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12),
+ 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+ 0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+ --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12),
+ 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+ 0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+ --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16),
+ 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+ 0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+ --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+ 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+ 0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+ --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12),
+ 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+ 0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+ --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05),
+ 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+
+ --color-sidebar-background-100: var(
+ --color-background-100
+ ); /* primary sidebar bg */
+ --color-sidebar-background-90: var(
+ --color-background-90
+ ); /* secondary sidebar bg */
+ --color-sidebar-background-80: var(
+ --color-background-80
+ ); /* tertiary sidebar bg */
+
+ --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+ --color-sidebar-text-200: var(
+ --color-text-200
+ ); /* secondary sidebar text */
+ --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+ --color-sidebar-text-400: var(
+ --color-text-400
+ ); /* sidebar placeholder text */
+
+ --color-sidebar-border-100: var(
+ --color-border-100
+ ); /* subtle sidebar border= 1 */
+ --color-sidebar-border-200: var(
+ --color-border-100
+ ); /* subtle sidebar border- 2 */
+ --color-sidebar-border-300: var(
+ --color-border-100
+ ); /* strong sidebar border- 1 */
+ --color-sidebar-border-400: var(
+ --color-border-100
+ ); /* strong sidebar border- 2 */
+
+ --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+ --color-sidebar-shadow-xs: var(--color-shadow-xs);
+ --color-sidebar-shadow-sm: var(--color-shadow-sm);
+ --color-sidebar-shadow-rg: var(--color-shadow-rg);
+ --color-sidebar-shadow-md: var(--color-shadow-md);
+ --color-sidebar-shadow-lg: var(--color-shadow-lg);
+ --color-sidebar-shadow-xl: var(--color-shadow-xl);
+ --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+ --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+ --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
+ }
+
+ [data-theme="light"],
+ [data-theme="light-contrast"] {
+ color-scheme: light !important;
+
+ --color-background-100: 255, 255, 255; /* primary bg */
+ --color-background-90: 250, 250, 250; /* secondary bg */
+ --color-background-80: 245, 245, 245; /* tertiary bg */
+ }
+
+ [data-theme="light"] {
+ --color-text-100: 23, 23, 23; /* primary text */
+ --color-text-200: 58, 58, 58; /* secondary text */
+ --color-text-300: 82, 82, 82; /* tertiary text */
+ --color-text-400: 163, 163, 163; /* placeholder text */
+
+ --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+ --color-border-100: 245, 245, 245; /* subtle border= 1 */
+ --color-border-200: 229, 229, 229; /* subtle border- 2 */
+ --color-border-300: 212, 212, 212; /* strong border- 1 */
+ --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+ /* onboarding colors */
+ --gradient-onboarding-100: linear-gradient(
+ 106deg,
+ #f2f6ff 29.8%,
+ #e1eaff 99.34%
+ );
+ --gradient-onboarding-200: linear-gradient(
+ 129deg,
+ rgba(255, 255, 255, 0) -22.23%,
+ rgba(255, 255, 255, 0.8) 62.98%
+ );
+ --gradient-onboarding-300: linear-gradient(
+ 164deg,
+ #fff 4.25%,
+ rgba(255, 255, 255, 0.06) 93.5%
+ );
+ --gradient-onboarding-400: linear-gradient(
+ 129deg,
+ rgba(255, 255, 255, 0) -22.23%,
+ rgba(255, 255, 255, 0.8) 62.98%
+ );
+
+ --color-onboarding-text-100: 23, 23, 23;
+ --color-onboarding-text-200: 58, 58, 58;
+ --color-onboarding-text-300: 82, 82, 82;
+ --color-onboarding-text-400: 163, 163, 163;
+
+ --color-onboarding-background-100: 236, 241, 255;
+ --color-onboarding-background-200: 255, 255, 255;
+ --color-onboarding-background-300: 236, 241, 255;
+ --color-onboarding-background-400: 177, 206, 250;
+
+ --color-onboarding-border-100: 229, 229, 229;
+ --color-onboarding-border-200: 217, 228, 255;
+ --color-onboarding-border-300: 229, 229, 229, 0.5;
+
+ --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
+
+ /* toast theme */
+ --color-toast-success-text: 62, 155, 79;
+ --color-toast-error-text: 220, 62, 66;
+ --color-toast-warning-text: 255, 186, 24;
+ --color-toast-info-text: 51, 88, 212;
+ --color-toast-loading-text: 28, 32, 36;
+ --color-toast-secondary-text: 128, 131, 141;
+ --color-toast-tertiary-text: 96, 100, 108;
+
+ --color-toast-success-background: 253, 253, 254;
+ --color-toast-error-background: 255, 252, 252;
+ --color-toast-warning-background: 254, 253, 251;
+ --color-toast-info-background: 253, 253, 254;
+ --color-toast-loading-background: 253, 253, 254;
+
+ --color-toast-success-border: 218, 241, 219;
+ --color-toast-error-border: 255, 219, 220;
+ --color-toast-warning-border: 255, 247, 194;
+ --color-toast-info-border: 210, 222, 255;
+ --color-toast-loading-border: 224, 225, 230;
+ }
+
+ [data-theme="light-contrast"] {
+ --color-text-100: 11, 11, 11; /* primary text */
+ --color-text-200: 38, 38, 38; /* secondary text */
+ --color-text-300: 58, 58, 58; /* tertiary text */
+ --color-text-400: 115, 115, 115; /* placeholder text */
+
+ --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+ --color-border-100: 34, 34, 34; /* subtle border= 1 */
+ --color-border-200: 38, 38, 38; /* subtle border- 2 */
+ --color-border-300: 46, 46, 46; /* strong border- 1 */
+ --color-border-400: 58, 58, 58; /* strong border- 2 */
+ }
+
+ [data-theme="dark"],
+ [data-theme="dark-contrast"] {
+ color-scheme: dark !important;
+
+ --color-background-100: 7, 7, 7; /* primary bg */
+ --color-background-90: 11, 11, 11; /* secondary bg */
+ --color-background-80: 23, 23, 23; /* tertiary bg */
+
+ --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15),
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+ --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2),
+ 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+ --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2),
+ 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+ --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2),
+ 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+ --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2),
+ 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+ --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25),
+ 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+ --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25),
+ 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+ --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25),
+ 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+ --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3),
+ 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+ }
+
+ [data-theme="dark"] {
+ --color-text-100: 229, 229, 229; /* primary text */
+ --color-text-200: 163, 163, 163; /* secondary text */
+ --color-text-300: 115, 115, 115; /* tertiary text */
+ --color-text-400: 82, 82, 82; /* placeholder text */
+
+ --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
+
+ --color-border-100: 34, 34, 34; /* subtle border= 1 */
+ --color-border-200: 38, 38, 38; /* subtle border- 2 */
+ --color-border-300: 46, 46, 46; /* strong border- 1 */
+ --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+ /* onboarding colors */
+ --gradient-onboarding-100: linear-gradient(
+ 106deg,
+ #18191b 25.17%,
+ #18191b 99.34%
+ );
+ --gradient-onboarding-200: linear-gradient(
+ 129deg,
+ rgba(47, 49, 53, 0.8) -22.23%,
+ rgba(33, 34, 37, 0.8) 62.98%
+ );
+ --gradient-onboarding-300: linear-gradient(
+ 167deg,
+ rgba(47, 49, 53, 0.45) 19.22%,
+ #212225 98.48%
+ );
+
+ --color-onboarding-text-100: 237, 238, 240;
+ --color-onboarding-text-200: 176, 180, 187;
+ --color-onboarding-text-300: 118, 123, 132;
+ --color-onboarding-text-400: 105, 110, 119;
+
+ --color-onboarding-background-100: 54, 58, 64;
+ --color-onboarding-background-200: 40, 42, 45;
+ --color-onboarding-background-300: 40, 42, 45;
+ --color-onboarding-background-400: 67, 72, 79;
+
+ --color-onboarding-border-100: 54, 58, 64;
+ --color-onboarding-border-200: 54, 58, 64;
+ --color-onboarding-border-300: 34, 35, 38, 0.5;
+
+ --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
+
+ /* toast theme */
+ --color-toast-success-text: 178, 221, 181;
+ --color-toast-error-text: 206, 44, 49;
+ --color-toast-warning-text: 255, 186, 24;
+ --color-toast-info-text: 141, 164, 239;
+ --color-toast-loading-text: 255, 255, 255;
+ --color-toast-secondary-text: 185, 187, 198;
+ --color-toast-tertiary-text: 139, 141, 152;
+
+ --color-toast-success-background: 46, 46, 46;
+ --color-toast-error-background: 46, 46, 46;
+ --color-toast-warning-background: 46, 46, 46;
+ --color-toast-info-background: 46, 46, 46;
+ --color-toast-loading-background: 46, 46, 46;
+
+ --color-toast-success-border: 42, 126, 59;
+ --color-toast-error-border: 100, 23, 35;
+ --color-toast-warning-border: 79, 52, 34;
+ --color-toast-info-border: 58, 91, 199;
+ --color-toast-loading-border: 96, 100, 108;
+ }
+
+ [data-theme="dark-contrast"] {
+ --color-text-100: 250, 250, 250; /* primary text */
+ --color-text-200: 241, 241, 241; /* secondary text */
+ --color-text-300: 212, 212, 212; /* tertiary text */
+ --color-text-400: 115, 115, 115; /* placeholder text */
+
+ --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+ --color-border-100: 245, 245, 245; /* subtle border= 1 */
+ --color-border-200: 229, 229, 229; /* subtle border- 2 */
+ --color-border-300: 212, 212, 212; /* strong border- 1 */
+ --color-border-400: 185, 185, 185; /* strong border- 2 */
+ }
+
+ [data-theme="light"],
+ [data-theme="dark"],
+ [data-theme="light-contrast"],
+ [data-theme="dark-contrast"] {
+ --color-primary-10: 236, 241, 255;
+ --color-primary-20: 217, 228, 255;
+ --color-primary-30: 197, 214, 255;
+ --color-primary-40: 178, 200, 255;
+ --color-primary-50: 159, 187, 255;
+ --color-primary-60: 140, 173, 255;
+ --color-primary-70: 121, 159, 255;
+ --color-primary-80: 101, 145, 255;
+ --color-primary-90: 82, 132, 255;
+ --color-primary-100: 63, 118, 255;
+ --color-primary-200: 57, 106, 230;
+ --color-primary-300: 50, 94, 204;
+ --color-primary-400: 44, 83, 179;
+ --color-primary-500: 38, 71, 153;
+ --color-primary-600: 32, 59, 128;
+ --color-primary-700: 25, 47, 102;
+ --color-primary-800: 19, 35, 76;
+ --color-primary-900: 13, 24, 51;
+
+ --color-sidebar-background-100: var(
+ --color-background-100
+ ); /* primary sidebar bg */
+ --color-sidebar-background-90: var(
+ --color-background-90
+ ); /* secondary sidebar bg */
+ --color-sidebar-background-80: var(
+ --color-background-80
+ ); /* tertiary sidebar bg */
+
+ --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+ --color-sidebar-text-200: var(
+ --color-text-200
+ ); /* secondary sidebar text */
+ --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+ --color-sidebar-text-400: var(
+ --color-text-400
+ ); /* sidebar placeholder text */
+
+ --color-sidebar-border-100: var(
+ --color-border-100
+ ); /* subtle sidebar border= 1 */
+ --color-sidebar-border-200: var(
+ --color-border-200
+ ); /* subtle sidebar border- 2 */
+ --color-sidebar-border-300: var(
+ --color-border-300
+ ); /* strong sidebar border- 1 */
+ --color-sidebar-border-400: var(
+ --color-border-400
+ ); /* strong sidebar border- 2 */
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ font-variant-ligatures: none;
+ -webkit-font-variant-ligatures: none;
+ text-rendering: optimizeLegibility;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ color: rgba(var(--color-text-100));
+}
+
+/* scrollbar style */
+::-webkit-scrollbar {
+ display: none;
+}
+
+.horizontal-scroll-enable {
+ overflow-x: scroll;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar {
+ display: block;
+ height: 7px;
+ width: 0;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+ height: 7px;
+ background-color: rgba(var(--color-background-100));
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: rgba(var(--color-scrollbar));
+}
+
+.vertical-scroll-enable::-webkit-scrollbar {
+ display: block;
+ width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-track {
+ width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: rgba(var(--color-background-90));
+}
+/* end scrollbar style */
+
+/* progress bar */
+.progress-bar {
+ fill: currentColor;
+ color: rgba(var(--color-sidebar-background-100));
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+ color: rgb(var(--color-text-400));
+}
diff --git a/admin/app/image/layout.tsx b/admin/app/image/layout.tsx
new file mode 100644
index 000000000..e00ccb07a
--- /dev/null
+++ b/admin/app/image/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactNode } from "react";
+// layouts
+import { AuthLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+
+interface ImageLayoutProps {
+ children: ReactNode;
+}
+
+const ImageLayout = ({ children }: ImageLayoutProps) => (
+
+
+ General settings
+
+ Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
+ instance.
+
+
+ {instance?.instance && instanceAdmins && instanceAdmins?.length > 0 && (
+
+
+
+
+ );
+});
+
+export default InstanceImagePage;
diff --git a/admin/app/layout.tsx b/admin/app/layout.tsx
new file mode 100644
index 000000000..41d142a83
--- /dev/null
+++ b/admin/app/layout.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ThemeProvider } from "next-themes";
+// lib
+import { StoreProvider } from "@/lib/store-context";
+import { AppWrapper } from "@/lib/wrappers";
+// styles
+import "./globals.css";
+
+interface RootLayoutProps {
+ children: ReactNode;
+}
+
+const RootLayout = ({ children, ...pageProps }: RootLayoutProps) => (
+
+
+
+
+ Third-party image libraries
+
+ Let your users search and choose images from third-party libraries
+
+
+ {formattedConfig ? (
+
+
+ )}
+
+
+
+ );
+};
diff --git a/admin/components/ai/index.ts b/admin/components/ai/index.ts
new file mode 100644
index 000000000..8c1763b76
--- /dev/null
+++ b/admin/components/ai/index.ts
@@ -0,0 +1 @@
+export * from "./ai-config-form";
\ No newline at end of file
diff --git a/admin/components/auth-header.tsx b/admin/components/auth-header.tsx
new file mode 100644
index 000000000..a356dfaa7
--- /dev/null
+++ b/admin/components/auth-header.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { FC } from "react";
+import { usePathname } from "next/navigation";
+// mobx
+import { observer } from "mobx-react-lite";
+// ui
+import { Settings } from "lucide-react";
+// icons
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "@/components/auth-sidebar";
+
+export const InstanceHeader: FC = observer(() => {
+ const pathName = usePathname();
+
+ const getHeaderTitle = (pathName: string) => {
+ switch (pathName) {
+ case "general":
+ return "General";
+ case "ai":
+ return "Artificial Intelligence";
+ case "email":
+ return "Email";
+ case "authentication":
+ return "Authentication";
+ case "image":
+ return "Image";
+ case "google":
+ return "Google";
+ case "github":
+ return "Github";
+ default:
+ return pathName.toUpperCase();
+ }
+ };
+
+ // 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: getHeaderTitle(segment),
+ href: currentUrl,
+ };
+ });
+ return breadcrumbItems;
+ };
+
+ const breadcrumbItems = generateBreadcrumbItems(pathName);
+
+ return (
+
+
+
+
+
+ OpenAI
+ If you use ChatGPT, this is for you.
+
+ {aiFormFields.map((field) => (
+
+
+
+
+
+
+
+ If you have a preferred AI models vendor, please get in touch with us.
+
+
+ );
+});
diff --git a/admin/components/auth-sidebar/help-section.tsx b/admin/components/auth-sidebar/help-section.tsx
new file mode 100644
index 000000000..b2cba645d
--- /dev/null
+++ b/admin/components/auth-sidebar/help-section.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { FC, useState, useRef } from "react";
+import { Transition } from "@headlessui/react";
+import Link from "next/link";
+import { FileText, HelpCircle, MoveLeft } from "lucide-react";
+// hooks
+import { useTheme } from "@/hooks";
+// icons
+import { DiscordIcon, GithubIcon } from "@plane/ui";
+// assets
+import packageJson from "package.json";
+
+const helpOptions = [
+ {
+ name: "Documentation",
+ href: "https://docs.plane.so/",
+ Icon: FileText,
+ },
+ {
+ name: "Join our Discord",
+ href: "https://discord.com/invite/A92xrEGCge",
+ Icon: DiscordIcon,
+ },
+ {
+ name: "Report a bug",
+ href: "https://github.com/makeplane/plane/issues/new/choose",
+ Icon: GithubIcon,
+ },
+];
+
+export const HelpSection: FC = () => {
+ // states
+ const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+ // store
+ const { isSidebarCollapsed, toggleSidebar } = useTheme();
+ // refs
+ const helpOptionsRef = useRef
+
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/admin/components/auth-sidebar/index.ts b/admin/components/auth-sidebar/index.ts
new file mode 100644
index 000000000..e800fe3c5
--- /dev/null
+++ b/admin/components/auth-sidebar/index.ts
@@ -0,0 +1,5 @@
+export * from "./root";
+export * from "./help-section";
+export * from "./sidebar-menu";
+export * from "./sidebar-dropdown";
+export * from "./sidebar-menu-hamburger-toogle";
diff --git a/admin/components/auth-sidebar/root.tsx b/admin/components/auth-sidebar/root.tsx
new file mode 100644
index 000000000..d29247431
--- /dev/null
+++ b/admin/components/auth-sidebar/root.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { FC, useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useTheme } from "@/hooks";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/auth-sidebar";
+
+export interface IInstanceSidebar {}
+
+export const InstanceSidebar: FC
+
+
+
+
+
+
+
+
+
+
+
+
+ {helpOptions.map(({ name, Icon, href }) => {
+ if (href)
+ return (
+
+
+
+
+
+ );
+ else
+ return (
+
+ );
+ })}
+
+
+ {name}
+ Version: v{packageJson.version}
+
+
+ );
+});
diff --git a/admin/components/auth-sidebar/sidebar-dropdown.tsx b/admin/components/auth-sidebar/sidebar-dropdown.tsx
new file mode 100644
index 000000000..66dbf95c3
--- /dev/null
+++ b/admin/components/auth-sidebar/sidebar-dropdown.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { Fragment } from "react";
+// import { useRouter } from "next/navigation";
+import { useTheme as useNextTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
+// import { mutate } from "swr";
+// components
+import { Menu, Transition } from "@headlessui/react";
+// icons
+import { LogOut, UserCog2, Palette } from "lucide-react";
+// hooks
+import { useTheme, useUser } from "@/hooks";
+
+// ui
+import { Avatar, TOAST_TYPE, setToast } from "@plane/ui";
+
+export const SidebarDropdown = observer(() => {
+ // store hooks
+ const { isSidebarCollapsed } = useTheme();
+ const { currentUser, signOut } = useUser();
+ // hooks
+ const { resolvedTheme, setTheme } = useNextTheme();
+
+ const handleSignOut = async () => {
+ await signOut().catch(() =>
+ setToast({
+ type: TOAST_TYPE.ERROR,
+ title: "Error!",
+ message: "Failed to sign out. Please try again.",
+ })
+ );
+ };
+
+ const handleThemeSwitch = () => {
+ const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+ setTheme(newTheme);
+ };
+
+ return (
+
+
+
+
+ );
+});
diff --git a/admin/components/auth-sidebar/sidebar-menu-hamburger-toogle.tsx b/admin/components/auth-sidebar/sidebar-menu-hamburger-toogle.tsx
new file mode 100644
index 000000000..ba00afa7f
--- /dev/null
+++ b/admin/components/auth-sidebar/sidebar-menu-hamburger-toogle.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useTheme } from "@/hooks";
+// icons
+import { Menu } from "lucide-react";
+
+export const SidebarHamburgerToggle: FC = observer(() => {
+ const { isSidebarCollapsed, toggleSidebar } = useTheme();
+ return (
+
+
+
+ {!isSidebarCollapsed && currentUser && (
+
+ )}
+
+
+
+
+
+ {!isSidebarCollapsed && (
+
+
+ )}
+ Instance admin
+ toggleSidebar(!isSidebarCollapsed)}
+ >
+
+
+ );
+});
diff --git a/admin/components/auth-sidebar/sidebar-menu.tsx b/admin/components/auth-sidebar/sidebar-menu.tsx
new file mode 100644
index 000000000..4aab04f80
--- /dev/null
+++ b/admin/components/auth-sidebar/sidebar-menu.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+import { Tooltip } from "@plane/ui";
+// hooks
+import { useTheme } from "@/hooks";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+const INSTANCE_ADMIN_LINKS = [
+ {
+ Icon: Cog,
+ name: "General",
+ description: "Identify your instances and get key details",
+ href: `/general/`,
+ },
+ {
+ Icon: Mail,
+ name: "Email",
+ description: "Set up emails to your users",
+ href: `/email/`,
+ },
+ {
+ Icon: Lock,
+ name: "Authentication",
+ description: "Configure authentication modes",
+ href: `/authentication/`,
+ },
+ {
+ Icon: BrainCog,
+ name: "Artificial intelligence",
+ description: "Configure your OpenAI creds",
+ href: `/ai/`,
+ },
+ {
+ Icon: Image,
+ name: "Images in Plane",
+ description: "Allow third-party image libraries",
+ href: `/image/`,
+ },
+];
+
+export const SidebarMenu = observer(() => {
+ // store hooks
+ const { isSidebarCollapsed, toggleSidebar } = useTheme();
+ // router
+ const pathName = usePathname();
+
+ const handleItemClick = () => {
+ if (window.innerWidth < 768) {
+ toggleSidebar(!isSidebarCollapsed);
+ }
+ };
+
+ return (
+
+ {INSTANCE_ADMIN_LINKS.map((item, index) => {
+ const isActive = item.href === pathName || pathName.includes(item.href);
+ return (
+
+
+ );
+});
diff --git a/admin/components/authentication/authentication-method-card.tsx b/admin/components/authentication/authentication-method-card.tsx
new file mode 100644
index 000000000..1346a730e
--- /dev/null
+++ b/admin/components/authentication/authentication-method-card.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { FC } from "react";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {
+ name: string;
+ description: string;
+ icon: JSX.Element;
+ config: JSX.Element;
+ disabled?: boolean;
+ withBorder?: boolean;
+};
+
+export const AuthenticationMethodCard: FC
+
+
+
+
+ );
+ })}
+
+ {
+
+
+ )}
+
+ {item.name}
+
+
+ {item.description}
+
+
+
+ );
+};
diff --git a/admin/components/authentication/email-codes/index.ts b/admin/components/authentication/email-codes/index.ts
new file mode 100644
index 000000000..50a9c47c0
--- /dev/null
+++ b/admin/components/authentication/email-codes/index.ts
@@ -0,0 +1 @@
+export * from "./root";
\ No newline at end of file
diff --git a/admin/components/authentication/email-codes/root.tsx b/admin/components/authentication/email-codes/root.tsx
new file mode 100644
index 000000000..0958b3c42
--- /dev/null
+++ b/admin/components/authentication/email-codes/root.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { ToggleSwitch } from "@plane/ui";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+
+type Props = {
+ disabled: boolean;
+ updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const EmailCodesConfiguration: React.FC
+
+
+
+ {icon}
+
+
+
+ {name}
+
+
+ {description}
+
+ {config}
+
+
+
+ );
+};
diff --git a/admin/components/authentication/github/index.ts b/admin/components/authentication/github/index.ts
new file mode 100644
index 000000000..e9e36e988
--- /dev/null
+++ b/admin/components/authentication/github/index.ts
@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./github-config-form";
\ No newline at end of file
diff --git a/admin/components/authentication/github/root.tsx b/admin/components/authentication/github/root.tsx
new file mode 100644
index 000000000..742462c3b
--- /dev/null
+++ b/admin/components/authentication/github/root.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {
+ disabled: boolean;
+ updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GithubConfiguration: React.FC
+
+
+
+ Configuration
+ {githubFormFields.map((field) => (
+
+
+
+
+
+ Go back
+
+
+
+
+
+
+ Service provider details
+ {githubCopyFields.map((field) => (
+
+
+ Edit
+
+ {
+ Boolean(parseInt(enableGithubConfig)) === true
+ ? updateConfig("IS_GITHUB_ENABLED", "0")
+ : updateConfig("IS_GITHUB_ENABLED", "1");
+ }}
+ size="sm"
+ disabled={disabled}
+ />
+
+ ) : (
+
+ + We will auto-generate this. Paste this into your Authorized JavaScript origins field. For this OAuth client{" "} + + here. + +
+ ), + }, + { + key: "Callback_URI", + label: "Callback URI", + url: `${originURL}/auth/google/callback/`, + description: ( ++ We will auto-generate this. Paste this into your Authorized Redirect URI field. For this OAuth client{" "} + + here. + +
+ ), + }, + ]; + + const onSubmit = async (formData: GoogleConfigFormValues) => { + const payload: Partial
+
+
+ );
+};
diff --git a/admin/components/authentication/google/index.ts b/admin/components/authentication/google/index.ts
new file mode 100644
index 000000000..d0d37f305
--- /dev/null
+++ b/admin/components/authentication/google/index.ts
@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./google-config-form";
\ No newline at end of file
diff --git a/admin/components/authentication/google/root.tsx b/admin/components/authentication/google/root.tsx
new file mode 100644
index 000000000..6b287476d
--- /dev/null
+++ b/admin/components/authentication/google/root.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {
+ disabled: boolean;
+ updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GoogleConfiguration: React.FC
+
+
+
+ Configuration
+ {googleFormFields.map((field) => (
+
+
+
+
+
+ Go back
+
+
+
+
+
+
+ Service provider details
+ {googleCopyFeilds.map((field) => (
+
+
+ Edit
+
+ {
+ Boolean(parseInt(enableGoogleConfig)) === true
+ ? updateConfig("IS_GOOGLE_ENABLED", "0")
+ : updateConfig("IS_GOOGLE_ENABLED", "1");
+ }}
+ size="sm"
+ disabled={disabled}
+ />
+
+ ) : (
+
+
+
+ );
+};
diff --git a/admin/components/common/breadcrumb-link.tsx b/admin/components/common/breadcrumb-link.tsx
new file mode 100644
index 000000000..dfa437231
--- /dev/null
+++ b/admin/components/common/breadcrumb-link.tsx
@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+ label?: string;
+ href?: string;
+ icon?: React.ReactNode | undefined;
+};
+
+export const BreadcrumbLink: React.FC
+
+
+ {type === "error" ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {message}
+
+ {href ? (
+
+ {icon && (
+
+ {icon}
+ )}
+ {label}
+
+ ) : (
+
+ {icon &&
+ )}
+ {icon}
}
+ {label}
+
+
+ );
+};
diff --git a/admin/components/common/copy-field.tsx b/admin/components/common/copy-field.tsx
new file mode 100644
index 000000000..d6368b6e9
--- /dev/null
+++ b/admin/components/common/copy-field.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// icons
+import { Copy } from "lucide-react";
+
+type Props = {
+ label: string;
+ url: string;
+ description: string | JSX.Element;
+};
+
+export type TCopyField = {
+ key: string;
+ label: string;
+ url: string;
+ description: string | JSX.Element;
+};
+
+export const CopyField: React.FC{label}
+
+ (
+
+ )}
+ />
+ {type === "password" &&
+ (showPassword ? (
+
+ ) : (
+
+ ))}
+
+ {description && (
+ {description}
+ )} +
+
+ );
+};
diff --git a/admin/components/common/index.ts b/admin/components/common/index.ts
new file mode 100644
index 000000000..97248b999
--- /dev/null
+++ b/admin/components/common/index.ts
@@ -0,0 +1,6 @@
+export * from "./breadcrumb-link";
+export * from "./confirm-discard-modal";
+export * from "./controller-input";
+export * from "./copy-field";
+export * from "./password-strength-meter";
+export * from "./banner";
diff --git a/admin/components/common/password-strength-meter.tsx b/admin/components/common/password-strength-meter.tsx
new file mode 100644
index 000000000..fabb186f9
--- /dev/null
+++ b/admin/components/common/password-strength-meter.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";
+// icons
+import { CircleCheck } from "lucide-react";
+
+type Props = {
+ password: string;
+};
+
+export const PasswordStrengthMeter: React.FC{label}
+ +{description}
+
+
+ );
+};
diff --git a/admin/components/core/index.ts b/admin/components/core/index.ts
new file mode 100644
index 000000000..d32aafe96
--- /dev/null
+++ b/admin/components/core/index.ts
@@ -0,0 +1 @@
+export * from "./page-header";
diff --git a/admin/components/core/page-header.tsx b/admin/components/core/page-header.tsx
new file mode 100644
index 000000000..5b64a8b02
--- /dev/null
+++ b/admin/components/core/page-header.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+
+type TPageHeader = {
+ title?: string;
+ description?: string;
+};
+
+export const PageHeader: React.FC
+ {bars.map((color, index) => (
+
+ ))}
+
+ {text}
+
+ {criteria.map((criterion, index) => (
+
+
+
+ ))}
+
+
+ );
+});
diff --git a/admin/components/email/email-config-form.tsx b/admin/components/email/email-config-form.tsx
new file mode 100644
index 000000000..12e01b92c
--- /dev/null
+++ b/admin/components/email/email-config-form.tsx
@@ -0,0 +1,160 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { Button, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ControllerInput, TControllerInputFormField } from "components/common";
+import { SendTestEmailModal } from "./send-test-email-modal";
+// types
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+
+type IInstanceEmailForm = {
+ config: IFormattedInstanceConfiguration;
+};
+
+type EmailFormValues = Record
+
+
+
+ Create workspace
+
+ Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
+ workspace, you will need to login again.
+
+
+
+ Create workspace
+
+
+
+
+
+
+
+ );
+};
diff --git a/admin/components/email/index.ts b/admin/components/email/index.ts
new file mode 100644
index 000000000..6ad74f4e8
--- /dev/null
+++ b/admin/components/email/index.ts
@@ -0,0 +1,2 @@
+export * from "./email-config-form";
+export * from "./send-test-email-modal";
diff --git a/admin/components/email/send-test-email-modal.tsx b/admin/components/email/send-test-email-modal.tsx
new file mode 100644
index 000000000..6e9f6d9d3
--- /dev/null
+++ b/admin/components/email/send-test-email-modal.tsx
@@ -0,0 +1,135 @@
+import React, { FC, useEffect, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, Input } from "@plane/ui";
+// services
+import { InstanceService } from "services/instance.service";
+
+type Props = {
+ isOpen: boolean;
+ handleClose: () => void;
+};
+
+enum ESendEmailSteps {
+ SEND_EMAIL = "SEND_EMAIL",
+ SUCCESS = "SUCCESS",
+ FAILED = "FAILED",
+}
+
+const instanceService = new InstanceService();
+
+export const SendTestEmailModal: FC
+ setIsSendTestEmailModalOpen(false)} />
+
+
+
+ {emailFormFields.map((field) => (
+
+
+
+
+
+
+
+
+ Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
+
+
+ Use this if your email domain supports TLS.
+
+
+ (
+ {
+ Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
+ }}
+ size="sm"
+ />
+ )}
+ />
+
+
+
+
+
+
+
+ );
+};
diff --git a/admin/components/general/index.ts b/admin/components/general/index.ts
new file mode 100644
index 000000000..18daed803
--- /dev/null
+++ b/admin/components/general/index.ts
@@ -0,0 +1 @@
+export * from "./general-form";
\ No newline at end of file
diff --git a/admin/components/image/image-config-form.tsx b/admin/components/image/image-config-form.tsx
new file mode 100644
index 000000000..722051878
--- /dev/null
+++ b/admin/components/image/image-config-form.tsx
@@ -0,0 +1,79 @@
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+// components
+import { ControllerInput } from "components/common";
+// hooks
+import { useInstance } from "@/hooks";
+
+type IInstanceImageConfigForm = {
+ config: IFormattedInstanceConfiguration;
+};
+
+type ImageConfigFormValues = Record
+
+
+ Instance details
+
+
+
+ Email
+ +
+
+
+
+ Instance ID
+ +
+
+
+ Telemetry
+
+
+
+
+
+
+
+
+
+
+
+ Allow Plane to collect anonymous usage events
+
+
+ We collect usage events without any PII to analyse and improve Plane.{" "}
+
+ Know more.
+
+
+
+ (
+
+
+
+
+
+
+ );
+};
diff --git a/admin/components/image/index.ts b/admin/components/image/index.ts
new file mode 100644
index 000000000..ad9b60a10
--- /dev/null
+++ b/admin/components/image/index.ts
@@ -0,0 +1 @@
+export * from "./image-config-form";
\ No newline at end of file
diff --git a/admin/components/instance/index.ts b/admin/components/instance/index.ts
new file mode 100644
index 000000000..373ba7057
--- /dev/null
+++ b/admin/components/instance/index.ts
@@ -0,0 +1 @@
+export * from "./instance-not-ready";
diff --git a/admin/components/instance/instance-not-ready.tsx b/admin/components/instance/instance-not-ready.tsx
new file mode 100644
index 000000000..067599021
--- /dev/null
+++ b/admin/components/instance/instance-not-ready.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "@plane/ui";
+// assets
+import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";
+
+export const InstanceNotReady: FC = () => (
+
+
+ You will find your access key in your Unsplash developer console.
+
+ Learn more.
+
+
+ }
+ placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+ error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
+ required
+ />
+
+
+
+
+
+
+
+);
diff --git a/admin/components/user-authentication-forms/index.ts b/admin/components/user-authentication-forms/index.ts
new file mode 100644
index 000000000..fcf3e7c9a
--- /dev/null
+++ b/admin/components/user-authentication-forms/index.ts
@@ -0,0 +1,2 @@
+export * from "./sign-up";
+export * from "./sign-in";
diff --git a/admin/components/user-authentication-forms/sign-in.tsx b/admin/components/user-authentication-forms/sign-in.tsx
new file mode 100644
index 000000000..ba0883c83
--- /dev/null
+++ b/admin/components/user-authentication-forms/sign-in.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// services
+import { AuthService } from "@/services/auth.service";
+// ui
+import { Button, Input } from "@plane/ui";
+// components
+import { Banner } from "components/common";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+
+// 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 const InstanceSignInForm: FC = (props) => {
+ const {} = props;
+ // 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
+
+
+
+
+ Welcome aboard Plane!
++ Get started by setting up your instance and workspace +
+
+
+
+
+
+
+
+ );
+};
diff --git a/admin/components/user-authentication-forms/sign-up.tsx b/admin/components/user-authentication-forms/sign-up.tsx
new file mode 100644
index 000000000..d700ce62c
--- /dev/null
+++ b/admin/components/user-authentication-forms/sign-up.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// services
+import { AuthService } from "@/services/auth.service";
+// ui
+import { Button, Checkbox, Input } from "@plane/ui";
+// components
+import { Banner, PasswordStrengthMeter } from "components/common";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";
+
+// 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;
+ is_telemetry_enabled: boolean;
+};
+
+const defaultFromData: TFormData = {
+ first_name: "",
+ last_name: "",
+ email: "",
+ company_name: "",
+ password: "",
+ is_telemetry_enabled: true,
+};
+
+export const InstanceSignUpForm: FC = (props) => {
+ const {} = props;
+ // 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(false);
+ const [csrfToken, setCsrfToken] = useState
+
+
+
+
+ {errorData.type && errorData?.message && Manage your Plane instance
+Configure instance-wide settings to secure your instance
+
+
+ );
+};
diff --git a/admin/constants/swr-config.ts b/admin/constants/swr-config.ts
new file mode 100644
index 000000000..38478fcea
--- /dev/null
+++ b/admin/constants/swr-config.ts
@@ -0,0 +1,8 @@
+export const SWR_CONFIG = {
+ refreshWhenHidden: false,
+ revalidateIfStale: false,
+ revalidateOnFocus: false,
+ revalidateOnMount: true,
+ refreshInterval: 600000,
+ errorRetryCount: 3,
+};
diff --git a/admin/helpers/common.helper.ts b/admin/helpers/common.helper.ts
new file mode 100644
index 000000000..3bf03024b
--- /dev/null
+++ b/admin/helpers/common.helper.ts
@@ -0,0 +1,9 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+
+export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
+ resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/admin/helpers/index.ts b/admin/helpers/index.ts
new file mode 100644
index 000000000..ae6aab829
--- /dev/null
+++ b/admin/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from "./instance.helper";
+export * from "./user.helper";
diff --git a/admin/helpers/instance.helper.ts b/admin/helpers/instance.helper.ts
new file mode 100644
index 000000000..f929b2211
--- /dev/null
+++ b/admin/helpers/instance.helper.ts
@@ -0,0 +1,9 @@
+export enum EInstanceStatus {
+ ERROR = "ERROR",
+ NOT_YET_READY = "NOT_YET_READY",
+}
+
+export type TInstanceStatus = {
+ status: EInstanceStatus | undefined;
+ data?: object;
+};
diff --git a/admin/helpers/password.helper.ts b/admin/helpers/password.helper.ts
new file mode 100644
index 000000000..8d80b3402
--- /dev/null
+++ b/admin/helpers/password.helper.ts
@@ -0,0 +1,16 @@
+import zxcvbn from "zxcvbn";
+
+export const isPasswordCriteriaMet = (password: string) => {
+ const criteria = [password.length >= 8, /[A-Z]/.test(password), /\d/.test(password), /[!@#$%^&*]/.test(password)];
+
+ return criteria.every((criterion) => criterion);
+};
+
+export const getPasswordStrength = (password: string) => {
+ if (password.length === 0) return 0;
+ if (password.length < 8) return 1;
+ if (!isPasswordCriteriaMet(password)) return 2;
+
+ const result = zxcvbn(password);
+ return result.score;
+};
diff --git a/admin/helpers/user.helper.ts b/admin/helpers/user.helper.ts
new file mode 100644
index 000000000..5c6a89a17
--- /dev/null
+++ b/admin/helpers/user.helper.ts
@@ -0,0 +1,21 @@
+export enum EAuthenticationPageType {
+ STATIC = "STATIC",
+ NOT_AUTHENTICATED = "NOT_AUTHENTICATED",
+ AUTHENTICATED = "AUTHENTICATED",
+}
+
+export enum EInstancePageType {
+ PRE_SETUP = "PRE_SETUP",
+ POST_SETUP = "POST_SETUP",
+}
+
+export enum EUserStatus {
+ ERROR = "ERROR",
+ AUTHENTICATION_NOT_DONE = "AUTHENTICATION_NOT_DONE",
+ NOT_YET_READY = "NOT_YET_READY",
+}
+
+export type TUserStatus = {
+ status: EUserStatus | undefined;
+ message?: string;
+};
diff --git a/admin/hooks/index.ts b/admin/hooks/index.ts
new file mode 100644
index 000000000..273970eda
--- /dev/null
+++ b/admin/hooks/index.ts
@@ -0,0 +1,6 @@
+export * from "./use-outside-click-detector";
+
+// store-hooks
+export * from "./store/use-theme";
+export * from "./store/use-instance";
+export * from "./store/use-user";
diff --git a/admin/hooks/store/use-instance.tsx b/admin/hooks/store/use-instance.tsx
new file mode 100644
index 000000000..92165e2bb
--- /dev/null
+++ b/admin/hooks/store/use-instance.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import { 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;
+};
diff --git a/admin/hooks/store/use-theme.tsx b/admin/hooks/store/use-theme.tsx
new file mode 100644
index 000000000..dc4f9dbf8
--- /dev/null
+++ b/admin/hooks/store/use-theme.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import { 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;
+};
diff --git a/admin/hooks/store/use-user.tsx b/admin/hooks/store/use-user.tsx
new file mode 100644
index 000000000..d1e114ae4
--- /dev/null
+++ b/admin/hooks/store/use-user.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import { 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;
+};
diff --git a/admin/hooks/use-outside-click-detector.tsx b/admin/hooks/use-outside-click-detector.tsx
new file mode 100644
index 000000000..b7b48c857
--- /dev/null
+++ b/admin/hooks/use-outside-click-detector.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+const useOutsideClickDetector = (ref: React.RefObject
+
+
+
+
+ {errorData.type &&
+ errorData?.message &&
+ ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+ Setup your Plane Instance
+Post setup you will be able to manage this Plane instance.
+
+
+
+
+ );
+};
diff --git a/admin/layouts/default-layout.tsx b/admin/layouts/default-layout.tsx
new file mode 100644
index 000000000..f60258cd6
--- /dev/null
+++ b/admin/layouts/default-layout.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// logo
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+
+type TDefaultLayout = {
+ children: ReactNode;
+};
+
+export const DefaultLayout: FC
+
+ );
+};
diff --git a/admin/layouts/index.ts b/admin/layouts/index.ts
new file mode 100644
index 000000000..bf6743bc1
--- /dev/null
+++ b/admin/layouts/index.ts
@@ -0,0 +1,2 @@
+export * from "./default-layout";
+export * from "./auth-layout";
diff --git a/admin/lib/store-context.tsx b/admin/lib/store-context.tsx
new file mode 100644
index 000000000..37bba1a71
--- /dev/null
+++ b/admin/lib/store-context.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactElement, createContext } from "react";
+// mobx store
+import { RootStore } from "@/store/root-store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext
+
+
+
+
+
+ {children}
+
+
+ );
+
+ if (userStatus && userStatus?.status === EUserStatus.ERROR)
+ return (
+
+ Something went wrong. please try again later
+
+ );
+
+ if ([EAuthenticationPageType.AUTHENTICATED, EAuthenticationPageType.NOT_AUTHENTICATED].includes(authType)) {
+ if (authType === EAuthenticationPageType.NOT_AUTHENTICATED) {
+ if (currentUser === undefined) return <>{children};
+ else redirect("/general/");
+ } else {
+ if (currentUser) return <>{children};
+ else {
+ if (instance?.instance?.is_setup_done) redirect("/login/");
+ else redirect("/setup/");
+ }
+ }
+ }
+
+ return <>{children};
+});
diff --git a/admin/lib/wrappers/index.ts b/admin/lib/wrappers/index.ts
new file mode 100644
index 000000000..81c379624
--- /dev/null
+++ b/admin/lib/wrappers/index.ts
@@ -0,0 +1,3 @@
+export * from "./app-wrapper";
+export * from "./instance-wrapper";
+export * from "./auth-wrapper";
diff --git a/admin/lib/wrappers/instance-wrapper.tsx b/admin/lib/wrappers/instance-wrapper.tsx
new file mode 100644
index 000000000..4edbcbde4
--- /dev/null
+++ b/admin/lib/wrappers/instance-wrapper.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { redirect, useSearchParams } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Spinner } from "@plane/ui";
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { InstanceNotReady } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks";
+// helpers
+import { EInstancePageType, EInstanceStatus } from "@/helpers";
+
+type TInstanceWrapper = {
+ children: ReactNode;
+ pageType?: EInstancePageType;
+};
+
+export const InstanceWrapper: FC
+
+ );
+
+ if (instanceStatus && instanceStatus?.status === EInstanceStatus.ERROR)
+ return (
+
+ Something went wrong. please try again later
+
+ );
+
+ if (instance?.instance?.is_setup_done === false && authEnabled === "1")
+ return (
+
+
{avatarsWithUpdatedProps.map((avatar, index) => (
{avatar}
@@ -64,9 +66,12 @@ export const AvatarGroup: React.FC = (props) => {
{maxAvatarsToRender < totalAvatars && (
= (props) => {
return (
= (props) => {
tabIndex={-1}
>
{src ? (
- 
+
) : (
{
variant?: TBadgeVariant;
@@ -31,7 +32,7 @@ const Badge = React.forwardRef((props, ref) => {
const buttonIconStyle = getIconStyling(size);
return (
-