PLAT-828 profile api to PLAT-802_profile-util

package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "@datadog/browser-logs": "^4.5.0",
         "@heroicons/react": "^1.0.6",
+        "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
         "classnames": "^2.3.1",
         "react": "^17.0.2",
@@ -51,6 +52,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.2.1",
+        "@types/axios": "^0.14.0",
         "@types/jest": "^27.0.1",
         "@types/node": "^16.7.13",
         "@types/react": "^17.0.20",

src/App.tsx

@@ -3,11 +3,11 @@ import { Route, Routes } from 'react-router-dom'
 
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
-import { AnalyticsService, LoggingService, ProfileProvider } from './lib'
+import { initializeAnalytics, initializeLogger, ProfileProvider  } from './lib'
 import { RouteContext, RouteContextData } from './lib/route-provider'
 
-new AnalyticsService().initialize(EnvironmentConfig)
-new LoggingService().initialize(EnvironmentConfig)
+initializeAnalytics(EnvironmentConfig)
+initializeLogger(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 

src/config/environments/environment.default.config.ts

@@ -4,6 +4,7 @@ import { AppHostEnvironment } from './app-host-environment.enum'
 
 export const EnvironmentConfigDefault: GlobalConfig = {
     API: {
+        V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
     ENV: AppHostEnvironment.default,

src/config/environments/environment.prod.config.ts

@@ -6,6 +6,7 @@ import { EnvironmentConfigDefault } from './environment.default.config'
 export const EnvironmentConfigProd: GlobalConfig = {
     ...EnvironmentConfigDefault,
     API: {
+        V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
     ENV: AppHostEnvironment.prod,

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -2,7 +2,7 @@
 
 $overlaySquare: calc($pad-xxxxl + 2 * $border);
 
-.profile-avater,
+.profile-avatar,
 .overlay {
     cursor: pointer;
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { Avatar, IconOutline, LoggingService, ProfileContext, ProfileContextData } from '../../../../../lib'
+import { Avatar, IconOutline, logInfo , ProfileContext, ProfileContextData } from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
@@ -9,10 +9,9 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     const { profile }: ProfileContextData = useContext(ProfileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const logger: LoggingService = new LoggingService()
 
     if (!profile) {
-        logger.logInfo('tried to render the logged in profile w/out a profile')
+        logInfo('tried to render the logged in profile w/out a profile')
         return <></>
     }
 
@@ -22,7 +21,7 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     return (
         <>
-            <div className={styles['profile-avater']} onClick={() => toggleProfilePanel()} >
+            <div className={styles['profile-avatar']} onClick={() => toggleProfilePanel()} >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -2,10 +2,10 @@ import { FC, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
-    AuthenticationUrlConfig,
+    logoutUrl,
     ProfileContext,
     ProfileContextData,
-    ProfileRouteConfig,
+    profileRoute,
 } from '../../../../../../lib'
 
 import styles from './ProfilePanel.module.scss'
@@ -31,11 +31,11 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={ProfileRouteConfig.profile}
+                to={profileRoute}
             >
                 My Profile
             </Link>
-            <a href={AuthenticationUrlConfig.logout} className={styles.logout}>
+            <a href={logoutUrl} className={styles.logout}>
                 Log Out
             </a>
         </div>

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -1,29 +1,28 @@
-import classNames from 'classnames'
 import { FC } from 'react'
 
-import { AuthenticationUrlConfig, routeRoot } from '../../../../../lib'
+import { Button, loginUrl, routeRoot, signupUrl } from '../../../../../lib'
 import '../../../../../lib/styles/index.scss'
 
 import styles from './ProfileNotLoggedIn.module.scss'
 
 const ProfileNotLoggedIn: FC<{}> = () => {
 
-    const buttonClass: string = 'button'
-
     return (
         <>
-            <a
-                className={classNames(buttonClass, styles.login)}
-                href={AuthenticationUrlConfig.login(routeRoot)}
-            >
-                Log In
-            </a>
-            <a
-                className={classNames(buttonClass, 'all-white', styles.signup)}
-                href={AuthenticationUrlConfig.signup(routeRoot)}
-            >
-                Sign Up
-            </a>
+            <Button
+                className={styles.login}
+                label='Log In'
+                size='sm'
+                buttonStyle='text'
+                url={loginUrl(routeRoot)}
+            />
+            <Button
+                className={styles.signup}
+                label='Sign Up'
+                size='sm'
+                buttonStyle='tertiary'
+                url={signupUrl(routeRoot)}
+            />
         </>
     )
 }

src/lib/button/Button.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+
+interface ButtonProps {
+    readonly buttonStyle?: 'primary' | 'secondary' | 'tertiary' | 'text'
+    readonly className?: string
+    readonly disable?: boolean
+    readonly label: string
+    readonly onClick?: (event?: any) => void
+    readonly size?: 'sm' | 'md' | 'lg' | 'xl'
+    readonly type?: 'button' | 'submit'
+    readonly url?: string
+}
+
+const Button: FC<ButtonProps> = (props: ButtonProps) => {
+
+    const classes: string = classNames(
+        'button',
+        props.className,
+        props.buttonStyle || 'primary',
+        `button-${props.size || 'md'}`
+    )
+
+    // if there is a url, this is a link button
+    if (!!props.url) {
+        return (
+            <a
+                className={classes}
+                href={props.url}
+            >
+                {props.label}
+            </a>
+        )
+    }
+
+    // if there is no url and no click handler, we hava a prob
+    if (!props.onClick) {
+        throw new Error(`button has neither a url or a click handler`)
+    }
+
+    // create a safe click handler that isn't null so the compiler
+    // doesn't complain
+    const clickHandler: (event: any) => void = props.onClick
+
+    return (
+        <button
+            className={classes}
+            disabled={!!props.disable}
+            onClick={event => clickHandler(event)}
+            type={props.type || 'button'}
+        >
+            {props.label}
+        </button>
+    )
+}
+
+export default Button

src/lib/button/Buttons.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Button />', () => {
+
+    test('it should render the content', () => { })
+})

src/lib/button/index.ts

@@ -0,0 +1 @@
+export {  default as Button } from './Button'

src/lib/form-elements/form-field/Form-Field.module.scss

@@ -58,6 +58,7 @@ $border-xs: 1px;
             @extend .ultra-small;
             @include font-weight-medium;
             line-height: calc($pad-md - $border);
+            font-style: normal;
         }
     }
 

src/lib/form-elements/form-field/text-input/Text-Input.tsx

@@ -6,16 +6,19 @@ import styles from './Text-Input.module.scss'
 interface TextInputProps {
     defaultValue?: string
     name: string
-    props: { [attr: string]: string | boolean }
+    props: {
+        [attr: string]: string | boolean,
+     }
     styleName?: string
+    type?: 'text' | 'password'
 }
 
 const TextInput: FC<TextInputProps> = (props: TextInputProps) => {
     return (
         <input
             className={classNames(styles['form-input-text'], props.styleName || '')}
             name={props.name}
-            type='text'
+            type={props.type || 'text'}
             {...props.props}
         />
     )

src/lib/functions/analytics-functions/analytics.functions.test.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('Analytics Functions', () => {
+
+    test('analytics', () => { })
+})

src/lib/functions/analytics-functions/analytics.functions.ts

@@ -0,0 +1,17 @@
+import TagManager from 'react-gtm-module'
+
+import { GlobalConfig } from '../../global-config.model'
+
+export function initialize(config: GlobalConfig): void {
+
+    // if we don't have an ID
+    // then tags aren't supported in this environment,
+    // so don't initialize anything
+    if (!config.TAG_MANAGER_ID) {
+        return
+    }
+
+    TagManager.initialize({
+        gtmId: config.TAG_MANAGER_ID,
+    })
+}

src/lib/functions/analytics-functions/index.ts

@@ -0,0 +1 @@
+export { initialize as initializeAnalytics } from './analytics.functions'

src/lib/functions/authentication-functions/authentication-url.config.ts

@@ -0,0 +1,13 @@
+import { EnvironmentConfig } from '../../../config'
+
+export const authentication: string = EnvironmentConfig.URL.ACCOUNTS_APP_CONNECTOR
+
+export function login(fallback: string): string {
+    return `${authentication}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
+}
+
+export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
+
+export function signup(fallback: string): string {
+    return `${login(fallback)}&regSource=tcBusiness&mode=signUp`
+}

src/lib/services/authentication-service/authentication.service.test.ts → src/lib/functions/authentication-functions/authentication.functions.test.ts

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('Authentication Service', () => {
+describe('Authentication Functions', () => {
 
     test('authentication', () => { })
 })

src/lib/functions/authentication-functions/authentication.functions.ts

@@ -0,0 +1,67 @@
+import cookies from 'browser-cookies'
+import { configureConnector, decodeToken, getFreshToken } from 'tc-auth-lib'
+
+import { User } from '../../../../types/tc-auth-lib'
+import { EnvironmentConfig } from '../../../config'
+import { logError } from '../logging-functions'
+
+import { authentication as authenticationUrl } from './authentication-url.config'
+import { CookieKeys } from './cookie-keys.enum'
+
+interface TokenData {
+    tokenV2?: string
+    tokenV3?: string
+}
+
+configureConnector({
+    connectorUrl: authenticationUrl,
+    frameId: 'tc-accounts-iframe',
+    mockMode: undefined,
+    mockToken: undefined,
+})
+
+export async function authenticate(): Promise<string | undefined> {
+
+    return getFreshToken()
+        .then((tokenV3: string) => {
+            const tokenV2: string | null = cookies.get(CookieKeys.tcjwt)
+            return {
+                tokenV2,
+                tokenV3,
+            }
+        })
+        .catch((error: Error) => {
+            logError(error?.message || `${error}` || 'unknown error getting authentication token')
+            return {}
+        })
+        .then((token: TokenData) => {
+            handleRefresh(token)
+            return token.tokenV3
+        })
+}
+
+function handleRefresh(token: TokenData): number {
+
+    let time: number = Number.MAX_VALUE
+
+    const user: User = !!token.tokenV3 ? decodeToken(token.tokenV3) : {}
+
+    // if we havea tctv2, use its expiration
+    if (!!token.tokenV2) {
+        time = decodeToken(token.tokenV2).exp
+    }
+
+    // if we have a user, take the min btwn
+    // the current time and the uservl expiration
+    if (!!user.exp) {
+        time = Math.min(time, user.exp)
+    }
+
+    if (time < Number.MAX_VALUE) {
+        time = 1000 * (time - EnvironmentConfig.REAUTH_OFFSET)
+        time = Math.max(0, time - Date.now())
+        setTimeout(() => authenticate(), time)
+    }
+
+    return time
+}

src/lib/functions/authentication-functions/index.ts

@@ -0,0 +1,6 @@
+export {
+    login as loginUrl,
+    logout as logoutUrl,
+    signup as signupUrl,
+} from './authentication-url.config'
+export * from './authentication.functions'

src/lib/functions/index.ts

@@ -0,0 +1,5 @@
+export * from './analytics-functions'
+export { loginUrl, logoutUrl, signupUrl } from './authentication-functions'
+export * from './logging-functions'
+export * from './user-functions'
+export * from './xhr-functions'

src/lib/functions/logging-functions/index.ts

@@ -0,0 +1,5 @@
+export {
+    initialize as initializeLogger,
+    logError,
+    logInfo,
+} from './logging.functions'

src/lib/functions/logging-functions/logging.functions.test.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('Logging Functions', () => {
+
+    test('', () => { })
+})