fix: DAH-2789 Fix password show/hide functionality (#2401)

* fix: password show and hide functionality * test: update snapshots * fix: remove spaces check
SFDigitalServices · Nov 7, 2024 · 9229d73 · 9229d73
1 parent 4d952dd
commit 9229d73
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap b/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap
@@ -577,12 +577,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                           class="field"
                         >
                           <input
-                            id="showPassword"
-                            name="showPassword"
+                            id="currentPassword-showPassword"
+                            name="currentPassword-showPassword"
                             type="checkbox"
                           />
                           <label
-                            for="showPassword"
+                            for="currentPassword-showPassword"
                           >
                             Show password
                           </label>
@@ -661,12 +661,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                         >
                           <input
                             checked=""
-                            id="showPassword"
-                            name="showPassword"
+                            id="password-showPassword"
+                            name="password-showPassword"
                             type="checkbox"
                           />
                           <label
-                            for="showPassword"
+                            for="password-showPassword"
                           >
                             Show password
                           </label>
@@ -1390,12 +1390,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                         class="field"
                       >
                         <input
-                          id="showPassword"
-                          name="showPassword"
+                          id="currentPassword-showPassword"
+                          name="currentPassword-showPassword"
                           type="checkbox"
                         />
                         <label
-                          for="showPassword"
+                          for="currentPassword-showPassword"
                         >
                           Show password
                         </label>
@@ -1474,12 +1474,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
                       >
                         <input
                           checked=""
-                          id="showPassword"
-                          name="showPassword"
+                          id="password-showPassword"
+                          name="password-showPassword"
                           type="checkbox"
                         />
                         <label
-                          for="showPassword"
+                          for="password-showPassword"
                         >
                           Show password
                         </label>
@@ -2260,12 +2260,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                           class="field"
                         >
                           <input
-                            id="showPassword"
-                            name="showPassword"
+                            id="currentPassword-showPassword"
+                            name="currentPassword-showPassword"
                             type="checkbox"
                           />
                           <label
-                            for="showPassword"
+                            for="currentPassword-showPassword"
                           >
                             Show password
                           </label>
@@ -2344,12 +2344,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                         >
                           <input
                             checked=""
-                            id="showPassword"
-                            name="showPassword"
+                            id="password-showPassword"
+                            name="password-showPassword"
                             type="checkbox"
                           />
                           <label
-                            for="showPassword"
+                            for="password-showPassword"
                           >
                             Show password
                           </label>
@@ -3073,12 +3073,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                         class="field"
                       >
                         <input
-                          id="showPassword"
-                          name="showPassword"
+                          id="currentPassword-showPassword"
+                          name="currentPassword-showPassword"
                           type="checkbox"
                         />
                         <label
-                          for="showPassword"
+                          for="currentPassword-showPassword"
                         >
                           Show password
                         </label>
@@ -3157,12 +3157,12 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
                       >
                         <input
                           checked=""
-                          id="showPassword"
-                          name="showPassword"
+                          id="password-showPassword"
+                          name="password-showPassword"
                           type="checkbox"
                         />
                         <label
-                          for="showPassword"
+                          for="password-showPassword"
                         >
                           Show password
                         </label>

diff --git a/app/javascript/pages/account/components/PasswordFieldset.tsx b/app/javascript/pages/account/components/PasswordFieldset.tsx
@@ -133,6 +133,8 @@ interface PasswordFieldProps extends Omit<FieldProps, "type" | "postInputContent
 const PasswordField = ({ passwordVisibilityDefault = false, ...props }: PasswordFieldProps) => {
   const [showPassword, setShowPassword] = React.useState(passwordVisibilityDefault)
 
+  const showPasswordId = `${props.name}-showPassword`
+
   return (
     <>
       <Field
@@ -143,12 +145,12 @@ const PasswordField = ({ passwordVisibilityDefault = false, ...props }: Password
       <div className="field">
         <input
           type="checkbox"
-          id="showPassword"
-          name="showPassword"
+          id={showPasswordId}
+          name={showPasswordId}
           checked={showPassword}
           onChange={() => setShowPassword(!showPassword)}
         />
-        <label htmlFor="showPassword">{t("label.showPassword")}</label>
+        <label htmlFor={showPasswordId}>{t("label.showPassword")}</label>
       </div>
     </>
   )