feat(pair/CAD): Implement signed-in '/connect_another_device' and '/p…

…air' mods + redirects
mozilla · Sep 25, 2024 · 56738ab · 56738ab
1 parent 6e2d6d1
commit 56738ab
Show file tree

Hide file tree

Showing 36 changed files with 172 additions and 467 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
@@ -89,7 +89,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 ({
@@ -125,7 +125,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();
     });
 
     test('can setup recovery key inline after sign-in', async ({
@@ -266,6 +266,7 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.clickDoItLater();
 
       // User taken to connect another device page
+      await page.waitForURL(/connect_another_device/);
       await expect(connectAnotherDevice.header).toBeVisible();
 
       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/...onal-tests/tests/resetPassword/resetPasswordWithCode/oauthResetPasswordSyncMobile.spec.ts b/...onal-tests/tests/resetPassword/resetPasswordWithCode/oauthResetPasswordSyncMobile.spec.ts
@@ -58,7 +58,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/constants.js b/packages/fxa-content-server/app/scripts/lib/constants.js
@@ -173,6 +173,7 @@ module.exports = {
   FIREFOX_SYNCED_TABS_ENTRYPOINT: 'synced-tabs',
   FIREFOX_TABS_SIDEBAR_ENTRYPOINT: 'tabs-sidebar',
   FIREFOX_FX_VIEW_ENTRYPOINT: 'fx-view',
+  FIREFOX_AVATAR_ENTRYPOINT: 'fxa_avatar_menu',
 
   // This is compared against all secondary email
   // records, both verified and unverified

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>