From 7ff608b08ca805f2fa51b77beae773154418d452 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 10 Sep 2025 20:01:33 +0200
Subject: [PATCH] Refactor AdvancedPasswordField (#1187)

---
 .../app/(tabs)/credentials/add-edit.tsx       | 59 +++----------------
 .../components/form/AdvancedPasswordField.tsx | 19 ++++--
 2 files changed, 23 insertions(+), 55 deletions(-)

diff --git a/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx b/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx
index 25e8d4153..fb3739cef 100644
--- a/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx
+++ b/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx
@@ -376,25 +376,6 @@ export default function AddEditCredentialScreen() : React.ReactNode {
     }
   };
 
-  /**
-   * Generate a random password.
-   */
-  const generateRandomPassword = async () : Promise<void> => {
-    try {
-      const { passwordGenerator } = await initializeGenerators();
-      const password = passwordGenerator.generateRandomPassword();
-      setValue('Password', password);
-      setIsPasswordVisible(true);
-    } catch (error) {
-      console.error('Error generating random password:', error);
-      Toast.show({
-        type: 'error',
-        text1: t('credentials.errors.generatePasswordFailed'),
-        text2: t('auth.errors.enterPassword')
-      });
-    }
-  };
-
   /**
    * Handle the delete button press.
    */
@@ -660,37 +641,15 @@ export default function AddEditCredentialScreen() : React.ReactNode {
                     }
                   ]}
                 />
-                {passwordSettings ? (
-                  <AdvancedPasswordField
-                    control={control}
-                    name="Password"
-                    label={t('credentials.password')}
-                    initialSettings={passwordSettings}
-                    showPassword={isPasswordVisible}
-                    onShowPasswordChange={setIsPasswordVisible}
-                    isNewCredential={!isEditMode}
-                  />
-                ) : (
-                  <ValidatedFormField
-                    control={control}
-                    name="Password"
-                    label={t('credentials.password')}
-                    secureTextEntry={!isPasswordVisible}
-                    buttons={[
-                      {
-                        icon: isPasswordVisible ? "visibility-off" : "visibility",
-                        /**
-                         * Toggle the visibility of the password.
-                         */
-                        onPress: () => setIsPasswordVisible(!isPasswordVisible)
-                      },
-                      {
-                        icon: "refresh",
-                        onPress: generateRandomPassword
-                      }
-                    ]}
-                  />
-                )}
+                <AdvancedPasswordField
+                  control={control}
+                  name="Password"
+                  label={t('credentials.password')}
+                  initialSettings={passwordSettings}
+                  showPassword={isPasswordVisible}
+                  onShowPasswordChange={setIsPasswordVisible}
+                  isNewCredential={!isEditMode}
+                />
               </View>
 
               <View style={styles.section}>
diff --git a/apps/mobile-app/components/form/AdvancedPasswordField.tsx b/apps/mobile-app/components/form/AdvancedPasswordField.tsx
index ca5f81996..7cacab6d2 100644
--- a/apps/mobile-app/components/form/AdvancedPasswordField.tsx
+++ b/apps/mobile-app/components/form/AdvancedPasswordField.tsx
@@ -22,7 +22,7 @@ type AdvancedPasswordFieldProps<T extends FieldValues> = Omit<TextInputProps, 'v
   name: Path<T>;
   control: Control<T>;
   required?: boolean;
-  initialSettings: PasswordSettings;
+  initialSettings: PasswordSettings | null;
   showPassword?: boolean;
   onShowPasswordChange?: (show: boolean) => void;
   isNewCredential?: boolean;
@@ -47,11 +47,19 @@ const AdvancedPasswordFieldComponent = forwardRef<AdvancedPasswordFieldRef, Adva
   const inputRef = React.useRef<TextInput>(null);
   const currentValue = useRef<string>('');
   const [isFocused, setIsFocused] = React.useState(false);
+  const defaultSettings: PasswordSettings = {
+    Length: 16,
+    UseLowercase: true,
+    UseUppercase: true,
+    UseNumbers: true,
+    UseSpecialChars: true,
+    UseNonAmbiguousChars: false
+  };
   const [internalShowPassword, setInternalShowPassword] = useState(false);
   const [showSettingsModal, setShowSettingsModal] = useState(false);
-  const [currentSettings, setCurrentSettings] = useState<PasswordSettings>(initialSettings);
+  const [currentSettings, setCurrentSettings] = useState<PasswordSettings>(initialSettings || defaultSettings);
   const [previewPassword, setPreviewPassword] = useState<string>('');
-  const [displayLength, setDisplayLength] = useState<number>(initialSettings.Length);
+  const [displayLength, setDisplayLength] = useState<number>((initialSettings || defaultSettings).Length);
   const [hasAutoGenerated, setHasAutoGenerated] = useState(false);
   const onChangeRef = useRef<((value: string) => void) | null>(null);
 
@@ -91,8 +99,9 @@ const AdvancedPasswordFieldComponent = forwardRef<AdvancedPasswordFieldRef, Adva
    * Initialize settings when initialSettings change.
    */
   useEffect(() => {
-    setCurrentSettings({ ...initialSettings });
-    setDisplayLength(initialSettings.Length);
+    const settings = initialSettings || defaultSettings;
+    setCurrentSettings({ ...settings });
+    setDisplayLength(settings.Length);
   }, [initialSettings]);
 
   /**