Merged in feat/LOY-183-Make-Other-Password-Inputs-Maskable (pull request #1569)

feat(LOY-183): Make Current & Retype Password Inputs Maskable in My Profile Edit Form

* feat(LOY-183): implement PasswordInput and PasswordToggleButton components

- Added PasswordInput component for password fields with visibility toggle.
- Introduced PasswordToggleButton for toggling password visibility.
- Updated NewPassword component to utilize the new PasswordInput.

* refactor(LOY-183): replace NewPassword component with PasswordInput


Approved-by: Christian Andolf

apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-// import { useFormStatus } from "react-dom"
+
 import { useIntl } from "react-intl"
 
 import { getLocalizedLanguageOptions } from "@/constants/languages"
@@ -8,7 +8,7 @@ import Divider from "@/components/TempDesignSystem/Divider"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
+import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Select from "@/components/TempDesignSystem/Form/Select"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -20,8 +20,6 @@ export default function FormContent() {
   const intl = useIntl()
   const lang = useLang()
 
-  // const { pending } = useFormStatus()
-
   const languageOptions = getLocalizedLanguageOptions(lang)
   const city = intl.formatMessage({ id: "City" })
   const country = intl.formatMessage({ id: "Country" })
@@ -81,20 +79,16 @@ export default function FormContent() {
             {intl.formatMessage({ id: "Password" })}
           </Body>
         </header>
-        <Input
+        <PasswordInput
           data-hj-suppress
           label={currentPassword}
           name="password"
-          type="password"
         />
-        {/* visibilityToggleable set to false as feature is done for signup first */}
-        {/* likely we can remove the prop altogether once signup launches */}
-        <NewPassword data-hj-suppress visibilityToggleable={false} />
-        <Input
+        <PasswordInput data-hj-suppress isNewPassword name="newPassword" />
+        <PasswordInput
           data-hj-suppress
           label={retypeNewPassword}
           name="retypeNewPassword"
-          type="password"
         />
       </section>
     </>

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -16,7 +16,7 @@ import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
+import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -156,9 +156,10 @@ export default function SignupForm({ title }: SignUpFormProps) {
                 {intl.formatMessage({ id: "Password" })}
               </Subtitle>
             </header>
-            <NewPassword
+            <PasswordInput
               name="password"
               label={intl.formatMessage({ id: "Password" })}
+              isNewPassword
             />
           </section>
           <section className={styles.terms}>

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -12,25 +12,27 @@ import {
   EyeShowIcon,
   InfoCircleIcon,
 } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { passwordValidators } from "@/utils/zod/passwordValidator"
 
-import Button from "../../Button"
-import { type IconProps, type NewPasswordProps } from "./newPassword"
-
-import styles from "./newPassword.module.css"
+import styles from "./passwordInput.module.css"
 
 import type { PasswordValidatorKey } from "@/types/components/form/newPassword"
+import type { IconProps, PasswordInputProps } from "./passwordInput"
 
-export default function NewPassword({
-  name = "newPassword",
+export default function PasswordInput({
+  name = "password",
+  label,
   "aria-label": ariaLabel,
   disabled = false,
   placeholder = "",
   registerOptions = {},
   visibilityToggleable = true,
-}: NewPasswordProps) {
+  isNewPassword = false,
+  className = "",
+}: PasswordInputProps) {
   const { control } = useFormContext()
   const intl = useIntl()
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
@@ -42,10 +44,13 @@ export default function NewPassword({
       name={name}
       rules={registerOptions}
       render={({ field, fieldState, formState }) => {
-        const errors = Object.values(formState.errors[name]?.types ?? []).flat()
+        const errors = isNewPassword
+          ? Object.values(formState.errors[name]?.types ?? []).flat()
+          : []
 
         return (
           <TextField
+            className={className}
             aria-label={ariaLabel}
             isDisabled={field.disabled}
             isInvalid={fieldState.invalid}
@@ -64,7 +69,12 @@ export default function NewPassword({
                 {...field}
                 aria-labelledby={field.name}
                 id={field.name}
-                label={intl.formatMessage({ id: "New password" })}
+                label={
+                  label ||
+                  (isNewPassword
+                    ? intl.formatMessage({ id: "New password" })
+                    : intl.formatMessage({ id: "Password" }))
+                }
                 placeholder={placeholder}
                 type={
                   visibilityToggleable && isPasswordVisible
@@ -74,24 +84,38 @@ export default function NewPassword({
               />
               {visibilityToggleable ? (
                 <Button
-                  className={styles.eyeIcon}
                   type="button"
                   variant="icon"
                   size="small"
                   intent="tertiary"
                   onClick={() => setIsPasswordVisible((value) => !value)}
+                  aria-label={
+                    isPasswordVisible ? "Hide password" : "Show password"
+                  }
+                  aria-controls={field.name}
+                  className={styles.toggleButton}
                 >
                   {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
                 </Button>
               ) : null}
             </div>
 
-            <PasswordValidation value={field.value} errors={errors} />
+            {isNewPassword && (
+              <NewPasswordValidation value={field.value} errors={errors} />
+            )}
 
-            {!field.value && fieldState.error ? (
+            {isNewPassword ? (
+              !field.value && fieldState.error ? (
+                <Caption className={styles.error} fontOnly>
+                  <InfoCircleIcon color="red" />
+                  {fieldState.error.message}
+                </Caption>
+              ) : null
+            ) : fieldState.error ? (
               <Caption className={styles.error} fontOnly>
                 <InfoCircleIcon color="red" />
-                {fieldState.error.message}
+                {fieldState.error &&
+                  intl.formatMessage({ id: fieldState.error.message })}
               </Caption>
             ) : null}
           </TextField>
@@ -109,7 +133,7 @@ function Icon({ errorMessage, errors }: IconProps) {
   )
 }
 
-function PasswordValidation({
+function NewPasswordValidation({
   value,
   errors,
 }: {

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css

@@ -76,17 +76,17 @@
   padding-top: var(--Spacing-x1);
 }
 
-.eyeIcon {
+.inputWrapper {
+  position: relative;
+}
+
+.toggleButton {
   position: absolute;
   right: var(--Spacing-x2);
   top: 50%;
   transform: translateY(-50%);
 }
 
-.inputWrapper {
-  position: relative;
-}
-
 /* Hide the built-in password reveal icon in Microsoft Edge.
  * See: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal
  */

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.ts

@@ -1,10 +1,11 @@
 import type { RegisterOptions } from "react-hook-form"
 
-export interface NewPasswordProps
+export interface PasswordInputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
   registerOptions?: RegisterOptions
   visibilityToggleable?: boolean
+  isNewPassword?: boolean
 }
 
 export interface IconProps {