Merge pull request #17660 from mozilla/FXA-10138

feat(pair/CAD): Implement signed-in '/connect_another_device' and '/pair' mods + redirects
mozilla · Sep 25, 2024 · 6d3edcf · 6d3edcf
2 parents e0fd703 + 4c107ce
commit 6d3edcf
Show file tree

Hide file tree

Showing 35 changed files with 177 additions and 476 deletions.
diff --git a/packages/functional-tests/pages/connectAnotherDevice.ts b/packages/functional-tests/pages/connectAnotherDevice.ts
@@ -10,10 +10,11 @@ export class ConnectAnotherDevicePage extends BaseLayout {
   readonly selectors = {
     CONNECT_ANOTHER_DEVICE_HEADER: '#fxa-connect-another-device-header',
     CONNECT_ANOTHER_DEVICE_SIGNIN_BUTTON: 'form div a',
-    FXA_CONNECTED_HEADER: '#fxa-connected-heading',
+    FXA_CONNECTED_HEADER: '#cad-header',
     TEXT_INSTALL_FX_DESKTOP: '#install-mobile-firefox-desktop',
     SUCCESS: '.success',
     NOT_NOW: '#cad-not-now',
+    NOT_NOW_PAIR: '#choice-pair-not-now',
   };
 
   get header() {
@@ -49,4 +50,8 @@ export class ConnectAnotherDevicePage extends BaseLayout {
   async clickNotNow() {
     return this.page.locator(this.selectors.NOT_NOW).click();
   }
+
+  async clickNotNowPair() {
+    return this.page.locator(this.selectors.NOT_NOW_PAIR).click();
+  }
 }
diff --git a/packages/functional-tests/tests/misc/recoveryKeyPromo.spec.ts b/packages/functional-tests/tests/misc/recoveryKeyPromo.spec.ts
@@ -77,8 +77,7 @@ test.describe('recovery key promo', () => {
       const credentials = testAccountTracker.generateSignupAccountDetails();
 
       await page.goto(
-        `${target.contentServerUrl}?context=fx_desktop_v3&service=sync&action=email`,
-        { waitUntil: 'load' }
+        `${target.contentServerUrl}?context=fx_desktop_v3&service=sync&action=email`
       );
       await signup.fillOutEmailForm(credentials.email);
       await signup.fillOutSignupForm(credentials.password, '21');
@@ -89,7 +88,7 @@ test.describe('recovery key promo', () => {
       await login.setCode(code);
       await login.clickSubmit();
 
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
     });
 
     test('not shown if user already has a recovery key', async ({
@@ -100,7 +99,7 @@ test.describe('recovery key promo', () => {
       const credentials = await testAccountTracker.signUp();
 
       // Sign-in without Sync, otw you will get prompted to create a recovery key
-      await page.goto(target.contentServerUrl, { waitUntil: 'load' });
+      await page.goto(target.contentServerUrl);
 
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
@@ -119,13 +118,12 @@ test.describe('recovery key promo', () => {
 
       // Not shown recovery key promo
       await page.goto(
-        `${target.contentServerUrl}?context=fx_desktop_v3&service=sync&action=email`,
-        { waitUntil: 'load' }
+        `${target.contentServerUrl}?context=fx_desktop_v3&service=sync&action=email`
       );
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
 
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await expect(connectAnotherDevice.fxaConnected).toBeVisible();
     });
 
     test('can setup recovery key inline after sign-in', async ({
@@ -152,7 +150,7 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.fillOutHint('hint');
       await inlineRecoveryKey.clickFinish();
 
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await expect(connectAnotherDevice.header).toBeEnabled();
     });
 
     test('can setup recovery key inline after email code', async ({
@@ -189,7 +187,8 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.fillOutHint('hint');
       await inlineRecoveryKey.clickFinish();
 
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await page.waitForURL(/connect_another_device/);
+      await expect(connectAnotherDevice.header).toBeAttached();
     });
 
     test('can setup recovery key inline after 2FA', async ({
@@ -236,7 +235,8 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.fillOutHint('hint');
       await inlineRecoveryKey.clickFinish();
 
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await page.waitForURL(/connect_another_device/);
+      await expect(connectAnotherDevice.header).toBeEnabled();
 
       await settings.goto();
       await settings.disconnectTotp(); // Required before teardown
@@ -266,7 +266,8 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.clickDoItLater();
 
       // User taken to connect another device page
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await page.waitForURL(/connect_another_device/);
+      await expect(connectAnotherDevice.header).toBeEnabled();
 
       await connectAnotherDevice.startBrowsingButton.click();
 
@@ -283,7 +284,7 @@ test.describe('recovery key promo', () => {
       );
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await expect(connectAnotherDevice.fxaConnected).toBeVisible();
     });
   });
 });
diff --git a/packages/functional-tests/tests/postVerify/syncForcePasswordChange.spec.ts b/packages/functional-tests/tests/postVerify/syncForcePasswordChange.spec.ts
@@ -39,8 +39,8 @@ test.describe('severity-2 #smoke', () => {
       await postVerify.submit();
       credentials.password = newPassword;
 
-      //Verify logged in on connect another device page
-      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
+      // Verify logged in on connect another device page
+      await expect(connectAnotherDevice.header).toBeVisible();
     });
   });
 });
diff --git a/packages/functional-tests/tests/react-conversion/oauthSignup.spec.ts b/packages/functional-tests/tests/react-conversion/oauthSignup.spec.ts
@@ -148,7 +148,7 @@ test.describe('severity-1 #smoke', () => {
       const code = await target.emailClient.getVerifyShortCode(email);
       await confirmSignupCode.fillOutCodeForm(code);
 
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
       await signup.checkWebChannelMessage(FirefoxCommand.OAuthLogin);
     });
   });

diff --git a/packages/functional-tests/tests/react-conversion/signInConnectAnotherDevice.spec.ts b/packages/functional-tests/tests/react-conversion/signInConnectAnotherDevice.spec.ts
@@ -6,7 +6,7 @@ import { expect, test } from '../../lib/fixtures/standard';
 
 test.describe('severity-2 #smoke', () => {
   test.describe('connect_another_device', () => {
-    test('react signin Fx Desktop, load /connect_another_device page', async ({
+    test('react signin Fx Desktop, load /pair page', async ({
       syncBrowserPages: { configPage, connectAnotherDevice, page, signin },
       testAccountTracker,
     }) => {
@@ -26,13 +26,8 @@ test.describe('severity-2 #smoke', () => {
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
 
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
-      await expect(
-        connectAnotherDevice.connectAnotherDeviceButton
-      ).toBeVisible();
-      await expect(connectAnotherDevice.signInButton).toBeHidden();
-      await expect(connectAnotherDevice.success).toBeHidden();
     });
   });
 });
diff --git a/packages/functional-tests/tests/react-conversion/signInRelyingParties.spec.ts b/packages/functional-tests/tests/react-conversion/signInRelyingParties.spec.ts
@@ -34,7 +34,7 @@ test.describe('severity-1 #smoke', () => {
     await signin.fillOutPasswordForm(credentials.password);
 
     await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
-    await connectAnotherDevice.startBrowsingButton.click();
+    await connectAnotherDevice.clickNotNowPair();
     await expect(page).toHaveURL(/settings/, { timeout: 1000 });
 
     await settings.disconnectSync(credentials);

diff --git a/packages/functional-tests/tests/react-conversion/signinTotp.spec.ts b/packages/functional-tests/tests/react-conversion/signinTotp.spec.ts
@@ -93,7 +93,7 @@ test.describe('severity-1 #smoke', () => {
       const code = await getCode(secret);
       await signin.fillOutAuthenticationForm(code);
 
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
 
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
 

diff --git a/packages/functional-tests/tests/react-conversion/signup.spec.ts b/packages/functional-tests/tests/react-conversion/signup.spec.ts
@@ -91,8 +91,8 @@ test.describe('severity-1 #smoke', () => {
       const code = await target.emailClient.getVerifyShortCode(email);
       await confirmSignupCode.fillOutCodeForm(code);
 
-      await expect(page).toHaveURL(/connect_another_device/);
-      await expect(page.getByText('You’re signed in to Firefox')).toBeVisible();
+      await expect(page).toHaveURL(/pair/);
+      await expect(page.getByText('Signed in successfully')).toBeVisible();
     });
   });
 });

diff --git a/packages/functional-tests/tests/react-conversion/syncV3SignIn.spec.ts b/packages/functional-tests/tests/react-conversion/syncV3SignIn.spec.ts
@@ -52,6 +52,6 @@ test.describe('severity-2 #smoke', () => {
 
     await signinTokenCode.fillOutCodeForm(code);
 
-    await expect(page).toHaveURL(/connect_another_device/);
+    await expect(page).toHaveURL(/pair/);
   });
 });
diff --git a/packages/functional-tests/tests/resetPassword/oauthResetPasswordSyncMobile.spec.ts b/packages/functional-tests/tests/resetPassword/oauthResetPasswordSyncMobile.spec.ts
@@ -50,7 +50,7 @@ test.describe('severity-1 #smoke', () => {
       // new passwowrd works
       await signin.fillOutPasswordForm(newPassword);
 
-      await expect(connectAnotherDevice.header).toBeVisible();
+      await expect(connectAnotherDevice.fxaConnected).toBeVisible();
 
       // update password for cleanup function
       credentials.password = newPassword;

diff --git a/packages/functional-tests/tests/settings/fxaStatus.spec.ts b/packages/functional-tests/tests/settings/fxaStatus.spec.ts
@@ -23,7 +23,8 @@ test.describe('fxa_status web channel message in Settings', () => {
       `${target.contentServerUrl}/?context=fx_desktop_v3&service=sync`
     );
     const credentials = await signInAccount(signin, testAccountTracker);
-    await expect(connectAnotherDevice.header).toBeVisible();
+    await page.waitForURL(/pair/);
+    await expect(connectAnotherDevice.fxaConnected).toBeVisible();
 
     await page.goto(target.contentServerUrl);
     await signin.useDifferentAccountLink.click();
@@ -45,7 +46,7 @@ test.describe('fxa_status web channel message in Settings', () => {
       `${target.contentServerUrl}/?context=fx_desktop_v3&service=sync`
     );
     await signInAccount(signin, testAccountTracker);
-    await expect(connectAnotherDevice.header).toBeVisible();
+    await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
 
     await page.goto(target.contentServerUrl);
     await signin.useDifferentAccountLink.click();

diff --git a/packages/functional-tests/tests/signin/connectAnotherDevice.spec.ts b/packages/functional-tests/tests/signin/connectAnotherDevice.spec.ts
@@ -19,14 +19,8 @@ test.describe('severity-2 #smoke', () => {
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
 
-      await page.waitForURL(/connect_another_device/);
-
+      await expect(page).toHaveURL(/pair/);
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
-      await expect(
-        connectAnotherDevice.connectAnotherDeviceButton
-      ).toBeVisible();
-      await expect(connectAnotherDevice.signInButton).toBeHidden();
-      await expect(connectAnotherDevice.success).toBeHidden();
     });
   });
 });
diff --git a/packages/functional-tests/tests/syncV3/fxDesktopV3ForceAuth.spec.ts b/packages/functional-tests/tests/syncV3/fxDesktopV3ForceAuth.spec.ts
@@ -73,7 +73,7 @@ test.describe('severity-1 #smoke', () => {
         credentials.email
       );
       await signinTokenCode.fillOutCodeForm(code);
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
       await fxDesktopV3ForceAuth.checkWebChannelMessage(FirefoxCommand.Login);
     });
@@ -142,7 +142,7 @@ test.describe('severity-1 #smoke', () => {
       const code = await target.emailClient.getUnblockCode(credentials.email);
       await signinUnblock.fillOutCodeForm(code);
 
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
       await fxDesktopV3ForceAuth.checkWebChannelMessage(FirefoxCommand.Login);
 

diff --git a/packages/functional-tests/tests/syncV3/oauthSignIn.spec.ts b/packages/functional-tests/tests/syncV3/oauthSignIn.spec.ts
@@ -25,7 +25,7 @@ test.describe('severity-1 #smoke', () => {
       );
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
 
       await relier.goto();

diff --git a/packages/functional-tests/tests/syncV3/settings.spec.ts b/packages/functional-tests/tests/syncV3/settings.spec.ts
@@ -154,7 +154,7 @@ test.describe('severity-2 #smoke', () => {
         credentials.email
       );
       await signinTokenCode.fillOutCodeForm(code);
-      await expect(page).toHaveURL(/connect_another_device/);
+      await expect(page).toHaveURL(/pair/);
 
       await settings.goto();
       //Click Delete account

diff --git a/packages/functional-tests/tests/syncV3/signIn.spec.ts b/packages/functional-tests/tests/syncV3/signIn.spec.ts
@@ -222,8 +222,8 @@ test.describe('severity-2 #smoke', () => {
 
       await expect(connectAnotherDevice.fxaConnected).toBeVisible();
 
-      //Delete blocked account, required before teardown
-      await connectAnotherDevice.startBrowsingButton.click();
+      // Delete blocked account, required before teardown
+      await connectAnotherDevice.clickNotNowPair();
       await settings.deleteAccountButton.click();
       await deleteAccount.deleteAccount(credentials.password);
 

diff --git a/packages/functional-tests/tests/syncV3/signinCached.spec.ts b/packages/functional-tests/tests/syncV3/signinCached.spec.ts
@@ -33,8 +33,8 @@ test.describe('severity-2 #smoke', () => {
       await expect(signin.passwordFormHeading).toBeVisible();
       await expect(page.getByText(credentials.email)).toBeVisible();
       await signin.fillOutPasswordForm(credentials.password);
-      await expect(page).toHaveURL(/connect_another_device/);
-      await connectAnotherDevice.clickNotNow();
+      await expect(page).toHaveURL(/pair/);
+      await connectAnotherDevice.clickNotNowPair();
 
       //Verify logged in on Settings page
       await expect(settings.settingsHeading).toBeVisible();

diff --git a/packages/fxa-content-server/app/scripts/lib/user-agent.js b/packages/fxa-content-server/app/scripts/lib/user-agent.js
@@ -27,10 +27,25 @@ const UserAgent = function (userAgent) {
       return this.os.name === 'iOS' || this.isDesktopFirefoxOnIpad();
     },
 
+    /**
+     * Check if the device is iOS or Android.
+     *
+     * This does not work for latest iPad, see note above isDesktopFirefoxOnIpad.
+     *
+     * @returns {Boolean}
+     */
+    isMobile() {
+      return this.isIos() || this.isAndroid();
+    },
+
     /**
      * iPads using FF iOS 13+ send a desktop UA.
      * The OS shows as a Mac, but 'Firefox iOS' in the UA family.
      *
+     * NOTE, as of at least Sept 2024, this is no longer reliable.
+     * The UA for iPad Safari exactly matches the UA for iPad Firefox
+     * except for "Version" which is unreliable.
+     *
      * @returns {Boolean}
      */
     isDesktopFirefoxOnIpad() {

diff --git a/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache b/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache
@@ -18,7 +18,7 @@
     {{/isSignedIn}}
   {{/showSuccessMessage}}
   <section>
-    <div class="{{graphicId}}" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
+    <div class="bg-image-triple-device-hearts" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
     {{#showSuccessMessage}}
       {{#isSignedIn}}
         {{#isFirefoxDesktop}}
@@ -65,33 +65,10 @@
           {{/isSignedIn}}
         </p>
       {{/isFirefoxDesktop}}
-      {{#isFirefoxIos}}
-        <!-- user verifies in Fx for iOS, assume they are not signed in -->
-        <p id="signin-fxios">
-          {{#t}}Still adding devices? Sign in to Firefox on another device to complete set-up{{/t}}
-        </p>
-      {{/isFirefoxIos}}
-      {{#isOtherAndroid}}
-        <!-- Another android browser, encourage Fx for Android installation -->
-        <p id="install-mobile-firefox-android">
-          {{#t}}Sign in to Firefox for Android to complete set-up{{/t}}
-        </p>
-      {{/isOtherAndroid}}
-      {{#isOtherIos}}
-        <!-- Safari or Chrome for iOS, encourage installation of Fx -->
-        <p id="install-mobile-firefox-ios">
-          {{#t}}Sign in to Firefox for iOS to complete set-up{{/t}}
-        </p>
-      {{/isOtherIos}}
-      {{#isOther}}
-        <!-- probably some desktop browser -->
-        <p id="install-mobile-firefox-other">
-          {{#isSignIn}}
-            {{#t}}Still adding devices?{{/t}}
-          {{/isSignIn}}
-          {{#t}}Sign in to Firefox on another device to complete set-up{{/t}}
-        </p>
-      {{/isOther}}
+
+      {{#isMobile}}
+        {{{ unsupportedPairHtml }}}
+      {{/isMobile}}
 
       {{^isFirefoxDesktop}}
         <div class="marketing-area"></div>