fix: visibility toggle for new password disabled on edit profile

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"

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
+              {visibilityToggleable ? (
-                className={styles.eyeIcon}
+                <Button
-                type="button"
+                  className={styles.eyeIcon}
-                variant="icon"
+                  type="button"
-                size="small"
+                  variant="icon"
-                intent="tertiary"
+                  size="small"
-                onClick={() => setPasswordVisible(!isPasswordVisible)}
+                  intent="tertiary"
-              >
+                  onClick={() => setIsPasswordVisible((value) => !value)}
-                {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
+                >
-              </Button>
+                  {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
+                </Button>
+              ) : null}
             </div>
             {field.value ? (
               <div className={styles.errors}>

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 {