Merged in fix/edit-profile-newpassword-optional (pull request #706)

fix: new password not required for edit profile

components/Forms/Edit/Profile/FormContent/index.tsx

@@ -24,7 +24,7 @@ export default function FormContent() {
   const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
   const street = intl.formatMessage({ id: "Address" })
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
-  const password = intl.formatMessage({ id: "Current password" })
+  const currentPassword = intl.formatMessage({ id: "Current password" })
   const retypeNewPassword = intl.formatMessage({ id: "Retype new password" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
@@ -72,8 +72,10 @@ export default function FormContent() {
             {intl.formatMessage({ id: "Password" })}
           </Body>
         </header>
-        <Input label={password} name="password" type="password" />
-        <NewPassword />
+        <Input 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 visibilityToggleable={false} />
         <Input
           label={retypeNewPassword}
           name="retypeNewPassword"

components/Forms/Edit/Profile/schema.ts

@@ -26,7 +26,7 @@ export const editProfileSchema = z
     ),
 
     password: z.string().optional(),
-    newPassword: passwordValidator(),
+    newPassword: z.literal("").optional().or(passwordValidator()),
     retypeNewPassword: z.string().optional(),
   })
   .superRefine((data, ctx) => {

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}>

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 {