@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/authentication/RequireLogin.tsx

@@ -0,0 +1,62 @@
+import React, { FunctionComponent, useContext, useEffect } from "react"
+import { 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
+} & 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,
+  ...rest
+}) => {
+  const { router } = useContext(NavigationContext)
+  const { profile, initialStateLoaded } = useContext(AuthContext)
+
+  // 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 (loginRequiredForPath && initialStateLoaded && !profile) {
+      setSiteAlertMessage(signInMessage, "notice")
+      void router.push(signInPath)
+    }
+  }, [loginRequiredForPath, initialStateLoaded, profile, router, signInPath, signInMessage])
+
+  if (loginRequiredForPath && !profile) {
+    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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,127 @@
+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
+    >
+      {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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,19 @@
+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/blocks/ActionBlock.scss

@@ -0,0 +1,108 @@
+.action-block {
+  display: flex;
+  @apply p-4;
+
+  &.primary-lighter {
+    @apply bg-primary-lighter;
+  }
+  &.primary-darker {
+    @apply bg-primary-darker;
+    @apply text-white;
+    .action-block__icon {
+      @apply border-white;
+    }
+  }
+  .action-block__actions {
+    @media (max-width: 640px) {
+      display: flex;
+      justify-items: center;
+    }
+  }
+  .action-block__actions button {
+    @apply m-2;
+  }
+  .action-block__subheader {
+    @apply pt-2;
+    @apply font-sans;
+  }
+}
+
+.action-block__block {
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  @apply pb-8;
+
+  .action-block__head {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .action-block__icon {
+    @apply p-4;
+    @apply border-solid;
+    @apply border-b-4;
+    @apply border-primary;
+    @apply mb-6;
+  }
+  .action-block__head {
+    @apply mb-6;
+  }
+  .action-block__actions {
+    @media (max-width: 640px) {
+      display: block;
+      text-align: center;
+    }
+  }
+}
+
+.action-block__inline {
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: space-between;
+  @media (max-width: 640px) {
+    display: block;
+    text-align: center;
+  }
+
+  .action-block__actions {
+    display: flex;
+    justify-content: flex-end;
+
+    @media (max-width: 640px) {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  .action-block__head {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    @media (max-width: 640px) {
+      display: block;
+    }
+  }
+  .action-block__icon {
+    @apply p-4;
+    @apply border-solid;
+    @apply border-r-4;
+    @apply border-primary;
+
+    @media (max-width: 640px) {
+      display: inline-block;
+      @apply border-solid;
+      @apply border-r-0;
+      @apply border-b-4;
+      @apply mb-4;
+    }
+  }
+  .action-block__header {
+    @apply ml-6;
+    @media (max-width: 640px) {
+      @apply ml-0;
+    }
+  }
+}

package/src/blocks/ActionBlock.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import "./ActionBlock.scss"
+
+export enum ActionBlockLayout {
+  block = "block",
+  inline = "inline",
+}
+
+export enum ActionBlockBackground {
+  none = "none",
+  primaryLighter = "primary-lighter",
+  primaryDarker = "primary-darker",
+}
+interface ActionBlockProps {
+  actions: React.ReactNode[]
+  background?: string
+  header: string
+  icon?: React.ReactNode
+  layout?: ActionBlockLayout
+  subheader?: string
+}
+const ActionBlock = ({
+  actions,
+  background = ActionBlockBackground.none,
+  header,
+  icon,
+  layout = ActionBlockLayout.block,
+  subheader,
+}: ActionBlockProps) => {
+  const actionBlockClasses = ["action-block"]
+  if (background) actionBlockClasses.push(background)
+  if (layout === "block") {
+    actionBlockClasses.push("action-block__block")
+  } else {
+    actionBlockClasses.push("action-block__inline")
+  }
+
+  return (
+    <div className={actionBlockClasses.join(" ")}>
+      <div className="action-block__head">
+        {icon && <div className="action-block__icon">{icon}</div>}
+        <h3 className="action-block__header">{header}</h3>
+        {subheader && layout === ActionBlockLayout.block && (
+          <p className="action-block__subheader">{subheader}</p>
+        )}
+      </div>
+      <div className="action-block__actions">{actions}</div>
+    </div>
+  )
+}
+export { ActionBlock as default, ActionBlock }

package/src/blocks/AppStatusItem.scss

@@ -0,0 +1,140 @@
+.status-item {
+  @apply relative;
+  @apply text-gray-800;
+  @apply border-b;
+  @apply border-solid;
+  @apply border-gray-450;
+
+  &:last-of-type {
+    @apply border-b-0;
+  }
+
+  &.is-editable {
+    @apply bg-primary-lighter;
+  }
+}
+
+.status-item__inner {
+  @apply p-4;
+}
+
+.status-item__header {
+  @apply pb-2;
+
+  @screen md {
+    @apply flex;
+    @apply mb-4;
+    @apply justify-between;
+    @apply border-b;
+    @apply border-solid;
+    @apply border-gray-450;
+  }
+}
+
+.status-item__title {
+  @apply text-xl;
+  @apply font-alt-sans;
+  @apply tracking-wider;
+  @apply mb-0;
+  @apply uppercase;
+}
+
+.status-item__due {
+  @screen md {
+    @apply text-right;
+    @apply self-center;
+  }
+}
+
+.status-item__content {
+  @screen md {
+    @apply flex;
+    @apply justify-between;
+  }
+}
+
+.status-confirmation__number {
+  @apply pt-4;
+}
+
+.status-item__details {
+  @apply text-center;
+  @screen md {
+    @apply text-left;
+  }
+}
+
+.status-item__action {
+  @apply text-center;
+  @apply pt-4;
+  @apply mb-4;
+
+  @screen md {
+    @apply pt-0;
+    @apply text-right;
+  }
+}
+
+.status-item__footer {
+  @apply text-center;
+
+  @screen md {
+    @apply flex;
+    @apply justify-between;
+    @apply text-left;
+  }
+}
+
+.status-item__links {
+  @apply pb-4;
+
+  @screen md {
+    @apply pb-0;
+  }
+}
+
+.status-item__meta {
+  @apply mt-4;
+
+  @screen md {
+    @apply text-right;
+    @apply mt-0;
+  }
+}
+
+.status-item__status {
+  @apply pb-4;
+}
+
+.status-item__label {
+  @apply relative;
+}
+
+.status-item__link {
+  @screen md {
+    @apply mr-4;
+  }
+}
+
+.status-item__date {
+  @apply text-sm;
+}
+
+.status-item__address {
+  @apply mb-4;
+}
+
+.status-item__confirm-text {
+  @apply text-tiny;
+  @apply mb-4;
+}
+
+.status-item__confirm-number {
+  @apply text-lg;
+}
+
+.status-item__address {
+  @screen md {
+    @apply text-left;
+  }
+}