@bloom-housing/ui-components 4.4.1-alpha.7 → 5.0.0

package/src/authentication/AuthContext.ts

@@ -1,386 +0,0 @@
-import {
-  ApplicationsService,
-  ApplicationFlaggedSetsService,
-  AuthService,
-  ListingsService,
-  User,
-  UserBasic,
-  UserCreate,
-  UserService,
-  UserProfileService,
-  serviceOptions,
-  Status,
-  AmiChartsService,
-  ReservedCommunityTypesService,
-  UnitAccessibilityPriorityTypesService,
-  UnitTypesService,
-  PreferencesService,
-  JurisdictionsService,
-  ProgramsService,
-  RequestMfaCodeResponse,
-  EnumRequestMfaCodeMfaType,
-  EnumLoginMfaType,
-} from "@bloom-housing/backend-core/types"
-import {
-  createContext,
-  createElement,
-  FunctionComponent,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-  useCallback,
-} from "react"
-import qs from "qs"
-import axiosStatic from "axios"
-import { ConfigContext } from "../config/ConfigContext"
-import { createAction, createReducer } from "typesafe-actions"
-import { clearToken, getToken, getTokenTtl, setToken } from "./token"
-import { NavigationContext } from "../config/NavigationContext"
-
-type ContextProps = {
-  amiChartsService: AmiChartsService
-  applicationsService: ApplicationsService
-  applicationFlaggedSetsService: ApplicationFlaggedSetsService
-  listingsService: ListingsService
-  jurisdictionsService: JurisdictionsService
-  userService: UserService
-  userProfileService: UserProfileService
-  authService: AuthService
-  preferencesService: PreferencesService
-  programsService: ProgramsService
-  reservedCommunityTypeService: ReservedCommunityTypesService
-  unitPriorityService: UnitAccessibilityPriorityTypesService
-  unitTypesService: UnitTypesService
-  loadProfile: (redirect?: string) => void
-  login: (
-    email: string,
-    password: string,
-    mfaCode?: string,
-    mfaType?: EnumLoginMfaType
-  ) => Promise<User | undefined>
-  loginWithToken: (token: string) => Promise<User | undefined>
-  resetPassword: (
-    token: string,
-    password: string,
-    passwordConfirmation: string
-  ) => Promise<User | undefined>
-  signOut: () => void
-  confirmAccount: (token: string) => Promise<User | undefined>
-  forgotPassword: (email: string) => Promise<string | undefined>
-  createUser: (user: UserCreate) => Promise<UserBasic | undefined>
-  resendConfirmation: (email: string) => Promise<Status | undefined>
-  accessToken?: string
-  initialStateLoaded: boolean
-  loading: boolean
-  profile?: User
-  requestMfaCode: (
-    email: string,
-    password: string,
-    mfaType: EnumRequestMfaCodeMfaType,
-    phoneNumber?: string
-  ) => Promise<RequestMfaCodeResponse | undefined>
-}
-
-// Internal Provider State
-type AuthState = {
-  accessToken?: string
-  initialStateLoaded: boolean
-  language?: string
-  loading: boolean
-  profile?: User
-  refreshTimer?: number
-  storageType: string
-}
-
-type DispatchType = (...arg: [unknown]) => void
-
-// State Mutation Actions
-const saveToken = createAction("SAVE_TOKEN")<{
-  apiUrl: string
-  accessToken: string
-  dispatch: DispatchType
-}>()
-const saveProfile = createAction("SAVE_PROFILE")<User | null>()
-const startLoading = createAction("START_LOADING")()
-const stopLoading = createAction("STOP_LOADING")()
-const signOut = createAction("SIGN_OUT")()
-
-const scheduleTokenRefresh = (accessToken: string, onRefresh: (accessToken: string) => void) => {
-  const ttl = getTokenTtl(accessToken)
-
-  if (ttl < 0) {
-    // If ttl is negative, then our token is already expired, we'll have to re-login to get a new token.
-    //dispatch(signOut())
-    return null
-  } else {
-    // Queue up a refresh for ~1 minute before the token expires
-    return (setTimeout(() => {
-      const run = async () => {
-        const reposne = await new AuthService().token()
-        if (reposne) {
-          onRefresh(reposne.accessToken)
-        }
-      }
-      void run()
-    }, Math.max(ttl - 60000, 0)) as unknown) as number
-  }
-}
-const reducer = createReducer(
-  {
-    loading: false,
-    initialStateLoaded: false,
-    storageType: "session",
-    language: "en",
-  } as AuthState,
-  {
-    SAVE_TOKEN: (state, { payload }) => {
-      const { refreshTimer: oldRefresh, ...rest } = state
-      const { accessToken, apiUrl, dispatch } = payload
-
-      // If an existing refresh timer has been defined, remove it as the access token has changed
-      if (oldRefresh) {
-        clearTimeout(oldRefresh)
-      }
-
-      // Save off the token in local storage for persistence across reloads.
-      setToken(state.storageType, accessToken)
-
-      const refreshTimer = scheduleTokenRefresh(accessToken, (newAccessToken) =>
-        dispatch(saveToken({ apiUrl, accessToken: newAccessToken, dispatch }))
-      )
-      serviceOptions.axios = axiosStatic.create({
-        baseURL: apiUrl,
-        headers: {
-          language: state.language,
-          jurisdictionName: process.env.jurisdictionName,
-          ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
-        },
-      })
-
-      return {
-        ...rest,
-        ...(refreshTimer && { refreshTimer }),
-        accessToken: accessToken,
-      }
-    },
-    SAVE_PROFILE: (state, { payload: user }) => ({ ...state, profile: user }),
-    START_LOADING: (state) => ({ ...state, loading: true }),
-    END_LOADING: (state) => ({ ...state, loading: false }),
-    SIGN_OUT: ({ storageType }) => {
-      clearToken(storageType)
-      // Clear out all existing state other than the storage type
-      return { loading: false, storageType, initialStateLoaded: true }
-    },
-  }
-)
-
-export const AuthContext = createContext<Partial<ContextProps>>({})
-export const AuthProvider: FunctionComponent = ({ children }) => {
-  const { apiUrl, storageType } = useContext(ConfigContext)
-  const { router } = useContext(NavigationContext)
-  const [state, dispatch] = useReducer(reducer, {
-    loading: false,
-    initialStateLoaded: false,
-    storageType,
-    language: router.locale,
-  })
-
-  const userService = useMemo(() => new UserService(), [])
-  const authService = new AuthService()
-
-  useEffect(() => {
-    serviceOptions.axios = axiosStatic.create({
-      baseURL: apiUrl,
-      headers: {
-        language: router.locale,
-        jurisdictionName: process.env.jurisdictionName,
-        appUrl: window.location.origin,
-        ...(state.accessToken && { Authorization: `Bearer ${state.accessToken}` }),
-      },
-      paramsSerializer: (params) => {
-        return qs.stringify(params)
-      },
-    })
-  }, [router, apiUrl, state.accessToken, router.locale])
-
-  // On initial load/reload, check localStorage to see if we have a token available
-  useEffect(() => {
-    const accessToken = getToken(storageType)
-    if (accessToken) {
-      const ttl = getTokenTtl(accessToken)
-
-      if (ttl > 0) {
-        dispatch(saveToken({ accessToken, apiUrl, dispatch }))
-      } else {
-        dispatch(signOut())
-      }
-    } else {
-      dispatch(signOut())
-    }
-  }, [apiUrl, storageType])
-
-  const loadProfile = useCallback(
-    async (redirect?: string) => {
-      try {
-        const profile = await userService?.userControllerProfile()
-        if (profile) {
-          dispatch(saveProfile(profile))
-        }
-      } finally {
-        dispatch(stopLoading())
-
-        if (redirect) {
-          router.push(redirect)
-        }
-      }
-    },
-    [userService, router]
-  )
-
-  // Load our profile as soon as we have an access token available
-  useEffect(() => {
-    if (!state.profile && state.accessToken && !state.loading) {
-      void loadProfile()
-    }
-  }, [state.profile, state.accessToken, apiUrl, userService, state.loading, loadProfile])
-
-  const contextValues: ContextProps = {
-    amiChartsService: new AmiChartsService(),
-    applicationsService: new ApplicationsService(),
-    applicationFlaggedSetsService: new ApplicationFlaggedSetsService(),
-    listingsService: new ListingsService(),
-    jurisdictionsService: new JurisdictionsService(),
-    userService: new UserService(),
-    userProfileService: new UserProfileService(),
-    authService: new AuthService(),
-    preferencesService: new PreferencesService(),
-    programsService: new ProgramsService(),
-    reservedCommunityTypeService: new ReservedCommunityTypesService(),
-    unitPriorityService: new UnitAccessibilityPriorityTypesService(),
-    unitTypesService: new UnitTypesService(),
-    loading: state.loading,
-    accessToken: state.accessToken,
-    initialStateLoaded: state.initialStateLoaded,
-    profile: state.profile,
-    loadProfile,
-    login: async (
-      email,
-      password,
-      mfaCode: string | undefined = undefined,
-      mfaType: EnumLoginMfaType | undefined = undefined
-    ) => {
-      dispatch(signOut())
-      dispatch(startLoading())
-      try {
-        const response = await authService?.login({ body: { email, password, mfaCode, mfaType } })
-        if (response) {
-          dispatch(saveToken({ accessToken: response.accessToken, apiUrl, dispatch }))
-          const profile = await userService?.userControllerProfile()
-          if (profile) {
-            dispatch(saveProfile(profile))
-            return profile
-          }
-        }
-        return undefined
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-    loginWithToken: async (token: string) => {
-      dispatch(saveToken({ accessToken: token, apiUrl, dispatch }))
-      const profile = await userService?.userControllerProfile()
-      if (profile) {
-        dispatch(saveProfile(profile))
-        return profile
-      }
-
-      return undefined
-    },
-    signOut: () => dispatch(signOut()),
-    resetPassword: async (token, password, passwordConfirmation) => {
-      dispatch(startLoading())
-      try {
-        const response = await userService?.updatePassword({
-          body: {
-            token,
-            password,
-            passwordConfirmation,
-          },
-        })
-        if (response) {
-          dispatch(saveToken({ accessToken: response.accessToken, apiUrl, dispatch }))
-          const profile = await userService?.userControllerProfile()
-          if (profile) {
-            dispatch(saveProfile(profile))
-            return profile
-          }
-        }
-        return undefined
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-    confirmAccount: async (token) => {
-      dispatch(startLoading())
-      try {
-        const response = await userService?.confirm({ body: { token } })
-        if (response) {
-          dispatch(saveToken({ accessToken: response.accessToken, apiUrl, dispatch }))
-          const profile = await userService?.userControllerProfile()
-          if (profile) {
-            dispatch(saveProfile(profile))
-            return profile
-          }
-        }
-        return undefined
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-    createUser: async (user: UserCreate) => {
-      dispatch(startLoading())
-      try {
-        const response = await userService?.create({
-          body: { ...user, appUrl: window.location.origin },
-        })
-        return response
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-    resendConfirmation: async (email: string) => {
-      dispatch(startLoading())
-      try {
-        const response = await userService?.resendConfirmation({
-          body: { email, appUrl: window.location.origin },
-        })
-        return response
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-    forgotPassword: async (email) => {
-      dispatch(startLoading())
-      try {
-        const response = await userService?.forgotPassword({
-          body: { email, appUrl: window.location.origin },
-        })
-        return response?.message
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-    requestMfaCode: async (email, password, mfaType, phoneNumber) => {
-      dispatch(startLoading())
-      try {
-        return await authService?.requestMfaCode({
-          body: { email, password, mfaType, phoneNumber },
-        })
-      } finally {
-        dispatch(stopLoading())
-      }
-    },
-  }
-  return createElement(AuthContext.Provider, { value: contextValues }, children)
-}

package/src/authentication/RequireLogin.tsx

@@ -1,89 +0,0 @@
-import React, { FunctionComponent, useContext, useEffect, useState } from "react"
-import { clearSiteAlertMessage, setSiteAlertMessage } from "../notifications/SiteAlert"
-import { NavigationContext } from "../config/NavigationContext"
-import { AuthContext } from "./AuthContext"
-
-// See https://github.com/Microsoft/TypeScript/issues/14094
-type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }
-type XOR<T, U> = T | U extends Record<string, unknown>
-  ? (Without<T, U> & U) | (Without<U, T> & T)
-  : T | U
-
-type RequireLoginProps = {
-  signInPath: string
-  signInMessage: string
-  termsPath?: string // partners portal required accepted terms after sign-in
-} & XOR<{ requireForRoutes?: string[] }, { skipForRoutes: string[] }>
-
-/**
- * Require a login to render children. Will redirect to `signInPath` if not logged in.
- *
- * Props can be specified with either a "whitelist" (list of routes to skip check for) or a "blacklist" (list of
- * routes to apply test on). If no list of routes is provided, then will always apply check.
- */
-const RequireLogin: FunctionComponent<RequireLoginProps> = ({
-  children,
-  signInPath,
-  signInMessage,
-  termsPath,
-  ...rest
-}) => {
-  const { router } = useContext(NavigationContext)
-  const { profile, initialStateLoaded } = useContext(AuthContext)
-  const [hasTerms, setHasTerms] = useState(false)
-
-  // Parse just the pathname portion of the signInPath (in case we want to pass URL params)
-  const [signInPathname] = signInPath.split("?")
-
-  // Check if this route requires a login or not (can be specified as a whitelist or a blacklist).
-  const loginRequiredForPath =
-    // by definition, we shouldn't require login on the sign in page itself
-    router.pathname !== signInPathname &&
-    ("requireForRoutes" in rest
-      ? rest.requireForRoutes
-        ? rest.requireForRoutes.some((path) => new RegExp(path).exec(router.pathname))
-        : true
-      : rest.skipForRoutes
-      ? !rest.skipForRoutes.some((path) => new RegExp(path).exec(router.pathname))
-      : true)
-
-  useEffect(() => {
-    if (profile?.jurisdictions?.some((jurisdiction) => jurisdiction.partnerTerms)) {
-      setHasTerms(true)
-    }
-  }, [profile])
-
-  useEffect(() => {
-    if (loginRequiredForPath && initialStateLoaded && !profile) {
-      setSiteAlertMessage(signInMessage, "notice")
-      void router.push(signInPath)
-    } else {
-      clearSiteAlertMessage("notice")
-    }
-
-    if (termsPath && profile && !profile?.agreedToTermsOfService && hasTerms) {
-      void router.push(termsPath)
-    }
-  }, [
-    loginRequiredForPath,
-    initialStateLoaded,
-    profile,
-    router,
-    signInPath,
-    signInMessage,
-    termsPath,
-    hasTerms,
-  ])
-
-  if (
-    loginRequiredForPath &&
-    (!profile || (hasTerms && termsPath && !profile.agreedToTermsOfService))
-  ) {
-    return null
-  }
-
-  // Login either isn't required, or the user object is loaded successfully, continue rendering as normal.
-  return <>{children}</>
-}
-
-export { RequireLogin as default, RequireLogin }

package/src/authentication/index.ts

@@ -1,5 +0,0 @@
-export { AuthContext, AuthProvider } from "./AuthContext"
-export { RequireLogin } from "./RequireLogin"
-export { useRequireLoggedInUser } from "./useRequireLoggedInUser"
-export { ACCESS_TOKEN_LOCAL_STORAGE_KEY } from "./token"
-export { IdleTimeout, LoggedInUserIdleTimeout } from "./timeout"

package/src/authentication/timeout.tsx

@@ -1,128 +0,0 @@
-import React, { createElement, FunctionComponent, useContext, useEffect, useState } from "react"
-import { AuthContext } from "./AuthContext"
-import { ConfigContext, NavigationContext } from "../config"
-import { Button } from "../actions/Button"
-import { Modal } from "../overlays/Modal"
-import { setSiteAlertMessage } from "../notifications/SiteAlert"
-import { AlertTypes } from "../notifications/alertTypes"
-import { t } from "../helpers/translator"
-import { AppearanceStyleType } from "../global/AppearanceTypes"
-
-const PROMPT_TIMEOUT = 60000
-const events = ["mousemove", "keypress", "scroll"]
-
-function useIdleTimeout(timeoutMs: number, onTimeout: () => void) {
-  useEffect(() => {
-    let timer: number
-    const restartTimer = () => {
-      if (timer) {
-        clearTimeout(timer)
-      }
-      timer = (setTimeout(onTimeout, timeoutMs) as unknown) as number
-    }
-
-    // Listen for any activity events & reset the timer when they are found
-    if (typeof document !== "undefined") {
-      events.forEach((event) => document.addEventListener(event, restartTimer, false))
-    }
-
-    // Clean up our listeners & clear the timeout on unmounting/updating the effect
-    return () => {
-      if (timer) {
-        clearTimeout(timer)
-      }
-      events.forEach((event) => document.removeEventListener(event, restartTimer, false))
-    }
-  }, [timeoutMs, onTimeout])
-}
-
-type IdleTimeoutProps = {
-  promptTitle: string
-  promptText: string
-  promptAction: string
-  redirectPath: string
-  alertMessage: string
-  alertType?: AlertTypes
-  onTimeout: () => unknown
-}
-
-export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
-  promptTitle,
-  promptAction,
-  promptText,
-  redirectPath,
-  alertMessage,
-  alertType = "alert",
-  onTimeout,
-}) => {
-  const { idleTimeout } = useContext(ConfigContext)
-  const [promptTimeout, setPromptTimeout] = useState<number | undefined>()
-  const { router } = useContext(NavigationContext)
-
-  useIdleTimeout(idleTimeout, () => {
-    // Clear any existing prompt timeouts
-    if (promptTimeout) {
-      clearTimeout(promptTimeout)
-    }
-
-    // Give the user 1 minute to respond to the prompt before the onTimeout action
-    setPromptTimeout(
-      (setTimeout(() => {
-        const timeoutAction = async () => {
-          setPromptTimeout(undefined)
-          await onTimeout()
-          setSiteAlertMessage(alertMessage, alertType)
-          void router.push(redirectPath)
-        }
-        void timeoutAction()
-      }, PROMPT_TIMEOUT) as unknown) as number
-    )
-  })
-
-  const modalActions = [
-    <Button
-      styleType={AppearanceStyleType.primary}
-      onClick={() => {
-        clearTimeout(promptTimeout)
-        setPromptTimeout(undefined)
-      }}
-    >
-      {promptAction}
-    </Button>,
-  ]
-
-  return (
-    <Modal
-      open={Boolean(promptTimeout)}
-      title={promptTitle}
-      ariaDescription={promptText}
-      actions={modalActions}
-      hideCloseIcon
-      role="alertdialog"
-    >
-      {promptText}
-    </Modal>
-  )
-}
-
-export const LoggedInUserIdleTimeout = ({ onTimeout }: { onTimeout?: () => unknown }) => {
-  const { profile, signOut } = useContext(AuthContext)
-
-  const timeoutFxn = async () => {
-    onTimeout && (await onTimeout())
-    signOut && signOut()
-  }
-
-  // Only render the IdleTimeout component if the user is logged in
-  return profile && signOut
-    ? createElement(IdleTimeout, {
-        promptTitle: t("t.areYouStillWorking"),
-        promptText: t("authentication.timeout.text"),
-        promptAction: t("authentication.timeout.action"),
-        redirectPath: `/sign-in`,
-        alertMessage: t("authentication.timeout.signOutMessage"),
-        alertType: "notice",
-        onTimeout: timeoutFxn,
-      })
-    : null
-}

package/src/authentication/token.ts

@@ -1,17 +0,0 @@
-import jwtDecode from "jwt-decode"
-
-export const ACCESS_TOKEN_LOCAL_STORAGE_KEY = "@bht"
-
-const getStorage = (type: string) => (type === "local" ? localStorage : sessionStorage)
-
-export const setToken = (storageType: string, token: string) =>
-  getStorage(storageType).setItem(ACCESS_TOKEN_LOCAL_STORAGE_KEY, token)
-export const getToken = (storageType: string) =>
-  getStorage(storageType).getItem(ACCESS_TOKEN_LOCAL_STORAGE_KEY)
-export const clearToken = (storageType: string) =>
-  getStorage(storageType).removeItem(ACCESS_TOKEN_LOCAL_STORAGE_KEY)
-
-export const getTokenTtl = (token: string) => {
-  const { exp = 0 } = jwtDecode(token)
-  return new Date(exp * 1000).valueOf() - new Date().valueOf()
-}

package/src/authentication/useRequireLoggedInUser.ts

@@ -1,19 +0,0 @@
-import { useContext } from "react"
-import { AuthContext } from "./AuthContext"
-import { NavigationContext } from "../config/NavigationContext"
-
-/**
- * Require a logged in user. Waits on initial load, then initiates a redirect to `redirectPath` if user is not
- * logged in.
- */
-function useRequireLoggedInUser(redirectPath: string) {
-  const { profile, initialStateLoaded } = useContext(AuthContext)
-  const { router } = useContext(NavigationContext)
-
-  if (initialStateLoaded && !profile) {
-    void router.push(redirectPath)
-  }
-  return profile
-}
-
-export { useRequireLoggedInUser as default, useRequireLoggedInUser }

package/src/config/ConfigContext.tsx

@@ -1,36 +0,0 @@
-import { createContext, createElement, FunctionComponent } from "react"
-
-type ConfigContextProps = {
-  storageType: "local" | "session"
-  apiUrl: string
-  idleTimeout: number
-}
-
-const timeoutMinutes = parseInt(process.env.idleTimeout || process.env.IDLE_TIMEOUT || "5")
-const defaultTimeout = timeoutMinutes * 60 * 1000
-
-export const ConfigContext = createContext<ConfigContextProps>({
-  storageType: "session",
-  apiUrl: "",
-  idleTimeout: defaultTimeout,
-})
-
-export const ConfigProvider: FunctionComponent<{
-  apiUrl: string
-  storageType?: ConfigContextProps["storageType"]
-  idleTimeout?: number
-}> = ({ apiUrl, storageType = "session", idleTimeout = defaultTimeout, children }) => {
-  return createElement(
-    ConfigContext.Provider,
-    {
-      value: {
-        apiUrl,
-        storageType,
-        idleTimeout,
-      },
-    },
-    children
-  )
-}
-
-export default ConfigContext