[Form] Trigger partialSave on username/email only form submit

integration-test/helpers/pages/loginPage.js

@@ -215,6 +215,12 @@ export function loginPage(page, opts = {}) {
             expect(mockCalls.length).toBe(0);
         }
 
+        async shouldPromptToSave() {
+            let mockCalls = [];
+            mockCalls = await mockedCalls(page, { names: ['storeFormData'] });
+            expect(mockCalls.length).toBeGreaterThan(0);
+        }
+
         /**
          * This is used mostly to avoid false negatives when we check for something _not_ happening.
          * Basically, you check that a specific call hasn't happened but the rest of the script ran just fine.

integration-test/tests/save-prompts.android.spec.js

@@ -81,11 +81,11 @@ test.describe('Android Save prompts', () => {
                 await login.submitPasswordOnlyForm(credentials);
                 await login.assertWasPromptedToSave(credentials);
             });
-            test('with username only (should NOT prompt)', async ({ page }) => {
+            test('with username only (should prompt)', async ({ page }) => {
                 const { login } = await setup(page);
                 const credentials = { username: '123456' };
                 await login.submitUsernameOnlyForm(credentials.username);
-                await login.promptWasNotShown();
+                await login.shouldPromptToSave();
             });
         });
     });

integration-test/tests/save-prompts.ios.spec.js

@@ -105,12 +105,12 @@ test.describe('iOS Save prompts', () => {
                 await login.assertWasPromptedToSave(credentials);
             });
 
-            test('username only (should NOT prompt)', async ({ page }) => {
+            test('username only (should prompt)', async ({ page }) => {
                 const login = await setup(page);
 
                 const credentials = { username: '123456' };
                 await login.submitUsernameOnlyForm(credentials.username);
-                await login.shouldNotPromptToSave();
+                await login.shouldPromptToSave();
             });
         });
 

integration-test/tests/save-prompts.macos.spec.js

@@ -64,7 +64,7 @@ test.describe('macos', () => {
                 await login.submitPasswordOnlyForm(credentials);
                 await login.assertWasPromptedToSave(credentials);
             });
-            test('username only (should NOT prompt)', async ({ page }) => {
+            test('username only (should prompt)', async ({ page }) => {
                 // enable in-terminal exceptions
                 await forwardConsoleMessages(page);
 
@@ -76,7 +76,7 @@ test.describe('macos', () => {
                 const login = loginPage(page);
                 await login.navigate();
                 await login.submitUsernameOnlyForm(credentials.username);
-                await login.shouldNotPromptToSave();
+                await login.shouldPromptToSave();
             });
         });
     });

src/DeviceInterface/InterfacePrototype.js

@@ -806,7 +806,17 @@ class InterfacePrototype {
                 password: this.passwordGenerator.password,
                 username: this.emailProtection.lastGenerated,
             });
-            this.storeFormData(formData, 'formSubmission');
+
+            // If credentials has only username field, and no password field, then trigger is a partialSave
+            const isUsernameOnly =
+                Boolean(formData.credentials?.username) && !formData.credentials?.password && form.inputs.credentials.size === 1;
+            // Is an email or phone number present in the form, but no other credentials
+            const isEmailOrPhoneOnly =
+                Boolean(formData.identities?.emailAddress) !== Boolean(formData.identities?.phone) &&
+                form.inputs.credentials.size === 0 &&
+                form.inputs.identities.size === 1;
+            const trigger = isUsernameOnly || isEmailOrPhoneOnly ? 'partialSave' : 'formSubmission';
+            this.storeFormData(formData, trigger);
         }
     }
 

src/Form/Form.js

@@ -895,11 +895,24 @@ class Form {
 
         // After autofill we check if form values match the data provided…
         const formValues = this.getValuesReadyForStorage();
+        const hasNoCredentialsData = !formValues.credentials?.username && !formValues.credentials?.password;
+        const hasOnlyEmail =
+            formValues.identities && Object.keys(formValues.identities ?? {}).length === 1 && formValues.identities?.emailAddress;
+
+        const hasOnlyOneCredentialOrEmail =
+            Boolean(formValues.credentials?.username) !== Boolean(formValues.credentials?.password) ||
+            (hasOnlyEmail && hasNoCredentialsData);
         const areAllFormValuesKnown = Object.keys(formValues[dataType] || {}).every(
             (subtype) => formValues[dataType][subtype] === data[subtype],
         );
-        if (areAllFormValuesKnown) {
-            // …if we know all the values do not prompt to store data
+
+        // If we only have a single credential field - then we want to prompt a partial save with username,
+        // So that in multi step forms (like reset-password), we can identify which username was picked, or complete a password save.
+        if (hasOnlyOneCredentialOrEmail) {
+            this.shouldPromptToStoreData = true;
+            this.shouldAutoSubmit = this.device.globalConfig.isMobileApp;
+        } else if (areAllFormValuesKnown) {
+            // …if it's a normal form with more than one field and if we know all the values do not prompt to store data
             this.shouldPromptToStoreData = false;
             // reset this to its initial value
             this.shouldAutoSubmit = this.device.globalConfig.isMobileApp;

src/Form/Form.test.js

@@ -84,8 +84,8 @@ describe('Test the form class reading values correctly', () => {
     <input type="password" value="" autocomplete="new-password" />
     <button type="submit">Sign up</button>
 </form>`,
-            expHasValues: false,
-            expValues: { credentials: undefined },
+            expHasValues: true,
+            expValues: { credentials: { username: 'testUsername' } },
         },
         {
             testCase: 'form where the password is <=3 characters long',
@@ -95,8 +95,8 @@ describe('Test the form class reading values correctly', () => {
     <input type="password" value="abc" autocomplete="new-password" />
     <button type="submit">Sign up</button>
 </form>`,
-            expHasValues: false,
-            expValues: { credentials: undefined },
+            expHasValues: true,
+            expValues: { credentials: { username: 'testUsername' } },
         },
         {
             testCase: 'form with hidden email field',
@@ -276,7 +276,11 @@ describe('Test the form class reading values correctly', () => {
 </form>`,
             expHasValues: true,
             expValues: {
-                identities: undefined,
+                identities: {
+                    emailAddress: '[email protected]',
+                    firstName: 'Peppa',
+                    lastName: 'Pig',
+                },
                 creditCards: {
                     cardName: 'Peppa Pig',
                     cardSecurityCode: '123',

src/Form/formatters.js

@@ -163,14 +163,13 @@ const getMMAndYYYYFromString = (expiration) => {
  * @param {InternalDataStorageObject} credentials
  * @return {boolean}
  */
-const shouldStoreCredentials = ({ credentials }) => Boolean(credentials.password);
-
-/**
- * @param {InternalDataStorageObject} credentials
- * @return {boolean}
- */
-const shouldStoreIdentities = ({ identities }) =>
-    Boolean((identities.firstName || identities.fullName) && identities.addressStreet && identities.addressCity);
+const shouldStoreIdentities = ({ identities }) => {
+    return (
+        Boolean((identities.firstName || identities.fullName) && identities.addressStreet && identities.addressCity) ||
+        Boolean(identities.emailAddress) ||
+        Boolean(identities.phone)
+    );
+};
 
 /**
  * @param {InternalDataStorageObject} credentials
@@ -207,9 +206,8 @@ const prepareFormValuesForStorage = (formValues) => {
         creditCards.cardName = identities?.fullName || formatFullName(identities);
     }
 
-    /** Fixes for credentials **/
-    // Don't store if there isn't enough data
-    if (shouldStoreCredentials(formValues)) {
+    /** Fixes for credentials */
+    if (credentials.username || credentials.password) {
         // If we don't have a username to match a password, let's see if the email is available
         if (credentials.password && !credentials.username && identities.emailAddress) {
             credentials.username = identities.emailAddress;

src/Form/formatters.test.js

@@ -61,15 +61,15 @@ describe('Can strip phone formatting characters', () => {
 
 describe('prepareFormValuesForStorage()', () => {
     describe('handling credentials', () => {
-        it('rejects for username only', () => {
+        it('accepts for username only', () => {
             const values = prepareFormValuesForStorage({
                 credentials: { username: '[email protected]' },
                 // @ts-ignore
                 creditCards: {},
                 // @ts-ignore
                 identities: {},
             });
-            expect(values.credentials).toBeUndefined();
+            expect(values.credentials?.username).toBe('[email protected]');
         });
         it('accepts password only', () => {
             const values = prepareFormValuesForStorage({

src/device-interface.d.ts

@@ -71,7 +71,7 @@ interface DataStorageObject {
     credentials?: CredentialsObject;
     creditCards?: CreditCardObject;
     identities?: IdentityObject;
-    trigger?: 'formSubmission' | 'passwordGeneration' | 'emailProtection';
+    trigger?: 'partialSave' | 'formSubmission' | 'passwordGeneration' | 'emailProtection';
 }
 
 interface InternalDataStorageObject {