feat: DAH-2705 Sign in page frontend (#2327)

* feat: password field types * feat: default hidden password * feat: position password * feat: snapshot update * fix: update tests * fix: update e2e
SFDigitalServices · Oct 3, 2024 · 48a883a · 48a883a
1 parent eb161ed
commit 48a883a
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 82 deletions.
diff --git a/app/assets/json/translations/react/en.json b/app/assets/json/translations/react/en.json
@@ -551,7 +551,7 @@
   "footer.privacyPolicy": "Privacy Policy",
   "forgotPassword.emailSentDescription": "You'll receive an email with a link to reset your password.",
   "forgotPassword.emailSentTitle": "We've sent you an email.",
-  "forgotPassword.title": "Forgot Password",
+  "forgotPassword.title": "Forgot password?",
   "g1Confirmation.browseMoreListings": "Browse more listings",
   "g1Confirmation.createAccountBody": "Creating an account will save your information for future applications, and you can check the status of this application anytime.",
   "g1Confirmation.createAccountTitle": "Would you like to create an account?",
@@ -1388,7 +1388,7 @@
   "pageTitle.saleListings": "Sale Listings",
   "pageTitle.shareListing": "Share %{listing}",
   "pageTitle.shareThisListing": "Share this listing",
-  "pageTitle.signIn": "Sign In",
+  "pageTitle.signIn": "Sign in",
   "preferences.aliceGriffith.address": "Alice Griffith Address",
   "preferences.aliceGriffith.addressDesc": "Your address at Alice Griffith Housing Development",
   "preferences.aliceGriffith.desc": "For households in which at least one member was a resident of the Alice Griffith housing development.",
@@ -1491,6 +1491,8 @@
   "signIn.badCredentials": "Invalid login credentials. Please try again.",
   "signIn.dontHaveAccount": "Don't have an account?",
   "signIn.forgotPassword": "Forgot password?",
+  "signIn.easilyCheckLottery": "Easily check lottery results",
+  "signIn.fillInFaster": "Fill in applications faster",
   "signIn.loggedOutDueToInactivity": "We care about your security. We logged you out due to inactivity. Please sign in to continue.",
   "signIn.resentConfirmationMessage": "Email sent. Please check your inbox.",
   "signIn.signInRequired": "Please sign in to your account to access this page.",

diff --git a/app/assets/json/translations/react/tl.json b/app/assets/json/translations/react/tl.json
@@ -548,7 +548,7 @@
   "footer.privacyPolicy": "Polisiya Ukol sa Pagiging Pribado ng Impormasyon ",
   "forgotPassword.emailSentDescription": "Makatatanggap kayo ng email na may link para mabago ninyo ang password. ",
   "forgotPassword.emailSentTitle": "Pinadalhan na namin kayo ng email. ",
-  "forgotPassword.title": "Nakalimutan ang Password",
+  "forgotPassword.title": "Nakalimutan ang password?",
   "g1Confirmation.browseMoreListings": "Tingnan ang iba pang nakalistang pabahay",
   "g1Confirmation.createAccountBody": "Sa paggawa ng account, ma-se-save ang inyong impormasyon para sa mga aplikasyon sa hinaharap at puwede ninyong matingnan ang estado ng aplikasyong ito sa anumang oras.",
   "g1Confirmation.createAccountTitle": "Gusto ba ninyong gumawa ng account?",
@@ -1376,7 +1376,7 @@
   "pageTitle.saleListings": "Mga Nakalistang Pabahay na Ipinagbibili",
   "pageTitle.shareListing": "I-share ang %{listing}",
   "pageTitle.shareThisListing": "Ibahagi ang nakalistang pabahay na ito",
-  "pageTitle.signIn": "Mag-sign In ",
+  "pageTitle.signIn": "Mag-sign in ",
   "preferences.aliceGriffith.address": "Address sa Alice Griffith",
   "preferences.aliceGriffith.addressDesc": "Ang inyong address sa Alice Griffith Housing Development",
   "preferences.aliceGriffith.desc": "Para sa mga kabahayan na may kahit na isang miyembro na naging residente ng Alice Griffith housing development.",

diff --git a/app/assets/json/translations/react/zh.json b/app/assets/json/translations/react/zh.json
@@ -548,7 +548,7 @@
   "footer.privacyPolicy": "隱私政策",
   "forgotPassword.emailSentDescription": "您會收到一封電子郵件，裡面包含重設密碼的連結。",
   "forgotPassword.emailSentTitle": "我們已經傳送給您一封電子郵件。",
-  "forgotPassword.title": "忘記密碼",
+  "forgotPassword.title": "忘記密碼？",
   "g1Confirmation.browseMoreListings": "瀏覽更多清單",
   "g1Confirmation.createAccountBody": "建立帳戶可讓您儲存資訊供日後申請之用，而且您可以隨時查看該申請的狀況。",
   "g1Confirmation.createAccountTitle": "您是否要建立帳戶？",

diff --git a/app/javascript/__tests__/components/PasswordFieldset.test.tsx b/app/javascript/__tests__/components/PasswordFieldset.test.tsx
@@ -17,7 +17,15 @@ const WrappedPasswordFieldset = () => {
     watch,
   } = useForm({ mode: "all" })
 
-  return <PasswordFieldset register={register} errors={errors} watch={watch} edit />
+  return (
+    <PasswordFieldset
+      register={register}
+      errors={errors}
+      watch={watch}
+      passwordType="accountSettings"
+      labelText={t("label.password")}
+    />
+  )
 }
 
 describe("Password Fieldset", () => {

diff --git a/app/javascript/__tests__/pages/SignIn.test.tsx b/app/javascript/__tests__/pages/SignIn.test.tsx
@@ -13,9 +13,9 @@ jest.mock("react-helmet-async", () => {
 describe("<SignIn />", () => {
   it("shows the correct form text", async () => {
     const { getAllByText, getByText } = await renderAndLoadAsync(<SignIn assetPaths={{}} />)
-    expect(getAllByText("Sign In")).toHaveLength(4)
+    expect(getAllByText("Sign in")).not.toBeNull()
     expect(getByText("Email")).not.toBeNull()
     expect(getByText("Password")).not.toBeNull()
-    expect(getByText("Don't have an account?")).not.toBeNull()
+    expect(getByText("Create an account")).not.toBeNull()
   })
 })
diff --git a/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap b/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap
@@ -250,7 +250,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -360,7 +360,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -478,7 +478,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -534,7 +534,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -1087,7 +1087,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -1197,7 +1197,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -1315,7 +1315,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -1371,7 +1371,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -1981,7 +1981,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -2091,7 +2091,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -2209,7 +2209,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -2265,7 +2265,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                       novalidate=""
                     >
                       <fieldset
-                        class="form-fieldset"
+                        class="form-fieldset w-full"
                       >
                         <legend
                           class="fieldset-legend"
@@ -2818,7 +2818,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -2928,7 +2928,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -3046,7 +3046,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"
@@ -3102,7 +3102,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                     novalidate=""
                   >
                     <fieldset
-                      class="form-fieldset"
+                      class="form-fieldset w-full"
                     >
                       <legend
                         class="fieldset-legend"

diff --git a/app/javascript/authentication/SignInForm.tsx b/app/javascript/authentication/SignInForm.tsx
@@ -3,7 +3,6 @@ import React, { useState, useContext } from "react"
 import {
   AppearanceStyleType,
   Button,
-  Field,
   Form,
   t,
   FormCard,
@@ -16,6 +15,10 @@ import { useForm } from "react-hook-form"
 
 import { getMyAccountPath } from "../util/routeUtil"
 import UserContext from "./context/UserContext"
+import EmailFieldset from "../pages/account/components/EmailFieldset"
+import PasswordFieldset from "../pages/account/components/PasswordFieldset"
+import { Link, Heading } from "@bloom-housing/ui-seeds"
+import "../pages/account/styles/account.scss"
 
 const SignInForm = () => {
   const { signIn } = useContext(UserContext)
@@ -24,7 +27,7 @@ const SignInForm = () => {
   // This is causing a linting issue with unbound-method, see open issue as of 10/21/2020:
   // https://github.com/react-hook-form/react-hook-form/issues/2887
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { register, handleSubmit, errors } = useForm()
+  const { register, handleSubmit, errors, watch } = useForm()
   const [requestError, setRequestError] = useState<string>()
 
   const onSubmit = (data: { email: string; password: string }) => {
@@ -45,7 +48,7 @@ const SignInForm = () => {
     <FormCard>
       <div className="form-card__lead text-center border-b mx-0">
         <Icon size="2xl" symbol="profile" />
-        <h2 className="form-card__title">Sign In</h2>
+        <h2 className="form-card__title">{t("pageTitle.signIn")}</h2>
       </div>
       {requestError && (
         <AlertBox onClose={() => setRequestError(undefined)} type="alert">
@@ -54,51 +57,41 @@ const SignInForm = () => {
       )}
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0 border-b">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit)}>
-          <Field
-            caps={true}
-            name="email"
-            label="Email"
-            validation={{ required: true }}
-            error={errors.email}
-            errorMessage="Please enter your login email"
+        <Form id="sign-in" className="mt-10 relative" onSubmit={handleSubmit(onSubmit)}>
+          <EmailFieldset register={register} errors={errors} />
+          <span className="right-0 absolute">
+            <Link href="/forgot-password" className="forgot-password-link">
+              {t("forgotPassword.title")}
+            </Link>
+          </span>
+          <PasswordFieldset
             register={register}
+            errors={errors}
+            watch={watch}
+            labelText={t("label.password")}
+            passwordType="signIn"
           />
-
-          {/* TODO: Add /forgot-password link */}
-          <aside className="float-right font-bold">
-            {/* <Link href="/forgot-password">
-                {t("signIn.forgotPassword")}
-              </Link> */}
-          </aside>
-
-          <Field
-            caps={true}
-            name="password"
-            label="Password"
-            validation={{ required: true }}
-            error={errors.password}
-            errorMessage="Please enter your login password"
-            register={register}
-            type="password"
-          />
-
-          <div className="text-center mt-6">
+          <div className="text-center mt-4">
             <Button
               styleType={AppearanceStyleType.primary}
               onClick={() => {
                 //
               }}
             >
-              Sign In
+              {t("pageTitle.signIn")}
             </Button>
           </div>
         </Form>
       </div>
       <div className="form-card__group text-center">
-        <h2 className="mb-6">Don't have an account?</h2>
-
-        <LinkButton href="/create-account">Create Account</LinkButton>
+        <Heading size="2xl" priority={3}>
+          {t("createAccount.title.sentenceCase")}
+        </Heading>
+        <div className="py-4">
+          <p>{t("signIn.fillInFaster")}</p>
+          <p>{t("signIn.easilyCheckLottery")}</p>
+        </div>
+        <LinkButton href="/create-account">{t("label.createAccount")}</LinkButton>
       </div>
     </FormCard>
   )

diff --git a/app/javascript/pages/account/account-settings.tsx b/app/javascript/pages/account/account-settings.tsx
@@ -202,7 +202,13 @@ const PasswordSection = ({ user, setUser }: SectionProps) => {
         messageMap={(messageKey) => getErrorMessage(messageKey, passwordFieldsetErrors, true)}
       />
       <UpdateForm onSubmit={handleSubmit(onSubmit)} loading={loading}>
-        <PasswordFieldset register={register} errors={errors} watch={watch} edit />
+        <PasswordFieldset
+          register={register}
+          errors={errors}
+          watch={watch}
+          labelText={t("label.password")}
+          passwordType="accountSettings"
+        />
       </UpdateForm>
     </>
   )

diff --git a/app/javascript/pages/account/components/Fieldset.tsx b/app/javascript/pages/account/components/Fieldset.tsx
@@ -9,7 +9,7 @@ interface FieldsetProps {
 
 const Fieldset = ({ hasError, label, children, note }: FieldsetProps) => {
   return (
-    <fieldset className="form-fieldset">
+    <fieldset className="form-fieldset w-full">
       <legend className={hasError ? "fieldset-legend text-alert" : "fieldset-legend"}>
         {label}
       </legend>