diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx index 5554947be39..656d0531dd6 100644 --- a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx +++ b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx @@ -42,7 +42,7 @@ export const AdminSidebarDropdown = observer(() => { )} >
- {currentUser?.email} + {currentUser?.email}
= (props) => { - const { authMode, children } = props; + const { authMode } = props; const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => { if (mode) { @@ -38,7 +37,7 @@ export const AuthHeader: FC = (props) => { } return { - header: "Comment or react to work itemss", + header: "Comment or react to work items", subHeader: "Use plane to add your valuable inputs to features.", }; }; @@ -47,11 +46,10 @@ export const AuthHeader: FC = (props) => { return ( <> -
-

{header}

-

{subHeader}

+
+ {header} + {subHeader}
- {children} ); }; diff --git a/apps/space/core/components/account/auth-forms/auth-root.tsx b/apps/space/core/components/account/auth-forms/auth-root.tsx index 2ce944a2589..653c97cc73a 100644 --- a/apps/space/core/components/account/auth-forms/auth-root.tsx +++ b/apps/space/core/components/account/auth-forms/auth-root.tsx @@ -2,10 +2,14 @@ import React, { FC, useEffect, useState } from "react"; import { observer } from "mobx-react"; +import Image from "next/image"; import { useSearchParams } from "next/navigation"; +import { useTheme } from "next-themes"; // plane imports +import { API_BASE_URL } from "@plane/constants"; import { SitesAuthService } from "@plane/services"; import { IEmailCheckData } from "@plane/types"; +import { OAuthOptions } from "@plane/ui"; // components import { AuthHeader, @@ -13,7 +17,6 @@ import { AuthEmailForm, AuthUniqueCodeForm, AuthPasswordForm, - OAuthOptions, TermsAndConditions, } from "@/components/account"; // helpers @@ -27,6 +30,11 @@ import { import { useInstance } from "@/hooks/store"; // types import { EAuthModes, EAuthSteps } from "@/types/auth"; +// assets +import GithubLightLogo from "/public/logos/github-black.png"; +import GithubDarkLogo from "/public/logos/github-dark.svg"; +import GitlabLogo from "/public/logos/gitlab-logo.svg"; +import GoogleLogo from "/public/logos/google-logo.svg"; const authService = new SitesAuthService(); @@ -36,6 +44,7 @@ export const AuthRoot: FC = observer(() => { const emailParam = searchParams.get("email") || undefined; const error_code = searchParams.get("error_code") || undefined; const nextPath = searchParams.get("next_path") || undefined; + const next_path = searchParams.get("next_path"); // states const [authMode, setAuthMode] = useState(EAuthModes.SIGN_UP); const [authStep, setAuthStep] = useState(EAuthSteps.EMAIL); @@ -43,6 +52,7 @@ export const AuthRoot: FC = observer(() => { const [errorInfo, setErrorInfo] = useState(undefined); const [isPasswordAutoset, setIsPasswordAutoset] = useState(true); // hooks + const { resolvedTheme } = useTheme(); const { config } = useInstance(); useEffect(() => { @@ -146,12 +156,54 @@ export const AuthRoot: FC = observer(() => { }); }; + const content = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in"; + + const OAuthConfig = [ + { + id: "google", + text: `${content} 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: `${content} 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: `${content} 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, + }, + ]; + return ( -
- +
+
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && ( setErrorInfo(value)} /> )} + + {isOAuthEnabled && } + {authStep === EAuthSteps.EMAIL && } {authStep === EAuthSteps.UNIQUE_CODE && ( { }} /> )} - {isOAuthEnabled && } - +
); }); diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx index 4815fef6aee..6fb08ff7a68 100644 --- a/apps/space/core/components/account/auth-forms/email.tsx +++ b/apps/space/core/components/account/auth-forms/email.tsx @@ -46,13 +46,13 @@ export const AuthEmailForm: FC = observer((props) => { return (
-