diff --git a/apps/web/ce/helpers/oauth-config.tsx b/apps/web/ce/helpers/oauth-config.tsx new file mode 100644 index 0000000000..1985fbf73e --- /dev/null +++ b/apps/web/ce/helpers/oauth-config.tsx @@ -0,0 +1,77 @@ +// plane imports +import { API_BASE_URL } from "@plane/constants"; +import type { TOAuthOption } from "@plane/ui"; +// assets +import GithubLightLogo from "@/app/assets/logos/github-black.png?url"; +import GithubDarkLogo from "@/app/assets/logos/github-dark.svg?url"; +import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url"; +import GiteaLogo from "@/app/assets/logos/gitea-logo.svg?url"; +import GoogleLogo from "@/app/assets/logos/google-logo.svg?url"; +import type { IInstanceConfig } from "@plane/types"; + +export type OAuthConfigParams = { + OauthButtonContent: "Sign up" | "Sign in"; + next_path: string | null; + config: IInstanceConfig | undefined; + resolvedTheme: string | undefined; +}; + +export const isOAuthEnabled = (config: IInstanceConfig | undefined) => + (config && + (config?.is_google_enabled || + config?.is_github_enabled || + config?.is_gitlab_enabled || + config?.is_gitea_enabled)) || + false; + +export function OAUTH_CONFIG({ + OauthButtonContent, + next_path, + config, + resolvedTheme, +}: OAuthConfigParams): TOAuthOption[] { + return [ + { + id: "google", + text: `${OauthButtonContent} with Google`, + icon: Google Logo, + onClick: () => { + window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`); + }, + enabled: config?.is_google_enabled || false, + }, + { + id: "github", + text: `${OauthButtonContent} with GitHub`, + icon: ( + GitHub Logo + ), + onClick: () => { + window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`); + }, + enabled: config?.is_github_enabled || false, + }, + { + id: "gitlab", + text: `${OauthButtonContent} with GitLab`, + icon: GitLab Logo, + onClick: () => { + window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`); + }, + enabled: config?.is_gitlab_enabled || false, + }, + { + id: "gitea", + text: `${OauthButtonContent} with Gitea`, + icon: Gitea Logo, + onClick: () => { + window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`); + }, + enabled: config?.is_gitea_enabled || false, + }, + ]; +} diff --git a/apps/web/core/components/account/auth-forms/auth-root.tsx b/apps/web/core/components/account/auth-forms/auth-root.tsx index bb7600310b..907ed6cbb4 100644 --- a/apps/web/core/components/account/auth-forms/auth-root.tsx +++ b/apps/web/core/components/account/auth-forms/auth-root.tsx @@ -1,16 +1,9 @@ -import type { FC } from "react"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { observer } from "mobx-react"; import { useSearchParams } from "next/navigation"; import { useTheme } from "next-themes"; // plane imports -import { API_BASE_URL } from "@plane/constants"; import { OAuthOptions } from "@plane/ui"; -// assets -import GithubLightLogo from "@/app/assets/logos/github-black.png?url"; -import GithubDarkLogo from "@/app/assets/logos/github-dark.svg?url"; -import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url"; -import GoogleLogo from "@/app/assets/logos/google-logo.svg?url"; // helpers import type { TAuthErrorInfo } from "@/helpers/authentication.helper"; import { @@ -27,6 +20,8 @@ import { TermsAndConditions } from "../terms-and-conditions"; import { AuthBanner } from "./auth-banner"; import { AuthHeader } from "./auth-header"; import { AuthFormRoot } from "./form-root"; +// plane web imports +import { OAUTH_CONFIG, isOAuthEnabled as isOAuthEnabledHelper } from "@/plane-web/helpers/oauth-config"; type TAuthRoot = { authMode: EAuthModes; @@ -54,8 +49,7 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) { const { config } = useInstance(); // derived values - const isOAuthEnabled = - (config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false; + const isOAuthEnabled = isOAuthEnabledHelper(config); useEffect(() => { if (!authMode && currentAuthMode) setAuthMode(currentAuthMode); @@ -107,41 +101,7 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) { const OauthButtonContent = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in"; - const OAuthConfig = [ - { - id: "google", - text: `${OauthButtonContent} with Google`, - icon: Google Logo, - onClick: () => { - window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`); - }, - enabled: config?.is_google_enabled, - }, - { - id: "github", - text: `${OauthButtonContent} with GitHub`, - icon: ( - GitHub Logo - ), - onClick: () => { - window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`); - }, - enabled: config?.is_github_enabled, - }, - { - id: "gitlab", - text: `${OauthButtonContent} with GitLab`, - icon: GitLab Logo, - onClick: () => { - window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`); - }, - enabled: config?.is_gitlab_enabled, - }, - ]; + const OAuthConfig = OAUTH_CONFIG({ OauthButtonContent, next_path, config, resolvedTheme }); return (