From c1a3b9ae8a201481f6869066aa0f23bace91e643 Mon Sep 17 00:00:00 2001
From: Michael Zetterberg <michael.zetterberg@scandichotels.com>
Date: Wed, 16 Oct 2024 12:05:08 +0200
Subject: [PATCH] fix: visibility toggle for new password disabled on edit
 profile

---
 .../Forms/Edit/Profile/FormContent/index.tsx  |  4 ++-
 .../Form/NewPassword/index.tsx                | 35 ++++++++++++-------
 .../Form/NewPassword/newPassword.ts           |  1 +
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/components/Forms/Edit/Profile/FormContent/index.tsx b/components/Forms/Edit/Profile/FormContent/index.tsx
index 3792cc85d..ad26f1087 100644
--- a/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -73,7 +73,9 @@ export default function FormContent() {
           </Body>
         </header>
         <Input label={currentPassword} name="password" type="password" />
-        <NewPassword />
+        {/* visibilityToggleable set to false as feature is done for signup first */}
+        {/* likely we can remove the prop altogether once signup launches */}
+        <NewPassword visibilityToggleable={false} />
         <Input
           label={retypeNewPassword}
           name="retypeNewPassword"
diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 070a282af..2c0a6d31a 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -30,10 +30,11 @@ export default function NewPassword({
   placeholder = "",
   registerOptions = {},
   label,
+  visibilityToggleable = true,
 }: NewPasswordProps) {
   const { control } = useFormContext()
   const intl = useIntl()
-  const [isPasswordVisible, setPasswordVisible] = useState(false)
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
 
   function getErrorMessage(key: PasswordValidatorKey) {
     switch (key) {
@@ -69,7 +70,9 @@ export default function NewPassword({
             onChange={field.onChange}
             validationBehavior="aria"
             value={field.value}
-            type={isPasswordVisible ? "text" : "password"}
+            type={
+              visibilityToggleable && isPasswordVisible ? "text" : "password"
+            }
           >
             <div className={styles.inputWrapper}>
               <AriaInputWithLabel
@@ -78,18 +81,24 @@ export default function NewPassword({
                 id={field.name}
                 label={intl.formatMessage({ id: "New password" })}
                 placeholder={placeholder}
-                type={isPasswordVisible ? "text" : "password"}
+                type={
+                  visibilityToggleable && isPasswordVisible
+                    ? "text"
+                    : "password"
+                }
               />
-              <Button
-                className={styles.eyeIcon}
-                type="button"
-                variant="icon"
-                size="small"
-                intent="tertiary"
-                onClick={() => setPasswordVisible(!isPasswordVisible)}
-              >
-                {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
-              </Button>
+              {visibilityToggleable ? (
+                <Button
+                  className={styles.eyeIcon}
+                  type="button"
+                  variant="icon"
+                  size="small"
+                  intent="tertiary"
+                  onClick={() => setIsPasswordVisible((value) => !value)}
+                >
+                  {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
+                </Button>
+              ) : null}
             </div>
             {field.value ? (
               <div className={styles.errors}>
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.ts b/components/TempDesignSystem/Form/NewPassword/newPassword.ts
index e6835cb58..8486a44ad 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.ts
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.ts
@@ -4,6 +4,7 @@ export interface NewPasswordProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
   registerOptions?: RegisterOptions
+  visibilityToggleable?: boolean
 }
 
 export interface IconProps {