@bloom-housing/ui-components 4.0.0 → 4.0.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1-alpha.0](https://github.com/seanmalbert/bloom/compare/@bloom-housing/ui-components@4.0.0...@bloom-housing/ui-components@4.0.1-alpha.0) (2021-12-23)
+
+
+### Bug Fixes
+
+* make numbered list breakpoint match config ([326df54](https://github.com/seanmalbert/bloom/commit/326df5404d2a967f1a36f8ba7635d4cb92d37742))
+* make primary buttons primary background ([1b44435](https://github.com/seanmalbert/bloom/commit/1b44435aef22d814a0b511d7d63129d73a7b78ac))
+* Update hardcoded translations ([c58bf25](https://github.com/seanmalbert/bloom/commit/c58bf25bb7243ea357e208aef88e74af4a968e97)), closes [#1927](https://github.com/seanmalbert/bloom/issues/1927)
+* Update translation ([f8d2604](https://github.com/seanmalbert/bloom/commit/f8d2604b5244ca9c5bc92665d056f5e58d32f978))
+
+
+* 2227/lock login attempts frontend (#2260) ([281ea43](https://github.com/seanmalbert/bloom/commit/281ea435e618a73a73f233a7a494f961fbac8fa2)), closes [#2260](https://github.com/seanmalbert/bloom/issues/2260) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927) [#1927](https://github.com/seanmalbert/bloom/issues/1927)
+
+
+### Features
+
+* add matched style to ApplicationStatus ([a54fb97](https://github.com/seanmalbert/bloom/commit/a54fb9769b68c9362e5f312a1021f5d0ba3d17a7))
+
+
+### BREAKING CHANGES
+
+* sign-in pages have been updated
+
+
+
+
+
 # [4.0.0](https://github.com/seanmalbert/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.48...@bloom-housing/ui-components@4.0.0) (2021-12-22)
 
 

package/index.ts

@@ -119,6 +119,7 @@ export * from "./src/page_components/listing/listing_sidebar/events/OpenHouseEve
 export * from "./src/page_components/listing/listing_sidebar/events/LotteryResultsEvent"
 export * from "./src/page_components/listing/listing_sidebar/events/PublicLotteryEvent"
 export * from "./src/page_components/listing/listing_sidebar/events/EventDateSection"
+export * from "./src/page_components/sign-in/FormSignIn"
 
 /* Responsive Wrappers */
 export * from "./src/sections/ResponsiveWrappers"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.0",
+  "version": "4.0.1-alpha.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^3.0.1",
+    "@bloom-housing/backend-core": "^3.0.2-alpha.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "7f017f5b74d996eb9385d767825a2a842f5456ac"
+  "gitHead": "02379da7dc3cf07b4476a19d5406abddefb47164"
 }

package/src/global/ApplicationStatusType.ts

@@ -3,4 +3,5 @@ export enum ApplicationStatusType {
   Closed,
   PreLottery,
   PostLottery,
+  Matched,
 }

package/src/global/lists.scss

@@ -48,7 +48,7 @@
 .numbered-list li:last-of-type {
   margin-bottom: 0.5rem;
 }
-@media only screen and (min-width: 60.0625em) {
+@screen md {
   .numbered-list li {
     margin: 0 0 1.5rem 2.5rem;
   }

package/src/global/mixins.scss

@@ -66,13 +66,13 @@
 
 @mixin filled-appearances() {
   &.is-primary {
-    @apply bg-primary-dark;
-    @apply border-primary-dark;
+    @apply bg-primary;
+    @apply border-primary;
     @apply text-white;
 
     &:hover {
-      @apply bg-primary-darker;
-      @apply border-primary-darker;
+      @apply bg-primary-dark;
+      @apply border-primary-dark;
     }
   }
 

package/src/locales/general.json

@@ -831,7 +831,15 @@
       "error": "There was an error signing you in",
       "errorGenericMessage": "Please try again, or contact support for help.",
       "forgotPassword": "Forgot password?",
-      "success": "Welcome back, %{name}!"
+      "success": "Welcome back, %{name}!",
+      "accountHasBeenLocked": "For security reasons, this account has been locked.",
+      "youHaveToWait": "You’ll have to wait 30 minutes since the last failed attempt before trying again.",
+      "enterValidEmailAndPassword": "Please enter a valid email and password.",
+      "afterFailedAttempts": "For security reasons, after 5 failed attempts, you’ll have to wait 30 minutes before trying again.",
+      "partnersSignIn": "Partners Sign In",
+      "dontHaveAccount": "Don't have an account",
+      "enterLoginPassword": "Please enter your login password",
+      "enterLoginEmail": "Please enter your login email"
     },
     "createAccount": {
       "accountConfirmed": "Your account was successfully confirmed.",

package/src/notifications/AlertBox.scss

@@ -62,6 +62,15 @@
   }
 }
 
+.alert-box__head {
+  @apply flex justify-between;
+  @apply w-full;
+}
+
+.alert-box__title {
+  @apply flex justify-between;
+}
+
 .alert-box__body {
   @apply ml-2;
   @apply font-semibold;

package/src/notifications/AlertBox.tsx

@@ -45,24 +45,29 @@ const AlertBox = (props: AlertBoxProps) => {
 
   let innerSection = (
     <>
-      <span className="alert-box__icon">
-        <Icon
-          size="medium"
-          symbol={icons[props.type || "alert"]}
-          fill={props.inverted ? IconFillColors.white : undefined}
-        />
-      </span>
-      <span className="alert-box__body">
-        {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
-      </span>
-      {closeable && (
-        <button
-          className={`alert-box__close ${props.inverted ? "text-white" : ""}`}
-          onClick={onClose}
-        >
-          &times;
-        </button>
-      )}
+      <div className="alert-box__head">
+        <div className="alert-box__title">
+          <span className="alert-box__icon">
+            <Icon
+              size="medium"
+              symbol={icons[props.type || "alert"]}
+              fill={props.inverted ? IconFillColors.white : undefined}
+            />
+          </span>
+          <span className="alert-box__body">
+            {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
+          </span>
+        </div>
+
+        {closeable && (
+          <button
+            className={`alert-box__close ${props.inverted ? "text-white" : ""}`}
+            onClick={onClose}
+          >
+            &times;
+          </button>
+        )}
+      </div>
     </>
   )
   if (props.boundToLayoutWidth) {

package/src/notifications/AlertNotice.tsx

@@ -7,7 +7,7 @@ import "./AlertNotice.scss"
 export interface AlertNoticeProps {
   type?: AlertTypes
   inverted?: boolean
-  title: ReactNode
+  title?: ReactNode
   children: ReactNode
   className?: string
 }
@@ -23,9 +23,11 @@ const AlertNotice = (props: AlertNoticeProps) => {
 
   return (
     <div className={classNames}>
-      <div className={`alert-notice__title ${colorClass}`}>
-        {typeof props.title === "string" ? <p>{props.title}</p> : props.title}
-      </div>
+      {props.title && (
+        <div className={`alert-notice__title ${colorClass}`}>
+          {typeof props.title === "string" ? <p>{props.title}</p> : props.title}
+        </div>
+      )}
 
       <div className="alert-notice__body">
         {typeof props.children === "string" ? <p>{props.children}</p> : props.children}

package/src/notifications/ApplicationStatus.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Icon, IconFillColors } from "../icons/Icon"
+import { Icon, IconFillColors, IconTypes } from "../icons/Icon"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import "./ApplicationStatus.scss"
 
@@ -9,6 +9,7 @@ export interface ApplicationStatusProps {
   status?: ApplicationStatusType
   vivid?: boolean
   withIcon?: boolean
+  iconType?: IconTypes
 }
 
 const ApplicationStatus = (props: ApplicationStatusProps) => {
@@ -21,13 +22,15 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
   const status = props.status || ApplicationStatusType.Open
   const content = props.content
   const withIcon = props.withIcon ?? true
+  const iconType = props.iconType ?? "clock"
 
   let icon
 
   if (withIcon) {
     icon = (
       <span>
-        <Icon size="medium" symbol="clock" fill={vivid ? IconFillColors.white : undefined} /> &nbsp;
+        <Icon size="medium" symbol={iconType} fill={vivid ? IconFillColors.white : undefined} />{" "}
+        &nbsp;
       </span>
     )
   }
@@ -43,6 +46,10 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
       bgColor = "bg-gray-850"
       textColor = "text-white"
       break
+    case ApplicationStatusType.Matched:
+      bgColor = "bg-green-700"
+      textColor = "text-white"
+      break
     default:
       bgColor = "bg-primary"
   }

package/src/page_components/sign-in/FormSignIn.tsx

@@ -0,0 +1,128 @@
+import React from "react"
+import Link from "next/link"
+import {
+  AppearanceStyleType,
+  Button,
+  Field,
+  Form,
+  FormCard,
+  Icon,
+  LinkButton,
+  t,
+  AlertBox,
+  SiteAlert,
+  AlertNotice,
+  ErrorMessage,
+} from "@bloom-housing/ui-components"
+import type { UseFormMethods } from "react-hook-form"
+import type { NetworkErrorValue, NetworkErrorReset } from "@bloom-housing/shared-helpers"
+
+export type FormSignInProps = {
+  control: FormSignInControl
+  onSubmit: (data: FormSignInValues) => void
+  networkError: FormSignInNetworkError
+  showRegisterBtn?: boolean
+}
+
+export type FormSignInNetworkError = {
+  error: NetworkErrorValue
+  reset: NetworkErrorReset
+}
+
+export type FormSignInControl = {
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+}
+
+export type FormSignInValues = {
+  email: string
+  password: string
+}
+
+const FormSignIn = ({
+  onSubmit,
+  networkError,
+  showRegisterBtn,
+  control: { errors, register, handleSubmit },
+}: FormSignInProps) => {
+  const onError = () => {
+    window.scrollTo(0, 0)
+  }
+
+  return (
+    <FormCard>
+      <div className="form-card__lead text-center border-b mx-0">
+        <Icon size="2xl" symbol="profile" />
+        <h2 className="form-card__title">{t(`nav.signIn`)}</h2>
+      </div>
+
+      {Object.entries(errors).length > 0 && !networkError.error && (
+        <AlertBox type="alert" inverted closeable>
+          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+        </AlertBox>
+      )}
+
+      {!!networkError.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={"householdsize-error"} error={!!networkError.error}>
+          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
+            {networkError.error.title}
+          </AlertBox>
+
+          <AlertNotice title="" type="alert" inverted>
+            {networkError.error.content}
+          </AlertNotice>
+        </ErrorMessage>
+      )}
+
+      <SiteAlert type="notice" dismissable />
+      <div className="form-card__group pt-0 border-b">
+        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+          <Field
+            caps={true}
+            name="email"
+            label={t("t.email")}
+            validation={{ required: true }}
+            error={errors.email}
+            errorMessage={t("authentication.signIn.enterLoginEmail")}
+            register={register}
+            dataTestId="sign-in-email-field"
+          />
+
+          <aside className="float-right text-tiny font-semibold">
+            <Link href="/forgot-password">
+              <a>{t("authentication.signIn.forgotPassword")}</a>
+            </Link>
+          </aside>
+
+          <Field
+            caps={true}
+            name="password"
+            label={t("authentication.createAccount.password")}
+            validation={{ required: true }}
+            error={errors.password}
+            errorMessage={t("authentication.signIn.enterLoginPassword")}
+            register={register}
+            type="password"
+            dataTestId="sign-in-password-field"
+          />
+
+          <div className="text-center mt-6">
+            <Button styleType={AppearanceStyleType.primary} data-test-id="sign-in-button">
+              {t("nav.signIn")}
+            </Button>
+          </div>
+        </Form>
+      </div>
+      {showRegisterBtn && (
+        <div className="form-card__group text-center">
+          <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
+
+          <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>
+        </div>
+      )}
+    </FormCard>
+  )
+}
+
+export { FormSignIn as default, FormSignIn }