Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-13 05:49:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove god-mode folder

Browse Source
This commit is contained in:
sriram veeraghanta
2024-05-16 05:14:49 +05:30
parent 0b389e8e81
commit cf76ea024d
96 changed files with 0 additions and 8296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
god-mode/.eslintrc.js
View File

@@ -1,14 +0,0 @@
module.exports = {
root: true,
extends: ["custom"],
parser: "@typescript-eslint/parser",
settings: {
"import/resolver": {
typescript: {},
node: {
moduleDirectory: ["node_modules", "."],
},
},
},
rules: {}
}

6
god-mode/.prettierignore
View File

@@ -1,6 +0,0 @@
.next
.vercel
.tubro
out/
dis/
build/

5
god-mode/.prettierrc
View File

@@ -1,5 +0,0 @@
{
"printWidth": 120,
"tabWidth": 2,
"trailingComma": "es5"
}

13
god-mode/Dockerfile.dev
View File

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

41
god-mode/Dockerfile.godmode
View File

@@ -1,41 +0,0 @@
FROM node:18-alpine AS builder
RUN apk add --no-cache libc6-compat
WORKDIR /app
RUN yarn global add turbo
COPY . .
RUN turbo prune --scope=god-mode --docker
FROM node:18-alpine AS installer
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY .gitignore .gitignore
COPY --from=builder /app/out/json/ .
COPY --from=builder /app/out/yarn.lock ./yarn.lock
RUN yarn install --network-timeout 500000
COPY --from=builder /app/out/full/ .
COPY turbo.json turbo.json
USER root
ARG NEXT_PUBLIC_API_BASE_URL=""
ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
RUN yarn turbo run build --filter=god-mode
FROM nginx:1.25.0-alpine AS runner
WORKDIR /app
ARG NEXT_PUBLIC_API_BASE_URL=""
ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
ENV NEXT_TELEMETRY_DISABLED 1
ENV TURBO_TELEMETRY_DISABLED 1
COPY --from=installer /app/god-mode/out /usr/share/nginx/html

56
god-mode/app/ai/page.tsx
View File

@@ -1,56 +0,0 @@
"use client";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader } from "@plane/ui";
// icons
import { Lightbulb } from "lucide-react";
// components
import { InstanceAIForm } from "components/ai";
const InstanceAIPage = observer(() => {
// store
const { fetchInstanceConfigurations, formattedConfig } = useInstance();
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
return (
<div className="flex flex-col gap-8">
<div className="mb-2 border-b border-custom-border-100 pb-3">
<div className="pb-1 text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
<div className="text-sm font-normal text-custom-text-300">
Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
</div>
</div>
{formattedConfig ? (
<>
<div>
<div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
<div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
</div>
<InstanceAIForm config={formattedConfig} />
<div className="my-2 flex">
<div className="flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
<Lightbulb height="14" width="14" />
<div>If you have a preferred AI models vendor, please get in touch with us.</div>
</div>
</div>
</>
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="40%" />
<div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
</div>
<Loader.Item height="50px" width="20%" />
</Loader>
)}
</div>
);
});
export default InstanceAIPage;

107
god-mode/app/authentication/github/page.tsx
View File

@@ -1,107 +0,0 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
// components
import { AuthenticationMethodCard, InstanceGithubConfigForm } from "components/authentication";
// icons
import githubLightModeImage from "/public/logos/github-black.png";
import githubDarkModeImage from "/public/logos/github-white.png";
// helpers
import { resolveGeneralTheme } from "helpers/common.helper";
const InstanceGithubAuthenticationPage = observer(() => {
// 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 ? "active" : "disabled"}.`,
},
error: {
title: "Error",
message: () => "Failed to save configuration",
},
});
await updateConfigPromise
.then(() => {
setIsSubmitting(false);
})
.catch((err) => {
console.error(err);
setIsSubmitting(false);
});
};
return (
<div className="flex flex-col gap-4 max-w-6xl pb-6 md:px-2">
<div className="flex items-center gap-4 mb-2 border-b border-custom-border-100 pb-3">
<AuthenticationMethodCard
name="Github"
description="Allow members to login or sign up to plane with their Github accounts."
icon={
<Image
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
height={24}
width={24}
alt="GitHub Logo"
/>
}
config={
<ToggleSwitch
value={Boolean(parseInt(enableGithubConfig))}
onChange={() => {
Boolean(parseInt(enableGithubConfig)) === true
? updateConfig("IS_GITHUB_ENABLED", "0")
: updateConfig("IS_GITHUB_ENABLED", "1");
}}
size="sm"
disabled={isSubmitting || !formattedConfig}
/>
}
disabled={isSubmitting || !formattedConfig}
withBorder={false}
/>
</div>
{formattedConfig ? (
<InstanceGithubConfigForm config={formattedConfig} />
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="50%" />
</Loader>
)}
</div>
);
});
export default InstanceGithubAuthenticationPage;

95
god-mode/app/authentication/google/page.tsx
View File

@@ -1,95 +0,0 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
// components
import { AuthenticationMethodCard, InstanceGoogleConfigForm } from "components/authentication";
// icons
import GoogleLogo from "/public/logos/google-logo.svg";
const InstanceGoogleAuthenticationPage = observer(() => {
// 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 ? "active" : "disabled"}.`,
},
error: {
title: "Error",
message: () => "Failed to save configuration",
},
});
await updateConfigPromise
.then(() => {
setIsSubmitting(false);
})
.catch((err) => {
console.error(err);
setIsSubmitting(false);
});
};
return (
<div className="flex flex-col gap-4 max-w-6xl pb-6 md:px-2">
<div className="flex items-center gap-4 mb-2 border-b border-custom-border-100 pb-3">
<AuthenticationMethodCard
name="Google"
description="Allow members to login or sign up to plane with their Google
accounts."
icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
config={
<ToggleSwitch
value={Boolean(parseInt(enableGoogleConfig))}
onChange={() => {
Boolean(parseInt(enableGoogleConfig)) === true
? updateConfig("IS_GOOGLE_ENABLED", "0")
: updateConfig("IS_GOOGLE_ENABLED", "1");
}}
size="sm"
disabled={isSubmitting || !formattedConfig}
/>
}
disabled={isSubmitting || !formattedConfig}
withBorder={false}
/>
</div>
{formattedConfig ? (
<InstanceGoogleConfigForm config={formattedConfig} />
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="50%" />
</Loader>
)}
</div>
);
});
export default InstanceGoogleAuthenticationPage;

95
god-mode/app/authentication/oidc/page.tsx
View File

@@ -1,95 +0,0 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
// components
import { AuthenticationMethodCard, InstanceOIDCConfigForm } from "components/authentication";
// icons
import OIDCLogo from "/public/logos/oidc-logo.png";
const InstanceOIDCAuthenticationPage = observer(() => {
// store
const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
// state
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
// config
const enableOIDCConfig = formattedConfig?.IS_OIDC_ENABLED ?? "";
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
const updateConfig = async (key: "IS_OIDC_ENABLED", value: string) => {
setIsSubmitting(true);
const payload = {
[key]: value,
};
const updateConfigPromise = updateInstanceConfigurations(payload);
setPromiseToast(updateConfigPromise, {
loading: "Saving Configuration...",
success: {
title: "Configuration saved",
message: () => `OIDC authentication is now ${value ? "active" : "disabled"}.`,
},
error: {
title: "Error",
message: () => "Failed to save configuration",
},
});
await updateConfigPromise
.then(() => {
setIsSubmitting(false);
})
.catch((err) => {
console.error(err);
setIsSubmitting(false);
});
};
return (
<div className="flex flex-col gap-4 max-w-6xl pb-6 md:px-2">
<div className="flex items-center gap-4 mb-2 border-b border-custom-border-100 pb-3">
<AuthenticationMethodCard
name="OIDC"
description="Authenticate your users via the OpenID connect protocol."
icon={<Image src={OIDCLogo} height={24} width={24} alt="OIDC Logo" />}
config={
<ToggleSwitch
value={Boolean(parseInt(enableOIDCConfig))}
onChange={() => {
Boolean(parseInt(enableOIDCConfig)) === true
? updateConfig("IS_OIDC_ENABLED", "0")
: updateConfig("IS_OIDC_ENABLED", "1");
}}
size="sm"
disabled={isSubmitting || !formattedConfig}
/>
}
disabled={isSubmitting || !formattedConfig}
withBorder={false}
/>
</div>
{formattedConfig ? (
<InstanceOIDCConfigForm config={formattedConfig} />
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="50%" />
</Loader>
)}
</div>
);
});
export default InstanceOIDCAuthenticationPage;

207
god-mode/app/authentication/page.tsx
View File

@@ -1,207 +0,0 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
// types
import { TInstanceConfigurationKeys } from "@plane/types";
// icons
import { Mails, KeyRound } from "lucide-react";
import GoogleLogo from "/public/logos/google-logo.svg";
import githubLightModeImage from "/public/logos/github-black.png";
import githubDarkModeImage from "/public/logos/github-white.png";
// icons - enterprise
import OIDCLogo from "/public/logos/oidc-logo.png";
import SAMLLogo from "/public/logos/saml-logo.svg";
// helpers
import { resolveGeneralTheme } from "helpers/common.helper";
// components
import {
AuthenticationMethodCard,
EmailCodesConfiguration,
PasswordLoginConfiguration,
GoogleConfiguration,
GithubConfiguration,
// enterprise
OIDCConfiguration,
SAMLConfiguration,
} from "components/authentication";
type TInstanceAuthenticationMethodCard = {
key: string;
name: string;
description: string;
icon: JSX.Element;
config: JSX.Element;
};
const InstanceAuthenticationPage = observer(() => {
// store
const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
// state
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
// theme
const { resolvedTheme } = useTheme();
// Sign-up config
const enableSignup = formattedConfig?.ENABLE_SIGNUP ?? "";
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);
});
};
// Authentication methods
const authenticationMethodsCard: TInstanceAuthenticationMethodCard[] = [
{
key: "email-codes",
name: "Email codes",
description: "Login or sign up using codes sent via emails. You need to have email setup here and enabled.",
icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
config: <EmailCodesConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
},
{
key: "password-login",
name: "Password based login",
description: "Allow members to create accounts with passwords for emails to sign in.",
icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
config: <PasswordLoginConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
},
{
key: "google",
name: "Google",
description: "Allow members to login or sign up to plane with their Google accounts.",
icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
config: <GoogleConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
},
{
key: "github",
name: "Github",
description: "Allow members to login or sign up to plane with their Github accounts.",
icon: (
<Image
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
height={20}
width={20}
alt="GitHub Logo"
/>
),
config: <GithubConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
},
];
// Enterprise authentication methods
authenticationMethodsCard.push(
{
key: "oidc",
name: "OIDC",
description: "Authenticate your users via the OpenID connect protocol.",
icon: <Image src={OIDCLogo} height={20} width={20} alt="OIDC Logo" />,
config: <OIDCConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
},
{
key: "saml",
name: "SAML",
description: "Authenticate your users via Security Assertion Markup Language protocol.",
icon: <Image src={SAMLLogo} height={24} width={24} alt="SAML Logo" className="pb-0.5 pl-0.5" />,
config: <SAMLConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
}
);
return (
<div className="flex max-w-6xl flex-col gap-4 pb-6">
<div className="mb-2 border-b border-custom-border-100 pb-3">
<div className="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
<div className="text-sm font-normal text-custom-text-300">
Configure authentication modes for your team and restrict sign ups to be invite only.
</div>
</div>
{formattedConfig ? (
<>
<div className="pt-2 text-lg font-medium">Sign-up configuration</div>
<div className="mr-4 flex items-center gap-14">
<div className="grow">
<div className="text-sm font-medium leading-5 text-custom-text-100">
Allow anyone to sign up without invite
</div>
<div className="text-xs font-normal leading-5 text-custom-text-300">
Toggling this off will disable self sign ups.
</div>
</div>
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
<ToggleSwitch
value={Boolean(parseInt(enableSignup))}
onChange={() => {
Boolean(parseInt(enableSignup)) === true
? updateConfig("ENABLE_SIGNUP", "0")
: updateConfig("ENABLE_SIGNUP", "1");
}}
size="sm"
disabled={isSubmitting}
/>
</div>
</div>
{/* Authentication modes */}
<div className="pt-8 text-lg font-medium">Authentication modes</div>
{authenticationMethodsCard.map((method) => (
<AuthenticationMethodCard
key={method.key}
name={method.name}
description={method.description}
icon={method.icon}
config={method.config}
disabled={isSubmitting}
/>
))}
</>
) : (
<Loader className="space-y-4">
<Loader.Item height="50px" width="50%" />
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
</Loader>
)}
</div>
);
});
export default InstanceAuthenticationPage;

95
god-mode/app/authentication/saml/page.tsx
View File

@@ -1,95 +0,0 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
// components
import { AuthenticationMethodCard, InstanceSAMLConfigForm } from "components/authentication";
// icons
import SAMLLogo from "/public/logos/saml-logo.svg";
const InstanceSAMLAuthenticationPage = observer(() => {
// store
const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
// state
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
// config
const enableSAMLConfig = formattedConfig?.IS_SAML_ENABLED ?? "";
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
const updateConfig = async (key: "IS_SAML_ENABLED", value: string) => {
setIsSubmitting(true);
const payload = {
[key]: value,
};
const updateConfigPromise = updateInstanceConfigurations(payload);
setPromiseToast(updateConfigPromise, {
loading: "Saving Configuration...",
success: {
title: "Configuration saved",
message: () => `SAML authentication is now ${value ? "active" : "disabled"}.`,
},
error: {
title: "Error",
message: () => "Failed to save configuration",
},
});
await updateConfigPromise
.then(() => {
setIsSubmitting(false);
})
.catch((err) => {
console.error(err);
setIsSubmitting(false);
});
};
return (
<div className="flex flex-col gap-4 max-w-6xl pb-6 md:px-2">
<div className="flex items-center gap-4 mb-2 border-b border-custom-border-100 pb-3">
<AuthenticationMethodCard
name="SAML"
description="Authenticate your users via Security Assertion Markup Language
protocol."
icon={<Image src={SAMLLogo} height={26} width={26} alt="SAML Logo" className="pb-1 pl-0.5" />}
config={
<ToggleSwitch
value={Boolean(parseInt(enableSAMLConfig))}
onChange={() => {
Boolean(parseInt(enableSAMLConfig)) === true
? updateConfig("IS_SAML_ENABLED", "0")
: updateConfig("IS_SAML_ENABLED", "1");
}}
size="sm"
disabled={isSubmitting || !formattedConfig}
/>
}
disabled={isSubmitting || !formattedConfig}
withBorder={false}
/>
</div>
{formattedConfig ? (
<InstanceSAMLConfigForm config={formattedConfig} />
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="50%" />
</Loader>
)}
</div>
);
});
export default InstanceSAMLAuthenticationPage;

61
god-mode/app/create-workspace-popup.tsx
View File

@@ -1,61 +0,0 @@
"use client";
import React from "react";
import { observer } from "mobx-react-lite";
import Link from "next/link";
import Image from "next/image";
import { useTheme } from "next-themes";
// ui
import { Button, getButtonStyling } from "@plane/ui";
// helpers
import { resolveGeneralTheme } from "helpers/common.helper";
// icons
import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
type Props = {
isOpen: boolean;
onClose?: () => void;
};
export const CreateWorkspacePopup: React.FC<Props> = observer((props) => {
const { isOpen, onClose } = props;
// theme
const { resolvedTheme } = useTheme();
const handleClose = () => {
onClose && onClose();
};
if (!isOpen) return null;
return (
<div className="absolute bottom-8 right-6 p-6 w-96 border border-custom-border-100 shadow-md rounded-xl bg-custom-background-100 z-20">
<div className="flex gap-4">
<div className="grow">
<div className="text-base font-semibold">Create workspace</div>
<div className="py-2 text-sm font-medium text-custom-text-300">
Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
workspace, you will need to login again.
</div>
<div className="flex items-center gap-4 pt-2">
<Link href="/create-workspace" className={getButtonStyling("primary", "sm")}>
Create workspace
</Link>
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
</div>
<div className="shrink-0 flex items-center justify-center">
<Image
src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
height={80}
width={80}
alt="Plane icon"
/>
</div>
</div>
</div>
);
});

45
god-mode/app/email/page.tsx
View File

@@ -1,45 +0,0 @@
"use client";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader } from "@plane/ui";
// components
import { InstanceEmailForm } from "components/email";
const InstanceEmailPage = observer(() => {
// store
const { fetchInstanceConfigurations, formattedConfig } = useInstance();
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
return (
<div className="flex flex-col gap-8">
<div className="mb-2 border-b border-custom-border-100 pb-3">
<div className="pb-1 text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
<div className="text-sm font-normal text-custom-text-300">
Plane can send useful emails to you and your users from your own instance without talking to the Internet.
</div>
<div className="text-sm font-normal text-custom-text-300">
Set it up below and please test your settings before you save them.{" "}
<span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
</div>
</div>
{formattedConfig ? (
<InstanceEmailForm config={formattedConfig} />
) : (
<Loader className="space-y-10">
<Loader.Item height="50px" width="75%" />
<Loader.Item height="50px" width="75%" />
<Loader.Item height="50px" width="40%" />
<Loader.Item height="50px" width="40%" />
<Loader.Item height="50px" width="20%" />
</Loader>
)}
</div>
);
});
export default InstanceEmailPage;

466
god-mode/app/globals.css
View File

@@ -1,466 +0,0 @@
@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));
}

88
god-mode/app/header.tsx
View File

@@ -1,88 +0,0 @@
"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/sidebar";
export const InstanceHeader: FC = observer(() => {
const pathName = usePathname();
const getHeaderTitle = (pathName: string) => {
switch (pathName) {
case "":
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.
let currentUrl = "";
const breadcrumbItems = pathSegments.map((segment) => {
currentUrl += "/" + segment;
return {
title: getHeaderTitle(segment),
href: currentUrl,
};
});
return breadcrumbItems;
};
const breadcrumbItems = generateBreadcrumbItems(pathName);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<SidebarHamburgerToggle />
{breadcrumbItems.length >= 0 && (
<div>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
link={
<BreadcrumbLink
href="/"
label="Settings"
icon={<Settings className="h-4 w-4 text-custom-text-300" />}
/>
}
/>
{breadcrumbItems.map(
(item) =>
item.title && (
<Breadcrumbs.BreadcrumbItem
key={item.title}
type="text"
link={<BreadcrumbLink href={item.href} label={item.title} />}
/>
)
)}
</Breadcrumbs>
</div>
)}
</div>
</div>
);
});

38
god-mode/app/image/page.tsx
View File

@@ -1,38 +0,0 @@
"use client";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Loader } from "@plane/ui";
// components
import { InstanceImageConfigForm } from "components/image";
const InstanceImagePage = observer(() => {
// store
const { fetchInstanceConfigurations, formattedConfig } = useInstance();
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
return (
<div className="flex flex-col gap-8">
<div className="mb-2 border-b border-custom-border-100 pb-3">
<div className="pb-1 text-xl font-medium text-custom-text-100">Third-party image libraries</div>
<div className="text-sm font-normal text-custom-text-300">
Let your users search and choose images from third-party libraries
</div>
</div>
{formattedConfig ? (
<InstanceImageConfigForm config={formattedConfig} />
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="50%" />
<Loader.Item height="50px" width="20%" />
</Loader>
)}
</div>
);
});
export default InstanceImagePage;

44
god-mode/app/layout.tsx
View File

@@ -1,44 +0,0 @@
// lib
// import { ThemeProvider } from "lib/theme-provider";
// import AppWrapper from "lib/wrappers/app-wrapper";
// import { UserAuthWrapper } from "lib/wrappers/user-auth-wrapper";
// components
// import { InstanceSidebar } from "./sidebar";
// import { InstanceHeader } from "./header";
import { DefaultLayout } from "@/layouts";
// styles
import "./globals.css";
export const metadata = {
title: "God Mode",
description: "You are god now.",
};
interface RootLayoutProps {
children: React.ReactNode;
}
export const RootLayout = async ({ children }: RootLayoutProps) => (
<html lang="en">
<body className={`antialiased`}>
<DefaultLayout>{children}</DefaultLayout>
{/* <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
<AppWrapper>
<UserAuthWrapper>
<div className="relative flex h-screen w-full overflow-hidden">
<InstanceSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
<InstanceHeader />
<div className="h-full w-full overflow-hidden px-10 py-6">
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
</div>
</main>
</div>
</UserAuthWrapper>
</AppWrapper>
</ThemeProvider> */}
</body>
</html>
);
export default RootLayout;

56
god-mode/app/page.tsx
View File

@@ -1,56 +0,0 @@
"use client";
import { observer } from "mobx-react-lite";
// import useSWR from "swr";
// hooks
// import useInstance from "hooks/use-instance";
// ui
// import { Loader } from "@plane/ui";
// components
// import { InstanceGeneralForm } from "components/general";
// import { PageHead } from "components/core";
import { InstanceSignInForm, InstanceSignUpForm } from "@/components/user-authentication-forms";
const GeneralSettingsPage = observer(() => {
// store
// const { instance, instanceAdmins, fetchInstanceInfo, fetchInstanceAdmins } = useInstance();
// fetching instance information
// useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
// fetching instance admins
// useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
console.log("init page");
return (
<>
{/* <PageHead title="God Mode - General Settings" /> */}
{/* <div className="flex h-full w-full max-w-6xl flex-col gap-4">
<div className="border-b border-custom-border-100 pb-3">
<div className="pb-1 text-xl font-medium text-custom-text-100">General settings</div>
<div className="text-sm font-normal text-custom-text-300">
Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
instance.
</div>
</div>
{instance && instanceAdmins ? (
<>
<div className="pt-2 text-lg font-medium">Instance details</div>
<InstanceGeneralForm instance={instance} instanceAdmins={instanceAdmins} />
</>
) : (
<Loader className="space-y-4">
<Loader.Item height="50px" width="40%" />
<Loader.Item height="50px" width="90%" />
<Loader.Item height="50px" width="90%" />
<Loader.Item height="50px" width="20%" />
</Loader>
)}
</div> */}
<InstanceSignInForm />
{/* <InstanceSignUpForm /> */}
</>
);
});
export default GeneralSettingsPage;

57
god-mode/app/sidebar.tsx
View File

@@ -1,57 +0,0 @@
"use client";
import { FC, useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
// hooks
import useAppTheme from "hooks/use-theme";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// components
import { HelpSection, SidebarMenu, SidebarDropdown } from "components/sidebar";
export interface IInstanceSidebar {}
export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
// store
const themeStore = useAppTheme();
const ref = useRef<HTMLDivElement>(null);
useOutsideClickDetector(ref, () => {
if (themeStore.sidebarCollapsed === false) {
if (window.innerWidth < 768) {
themeStore.toggleSidebar();
}
}
});
useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 768) {
themeStore.toggleSidebar(true);
}
};
handleResize();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [themeStore]);
return (
<div
className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
fixed md:relative
${themeStore.sidebarCollapsed ? "-ml-[280px]" : ""}
sm:${themeStore.sidebarCollapsed ? "-ml-[280px]" : ""}
md:ml-0 ${themeStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
lg:ml-0 ${themeStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
`}
>
<div ref={ref} className="flex h-full w-full flex-1 flex-col">
<SidebarDropdown />
<SidebarMenu />
<HelpSection />
</div>
</div>
);
});

124
god-mode/components/ai/ai-config-form.tsx
View File

@@ -1,124 +0,0 @@
import { FC } from "react";
import { useForm } from "react-hook-form";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { ControllerInput, TControllerInputFormField } from "components/common";
// types
import {
IFormattedInstanceConfiguration,
TInstanceAIConfigurationKeys,
} from "@plane/types";
type IInstanceAIForm = {
config: IFormattedInstanceConfiguration;
};
type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
const { config } = props;
// store
const { updateInstanceConfigurations } = useInstance();
// form data
const {
handleSubmit,
control,
formState: { errors, isSubmitting },
} = useForm<AIFormValues>({
defaultValues: {
OPENAI_API_KEY: config["OPENAI_API_KEY"],
GPT_ENGINE: config["GPT_ENGINE"],
},
});
const aiFormFields: TControllerInputFormField[] = [
{
key: "GPT_ENGINE",
type: "text",
label: "GPT_ENGINE",
description: (
<>
Choose an OpenAI engine.{" "}
<a
href="https://platform.openai.com/docs/models/overview"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
Learn more
</a>
</>
),
placeholder: "gpt-3.5-turbo",
error: Boolean(errors.GPT_ENGINE),
required: false,
},
{
key: "OPENAI_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-custom-primary-100 hover:underline"
rel="noreferrer"
>
here.
</a>
</>
),
placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
error: Boolean(errors.OPENAI_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="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 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 className="flex items-center py-1">
<Button
variant="primary"
onClick={handleSubmit(onSubmit)}
loading={isSubmitting}
>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
</div>
</>
);
};

1
god-mode/components/ai/index.ts
View File

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

51
god-mode/components/authentication/authentication-method-card.tsx
View File

@@ -1,51 +0,0 @@
"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<Props> = (props) => {
const { name, description, icon, config, disabled = false, withBorder = true } = props;
return (
<div
className={cn("w-full flex items-center gap-14 rounded", {
"px-4 py-3 border border-custom-border-200": withBorder,
})}
>
<div className="flex grow items-center gap-4">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-custom-background-80">{icon}</div>
</div>
<div className="grow">
<div
className={cn("font-medium leading-5 text-custom-text-100", {
"text-sm": withBorder,
"text-xl": !withBorder,
})}
>
{name}
</div>
<div
className={cn("font-normal leading-5 text-custom-text-300", {
"text-xs": withBorder,
"text-sm": !withBorder,
})}
>
{description}
</div>
</div>
</div>
<div className={`shrink-0 ${disabled && "opacity-70"}`}>{config}</div>
</div>
);
};

1
god-mode/components/authentication/email-codes/index.ts
View File

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

36
god-mode/components/authentication/email-codes/root.tsx
View File

@@ -1,36 +0,0 @@
"use client";
import React from "react";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// 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<Props> = observer((props) => {
const { disabled, updateConfig } = props;
// store
const { formattedConfig } = useInstance();
// derived values
const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "";
return (
<ToggleSwitch
value={Boolean(parseInt(enableMagicLogin))}
onChange={() => {
Boolean(parseInt(enableMagicLogin)) === true
? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
: updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
}}
size="sm"
disabled={disabled}
/>
);
});

205
god-mode/components/authentication/github/github-config-form.tsx
View File

@@ -1,205 +0,0 @@
import { FC, useState } from "react";
import { useForm } from "react-hook-form";
import Link from "next/link";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
// components
import {
ConfirmDiscardModal,
ControllerInput,
CopyField,
TControllerInputFormField,
TCopyField,
} from "components/common";
// types
import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
// helpers
import { cn } from "helpers/common.helper";
type Props = {
config: IFormattedInstanceConfiguration;
};
type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
export const InstanceGithubConfigForm: FC<Props> = (props) => {
const { config } = props;
// states
const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
// store hooks
const { updateInstanceConfigurations } = useInstance();
// form data
const {
handleSubmit,
control,
reset,
formState: { errors, isDirty, isSubmitting },
} = useForm<GithubConfigFormValues>({
defaultValues: {
GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
},
});
const originURL = typeof window !== "undefined" ? window.location.origin : "";
const githubFormFields: TControllerInputFormField[] = [
{
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-custom-primary-100 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-custom-primary-100 hover:underline"
rel="noreferrer"
>
GitHub OAuth application settings.
</a>
</>
),
placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
error: Boolean(errors.GITHUB_CLIENT_SECRET),
required: true,
},
];
const githubCopyFields: TCopyField[] = [
{
key: "Origin_URL",
label: "Origin URL",
url: originURL,
description: (
<>
We will auto-generate this. Paste this into the Authorized origin URL field{" "}
<a
href="https://github.com/settings/applications/new"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
here.
</a>
</>
),
},
{
key: "Callback_URI",
label: "Callback URI",
url: `${originURL}/auth/github/callback/`,
description: (
<>
We will auto-generate this. Paste this into your Authorized Callback URI field{" "}
<a
href="https://github.com/settings/applications/new"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
here.
</a>
</>
),
},
];
const onSubmit = async (formData: GithubConfigFormValues) => {
const payload: Partial<GithubConfigFormValues> = { ...formData };
await updateInstanceConfigurations(payload)
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "Github Configuration Settings updated successfully",
});
reset();
})
.catch((err) => console.error(err));
};
const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
if (isDirty) {
e.preventDefault();
setIsDiscardChangesModalOpen(true);
}
};
return (
<>
<ConfirmDiscardModal
isOpen={isDiscardChangesModalOpen}
onDiscardHref="/authentication"
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
<div className="pt-2 text-xl font-medium">Configuration</div>
{githubFormFields.map((field) => (
<ControllerInput
key={field.key}
control={control}
type={field.type}
name={field.key}
label={field.label}
description={field.description}
placeholder={field.placeholder}
error={field.error}
required={field.required}
/>
))}
<div className="flex flex-col gap-1 pt-4">
<div className="flex items-center gap-4">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
<Link
href="/authentication"
className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
onClick={handleGoBack}
>
Go back
</Link>
</div>
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
<div className="pt-2 text-xl font-medium">Service provider details</div>
{githubCopyFields.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}
</div>
</div>
</div>
</div>
</>
);
};

2
god-mode/components/authentication/github/index.ts
View File

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

70
god-mode/components/authentication/github/root.tsx
View File

@@ -1,70 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// 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<Props> = observer((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">
<Link
href="authentication/github"
className={cn(
getButtonStyling("link-primary", "md"),
"font-medium"
)}
>
Edit
</Link>
<ToggleSwitch
value={Boolean(parseInt(enableGithubConfig))}
onChange={() => {
Boolean(parseInt(enableGithubConfig)) === true
? updateConfig("IS_GITHUB_ENABLED", "0")
: updateConfig("IS_GITHUB_ENABLED", "1");
}}
size="sm"
disabled={disabled}
/>
</div>
) : (
<Link
href="authentication/github"
className={cn(
getButtonStyling("neutral-primary", "sm"),
"text-custom-text-300"
)}
>
<Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
Configure
</Link>
)}
</>
);
});

205
god-mode/components/authentication/google/google-config-form.tsx
View File

@@ -1,205 +0,0 @@
import { FC, useState } from "react";
import { useForm } from "react-hook-form";
import Link from "next/link";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
// components
import {
ConfirmDiscardModal,
ControllerInput,
CopyField,
TControllerInputFormField,
TCopyField,
} from "components/common";
// types
import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
// helpers
import { cn } from "helpers/common.helper";
type Props = {
config: IFormattedInstanceConfiguration;
};
type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
export const InstanceGoogleConfigForm: FC<Props> = (props) => {
const { config } = props;
// states
const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
// store hooks
const { updateInstanceConfigurations } = useInstance();
// form data
const {
handleSubmit,
control,
reset,
formState: { errors, isDirty, isSubmitting },
} = useForm<GoogleConfigFormValues>({
defaultValues: {
GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
},
});
const originURL = typeof window !== "undefined" ? window.location.origin : "";
const googleFormFields: TControllerInputFormField[] = [
{
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-custom-primary-100 hover:underline"
rel="noreferrer"
>
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-custom-primary-100 hover:underline"
rel="noreferrer"
>
Learn more
</a>
</>
),
placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E",
error: Boolean(errors.GOOGLE_CLIENT_SECRET),
required: true,
},
];
const googleCopyFeilds: TCopyField[] = [
{
key: "Origin_URL",
label: "Origin URL",
url: originURL,
description: (
<p>
We will auto-generate this. Paste this into your Authorized JavaScript origins field. For this OAuth client{" "}
<a
href="https://console.cloud.google.com/apis/credentials/oauthclient"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
here.
</a>
</p>
),
},
{
key: "Callback_URI",
label: "Callback URI",
url: `${originURL}/auth/google/callback/`,
description: (
<p>
We will auto-generate this. Paste this into your Authorized Redirect URI field. For this OAuth client{" "}
<a
href="https://console.cloud.google.com/apis/credentials/oauthclient"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
here.
</a>
</p>
),
},
];
const onSubmit = async (formData: GoogleConfigFormValues) => {
const payload: Partial<GoogleConfigFormValues> = { ...formData };
await updateInstanceConfigurations(payload)
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "Google Configuration Settings updated successfully",
});
reset();
})
.catch((err) => console.error(err));
};
const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
if (isDirty) {
e.preventDefault();
setIsDiscardChangesModalOpen(true);
}
};
return (
<>
<ConfirmDiscardModal
isOpen={isDiscardChangesModalOpen}
onDiscardHref="/authentication"
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
<div className="pt-2 text-xl font-medium">Configuration</div>
{googleFormFields.map((field) => (
<ControllerInput
key={field.key}
control={control}
type={field.type}
name={field.key}
label={field.label}
description={field.description}
placeholder={field.placeholder}
error={field.error}
required={field.required}
/>
))}
<div className="flex flex-col gap-1 pt-4">
<div className="flex items-center gap-4">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
<Link
href="/authentication"
className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
onClick={handleGoBack}
>
Go back
</Link>
</div>
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
<div className="pt-2 text-xl font-medium">Service provider details</div>
{googleCopyFeilds.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}
</div>
</div>
</div>
</div>
</>
);
};

2
god-mode/components/authentication/google/index.ts
View File

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

70
god-mode/components/authentication/google/root.tsx
View File

@@ -1,70 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// 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<Props> = observer((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">
<Link
href="authentication/google"
className={cn(
getButtonStyling("link-primary", "md"),
"font-medium"
)}
>
Edit
</Link>
<ToggleSwitch
value={Boolean(parseInt(enableGoogleConfig))}
onChange={() => {
Boolean(parseInt(enableGoogleConfig)) === true
? updateConfig("IS_GOOGLE_ENABLED", "0")
: updateConfig("IS_GOOGLE_ENABLED", "1");
}}
size="sm"
disabled={disabled}
/>
</div>
) : (
<Link
href="authentication/google"
className={cn(
getButtonStyling("neutral-primary", "sm"),
"text-custom-text-300"
)}
>
<Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
Configure
</Link>
)}
</>
);
});

9
god-mode/components/authentication/index.ts
View File

@@ -1,9 +0,0 @@
export * from "./authentication-method-card";
export * from "./email-codes";
export * from "./password";
export * from "./google";
export * from "./github";
// enterprise
export * from "./oidc";
export * from "./saml";

2
god-mode/components/authentication/oidc/index.ts
View File

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

204
god-mode/components/authentication/oidc/oidc-config-form.tsx
View File

@@ -1,204 +0,0 @@
import { FC, useState } from "react";
import { useForm } from "react-hook-form";
import Link from "next/link";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
// components
import {
ConfirmDiscardModal,
ControllerInput,
TControllerInputFormField,
CopyField,
TCopyField,
} from "components/common";
// types
import { IFormattedInstanceConfiguration, TInstanceOIDCAuthenticationConfigurationKeys } from "@plane/types";
// helpers
import { cn } from "helpers/common.helper";
type Props = {
config: IFormattedInstanceConfiguration;
};
type OIDCConfigFormValues = Record<TInstanceOIDCAuthenticationConfigurationKeys, string>;
export const InstanceOIDCConfigForm: FC<Props> = (props) => {
const { config } = props;
// states
const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
// store hooks
const { updateInstanceConfigurations } = useInstance();
// form data
const {
handleSubmit,
control,
reset,
formState: { errors, isDirty, isSubmitting },
} = useForm<OIDCConfigFormValues>({
defaultValues: {
OIDC_CLIENT_ID: config["OIDC_CLIENT_ID"],
OIDC_CLIENT_SECRET: config["OIDC_CLIENT_SECRET"],
OIDC_TOKEN_URL: config["OIDC_TOKEN_URL"],
OIDC_USERINFO_URL: config["OIDC_USERINFO_URL"],
OIDC_AUTHORIZE_URL: config["OIDC_AUTHORIZE_URL"],
OIDC_LOGOUT_URL: config["OIDC_LOGOUT_URL"],
},
});
const originURL = typeof window !== "undefined" ? window.location.origin : "";
const oidcFormFields: TControllerInputFormField[] = [
{
key: "OIDC_CLIENT_ID",
type: "text",
label: "Client ID",
description: "Your authentication provider's public identifier for the client.",
placeholder: "abc123xyz789",
error: Boolean(errors.OIDC_CLIENT_ID),
required: true,
},
{
key: "OIDC_CLIENT_SECRET",
type: "password",
label: "Client secret",
description: "Secret key provided by your authentication provider for the client.",
placeholder: "s3cr3tK3y123!",
error: Boolean(errors.OIDC_CLIENT_SECRET),
required: true,
},
{
key: "OIDC_AUTHORIZE_URL",
type: "text",
label: "Authorize URL",
description: "The URL for interacting with the resource owner to obtain an authorization grant.",
placeholder: "https://example.com/",
error: Boolean(errors.OIDC_AUTHORIZE_URL),
required: true,
},
{
key: "OIDC_TOKEN_URL",
type: "text",
label: "Token URL",
description: "URL to fetch the access token from a grant or refresh token.",
placeholder: "https://example.com/oauth/token",
error: Boolean(errors.OIDC_TOKEN_URL),
required: true,
},
{
key: "OIDC_USERINFO_URL",
type: "text",
label: "UserInfo URL",
description: "The URL to fetch user claims and information.",
placeholder: "https://example.com/userinfo",
error: Boolean(errors.OIDC_USERINFO_URL),
required: true,
},
{
key: "OIDC_LOGOUT_URL",
type: "text",
label: "Logout URL",
description: "Add your OIDC logout URL here for seamless session management.",
placeholder: "https://example.com/logout",
error: Boolean(errors.OIDC_LOGOUT_URL),
required: false,
},
];
const oidcCopyFields: TCopyField[] = [
{
key: "Callback_URI",
label: "Callback URI",
url: `${originURL}/auth/oidc/callback/`,
description:
"We will auto generate this. Paste this in the sign-in redirect URI section in your identity provider.",
},
{
key: "Logout_URI",
label: "Logout URI",
url: `${originURL}/auth/oidc/logout/`,
description: "We will auto-generate this. Paste this in sign-out redirect URI in your identity provider",
},
{
key: "Origin_URI",
label: "Origin URI",
url: `${originURL}/auth/oidc/`,
description: "We will auto-generate this. Add this as a trusted origin in your identity provider.",
},
];
const onSubmit = async (formData: OIDCConfigFormValues) => {
const payload: Partial<OIDCConfigFormValues> = { ...formData };
await updateInstanceConfigurations(payload)
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "OIDC Configuration Settings updated successfully",
});
reset();
})
.catch((err) => console.error(err));
};
const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
if (isDirty) {
e.preventDefault();
setIsDiscardChangesModalOpen(true);
}
};
return (
<>
<ConfirmDiscardModal
isOpen={isDiscardChangesModalOpen}
onDiscardHref="/authentication"
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
<div className="pt-2 text-xl font-medium">Configuration</div>
{oidcFormFields.map((field) => (
<ControllerInput
key={field.key}
control={control}
type={field.type}
name={field.key}
label={field.label}
description={field.description}
placeholder={field.placeholder}
error={field.error}
required={field.required}
/>
))}
<div className="flex flex-col gap-1 pt-4">
<div className="flex items-center gap-4">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
<Link
href="/authentication"
className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
onClick={handleGoBack}
>
Go back
</Link>
</div>
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
<div className="pt-2 text-xl font-medium">Service provider details</div>
{oidcCopyFields.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}
</div>
</div>
</div>
</div>
</>
);
};

72
god-mode/components/authentication/oidc/root.tsx
View File

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

1
god-mode/components/authentication/password/index.ts
View File

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

36
god-mode/components/authentication/password/root.tsx
View File

@@ -1,36 +0,0 @@
"use client";
import React from "react";
import { observer } from "mobx-react-lite";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { ToggleSwitch } from "@plane/ui";
// types
import { TInstanceAuthenticationMethodKeys } from "@plane/types";
type Props = {
disabled: boolean;
updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
};
export const PasswordLoginConfiguration: React.FC<Props> = observer((props) => {
const { disabled, updateConfig } = props;
// store
const { formattedConfig } = useInstance();
// derived values
const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "";
return (
<ToggleSwitch
value={Boolean(parseInt(enableEmailPassword))}
onChange={() => {
Boolean(parseInt(enableEmailPassword)) === true
? updateConfig("ENABLE_EMAIL_PASSWORD", "0")
: updateConfig("ENABLE_EMAIL_PASSWORD", "1");
}}
size="sm"
disabled={disabled}
/>
);
});

2
god-mode/components/authentication/saml/index.ts
View File

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

72
god-mode/components/authentication/saml/root.tsx
View File

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

210
god-mode/components/authentication/saml/saml-config-form.tsx
View File

@@ -1,210 +0,0 @@
import { FC, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import Link from "next/link";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, TOAST_TYPE, TextArea, getButtonStyling, setToast } from "@plane/ui";
// components
import {
ConfirmDiscardModal,
ControllerInput,
TControllerInputFormField,
CopyField,
TCopyField,
} from "components/common";
// types
import { IFormattedInstanceConfiguration, TInstanceSAMLAuthenticationConfigurationKeys } from "@plane/types";
// helpers
import { cn } from "helpers/common.helper";
type Props = {
config: IFormattedInstanceConfiguration;
};
type SAMLConfigFormValues = Record<TInstanceSAMLAuthenticationConfigurationKeys, string>;
export const InstanceSAMLConfigForm: FC<Props> = (props) => {
const { config } = props;
// states
const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
// store hooks
const { updateInstanceConfigurations } = useInstance();
// form data
const {
handleSubmit,
control,
reset,
formState: { errors, isDirty, isSubmitting },
} = useForm<SAMLConfigFormValues>({
defaultValues: {
SAML_ENTITY_ID: config["SAML_ENTITY_ID"],
SAML_SSO_URL: config["SAML_SSO_URL"],
SAML_LOGOUT_URL: config["SAML_LOGOUT_URL"],
SAML_CERTIFICATE: config["SAML_CERTIFICATE"],
},
});
const originURL = typeof window !== "undefined" ? window.location.origin : "";
const samlFormFields: TControllerInputFormField[] = [
{
key: "SAML_ENTITY_ID",
type: "text",
label: "Entity ID",
description: "Unique identifier for your Identity Provider (IdP) entity.",
placeholder: "70a44354520df8bd9bcd",
error: Boolean(errors.SAML_ENTITY_ID),
required: true,
},
{
key: "SAML_SSO_URL",
type: "text",
label: "SSO URLs",
description: "URL used for Single Sign-On (SSO) with your Identity Provider (IdP).",
placeholder: "https://example.com/sso",
error: Boolean(errors.SAML_SSO_URL),
required: true,
},
{
key: "SAML_LOGOUT_URL",
type: "text",
label: "Logout URL",
description: "Add your SAML logout URL here for seamless session management.",
placeholder: "https://example.com/logout",
error: Boolean(errors.SAML_LOGOUT_URL),
required: false,
},
];
const samlCopyFields: TCopyField[] = [
{
key: "Callback_URI",
label: "Callback URI",
url: `${originURL}/auth/saml/callback/`,
description:
"We will auto-generate this. Paste this in the single sign on callback url section of your identity provider.",
},
{
key: "Metadata_Information",
label: "Metadata Information",
url: `${originURL}/auth/saml/metadata/`,
description:
"We will auto-generate this. Paste this into your audience URI or SP entity ID section of your identity provider.",
},
{
key: "Logout_URI",
label: "Logout URI",
url: `${originURL}/auth/saml/logout/`,
description: "We will auto-generate this. Add this as a trusted origin in your identity provider.",
},
];
const onSubmit = async (formData: SAMLConfigFormValues) => {
const payload: Partial<SAMLConfigFormValues> = { ...formData };
await updateInstanceConfigurations(payload)
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "SAML Configuration Settings updated successfully",
});
reset();
})
.catch((err) => console.error(err));
};
const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
if (isDirty) {
e.preventDefault();
setIsDiscardChangesModalOpen(true);
}
};
return (
<>
<ConfirmDiscardModal
isOpen={isDiscardChangesModalOpen}
onDiscardHref="/authentication"
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
<div className="pt-2 text-xl font-medium">Configuration</div>
{samlFormFields.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-sm">Certificate</h4>
<Controller
control={control}
name="SAML_CERTIFICATE"
rules={{ required: "Certificate is required." }}
render={({ field: { value, onChange } }) => (
<TextArea
id="SAML_CERTIFICATE"
name="SAML_CERTIFICATE"
value={value}
onChange={onChange}
hasError={Boolean(errors.SAML_CERTIFICATE)}
placeholder="---BEGIN CERTIFICATE---\n2yWn1gc7DhOFB9\nr0gbE+\n---END CERTIFICATE---"
className="min-h-[102px] w-full rounded-md font-medium text-sm"
/>
)}
/>
<p className="text-xs text-custom-text-400">
Certificate used by your IdP for digital signature verification in SAML transactions.
</p>
</div>
<div className="flex flex-col gap-1 pt-4">
<div className="flex items-center gap-4">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
<Link
href="/authentication"
className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
onClick={handleGoBack}
>
Go back
</Link>
</div>
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
<div className="pt-2 text-xl font-medium">Service provider details</div>
{samlCopyFields.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}
<div className="flex flex-col gap-1">
<h4 className="text-sm text-custom-text-300 font-medium">Name ID format</h4>
<p className="text-sm text-custom-text-100">emailAddress</p>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm text-custom-text-300 font-medium">Attribute mapping</h4>
<ul className="text-sm text-custom-text-100 list-disc pl-6">
<li>first_name to user.firstName</li>
<li>last_name to user.lastName</li>
<li>email to user.email</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</>
);
};

36
god-mode/components/common/breadcrumb-link.tsx
View File

@@ -1,36 +0,0 @@
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<Props> = (props) => {
const { href, label, icon } = props;
return (
<Tooltip tooltipContent={label} position="bottom">
<li className="flex items-center space-x-2" tabIndex={-1}>
<div className="flex flex-wrap items-center gap-2.5">
{href ? (
<Link
className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
href={href}
>
{icon && (
<div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
)}
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
</Link>
) : (
<div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
{icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
</div>
)}
</div>
</li>
</Tooltip>
);
};

83
god-mode/components/common/confirm-discard-modal.tsx
View File

@@ -1,83 +0,0 @@
import React from "react";
import Link from "next/link";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// ui
import { Button, getButtonStyling } from "@plane/ui";
type Props = {
isOpen: boolean;
handleClose: () => void;
onDiscardHref: string;
};
export const ConfirmDiscardModal: React.FC<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-custom-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-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-custom-text-300"
>
You have unsaved changes
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-custom-text-400">
Changes you made will be lost if you go back. Do you
wish to go back?
</p>
</div>
</div>
</div>
</div>
<div className="flex justify-end items-center p-4 sm:px-6 gap-2">
<Button
variant="neutral-primary"
size="sm"
onClick={handleClose}
>
Keep editing
</Button>
<Link
href={onDiscardHref}
className={getButtonStyling("primary", "sm")}
>
Go back
</Link>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

89
god-mode/components/common/controller-input.tsx
View File

@@ -1,89 +0,0 @@
"use client";
import React, { useState } from "react";
import { Controller, Control } from "react-hook-form";
// ui
import { Input } from "@plane/ui";
// icons
import { Eye, EyeOff } from "lucide-react";
type Props = {
control: Control<any>;
type: "text" | "password";
name: string;
label: string;
description?: string | JSX.Element;
placeholder: string;
error: boolean;
required: boolean;
};
export type TControllerInputFormField = {
key: string;
type: "text" | "password";
label: string;
description?: string | JSX.Element;
placeholder: string;
error: boolean;
required: boolean;
};
export const ControllerInput: React.FC<Props> = (props) => {
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-sm text-custom-text-300">{label}</h4>
<div className="relative">
<Controller
control={control}
name={name}
rules={{ required: required ? `${label} is required.` : false }}
render={({ field: { value, onChange, ref } }) => (
<Input
id={name}
name={name}
type={type === "password" && showPassword ? "text" : type}
value={value}
onChange={onChange}
ref={ref}
hasError={error}
placeholder={placeholder}
className="w-full rounded-md font-medium"
/>
)}
/>
{type === "password" &&
(showPassword ? (
<button
className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(false)}
>
<EyeOff className="h-4 w-4" />
</button>
) : (
<button
className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(true)}
>
<Eye className="h-4 w-4" />
</button>
))}
</div>
{description && (
<p className="text-xs text-custom-text-400">{description}</p>
)}
</div>
);
};

46
god-mode/components/common/copy-field.tsx
View File

@@ -1,46 +0,0 @@
"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<Props> = (props) => {
const { label, url, description } = props;
return (
<div className="flex flex-col gap-1">
<h4 className="text-sm text-custom-text-300">{label}</h4>
<Button
variant="neutral-primary"
className="flex items-center justify-between py-2"
onClick={() => {
navigator.clipboard.writeText(url);
setToast({
type: TOAST_TYPE.INFO,
title: "Copied to clipboard",
message: `The ${label} has been successfully copied to your clipboard`,
});
}}
>
<p className="text-sm font-medium">{url}</p>
<Copy size={18} color="#B9B9B9" />
</Button>
<p className="text-xs text-custom-text-400">{description}</p>
</div>
);
};

5
god-mode/components/common/index.ts
View File

@@ -1,5 +0,0 @@
export * from "./breadcrumb-link";
export * from "./confirm-discard-modal";
export * from "./controller-input";
export * from "./copy-field";
export * from "./password-strength-meter";

97
god-mode/components/common/password-strength-meter.tsx
View File

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

182
god-mode/components/email/email-config-form.tsx
View File

@@ -1,182 +0,0 @@
import { FC, useState } from "react";
import { Controller, useForm } from "react-hook-form";
// hooks
import useInstance from "hooks/use-instance";
// 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<TInstanceEmailConfigurationKeys, string>;
export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
const { config } = props;
// states
const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
// store hooks
const { updateInstanceConfigurations } = useInstance();
// form data
const {
handleSubmit,
watch,
control,
formState: { errors, 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"],
},
});
const emailFormFields: TControllerInputFormField[] = [
{
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_HOST_USER",
type: "text",
label: "Username",
placeholder: "getitdone@projectplane.so",
error: Boolean(errors.EMAIL_HOST_USER),
required: true,
},
{
key: "EMAIL_HOST_PASSWORD",
type: "password",
label: "Password",
placeholder: "Password",
error: Boolean(errors.EMAIL_HOST_PASSWORD),
required: true,
},
{
key: "EMAIL_FROM",
type: "text",
label: "From 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 onSubmit = async (formData: EmailFormValues) => {
const payload: Partial<EmailFormValues> = { ...formData };
await updateInstanceConfigurations(payload)
.then(() =>
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "Email Settings updated successfully",
})
)
.catch((err) => console.error(err));
};
return (
<>
<SendTestEmailModal isOpen={isSendTestEmailModalOpen} handleClose={() => setIsSendTestEmailModalOpen(false)} />
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-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>
<div className="flex w-full max-w-md flex-col gap-y-10 px-1">
<div className="mr-8 flex items-center gap-10 pt-4">
<div className="grow">
<div className="text-sm font-medium text-custom-text-100">
Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
</div>
<div className="text-xs font-normal text-custom-text-300">Use this if your email domain supports TLS.</div>
</div>
<div className="shrink-0">
<Controller
control={control}
name="EMAIL_USE_TLS"
render={({ field: { value, onChange } }) => (
<ToggleSwitch
value={Boolean(parseInt(value))}
onChange={() => {
Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
}}
size="sm"
/>
)}
/>
</div>
</div>
{/* <div className="flex items-center gap-10 pt-4 mr-8">
<div className="grow">
<div className="text-custom-text-100 font-medium text-sm">
Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"}
</div>
<div className="text-custom-text-300 font-normal text-xs">
Most email domains support SSL. Use this to secure comms between this instance and your users.
</div>
</div>
<div className="shrink-0">
<Controller
control={control}
name="EMAIL_USE_SSL"
render={({ field: { value, onChange } }) => (
<ToggleSwitch
value={Boolean(parseInt(value))}
onChange={() => {
Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
}}
size="sm"
/>
)}
/>
</div>
</div> */}
</div>
<div className="flex max-w-4xl items-center py-1 gap-4">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
<Button variant="outline-primary" onClick={() => setIsSendTestEmailModalOpen(true)} loading={isSubmitting}>
Send test email
</Button>
</div>
</>
);
};

2
god-mode/components/email/index.ts
View File

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

135
god-mode/components/email/send-test-email-modal.tsx
View File

@@ -1,135 +0,0 @@
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<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?.message || "Failed to send email");
setSendEmailStep(ESendEmailSteps.FAILED);
})
.finally(() => {
setIsLoading(false);
});
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" 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-custom-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={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 rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">
{sendEmailStep === ESendEmailSteps.SEND_EMAIL
? "Send test email"
: sendEmailStep === ESendEmailSteps.SUCCESS
? "Email send"
: "Failed"}{" "}
</h3>
<div className="pt-6 pb-2">
{sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
<Input
id="receiver_email"
type="email"
value={receiverEmail}
onChange={(e) => setReceiverEmail(e.target.value)}
placeholder="Receiver email"
className="w-full resize-none text-lg"
tabIndex={1}
/>
)}
{sendEmailStep === ESendEmailSteps.SUCCESS && (
<div className="flex flex-col gap-y-4 text-sm">
<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-sm">{error}</div>}
<div className="flex items-center gap-2 justify-end mt-5">
<Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={2}>
{sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
</Button>
{sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
<Button variant="primary" size="sm" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
{isLoading ? "Sending email..." : "Send email"}
</Button>
)}
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

145
god-mode/components/general/general-form.tsx
View File

@@ -1,145 +0,0 @@
import { FC } from "react";
import { Controller, useForm } from "react-hook-form";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
// components
import { ControllerInput } from "components/common";
// icons
import { Telescope } from "lucide-react";
// types
import { IInstance, IInstanceAdmin } from "@plane/types";
export interface IInstanceGeneralForm {
instance: IInstance;
instanceAdmins: IInstanceAdmin[];
}
export interface GeneralFormValues {
instance_name: string;
is_telemetry_enabled: boolean;
}
export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
const { instance, instanceAdmins } = props;
// store hooks
const { updateInstanceInfo } = useInstance();
// form data
const {
handleSubmit,
control,
formState: { errors, isSubmitting },
} = useForm<GeneralFormValues>({
defaultValues: {
instance_name: instance.instance_name,
is_telemetry_enabled: instance.is_telemetry_enabled,
},
});
const onSubmit = async (formData: GeneralFormValues) => {
const payload: Partial<GeneralFormValues> = { ...formData };
await updateInstanceInfo(payload)
.then(() =>
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "Settings updated successfully",
})
)
.catch((err) => console.error(err));
};
return (
<>
<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-sm text-custom-text-300">Email</h4>
<Input
id="email"
name="email"
type="email"
value={instanceAdmins[0].user_detail.email ?? ""}
placeholder="Admin email"
className="w-full cursor-not-allowed !text-custom-text-400"
disabled
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm text-custom-text-300">Instance ID</h4>
<Input
id="instance_id"
name="instance_id"
type="text"
value={instance.instance_id}
className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
disabled
/>
</div>
</div>
<div className="pt-6 text-lg font-medium">Telemetry</div>
<div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
<div className="grow flex items-center gap-4">
<div className="shrink-0">
<div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
<Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
</div>
</div>
<div className="grow">
<div className="text-sm font-medium text-custom-text-100 leading-5">
Allow Plane to collect anonymous usage events
</div>
<div className="text-xs font-normal text-custom-text-300 leading-5">
We collect usage events without any PII to analyse and improve
Plane.{" "}
<a
href="https://docs.plane.so/self-hosting/telemetry"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
Know more.
</a>
</div>
</div>
</div>
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
<Controller
control={control}
name="is_telemetry_enabled"
render={({ field: { value, onChange } }) => (
<ToggleSwitch
value={value}
onChange={onChange}
size="sm"
disabled={isSubmitting}
/>
)}
/>
</div>
</div>
<div className="flex items-center py-4">
<Button
variant="primary"
onClick={handleSubmit(onSubmit)}
loading={isSubmitting}
>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
</div>
</>
);
};

1
god-mode/components/general/index.ts
View File

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

89
god-mode/components/image/image-config-form.tsx
View File

@@ -1,89 +0,0 @@
import { FC } from "react";
import { useForm } from "react-hook-form";
// hooks
import useInstance from "hooks/use-instance";
// ui
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { ControllerInput } from "components/common";
// types
import {
IFormattedInstanceConfiguration,
TInstanceImageConfigurationKeys,
} from "@plane/types";
type IInstanceImageConfigForm = {
config: IFormattedInstanceConfiguration;
};
type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (
props
) => {
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="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.{" "}
<a
href="https://unsplash.com/documentation#creating-a-developer-account"
target="_blank"
className="text-custom-primary-100 hover:underline"
rel="noreferrer"
>
Learn more.
</a>
</>
}
placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
required
/>
</div>
<div className="flex items-center py-1">
<Button
variant="primary"
onClick={handleSubmit(onSubmit)}
loading={isSubmitting}
>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
</div>
</>
);
};

1
god-mode/components/image/index.ts
View File

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

0
god-mode/components/instance/index.ts
View File

11
god-mode/components/instance/instance-not-ready.tsx
View File

@@ -1,11 +0,0 @@
import { FC, ReactNode } from "react";
type TInstanceNotReady = {
children: ReactNode;
};
export const InstanceNotReady: FC<TInstanceNotReady> = (props) => {
const {} = props;
return <div>SignIn Form</div>;
};

135
god-mode/components/sidebar/help-section.tsx
View File

@@ -1,135 +0,0 @@
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 { useAppTheme } from "hooks/use-theme";
// 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 { sidebarCollapsed, toggleSidebar } = useAppTheme();
// refs
const helpOptionsRef = useRef<HTMLDivElement | null>(null);
return (
<div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
sidebarCollapsed ? "flex-col" : ""
}`}
>
<div
className={`flex items-center gap-1 ${
sidebarCollapsed ? "flex-col justify-center" : "w-full justify-end"
}`}
>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
sidebarCollapsed ? "w-full" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
>
<HelpCircle className="h-3.5 w-3.5" />
</button>
<button
type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
onClick={() => toggleSidebar()}
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
sidebarCollapsed ? "w-full" : ""
}`}
onClick={() => toggleSidebar()}
>
<MoveLeft
className={`h-3.5 w-3.5 duration-300 ${
sidebarCollapsed ? "rotate-180" : ""
}`}
/>
</button>
</div>
<div className="relative">
<Transition
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 min-w-[10rem] ${
sidebarCollapsed ? "left-full" : "-left-[75px]"
} divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
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 px-2 py-1 text-xs hover:bg-custom-background-80">
<div className="grid flex-shrink-0 place-items-center">
<Icon
className="h-3.5 w-3.5 text-custom-text-200"
size={14}
/>
</div>
<span className="text-xs">{name}</span>
</div>
</Link>
);
else
return (
<button
key={name}
type="button"
className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
>
<div className="grid flex-shrink-0 place-items-center">
<Icon className="h-3.5 w-3.5 text-custom-text-200" />
</div>
<span className="text-xs">{name}</span>
</button>
);
})}
</div>
<div className="px-2 pb-1 pt-2 text-[10px]">
Version: v{packageJson.version}
</div>
</div>
</Transition>
</div>
</div>
);
};

4
god-mode/components/sidebar/index.ts
View File

@@ -1,4 +0,0 @@
export * from "./help-section";
export * from "./sidebar-menu";
export * from "./sidebar-dropdown";
export * from "./sidebar-menu-hamburger-toogle"

126
god-mode/components/sidebar/sidebar-dropdown.tsx
View File

@@ -1,126 +0,0 @@
import { Fragment } from "react";
import { useRouter } from "next/navigation";
import { useTheme } 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 { useAppTheme } from "hooks/use-theme";
import useUser from "hooks/use-user";
// ui
import { Avatar, TOAST_TYPE, setToast } from "@plane/ui";
export const SidebarDropdown = observer(() => {
// router
const router = useRouter();
// store hooks
const { sidebarCollapsed } = useAppTheme();
const { signOut, currentUser } = useUser();
// hooks
const { resolvedTheme, setTheme } = useTheme();
const handleSignOut = async () => {
await signOut()
.then(() => {
mutate("CURRENT_USER_DETAILS", null);
setTheme("system");
router.push("/");
})
.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 (
<div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
<div className="h-full w-full truncate">
<div
className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
sidebarCollapsed ? "justify-center" : ""
}`}
>
<div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
<UserCog2 className="h-5 w-5 text-custom-text-200" />
</div>
{!sidebarCollapsed && (
<div className="flex w-full gap-2">
<h4 className="grow truncate text-base font-medium text-custom-text-200">
Instance admin
</h4>
</div>
)}
</div>
</div>
{!sidebarCollapsed && currentUser && (
<Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none">
<Avatar
name={currentUser.display_name}
src={currentUser.avatar ?? undefined}
size={24}
shape="square"
className="!text-base"
/>
</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"
>
<Menu.Items
className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
>
<div className="flex flex-col gap-2.5 pb-2">
<span className="px-2 text-custom-sidebar-text-200">
{currentUser?.email}
</span>
</div>
<div className="py-2">
<Menu.Item
as="button"
type="button"
className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
onClick={handleThemeSwitch}
>
<Palette className="h-4 w-4 stroke-[1.5]" />
Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
</Menu.Item>
</div>
<div className="py-2">
<Menu.Item
as="button"
type="button"
className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
onClick={handleSignOut}
>
<LogOut className="h-4 w-4 stroke-[1.5]" />
Sign out
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
)}
</div>
);
});

21
god-mode/components/sidebar/sidebar-menu-hamburger-toogle.tsx
View File

@@ -1,21 +0,0 @@
import { FC } from "react";
import { observer } from "mobx-react";
// hooks
import { useAppTheme } from "hooks/use-theme";
// icons
import { Menu } from "lucide-react";
export const SidebarHamburgerToggle: FC = observer(() => {
const { toggleSidebar } = useAppTheme();
return (
<div
className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
onClick={() => toggleSidebar()}
>
<Menu
size={14}
className="text-custom-text-200 group-hover:text-custom-text-100 transition-all"
/>
</div>
);
});

111
god-mode/components/sidebar/sidebar-menu.tsx
View File

@@ -1,111 +0,0 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
// hooks
import { useAppTheme } from "hooks/use-theme";
// ui
import { Tooltip } from "@plane/ui";
import { observer } from "mobx-react-lite";
const INSTANCE_ADMIN_LINKS = [
{
Icon: Cog,
name: "General",
description: "Identify your instances and get key details",
href: `/`,
highlight: (pathname: string) => pathname === "/",
},
{
Icon: Mail,
name: "Email",
description: "Set up emails to your users",
href: `/email`,
highlight: (pathname: string) => pathname === "/email",
},
{
Icon: Lock,
name: "Authentication",
description: "Configure authentication modes",
href: `/authentication`,
highlight: (pathname: string) => pathname.includes("/authentication"),
},
{
Icon: BrainCog,
name: "Artificial intelligence",
description: "Configure your OpenAI creds",
href: `/ai`,
highlight: (pathname: string) => pathname === "/ai",
},
{
Icon: Image,
name: "Images in Plane",
description: "Allow third-party image libraries",
href: `/image`,
highlight: (pathname: string) => pathname === "/image",
},
];
export const SidebarMenu = observer(() => {
// store hooks
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
// router
const pathName = usePathname();
const handleItemClick = () => {
if (window.innerWidth < 768) {
toggleSidebar();
}
};
return (
<div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-6">
{INSTANCE_ADMIN_LINKS.map((item, index) => {
const isActive = item.highlight(pathName);
return (
<Link key={index} href={item.href} onClick={handleItemClick}>
<div>
<Tooltip
tooltipContent={item.name}
position="right"
className="ml-2"
disabled={!sidebarCollapsed}
>
<div
className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
isActive
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${sidebarCollapsed ? "justify-center" : ""}`}
>
{<item.Icon className="h-4 w-4" />}
{!sidebarCollapsed && (
<div className="flex flex-col leading-snug">
<span
className={`text-sm font-medium ${
isActive
? "text-custom-primary-100"
: "text-custom-sidebar-text-200"
}`}
>
{item.name}
</span>
<span
className={`text-[10px] ${
isActive
? "text-custom-primary-90"
: "text-custom-sidebar-text-400"
}`}
>
{item.description}
</span>
</div>
)}
</div>
</Tooltip>
</div>
</Link>
);
})}
</div>
);
});

2
god-mode/components/user-authentication-forms/index.ts
View File

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

113
god-mode/components/user-authentication-forms/sign-in.tsx
View File

@@ -1,113 +0,0 @@
import { FC, FormEvent, useEffect, useState } from "react";
// services
import { AuthService } from "@/services/auth.service";
import { API_BASE_URL } from "@/helpers/common.helper";
// ui
import { Button, Input } from "@plane/ui";
import { Eye, EyeOff } from "lucide-react";
type TInstanceFormData = {
email: string;
password: string;
};
const defaultInstanceFromData: TInstanceFormData = {
email: "",
password: "",
};
// service initialization
const authService = new AuthService();
export const InstanceSignInForm: FC = (props) => {
const {} = props;
// state
const [csrfToken, setCsrfToken] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [instanceFormData, setInstanceFormData] = useState<TInstanceFormData>(defaultInstanceFromData);
const handleFormChange = (key: keyof TInstanceFormData, value: string | boolean) =>
setInstanceFormData((prev) => ({ ...prev, [key]: value }));
useEffect(() => {
authService.requestCSRFToken().then((data) => setCsrfToken(data.csrf_token));
}, []);
const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
console.log(event);
// validating password
event.preventDefault();
};
return (
<div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
<div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
<div className="text-center space-y-1">
<h3 className="text-3xl font-bold">Manage your Plane instance</h3>
<p className="font-medium text-custom-text-400">Configure instance-wide settings to secure your instance</p>
</div>
<form
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
onSubmit={handleFormSubmit}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
Email <span className="text-red-500">*</span>
</label>
<Input
className="w-full"
id="email"
name="email"
type="email"
inputSize="md"
placeholder="name@company.com"
value={instanceFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
required
/>
</div>
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
Password <span className="text-red-500">*</span>
</label>
<div className="relative">
<Input
className="w-full"
id="password"
name="password"
type={showPassword ? "text" : "password"}
inputSize="md"
placeholder="Enter your password"
value={instanceFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
required
/>
{showPassword ? (
<button
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(false)}
>
<EyeOff className="h-4 w-4" />
</button>
) : (
<button
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(true)}
>
<Eye className="h-4 w-4" />
</button>
)}
</div>
</div>
<div className="py-2">
<Button type="submit" size="lg" className="w-full">
Sign in
</Button>
</div>
</form>
</div>
</div>
);
};

187
god-mode/components/user-authentication-forms/sign-up.tsx
View File

@@ -1,187 +0,0 @@
import { FC, FormEvent, useEffect, useState } from "react";
// services
import { AuthService } from "@/services/auth.service";
import { API_BASE_URL } from "@/helpers/common.helper";
// ui
import { Button, Checkbox, Input } from "@plane/ui";
import { PasswordStrengthMeter } from "components/common";
import { Eye, EyeOff } from "lucide-react";
type TInstanceFormData = {
first_name: string;
last_name: string;
email: string;
company_name: string;
password: string;
is_telemetry_enabled: boolean;
};
const defaultInstanceFromData: TInstanceFormData = {
first_name: "",
last_name: "",
email: "",
company_name: "",
password: "",
is_telemetry_enabled: true,
};
// service initialization
const authService = new AuthService();
export const InstanceSignUpForm: FC = (props) => {
const {} = props;
// state
const [csrfToken, setCsrfToken] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [instanceFormData, setInstanceFormData] = useState<TInstanceFormData>(defaultInstanceFromData);
const handleFormChange = (key: keyof TInstanceFormData, value: string | boolean) =>
setInstanceFormData((prev) => ({ ...prev, [key]: value }));
useEffect(() => {
authService.requestCSRFToken().then((data) => setCsrfToken(data.csrf_token));
}, []);
const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
console.log(event);
// validating password
event.preventDefault();
};
return (
<div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
<div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
<div className="text-center space-y-1">
<h3 className="text-3xl font-bold">Setup your Plane Instance</h3>
<p className="font-medium text-custom-text-400">Post setup you will be able to manage this Plane instance.</p>
</div>
<form
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
onSubmit={handleFormSubmit}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="flex items-center gap-4">
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
First name <span className="text-red-500">*</span>
</label>
<Input
className="w-full"
id="first_name"
name="first_name"
type="text"
inputSize="md"
placeholder="Wilber"
value={instanceFormData.first_name}
onChange={(e) => handleFormChange("first_name", e.target.value)}
required
/>
</div>
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
Last name
</label>
<Input
className="w-full"
id="last_name"
name="last_name"
type="text"
inputSize="md"
placeholder="Wright"
value={instanceFormData.last_name}
onChange={(e) => handleFormChange("last_name", e.target.value)}
/>
</div>
</div>
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
Email <span className="text-red-500">*</span>
</label>
<Input
className="w-full"
id="email"
name="email"
type="email"
inputSize="md"
placeholder="name@company.com"
value={instanceFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
required
/>
</div>
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
Company name
</label>
<Input
className="w-full"
id="company_name"
name="company_name"
type="text"
inputSize="md"
placeholder="Company name"
value={instanceFormData.company_name}
onChange={(e) => handleFormChange("company_name", e.target.value)}
/>
</div>
<div className="w-full space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
Set a password <span className="text-red-500">*</span>
</label>
<div className="relative">
<Input
className="w-full"
id="password"
name="password"
type={showPassword ? "text" : "password"}
inputSize="md"
placeholder="New password..."
value={instanceFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
required
/>
{showPassword ? (
<button
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(false)}
>
<EyeOff className="h-4 w-4" />
</button>
) : (
<button
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(true)}
>
<Eye className="h-4 w-4" />
</button>
)}
</div>
<PasswordStrengthMeter password={instanceFormData.password} />
</div>
<div className="relative flex items-center pt-2 gap-2">
<Checkbox
id="is_telemetry_enabled"
name="is_telemetry_enabled"
value={instanceFormData.is_telemetry_enabled ? "True" : "False"}
onChange={() => handleFormChange("is_telemetry_enabled", !instanceFormData.is_telemetry_enabled)}
checked={instanceFormData.is_telemetry_enabled}
/>
<label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
Allow Plane to anonymously collect usage events.
</label>
<a href="#" className="text-sm font-medium text-blue-500 hover:text-blue-600">
See More
</a>
</div>
<div className="py-2">
<Button type="submit" size="lg" className="w-full">
Continue
</Button>
</div>
</form>
</div>
</div>
);
};

8
god-mode/constants/swr-config.ts
View File

@@ -1,8 +0,0 @@
export const SWR_CONFIG = {
refreshWhenHidden: false,
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnMount: true,
refreshInterval: 600000,
errorRetryCount: 3,
};

9
god-mode/helpers/common.helper.ts
View File

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

14
god-mode/hooks/use-instance.tsx
View File

@@ -1,14 +0,0 @@
import { useContext } from "react";
// mobx store
import { InstanceContext } from "lib/instance-provider";
// types
import { IInstanceStore } from "store/instance.store";
const useInstance = (): IInstanceStore => {
const context = useContext(InstanceContext);
if (context === undefined)
throw new Error("useInstance must be used within InstanceProvider");
return context;
};
export default useInstance;

19
god-mode/hooks/use-outside-click-detector.tsx
View File

@@ -1,19 +0,0 @@
import React, { useEffect } from "react";
const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
const handleClick = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
callback();
}
};
useEffect(() => {
document.addEventListener("mousedown", handleClick);
return () => {
document.removeEventListener("mousedown", handleClick);
};
});
};
export default useOutsideClickDetector;

14
god-mode/hooks/use-theme.tsx
View File

@@ -1,14 +0,0 @@
import { useContext } from "react";
// mobx store
import { ThemeContext } from "lib/theme-provider";
// types
import { IThemeStore } from "store/theme.store";
export const useAppTheme = (): IThemeStore => {
const context = useContext(ThemeContext);
if (context === undefined)
throw new Error("useTheme must be used within ThemeProvider");
return context;
};
export default useAppTheme;

14
god-mode/hooks/use-user.tsx
View File

@@ -1,14 +0,0 @@
import { useContext } from "react";
// mobx store
import { UserContext } from "lib/user-provider";
// types
import { IUserStore } from "store/user.store";
const useUser = (): IUserStore => {
const context = useContext(UserContext);
if (context === undefined)
throw new Error("useUser must be used within UserProvider");
return context;
};
export default useUser;

21
god-mode/layouts/default-layout.tsx
View File

@@ -1,21 +0,0 @@
import { FC, ReactNode } from "react";
type TDefaultLayout = {
children: ReactNode;
};
export const DefaultLayout: FC<TDefaultLayout> = (props) => {
const { children } = props;
return (
<div className="relative h-screen max-h-max w-full overflow-hidden overflow-y-auto flex flex-col">
<div className="flex-shrink-0">
<div className="relative container mx-auto px-5 md:px-0 py-10 flex items-center justify-between gap-5">
{/* logo */}
<div className="h-[50px] relative flex justify-center items-center">Logo</div>
</div>
</div>
<div className="w-full h-full">{children}</div>
</div>
);
};

1
god-mode/layouts/index.ts
View File

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

29
god-mode/lib/instance-provider.tsx
View File

@@ -1,29 +0,0 @@
"use client";
import { createContext } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import type { ThemeProviderProps } from "next-themes/dist/types";
// mobx store
import { InstanceStore } from "store/instance.store";
let instanceStore = new InstanceStore();
export const InstanceContext = createContext<InstanceStore>(instanceStore);
const initializeStore = () => {
const store = instanceStore ?? new InstanceStore();
if (typeof window === "undefined") return store;
if (!instanceStore) instanceStore = store;
return store;
};
export function InstanceProvider({ children, ...props }: ThemeProviderProps) {
const store = initializeStore();
return (
<>
<InstanceContext.Provider value={store}>
<NextThemesProvider {...props}>{children}</NextThemesProvider>
</InstanceContext.Provider>
</>
);
}

31
god-mode/lib/theme-provider.tsx
View File

@@ -1,31 +0,0 @@
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import type { ThemeProviderProps } from "next-themes/dist/types";
import { createContext } from "react";
// mobx store
import { ThemeStore } from "store/theme.store";
let themeStore = new ThemeStore();
export const ThemeContext = createContext<ThemeStore>(themeStore);
const initializeStore = () => {
const store = themeStore ?? new ThemeStore();
if (typeof window === "undefined") return store;
if (!themeStore) themeStore = store;
return store;
};
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
const store = initializeStore();
return (
<>
<ThemeContext.Provider value={store}>
<NextThemesProvider {...props}>{children}</NextThemesProvider>
</ThemeContext.Provider>
</>
);
}

29
god-mode/lib/user-provider.tsx
View File

@@ -1,29 +0,0 @@
"use client";
import { createContext } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import type { ThemeProviderProps } from "next-themes/dist/types";
// mobx store
import { UserStore } from "store/user.store";
let userStore = new UserStore();
export const UserContext = createContext<UserStore>(userStore);
const initializeStore = () => {
const store = userStore ?? new UserStore();
if (typeof window === "undefined") return store;
if (!userStore) userStore = store;
return store;
};
export function UserProvider({ children, ...props }: ThemeProviderProps) {
const store = initializeStore();
return (
<>
<UserContext.Provider value={store}>
<NextThemesProvider {...props}>{children}</NextThemesProvider>
</UserContext.Provider>
</>
);
}

46
god-mode/lib/wrappers/app-wrapper.tsx
View File

@@ -1,46 +0,0 @@
"use client";
import { FC, ReactNode, useEffect } from "react";
import { observer } from "mobx-react-lite";
import { SWRConfig } from "swr";
// hooks
import useAppTheme from "hooks/use-theme";
import useUser from "hooks/use-user";
import { useTheme } from "next-themes";
// ui
import { Toast } from "@plane/ui";
// constants
import { SWR_CONFIG } from "constants/swr-config";
// helpers
import { resolveGeneralTheme } from "helpers/common.helper";
interface IAppWrapper {
children: ReactNode;
}
const AppWrapper: FC<IAppWrapper> = observer(({ children }) => {
// store hooks
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
const { currentUser } = useUser();
// themes
const { resolvedTheme } = useTheme();
/**
* Sidebar collapsed fetching from local storage
*/
useEffect(() => {
const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
if (localValue && sidebarCollapsed === undefined) toggleSidebar(localBoolValue);
}, [sidebarCollapsed, currentUser, toggleSidebar]);
return (
<>
<Toast theme={resolveGeneralTheme(resolvedTheme)} />
<SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
</>
);
});
export default AppWrapper;

49
god-mode/lib/wrappers/instance-wrapper.tsx
View File

@@ -1,49 +0,0 @@
import { FC, ReactNode, useState } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
// ui
import { Spinner } from "@plane/ui";
// components
import { InstanceNotReady } from "@/components/instance";
// hooks
import { useInstance } from "@/hooks/store";
type TInstanceWrapper = {
children: ReactNode;
};
export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
const { children } = props;
// store
const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
useSWR("INSTANCE_INFORMATION", () => fetchInstanceInfo(), {
revalidateOnFocus: false,
});
// loading state
if (isLoading)
return (
<div className="relative flex h-screen w-full items-center justify-center">
<Spinner />
</div>
);
// something went wrong while in the request
if (error && error?.status === "error")
return (
<div className="relative flex h-screen w-screen items-center justify-center">
Something went wrong. please try again later
</div>
);
// checking if the instance is activated or not
if (error && !error?.data?.is_activated) return <InstanceNotReady />;
// instance is not ready and setup is not done
if (instance?.instance?.is_setup_done === false)
// if (isGodModeEnabled) return <MiniGodModeForm />;
return <InstanceNotReady />;
return <>{children}</>;
});

61
god-mode/lib/wrappers/user-auth-wrapper.tsx
View File

@@ -1,61 +0,0 @@
"use client";
import { FC, ReactNode } from "react";
// import { useRouter, usePathname } from "next/navigation";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
// hooks
import useUser from "hooks/use-user";
// ui
import { Spinner } from "@plane/ui";
export interface IUserAuthWrapper {
children: ReactNode;
}
export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
const { children } = props;
// store hooks
const {
currentUser,
currentUserLoader,
currentUserError,
fetchCurrentUser,
fetchCurrentUserInstanceAdminStatus,
} = useUser();
// router
// const router = useRouter();
// const pathname = usePathname();
// fetching user information
useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
shouldRetryOnError: false,
});
// fetching current user instance admin status
useSWRImmutable(
"CURRENT_USER_INSTANCE_ADMIN_STATUS",
() => fetchCurrentUserInstanceAdminStatus(),
{
shouldRetryOnError: false,
}
);
if (currentUserLoader && !currentUser && !currentUserError) {
return (
<div className="grid h-screen place-items-center bg-custom-background-100 p-4">
<div className="flex flex-col items-center gap-3 text-center">
<Spinner />
</div>
</div>
);
}
// TODO: Login page
if (currentUserError) {
// router.push(`/?next_path=${pathname}`);
// return null;
return <div>Login Page</div>;
}
return <>{children}</>;
});

5
god-mode/next-env.d.ts vendored
View File

@@ -1,5 +0,0 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

9
god-mode/next.config.js
View File

@@ -1,9 +0,0 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
swcMinify: true,
output: "export",
basePath: process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX === "1" ? "/god-mode" : "",
};
module.exports = nextConfig;

46
god-mode/package.json
View File

@@ -1,46 +0,0 @@
{
"name": "god-mode",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "turbo run develop",
"develop": "next dev --port 3333",
"build": "next build",
"preview": "next build && next start",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@plane/types": "*",
"@plane/ui": "*",
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "10.4.14",
"axios": "^1.6.7",
"js-cookie": "^3.0.5",
"lucide-react": "^0.356.0",
"mobx": "^6.12.0",
"mobx-react-lite": "^4.0.5",
"next": "^14.1.0",
"next-themes": "^0.2.1",
"postcss": "8.4.23",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.0",
"swr": "^2.2.4",
"tailwindcss": "3.3.2",
"uuid": "^9.0.1",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@types/js-cookie": "^3.0.6",
"@types/node": "18.16.1",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@types/uuid": "^9.0.8",
"@types/zxcvbn": "^4.4.4",
"eslint-config-custom": "*",
"tailwind-config-custom": "*",
"tsconfig": "*",
"typescript": "^5.4.2"
}
}

8
god-mode/postcss.config.js
View File

@@ -1,8 +0,0 @@
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};

BIN
god-mode/public/logos/github-black.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
god-mode/public/logos/github-white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

1
god-mode/public/logos/google-logo.svg
View File

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

Before

Width:  |  Height:  |  Size: 742 B

BIN
god-mode/public/logos/oidc-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

16
god-mode/public/logos/saml-logo.svg
View File

@@ -1,16 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
<g fill="#C22E33">
<path d="M7.754 2l.463.41c.343.304.687.607 1.026.915C11.44 5.32 13.3 7.565 14.7 10.149c.072.132.137.268.202.403l.098.203-.108.057-.081-.115-.21-.299-.147-.214c-1.019-1.479-2.04-2.96-3.442-4.145a6.563 6.563 0 00-1.393-.904c-1.014-.485-1.916-.291-2.69.505-.736.757-1.118 1.697-1.463 2.653-.045.123-.092.245-.139.367l-.082.215-.172-.055c.1-.348.192-.698.284-1.049.21-.795.42-1.59.712-2.356.31-.816.702-1.603 1.093-2.39.169-.341.338-.682.5-1.025h.092z"/>
<path d="M8.448 11.822c-1.626.77-5.56 1.564-7.426 1.36C.717 11.576 3.71 4.05 5.18 2.91l-.095.218a4.638 4.638 0 01-.138.303l-.066.129c-.76 1.462-1.519 2.926-1.908 4.53a7.482 7.482 0 00-.228 1.689c-.01 1.34.824 2.252 2.217 2.309.67.027 1.347-.043 2.023-.114.294-.03.587-.061.88-.084.108-.008.214-.021.352-.039l.231-.028z"/>
<path d="M3.825 14.781c-.445.034-.89.068-1.333.108 4.097.39 8.03-.277 11.91-1.644-1.265-2.23-2.97-3.991-4.952-5.522.026.098.084.169.141.239l.048.06c.17.226.348.448.527.67.409.509.818 1.018 1.126 1.578.778 1.42.356 2.648-1.168 3.296-1.002.427-2.097.718-3.18.892-1.03.164-2.075.243-3.119.323z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

35
god-mode/public/logos/takeoff-icon-dark.svg
View File

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

Before

Width:  |  Height:  |  Size: 2.9 KiB

40
god-mode/public/logos/takeoff-icon-light.svg
View File

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

Before

Width:  |  Height:  |  Size: 3.1 KiB

62
god-mode/services/api.service.ts
View File

@@ -1,62 +0,0 @@
import axios, { AxiosInstance } from "axios";
export abstract class APIService {
protected baseURL: string;
axiosInstance: AxiosInstance;
constructor(baseURL: string) {
this.baseURL = baseURL;
this.axiosInstance = axios.create({
baseURL,
withCredentials: true,
});
}
get(url: string, config = {}): Promise<any> {
return this.axiosInstance({
method: "get",
url,
...config,
});
}
post(url: string, data = {}, config = {}): Promise<any> {
return this.axiosInstance({
method: "post",
url,
data,
...config,
});
}
put(url: string, data = {}, config = {}): Promise<any> {
return this.axiosInstance({
method: "put",
url,
data,
...config,
});
}
patch(url: string, data = {}, config = {}): Promise<any> {
return this.axiosInstance({
method: "patch",
url,
data,
...config,
});
}
delete(url: string, data?: any, config = {}): Promise<any> {
return this.axiosInstance({
method: "delete",
url,
data: data,
...config,
});
}
request(config = {}) {
return axios(config);
}
}

18
god-mode/services/auth.service.ts
View File

@@ -1,18 +0,0 @@
// services
import { APIService } from "services/api.service";
// helpers
import { API_BASE_URL } from "helpers/common.helper";
export class AuthService extends APIService {
constructor() {
super(API_BASE_URL);
}
async requestCSRFToken(): Promise<{ csrf_token: string }> {
return this.get("/auth/get-csrf-token/")
.then((response) => response.data)
.catch((error) => {
throw error;
});
}
}

61
god-mode/services/instance.service.ts
View File

@@ -1,61 +0,0 @@
import { APIService } from "services/api.service";
// types
import type { IFormattedInstanceConfiguration, IInstance, IInstanceAdmin, IInstanceConfiguration } from "@plane/types";
// helpers
import { API_BASE_URL } from "helpers/common.helper";
export class InstanceService extends APIService {
constructor() {
super(API_BASE_URL);
}
async getInstanceInfo(): Promise<IInstance> {
return this.get("/api/instances/", { headers: {} })
.then((response) => response.data)
.catch((error) => {
throw error;
});
}
async getInstanceAdmins(): Promise<IInstanceAdmin[]> {
return this.get("/api/instances/admins/")
.then((response) => response.data)
.catch((error) => {
throw error;
});
}
async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
return this.patch("/api/instances/", data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async getInstanceConfigurations() {
return this.get("/api/instances/configurations/")
.then((response) => response.data)
.catch((error) => {
throw error;
});
}
async updateInstanceConfigurations(
data: Partial<IFormattedInstanceConfiguration>
): Promise<IInstanceConfiguration[]> {
return this.patch("/api/instances/configurations/", data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async sendTestEmail(receiverEmail: string) {
return this.post("/api/instances/email-credentials-check/", { receiver_email: receiverEmail })
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
}

35
god-mode/services/user.service.ts
View File

@@ -1,35 +0,0 @@
// services
import { APIService } from "services/api.service";
// types
import type { IUser, IInstanceAdminStatus } from "@plane/types";
// helpers
import { API_BASE_URL } from "helpers/common.helper";
export class UserService extends APIService {
constructor() {
super(API_BASE_URL);
}
currentUserConfig() {
return {
url: `${this.baseURL}/api/users/me/`,
headers: this.getHeaders(),
};
}
async currentUser(): Promise<IUser> {
return this.get("/api/users/me/")
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
async currentUserInstanceAdminStatus(): Promise<IInstanceAdminStatus> {
return this.get("/api/users/me/instance-admin/")
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
}

206
god-mode/store/theme.store.ts
View File

@@ -1,206 +0,0 @@
// mobx
import { action, observable, makeObservable } from "mobx";
type TRgb = { r: number; g: number; b: number };
type TShades = {
10: TRgb;
20: TRgb;
30: TRgb;
40: TRgb;
50: TRgb;
60: TRgb;
70: TRgb;
80: TRgb;
90: TRgb;
100: TRgb;
200: TRgb;
300: TRgb;
400: TRgb;
500: TRgb;
600: TRgb;
700: TRgb;
800: TRgb;
900: TRgb;
};
export interface IThemeStore {
// observables
theme: string | undefined;
sidebarCollapsed: boolean | undefined;
// actions
toggleSidebar: (collapsed?: boolean) => void;
setTheme: (theme: any) => void;
}
export class ThemeStore implements IThemeStore {
// observables
sidebarCollapsed: boolean | undefined = undefined;
theme: string | undefined = undefined;
themePallette: any | undefined = undefined;
constructor() {
makeObservable(this, {
// observable
sidebarCollapsed: observable.ref,
theme: observable.ref,
// action
toggleSidebar: action,
setTheme: action,
// computed
});
}
/**
* Toggle the sidebar collapsed state
* @param collapsed
*/
toggleSidebar = (collapsed?: boolean) => {
if (collapsed === undefined) {
this.sidebarCollapsed = !this.sidebarCollapsed;
} else {
this.sidebarCollapsed = collapsed;
}
localStorage.setItem(
"god_mode_sidebar_collapsed",
this.sidebarCollapsed.toString()
);
};
/**
* Sets the user theme and applies it to the platform
* @param _theme
*/
setTheme = async (_theme: { theme: any }) => {
try {
const currentTheme: string = _theme?.theme?.theme?.toString();
// updating the local storage theme value
localStorage.setItem("theme", currentTheme);
// updating the mobx theme value
this.theme = currentTheme;
// applying the theme to platform if the selected theme is custom
if (currentTheme === "custom" && this.themePallette) {
this.applyTheme(
this.themePallette?.theme?.palette !== ",,,,"
? this.themePallette?.theme?.palette
: "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
this.themePallette?.theme?.darkPalette
);
} else this.unsetCustomCssVariables();
} catch (error) {
console.error("setting user theme error", error);
}
};
calculateShades = (hexValue: string): TShades => {
const shades: Partial<TShades> = {};
const { r, g, b } = this.hexToRgb(hexValue);
const convertHexToSpecificShade = (shade: number): TRgb => {
if (shade <= 100) {
const decimalValue = (100 - shade) / 100;
const newR = Math.floor(r + (255 - r) * decimalValue);
const newG = Math.floor(g + (255 - g) * decimalValue);
const newB = Math.floor(b + (255 - b) * decimalValue);
return {
r: newR,
g: newG,
b: newB,
};
} else {
const decimalValue = 1 - Math.ceil((shade - 100) / 100) / 10;
const newR = Math.ceil(r * decimalValue);
const newG = Math.ceil(g * decimalValue);
const newB = Math.ceil(b * decimalValue);
return {
r: newR,
g: newG,
b: newB,
};
}
};
for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
shades[i as keyof TShades] = convertHexToSpecificShade(i);
return shades as TShades;
};
unsetCustomCssVariables = () => {
for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
const dom = document.querySelector<HTMLElement>("[data-theme='custom']");
dom?.style.removeProperty(`--color-background-${i}`);
dom?.style.removeProperty(`--color-text-${i}`);
dom?.style.removeProperty(`--color-border-${i}`);
dom?.style.removeProperty(`--color-primary-${i}`);
dom?.style.removeProperty(`--color-sidebar-background-${i}`);
dom?.style.removeProperty(`--color-sidebar-text-${i}`);
dom?.style.removeProperty(`--color-sidebar-border-${i}`);
dom?.style.removeProperty("--color-scheme");
}
};
applyTheme = (palette: string, isDarkPalette: boolean) => {
if (!palette) return;
const dom = document?.querySelector<HTMLElement>("[data-theme='custom']");
// palette: [bg, text, primary, sidebarBg, sidebarText]
const values: string[] = palette.split(",");
values.push(isDarkPalette ? "dark" : "light");
const bgShades = this.calculateShades(values[0]);
const textShades = this.calculateShades(values[1]);
const primaryShades = this.calculateShades(values[2]);
const sidebarBackgroundShades = this.calculateShades(values[3]);
const sidebarTextShades = this.calculateShades(values[4]);
for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
const shade = i as keyof TShades;
const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
const primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[shade].b}`;
const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
dom?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
dom?.style.setProperty(`--color-text-${shade}`, textRgbValues);
dom?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
dom?.style.setProperty(
`--color-sidebar-background-${shade}`,
sidebarBackgroundRgbValues
);
dom?.style.setProperty(
`--color-sidebar-text-${shade}`,
sidebarTextRgbValues
);
if (i >= 100 && i <= 400) {
const borderShade =
i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;
dom?.style.setProperty(
`--color-border-${shade}`,
`${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
);
dom?.style.setProperty(
`--color-sidebar-border-${shade}`,
`${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
);
}
}
dom?.style.setProperty("--color-scheme", values[5]);
};
hexToRgb = (hex: string): TRgb => {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
};
}

100
god-mode/store/user.store.ts
View File

@@ -1,100 +0,0 @@
import { action, observable, runInAction, makeObservable } from "mobx";
// services
import { UserService } from "services/user.service";
import { AuthService } from "services/auth.service";
// interfaces
import { IUser } from "@plane/types";
export interface IUserStore {
// states
currentUserError: any | null;
currentUserLoader: boolean;
// observables
isUserLoggedIn: boolean | null;
currentUser: IUser | null;
isUserInstanceAdmin: boolean | null;
// fetch actions
fetchCurrentUser: () => Promise<IUser>;
fetchCurrentUserInstanceAdminStatus: () => Promise<boolean>;
signOut: () => Promise<void>;
}
export class UserStore implements IUserStore {
// states
currentUserError: any | null = null;
currentUserLoader: boolean = false;
// observables
isUserLoggedIn: boolean | null = null;
currentUser: IUser | null = null;
isUserInstanceAdmin: boolean | null = null;
// services
userService;
authService;
constructor() {
makeObservable(this, {
// states
currentUserError: observable.ref,
currentUserLoader: observable.ref,
// observable
currentUser: observable,
isUserInstanceAdmin: observable.ref,
// action
fetchCurrentUser: action,
fetchCurrentUserInstanceAdminStatus: action,
signOut: action,
});
this.userService = new UserService();
this.authService = new AuthService();
}
/**
* Fetches the current user
* @returns Promise<IUser>
*/
fetchCurrentUser = async () => {
try {
this.currentUserLoader = true;
const response = await this.userService.currentUser();
runInAction(() => {
this.isUserLoggedIn = true;
this.currentUser = response;
this.currentUserError = null;
this.currentUserLoader = false;
});
return response;
} catch (error) {
runInAction(() => {
this.currentUserLoader = false;
this.currentUserError = error;
});
throw error;
}
};
/**
* Fetches the current user instance admin status
* @returns Promise<boolean>
*/
fetchCurrentUserInstanceAdminStatus = async () =>
await this.userService.currentUserInstanceAdminStatus().then((response) => {
runInAction(() => {
this.isUserInstanceAdmin = response.is_instance_admin;
});
return response.is_instance_admin;
});
/**
* Signs out the current user
* @returns Promise<void>
*/
signOut = async () =>
await this.authService.signOut().then(() => {
runInAction(() => {
this.currentUser = null;
this.isUserLoggedIn = false;
});
});
}

5
god-mode/tailwind.config.js
View File

@@ -1,5 +0,0 @@
const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
module.exports = {
presets: [sharedConfig],
};

18
god-mode/tsconfig.json
View File

@@ -1,18 +0,0 @@
{
"extends": "tsconfig/nextjs.json",
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"],
"compilerOptions": {
"baseUrl": ".",
"jsx": "preserve",
"esModuleInterop": true,
"paths": {
"@/*": ["*"]
},
"plugins": [
{
"name": "next"
}
]
}
}

2701
god-mode/yarn.lock
View File

File diff suppressed because it is too large Load Diff