Merge branch 'main' into dbajpeyi/fix/ios-prompt-cc-once-and-icons

Author: dbajpeyi

dist/autofill-debug.js

@@ -393,6 +393,10 @@ class Form {
         return this.device.settings.featureToggles.unknown_username_categorization && this.isLogin && this.ambiguousInputs?.length === 1;
     }
 
+    canCategorizePasswordVariant() {
+        return this.device.settings.featureToggles.password_variant_categorization;
+    }
+
     /**
      * Takes an ambiguous input and tries to get a target type that the input should be categorized to.
      * @param {HTMLInputElement} ambiguousInput
@@ -450,6 +454,33 @@ class Form {
         }
     }
 
+    /**
+     * Recategorizes the new/current password field variant
+     */
+    recategorizeInputVariantIfNeeded() {
+        let newPasswordFields = 0;
+        let currentPasswordFields = 0;
+        let firstNewPasswordField = null;
+
+        for (const credentialElement of this.inputs.credentials) {
+            const variant = getInputVariant(credentialElement);
+            if (variant === 'new') {
+                newPasswordFields++;
+                if (!firstNewPasswordField) firstNewPasswordField = credentialElement;
+            }
+            if (variant === 'current') currentPasswordFields++;
+
+            // Short circuit if the field counts wouldn't match the requirements
+            if (newPasswordFields > 3 || currentPasswordFields > 0) return;
+        }
+
+        // If a form has 3 new-password fields, but no current, the first is likely a current
+        if (newPasswordFields === 3 && currentPasswordFields === 0) {
+            if (shouldLog()) console.log('Recategorizing password variant to "current"', firstNewPasswordField);
+            firstNewPasswordField.setAttribute(ATTR_INPUT_TYPE, 'credentials.password.current');
+        }
+    }
+
     categorizeInputs() {
         const selector = this.matching.cssSelector('formInputsSelector');
         // If there's no form container and it's just a lonely input field (this.form is an input field)
@@ -475,6 +506,8 @@ class Form {
 
         if (this.canCategorizeAmbiguousInput()) this.recategorizeInputToTargetType();
 
+        if (this.canCategorizePasswordVariant()) this.recategorizeInputVariantIfNeeded();
+
         // If the form has only one input and it's unknown, discard the form
         if (this.inputs.all.size === 1 && this.inputs.unknown.size === 1) {
             this.destroy();
@@ -818,11 +851,11 @@ class Form {
             if (isIncontextSignupAvailable) return false;
         }
 
-        // On mobile, don't re-prompt for credit cards if any field cc has already been touched
-        if (isMobileApp && mainType === 'creditCards') {
-            const hasAnyCCInputBeenTouched = [...this.inputs.creditCards].some((ccInput) => this.touched.has(ccInput));
-            return !hasAnyCCInputBeenTouched && !(input instanceof HTMLSelectElement);
-        }
+        // // On mobile, don't re-prompt for credit cards if any field cc has already been touched
+        // if (isMobileApp && mainType === 'creditCards') {
+        //     const hasAnyCCInputBeenTouched = [...this.inputs.creditCards].some((ccInput) => this.touched.has(ccInput));
+        //     return !hasAnyCCInputBeenTouched && !(input instanceof HTMLSelectElement);
+        // }
 
         return !this.touched.has(input) && !input.classList.contains('ddg-autofilled');
     }

dist/autofill.js

@@ -430,6 +430,7 @@ describe('Form re-categorizes inputs', () => {
     const deviceInterface = InterfacePrototype.default();
     deviceInterface.settings.setFeatureToggles({
         unknown_username_categorization: true,
+        password_variant_categorization: true,
     });
     describe('Should recategorize', () => {
         test('when form has unknown input and has username data available', () => {
@@ -735,3 +736,114 @@ describe('site specific fixes', () => {
         });
     });
 });
+
+describe('Password variant recategorization', () => {
+    test('recategorizes first password field to current-password when there are 3 new-password fields', () => {
+        attachAndReturnGenericForm(`
+            <form>
+                <input id="old-password" type="password" value="oldPassword" />
+                <input id="new-password" type="password" value="newPassword" autocomplete="new-password" />
+                <input id="confirm-password" type="password" value="confirmPassword" autocomplete="new-password" />
+                <button type="submit">Change Password</button>
+            </form>`);
+
+        // Create a device interface with password_variant_categorization enabled
+        const deviceInterface = InterfacePrototype.default();
+        deviceInterface.settings.setFeatureToggles({
+            password_variant_categorization: true,
+        });
+
+        createScanner(deviceInterface).findEligibleInputs(document);
+
+        // Query password inputs by their IDs
+        const oldPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('old-password'));
+        const newPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('new-password'));
+        const confirmPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('confirm-password'));
+
+        // The first password field should be recategorized to current-password
+        expect(oldPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.current');
+        // The other password fields should remain as new-password
+        expect(newPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+        expect(confirmPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+    });
+
+    test('does not recategorize when there are less than 3 new-password fields', () => {
+        attachAndReturnGenericForm(`
+            <form>
+                <input id="new-password" type="password" value="newPassword" autocomplete="new-password" />
+                <input id="confirm-password" type="password" value="confirmPassword" autocomplete="new-password" />
+                <button type="submit">Create Account</button>
+            </form>`);
+
+        const deviceInterface = InterfacePrototype.default();
+        deviceInterface.settings.setFeatureToggles({
+            password_variant_categorization: true,
+        });
+
+        createScanner(deviceInterface).findEligibleInputs(document);
+
+        // Query password inputs by their IDs
+        const newPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('new-password'));
+        const confirmPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('confirm-password'));
+
+        // Both password fields should remain as new-password
+        expect(newPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+        expect(confirmPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+    });
+
+    test('does not recategorize when there is already a current-password field', () => {
+        attachAndReturnGenericForm(`
+            <form>
+                <input id="current-password" type="password" value="oldPassword" autocomplete="current-password" />
+                <input id="new-password" type="password" value="newPassword" autocomplete="new-password" />
+                <input id="confirm-password" type="password" value="confirmPassword" autocomplete="new-password" />
+                <button type="submit">Change Password</button>
+            </form>`);
+
+        const deviceInterface = InterfacePrototype.default();
+        deviceInterface.settings.setFeatureToggles({
+            password_variant_categorization: true,
+        });
+
+        createScanner(deviceInterface).findEligibleInputs(document);
+
+        // Query password inputs by their IDs
+        const currentPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('current-password'));
+        const newPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('new-password'));
+        const confirmPasswordInput = /** @type {HTMLInputElement} */ (document.getElementById('confirm-password'));
+
+        // The first password should remain as current-password
+        expect(currentPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.current');
+        // The other password fields should remain as new-password
+        expect(newPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+        expect(confirmPasswordInput.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+    });
+
+    test('does not recategorize when feature toggle is disabled', () => {
+        attachAndReturnGenericForm(`
+            <form>
+                <input id="password1" type="password" value="oldPassword" autocomplete="new-password" />
+                <input id="password2" type="password" value="newPassword" autocomplete="new-password" />
+                <input id="password3" type="password" value="confirmPassword" autocomplete="new-password" />
+                <button type="submit">Change Password</button>
+            </form>`);
+
+        // Create a device interface with password_variant_categorization disabled
+        const deviceInterface = InterfacePrototype.default();
+        deviceInterface.settings.setFeatureToggles({
+            password_variant_categorization: false,
+        });
+
+        createScanner(deviceInterface).findEligibleInputs(document);
+
+        // Query password inputs by their IDs
+        const password1 = /** @type {HTMLInputElement} */ (document.getElementById('password1'));
+        const password2 = /** @type {HTMLInputElement} */ (document.getElementById('password2'));
+        const password3 = /** @type {HTMLInputElement} */ (document.getElementById('password3'));
+
+        // All password fields should remain as new-password
+        expect(password1.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+        expect(password2.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+        expect(password3.getAttribute(constants.ATTR_INPUT_TYPE)).toBe('credentials.password.new');
+    });
+});

src/Form/Form.js

@@ -214,6 +214,7 @@ describe.each(testCases)('Test $html fields', (testCase) => {
         deviceInterface.settings.setAvailableInputTypes(availableInputTypes);
         deviceInterface.settings.setFeatureToggles({
             unknown_username_categorization: true,
+            password_variant_categorization: true,
         });
         const scanner = createScanner(deviceInterface);
         scanner.findEligibleInputs(document);

src/Form/Form.test.js

@@ -399,6 +399,7 @@ export class Settings {
             inputType_creditCards: false,
             inlineIcon_credentials: false,
             unknown_username_categorization: false,
+            password_variant_categorization: false,
             partial_form_saves: false,
         },
         /** @type {AvailableInputTypes} */

src/Form/input-classifiers.test.js

@@ -148,6 +148,7 @@ describe('Settings', () => {
         "inputType_identities": false,
         "partial_form_saves": false,
         "password_generation": false,
+        "password_variant_categorization": false,
         "unknown_username_categorization": false,
       }
     `);