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/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 {