feat: migrate some forms away from many UIC deps, and support Enter submitting

shared-helpers/index.ts

@@ -29,6 +29,7 @@ export * from "./src/utilities/token"
 export * from "./src/utilities/unitTypes"
 export * from "./src/views/components/BloomCard"
 export * from "./src/views/components/ClickableCard"
+export * from "./src/views/components/Form"
 export * from "./src/views/CustomIconMap"
 export * from "./src/views/forgot-password/FormForgotPassword"
 export * from "./src/views/layout/ExygyFooter"

shared-helpers/src/views/CustomIconMap.tsx

@@ -3,6 +3,7 @@ import { Application, Door, Profile } from "./CustomIcons"
 import LockClosedIcon from "@heroicons/react/24/solid/LockClosedIcon"
 import ChevronLeftIcon from "@heroicons/react/20/solid/ChevronLeftIcon"
 import Clock from "@heroicons/react/24/outline/ClockIcon"
+import Cog8ToothIcon from "@heroicons/react/24/solid/Cog8ToothIcon"
 import HeartIcon from "@heroicons/react/24/outline/HeartIcon"
 import HeartIconSolid from "@heroicons/react/24/solid/HeartIcon"
 import HomeModernIcon from "@heroicons/react/24/outline/HomeModernIcon"
@@ -19,6 +20,7 @@ export const CustomIconMap = {
   lockClosed: <LockClosedIcon />,
   chevronLeft: <ChevronLeftIcon />,
   clock: <Clock />,
+  cog: <Cog8ToothIcon />,
   heartIcon: <HeartIcon />,
   heartIconSolid: <HeartIconSolid />,
   home: <HomeModernIcon />,

shared-helpers/src/views/components/BloomCard.module.scss

@@ -1,4 +1,5 @@
 .form-card {
+  --card-footer-background-color: var(--seeds-bg-color-surface-primary);
   --card-content-padding-inline: var(--seeds-s12);
   --card-header-padding-inline: var(--seeds-s12);
   @media (max-width: theme("screens.sm")) {

shared-helpers/src/views/components/Form.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+interface FormProps {
+  children: React.ReactNode
+  id?: string
+  className?: string
+  disableSubmitOnEnter?: boolean
+  onSubmit?: () => unknown
+}
+
+export const Form = ({ id, children, className, disableSubmitOnEnter, onSubmit }: FormProps) => {
+  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {
+    if (disableSubmitOnEnter && e.key === "Enter" && !(e.target instanceof HTMLButtonElement)) e.preventDefault()
+  }
+
+  return (
+    <form id={id} className={className} onSubmit={onSubmit} onKeyDown={onKeyDown} noValidate>
+      {children}
+    </form>
+  )
+}

shared-helpers/src/views/forgot-password/FormForgotPassword.tsx

@@ -1,13 +1,14 @@
 import React from "react"
 import { Button } from "@bloom-housing/ui-seeds"
-import { Field, Form, t, AlertBox, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
+import { Field, t, AlertBox, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { NetworkErrorReset, NetworkStatusContent } from "../../auth/catchNetworkError"
 import type { UseFormMethods } from "react-hook-form"
 import { BloomCard } from "../components/BloomCard"
 import { emailRegex } from "../../utilities/regex"
 import styles from "./FormForgotPassword.module.scss"
 import { useRouter } from "next/router"
+import { Form } from "../components/Form"
 
 export type FormForgotPasswordProps = {
   control: FormForgotPasswordControl

shared-helpers/src/views/sign-in/FormSignIn.module.scss

@@ -1,8 +1,17 @@
 .forgot-password {
-  float: inline-end;
   font-size: var(--seeds-font-size-sm);
-  text-decoration-line: underline;
-  color: var(--seeds-color-blue-900);
+}
+
+.forgot-password-wrapper {
+  grid-area: field;
+  width: fit-content;
+  justify-self: end;
+  text-align: right;
+}
+
+.password-grid {
+  display: grid;
+  grid-template-areas: "field";
 }
 
 .sign-in-error-container {
@@ -24,6 +33,7 @@
 
 .sign-in-password-input {
   margin-bottom: var(--seeds-s3);
+  grid-area: field;
 }
 
 .sign-in-action {

shared-helpers/src/views/sign-in/FormSignIn.tsx

@@ -19,6 +19,9 @@ export type FormSignInProps = {
 
 export type FormSignInControl = {
   errors: UseFormMethods["errors"]
+  handleSubmit?: UseFormMethods["handleSubmit"]
+  register?: UseFormMethods["register"]
+  watch?: UseFormMethods["watch"]
 }
 
 export type FormSignInValues = {

shared-helpers/src/views/sign-in/FormSignInDefault.tsx

@@ -1,9 +1,10 @@
 import React, { useContext } from "react"
 import { useRouter } from "next/router"
 import type { UseFormMethods } from "react-hook-form"
-import { Field, Form, NavigationContext, t } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Field, t } from "@bloom-housing/ui-components"
+import { Button, Link } from "@bloom-housing/ui-seeds"
 import { getListingRedirectUrl } from "../../utilities/getListingRedirectUrl"
+import { Form } from "../components/Form"
 import styles from "./FormSignIn.module.scss"
 
 export type FormSignInDefaultProps = {
@@ -31,7 +32,6 @@
   const onError = () => {
     window.scrollTo(0, 0)
   }
-  const { LinkComponent } = useContext(NavigationContext)
   const router = useRouter()
   const listingIdRedirect = router.query?.listingId as string
   const forgetPasswordURL = getListingRedirectUrl(listingIdRedirect, "/forgot-password")
@@ -49,23 +49,25 @@
         register={register}
         dataTestId="sign-in-email-field"
       />
-      <aside>
-        <LinkComponent href={forgetPasswordURL} className={styles["forgot-password"]}>
-          {t("authentication.signIn.forgotPassword")}
-        </LinkComponent>
-      </aside>
-      <Field
-        className={styles["sign-in-password-input"]}
-        name="password"
-        label={t("authentication.createAccount.password")}
-        labelClassName="text__caps-spaced"
-        validation={{ required: true }}
-        error={errors.password}
-        errorMessage={t("authentication.signIn.enterLoginPassword")}
-        register={register}
-        type={"password"}
-        dataTestId="sign-in-password-field"
-      />
+      <div className={styles["password-grid"]}>
+        <Field
+          className={styles["sign-in-password-input"]}
+          name="password"
+          label={t("authentication.createAccount.password")}
+          labelClassName="text__caps-spaced"
+          validation={{ required: true }}
+          error={errors.password}
+          errorMessage={t("authentication.signIn.enterLoginPassword")}
+          register={register}
+          type={"password"}
+          dataTestId="sign-in-password-field"
+        />
+        <aside className={styles["forgot-password-wrapper"]}>
+          <Link href={forgetPasswordURL} className={styles["forgot-password"]}>
+            {t("authentication.signIn.forgotPassword")}
+          </Link>
+        </aside>
+      </div>
       <div className={styles["sign-in-action"]}>
         <Button
           type="submit"

shared-helpers/src/views/sign-in/FormSignInPwdless.tsx

@@ -1,9 +1,10 @@
 import React, { useContext } from "react"
 import { useRouter } from "next/router"
 import type { UseFormMethods } from "react-hook-form"
-import { Field, Form, NavigationContext, t } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Field, t } from "@bloom-housing/ui-components"
+import { Button, Link } from "@bloom-housing/ui-seeds"
 import { getListingRedirectUrl } from "../../utilities/getListingRedirectUrl"
+import { Form } from "../components/Form"
 import styles from "./FormSignIn.module.scss"
 
 export type FormSignInPwdlessProps = {
@@ -35,7 +36,6 @@
   const onError = () => {
     window.scrollTo(0, 0)
   }
-  const { LinkComponent } = useContext(NavigationContext)
   const router = useRouter()
   const listingIdRedirect = router.query?.listingId as string
   const forgetPasswordURL = getListingRedirectUrl(listingIdRedirect, "/forgot-password")
@@ -56,12 +56,7 @@
       />
 
       {!useCode && (
-        <>
-          <aside>
-            <LinkComponent href={forgetPasswordURL} className={styles["forgot-password"]}>
-              {t("authentication.signIn.forgotPassword")}
-            </LinkComponent>
-          </aside>
+        <div className={styles["password-grid"]}>
           <Field
             className={styles["sign-in-password-input"]}
             name="password"
@@ -74,7 +69,12 @@
             type={"password"}
             dataTestId="sign-in-password-field"
           />
-        </>
+          <aside className={styles["forgot-password-wrapper"]}>
+            <Link href={forgetPasswordURL} className={styles["forgot-password"]}>
+              {t("authentication.signIn.forgotPassword")}
+            </Link>
+          </aside>
+        </div>
       )}
       <div className={styles["sign-in-action"]}>
         <Button

shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx

@@ -1,8 +1,9 @@
-import { t, Form, Field } from "@bloom-housing/ui-components"
+import { t, Field } from "@bloom-housing/ui-components"
 import { Button, Dialog } from "@bloom-housing/ui-seeds"
 import React, { useCallback, useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 import { emailRegex } from "../../utilities/regex"
+import { Form } from "../components/Form"
 
 export type ResendConfirmationModalProps = {
   isOpen: boolean

sites/partners/src/components/users/FormSignIn.module.scss

@@ -0,0 +1,7 @@
+.sign-in-error-container {
+  margin-inline: var(--seeds-s4);
+
+  @media (min-width: theme("screens.sm")) {
+    margin-inline: var(--seeds-s12);
+  }
+}

sites/partners/src/components/users/FormSignInAddPhone.tsx

@@ -1,15 +1,9 @@
 import React from "react"
-import {
-  Form,
-  FormCard,
-  t,
-  PhoneField,
-  FormSignInErrorBox,
-  NetworkStatus,
-} from "@bloom-housing/ui-components"
-import { Button, Icon } from "@bloom-housing/ui-seeds"
+import { t, PhoneField } from "@bloom-housing/ui-components"
+import { Button, Card } from "@bloom-housing/ui-seeds"
 import type { UseFormMethods } from "react-hook-form"
-import { CustomIconMap } from "@bloom-housing/shared-helpers"
+import { BloomCard, Form, FormSignInErrorBox, NetworkStatus } from "@bloom-housing/shared-helpers"
+import styles from "./FormSignIn.module.scss"
 
 export type FormSignInAddPhoneProps = {
   control: FormSignInAddPhoneControl
@@ -39,20 +33,19 @@ const FormSignInAddPhone = ({
   }
   const { errors, handleSubmit } = control
   return (
-    <FormCard>
-      <div className="form-card__lead text-center">
-        <Icon size="2xl">{CustomIconMap.profile}</Icon>
-        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.addNumber")}</h2>
-        <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
-      </div>
-      <FormSignInErrorBox
-        errors={errors}
-        networkStatus={networkError}
-        errorMessageId={"add-phone"}
-      />
-
-      <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+    <BloomCard
+      title={t("nav.signInMFA.addNumber")}
+      subtitle={t("nav.signInMFA.addNumberSecondaryTitle")}
+      iconSymbol="profile"
+    >
+      <Form id="sign-in-mfa" onSubmit={handleSubmit(onSubmit, onError)}>
+        <FormSignInErrorBox
+          errors={errors}
+          networkStatus={networkError}
+          errorMessageId={"add-phone"}
+          className={styles["sign-in-error-container"]}
+        />
+        <Card.Section>
           <PhoneField
             label={t("nav.signInMFA.phoneNumber")}
             caps={true}
@@ -66,15 +59,16 @@ const FormSignInAddPhone = ({
             dataTestId={"sign-in-phone-number-field"}
             defaultValue={phoneNumber}
           />
-
-          <div className="text-center mt-10">
+        </Card.Section>
+        <Card.Footer>
+          <Card.Section>
             <Button type="submit" variant="primary" id="request-mfa-code-and-add-phone">
               {t("nav.signInMFA.addPhoneNumber")}
             </Button>
-          </div>
-        </Form>
-      </div>
-    </FormCard>
+          </Card.Section>
+        </Card.Footer>
+      </Form>
+    </BloomCard>
   )
 }