Refactor AdvancedPasswordField (#1187)

This commit is contained in:
Leendert de Borst
2025-09-10 20:01:33 +02:00
committed by Leendert de Borst
parent 4ebbea7825
commit 7ff608b08c
2 changed files with 23 additions and 55 deletions

View File

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

View File

@@ -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]);
/**