diff --git a/src-ts/profile-selector/ProfileSelector.tsx b/src-ts/profile-selector/ProfileSelector.tsx index 8706669..1438e50 100644 --- a/src-ts/profile-selector/ProfileSelector.tsx +++ b/src-ts/profile-selector/ProfileSelector.tsx @@ -8,6 +8,7 @@ import { UserProfile } from './user-profile.model' interface ProfileSelectorProps { initialized: boolean profile: UserProfile + workPath: string } const ProfileSelector: FC = (props: ProfileSelectorProps) => { @@ -23,7 +24,12 @@ const ProfileSelector: FC = (props: ProfileSelectorProps) return (
{!isLoggedIn && } - {isLoggedIn && } + {isLoggedIn && ( + + )}
) } diff --git a/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx b/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx index 0676419..65585d2 100644 --- a/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx +++ b/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx @@ -8,6 +8,7 @@ import styles from './ProfileLoggedIn.module.scss' interface ProfileLoggedInProps { profile: UserProfile + workPath: string } const ProfileLoggedIn: FC = (props: ProfileLoggedInProps) => { @@ -61,6 +62,7 @@ const ProfileLoggedIn: FC = (props: ProfileLoggedInProps) profile={profile} refObject={ref} toggleProfilePanel={toggleProfilePanel} + workPath={props.workPath} /> )} diff --git a/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx index 8ae951e..a95fe7a 100644 --- a/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx +++ b/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx @@ -10,6 +10,7 @@ interface ProfilePanelProps { profile: UserProfile refObject: MutableRefObject toggleProfilePanel: () => void + workPath: string } const ProfilePanel: FC = (props: ProfilePanelProps) => { @@ -21,7 +22,7 @@ const ProfilePanel: FC = (props: ProfilePanelProps) => { return <> } - const authUrlLogout: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}` + const authUrlLogout: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?logout=true&retUrl=${encodeURIComponent(`https://${window.location.host}${props.workPath}`)}` return (
= (props: ProfilePanelProps) => { props.toggleProfilePanel()} - to='/self-service/account' + to={`${props.workPath}/account`} > Account diff --git a/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx b/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx index f28e441..275d9fb 100644 --- a/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx +++ b/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx @@ -7,7 +7,7 @@ import styles from './ProfileNotLoggedIn.module.scss' const ProfileNotLoggedIn: FC<{}> = () => { - const login: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}` + const login: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?retUrl=${encodeURIComponent(window.location.href)}` const signup: string = `${login}®Source=tcBusiness&mode=signUp` return ( diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index cfc12dc..a27847d 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -47,6 +47,8 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { const loginUrl = isSelfService ? getSelfServiceLoginUrl() : getLoginUrl(); const signupUrl = isSelfService ? getSelfServiceSignupUrl() : ""; + const workPath = '/self-service' + // Check app title with route activated useEffect(() => { const activeApp = apps.find( @@ -54,7 +56,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { ); setActiveApp(activeApp); - setIsSelfService(routerLocation.pathname.indexOf("/self-service") !== -1); + setIsSelfService(routerLocation.pathname.indexOf(workPath) !== -1); }, [routerLocation, apps]); // Change micro-app callback @@ -65,14 +67,90 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { [setActiveApp] ); - const renderTopcoderLogo = - hideSwitchTools && !isSelfService ? ( - Topcoder Logo - ) : ( - + + // if this is work app, we only want to show the link as clickable + // if we're not on the page to which the link goes + const isSelfServiceHome = [workPath, `${workPath}/dashboard`].includes(routerLocation.pathname) + + // if the consuming app has requested that we disable the navigation + // or we're on the work app home page, + // don't make the logo a link + let renderTopcoderLogo + + if (hideSwitchTools || isSelfServiceHome) { + + const linkClass = isSelfServiceHome ? 'logo-no-link' : '' + renderTopcoderLogo = ( + Topcoder Logo + ) + + } else { + + renderTopcoderLogo = ( + Topcoder Logo - ); + ) + } + + // if this is not the self service app or it's the self service home, + // make the title not clickable + const renderTitle = !isSelfService || isSelfServiceHome + ? activeApp?.title || "" + : ( + + Work + + ) + + const renderProfile = !isSelfService + ? ( + <> + + + + ) + : ( + + ) + + const renderLogin = ( + + Log in + + ) + + const renderSignup = ( + + ) + const renderNotLoggedIn = !isSelfService + ? renderLogin + : (isMobile + ? renderSignup + : ( + <> + {renderLogin} + {renderSignup} + + ) + ) + return (
@@ -86,10 +164,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { {renderTopcoderLogo}
- {isSelfService && ( - Work - )} - {!isSelfService && (activeApp?.title || "")} + {renderTitle}
)} @@ -106,22 +181,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { {isMobile ? ( {auth.isInitialized && - (auth.tokenV3 ? ( - auth.profile && ( - - - - - ) - ) : ( - - Login - - ))} + (auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))} ) : ( @@ -132,43 +192,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { )} {auth.isInitialized && - (auth.tokenV3 ? ( - auth.profile && ( - - {!isSelfService && ( - <> - - - - )} - {isSelfService && ( - - )} - - ) - ) : ( - - - Login - - {isSelfService && ( - - )} - - ))} + (auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))} )}
diff --git a/src/components/NavBar/styles.css b/src/components/NavBar/styles.css index b1e4acb..4d607be 100644 --- a/src/components/NavBar/styles.css +++ b/src/components/NavBar/styles.css @@ -9,12 +9,20 @@ position: relative; z-index: 1; font-family: "Roboto", Arial, Helvetica, sans-serif; -} -.navbar { padding: 0 24px; background-color: #0C0C0C; } +.navbar .logo-no-link { + margin-top: -3px; +} + +@media (max-width: 1023px) { + .navbar .logo-no-link { + margin-top: 0; + } +} + .navbar-left { display: flex; flex-direction: row;