From 3b7d0c4e83af9e25c0e95a58fdcc7b34c51c174f Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 19 Feb 2024 21:04:45 -0500
Subject: [PATCH 01/40] multi-step modal login/signup flow

---
 client/src/components/EmailAlertSignup.tsx  |  42 ++----
 client/src/components/EmailInput.tsx        |  79 ++++++++++
 client/src/components/PasswordInput.tsx     |  31 ++--
 client/src/components/UserContext.tsx       |  15 +-
 client/src/components/UserSettingField.tsx  |  21 +--
 client/src/components/UserTypeInput.tsx     | 152 ++++++++++++++++++++
 client/src/containers/ResetPasswordPage.tsx |  16 ++-
 client/src/styles/EmailInput.scss           |  61 ++++++++
 client/src/styles/Login.scss                |  60 +++-----
 client/src/styles/Password.scss             |  25 +++-
 client/src/styles/UserTypeInput.scss        |  69 +++++++++
 client/src/styles/_input.scss               |   1 -
 client/src/util/helpers.ts                  |  20 ++-
 13 files changed, 487 insertions(+), 105 deletions(-)
 create mode 100644 client/src/components/EmailInput.tsx
 create mode 100644 client/src/components/UserTypeInput.tsx
 create mode 100644 client/src/styles/EmailInput.scss
 create mode 100644 client/src/styles/UserTypeInput.scss

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index b25a6fc73..1f62d7663 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -10,7 +10,6 @@ import "styles/EmailAlertSignup.css";
 import { JustfixUser } from "state-machine";
 import AuthClient from "./AuthClient";
 import { AlertIconOutline, SubscribedIcon } from "./Icons";
-import Modal from "./Modal";
 
 type BuildingSubscribeProps = withI18nProps & {
   bbl: string;
@@ -91,7 +90,7 @@ const EmailAlertSignupWithoutI18n = (props: EmailAlertProps) => {
   const { bbl, housenumber, streetname, zip, boro } = props;
   const userContext = useContext(UserContext);
   const { user } = userContext;
-  const [showVerifyModal, setShowVerifyModal] = useState(false);
+  const [loginRegisterInProgress, setLoginRegisterInProgress] = useState(false);
 
   return (
     <>
@@ -114,8 +113,10 @@ const EmailAlertSignupWithoutI18n = (props: EmailAlertProps) => {
                   )}
                 </label>
                 <div className="table-content">
-                  {!user ? (
-                    <Fragment>
+                  {user && !loginRegisterInProgress ? (
+                    <BuildingSubscribe {...props} />
+                  ) : (
+                    <>
                       <div className="email-description">
                         <Trans>
                           Each weekly email includes HPD Complaints, HPD Violations, and Eviction
@@ -123,41 +124,16 @@ const EmailAlertSignupWithoutI18n = (props: EmailAlertProps) => {
                         </Trans>
                       </div>
                       <Login
-                        onBuildingPage={true}
+                        registerInModal
+                        onBuildingPage
+                        setLoginRegisterInProgress={setLoginRegisterInProgress}
                         onSuccess={(user: JustfixUser) => {
                           userContext.subscribe(bbl, housenumber, streetname, zip, boro, user);
-                          !user.verified && setShowVerifyModal(true);
                         }}
                       />
-                    </Fragment>
-                  ) : (
-                    <BuildingSubscribe {...props} />
+                    </>
                   )}
                 </div>
-                <Modal
-                  key={1}
-                  showModal={showVerifyModal}
-                  width={40}
-                  onClose={() => setShowVerifyModal(false)}
-                >
-                  <Trans render="h4">Verify your email to start receiving updates</Trans>
-                  {i18n._(
-                    t`Click the link we sent to ${user?.email}. It may take a few minutes to arrive.`
-                  )}
-                  <br />
-                  <br />
-                  <Trans>
-                    Once your email has been verified, you’ll be signed up for Data Updates.
-                  </Trans>
-                  <br />
-                  <br />
-                  <button
-                    className="button is-secondary is-full-width"
-                    onClick={() => AuthClient.resendVerifyEmail()}
-                  >
-                    <Trans>Resend email</Trans>
-                  </button>
-                </Modal>
               </div>
             )}
           </I18n>
diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
new file mode 100644
index 000000000..a4f1b0152
--- /dev/null
+++ b/client/src/components/EmailInput.tsx
@@ -0,0 +1,79 @@
+import { ChangeEvent } from "react";
+import { Trans, t } from "@lingui/macro";
+import { I18n } from "@lingui/core";
+import { withI18n } from "@lingui/react";
+import { AlertIcon } from "./Icons";
+
+import "styles/EmailInput.css";
+import "styles/_input.scss";
+
+type EmailInputProps = {
+  i18n: I18n;
+  email: string;
+  error: boolean;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+};
+
+const EmailInputWithoutI18n = (props: EmailInputProps) => {
+  const { i18n, email, error, setError, onChange, required } = props;
+
+  const isBadEmailFormat = () => {
+    /* valid email regex rules 
+      alpha numeric characters are ok, upper/lower case agnostic 
+      username: leading \_ ok, chars \_\.\-\+ ok in all other positions
+      domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
+    const pattern =
+      "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
+    const input = document.getElementById("email-input") as HTMLElement;
+    const inputValue = (input as HTMLInputElement).value;
+
+    // HTML input element has loose email validation requirements, so we check the input against a custom regex
+    const passStrictRegex = inputValue.match(pattern);
+    const passAutoValidation = document.querySelectorAll("input:invalid").length === 0;
+
+    if (!passAutoValidation || !passStrictRegex) {
+      setError(true);
+      input.className = input.className + " invalid";
+    } else {
+      setError(false);
+      input.className = input.className.split(" ")[0];
+    }
+  };
+
+  return (
+    <>
+      <div className="email-input-label">
+        <label htmlFor="email-input">
+          <Trans>Email address</Trans>
+        </label>
+      </div>
+      {error && (
+        <div className="email-input-errors">
+          <span id="input-field-error">
+            <AlertIcon />
+            <Trans>Please enter a valid email address. </Trans>
+          </span>
+        </div>
+      )}
+      <div className="email-input">
+        <input
+          type="email"
+          id="email-input"
+          className="input"
+          placeholder={i18n._(t`Enter email`)}
+          onChange={onChange}
+          onBlur={isBadEmailFormat}
+          value={email}
+          required={required}
+          // note: required={true} removed bc any empty state registers as invalid state
+        />
+      </div>
+    </>
+  );
+};
+
+const EmailInput = withI18n()(EmailInputWithoutI18n);
+
+export default EmailInput;
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index c7a663a34..128bc58a2 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-useless-escape */
-import React, { Fragment, useState } from "react";
+import React, { ChangeEvent, Fragment, useState } from "react";
 
 import "styles/Password.css";
 import "styles/_input.scss";
@@ -33,22 +33,33 @@ export const validatePassword = (password: string) => {
 type PasswordInputProps = {
   i18n: I18n;
   labelText: string;
+  password: string;
   username?: string;
-  onChange?: (password: string) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  setError?: React.Dispatch<React.SetStateAction<boolean>>;
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
 };
 
 const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
   const { account } = createWhoOwnsWhatRoutePaths();
-
-  const { i18n, labelText, username, onChange, showPasswordRules, showForgotPassword } = props;
-  const [password, setPassword] = useState("");
+  const {
+    i18n,
+    labelText,
+    username,
+    password,
+    setError,
+    onChange,
+    showPasswordRules,
+    showForgotPassword,
+  } = props;
   const [showPassword, setShowPassword] = useState(false);
 
-  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(e.target.value);
-    if (onChange) onChange(e.target.value);
+  const badPasswordFormat = () => {
+    const input = document.getElementById("password-input") as HTMLElement;
+    const inputValue = (input as HTMLInputElement).value;
+    const isValid = validatePassword(inputValue);
+    setError && setError(!isValid);
   };
 
   return (
@@ -76,8 +87,10 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
       <div className="password-input">
         <input
           type={showPassword ? "text" : "password"}
+          id="password-input"
           className="input"
-          onChange={handlePasswordChange}
+          onChange={onChange}
+          onBlur={badPasswordFormat}
           value={password}
         />
         <button
diff --git a/client/src/components/UserContext.tsx b/client/src/components/UserContext.tsx
index a83897c60..28cac190b 100644
--- a/client/src/components/UserContext.tsx
+++ b/client/src/components/UserContext.tsx
@@ -3,18 +3,23 @@ import { JustfixUser } from "state-machine";
 import AuthClient from "./AuthClient";
 import { authRequiredPaths } from "routes";
 
+type UserOrError = {
+  user?: JustfixUser;
+  error?: string;
+};
+
 export type UserContextProps = {
   user?: JustfixUser;
   register: (
     username: string,
     password: string,
     onSuccess?: (user: JustfixUser) => void
-  ) => Promise<string | void>;
+  ) => Promise<UserOrError | void>;
   login: (
     username: string,
     password: string,
     onSuccess?: (user: JustfixUser) => void
-  ) => Promise<string | void>;
+  ) => Promise<UserOrError | void>;
   logout: (fromPath: string) => void;
   subscribe: (
     bbl: string,
@@ -87,8 +92,9 @@ export const UserContextProvider = ({ children }: { children: React.ReactNode })
         };
         setUser(_user);
         if (onSuccess) onSuccess(_user);
+        return { user: _user };
       } else {
-        return response.error_description;
+        return { error: response.error_description };
       }
     },
     []
@@ -108,8 +114,9 @@ export const UserContextProvider = ({ children }: { children: React.ReactNode })
         };
         setUser(_user);
         if (onSuccess) onSuccess(_user);
+        return { user: _user };
       } else {
-        return response.error;
+        return { error: response.error };
       }
     },
     []
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index c8a1c5c9e..be92e4627 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -5,6 +5,7 @@ import { t, Trans } from "@lingui/macro";
 
 import "styles/EmailAlertSignup.css";
 import PasswordInput from "./PasswordInput";
+import { useInput } from "util/helpers";
 
 type PasswordSettingFieldProps = withI18nProps & {
   onSubmit: (currentPassword: string, newPassword: string) => void;
@@ -12,15 +13,10 @@ type PasswordSettingFieldProps = withI18nProps & {
 
 const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
   const { i18n, onSubmit } = props;
-  const [newPassword, setNewPassword] = useState("");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [currentPassword, setCurrentPassword] = useState("");
+  const { value: currentPassword, onChange: onChangeCurrentPassword } = useInput("");
+  const { value: newPassword, onChange: onChangeNewPassword } = useInput("");
   // const [showCurrentPassword, setShowCurrentPassword] = useState(false);
 
-  // const handleCurrentPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  //   setCurrentPassword(e.target.value);
-  // };
-
   const handleSubmit = () => {
     onSubmit(currentPassword, newPassword);
   };
@@ -28,7 +24,11 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
       <Trans render="label">Password</Trans>
-      <PasswordInput labelText="Enter your old password" />
+      <PasswordInput
+        labelText={i18n._(t`Enter your old password`)}
+        password={currentPassword}
+        onChange={onChangeCurrentPassword}
+      />
 
       {/* <div className="password-input">
         <input
@@ -42,9 +42,10 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
         </button>
       </div> */}
       <PasswordInput
-        labelText="Create a new password"
+        labelText={i18n._(t`Create a new password`)}
         showPasswordRules={true}
-        onChange={setNewPassword}
+        password={newPassword}
+        onChange={onChangeNewPassword}
       />
     </UserSettingField>
   );
diff --git a/client/src/components/UserTypeInput.tsx b/client/src/components/UserTypeInput.tsx
new file mode 100644
index 000000000..96066cc13
--- /dev/null
+++ b/client/src/components/UserTypeInput.tsx
@@ -0,0 +1,152 @@
+import { ChangeEvent, useState } from "react";
+import { Trans, t } from "@lingui/macro";
+import { I18n } from "@lingui/core";
+import { withI18n } from "@lingui/react";
+import { AlertIcon } from "./Icons";
+
+type UserTypeInputProps = {
+  i18n: I18n;
+  userType: string;
+  error: boolean;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  setUserType: React.Dispatch<React.SetStateAction<string>>;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+};
+
+const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
+  const { i18n, userType, error, setError, setUserType, onChange, required } = props;
+
+  const [activeRadio, setActiveRadio] = useState("");
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setActiveRadio(value);
+    if (value === USER_TYPES.other) {
+      setUserType("");
+    } else {
+      onChange(e);
+      setError(false);
+    }
+  };
+
+  const missingOtherText = () => {
+    const input = document.getElementById("user-type-input-other-text") as HTMLElement;
+    const inputValue = (input as HTMLInputElement).value;
+
+    if (!inputValue) {
+      setError(true);
+      input.className = input.className + " invalid";
+    } else {
+      setError(false);
+      input.className = input.className.split(" ")[0];
+    }
+  };
+
+  const USER_TYPES = {
+    tenant: i18n._(t`Tenant`),
+    organizer: i18n._(t`Organizer`),
+    advocate: i18n._(t`Advocate`),
+    legal: i18n._(t`Legal Worker`),
+    government: i18n._(t`Government Worker (Non-Lawyer)`),
+    other: i18n._(t`Other`),
+  };
+
+  return (
+    <div className="user-type-container">
+      <div className="user-type-radio-group">
+        <input
+          id="user-type-input-tenant"
+          className="input-radio"
+          required={required}
+          type="radio"
+          name="user-type"
+          value={USER_TYPES.tenant}
+          checked={activeRadio === USER_TYPES.tenant}
+          onChange={handleChange}
+        />
+        <label htmlFor={"user-type-input-tenant"}>{USER_TYPES.tenant}</label>
+        <input
+          id="user-type-input-organizer"
+          className="input-radio"
+          required={required}
+          type="radio"
+          name="user-type"
+          value={USER_TYPES.organizer}
+          checked={activeRadio === USER_TYPES.organizer}
+          onChange={handleChange}
+        />
+        <label htmlFor={"user-type-input-organizer"}>{USER_TYPES.organizer}</label>
+        <input
+          id="user-type-input-advocate"
+          className="input-radio"
+          required={required}
+          type="radio"
+          name="user-type"
+          value={USER_TYPES.advocate}
+          checked={activeRadio === USER_TYPES.advocate}
+          onChange={handleChange}
+        />
+        <label htmlFor={"user-type-input-advocate"}>{USER_TYPES.advocate}</label>
+        <input
+          id="user-type-input-legal"
+          className="input-radio"
+          required={required}
+          type="radio"
+          name="user-type"
+          value={USER_TYPES.legal}
+          checked={activeRadio === USER_TYPES.legal}
+          onChange={handleChange}
+        />
+        <label htmlFor={"user-type-input-legal"}>{USER_TYPES.legal}</label>
+        <input
+          id="user-type-input-government"
+          className="input-radio"
+          required={required}
+          type="radio"
+          name="user-type"
+          value={USER_TYPES.government}
+          checked={activeRadio === USER_TYPES.government}
+          onChange={handleChange}
+        />
+        <label htmlFor={"user-type-input-government"}>{USER_TYPES.government}</label>
+        <input
+          id="user-type-input-other"
+          className="input-radio"
+          required={required}
+          type="radio"
+          name="user-type"
+          value={USER_TYPES.other}
+          checked={activeRadio === USER_TYPES.other}
+          onChange={handleChange}
+        />
+        <label htmlFor={"user-type-input-other"}>{USER_TYPES.other}</label>
+      </div>
+      {activeRadio === USER_TYPES.other && (
+        <div className="user-type-input-text-group">
+          {error && (
+            <span id="input-field-error">
+              <AlertIcon />
+              <Trans>Please enter a response. </Trans>
+            </span>
+          )}
+          <input
+            required={required}
+            autoFocus
+            id="user-type-input-other-text"
+            className="input"
+            type="text"
+            name="user-type"
+            value={userType}
+            onChange={onChange}
+            onBlur={missingOtherText}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const UserTypeInput = withI18n()(UserTypeInputWithoutI18n);
+
+export default UserTypeInput;
diff --git a/client/src/containers/ResetPasswordPage.tsx b/client/src/containers/ResetPasswordPage.tsx
index 04e062e46..d84d46714 100644
--- a/client/src/containers/ResetPasswordPage.tsx
+++ b/client/src/containers/ResetPasswordPage.tsx
@@ -8,6 +8,7 @@ import { Trans, t } from "@lingui/macro";
 
 import { UserContext } from "components/UserContext";
 import PasswordInput from "components/PasswordInput";
+import { useInput } from "util/helpers";
 
 const ResetPasswordPage = withI18n()((props: withI18nProps) => {
   const { i18n } = props;
@@ -15,8 +16,8 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
   const params = new URLSearchParams(search);
 
   const [requestSent, setRequestSent] = React.useState(false);
-  const [value, setValue] = React.useState("");
   const userContext = useContext(UserContext);
+  const { value: password, onChange: onChangePassword } = useInput("");
 
   const delaySeconds = 5;
   const baseUrl = window.location.origin;
@@ -38,7 +39,7 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    await userContext.resetPassword(params.get("token") || "", value);
+    await userContext.resetPassword(params.get("token") || "", password);
     setRequestSent(true);
   };
 
@@ -49,13 +50,16 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
           {!requestSent ? (
             <>
               <Trans render="h4">Reset your password</Trans>
-              <form onSubmit={handleSubmit}>
+              <form className="input-group" onSubmit={handleSubmit}>
                 <PasswordInput
-                  labelText="Create a password"
+                  labelText={i18n._(t`Create a password`)}
                   showPasswordRules={true}
-                  onChange={setValue}
+                  password={password}
+                  onChange={onChangePassword}
                 />
-                <input type="submit" className="button is-primary" value={`Reset password`} />
+                <button type="submit" className="button is-primary">
+                  <Trans>Reset password</Trans>
+                </button>
               </form>
             </>
           ) : (
diff --git a/client/src/styles/EmailInput.scss b/client/src/styles/EmailInput.scss
new file mode 100644
index 000000000..80d415425
--- /dev/null
+++ b/client/src/styles/EmailInput.scss
@@ -0,0 +1,61 @@
+@import "_vars.scss";
+@import "_typography.scss";
+
+.email-input-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  label {
+    @include desktop-eyebrow();
+    // vars marked !important bc typography mixin is not available for inconsolata
+    font-weight: 600 !important;
+    font-family: $wow-font !important;
+    font-size: 1.3rem !important;
+    color: $justfix-black;
+
+    text-align: left;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  a {
+    color: $justfix-black;
+    font-size: 1.3rem;
+  }
+}
+
+.email-input {
+  display: flex;
+
+  input {
+    flex: 1;
+
+    &:invalid,
+    &.invalid {
+      border-color: $justfix-orange;
+    }
+
+    &:focus:invalid,
+    &.invalid:focus {
+      border-color: $justfix-black;
+    }
+  }
+}
+
+.email-input-errors {
+  display: flex;
+  flex-direction: column;
+
+  span {
+    display: flex;
+    align-items: center;
+    font-size: 1.3rem;
+    color: #ba4300;
+    margin-bottom: 0.5rem;
+
+    svg {
+      margin-right: 0.75rem;
+    }
+  }
+}
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index 329d42a90..1e62b75a4 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -10,37 +10,21 @@
     flex-direction: column;
     margin-top: 1rem;
 
-    #input-field-error {
-      display: flex;
-      align-items: center;
-      font-size: 1.3rem;
-      color: #ba4300;
-      margin-bottom: 0.5rem;
-
-      svg {
-        margin-right: 0.75rem;
-      }
-    }
-
-    input[type="email"],
-    .password-input {
+    .email-input,
+    .password-input,
+    .user-type-container {
       margin-bottom: 2rem;
     }
 
-    input[type="submit"] {
-      padding: 1.6rem 3.2rem !important;
-      align-self: center;
-      margin: 0 auto !important;
-    }
-
-    input:invalid,
-    .invalid {
-      border-color: $justfix-orange;
-    }
+    .submit-button-group {
+      display: flex;
 
-    input:focus:invalid,
-    .invalid:focus {
-      border-color: $justfix-black;
+      button[type="submit"],
+      input[type="submit"] {
+        padding: 1.6rem 3.2rem !important;
+        align-self: center;
+        margin: 0 auto !important;
+      }
     }
   }
 
@@ -48,18 +32,6 @@
     margin-top: 1.5rem;
   }
 
-  label {
-    @include desktop-eyebrow();
-    // vars marked !important bc typography mixin is not available for inconsolata
-    font-weight: 600 !important;
-    font-family: $wow-font !important;
-    font-size: 1.3rem !important;
-
-    text-align: left;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-  }
-
   .building-page-footer {
     display: flex;
     flex-direction: column;
@@ -113,6 +85,16 @@
     margin-top: 0.5rem;
   }
 
+  .verify-email-container {
+    h4,
+    .resend-verify-label {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 1.2rem;
+      margin-top: 1.4rem;
+    }
+  }
+
   .jf-alert {
     width: auto;
     font-size: 1.3rem;
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index d42606e30..d7f2aecae 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -2,11 +2,23 @@
 @import "_typography.scss";
 
 .password-input-label {
-  font-weight: 600 !important;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
+  label {
+    @include desktop-eyebrow();
+    // vars marked !important bc typography mixin is not available for inconsolata
+    font-weight: 600 !important;
+    font-family: $wow-font !important;
+    font-size: 1.3rem !important;
+    color: $justfix-black;
+
+    text-align: left;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
   a {
     color: $justfix-black;
     font-size: 1.3rem;
@@ -14,13 +26,22 @@
 }
 
 .password-input {
-  margin-bottom: 1rem;
   display: flex;
 
   input {
     flex: 1;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+
+    &:invalid,
+    &.invalid {
+      border-color: $justfix-orange;
+    }
+
+    &:focus:invalid,
+    &.invalid:focus {
+      border-color: $justfix-black;
+    }
   }
 
   button {
diff --git a/client/src/styles/UserTypeInput.scss b/client/src/styles/UserTypeInput.scss
new file mode 100644
index 000000000..69c3452b1
--- /dev/null
+++ b/client/src/styles/UserTypeInput.scss
@@ -0,0 +1,69 @@
+@import "_vars.scss";
+@import "_typography.scss";
+
+.user-type-container {
+  .user-type-radio-group {
+    display: grid;
+    grid-template-columns: 2rem auto;
+    gap: 1rem 0.8rem;
+    align-items: center;
+
+    label {
+      margin: 0;
+    }
+
+    input[type="radio"] {
+      /* Remove most all native input styles */
+      appearance: none;
+      /* For iOS < 15 */
+      background-color: $justfix-white;
+      /* Not removed via appearance */
+      margin: 0;
+
+      font: inherit;
+      color: $justfix-black;
+      width: 2rem;
+      height: 2rem;
+      border: 0.15em solid $justfix-black;
+      border-radius: 50%;
+      transform: translateY(-0.075em);
+
+      display: grid;
+      place-content: center;
+
+      &::before {
+        content: "";
+        width: 1.2rem;
+        height: 1.2rem;
+        border-radius: 50%;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em $justfix-black;
+        /* Windows High Contrast Mode */
+        background-color: CanvasText;
+      }
+
+      &:checked::before {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .user-type-input-text-group {
+    display: flex;
+    flex-direction: column;
+    margin: 2.4rem 2.8rem 0 2.8rem;
+
+    #input-field-error {
+      display: flex;
+      align-items: center;
+      font-size: 1.3rem;
+      color: #ba4300;
+      margin-bottom: 0.5rem;
+
+      svg {
+        margin-right: 0.75rem;
+      }
+    }
+  }
+}
diff --git a/client/src/styles/_input.scss b/client/src/styles/_input.scss
index 69b839e3c..d7158c621 100644
--- a/client/src/styles/_input.scss
+++ b/client/src/styles/_input.scss
@@ -3,7 +3,6 @@
 @mixin input() {
   display: inline-block;
   border: 1px solid $justfix-black;
-  background: $justfix-white;
   padding: 1rem;
   font-size: inherit;
   border-radius: 4px;
diff --git a/client/src/util/helpers.ts b/client/src/util/helpers.ts
index 896bdc0f2..3a448b520 100644
--- a/client/src/util/helpers.ts
+++ b/client/src/util/helpers.ts
@@ -3,7 +3,7 @@ import { AddressRecord, HpdContactAddress, SearchAddressWithoutBbl } from "compo
 import { reportError } from "error-reporting";
 import { t } from "@lingui/macro";
 import { I18n, MessageDescriptor } from "@lingui/core";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, ChangeEvent } from "react";
 import _ from "lodash";
 
 const hpdComplaintTypeTranslations = new Map([
@@ -132,6 +132,24 @@ export function searchAddrsAreEqual(
   );
 }
 
+// https://www.codevertiser.com/reusable-input-component-react/
+export const useInput = (initialValue: string) => {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState(false);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return {
+    value,
+    error,
+    onChange: handleChange,
+    setError,
+    setValue,
+  };
+};
+
 const helpers = {
   // filter repeated values in rbas and owners
   // uses Set which enforces uniqueness

From cc1d308b8e134685a196e20f8ffd9bf6916aa1f6 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 19 Feb 2024 21:05:12 -0500
Subject: [PATCH 02/40] +

---
 client/src/components/Login.tsx | 514 +++++++++++++++++++++-----------
 1 file changed, 342 insertions(+), 172 deletions(-)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 5dc15e8b7..35bb2ba5c 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -1,23 +1,31 @@
 import React, { useState, useContext } from "react";
-
-import "styles/Login.css";
-import "styles/_input.scss";
-
+import { Trans, t } from "@lingui/macro";
 import { I18n } from "@lingui/core";
 import { withI18n } from "@lingui/react";
-import { Trans, t } from "@lingui/macro";
+import classNames from "classnames";
+
+import AuthClient from "./AuthClient";
+import { JustfixUser } from "state-machine";
 import { UserContext } from "./UserContext";
+import { useInput } from "util/helpers";
 import PasswordInput from "./PasswordInput";
-import { JustfixUser } from "state-machine";
-import AuthClient from "./AuthClient";
+import EmailInput from "./EmailInput";
+import UserTypeInput from "./UserTypeInput";
 import { Alert } from "./Alert";
-import { AlertIcon, InfoIcon } from "./Icons";
+import { InfoIcon } from "./Icons";
 import Modal from "./Modal";
 
-export enum LoginState {
-  Default,
+import "styles/Login.css";
+import "styles/UserTypeInput.css";
+import "styles/_input.scss";
+
+enum Step {
+  CheckEmail,
   Login,
-  Register,
+  RegisterAccount,
+  RegisterUserType,
+  VerifyEmail,
+  VerifyEmailReminder,
 }
 
 type LoginProps = {
@@ -25,22 +33,53 @@ type LoginProps = {
   onBuildingPage?: boolean;
   onSuccess?: (user: JustfixUser) => void;
   handleRedirect?: () => void;
+  registerInModal?: boolean;
+  setLoginRegisterInProgress?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const LoginWithoutI18n = (props: LoginProps) => {
-  const { i18n, onBuildingPage, onSuccess, handleRedirect } = props;
-  const userContext = useContext(UserContext);
+  const {
+    i18n,
+    onBuildingPage,
+    onSuccess,
+    handleRedirect,
+    registerInModal,
+    setLoginRegisterInProgress,
+  } = props;
 
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [header, setHeader] = useState("Log in / sign up");
-  const [subheader, setSubheader] = useState("");
-  const [loginState, setLoginState] = useState(LoginState.Default);
-  const isDefaultState = loginState === LoginState.Default;
-  const isRegisterState = loginState === LoginState.Register;
+  const userContext = useContext(UserContext);
 
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
   const [showInfoModal, setShowInfoModal] = useState(false);
-  const [emailFormatError, setEmailFormatError] = useState(false);
+
+  const [step, setStep] = useState(Step.CheckEmail);
+  const isCheckEmailStep = step === Step.CheckEmail;
+  const isLoginStep = step === Step.Login;
+  const isRegisterAccountStep = step === Step.RegisterAccount;
+  const isRegisterUserTypeStep = step === Step.RegisterUserType;
+  const isVerifyEmailStep = step === Step.VerifyEmail;
+  const isVerifyEmailReminderStep = step === Step.VerifyEmailReminder;
+
+  const {
+    value: email,
+    error: emailError,
+    setError: setEmailError,
+    onChange: onChangeEmail,
+  } = useInput("");
+  const {
+    value: password,
+    error: passwordError,
+    setError: setPasswordError,
+    onChange: onChangePassword,
+  } = useInput("");
+  const {
+    value: userType,
+    error: userTypeError,
+    setError: setUserTypeError,
+    setValue: setUserType,
+    onChange: onChangeUserType,
+  } = useInput("");
+
   const [emptyAuthError, setEmptyAuthError] = useState(false);
   const [invalidAuthError, setInvalidAuthError] = useState(false);
   const [existingUserError, setExistingUserError] = useState(false);
@@ -51,70 +90,6 @@ const LoginWithoutI18n = (props: LoginProps) => {
     setExistingUserError(false);
   };
 
-  const toggleLoginState = (endState: LoginState) => {
-    if (endState === LoginState.Register) {
-      setLoginState(LoginState.Register);
-      if (!onBuildingPage) {
-        setHeader("Sign up");
-        setSubheader("With an account you can save buildings and get weekly updates");
-      }
-    } else if (endState === LoginState.Login) {
-      setLoginState(LoginState.Login);
-      if (!onBuildingPage) {
-        setHeader("Log in");
-        setSubheader("");
-      }
-    }
-  };
-
-  const handleEmailSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (isDefaultState && !!username && !emailFormatError) {
-      const existingUser = await AuthClient.isEmailAlreadyUsed(username);
-
-      if (existingUser) {
-        setExistingUserError(true);
-        toggleLoginState(LoginState.Login);
-      } else {
-        toggleLoginState(LoginState.Register);
-      }
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    resetErrorStates();
-
-    if (!username || !password) {
-      setEmptyAuthError(true);
-      return;
-    }
-
-    const existingUser = await AuthClient.isEmailAlreadyUsed(username);
-    if (existingUser) {
-      if (isRegisterState) {
-        setExistingUserError(true);
-      } else {
-        const error = await userContext.login(username, password, onSuccess);
-        if (!!error) {
-          setInvalidAuthError(true);
-        } else {
-          handleRedirect && handleRedirect();
-        }
-      }
-    } else {
-      const error = isRegisterState
-        ? await userContext.register(username, password, onSuccess)
-        : await userContext.login(username, password, onSuccess);
-
-      if (!!error) {
-        setInvalidAuthError(true);
-      } else {
-        handleRedirect && handleRedirect();
-      }
-    }
-  };
-
   const renderPageLevelAlert = (
     type: "error" | "success" | "info",
     message: string,
@@ -130,10 +105,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
       >
         {message}
         {showLogin && (
-          <button
-            className="button is-text ml-5"
-            onClick={() => toggleLoginState(LoginState.Login)}
-          >
+          <button className="button is-text ml-5" onClick={() => setStep(Step.Login)}>
             <Trans>Log in</Trans>
           </button>
         )}
@@ -152,10 +124,10 @@ const LoginWithoutI18n = (props: LoginProps) => {
         alertMessage = i18n._(t`The email and/or password cannot be blank.`);
         return renderPageLevelAlert("error", alertMessage);
       case existingUserError:
-        if (isRegisterState) {
+        if (isRegisterAccountStep) {
           alertMessage = i18n._(t`That email is already used.`);
           // show login button in alert
-          return renderPageLevelAlert("error", alertMessage, !onBuildingPage);
+          return renderPageLevelAlert("error", alertMessage, !onBuildingPage || showRegisterModal);
         } else if (onBuildingPage) {
           alertMessage = i18n._(t`Your email is associated with an account. Log in below.`);
           return renderPageLevelAlert("info", alertMessage);
@@ -163,15 +135,6 @@ const LoginWithoutI18n = (props: LoginProps) => {
     }
   };
 
-  const renderHeader = () => {
-    return (
-      <>
-        <h4 className="page-title text-center">{i18n._(t`${header}`)}</h4>
-        <h5 className="text-left">{i18n._(t`${subheader}`)}</h5>
-      </>
-    );
-  };
-
   const renderFooter = () => {
     return (
       <div className="building-page-footer">
@@ -186,13 +149,10 @@ const LoginWithoutI18n = (props: LoginProps) => {
           </button>
         </div>
         <div className="login-type-toggle">
-          {isRegisterState ? (
+          {isRegisterAccountStep ? (
             <>
               <Trans>Already have an account?</Trans>
-              <button
-                className="button is-text ml-5"
-                onClick={() => toggleLoginState(LoginState.Login)}
-              >
+              <button className="button is-text ml-5" onClick={() => setStep(Step.Login)}>
                 <Trans>Log in</Trans>
               </button>
             </>
@@ -201,7 +161,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
               <Trans>Don't have an account?</Trans>
               <button
                 className="button is-text ml-5 pt-20"
-                onClick={() => toggleLoginState(LoginState.Register)}
+                onClick={() => setStep(Step.RegisterAccount)}
               >
                 <Trans>Sign up</Trans>
               </button>
@@ -231,79 +191,289 @@ const LoginWithoutI18n = (props: LoginProps) => {
     );
   };
 
-  const isBadEmailFormat = () => {
-    /* valid email regex rules 
-      alpha numeric characters are ok, upper/lower case agnostic 
-      username: leading \_ ok, chars \_\.\-\+ ok in all other positions
-      domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
-    const pattern =
-      "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
-    const input = document.getElementById("email-input") as HTMLElement;
-    const inputValue = (input as HTMLInputElement).value;
-
-    // HTML input element has loose email validation requirements, so we check the input against a custom regex
-    const passStrictRegex = inputValue.match(pattern);
-    const passAutoValidation = document.querySelectorAll("input:invalid").length === 0;
-
-    if (!passAutoValidation || !passStrictRegex) {
-      setEmailFormatError(true);
-      input.className = input.className + " invalid";
-    } else {
-      setEmailFormatError(false);
-      input.className = input.className.split(" ")[0];
+  const renderVerifyEmail = () => {
+    return (
+      <div className="verify-email-container">
+        <h4>✅</h4>
+        <p>
+          {i18n._(
+            t`We just sent an email verification link to ${email}. To complete signup, please click the link in your email.`
+          )}
+        </p>
+        <Trans render="span" className="resend-verify-label">
+          Didn’t receive the link?
+        </Trans>
+        <button
+          className="button is-secondary is-full-width"
+          onClick={() => AuthClient.resendVerifyEmail()}
+        >
+          <Trans>Send again</Trans>
+        </button>
+      </div>
+    );
+  };
+
+  const renderVerifyEmailReminder = () => {
+    return (
+      <>
+        <Trans render="h4">Verify your email to start receiving updates</Trans>
+        {i18n._(t`Click the link we sent to ${email}. It may take a few minutes to arrive.`)}
+        <br />
+        <br />
+        <Trans>Once your email has been verified, you’ll be signed up for Data Updates.</Trans>
+        <br />
+        <br />
+        <button
+          className="button is-secondary is-full-width"
+          onClick={() => AuthClient.resendVerifyEmail()}
+        >
+          <Trans>Resend email</Trans>
+        </button>
+      </>
+    );
+  };
+
+  const onEmailSubmit = async () => {
+    !!setLoginRegisterInProgress && setLoginRegisterInProgress(true);
+
+    if (!email) {
+      // TODO: Make this specific to email only
+      // TODO: raise this error if showRegisterModal?
+      showRegisterModal && setEmptyAuthError(true);
+      registerInModal && setShowRegisterModal(true);
+      return;
+    }
+
+    if (!!email && emailError) {
+      // TODO Raise a new kind of bad email error, in addition to the input level one?
+      // in chrome the browser adds an alert on the textbox explaining the format error
+      // TODO: open modal if email error?
+      if (registerInModal && !showRegisterModal) {
+        setShowRegisterModal(true);
+      }
+      return;
+    }
+
+    if (!!email && !emailError) {
+      const existingUser = await AuthClient.isEmailAlreadyUsed(email);
+
+      if (existingUser) {
+        setExistingUserError(true);
+        setStep(Step.Login);
+      } else {
+        setStep(Step.RegisterAccount);
+        if (registerInModal && !showRegisterModal) {
+          setShowRegisterModal(true);
+        }
+      }
     }
   };
 
-  return (
-    <div className="Login">
-      {renderAlert()}
-      {!onBuildingPage && renderHeader()}
-      <form onSubmit={isDefaultState ? handleEmailSubmit : handleSubmit} className="input-group">
-        <Trans render="label">Email address</Trans>
-        {emailFormatError && (
-          <span id="input-field-error">
-            <AlertIcon />
-            <Trans>Please enter a valid email address. </Trans>
-          </span>
+  const onLoginSubmit = async () => {
+    resetErrorStates();
+
+    if (!email || !password) {
+      setEmptyAuthError(true);
+      return;
+    }
+
+    // context doesn't update immediately so can't check verified status within this onSubmit without returning the user
+    const resp = await userContext.login(email, password, onSuccess);
+
+    if (!!resp?.error) {
+      setInvalidAuthError(true);
+      return;
+    }
+
+    if (!!resp?.user && !resp.user.verified) {
+      setStep(Step.VerifyEmailReminder);
+      registerInModal && setShowRegisterModal(true);
+      return;
+    }
+
+    !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
+
+    handleRedirect && handleRedirect();
+  };
+
+  const onAccountSubmit = async () => {
+    if (!email) {
+      setEmptyAuthError(true);
+      return;
+    }
+
+    if (!!email && emailError) {
+      // TODO Raise a new kind of bad email error, in addition to the input level one?
+      // in chrome the browser adds an alert on the textbox explaining the format error
+      return;
+    }
+
+    const existingUser = await AuthClient.isEmailAlreadyUsed(email);
+    if (existingUser) {
+      setExistingUserError(true);
+      return;
+    }
+
+    if (!password) {
+      setEmptyAuthError(true);
+      return;
+    }
+
+    if (!!password && passwordError) {
+      // TODO: raise alert here, or ok with input level invalid pw note?
+      return;
+    }
+
+    setStep(Step.RegisterUserType);
+  };
+
+  const onUserTypeSubmit = async () => {
+    if (!userType || userTypeError) {
+      // TODO: raise alert here that this is required?
+      return;
+    }
+
+    const resp = await userContext.register(email, password, onSuccess);
+
+    if (!!resp?.error) {
+      setInvalidAuthError(true);
+      return;
+    }
+
+    if (!registerInModal) {
+      !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
+    }
+
+    setStep(Step.VerifyEmail);
+
+    // TODO: how to redirect when there is verify step?
+    // handleRedirect && handleRedirect();
+  };
+
+  let headerText = "";
+  let onSubmit = () => {};
+  let submitButtonText = "";
+  switch (step) {
+    case Step.CheckEmail:
+      headerText = onBuildingPage
+        ? i18n._(t`Get weekly Data Updates for complaints, violations, and evictions.`)
+        : i18n._(t`Log in / sign up`);
+      onSubmit = onEmailSubmit;
+      submitButtonText =
+        !onBuildingPage || showRegisterModal ? i18n._(t`Submit`) : i18n._(t`Get updates`);
+      break;
+    case Step.Login:
+      headerText = onBuildingPage ? "" : i18n._(t`Log in`);
+      onSubmit = onLoginSubmit;
+      submitButtonText = i18n._(t`Log in`);
+      break;
+    case Step.RegisterAccount:
+      headerText = onBuildingPage
+        ? i18n._(t`Create a password to start receiving Data Updates`)
+        : i18n._(t`Sign up`);
+      onSubmit = onAccountSubmit;
+      submitButtonText = i18n._(t`Next`);
+      break;
+    case Step.RegisterUserType:
+      headerText = i18n._(t`Which best describes you?`);
+      onSubmit = onUserTypeSubmit;
+      submitButtonText = "Sign up";
+      break;
+  }
+
+  const renderLoginFlow = () => {
+    return (
+      <div className="Login">
+        {!isVerifyEmailStep && !isVerifyEmailReminderStep && (
+          <>
+            {(!onBuildingPage || showRegisterModal) && (
+              <h4 className={classNames(!onBuildingPage && "page-title")}>{headerText}</h4>
+            )}
+            {renderAlert()}
+            <form
+              className="input-group"
+              onSubmit={(e) => {
+                e.preventDefault();
+                resetErrorStates();
+                onSubmit();
+              }}
+            >
+              {(isCheckEmailStep || isLoginStep || isRegisterAccountStep) && (
+                <EmailInput
+                  email={email}
+                  onChange={onChangeEmail}
+                  error={emailError}
+                  setError={setEmailError}
+                />
+              )}
+              {(isLoginStep || isRegisterAccountStep) && (
+                <PasswordInput
+                  labelText={isLoginStep ? i18n._(t`Password`) : i18n._(t`Create a password`)}
+                  password={password}
+                  username={email}
+                  setError={setPasswordError}
+                  onChange={onChangePassword}
+                  showPasswordRules={isRegisterAccountStep}
+                  showForgotPassword={!isRegisterAccountStep}
+                />
+              )}
+              {isRegisterUserTypeStep && (
+                <UserTypeInput
+                  userType={userType}
+                  setUserType={setUserType}
+                  error={userTypeError}
+                  setError={setUserTypeError}
+                  onChange={onChangeUserType}
+                />
+              )}
+              <div className="submit-button-group">
+                {/* {isRegisterUserTypeStep && (
+                <button
+                  type="button"
+                  className="button is-primary button-back"
+                  onClick={() => setLoginStep(LoginStep.RegisterAccount)}
+                >
+                  Back
+                </button>
+              )} */}
+                <button type="submit" className="button is-primary">
+                  {submitButtonText}
+                </button>
+              </div>
+            </form>
+          </>
         )}
-        <input
-          type="email"
-          id="email-input"
-          className="input"
-          placeholder={i18n._(t`Enter email`)}
-          onChange={(e) => {
-            setUsername(e.target.value);
+        {isVerifyEmailStep && renderVerifyEmail()}
+        {isVerifyEmailReminderStep && renderVerifyEmailReminder()}
+        {/* {onBuildingPage && renderFooter()} */}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {(!registerInModal || isCheckEmailStep || isLoginStep || isVerifyEmailStep) &&
+        renderLoginFlow()}
+      {registerInModal && (
+        <Modal
+          key={1}
+          showModal={showRegisterModal}
+          width={40}
+          onClose={() => {
+            resetErrorStates();
+            setShowRegisterModal(false);
+            if (isVerifyEmailStep || isVerifyEmailReminderStep) {
+              !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
+            }
           }}
-          onBlur={isBadEmailFormat}
-          value={username}
-          // note: required={true} removed bc any empty state registers as invalid state
-        />
-        {!isDefaultState && (
-          <PasswordInput
-            labelText={isRegisterState ? "Create a password" : "Password"}
-            username={username}
-            showPasswordRules={isRegisterState}
-            showForgotPassword={!isRegisterState}
-            onChange={setPassword}
-          />
-        )}
-        <input
-          type="submit"
-          className="button is-primary"
-          value={
-            isDefaultState
-              ? i18n._(t`Submit`)
-              : isRegisterState
-              ? i18n._(t`Sign up`)
-              : i18n._(t`Log in`)
-          }
-        />
-      </form>
-      {onBuildingPage && renderFooter()}
-    </div>
+        >
+          {renderLoginFlow()}
+        </Modal>
+      )}
+    </>
   );
 };
 
-const Login = withI18n()(LoginWithoutI18n);
+export const Login = withI18n()(LoginWithoutI18n);
 
 export default Login;

From dd08c25b89925fe7a96910f33a150723678ac782 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 19 Feb 2024 21:12:05 -0500
Subject: [PATCH 03/40] ignore unused footer for now

---
 client/src/components/Login.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 35bb2ba5c..0548e83dd 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -135,6 +135,8 @@ const LoginWithoutI18n = (props: LoginProps) => {
     }
   };
 
+  // TODO: do we need this anymore?
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const renderFooter = () => {
     return (
       <div className="building-page-footer">

From 0beb6b3f4c47f0d4c992a92e7c4cbd8927a59faa Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Tue, 20 Feb 2024 12:41:56 -0500
Subject: [PATCH 04/40] add preview urls pattern to cors whitelist

---
 project/settings.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/project/settings.py b/project/settings.py
index 134985931..8180c17a7 100644
--- a/project/settings.py
+++ b/project/settings.py
@@ -91,12 +91,12 @@ def get_required_env(key: str) -> str:
     "http://127.0.0.1:3000",
     "http://localhost:3000",
     "http://demo-wowserver.justfix.org",
-    "https://deploy-preview-703--wow-django-dev.netlify.app",
-    "https://deploy-preview-785--wow-django-dev.netlify.app",
-    "https://deploy-preview-811--wow-django-dev.netlify.app",
-    "https://deploy-preview-843--wow-django-dev.netlify.app",
 )
 
+CORS_ALLOWED_ORIGIN_REGEXES = [
+    r"https://\w+\.deploy-preview-(?:\d{1,4})--wow-django-dev\.netlify\.app"
+]
+
 # This is based off the default Django logging configuration:
 # https://github.com/django/django/blob/master/django/utils/log.py
 LOGGING = {

From 8343e22810255a1f67a26e5be1084a05a2af243b Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Tue, 20 Feb 2024 13:54:14 -0500
Subject: [PATCH 05/40] add back preview urls to whitelist

---
 project/settings.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/project/settings.py b/project/settings.py
index 8180c17a7..9cf5cbc80 100644
--- a/project/settings.py
+++ b/project/settings.py
@@ -91,6 +91,11 @@ def get_required_env(key: str) -> str:
     "http://127.0.0.1:3000",
     "http://localhost:3000",
     "http://demo-wowserver.justfix.org",
+    "https://deploy-preview-703--wow-django-dev.netlify.app",
+    "https://deploy-preview-785--wow-django-dev.netlify.app",
+    "https://deploy-preview-811--wow-django-dev.netlify.app",
+    "https://deploy-preview-843--wow-django-dev.netlify.app",
+    "https://deploy-preview-849--wow-django-dev.netlify.app",
 )
 
 CORS_ALLOWED_ORIGIN_REGEXES = [

From 7c9eb334f36d7188fe59db4e1cd9d824a3b84236 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Tue, 20 Feb 2024 19:45:55 -0500
Subject: [PATCH 06/40] clean up styles for login - text styles, padding, etc.

---
 client/src/components/EmailAlertSignup.tsx |   5 +-
 client/src/components/EmailInput.tsx       |   5 +-
 client/src/components/PasswordInput.tsx    |   6 +-
 client/src/styles/EmailAlertSignup.scss    |  11 +-
 client/src/styles/EmailInput.scss          |  92 ++++++-------
 client/src/styles/Login.scss               |   8 +-
 client/src/styles/Password.scss            | 149 +++++++++++----------
 client/src/styles/_button.scss             |   1 +
 8 files changed, 140 insertions(+), 137 deletions(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index 1f62d7663..347aeecb0 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -98,10 +98,7 @@ const EmailAlertSignupWithoutI18n = (props: EmailAlertProps) => {
         <div className="table-row">
           <I18n>
             {({ i18n }) => (
-              <div
-                title={i18n._(t`Get data updates for this building`)}
-                className="table-small-font"
-              >
+              <div className="table-small-font">
                 <label className="data-updates-label-container">
                   <span className="pill-new">
                     <Trans>NEW</Trans>
diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index a4f1b0152..89f1fe21e 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -43,7 +43,7 @@ const EmailInputWithoutI18n = (props: EmailInputProps) => {
   };
 
   return (
-    <>
+    <div className="email-input-field">
       <div className="email-input-label">
         <label htmlFor="email-input">
           <Trans>Email address</Trans>
@@ -62,7 +62,6 @@ const EmailInputWithoutI18n = (props: EmailInputProps) => {
           type="email"
           id="email-input"
           className="input"
-          placeholder={i18n._(t`Enter email`)}
           onChange={onChange}
           onBlur={isBadEmailFormat}
           value={email}
@@ -70,7 +69,7 @@ const EmailInputWithoutI18n = (props: EmailInputProps) => {
           // note: required={true} removed bc any empty state registers as invalid state
         />
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 128bc58a2..dd2d6fc5e 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-useless-escape */
-import React, { ChangeEvent, Fragment, useState } from "react";
+import React, { ChangeEvent, useState } from "react";
 
 import "styles/Password.css";
 import "styles/_input.scss";
@@ -63,7 +63,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
   };
 
   return (
-    <Fragment>
+    <div className="password-input-field">
       <div className="password-input-label">
         <label>{i18n._(t`${labelText}`)}</label>
         {showForgotPassword && (
@@ -101,7 +101,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
           {showPassword ? <HideIcon /> : <ShowIcon />}
         </button>
       </div>
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/client/src/styles/EmailAlertSignup.scss b/client/src/styles/EmailAlertSignup.scss
index f8f60bc48..3bb83f68e 100644
--- a/client/src/styles/EmailAlertSignup.scss
+++ b/client/src/styles/EmailAlertSignup.scss
@@ -35,13 +35,20 @@
     }
   }
 
+  .table-small-font {
+    padding: 0 !important;
+  }
+
   .table-content {
-    margin: 1rem 1rem 1.7rem 1rem !important;
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    padding: 2.4rem;
+    margin: 0 !important;
   }
 
   .email-description {
     text-align: left;
-    margin: 1rem 0 !important;
     line-height: 117%;
   }
 
diff --git a/client/src/styles/EmailInput.scss b/client/src/styles/EmailInput.scss
index 80d415425..36c365d7f 100644
--- a/client/src/styles/EmailInput.scss
+++ b/client/src/styles/EmailInput.scss
@@ -1,61 +1,63 @@
 @import "_vars.scss";
 @import "_typography.scss";
 
-.email-input-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  label {
-    @include desktop-eyebrow();
-    // vars marked !important bc typography mixin is not available for inconsolata
-    font-weight: 600 !important;
-    font-family: $wow-font !important;
-    font-size: 1.3rem !important;
-    color: $justfix-black;
-
-    text-align: left;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-  }
+.email-input-field {
+  .email-input-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    label {
+      @include body-standard;
+      // vars marked !important bc typography mixin is not available for inconsolata
+      // font-weight: 600 !important;
+      font-family: $wow-font !important;
+      font-size: 1.3rem !important;
+      line-height: 120%;
+      color: $justfix-black;
+
+      text-align: left;
+      margin-bottom: 0.5rem;
+    }
 
-  a {
-    color: $justfix-black;
-    font-size: 1.3rem;
+    a {
+      color: $justfix-black;
+      font-size: 1.3rem;
+    }
   }
-}
 
-.email-input {
-  display: flex;
+  .email-input {
+    display: flex;
 
-  input {
-    flex: 1;
+    input {
+      flex: 1;
 
-    &:invalid,
-    &.invalid {
-      border-color: $justfix-orange;
-    }
+      &:invalid,
+      &.invalid {
+        border-color: $justfix-orange;
+      }
 
-    &:focus:invalid,
-    &.invalid:focus {
-      border-color: $justfix-black;
+      &:focus:invalid,
+      &.invalid:focus {
+        border-color: $justfix-black;
+      }
     }
   }
-}
 
-.email-input-errors {
-  display: flex;
-  flex-direction: column;
-
-  span {
+  .email-input-errors {
     display: flex;
-    align-items: center;
-    font-size: 1.3rem;
-    color: #ba4300;
-    margin-bottom: 0.5rem;
-
-    svg {
-      margin-right: 0.75rem;
+    flex-direction: column;
+
+    span {
+      display: flex;
+      align-items: center;
+      font-size: 1.3rem;
+      color: #ba4300;
+      margin-bottom: 0.5rem;
+
+      svg {
+        margin-right: 0.75rem;
+      }
     }
   }
 }
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index 1e62b75a4..4a84ba809 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -8,13 +8,7 @@
   .input-group {
     display: flex;
     flex-direction: column;
-    margin-top: 1rem;
-
-    .email-input,
-    .password-input,
-    .user-type-container {
-      margin-bottom: 2rem;
-    }
+    gap: 2.4rem;
 
     .submit-button-group {
       display: flex;
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index d7f2aecae..d7fdf414b 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -1,97 +1,100 @@
 @import "_vars.scss";
 @import "_typography.scss";
 
-.password-input-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  label {
-    @include desktop-eyebrow();
-    // vars marked !important bc typography mixin is not available for inconsolata
-    font-weight: 600 !important;
-    font-family: $wow-font !important;
-    font-size: 1.3rem !important;
-    color: $justfix-black;
+.password-input-field {
+  .password-input-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    label {
+      @include body-standard;
+      // vars marked !important bc typography mixin is not available for inconsolata
+      // font-weight: 600 !important;
+      font-family: $wow-font !important;
+      font-size: 1.3rem !important;
+      line-height: 120%;
+      color: $justfix-black;
+
+      text-align: left;
+      margin-bottom: 0.5rem;
+    }
 
-    text-align: left;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    a {
+      color: $justfix-black;
+      font-size: 1.3rem;
+    }
   }
 
-  a {
-    color: $justfix-black;
-    font-size: 1.3rem;
-  }
-}
+  .password-input {
+    display: flex;
 
-.password-input {
-  display: flex;
+    input {
+      flex: 1;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
 
-  input {
-    flex: 1;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+      &:invalid,
+      &.invalid {
+        border-color: $justfix-orange;
+      }
 
-    &:invalid,
-    &.invalid {
-      border-color: $justfix-orange;
+      &:focus:invalid,
+      &.invalid:focus {
+        border-color: $justfix-black;
+      }
     }
 
-    &:focus:invalid,
-    &.invalid:focus {
-      border-color: $justfix-black;
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $justfix-white;
+      background-color: $justfix-black;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      width: 4rem;
     }
   }
 
-  button {
+  .password-input-rules {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    color: $justfix-white;
-    background-color: $justfix-black;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    width: 4rem;
+    flex-direction: column;
   }
-}
 
-.password-input-rules {
-  display: flex;
-  flex-direction: column;
-}
+  .password-input-rule {
+    @include body-standard;
 
-.password-input-rule {
-  @include desktop-eyebrow();
-
-  font-family: $wow-font !important;
-  font-size: 1.3rem !important;
-  font-weight: 500 !important;
-  text-transform: none !important;
-  color: $justfix-black;
-  text-align: left;
-
-  &::before {
-    content: "•";
-    display: inline-block;
-    margin-right: 0.5rem;
-    vertical-align: top;
-  }
+    font-family: $wow-font !important;
+    font-size: 1.3rem !important;
+    // font-weight: 500 !important;
+    line-height: 120%;
+    text-transform: none !important;
+    color: $justfix-black;
+    text-align: left;
 
-  // encoded SVG from https://yoksel.github.io/url-encoder/
-  &.invalid:before {
-    content: url("data:image/svg+xml, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14C3.14 14 0 10.8599 0 7C0 3.14007 3.14007 0 7 0C10.8599 0 14 3.14007 14 7C14 10.84 10.8599 14 7 14Z' fill='%23FF813A' /%3E%3Cpath d='M7 8.75C6.50422 8.75 6.125 8.37612 6.125 7.88729V3.48771C6.125 2.9989 6.50421 2.625 7 2.625C7.49579 2.625 7.875 2.99888 7.875 3.48771V7.88729C7.875 8.3763 7.49579 8.75 7 8.75Z' fill='%23FAF8F4' /%3E%3Cpath d='M6.97194 11.375C6.74608 11.375 6.52022 11.2879 6.37902 11.1136C6.20967 10.9394 6.125 10.736 6.125 10.5036C6.125 10.4455 6.125 10.3875 6.15316 10.3294C6.15316 10.2712 6.18132 10.2133 6.20967 10.1551C6.23783 10.097 6.26619 10.068 6.29435 10.0099C6.3225 9.95174 6.35086 9.92277 6.40718 9.86462C6.71771 9.54513 7.28225 9.54513 7.59282 9.86462C7.62098 9.89359 7.6775 9.95174 7.70565 10.0099C7.73381 10.068 7.76217 10.097 7.79033 10.1551C7.81849 10.2133 7.81849 10.2712 7.84684 10.3294C7.84684 10.3875 7.875 10.4455 7.875 10.5036C7.875 10.736 7.79033 10.9684 7.62098 11.1136C7.42367 11.2879 7.19781 11.375 6.97195 11.375H6.97194Z' fill='%23FAF8F4' /%3E%3C/svg%3E%0A");
-  }
+    &::before {
+      content: "•";
+      display: inline-block;
+      margin-right: 0.5rem;
+      vertical-align: top;
+    }
 
-  &.invalid {
-    color: #ba4300;
-  }
+    // encoded SVG from https://yoksel.github.io/url-encoder/
+    &.invalid:before {
+      content: url("data:image/svg+xml, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14C3.14 14 0 10.8599 0 7C0 3.14007 3.14007 0 7 0C10.8599 0 14 3.14007 14 7C14 10.84 10.8599 14 7 14Z' fill='%23FF813A' /%3E%3Cpath d='M7 8.75C6.50422 8.75 6.125 8.37612 6.125 7.88729V3.48771C6.125 2.9989 6.50421 2.625 7 2.625C7.49579 2.625 7.875 2.99888 7.875 3.48771V7.88729C7.875 8.3763 7.49579 8.75 7 8.75Z' fill='%23FAF8F4' /%3E%3Cpath d='M6.97194 11.375C6.74608 11.375 6.52022 11.2879 6.37902 11.1136C6.20967 10.9394 6.125 10.736 6.125 10.5036C6.125 10.4455 6.125 10.3875 6.15316 10.3294C6.15316 10.2712 6.18132 10.2133 6.20967 10.1551C6.23783 10.097 6.26619 10.068 6.29435 10.0099C6.3225 9.95174 6.35086 9.92277 6.40718 9.86462C6.71771 9.54513 7.28225 9.54513 7.59282 9.86462C7.62098 9.89359 7.6775 9.95174 7.70565 10.0099C7.73381 10.068 7.76217 10.097 7.79033 10.1551C7.81849 10.2133 7.81849 10.2712 7.84684 10.3294C7.84684 10.3875 7.875 10.4455 7.875 10.5036C7.875 10.736 7.79033 10.9684 7.62098 11.1136C7.42367 11.2879 7.19781 11.375 6.97195 11.375H6.97194Z' fill='%23FAF8F4' /%3E%3C/svg%3E%0A");
+    }
 
-  &.valid {
-    color: $justfix-green;
-  }
+    &.invalid {
+      color: #ba4300;
+    }
 
-  &.valid::before {
-    content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16666 7.97664L5.83332 12.6433L15.8333 2.64331' stroke='%231AA551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
+    &.valid {
+      color: $justfix-green;
+    }
+
+    &.valid::before {
+      content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16666 7.97664L5.83332 12.6433L15.8333 2.64331' stroke='%231AA551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
+    }
   }
 }
diff --git a/client/src/styles/_button.scss b/client/src/styles/_button.scss
index 5daf8cdeb..1cb1576fc 100644
--- a/client/src/styles/_button.scss
+++ b/client/src/styles/_button.scss
@@ -170,6 +170,7 @@
   white-space: normal;
   word-wrap: break-word;
   text-decoration: none;
+  text-transform: unset;
 
   transition: all 0.1s linear;
   transform: translateX(0rem);

From dd804a83eb677b393d57f6aa01f26eb629b3583c Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 21 Feb 2024 14:58:16 -0500
Subject: [PATCH 07/40] refactor error handling in input components, clean type

---
 client/src/components/EmailInput.tsx    | 40 +++++------
 client/src/components/Login.tsx         | 92 ++++++++++---------------
 client/src/components/UserTypeInput.tsx | 16 +++--
 client/src/styles/EmailInput.scss       |  2 -
 client/src/styles/Login.scss            |  5 ++
 client/src/styles/UserTypeInput.scss    | 26 ++++---
 client/src/util/helpers.ts              |  7 +-
 7 files changed, 91 insertions(+), 97 deletions(-)

diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index 89f1fe21e..5760b7708 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -1,59 +1,57 @@
 import { ChangeEvent } from "react";
-import { Trans, t } from "@lingui/macro";
+import { t } from "@lingui/macro";
 import { I18n } from "@lingui/core";
 import { withI18n } from "@lingui/react";
 import { AlertIcon } from "./Icons";
 
 import "styles/EmailInput.css";
 import "styles/_input.scss";
+import classNames from "classnames";
 
 type EmailInputProps = {
   i18n: I18n;
   email: string;
   error: boolean;
   setError: React.Dispatch<React.SetStateAction<boolean>>;
+  showError: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   required?: boolean;
 };
 
 const EmailInputWithoutI18n = (props: EmailInputProps) => {
-  const { i18n, email, error, setError, onChange, required } = props;
+  const { i18n, email, error, setError, showError, onChange, required } = props;
 
-  const isBadEmailFormat = () => {
+  const isBadEmailFormat = (value: string) => {
     /* valid email regex rules 
       alpha numeric characters are ok, upper/lower case agnostic 
       username: leading \_ ok, chars \_\.\-\+ ok in all other positions
       domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
     const pattern =
       "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
-    const input = document.getElementById("email-input") as HTMLElement;
-    const inputValue = (input as HTMLInputElement).value;
 
     // HTML input element has loose email validation requirements, so we check the input against a custom regex
-    const passStrictRegex = inputValue.match(pattern);
+    const passStrictRegex = value.match(pattern);
     const passAutoValidation = document.querySelectorAll("input:invalid").length === 0;
 
-    if (!passAutoValidation || !passStrictRegex) {
-      setError(true);
-      input.className = input.className + " invalid";
-    } else {
-      setError(false);
-      input.className = input.className.split(" ")[0];
-    }
+    return !passAutoValidation || !passStrictRegex;
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e);
+    const emailIsInvalid = isBadEmailFormat(e.target.value);
+    setError(emailIsInvalid);
   };
 
   return (
     <div className="email-input-field">
       <div className="email-input-label">
-        <label htmlFor="email-input">
-          <Trans>Email address</Trans>
-        </label>
+        <label htmlFor="email-input">{i18n._(t`Email address`)}</label>
       </div>
-      {error && (
+      {showError && error && (
         <div className="email-input-errors">
           <span id="input-field-error">
             <AlertIcon />
-            <Trans>Please enter a valid email address. </Trans>
+            {i18n._(t`Please enter a valid email address.`)}
           </span>
         </div>
       )}
@@ -61,12 +59,10 @@ const EmailInputWithoutI18n = (props: EmailInputProps) => {
         <input
           type="email"
           id="email-input"
-          className="input"
-          onChange={onChange}
-          onBlur={isBadEmailFormat}
+          className={classNames("input", { invalid: showError && error })}
+          onChange={handleChange}
           value={email}
           required={required}
-          // note: required={true} removed bc any empty state registers as invalid state
         />
       </div>
     </div>
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 0548e83dd..e9c458783 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -63,7 +63,9 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const {
     value: email,
     error: emailError,
+    showError: showEmailError,
     setError: setEmailError,
+    setShowError: setShowEmailError,
     onChange: onChangeEmail,
   } = useInput("");
   const {
@@ -80,12 +82,10 @@ const LoginWithoutI18n = (props: LoginProps) => {
     onChange: onChangeUserType,
   } = useInput("");
 
-  const [emptyAuthError, setEmptyAuthError] = useState(false);
   const [invalidAuthError, setInvalidAuthError] = useState(false);
   const [existingUserError, setExistingUserError] = useState(false);
 
   const resetErrorStates = () => {
-    setEmptyAuthError(false);
     setInvalidAuthError(false);
     setExistingUserError(false);
   };
@@ -120,23 +120,13 @@ const LoginWithoutI18n = (props: LoginProps) => {
       case invalidAuthError:
         alertMessage = i18n._(t`The email and/or password you entered is incorrect.`);
         return renderPageLevelAlert("error", alertMessage);
-      case emptyAuthError:
-        alertMessage = i18n._(t`The email and/or password cannot be blank.`);
-        return renderPageLevelAlert("error", alertMessage);
-      case existingUserError:
-        if (isRegisterAccountStep) {
-          alertMessage = i18n._(t`That email is already used.`);
-          // show login button in alert
-          return renderPageLevelAlert("error", alertMessage, !onBuildingPage || showRegisterModal);
-        } else if (onBuildingPage) {
-          alertMessage = i18n._(t`Your email is associated with an account. Log in below.`);
-          return renderPageLevelAlert("info", alertMessage);
-        }
+      case existingUserError && isRegisterAccountStep:
+        alertMessage = i18n._(t`That email is already used.`);
+        // show login button in alert
+        return renderPageLevelAlert("error", alertMessage, !onBuildingPage || showRegisterModal);
     }
   };
 
-  // TODO: do we need this anymore?
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const renderFooter = () => {
     return (
       <div className="building-page-footer">
@@ -239,20 +229,17 @@ const LoginWithoutI18n = (props: LoginProps) => {
     !!setLoginRegisterInProgress && setLoginRegisterInProgress(true);
 
     if (!email) {
-      // TODO: Make this specific to email only
-      // TODO: raise this error if showRegisterModal?
-      showRegisterModal && setEmptyAuthError(true);
+      if (!onBuildingPage || showRegisterModal) {
+        setEmailError(true);
+        setShowEmailError(true);
+      }
       registerInModal && setShowRegisterModal(true);
       return;
     }
 
     if (!!email && emailError) {
-      // TODO Raise a new kind of bad email error, in addition to the input level one?
-      // in chrome the browser adds an alert on the textbox explaining the format error
-      // TODO: open modal if email error?
-      if (registerInModal && !showRegisterModal) {
-        setShowRegisterModal(true);
-      }
+      setEmailError(true);
+      setShowEmailError(true);
       return;
     }
 
@@ -260,7 +247,6 @@ const LoginWithoutI18n = (props: LoginProps) => {
       const existingUser = await AuthClient.isEmailAlreadyUsed(email);
 
       if (existingUser) {
-        setExistingUserError(true);
         setStep(Step.Login);
       } else {
         setStep(Step.RegisterAccount);
@@ -274,12 +260,11 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const onLoginSubmit = async () => {
     resetErrorStates();
 
-    if (!email || !password) {
-      setEmptyAuthError(true);
+    if (!email || emailError || !password || passwordError) {
       return;
     }
 
-    // context doesn't update immediately so can't check verified status within this onSubmit without returning the user
+    // context doesn't update immediately so need to reurn user to check verified status
     const resp = await userContext.login(email, password, onSuccess);
 
     if (!!resp?.error) {
@@ -287,26 +272,21 @@ const LoginWithoutI18n = (props: LoginProps) => {
       return;
     }
 
+    if (!onBuildingPage) {
+      !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
+      handleRedirect && handleRedirect();
+      return;
+    }
+
     if (!!resp?.user && !resp.user.verified) {
       setStep(Step.VerifyEmailReminder);
       registerInModal && setShowRegisterModal(true);
       return;
     }
-
-    !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
-
-    handleRedirect && handleRedirect();
   };
 
   const onAccountSubmit = async () => {
-    if (!email) {
-      setEmptyAuthError(true);
-      return;
-    }
-
-    if (!!email && emailError) {
-      // TODO Raise a new kind of bad email error, in addition to the input level one?
-      // in chrome the browser adds an alert on the textbox explaining the format error
+    if (!email || emailError) {
       return;
     }
 
@@ -316,13 +296,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
       return;
     }
 
-    if (!password) {
-      setEmptyAuthError(true);
-      return;
-    }
-
-    if (!!password && passwordError) {
-      // TODO: raise alert here, or ok with input level invalid pw note?
+    if (!password || passwordError) {
       return;
     }
 
@@ -332,6 +306,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const onUserTypeSubmit = async () => {
     if (!userType || userTypeError) {
       // TODO: raise alert here that this is required?
+      setUserTypeError(true);
       return;
     }
 
@@ -342,14 +317,17 @@ const LoginWithoutI18n = (props: LoginProps) => {
       return;
     }
 
+    if (!onBuildingPage) {
+      !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
+      handleRedirect && handleRedirect();
+      return;
+    }
+
     if (!registerInModal) {
       !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
     }
 
     setStep(Step.VerifyEmail);
-
-    // TODO: how to redirect when there is verify step?
-    // handleRedirect && handleRedirect();
   };
 
   let headerText = "";
@@ -406,6 +384,8 @@ const LoginWithoutI18n = (props: LoginProps) => {
                   onChange={onChangeEmail}
                   error={emailError}
                   setError={setEmailError}
+                  showError={showEmailError}
+                  // note: required={true} removed bc any empty state registers as invalid state
                 />
               )}
               {(isLoginStep || isRegisterAccountStep) && (
@@ -447,14 +427,14 @@ const LoginWithoutI18n = (props: LoginProps) => {
         )}
         {isVerifyEmailStep && renderVerifyEmail()}
         {isVerifyEmailReminderStep && renderVerifyEmailReminder()}
-        {/* {onBuildingPage && renderFooter()} */}
+        {isRegisterAccountStep && renderFooter()}
       </div>
     );
   };
 
   return (
     <>
-      {(!registerInModal || isCheckEmailStep || isLoginStep || isVerifyEmailStep) &&
+      {(!showRegisterModal || isCheckEmailStep || isLoginStep || isVerifyEmailStep) &&
         renderLoginFlow()}
       {registerInModal && (
         <Modal
@@ -463,10 +443,10 @@ const LoginWithoutI18n = (props: LoginProps) => {
           width={40}
           onClose={() => {
             resetErrorStates();
+            setShowEmailError(false);
             setShowRegisterModal(false);
-            if (isVerifyEmailStep || isVerifyEmailReminderStep) {
-              !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
-            }
+            setStep(Step.CheckEmail);
+            !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
           }}
         >
           {renderLoginFlow()}
diff --git a/client/src/components/UserTypeInput.tsx b/client/src/components/UserTypeInput.tsx
index 96066cc13..dda5e3c76 100644
--- a/client/src/components/UserTypeInput.tsx
+++ b/client/src/components/UserTypeInput.tsx
@@ -3,6 +3,7 @@ import { Trans, t } from "@lingui/macro";
 import { I18n } from "@lingui/core";
 import { withI18n } from "@lingui/react";
 import { AlertIcon } from "./Icons";
+import classNames from "classnames";
 
 type UserTypeInputProps = {
   i18n: I18n;
@@ -31,15 +32,10 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
   };
 
   const missingOtherText = () => {
-    const input = document.getElementById("user-type-input-other-text") as HTMLElement;
-    const inputValue = (input as HTMLInputElement).value;
-
-    if (!inputValue) {
+    if (!userType) {
       setError(true);
-      input.className = input.className + " invalid";
     } else {
       setError(false);
-      input.className = input.className.split(" ")[0];
     }
   };
 
@@ -54,6 +50,12 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
 
   return (
     <div className="user-type-container">
+      {error && activeRadio !== USER_TYPES.other && (
+        <span id="input-field-error">
+          <AlertIcon />
+          <Trans>Please select an option.</Trans>
+        </span>
+      )}
       <div className="user-type-radio-group">
         <input
           id="user-type-input-tenant"
@@ -134,7 +136,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
             required={required}
             autoFocus
             id="user-type-input-other-text"
-            className="input"
+            className={classNames("input", { invalid: error })}
             type="text"
             name="user-type"
             value={userType}
diff --git a/client/src/styles/EmailInput.scss b/client/src/styles/EmailInput.scss
index 36c365d7f..55786b88e 100644
--- a/client/src/styles/EmailInput.scss
+++ b/client/src/styles/EmailInput.scss
@@ -32,12 +32,10 @@
     input {
       flex: 1;
 
-      &:invalid,
       &.invalid {
         border-color: $justfix-orange;
       }
 
-      &:focus:invalid,
       &.invalid:focus {
         border-color: $justfix-black;
       }
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index 4a84ba809..f142167b7 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -5,6 +5,10 @@
 .Login,
 .ForgotPasswordPage,
 .ResetPasswordPage {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+
   .input-group {
     display: flex;
     flex-direction: column;
@@ -70,6 +74,7 @@
 
   h4 {
     font-size: 2.4rem;
+    margin-bottom: 0;
   }
   h5 {
     font-size: 1.6rem;
diff --git a/client/src/styles/UserTypeInput.scss b/client/src/styles/UserTypeInput.scss
index 69c3452b1..9fdd636dc 100644
--- a/client/src/styles/UserTypeInput.scss
+++ b/client/src/styles/UserTypeInput.scss
@@ -54,16 +54,26 @@
     flex-direction: column;
     margin: 2.4rem 2.8rem 0 2.8rem;
 
-    #input-field-error {
-      display: flex;
-      align-items: center;
-      font-size: 1.3rem;
-      color: #ba4300;
-      margin-bottom: 0.5rem;
+    input {
+      &.invalid {
+        border-color: $justfix-orange;
+      }
 
-      svg {
-        margin-right: 0.75rem;
+      &.invalid:focus {
+        border-color: $justfix-black;
       }
     }
   }
+
+  #input-field-error {
+    display: flex;
+    align-items: center;
+    font-size: 1.3rem;
+    color: #ba4300;
+    margin-bottom: 0.5rem;
+
+    svg {
+      margin-right: 0.75rem;
+    }
+  }
 }
diff --git a/client/src/util/helpers.ts b/client/src/util/helpers.ts
index 3a448b520..be38f0cd5 100644
--- a/client/src/util/helpers.ts
+++ b/client/src/util/helpers.ts
@@ -136,6 +136,7 @@ export function searchAddrsAreEqual(
 export const useInput = (initialValue: string) => {
   const [value, setValue] = useState(initialValue);
   const [error, setError] = useState(false);
+  const [showError, setShowError] = useState(false);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
@@ -144,9 +145,11 @@ export const useInput = (initialValue: string) => {
   return {
     value,
     error,
-    onChange: handleChange,
-    setError,
+    showError,
     setValue,
+    setError,
+    setShowError,
+    onChange: handleChange,
   };
 };
 

From 64768cab2a8dc0476cc62930f8819384cabd1028 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 21 Feb 2024 15:40:55 -0500
Subject: [PATCH 08/40] login flow ending

---
 client/src/components/Login.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index e9c458783..1c8505ad8 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -272,17 +272,12 @@ const LoginWithoutI18n = (props: LoginProps) => {
       return;
     }
 
+    !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
+    
     if (!onBuildingPage) {
-      !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
       handleRedirect && handleRedirect();
       return;
     }
-
-    if (!!resp?.user && !resp.user.verified) {
-      setStep(Step.VerifyEmailReminder);
-      registerInModal && setShowRegisterModal(true);
-      return;
-    }
   };
 
   const onAccountSubmit = async () => {
@@ -390,7 +385,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
               )}
               {(isLoginStep || isRegisterAccountStep) && (
                 <PasswordInput
-                  labelText={isLoginStep ? i18n._(t`Password`) : i18n._(t`Create a password`)}
+                  labelText={i18n._(t`Password`)}
                   password={password}
                   username={email}
                   setError={setPasswordError}

From 33a66afef38c7220fff795c250fbfa13f049e125 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 21 Feb 2024 15:41:07 -0500
Subject: [PATCH 09/40] ix double padding on subscribed box

---
 client/src/components/EmailAlertSignup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index 347aeecb0..ac00c9304 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -63,7 +63,7 @@ const BuildingSubscribeWithoutI18n = (props: BuildingSubscribeProps) => {
   return (
     <I18n>
       {({ i18n }) => (
-        <div className="table-content building-subscribe">
+        <div className="building-subscribe">
           {!(subscriptions && !!subscriptions?.find((s) => s.bbl === bbl)) ? (
             <button
               className="button is-primary"

From c266c188e96cda25bf2ea8440de97d2b270b5510 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 21 Feb 2024 15:43:50 -0500
Subject: [PATCH 10/40] prettier

---
 client/src/components/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 1c8505ad8..b4f496c86 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -273,7 +273,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
     }
 
     !!setLoginRegisterInProgress && setLoginRegisterInProgress(false);
-    
+
     if (!onBuildingPage) {
       handleRedirect && handleRedirect();
       return;

From 3b99332cbefb2ddc8b9576f7c5927aa059dcc8b7 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 21 Feb 2024 16:58:20 -0500
Subject: [PATCH 11/40] clean up styles and fix subscribed icon

---
 client/src/components/EmailAlertSignup.tsx | 26 ++++++++++------------
 client/src/components/Icons.tsx            |  8 +++----
 client/src/components/Login.tsx            |  6 +++--
 client/src/styles/EmailAlertSignup.scss    |  6 +----
 client/src/styles/ForgotPasswordPage.scss  |  8 +++++--
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index ac00c9304..31aed24f3 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -42,21 +42,19 @@ const BuildingSubscribeWithoutI18n = (props: BuildingSubscribeProps) => {
   const showEmailVerification = (i18n: any) => {
     return (
       <div className="building-subscribe-status">
-        <div>
-          <div className="status-title">
-            <AlertIconOutline />
-            <Trans>Email verification required</Trans>
-          </div>
-          <div className="status-description">
-            {i18n._(t`Click the link we sent to ${email}. It may take a few minutes to arrive.`)}
-          </div>
-          <button
-            className="button is-secondary is-full-width"
-            onClick={() => AuthClient.resendVerifyEmail()}
-          >
-            <Trans>Resend email</Trans>
-          </button>
+        <div className="status-title">
+          <AlertIconOutline />
+          <Trans>Email verification required</Trans>
+        </div>
+        <div className="status-description">
+          {i18n._(t`Click the link we sent to ${email}. It may take a few minutes to arrive.`)}
         </div>
+        <button
+          className="button is-secondary is-full-width"
+          onClick={() => AuthClient.resendVerifyEmail()}
+        >
+          <Trans>Resend email</Trans>
+        </button>
       </div>
     );
   };
diff --git a/client/src/components/Icons.tsx b/client/src/components/Icons.tsx
index 8d625325b..c2ae08635 100644
--- a/client/src/components/Icons.tsx
+++ b/client/src/components/Icons.tsx
@@ -33,15 +33,15 @@ export const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const SubscribedIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="36"
+    width="31"
     height="30"
-    viewBox="0 0 36 30"
+    viewBox="0 0 31 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <rect x="0.5" width="34.6667" height="30" rx="15" fill="#242323" />
-    <path d="M10.5 15.3333L15.1667 20L25.1667 10" stroke="#F2F2F2" stroke-width="2" />
+    <rect x="0.5" width="30" height="30" rx="15" fill="#242323" />
+    <path d="M8 15.3333L12.6667 20L22.6667 10" stroke="#F2F2F2" strokeWidth="2" />
   </svg>
 );
 
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index b4f496c86..f3ef8a4d3 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -338,7 +338,9 @@ const LoginWithoutI18n = (props: LoginProps) => {
         !onBuildingPage || showRegisterModal ? i18n._(t`Submit`) : i18n._(t`Get updates`);
       break;
     case Step.Login:
-      headerText = onBuildingPage ? "" : i18n._(t`Log in`);
+      headerText = onBuildingPage
+        ? i18n._(t`Get weekly Data Updates for complaints, violations, and evictions.`)
+        : i18n._(t`Log in`);
       onSubmit = onLoginSubmit;
       submitButtonText = i18n._(t`Log in`);
       break;
@@ -410,7 +412,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
                   className="button is-primary button-back"
                   onClick={() => setLoginStep(LoginStep.RegisterAccount)}
                 >
-                  Back
+                  <Trans>Back</Trans>
                 </button>
               )} */}
                 <button type="submit" className="button is-primary">
diff --git a/client/src/styles/EmailAlertSignup.scss b/client/src/styles/EmailAlertSignup.scss
index 3bb83f68e..94e5cdd38 100644
--- a/client/src/styles/EmailAlertSignup.scss
+++ b/client/src/styles/EmailAlertSignup.scss
@@ -62,6 +62,7 @@
     display: flex;
     flex-direction: column;
     text-align: left;
+    gap: 2.4rem;
 
     button {
       align-self: center;
@@ -70,15 +71,10 @@
     .status-title {
       display: flex;
       align-items: center;
-      margin-bottom: 2rem;
 
       svg {
         margin-right: 1rem;
       }
     }
-
-    .status-description {
-      margin-bottom: 2rem;
-    }
   }
 }
diff --git a/client/src/styles/ForgotPasswordPage.scss b/client/src/styles/ForgotPasswordPage.scss
index 46ab9dabc..fe0ffd410 100644
--- a/client/src/styles/ForgotPasswordPage.scss
+++ b/client/src/styles/ForgotPasswordPage.scss
@@ -2,16 +2,20 @@
 @import "_typography.scss";
 
 .ForgotPasswordPage {
-  .page-title {
-    margin-top: 1.5rem;
+  .page-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
   }
 
   h4 {
     font-size: 2.4rem;
+    margin: 0;
   }
 
   h5 {
     font-size: 1.6rem;
+    margin: 0;
   }
 
   label {

From c35e754261a931995fe5916b36bdad3b78939d6e Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 22 Feb 2024 12:44:37 -0500
Subject: [PATCH 12/40] update headers and existinguser alerts on building apge

---
 client/src/components/EmailAlertSignup.tsx | 24 ++++++++--------------
 client/src/components/Login.tsx            | 24 ++++++++++++++++------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index 31aed24f3..3a8eff9a4 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -111,22 +111,14 @@ const EmailAlertSignupWithoutI18n = (props: EmailAlertProps) => {
                   {user && !loginRegisterInProgress ? (
                     <BuildingSubscribe {...props} />
                   ) : (
-                    <>
-                      <div className="email-description">
-                        <Trans>
-                          Each weekly email includes HPD Complaints, HPD Violations, and Eviction
-                          Filings.
-                        </Trans>
-                      </div>
-                      <Login
-                        registerInModal
-                        onBuildingPage
-                        setLoginRegisterInProgress={setLoginRegisterInProgress}
-                        onSuccess={(user: JustfixUser) => {
-                          userContext.subscribe(bbl, housenumber, streetname, zip, boro, user);
-                        }}
-                      />
-                    </>
+                    <Login
+                      registerInModal
+                      onBuildingPage
+                      setLoginRegisterInProgress={setLoginRegisterInProgress}
+                      onSuccess={(user: JustfixUser) => {
+                        userContext.subscribe(bbl, housenumber, streetname, zip, boro, user);
+                      }}
+                    />
                   )}
                 </div>
               </div>
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index f3ef8a4d3..bc0cb5716 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -120,10 +120,15 @@ const LoginWithoutI18n = (props: LoginProps) => {
       case invalidAuthError:
         alertMessage = i18n._(t`The email and/or password you entered is incorrect.`);
         return renderPageLevelAlert("error", alertMessage);
-      case existingUserError && isRegisterAccountStep:
-        alertMessage = i18n._(t`That email is already used.`);
-        // show login button in alert
-        return renderPageLevelAlert("error", alertMessage, !onBuildingPage || showRegisterModal);
+      case existingUserError:
+        if (isRegisterAccountStep) {
+          alertMessage = i18n._(t`That email is already used.`);
+          // show login button in alert
+          return renderPageLevelAlert("error", alertMessage, !onBuildingPage || showRegisterModal);
+        } else if (isLoginStep && !(onBuildingPage && !showRegisterModal)) {
+          alertMessage = i18n._(t`Your email is associated with an account. Log in below.`);
+          return renderPageLevelAlert("info", alertMessage);
+        }
     }
   };
 
@@ -248,6 +253,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
 
       if (existingUser) {
         setStep(Step.Login);
+        setExistingUserError(true);
       } else {
         setStep(Step.RegisterAccount);
         if (registerInModal && !showRegisterModal) {
@@ -287,6 +293,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
 
     const existingUser = await AuthClient.isEmailAlreadyUsed(email);
     if (existingUser) {
+      setStep(Step.Login);
       setExistingUserError(true);
       return;
     }
@@ -338,9 +345,11 @@ const LoginWithoutI18n = (props: LoginProps) => {
         !onBuildingPage || showRegisterModal ? i18n._(t`Submit`) : i18n._(t`Get updates`);
       break;
     case Step.Login:
-      headerText = onBuildingPage
+      headerText = !onBuildingPage
+        ? i18n._(t`Log in`)
+        : showRegisterModal
         ? i18n._(t`Get weekly Data Updates for complaints, violations, and evictions.`)
-        : i18n._(t`Log in`);
+        : i18n._(t`Log in to start getting updates for this building.`);
       onSubmit = onLoginSubmit;
       submitButtonText = i18n._(t`Log in`);
       break;
@@ -366,6 +375,9 @@ const LoginWithoutI18n = (props: LoginProps) => {
             {(!onBuildingPage || showRegisterModal) && (
               <h4 className={classNames(!onBuildingPage && "page-title")}>{headerText}</h4>
             )}
+            {onBuildingPage && !showRegisterModal && (
+              <div className="email-description">{headerText}</div>
+            )}
             {renderAlert()}
             <form
               className="input-group"

From b7e722085a9881a818c9e604b5512d9e7b5cc559 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 22 Feb 2024 18:32:30 -0500
Subject: [PATCH 13/40] update verify copy/styles, fix input-level errors for
 sign up

---
 client/src/components/EmailAlertSignup.tsx |   8 +-
 client/src/components/Login.tsx            | 134 +++++++++++----------
 client/src/components/PasswordInput.tsx    |   9 +-
 client/src/styles/Login.scss               |  13 +-
 4 files changed, 94 insertions(+), 70 deletions(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index 3a8eff9a4..a08d47b54 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -10,6 +10,7 @@ import "styles/EmailAlertSignup.css";
 import { JustfixUser } from "state-machine";
 import AuthClient from "./AuthClient";
 import { AlertIconOutline, SubscribedIcon } from "./Icons";
+import { Alert } from "./Alert";
 
 type BuildingSubscribeProps = withI18nProps & {
   bbl: string;
@@ -42,10 +43,9 @@ const BuildingSubscribeWithoutI18n = (props: BuildingSubscribeProps) => {
   const showEmailVerification = (i18n: any) => {
     return (
       <div className="building-subscribe-status">
-        <div className="status-title">
-          <AlertIconOutline />
-          <Trans>Email verification required</Trans>
-        </div>
+        <Alert type="info">
+          <Trans>Verify your email to start receiving updates.</Trans>
+        </Alert>
         <div className="status-description">
           {i18n._(t`Click the link we sent to ${email}. It may take a few minutes to arrive.`)}
         </div>
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index bc0cb5716..d0658019f 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -71,7 +71,9 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const {
     value: password,
     error: passwordError,
+    showError: showPasswordError,
     setError: setPasswordError,
+    setShowError: setShowPasswordError,
     onChange: onChangePassword,
   } = useInput("");
   const {
@@ -125,7 +127,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
           alertMessage = i18n._(t`That email is already used.`);
           // show login button in alert
           return renderPageLevelAlert("error", alertMessage, !onBuildingPage || showRegisterModal);
-        } else if (isLoginStep && !(onBuildingPage && !showRegisterModal)) {
+        } else if (isLoginStep && onBuildingPage && showRegisterModal) {
           alertMessage = i18n._(t`Your email is associated with an account. Log in below.`);
           return renderPageLevelAlert("info", alertMessage);
         }
@@ -191,14 +193,9 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const renderVerifyEmail = () => {
     return (
       <div className="verify-email-container">
-        <h4>✅</h4>
-        <p>
-          {i18n._(
-            t`We just sent an email verification link to ${email}. To complete signup, please click the link in your email.`
-          )}
-        </p>
+        <p>{i18n._(t`Click the link we sent to ${email}. It may take a few minutes to arrive.`)}</p>
         <Trans render="span" className="resend-verify-label">
-          Didn’t receive the link?
+          Didn’t get the link?
         </Trans>
         <button
           className="button is-secondary is-full-width"
@@ -266,7 +263,15 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const onLoginSubmit = async () => {
     resetErrorStates();
 
-    if (!email || emailError || !password || passwordError) {
+    if (!email || emailError) {
+      setEmailError(true);
+      setShowEmailError(true);
+      return;
+    }
+
+    if (!password || passwordError) {
+      setPasswordError(true);
+      setShowPasswordError(true);
       return;
     }
 
@@ -288,6 +293,8 @@ const LoginWithoutI18n = (props: LoginProps) => {
 
   const onAccountSubmit = async () => {
     if (!email || emailError) {
+      setEmailError(true);
+      setShowEmailError(true);
       return;
     }
 
@@ -299,6 +306,8 @@ const LoginWithoutI18n = (props: LoginProps) => {
     }
 
     if (!password || passwordError) {
+      setPasswordError(true);
+      setShowPasswordError(true);
       return;
     }
 
@@ -365,60 +374,64 @@ const LoginWithoutI18n = (props: LoginProps) => {
       onSubmit = onUserTypeSubmit;
       submitButtonText = "Sign up";
       break;
+    case Step.VerifyEmail:
+      headerText = i18n._(t`Almost done. Verify your email to start receiving updates.`);
+      break;
   }
 
   const renderLoginFlow = () => {
     return (
       <div className="Login">
+        {(!onBuildingPage || showRegisterModal) && (
+          <h4 className={classNames(!onBuildingPage && "page-title")}>{headerText}</h4>
+        )}
+        {onBuildingPage && !showRegisterModal && (
+          <div className="email-description">{headerText}</div>
+        )}
+        {renderAlert()}
         {!isVerifyEmailStep && !isVerifyEmailReminderStep && (
-          <>
-            {(!onBuildingPage || showRegisterModal) && (
-              <h4 className={classNames(!onBuildingPage && "page-title")}>{headerText}</h4>
+          <form
+            className="input-group"
+            onSubmit={(e) => {
+              e.preventDefault();
+              resetErrorStates();
+              onSubmit();
+            }}
+          >
+            {(isCheckEmailStep || isLoginStep || isRegisterAccountStep) && (
+              <EmailInput
+                email={email}
+                onChange={onChangeEmail}
+                error={emailError}
+                setError={setEmailError}
+                showError={showEmailError}
+                // note: required={true} removed bc any empty state registers as invalid state
+              />
+            )}
+            {(isLoginStep || isRegisterAccountStep) && (
+              <PasswordInput
+                labelText={i18n._(t`Password`)}
+                password={password}
+                username={email}
+                error={passwordError}
+                showError={showPasswordError}
+                setError={setPasswordError}
+                onChange={onChangePassword}
+                showPasswordRules={isRegisterAccountStep}
+                showForgotPassword={!isRegisterAccountStep}
+              />
             )}
-            {onBuildingPage && !showRegisterModal && (
-              <div className="email-description">{headerText}</div>
+            {isRegisterUserTypeStep && (
+              <UserTypeInput
+                userType={userType}
+                setUserType={setUserType}
+                error={userTypeError}
+                setError={setUserTypeError}
+                onChange={onChangeUserType}
+              />
             )}
-            {renderAlert()}
-            <form
-              className="input-group"
-              onSubmit={(e) => {
-                e.preventDefault();
-                resetErrorStates();
-                onSubmit();
-              }}
-            >
-              {(isCheckEmailStep || isLoginStep || isRegisterAccountStep) && (
-                <EmailInput
-                  email={email}
-                  onChange={onChangeEmail}
-                  error={emailError}
-                  setError={setEmailError}
-                  showError={showEmailError}
-                  // note: required={true} removed bc any empty state registers as invalid state
-                />
-              )}
-              {(isLoginStep || isRegisterAccountStep) && (
-                <PasswordInput
-                  labelText={i18n._(t`Password`)}
-                  password={password}
-                  username={email}
-                  setError={setPasswordError}
-                  onChange={onChangePassword}
-                  showPasswordRules={isRegisterAccountStep}
-                  showForgotPassword={!isRegisterAccountStep}
-                />
-              )}
-              {isRegisterUserTypeStep && (
-                <UserTypeInput
-                  userType={userType}
-                  setUserType={setUserType}
-                  error={userTypeError}
-                  setError={setUserTypeError}
-                  onChange={onChangeUserType}
-                />
-              )}
-              <div className="submit-button-group">
-                {/* {isRegisterUserTypeStep && (
+            <div className="submit-button-group">
+              {/* {isRegisterUserTypeStep && (
                 <button
                   type="button"
                   className="button is-primary button-back"
@@ -427,12 +440,11 @@ const LoginWithoutI18n = (props: LoginProps) => {
                   <Trans>Back</Trans>
                 </button>
               )} */}
-                <button type="submit" className="button is-primary">
-                  {submitButtonText}
-                </button>
-              </div>
-            </form>
-          </>
+              <button type="submit" className="button is-primary">
+                {submitButtonText}
+              </button>
+            </div>
+          </form>
         )}
         {isVerifyEmailStep && renderVerifyEmail()}
         {isVerifyEmailReminderStep && renderVerifyEmailReminder()}
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index dd2d6fc5e..91587a126 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -10,6 +10,7 @@ import { createWhoOwnsWhatRoutePaths } from "routes";
 import { I18n } from "@lingui/core";
 import { t } from "@lingui/macro";
 import { HideIcon, ShowIcon } from "./Icons";
+import classNames from "classnames";
 
 type PasswordRule = {
   regex: RegExp;
@@ -34,8 +35,10 @@ type PasswordInputProps = {
   i18n: I18n;
   labelText: string;
   password: string;
-  username?: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  error: boolean;
+  showError: boolean;
+  username?: string;
   setError?: React.Dispatch<React.SetStateAction<boolean>>;
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
@@ -48,7 +51,9 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
     labelText,
     username,
     password,
+    error,
     setError,
+    showError,
     onChange,
     showPasswordRules,
     showForgotPassword,
@@ -88,7 +93,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
         <input
           type={showPassword ? "text" : "password"}
           id="password-input"
-          className="input"
+          className={classNames("input", { invalid: showError && error })}
           onChange={onChange}
           onBlur={badPasswordFormat}
           value={password}
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index f142167b7..2c69cbe87 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -34,12 +34,12 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    gap: 2.4rem;
 
     .privacy-modal {
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 2rem 0 2rem 0;
 
       .info-icon {
         margin-left: 0.4rem;
@@ -85,12 +85,19 @@
   }
 
   .verify-email-container {
+    color: $justfix-black;
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+
+    p {
+      margin: 0;
+    }
+
     h4,
     .resend-verify-label {
       display: flex;
       justify-content: center;
-      margin-bottom: 1.2rem;
-      margin-top: 1.4rem;
     }
   }
 

From 3df1a464c36149f62dbc771f6249fd31f6e370a7 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 23 Feb 2024 14:37:12 -0500
Subject: [PATCH 14/40] update password props on reset and change pages

---
 client/src/components/UserSettingField.tsx  | 31 +++++++++++----------
 client/src/containers/ResetPasswordPage.tsx |  9 +++++-
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index be92e4627..199f37ce2 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -13,8 +13,18 @@ type PasswordSettingFieldProps = withI18nProps & {
 
 const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
   const { i18n, onSubmit } = props;
-  const { value: currentPassword, onChange: onChangeCurrentPassword } = useInput("");
-  const { value: newPassword, onChange: onChangeNewPassword } = useInput("");
+  const {
+    value: currentPassword,
+    error: currentPasswordError,
+    showError: showCurrentPasswordError,
+    onChange: onChangeCurrentPassword,
+  } = useInput("");
+  const {
+    value: newPassword,
+    error: newPasswordError,
+    showError: showNewPasswordError,
+    onChange: onChangeNewPassword,
+  } = useInput("");
   // const [showCurrentPassword, setShowCurrentPassword] = useState(false);
 
   const handleSubmit = () => {
@@ -23,29 +33,20 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
 
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
-      <Trans render="label">Password</Trans>
       <PasswordInput
         labelText={i18n._(t`Enter your old password`)}
         password={currentPassword}
         onChange={onChangeCurrentPassword}
+        error={currentPasswordError}
+        showError={showCurrentPasswordError}
       />
-
-      {/* <div className="password-input">
-        <input
-          type={showCurrentPassword ? "text" : "password"}
-          className="input"
-          onChange={handleCurrentPasswordChange}
-          value={currentPassword}
-        />
-        <button type="button" onClick={() => setShowCurrentPassword(!showCurrentPassword)}>
-          Show
-        </button>
-      </div> */}
       <PasswordInput
         labelText={i18n._(t`Create a new password`)}
         showPasswordRules={true}
         password={newPassword}
         onChange={onChangeNewPassword}
+        error={newPasswordError}
+        showError={showNewPasswordError}
       />
     </UserSettingField>
   );
diff --git a/client/src/containers/ResetPasswordPage.tsx b/client/src/containers/ResetPasswordPage.tsx
index d84d46714..4147df34b 100644
--- a/client/src/containers/ResetPasswordPage.tsx
+++ b/client/src/containers/ResetPasswordPage.tsx
@@ -17,7 +17,12 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
 
   const [requestSent, setRequestSent] = React.useState(false);
   const userContext = useContext(UserContext);
-  const { value: password, onChange: onChangePassword } = useInput("");
+  const {
+    value: password,
+    error: passwordError,
+    showError: showPasswordError,
+    onChange: onChangePassword,
+  } = useInput("");
 
   const delaySeconds = 5;
   const baseUrl = window.location.origin;
@@ -56,6 +61,8 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
                   showPasswordRules={true}
                   password={password}
                   onChange={onChangePassword}
+                  error={passwordError}
+                  showError={showPasswordError}
                 />
                 <button type="submit" className="button is-primary">
                   <Trans>Reset password</Trans>

From 7228b2b16d79d1e6f0aa5aaa0b44e4687675ab97 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 23 Feb 2024 14:37:24 -0500
Subject: [PATCH 15/40] fix account settings pw input styles

---
 client/src/styles/AccountSettingsPage.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 6f20e130c..0d5950df4 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -43,6 +43,12 @@
     display: flex;
     flex-direction: column;
     margin: 3.2rem 1.6rem;
+    gap: 2.4rem;
+
+    .password-input-field {
+      display: flex;
+      flex-direction: column;
+    }
 
     p {
       margin: -1rem 0 0.6rem 0;
@@ -60,7 +66,6 @@
   .user-setting-actions {
     display: flex;
     justify-content: right;
-    margin-top: 1.6rem;
 
     @include for-phone-only() {
       justify-content: center;
@@ -82,10 +87,6 @@
     margin-bottom: 1.6rem;
   }
 
-  .password-input-label {
-    margin-bottom: -1rem !important;
-  }
-
   .password-input-rules {
     display: flex;
     flex-direction: column;

From 670de3967d7924ef754c07e78c1fb04f4581ef25 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 23 Feb 2024 16:40:37 -0500
Subject: [PATCH 16/40] remove unused icon

---
 client/src/components/EmailAlertSignup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index a08d47b54..5d1325559 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -9,7 +9,7 @@ import { UserContext } from "./UserContext";
 import "styles/EmailAlertSignup.css";
 import { JustfixUser } from "state-machine";
 import AuthClient from "./AuthClient";
-import { AlertIconOutline, SubscribedIcon } from "./Icons";
+import { SubscribedIcon } from "./Icons";
 import { Alert } from "./Alert";
 
 type BuildingSubscribeProps = withI18nProps & {

From edd268a4f80e6c7daeefc0828d41eb7077306aa0 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 23 Feb 2024 16:40:59 -0500
Subject: [PATCH 17/40] fix duplicate id on change password page

---
 client/src/components/PasswordInput.tsx    | 6 ++++--
 client/src/components/UserSettingField.tsx | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 91587a126..0071594d0 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -42,6 +42,7 @@ type PasswordInputProps = {
   setError?: React.Dispatch<React.SetStateAction<boolean>>;
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
+  inputId?: string;
 };
 
 const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
@@ -57,6 +58,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
     onChange,
     showPasswordRules,
     showForgotPassword,
+    inputId,
   } = props;
   const [showPassword, setShowPassword] = useState(false);
 
@@ -70,7 +72,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
   return (
     <div className="password-input-field">
       <div className="password-input-label">
-        <label>{i18n._(t`${labelText}`)}</label>
+        <label htmlFor={inputId ?? "password-input"}>{i18n._(t`${labelText}`)}</label>
         {showForgotPassword && (
           <LocaleLink to={`${account.forgotPassword}?email=${encodeURIComponent(username || "")}`}>
             Forgot your password?
@@ -92,7 +94,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
       <div className="password-input">
         <input
           type={showPassword ? "text" : "password"}
-          id="password-input"
+          id={inputId ?? "password-input"}
           className={classNames("input", { invalid: showError && error })}
           onChange={onChange}
           onBlur={badPasswordFormat}
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index 199f37ce2..1bf082cbf 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -39,6 +39,7 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
         onChange={onChangeCurrentPassword}
         error={currentPasswordError}
         showError={showCurrentPasswordError}
+        inputId="old-password-input"
       />
       <PasswordInput
         labelText={i18n._(t`Create a new password`)}
@@ -47,6 +48,7 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
         onChange={onChangeNewPassword}
         error={newPasswordError}
         showError={showNewPasswordError}
+        inputId="new-password-input"
       />
     </UserSettingField>
   );

From ece5b389939dcaa4b2ce15a57fb9c147021744cd Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 23 Feb 2024 16:44:00 -0500
Subject: [PATCH 18/40] don't show input-lvel error on bad pw format during
 login

---
 client/src/components/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index d0658019f..7dcfaf6d7 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -269,7 +269,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
       return;
     }
 
-    if (!password || passwordError) {
+    if (!password) {
       setPasswordError(true);
       setShowPasswordError(true);
       return;

From 34d4c4a7308fd9d4ea901919f3a855c8492c39c9 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 23 Feb 2024 17:18:07 -0500
Subject: [PATCH 19/40] make setError required for password input

---
 client/src/components/PasswordInput.tsx     | 18 ++++++++----------
 client/src/components/UserSettingField.tsx  |  8 ++++++--
 client/src/containers/ResetPasswordPage.tsx |  2 ++
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 0071594d0..66d4d2996 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -25,10 +25,10 @@ const passwordRules: PasswordRule[] = [
   },
 ];
 
-export const validatePassword = (password: string) => {
+const isBadPasswordFormat = (password: string) => {
   let valid = true;
   passwordRules.forEach((rule) => (valid = valid && !!password.match(rule.regex)));
-  return valid;
+  return !valid;
 };
 
 type PasswordInputProps = {
@@ -38,8 +38,8 @@ type PasswordInputProps = {
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   error: boolean;
   showError: boolean;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
   username?: string;
-  setError?: React.Dispatch<React.SetStateAction<boolean>>;
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
   inputId?: string;
@@ -62,11 +62,10 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
   } = props;
   const [showPassword, setShowPassword] = useState(false);
 
-  const badPasswordFormat = () => {
-    const input = document.getElementById("password-input") as HTMLElement;
-    const inputValue = (input as HTMLInputElement).value;
-    const isValid = validatePassword(inputValue);
-    setError && setError(!isValid);
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e);
+    const passwordIsInvalid = isBadPasswordFormat(e.target.value);
+    setError(passwordIsInvalid);
   };
 
   return (
@@ -96,8 +95,7 @@ const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
           type={showPassword ? "text" : "password"}
           id={inputId ?? "password-input"}
           className={classNames("input", { invalid: showError && error })}
-          onChange={onChange}
-          onBlur={badPasswordFormat}
+          onChange={handleChange}
           value={password}
         />
         <button
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index 1bf082cbf..049a9899f 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -17,12 +17,14 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
     value: currentPassword,
     error: currentPasswordError,
     showError: showCurrentPasswordError,
+    setError: setCurrentPasswordError,
     onChange: onChangeCurrentPassword,
   } = useInput("");
   const {
     value: newPassword,
     error: newPasswordError,
     showError: showNewPasswordError,
+    setError: setNewPasswordError,
     onChange: onChangeNewPassword,
   } = useInput("");
   // const [showCurrentPassword, setShowCurrentPassword] = useState(false);
@@ -36,18 +38,20 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
       <PasswordInput
         labelText={i18n._(t`Enter your old password`)}
         password={currentPassword}
-        onChange={onChangeCurrentPassword}
         error={currentPasswordError}
         showError={showCurrentPasswordError}
+        setError={setCurrentPasswordError}
+        onChange={onChangeCurrentPassword}
         inputId="old-password-input"
       />
       <PasswordInput
         labelText={i18n._(t`Create a new password`)}
         showPasswordRules={true}
         password={newPassword}
-        onChange={onChangeNewPassword}
         error={newPasswordError}
         showError={showNewPasswordError}
+        setError={setNewPasswordError}
+        onChange={onChangeNewPassword}
         inputId="new-password-input"
       />
     </UserSettingField>
diff --git a/client/src/containers/ResetPasswordPage.tsx b/client/src/containers/ResetPasswordPage.tsx
index 4147df34b..fde595b66 100644
--- a/client/src/containers/ResetPasswordPage.tsx
+++ b/client/src/containers/ResetPasswordPage.tsx
@@ -21,6 +21,7 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
     value: password,
     error: passwordError,
     showError: showPasswordError,
+    setError: setPasswordError,
     onChange: onChangePassword,
   } = useInput("");
 
@@ -63,6 +64,7 @@ const ResetPasswordPage = withI18n()((props: withI18nProps) => {
                   onChange={onChangePassword}
                   error={passwordError}
                   showError={showPasswordError}
+                  setError={setPasswordError}
                 />
                 <button type="submit" className="button is-primary">
                   <Trans>Reset password</Trans>

From 4bd4fe06e2a536d31e386b4a402a7c77c6f2a448 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 16:14:33 -0500
Subject: [PATCH 20/40] use same showError props for usertype error handling

---
 client/src/components/UserTypeInput.tsx | 36 ++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/client/src/components/UserTypeInput.tsx b/client/src/components/UserTypeInput.tsx
index dda5e3c76..8bef77fd4 100644
--- a/client/src/components/UserTypeInput.tsx
+++ b/client/src/components/UserTypeInput.tsx
@@ -9,6 +9,7 @@ type UserTypeInputProps = {
   i18n: I18n;
   userType: string;
   error: boolean;
+  showError: boolean;
   setError: React.Dispatch<React.SetStateAction<boolean>>;
   setUserType: React.Dispatch<React.SetStateAction<string>>;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -16,27 +17,27 @@ type UserTypeInputProps = {
 };
 
 const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
-  const { i18n, userType, error, setError, setUserType, onChange, required } = props;
+  const { i18n, userType, error, showError, setError, setUserType, onChange, required } = props;
 
   const [activeRadio, setActiveRadio] = useState("");
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleRadioChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
     const value = e.target.value;
     setActiveRadio(value);
     if (value === USER_TYPES.other) {
       setUserType("");
+      setError(true);
     } else {
       onChange(e);
       setError(false);
     }
   };
 
-  const missingOtherText = () => {
-    if (!userType) {
-      setError(true);
-    } else {
-      setError(false);
-    }
+  const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e);
+    const value = e.target.value;
+    setError(!value);
   };
 
   const USER_TYPES = {
@@ -50,7 +51,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
 
   return (
     <div className="user-type-container">
-      {error && activeRadio !== USER_TYPES.other && (
+      {showError && error && activeRadio !== USER_TYPES.other && (
         <span id="input-field-error">
           <AlertIcon />
           <Trans>Please select an option.</Trans>
@@ -65,7 +66,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
           name="user-type"
           value={USER_TYPES.tenant}
           checked={activeRadio === USER_TYPES.tenant}
-          onChange={handleChange}
+          onChange={handleRadioChange}
         />
         <label htmlFor={"user-type-input-tenant"}>{USER_TYPES.tenant}</label>
         <input
@@ -76,7 +77,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
           name="user-type"
           value={USER_TYPES.organizer}
           checked={activeRadio === USER_TYPES.organizer}
-          onChange={handleChange}
+          onChange={handleRadioChange}
         />
         <label htmlFor={"user-type-input-organizer"}>{USER_TYPES.organizer}</label>
         <input
@@ -87,7 +88,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
           name="user-type"
           value={USER_TYPES.advocate}
           checked={activeRadio === USER_TYPES.advocate}
-          onChange={handleChange}
+          onChange={handleRadioChange}
         />
         <label htmlFor={"user-type-input-advocate"}>{USER_TYPES.advocate}</label>
         <input
@@ -98,7 +99,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
           name="user-type"
           value={USER_TYPES.legal}
           checked={activeRadio === USER_TYPES.legal}
-          onChange={handleChange}
+          onChange={handleRadioChange}
         />
         <label htmlFor={"user-type-input-legal"}>{USER_TYPES.legal}</label>
         <input
@@ -109,7 +110,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
           name="user-type"
           value={USER_TYPES.government}
           checked={activeRadio === USER_TYPES.government}
-          onChange={handleChange}
+          onChange={handleRadioChange}
         />
         <label htmlFor={"user-type-input-government"}>{USER_TYPES.government}</label>
         <input
@@ -120,13 +121,13 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
           name="user-type"
           value={USER_TYPES.other}
           checked={activeRadio === USER_TYPES.other}
-          onChange={handleChange}
+          onChange={handleRadioChange}
         />
         <label htmlFor={"user-type-input-other"}>{USER_TYPES.other}</label>
       </div>
       {activeRadio === USER_TYPES.other && (
         <div className="user-type-input-text-group">
-          {error && (
+          {showError && error && (
             <span id="input-field-error">
               <AlertIcon />
               <Trans>Please enter a response. </Trans>
@@ -140,8 +141,7 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
             type="text"
             name="user-type"
             value={userType}
-            onChange={onChange}
-            onBlur={missingOtherText}
+            onChange={handleTextChange}
           />
         </div>
       )}

From be1f499c0b7ce83bbf43dcbb54b86aea9d4ee210 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 16:15:10 -0500
Subject: [PATCH 21/40] add input props extends for email/pw, set auto focus on
 modal

---
 client/src/components/EmailInput.tsx       |  89 +++++++------
 client/src/components/Login.tsx            |  13 +-
 client/src/components/PasswordInput.tsx    | 137 +++++++++++----------
 client/src/components/UserSettingField.tsx |   4 +-
 4 files changed, 130 insertions(+), 113 deletions(-)

diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index 5760b7708..c1f02cbab 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, forwardRef } from "react";
 import { t } from "@lingui/macro";
 import { I18n } from "@lingui/core";
 import { withI18n } from "@lingui/react";
@@ -8,66 +8,65 @@ import "styles/EmailInput.css";
 import "styles/_input.scss";
 import classNames from "classnames";
 
-type EmailInputProps = {
+interface EmailInputProps extends React.ComponentPropsWithoutRef<"input"> {
   i18n: I18n;
   email: string;
   error: boolean;
   setError: React.Dispatch<React.SetStateAction<boolean>>;
   showError: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  required?: boolean;
-};
+}
 
-const EmailInputWithoutI18n = (props: EmailInputProps) => {
-  const { i18n, email, error, setError, showError, onChange, required } = props;
-
-  const isBadEmailFormat = (value: string) => {
-    /* valid email regex rules 
+const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
+  ({ i18n, email, error, setError, showError, onChange, ...props }, ref) => {
+    const isBadEmailFormat = (value: string) => {
+      /* valid email regex rules 
       alpha numeric characters are ok, upper/lower case agnostic 
       username: leading \_ ok, chars \_\.\-\+ ok in all other positions
       domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
-    const pattern =
-      "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
+      const pattern =
+        "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
 
-    // HTML input element has loose email validation requirements, so we check the input against a custom regex
-    const passStrictRegex = value.match(pattern);
-    const passAutoValidation = document.querySelectorAll("input:invalid").length === 0;
+      // HTML input element has loose email validation requirements, so we check the input against a custom regex
+      const passStrictRegex = value.match(pattern);
+      const passAutoValidation = document.querySelectorAll("input:invalid").length === 0;
 
-    return !passAutoValidation || !passStrictRegex;
-  };
+      return !passAutoValidation || !passStrictRegex;
+    };
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onChange(e);
-    const emailIsInvalid = isBadEmailFormat(e.target.value);
-    setError(emailIsInvalid);
-  };
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(e);
+      const emailIsInvalid = isBadEmailFormat(e.target.value);
+      setError(emailIsInvalid);
+    };
 
-  return (
-    <div className="email-input-field">
-      <div className="email-input-label">
-        <label htmlFor="email-input">{i18n._(t`Email address`)}</label>
-      </div>
-      {showError && error && (
-        <div className="email-input-errors">
-          <span id="input-field-error">
-            <AlertIcon />
-            {i18n._(t`Please enter a valid email address.`)}
-          </span>
+    return (
+      <div className="email-input-field">
+        <div className="email-input-label">
+          <label htmlFor="email-input">{i18n._(t`Email address`)}</label>
+        </div>
+        {showError && error && (
+          <div className="email-input-errors">
+            <span id="input-field-error">
+              <AlertIcon />
+              {i18n._(t`Please enter a valid email address.`)}
+            </span>
+          </div>
+        )}
+        <div className="email-input">
+          <input
+            type="email"
+            id="email-input"
+            className={classNames("input", { invalid: showError && error })}
+            onChange={handleChange}
+            value={email}
+            {...props}
+          />
         </div>
-      )}
-      <div className="email-input">
-        <input
-          type="email"
-          id="email-input"
-          className={classNames("input", { invalid: showError && error })}
-          onChange={handleChange}
-          value={email}
-          required={required}
-        />
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 const EmailInput = withI18n()(EmailInputWithoutI18n);
 
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 7dcfaf6d7..b7cab787c 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -79,8 +79,10 @@ const LoginWithoutI18n = (props: LoginProps) => {
   const {
     value: userType,
     error: userTypeError,
-    setError: setUserTypeError,
+    showError: userShowUserTypeError,
     setValue: setUserType,
+    setError: setUserTypeError,
+    setShowError: setShowUserTypeError,
     onChange: onChangeUserType,
   } = useInput("");
 
@@ -316,8 +318,8 @@ const LoginWithoutI18n = (props: LoginProps) => {
 
   const onUserTypeSubmit = async () => {
     if (!userType || userTypeError) {
-      // TODO: raise alert here that this is required?
       setUserTypeError(true);
+      setShowUserTypeError(true);
       return;
     }
 
@@ -325,6 +327,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
 
     if (!!resp?.error) {
       setInvalidAuthError(true);
+      setStep(Step.RegisterAccount);
       return;
     }
 
@@ -405,7 +408,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
                 error={emailError}
                 setError={setEmailError}
                 showError={showEmailError}
-                // note: required={true} removed bc any empty state registers as invalid state
+                autoFocus={showRegisterModal && !email}
               />
             )}
             {(isLoginStep || isRegisterAccountStep) && (
@@ -419,6 +422,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
                 onChange={onChangePassword}
                 showPasswordRules={isRegisterAccountStep}
                 showForgotPassword={!isRegisterAccountStep}
+                autoFocus={showRegisterModal && !!email && !password}
               />
             )}
             {isRegisterUserTypeStep && (
@@ -426,7 +430,8 @@ const LoginWithoutI18n = (props: LoginProps) => {
                 userType={userType}
                 setUserType={setUserType}
                 error={userTypeError}
-                setError={setUserTypeError}
+                showError={userShowUserTypeError}
+                setError={setShowUserTypeError}
                 onChange={onChangeUserType}
               />
             )}
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 66d4d2996..7810e1268 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-useless-escape */
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, forwardRef, useState } from "react";
 
 import "styles/Password.css";
 import "styles/_input.scss";
@@ -31,7 +31,7 @@ const isBadPasswordFormat = (password: string) => {
   return !valid;
 };
 
-type PasswordInputProps = {
+interface PasswordInputProps extends React.ComponentPropsWithoutRef<"input"> {
   i18n: I18n;
   labelText: string;
   password: string;
@@ -43,72 +43,85 @@ type PasswordInputProps = {
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
   inputId?: string;
-};
+}
+
+const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      i18n,
+      labelText,
+      username,
+      password,
+      error,
+      setError,
+      showError,
+      onChange,
+      showPasswordRules,
+      showForgotPassword,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const { account } = createWhoOwnsWhatRoutePaths();
 
-const PasswordInputWithoutI18n = (props: PasswordInputProps) => {
-  const { account } = createWhoOwnsWhatRoutePaths();
-  const {
-    i18n,
-    labelText,
-    username,
-    password,
-    error,
-    setError,
-    showError,
-    onChange,
-    showPasswordRules,
-    showForgotPassword,
-    inputId,
-  } = props;
-  const [showPassword, setShowPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onChange(e);
-    const passwordIsInvalid = isBadPasswordFormat(e.target.value);
-    setError(passwordIsInvalid);
-  };
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(e);
+      const passwordIsInvalid = isBadPasswordFormat(e.target.value);
+      setError(passwordIsInvalid);
+    };
 
-  return (
-    <div className="password-input-field">
-      <div className="password-input-label">
-        <label htmlFor={inputId ?? "password-input"}>{i18n._(t`${labelText}`)}</label>
-        {showForgotPassword && (
-          <LocaleLink to={`${account.forgotPassword}?email=${encodeURIComponent(username || "")}`}>
-            Forgot your password?
-          </LocaleLink>
+    return (
+      <div className="password-input-field">
+        <div className="password-input-label">
+          <label htmlFor={id ?? "password-input"}>{i18n._(t`${labelText}`)}</label>
+          {showForgotPassword && (
+            <LocaleLink
+              to={`${account.forgotPassword}?email=${encodeURIComponent(username || "")}`}
+            >
+              Forgot your password?
+            </LocaleLink>
+          )}
+        </div>
+        {showPasswordRules && (
+          <div className="password-input-rules">
+            {passwordRules.map((rule, i) => {
+              const ruleClass = !!password
+                ? password.match(rule.regex)
+                  ? "valid"
+                  : "invalid"
+                : "";
+              return (
+                <span className={`password-input-rule ${ruleClass}`} key={`rule-${i}`}>
+                  {rule.label}
+                </span>
+              );
+            })}
+          </div>
         )}
-      </div>
-      {showPasswordRules && (
-        <div className="password-input-rules">
-          {passwordRules.map((rule, i) => {
-            const ruleClass = !!password ? (password.match(rule.regex) ? "valid" : "invalid") : "";
-            return (
-              <span className={`password-input-rule ${ruleClass}`} key={`rule-${i}`}>
-                {rule.label}
-              </span>
-            );
-          })}
+        <div className="password-input">
+          <input
+            type={showPassword ? "text" : "password"}
+            id={id ?? "password-input"}
+            className={classNames("input", { invalid: showError && error })}
+            onChange={handleChange}
+            value={password}
+            {...props}
+          />
+          <button
+            type="button"
+            className="show-hide-toggle"
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            {showPassword ? <HideIcon /> : <ShowIcon />}
+          </button>
         </div>
-      )}
-      <div className="password-input">
-        <input
-          type={showPassword ? "text" : "password"}
-          id={inputId ?? "password-input"}
-          className={classNames("input", { invalid: showError && error })}
-          onChange={handleChange}
-          value={password}
-        />
-        <button
-          type="button"
-          className="show-hide-toggle"
-          onClick={() => setShowPassword(!showPassword)}
-        >
-          {showPassword ? <HideIcon /> : <ShowIcon />}
-        </button>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 PasswordInputWithoutI18n.defaultProps = {
   showPasswordRules: false,
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index 049a9899f..bd29cd0a2 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -42,7 +42,7 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
         showError={showCurrentPasswordError}
         setError={setCurrentPasswordError}
         onChange={onChangeCurrentPassword}
-        inputId="old-password-input"
+        id="old-password-input"
       />
       <PasswordInput
         labelText={i18n._(t`Create a new password`)}
@@ -52,7 +52,7 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
         showError={showNewPasswordError}
         setError={setNewPasswordError}
         onChange={onChangeNewPassword}
-        inputId="new-password-input"
+        id="new-password-input"
       />
     </UserSettingField>
   );

From fff9d57fd453a694638f6e8617cb43e3b0740e09 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 16:34:12 -0500
Subject: [PATCH 22/40] remove old id prop for pw input

---
 client/src/components/PasswordInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 7810e1268..310e6d8c8 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -42,7 +42,6 @@ interface PasswordInputProps extends React.ComponentPropsWithoutRef<"input"> {
   username?: string;
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
-  inputId?: string;
 }
 
 const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps>(

From da8d76fe0d65b0741a68174eefb5e5393b0417b2 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 16:59:02 -0500
Subject: [PATCH 23/40] prevent extra i18n prop getting passed to input

---
 client/src/components/EmailInput.tsx    | 5 +++--
 client/src/components/PasswordInput.tsx | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index c1f02cbab..a02cbcc41 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -15,10 +15,11 @@ interface EmailInputProps extends React.ComponentPropsWithoutRef<"input"> {
   setError: React.Dispatch<React.SetStateAction<boolean>>;
   showError: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  i18nHash?: string;
 }
 
 const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
-  ({ i18n, email, error, setError, showError, onChange, ...props }, ref) => {
+  ({ i18n, i18nHash, email, error, setError, showError, onChange, ...props }, ref) => {
     const isBadEmailFormat = (value: string) => {
       /* valid email regex rules 
       alpha numeric characters are ok, upper/lower case agnostic 
@@ -68,6 +69,6 @@ const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
   }
 );
 
-const EmailInput = withI18n()(EmailInputWithoutI18n);
+const EmailInput = withI18n({ withHash: false })(EmailInputWithoutI18n);
 
 export default EmailInput;
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 310e6d8c8..7c9fa0264 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -42,12 +42,14 @@ interface PasswordInputProps extends React.ComponentPropsWithoutRef<"input"> {
   username?: string;
   showPasswordRules?: boolean;
   showForgotPassword?: boolean;
+  i18nHash?: string;
 }
 
 const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps>(
   (
     {
       i18n,
+      i18nHash,
       labelText,
       username,
       password,

From 85e3760396ef88b2150a0515847c416017374d03 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 17:17:26 -0500
Subject: [PATCH 24/40] usertype input remove preventDefault bug radio not
 updating

---
 client/src/components/UserTypeInput.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/UserTypeInput.tsx b/client/src/components/UserTypeInput.tsx
index 8bef77fd4..935f9e180 100644
--- a/client/src/components/UserTypeInput.tsx
+++ b/client/src/components/UserTypeInput.tsx
@@ -22,14 +22,13 @@ const UserTypeInputWithoutI18n = (props: UserTypeInputProps) => {
   const [activeRadio, setActiveRadio] = useState("");
 
   const handleRadioChange = (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
     const value = e.target.value;
     setActiveRadio(value);
     if (value === USER_TYPES.other) {
       setUserType("");
       setError(true);
     } else {
-      onChange(e);
+      setUserType(value);
       setError(false);
     }
   };

From 3e5a4bb0c6603d50ee49848762b88790ece725d8 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 17:17:54 -0500
Subject: [PATCH 25/40] add "didn't get link" line to on page verify reminder

---
 client/src/components/EmailAlertSignup.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/EmailAlertSignup.tsx b/client/src/components/EmailAlertSignup.tsx
index 5d1325559..3a4cfc567 100644
--- a/client/src/components/EmailAlertSignup.tsx
+++ b/client/src/components/EmailAlertSignup.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useContext, useState } from "react";
 
 import { withI18n, withI18nProps, I18n } from "@lingui/react";
-import { t } from "@lingui/macro";
 import { Trans } from "@lingui/macro";
 import Login from "./Login";
 import { UserContext } from "./UserContext";
@@ -46,9 +45,10 @@ const BuildingSubscribeWithoutI18n = (props: BuildingSubscribeProps) => {
         <Alert type="info">
           <Trans>Verify your email to start receiving updates.</Trans>
         </Alert>
-        <div className="status-description">
-          {i18n._(t`Click the link we sent to ${email}. It may take a few minutes to arrive.`)}
-        </div>
+        <Trans render="div" className="status-description">
+          Click the link we sent to {email}. It may take a few minutes to arrive.
+        </Trans>
+        <Trans render="div">Didn’t get the link?</Trans>
         <button
           className="button is-secondary is-full-width"
           onClick={() => AuthClient.resendVerifyEmail()}

From 45c4318525eb1355ffd791894fe68d1db3319211 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Mon, 26 Feb 2024 17:22:06 -0500
Subject: [PATCH 26/40] show footer on login as well as sign up in modal

---
 client/src/components/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index b7cab787c..b1078dbea 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -453,7 +453,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
         )}
         {isVerifyEmailStep && renderVerifyEmail()}
         {isVerifyEmailReminderStep && renderVerifyEmailReminder()}
-        {isRegisterAccountStep && renderFooter()}
+        {(isLoginStep || isRegisterAccountStep) && renderFooter()}
       </div>
     );
   };

From baa71c50b3c3dbb11badc05bf038612be50be3d0 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 28 Feb 2024 11:37:38 -0500
Subject: [PATCH 27/40] fix typo in usertype input error

---
 client/src/components/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index b1078dbea..c696dc2f2 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -431,7 +431,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
                 setUserType={setUserType}
                 error={userTypeError}
                 showError={userShowUserTypeError}
-                setError={setShowUserTypeError}
+                setError={setUserTypeError}
                 onChange={onChangeUserType}
               />
             )}

From 200b1de08fa2e3fdf2ddc29e2a9b3907286aaeb6 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 28 Feb 2024 22:59:28 -0500
Subject: [PATCH 28/40] fix typo in email validation regex, add label as
 optional prop

---
 client/src/components/EmailInput.tsx | 13 ++++++++-----
 client/src/components/Login.tsx      |  1 +
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index a02cbcc41..20eb2b2b6 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -16,17 +16,18 @@ interface EmailInputProps extends React.ComponentPropsWithoutRef<"input"> {
   showError: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   i18nHash?: string;
+  labelText?: string;
 }
 
 const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
-  ({ i18n, i18nHash, email, error, setError, showError, onChange, ...props }, ref) => {
+  ({ i18n, i18nHash, email, error, setError, showError, onChange, labelText, ...props }, ref) => {
     const isBadEmailFormat = (value: string) => {
       /* valid email regex rules 
       alpha numeric characters are ok, upper/lower case agnostic 
       username: leading \_ ok, chars \_\.\-\+ ok in all other positions
       domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
       const pattern =
-        "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
+        "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+\\.[a-zA-Z]{2,})$";
 
       // HTML input element has loose email validation requirements, so we check the input against a custom regex
       const passStrictRegex = value.match(pattern);
@@ -43,9 +44,11 @@ const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
 
     return (
       <div className="email-input-field">
-        <div className="email-input-label">
-          <label htmlFor="email-input">{i18n._(t`Email address`)}</label>
-        </div>
+        {!!labelText && (
+          <div className="email-input-label">
+            <label htmlFor="email-input">{labelText}</label>
+          </div>
+        )}
         {showError && error && (
           <div className="email-input-errors">
             <span id="input-field-error">
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index c696dc2f2..862418814 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -409,6 +409,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
                 setError={setEmailError}
                 showError={showEmailError}
                 autoFocus={showRegisterModal && !email}
+                labelText={i18n._(t`Email address`)}
               />
             )}
             {(isLoginStep || isRegisterAccountStep) && (

From cc51ec5b5e1ca5b9420a59d59ee975ed28bfa00d Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 28 Feb 2024 23:00:01 -0500
Subject: [PATCH 29/40] show password rules when showError (even if empty)

---
 client/src/components/PasswordInput.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 7c9fa0264..370da0a65 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -82,18 +82,15 @@ const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps
             <LocaleLink
               to={`${account.forgotPassword}?email=${encodeURIComponent(username || "")}`}
             >
-              Forgot your password?
+              {i18n._(t`Forgot your password?`)}
             </LocaleLink>
           )}
         </div>
         {showPasswordRules && (
           <div className="password-input-rules">
             {passwordRules.map((rule, i) => {
-              const ruleClass = !!password
-                ? password.match(rule.regex)
-                  ? "valid"
-                  : "invalid"
-                : "";
+              const ruleClass =
+                !!password || showError ? (password.match(rule.regex) ? "valid" : "invalid") : "";
               return (
                 <span className={`password-input-rule ${ruleClass}`} key={`rule-${i}`}>
                   {rule.label}

From d0a60ffa9ce32e35479fce891af8d27f6e521c3e Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 28 Feb 2024 23:00:23 -0500
Subject: [PATCH 30/40] add error handling of inputs before updating
 credentials

---
 client/src/components/UserSettingField.tsx | 129 ++++++++++++++++++---
 client/src/styles/AccountSettingsPage.scss |   4 +-
 2 files changed, 113 insertions(+), 20 deletions(-)

diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index bd29cd0a2..ca8c10a69 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 
 import { withI18n, withI18nProps } from "@lingui/react";
 import { t, Trans } from "@lingui/macro";
@@ -6,6 +6,11 @@ import { t, Trans } from "@lingui/macro";
 import "styles/EmailAlertSignup.css";
 import PasswordInput from "./PasswordInput";
 import { useInput } from "util/helpers";
+import { UserContext } from "./UserContext";
+import { JustfixUser } from "state-machine";
+import EmailInput from "./EmailInput";
+import AuthClient from "./AuthClient";
+import { Alert } from "./Alert";
 
 type PasswordSettingFieldProps = withI18nProps & {
   onSubmit: (currentPassword: string, newPassword: string) => void;
@@ -13,11 +18,14 @@ type PasswordSettingFieldProps = withI18nProps & {
 
 const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
   const { i18n, onSubmit } = props;
+  const userContext = useContext(UserContext);
+  const { email } = userContext.user as JustfixUser;
   const {
     value: currentPassword,
     error: currentPasswordError,
     showError: showCurrentPasswordError,
     setError: setCurrentPasswordError,
+    setShowError: setShowCurrentPasswordError,
     onChange: onChangeCurrentPassword,
   } = useInput("");
   const {
@@ -25,16 +33,52 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
     error: newPasswordError,
     showError: showNewPasswordError,
     setError: setNewPasswordError,
+    setShowError: setShowNewPasswordError,
     onChange: onChangeNewPassword,
   } = useInput("");
-  // const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [invalidAuthError, setInvalidAuthError] = useState(false);
+
+  const handleSubmit = async () => {
+    setInvalidAuthError(false);
+    setShowCurrentPasswordError(false);
+    setShowNewPasswordError(false);
+
+    if (!currentPassword) {
+      setCurrentPasswordError(true);
+      setShowCurrentPasswordError(true);
+      throw new Error("Current password missing");
+    }
+
+    if (!newPassword || newPasswordError) {
+      setNewPasswordError(true);
+      setShowNewPasswordError(true);
+      throw new Error("New password format error");
+    }
+
+    // context doesn't update immediately so need to reurn user to check verified status
+    const resp = await userContext.login(email, currentPassword);
+
+    if (!!resp?.error) {
+      setInvalidAuthError(true);
+      throw new Error("Incorrect current password");
+    }
 
-  const handleSubmit = () => {
     onSubmit(currentPassword, newPassword);
   };
 
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
+      {invalidAuthError && (
+        <Alert
+          className={`page-level-alert`}
+          variant="primary"
+          closeType="none"
+          role="status"
+          type="error"
+        >
+          {i18n._(t`The old password you entered is incorrect`)}
+        </Alert>
+      )}
       <PasswordInput
         labelText={i18n._(t`Enter your old password`)}
         password={currentPassword}
@@ -67,14 +111,41 @@ type EmailSettingFieldProps = withI18nProps & {
 
 const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
   const { i18n, currentValue, onSubmit } = props;
-  const [value, setValue] = useState(currentValue);
-
-  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  const handleSubmit = () => {
-    onSubmit(value);
+  const userContext = useContext(UserContext);
+  const { email: oldEmail } = userContext.user as JustfixUser;
+  const [existingUserError, setExistingUserError] = useState(false);
+  const {
+    value: email,
+    error: emailError,
+    showError: showEmailError,
+    setError: setEmailError,
+    setShowError: setShowEmailError,
+    onChange: onChangeEmail,
+  } = useInput(oldEmail);
+
+  const handleSubmit = async () => {
+    setExistingUserError(false);
+    setShowEmailError(false);
+
+    if (email === oldEmail) {
+      return;
+    }
+
+    if (!email || emailError) {
+      setEmailError(true);
+      setShowEmailError(true);
+      throw new Error("Email format error");
+    }
+
+    if (!!email && !emailError) {
+      const existingUser = await AuthClient.isEmailAlreadyUsed(email);
+      if (existingUser) {
+        setExistingUserError(true);
+        throw new Error("Existing user error");
+      }
+    }
+
+    onSubmit(email);
   };
 
   return (
@@ -84,13 +155,26 @@ const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
       onSubmit={handleSubmit}
     >
       <Trans render="label">Email address</Trans>
+      {existingUserError && (
+        <Alert
+          className={`page-level-alert`}
+          variant="primary"
+          closeType="none"
+          role="status"
+          type="error"
+        >
+          {i18n._(t`That email is already used.`)}
+        </Alert>
+      )}
       <Trans render="p">This is used for logging in and for receiving weekly data updates.</Trans>
-      <input
-        type="email"
-        className="input"
+      <EmailInput
+        email={email}
+        error={emailError}
+        showError={showEmailError}
+        setError={setEmailError}
+        onChange={onChangeEmail}
+        autoFocus
         placeholder={i18n._(t`Enter new email address`)}
-        onChange={handleValueChange}
-        value={value}
       />
     </UserSettingField>
   );
@@ -101,16 +185,25 @@ export const EmailSettingField = withI18n()(EmailSettingFieldWithoutI18n);
 type UserSettingFieldProps = withI18nProps & {
   title: string;
   preview: string;
-  onSubmit: () => void;
+  onSubmit: () => Promise<void>;
   children: React.ReactNode;
 };
 
 const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
   const { title, preview, onSubmit, children } = props;
   const [editing, setEditing] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit().then(
+      (response) => setEditing(false),
+      (error) => {}
+    );
+  };
+
   return (
     <div className={`UserSetting`}>
-      <form onSubmit={onSubmit} className="input-group">
+      <form onSubmit={handleSubmit} className="input-group">
         {editing ? (
           <>
             {children}
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 0d5950df4..7da86a7d3 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -45,13 +45,14 @@
     margin: 3.2rem 1.6rem;
     gap: 2.4rem;
 
+    .email-input-field,
     .password-input-field {
       display: flex;
       flex-direction: column;
     }
 
     p {
-      margin: -1rem 0 0.6rem 0;
+      margin: 0;
     }
   }
 
@@ -84,7 +85,6 @@
     font-size: 1.3rem !important;
 
     text-align: left;
-    margin-bottom: 1.6rem;
   }
 
   .password-input-rules {

From 46fc355b6d616dbbb15fd51d549fb792d37fd24e Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 13:00:04 -0500
Subject: [PATCH 31/40] add missing pw field label

---
 client/src/components/UserSettingField.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index ca8c10a69..3cd5b1a7a 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -68,6 +68,7 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
 
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
+      <Trans render="label">Password</Trans>
       {invalidAuthError && (
         <Alert
           className={`page-level-alert`}

From a3b94d2ed504efec6e7226b80ed844ca2c78ba1f Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 18:53:38 -0500
Subject: [PATCH 32/40] change email pattern to regex instead of string

---
 client/src/components/EmailInput.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index 20eb2b2b6..2bffec466 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -26,8 +26,7 @@ const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
       alpha numeric characters are ok, upper/lower case agnostic 
       username: leading \_ ok, chars \_\.\-\+ ok in all other positions
       domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
-      const pattern =
-        "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+\\.[a-zA-Z]{2,})$";
+      const pattern = /^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+\.[a-zA-Z]{2,})$/;
 
       // HTML input element has loose email validation requirements, so we check the input against a custom regex
       const passStrictRegex = value.match(pattern);

From d7e1d3ac9ba50a16ef74552ec2837f28fe5b4b19 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 18:54:05 -0500
Subject: [PATCH 33/40] add password error label, fix label styles on account
 page

---
 client/src/components/PasswordInput.tsx    | 10 +++++++++-
 client/src/components/UserSettingField.tsx | 12 +++++++++---
 client/src/styles/AccountSettingsPage.scss |  2 +-
 client/src/styles/Login.scss               |  4 ----
 client/src/styles/Password.scss            | 17 +++++++++++++++++
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 370da0a65..2e2660cff 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -9,7 +9,7 @@ import { LocaleLink } from "i18n";
 import { createWhoOwnsWhatRoutePaths } from "routes";
 import { I18n } from "@lingui/core";
 import { t } from "@lingui/macro";
-import { HideIcon, ShowIcon } from "./Icons";
+import { AlertIcon, HideIcon, ShowIcon } from "./Icons";
 import classNames from "classnames";
 
 type PasswordRule = {
@@ -99,6 +99,14 @@ const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps
             })}
           </div>
         )}
+        {!showPasswordRules && showError && error && (
+          <div className="password-input-errors">
+            <span id="input-field-error">
+              <AlertIcon />
+              {i18n._(t`Please enter password.`)}
+            </span>
+          </div>
+        )}
         <div className="password-input">
           <input
             type={showPassword ? "text" : "password"}
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index 3cd5b1a7a..f0e6be8df 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -68,7 +68,9 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
 
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
-      <Trans render="label">Password</Trans>
+      <Trans render="label" className="user-setting-label">
+        Password
+      </Trans>
       {invalidAuthError && (
         <Alert
           className={`page-level-alert`}
@@ -155,7 +157,9 @@ const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
       preview={currentValue}
       onSubmit={handleSubmit}
     >
-      <Trans render="label">Email address</Trans>
+      <Trans render="label" className="user-setting-label">
+        Email address
+      </Trans>
       {existingUserError && (
         <Alert
           className={`page-level-alert`}
@@ -221,7 +225,9 @@ const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
           </>
         ) : (
           <>
-            <Trans render="label">{title}</Trans>
+            <Trans render="label" className="user-setting-label">
+              {title}
+            </Trans>
             <div>
               <span>{preview}</span>
               <button type="button" className="button is-text" onClick={() => setEditing(true)}>
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 7da86a7d3..d52e2c3e7 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -77,7 +77,7 @@
     }
   }
 
-  label {
+  .user-setting-label {
     @include desktop-eyebrow();
     // vars marked !important bc typography mixin is not available for inconsolata
     font-weight: 600 !important;
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index 2c69cbe87..7199738ad 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -80,10 +80,6 @@
     font-size: 1.6rem;
   }
 
-  .password-input {
-    margin-top: 0.5rem;
-  }
-
   .verify-email-container {
     color: $justfix-black;
     display: flex;
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index d7fdf414b..7c50c342a 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -97,4 +97,21 @@
       content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16666 7.97664L5.83332 12.6433L15.8333 2.64331' stroke='%231AA551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
     }
   }
+
+  .password-input-errors {
+    display: flex;
+    flex-direction: column;
+
+    span {
+      display: flex;
+      align-items: center;
+      font-size: 1.3rem;
+      color: #ba4300;
+      margin-bottom: 0.5rem;
+
+      svg {
+        margin-right: 0.75rem;
+      }
+    }
+  }
 }

From aa607101fe1afafe42d854e0db629873d43f8915 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 1 Mar 2024 17:16:14 -0500
Subject: [PATCH 34/40] use icon components for password rules

---
 client/src/components/Icons.tsx         | 13 +++++++++++++
 client/src/components/PasswordInput.tsx | 16 +++++++++++++---
 client/src/styles/Password.scss         | 19 +++++--------------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Icons.tsx b/client/src/components/Icons.tsx
index c2ae08635..78d5371f1 100644
--- a/client/src/components/Icons.tsx
+++ b/client/src/components/Icons.tsx
@@ -1,5 +1,18 @@
 import React, { SVGProps } from "react";
 
+export const DotIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="21"
+    viewBox="0 0 20 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="9.5" cy="10.1751" r="1.5" fill="currentcolor" />
+  </svg>
+);
+
 export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     fill="none"
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 2e2660cff..8d14e80a1 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -9,7 +9,7 @@ import { LocaleLink } from "i18n";
 import { createWhoOwnsWhatRoutePaths } from "routes";
 import { I18n } from "@lingui/core";
 import { t } from "@lingui/macro";
-import { AlertIcon, HideIcon, ShowIcon } from "./Icons";
+import { AlertIcon, CheckIcon, DotIcon, HideIcon, ShowIcon } from "./Icons";
 import classNames from "classnames";
 
 type PasswordRule = {
@@ -89,10 +89,20 @@ const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps
         {showPasswordRules && (
           <div className="password-input-rules">
             {passwordRules.map((rule, i) => {
-              const ruleClass =
-                !!password || showError ? (password.match(rule.regex) ? "valid" : "invalid") : "";
+              let ruleClass = "";
+              let RuleIcon = <DotIcon />;
+              if (!!password || showError) {
+                if (password.match(rule.regex)) {
+                  ruleClass = "valid";
+                  RuleIcon = <CheckIcon />;
+                } else {
+                  ruleClass = "invalid";
+                  RuleIcon = <AlertIcon />;
+                }
+              }
               return (
                 <span className={`password-input-rule ${ruleClass}`} key={`rule-${i}`}>
+                  {RuleIcon}
                   {rule.label}
                 </span>
               );
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index 7c50c342a..8cb96c4bb 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -73,18 +73,6 @@
     color: $justfix-black;
     text-align: left;
 
-    &::before {
-      content: "•";
-      display: inline-block;
-      margin-right: 0.5rem;
-      vertical-align: top;
-    }
-
-    // encoded SVG from https://yoksel.github.io/url-encoder/
-    &.invalid:before {
-      content: url("data:image/svg+xml, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14C3.14 14 0 10.8599 0 7C0 3.14007 3.14007 0 7 0C10.8599 0 14 3.14007 14 7C14 10.84 10.8599 14 7 14Z' fill='%23FF813A' /%3E%3Cpath d='M7 8.75C6.50422 8.75 6.125 8.37612 6.125 7.88729V3.48771C6.125 2.9989 6.50421 2.625 7 2.625C7.49579 2.625 7.875 2.99888 7.875 3.48771V7.88729C7.875 8.3763 7.49579 8.75 7 8.75Z' fill='%23FAF8F4' /%3E%3Cpath d='M6.97194 11.375C6.74608 11.375 6.52022 11.2879 6.37902 11.1136C6.20967 10.9394 6.125 10.736 6.125 10.5036C6.125 10.4455 6.125 10.3875 6.15316 10.3294C6.15316 10.2712 6.18132 10.2133 6.20967 10.1551C6.23783 10.097 6.26619 10.068 6.29435 10.0099C6.3225 9.95174 6.35086 9.92277 6.40718 9.86462C6.71771 9.54513 7.28225 9.54513 7.59282 9.86462C7.62098 9.89359 7.6775 9.95174 7.70565 10.0099C7.73381 10.068 7.76217 10.097 7.79033 10.1551C7.81849 10.2133 7.81849 10.2712 7.84684 10.3294C7.84684 10.3875 7.875 10.4455 7.875 10.5036C7.875 10.736 7.79033 10.9684 7.62098 11.1136C7.42367 11.2879 7.19781 11.375 6.97195 11.375H6.97194Z' fill='%23FAF8F4' /%3E%3C/svg%3E%0A");
-    }
-
     &.invalid {
       color: #ba4300;
     }
@@ -93,8 +81,11 @@
       color: $justfix-green;
     }
 
-    &.valid::before {
-      content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16666 7.97664L5.83332 12.6433L15.8333 2.64331' stroke='%231AA551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
+    svg {
+      width: 1.4rem;
+      height: 1.4rem;
+      margin-right: 0.5rem;
+      vertical-align: text-bottom;
     }
   }
 

From 1388af50e9d08982c97f3a36d4f8d229c225f7ad Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 1 Mar 2024 18:37:28 -0500
Subject: [PATCH 35/40] fix spacing and alert placement/icon

---
 client/src/components/Icons.tsx            | 12 ++---
 client/src/components/UserSettingField.tsx | 17 ++++---
 client/src/styles/AccountSettingsPage.scss | 55 ++++++++++++----------
 client/src/styles/Password.scss            |  1 +
 4 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Icons.tsx b/client/src/components/Icons.tsx
index 78d5371f1..c98b1c634 100644
--- a/client/src/components/Icons.tsx
+++ b/client/src/components/Icons.tsx
@@ -147,21 +147,21 @@ export const AlertIconOutline = (props: SVGProps<SVGSVGElement>) => (
     width="20"
     height="20"
     viewBox="0 0 20 20"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
     <path
       d="M10 18C5.58857 18 2 14.4113 2 10C2 5.58865 5.58865 2 10 2C14.4113 2 18 5.58865 18 10C18 14.3886 14.4113 18 10 18ZM10 3.34857C6.34278 3.34857 3.37143 6.32004 3.37143 9.97714C3.37143 13.6344 6.3429 16.6057 10 16.6057C13.6572 16.6057 16.6286 13.6342 16.6286 9.97714C16.6286 6.32004 13.6573 3.34857 10 3.34857Z"
-      fill="#242323"
+      fill="#FAF8F4"
     />
     <path
-      d="M10.0002 11.1655C9.61166 11.1655 9.31445 10.8683 9.31445 10.4798V6.98263C9.31445 6.59408 9.61164 6.29688 10.0002 6.29688C10.3888 6.29688 10.686 6.59407 10.686 6.98263V10.4798C10.686 10.8685 10.3888 11.1655 10.0002 11.1655Z"
-      fill="#242323"
+      d="M9.99996 11.1657C9.61141 11.1657 9.31421 10.8685 9.31421 10.48V6.98281C9.31421 6.59426 9.6114 6.29706 9.99996 6.29706C10.3885 6.29706 10.6857 6.59425 10.6857 6.98281V10.48C10.6857 10.8687 10.3885 11.1657 9.99996 11.1657Z"
+      fill="#FAF8F4"
     />
     <path
-      d="M10.0002 13.6799C9.81733 13.6799 9.63446 13.6114 9.52013 13.4743C9.38301 13.3371 9.31445 13.1771 9.31445 12.9942C9.31445 12.9484 9.31445 12.9028 9.33725 12.8571C9.33725 12.8113 9.36005 12.7657 9.38301 12.7199C9.40581 12.6742 9.42877 12.6514 9.45157 12.6056C9.47437 12.5599 9.49733 12.5371 9.54293 12.4913C9.79437 12.2399 10.2515 12.2399 10.5029 12.4913C10.5257 12.5141 10.5715 12.5599 10.5943 12.6056C10.6171 12.6514 10.64 12.6742 10.6628 12.7199C10.6856 12.7657 10.6856 12.8113 10.7086 12.8571C10.7086 12.9028 10.7314 12.9484 10.7314 12.9942C10.7314 13.1771 10.6628 13.3599 10.5257 13.4743C10.366 13.6114 10.1831 13.6799 10.0002 13.6799H10.0002Z"
-      fill="#242323"
+      d="M9.99997 13.68C9.81709 13.68 9.63422 13.6114 9.51989 13.4743C9.38277 13.3372 9.31421 13.1771 9.31421 12.9942C9.31421 12.9485 9.31421 12.9029 9.33701 12.8571C9.33701 12.8114 9.35981 12.7658 9.38277 12.72C9.40557 12.6743 9.42853 12.6514 9.45133 12.6057C9.47413 12.5599 9.49709 12.5371 9.54269 12.4914C9.79412 12.2399 10.2512 12.2399 10.5027 12.4914C10.5255 12.5142 10.5712 12.5599 10.594 12.6057C10.6168 12.6514 10.6398 12.6743 10.6626 12.72C10.6854 12.7658 10.6854 12.8114 10.7084 12.8571C10.7084 12.9029 10.7312 12.9485 10.7312 12.9942C10.7312 13.1771 10.6626 13.36 10.5255 13.4743C10.3657 13.6114 10.1829 13.68 9.99998 13.68H9.99997Z"
+      fill="#FAF8F4"
     />
   </svg>
 );
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index f0e6be8df..c748044da 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -11,6 +11,7 @@ import { JustfixUser } from "state-machine";
 import EmailInput from "./EmailInput";
 import AuthClient from "./AuthClient";
 import { Alert } from "./Alert";
+import { AlertIconOutline } from "./Icons";
 
 type PasswordSettingFieldProps = withI18nProps & {
   onSubmit: (currentPassword: string, newPassword: string) => void;
@@ -68,9 +69,6 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
 
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
-      <Trans render="label" className="user-setting-label">
-        Password
-      </Trans>
       {invalidAuthError && (
         <Alert
           className={`page-level-alert`}
@@ -79,9 +77,13 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
           role="status"
           type="error"
         >
+          <AlertIconOutline />
           {i18n._(t`The old password you entered is incorrect`)}
         </Alert>
       )}
+      <Trans render="label" className="user-setting-label">
+        Password
+      </Trans>
       <PasswordInput
         labelText={i18n._(t`Enter your old password`)}
         password={currentPassword}
@@ -157,9 +159,6 @@ const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
       preview={currentValue}
       onSubmit={handleSubmit}
     >
-      <Trans render="label" className="user-setting-label">
-        Email address
-      </Trans>
       {existingUserError && (
         <Alert
           className={`page-level-alert`}
@@ -168,10 +167,14 @@ const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
           role="status"
           type="error"
         >
+          <AlertIconOutline />
           {i18n._(t`That email is already used.`)}
         </Alert>
       )}
-      <Trans render="p">This is used for logging in and for receiving weekly data updates.</Trans>
+      <Trans render="label" className="user-setting-label">
+        Email address
+      </Trans>
+      <Trans render="p">We send data updates to this email.</Trans>
       <EmailInput
         email={email}
         error={emailError}
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index d52e2c3e7..7ad99a686 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -42,17 +42,38 @@
   form {
     display: flex;
     flex-direction: column;
-    margin: 3.2rem 1.6rem;
-    gap: 2.4rem;
+    margin: 2.6rem 1.6rem;
+
+    .page-level-alert {
+      margin-bottom: 2.6rem;
+      svg {
+        margin-right: 0.8rem;
+        vertical-align: bottom;
+      }
+    }
+
+    .user-setting-label {
+      @include desktop-eyebrow();
+      // vars marked !important bc typography mixin is not available for inconsolata
+      font-weight: 600 !important;
+      font-family: $wow-font !important;
+      font-size: 1.3rem !important;
+      text-transform: none !important;
+      text-align: left;
+      margin-bottom: 0.8rem;
+    }
+
+    p {
+      margin-bottom: 0.6rem;
+    }
 
     .email-input-field,
     .password-input-field {
       display: flex;
       flex-direction: column;
-    }
-
-    p {
-      margin: 0;
+      &:has(#new-password-input) {
+        margin-top: 2rem;
+      }
     }
   }
 
@@ -66,7 +87,8 @@
 
   .user-setting-actions {
     display: flex;
-    justify-content: right;
+    justify-content: left;
+    margin-top: 1.6rem;
 
     @include for-phone-only() {
       justify-content: center;
@@ -76,23 +98,4 @@
       margin: 0 1.6rem 0 0 !important;
     }
   }
-
-  .user-setting-label {
-    @include desktop-eyebrow();
-    // vars marked !important bc typography mixin is not available for inconsolata
-    font-weight: 600 !important;
-    font-family: $wow-font !important;
-    font-size: 1.3rem !important;
-
-    text-align: left;
-  }
-
-  .password-input-rules {
-    display: flex;
-    flex-direction: column;
-
-    span:last-child {
-      margin-bottom: 0.6rem !important;
-    }
-  }
 }
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index 8cb96c4bb..ea05c8733 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -60,6 +60,7 @@
   .password-input-rules {
     display: flex;
     flex-direction: column;
+    margin-bottom: 0.6rem;
   }
 
   .password-input-rule {

From a807af386558a082ed9f9ca9a26ebcae6a97d4e1 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Fri, 1 Mar 2024 18:47:45 -0500
Subject: [PATCH 36/40] change cancel button style

---
 client/src/components/UserSettingField.tsx |  6 +-----
 client/src/styles/AccountSettingsPage.scss | 12 ++++++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index c748044da..b9935e11b 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -217,11 +217,7 @@ const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
             {children}
             <div className="user-setting-actions">
               <input type="submit" className="button is-primary" value={`Save`} />
-              <button
-                type="button"
-                className="button is-secondary"
-                onClick={() => setEditing(false)}
-              >
+              <button type="button" className="button is-text" onClick={() => setEditing(false)}>
                 <Trans>Cancel</Trans>
               </button>
             </div>
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 7ad99a686..018d75e54 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -57,7 +57,7 @@
       // vars marked !important bc typography mixin is not available for inconsolata
       font-weight: 600 !important;
       font-family: $wow-font !important;
-      font-size: 1.3rem !important;
+      font-size: 1.4rem !important;
       text-transform: none !important;
       text-align: left;
       margin-bottom: 0.8rem;
@@ -88,6 +88,7 @@
   .user-setting-actions {
     display: flex;
     justify-content: left;
+    align-items: center;
     margin-top: 1.6rem;
 
     @include for-phone-only() {
@@ -95,7 +96,14 @@
     }
 
     input[type="submit"] {
-      margin: 0 1.6rem 0 0 !important;
+      margin: 0 4.8rem 0 0 !important;
+    }
+
+    .button.is-text {
+      @include body-standard;
+      font-size: 1.8rem;
+      font-weight: 500;
+      text-decoration: none;
     }
   }
 }

From 31572bff21d327e4b89f8fac2bdce4e4b57fe779 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Tue, 5 Mar 2024 11:59:04 -0500
Subject: [PATCH 37/40] handle un-verifying on email change & display callout

---
 client/src/components/UserContext.tsx      |  2 +-
 client/src/components/UserSettingField.tsx | 20 ++++++++++++++++++--
 client/src/styles/AccountSettingsPage.scss | 10 ++++++++++
 client/src/styles/_callout.scss            |  8 ++++++++
 jfauthprovider/views.py                    |  5 ++++-
 5 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 client/src/styles/_callout.scss

diff --git a/client/src/components/UserContext.tsx b/client/src/components/UserContext.tsx
index 28cac190b..7b270a7ce 100644
--- a/client/src/components/UserContext.tsx
+++ b/client/src/components/UserContext.tsx
@@ -178,7 +178,7 @@ export const UserContextProvider = ({ children }: { children: React.ReactNode })
       if (user) {
         const asyncUpdateEmail = async () => {
           const response = await AuthClient.updateEmail(email);
-          setUser({ ...user, email: response.email });
+          setUser({ ...user, email: response.email, verified: false });
         };
         asyncUpdateEmail();
       }
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index b9935e11b..f73b009df 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -117,7 +117,7 @@ type EmailSettingFieldProps = withI18nProps & {
 const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
   const { i18n, currentValue, onSubmit } = props;
   const userContext = useContext(UserContext);
-  const { email: oldEmail } = userContext.user as JustfixUser;
+  const { email: oldEmail, verified } = userContext.user as JustfixUser;
   const [existingUserError, setExistingUserError] = useState(false);
   const {
     value: email,
@@ -153,11 +153,25 @@ const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
     onSubmit(email);
   };
 
+  const verifyCallout = !verified ? (
+    <div className="jf-callout">
+      <Trans>
+        Email address not verified. Click the link we sent to {email} start receiving emails.
+      </Trans>
+      <br />
+      <br />
+      <button className="button is-text" onClick={() => AuthClient.resendVerifyEmail()}>
+        <Trans>Resend email</Trans>
+      </button>
+    </div>
+  ) : undefined;
+
   return (
     <UserSettingField
       title={i18n._(t`Email address`)}
       preview={currentValue}
       onSubmit={handleSubmit}
+      verifyCallout={verifyCallout}
     >
       {existingUserError && (
         <Alert
@@ -195,10 +209,11 @@ type UserSettingFieldProps = withI18nProps & {
   preview: string;
   onSubmit: () => Promise<void>;
   children: React.ReactNode;
+  verifyCallout?: React.ReactNode;
 };
 
 const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
-  const { title, preview, onSubmit, children } = props;
+  const { title, preview, onSubmit, children, verifyCallout } = props;
   const [editing, setEditing] = useState(false);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -233,6 +248,7 @@ const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
                 <Trans>Edit</Trans>
               </button>
             </div>
+            {!!verifyCallout && verifyCallout}
           </>
         )}
       </form>
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 018d75e54..bfcc239ce 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -1,5 +1,6 @@
 @import "_vars.scss";
 @import "_typography.scss";
+@import "_callout.scss";
 
 .AccountSettingsPage {
   h4 {
@@ -75,6 +76,15 @@
         margin-top: 2rem;
       }
     }
+
+    .jf-callout {
+      margin-top: 1.6rem;
+      display: flex;
+      flex-direction: column;
+      .button.is-text {
+        width: fit-content;
+      }
+    }
   }
 
   form > div {
diff --git a/client/src/styles/_callout.scss b/client/src/styles/_callout.scss
new file mode 100644
index 000000000..ec89c0317
--- /dev/null
+++ b/client/src/styles/_callout.scss
@@ -0,0 +1,8 @@
+@import "_vars.scss";
+@import "_typography.scss";
+
+.jf-callout {
+  @include desktop-text-small;
+  background-color: $justfix-white-200;
+  padding: 1.2rem;
+}
diff --git a/jfauthprovider/views.py b/jfauthprovider/views.py
index 975764821..25972715e 100644
--- a/jfauthprovider/views.py
+++ b/jfauthprovider/views.py
@@ -60,7 +60,10 @@ def logout(request):
 @api
 def update(request):
     try:
-        post_data = {"new_email": request.POST.get("new_email")}
+        post_data = {
+            "new_email": request.POST.get("new_email"),
+            "origin": request.headers["Origin"],
+        }
 
         return authenticated_request(
             "user/",

From 7bcd0e5b685356bc468fc04c43b59e719b0216b0 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 6 Mar 2024 11:47:29 -0500
Subject: [PATCH 38/40] adjust for 16px base font

---
 client/src/styles/AccountSettingsPage.scss | 22 +++++++++++-----------
 client/src/styles/Password.scss            | 15 +++++++--------
 client/src/styles/_callout.scss            |  2 +-
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 9a9f55f0b..102005c58 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -43,12 +43,12 @@
   form {
     display: flex;
     flex-direction: column;
-    margin: 2.6rem 1.6rem;
+    margin: 1.625rem 1rem;
 
     .page-level-alert {
-      margin-bottom: 2.6rem;
+      margin-bottom: 1.625rem;
       svg {
-        margin-right: 0.8rem;
+        margin-right: 0.5rem;
         vertical-align: bottom;
       }
     }
@@ -58,14 +58,14 @@
       // vars marked !important bc typography mixin is not available for inconsolata
       font-weight: 600 !important;
       font-family: $wow-font !important;
-      font-size: 1.4rem !important;
+      font-size: 0.875rem !important;
       text-transform: none !important;
       text-align: left;
-      margin-bottom: 0.8rem;
+      margin-bottom: 0.5rem;
     }
 
     p {
-      margin-bottom: 0.6rem;
+      margin-bottom: 0.375rem;
     }
 
     .email-input-field,
@@ -73,12 +73,12 @@
       display: flex;
       flex-direction: column;
       &:has(#new-password-input) {
-        margin-top: 2rem;
+        margin-top: 1.25rem;
       }
     }
 
     .jf-callout {
-      margin-top: 1.6rem;
+      margin-top: 1rem;
       display: flex;
       flex-direction: column;
       .button.is-text {
@@ -99,19 +99,19 @@
     display: flex;
     justify-content: left;
     align-items: center;
-    margin-top: 1.6rem;
+    margin-top: 1rem;
 
     @include for-phone-only() {
       justify-content: center;
     }
 
     input[type="submit"] {
-      margin: 0 4.8rem 0 0 !important;
+      margin: 0 3rem 0 0 !important;
     }
 
     .button.is-text {
       @include body-standard;
-      font-size: 1.8rem;
+      font-size: 1.125rem;
       font-weight: 500;
       text-decoration: none;
     }
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index c1b9287c3..fb806cf86 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -60,7 +60,7 @@
   .password-input-rules {
     display: flex;
     flex-direction: column;
-    margin-bottom: 0.6rem;
+    margin-bottom: 0.375rem;
   }
 
   .password-input-rule {
@@ -68,7 +68,6 @@
 
     font-family: $wow-font !important;
     font-size: 0.8125rem !important;
-    // font-weight: 500 !important;
     line-height: 120%;
     text-transform: none !important;
     color: $justfix-black;
@@ -83,9 +82,9 @@
     }
 
     svg {
-      width: 1.4rem;
-      height: 1.4rem;
-      margin-right: 0.5rem;
+      width: 0.875rem;
+      height: 0.875rem;
+      margin-right: 0.3125rem;
       vertical-align: text-bottom;
     }
   }
@@ -97,12 +96,12 @@
     span {
       display: flex;
       align-items: center;
-      font-size: 1.3rem;
+      font-size: 0.8125rem;
       color: #ba4300;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.3125rem;
 
       svg {
-        margin-right: 0.75rem;
+        margin-right: 0.46875rem;
       }
     }
   }
diff --git a/client/src/styles/_callout.scss b/client/src/styles/_callout.scss
index ec89c0317..6cb75ce10 100644
--- a/client/src/styles/_callout.scss
+++ b/client/src/styles/_callout.scss
@@ -4,5 +4,5 @@
 .jf-callout {
   @include desktop-text-small;
   background-color: $justfix-white-200;
-  padding: 1.2rem;
+  padding: 0.75rem;
 }

From 0ef1dd8a9d828133f84782337a5a0e202d8e3811 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 6 Mar 2024 12:03:46 -0500
Subject: [PATCH 39/40] fix some font sizes

---
 client/src/components/UserSettingField.tsx | 6 +++++-
 client/src/styles/AccountSettingsPage.scss | 4 ++++
 client/src/styles/_typography.scss         | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index f73b009df..8b1330d62 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -244,7 +244,11 @@ const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
             </Trans>
             <div>
               <span>{preview}</span>
-              <button type="button" className="button is-text" onClick={() => setEditing(true)}>
+              <button
+                type="button"
+                className="button is-text edit-button"
+                onClick={() => setEditing(true)}
+              >
                 <Trans>Edit</Trans>
               </button>
             </div>
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 102005c58..f3c54ae88 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -93,6 +93,10 @@
     span {
       flex: 1;
     }
+    span,
+    .edit-button {
+      font-size: 1rem;
+    }
   }
 
   .user-setting-actions {
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 340208268..9103aa09a 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -49,7 +49,7 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 
 @mixin desktop-text-small {
   @include body-standard();
-  font-size: 0.55rem;
+  font-size: 0.875rem;
 }
 
 @mixin desktop-text-small-bold {

From b4a28623cd4b88a0f9d10df4777eefcde7755e8a Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 6 Mar 2024 14:39:07 -0500
Subject: [PATCH 40/40] simplify PW rules/errors, cut duplicate cors setting

---
 client/src/components/PasswordInput.tsx | 20 +++++++++++---------
 project/settings.py                     |  4 ----
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 8d14e80a1..33a85f68c 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -86,7 +86,7 @@ const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps
             </LocaleLink>
           )}
         </div>
-        {showPasswordRules && (
+        {showPasswordRules ? (
           <div className="password-input-rules">
             {passwordRules.map((rule, i) => {
               let ruleClass = "";
@@ -108,14 +108,16 @@ const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps
               );
             })}
           </div>
-        )}
-        {!showPasswordRules && showError && error && (
-          <div className="password-input-errors">
-            <span id="input-field-error">
-              <AlertIcon />
-              {i18n._(t`Please enter password.`)}
-            </span>
-          </div>
+        ) : (
+          showError &&
+          error && (
+            <div className="password-input-errors">
+              <span id="input-field-error">
+                <AlertIcon />
+                {i18n._(t`Please enter password.`)}
+              </span>
+            </div>
+          )
         )}
         <div className="password-input">
           <input
diff --git a/project/settings.py b/project/settings.py
index 0ae8bba52..deec27928 100644
--- a/project/settings.py
+++ b/project/settings.py
@@ -99,10 +99,6 @@ def get_required_env(key: str) -> str:
     r"https://deploy-preview-(?:\d{1,4})--wow-django-dev\.netlify\.app",
 ]
 
-CORS_ALLOWED_ORIGIN_REGEXES = [
-    r"https://\w+\.deploy-preview-(?:\d{1,4})--wow-django-dev\.netlify\.app"
-]
-
 # This is based off the default Django logging configuration:
 # https://github.com/django/django/blob/master/django/utils/log.py
 LOGGING = {