Merge pull request #13329 from mozilla/fxa-5290-update-flow-for-confi…

…rming-pairing refactor(content-server): update copy and add asset on "/pair" page
mozilla · Jun 22, 2022 · 587aa6b · 587aa6b
2 parents b75efd2 + ebc6e58
commit 587aa6b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 25 deletions.
diff --git a/packages/fxa-content-server/app/images/confirm-pairing.svg b/packages/fxa-content-server/app/images/confirm-pairing.svg
diff --git a/packages/fxa-content-server/app/scripts/templates/pair/auth_allow.mustache b/packages/fxa-content-server/app/scripts/templates/pair/auth_allow.mustache
@@ -1,24 +1,23 @@
 <div id="main-content" class="card pair-auth">
   <header>
     <h1 id="fxa-pair-auth-allow-header">
-      {{#unsafeTranslate}}Approve new device <small>for %(email)s</small>{{/unsafeTranslate}}
+      {{#t}}Did you just sign in to Firefox?{{/t}}
     </h1>
+    <p>{{#unsafeTranslate}} %(email)s {{/unsafeTranslate}}</p>
   </header>
 
   <section>
     <div class="error"></div>
     <div class="success"></div>
+    <div class="graphic graphic-confirm-pairing" role="img" aria-label="{{#t}}location balloon{{/t}}"></div>
 
     <form novalidate>
       {{{ unsafeDeviceBeingPairedHTML }}}
 
       <div class="button-row">
-        <button type="submit" id="auth-approve-btn">{{#t}}Approve device{{/t}}</button>
-      </div>
-
-      <div class="links">
-        <a href="#" id="cancel">{{#t}}Cancel{{/t}}</a>
+        <button type="submit" id="auth-approve-btn">{{#t}}Yes, approve device{{/t}}</button>
       </div>
+      <p>{{#unsafeTranslate}}If this wasn’t you, <a href="/settings/change_password" id="change-password">change your passsword</a> {{/unsafeTranslate}}</p>
     </form>
   </section>
   </div>
diff --git a/packages/fxa-content-server/app/scripts/views/pair/auth_allow.js b/packages/fxa-content-server/app/scripts/views/pair/auth_allow.js
@@ -2,21 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { assign } from 'underscore';
 import Cocktail from 'cocktail';
 import DeviceBeingPairedMixin from './device-being-paired-mixin';
 import PairingTotpMixin from './pairing-totp-mixin';
 import FormView from '../form';
-import preventDefaultThen from '../decorators/prevent_default_then';
 import Template from '../../templates/pair/auth_allow.mustache';
 
 class PairAuthAllowView extends FormView {
   template = Template;
 
-  events = assign(this.events, {
-    'click #cancel': preventDefaultThen('cancel'),
-  });
-
   setInitialContext(context) {
     context.set({
       email: this.broker.get('browserSignedInAccount').email,
@@ -32,11 +26,6 @@ class PairAuthAllowView extends FormView {
   submit() {
     return this.invokeBrokerMethod('afterPairAuthAllow');
   }
-
-  cancel() {
-    this.replaceCurrentPage('pair/failure');
-    return this.invokeBrokerMethod('afterPairAuthDecline');
-  }
 }
 
 Cocktail.mixin(PairAuthAllowView, PairingTotpMixin(), DeviceBeingPairedMixin());

diff --git a/packages/fxa-content-server/app/styles/modules/_graphic.scss b/packages/fxa-content-server/app/styles/modules/_graphic.scss
@@ -59,6 +59,14 @@
   margin: 0 auto 20px auto;
 }
 
+.graphic-confirm-pairing {
+  background-image: image-url('confirm-pairing.svg');
+
+  @include respond-to('small') {
+    height: 100px;
+  }
+}
+
 .graphic-laptop-mobile {
   background-image: image-url('graphic_laptop_mobile.svg');
   height: 138px;

diff --git a/packages/fxa-content-server/app/tests/spec/views/pair/auth_allow.js b/packages/fxa-content-server/app/tests/spec/views/pair/auth_allow.js
@@ -92,7 +92,8 @@ describe('views/pair/auth_allow', () => {
   }
 
   describe('render', () => {
-    it('renders, can submit and cancel', () => {
+    const HEADER_TEXT = 'Did you just sign in to Firefox?';
+    it('renders, can submit and navigate to change password', () => {
       sinon.stub(view, 'invokeBrokerMethod').callsFake(() => {});
       sinon.spy(view, 'replaceCurrentPage');
       return view.render().then(() => {
@@ -101,8 +102,9 @@ describe('views/pair/auth_allow', () => {
           view.$el
             .find('#fxa-pair-auth-allow-header')
             .text()
-            .includes(MOCK_EMAIL)
+            .includes(HEADER_TEXT)
         );
+        assert.isTrue(view.$el.find('header p').text().includes(MOCK_EMAIL));
         assert.equal(view.$el.find('.family-os').text(), 'Firefox on Windows');
         assert.equal(
           view.$el.find('.location').text().trim(),
@@ -119,11 +121,7 @@ describe('views/pair/auth_allow', () => {
         assert.isFalse(
           view.invokeBrokerMethod.calledOnceWith('afterPairAuthDecline')
         );
-        $('#container').find('#cancel').click();
-        assert.isTrue(
-          view.invokeBrokerMethod.secondCall.calledWith('afterPairAuthDecline')
-        );
-        assert.isTrue(view.replaceCurrentPage.calledOnceWith('pair/failure'));
+        assert.lengthOf(view.$('#change-password'), 1);
       });
     });
 
@@ -175,7 +173,7 @@ describe('views/pair/auth_allow', () => {
           view.$el
             .find('#fxa-pair-auth-allow-header')
             .text()
-            .includes(MOCK_EMAIL)
+            .includes(HEADER_TEXT)
         );
         assert.equal(view.$el.find('.family-os').text(), 'Firefox on Windows');
         assert.equal(