fix(sync): show Sync brand name when signin up/in for Sync

Fixes #1339.
mozilla · Jul 21, 2014 · c15a276 · c15a276
1 parent 00ce149
commit c15a276
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 25 deletions.
diff --git a/app/scripts/lib/session.js b/app/scripts/lib/session.js
@@ -145,10 +145,6 @@ define([
       return this.get('context') === Constants.FX_DESKTOP_CONTEXT;
     },
 
-    isSync: function () {
-      return this.get('service') === 'sync';
-    },
-
     // BEGIN TEST API
     /**
      * Remove an item from memory but not sessionStorage. Used to test .load

diff --git a/app/scripts/templates/sign_in.mustache b/app/scripts/templates/sign_in.mustache
@@ -2,7 +2,8 @@
   <header>
     <h1 id="fxa-signin-header">
       {{#serviceName}}
-        {{#t}}Sign in to %(serviceName)s{{/t}}
+        <!-- L10N: For languages structured like English, the second phrase can read "to continue to %(serviceName)s" -->
+        {{#t}}Sign in{{/t}} <span class="service">{{#t}}Continue to %(serviceName)s{{/t}}</span>
       {{/serviceName}}
       {{^serviceName}}
         {{#t}}Sign in{{/t}}

diff --git a/app/scripts/templates/sign_up.mustache b/app/scripts/templates/sign_up.mustache
@@ -2,7 +2,8 @@
   <header>
     <h1 id="fxa-signup-header">
       {{#serviceName}}
-        {{#t}}Create a Firefox Account for %(serviceName)s{{/t}}
+        <!-- L10N: For languages structured like English, the second phrase can read "to continue to %(serviceName)s" -->
+        {{#t}}Create a Firefox Account{{/t}} <span class="service">{{#t}}Continue to %(serviceName)s{{/t}}</span>
       {{/serviceName}}
       {{^serviceName}}
         {{#t}}Create a Firefox Account{{/t}}

diff --git a/app/scripts/views/change_password.js b/app/scripts/views/change_password.js
@@ -12,9 +12,10 @@ define([
   'lib/session',
   'views/mixins/password-mixin',
   'views/mixins/floating-placeholder-mixin',
-  'lib/auth-errors'
+  'lib/auth-errors',
+  'views/mixins/service-mixin'
 ],
-function (_, BaseView, FormView, Template, Session, PasswordMixin, FloatingPlaceholderMixin, AuthErrors) {
+function (_, BaseView, FormView, Template, Session, PasswordMixin, FloatingPlaceholderMixin, AuthErrors, ServiceMixin) {
   var t = BaseView.t;
 
   var View = FormView.extend({
@@ -33,7 +34,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin, FloatingPlace
 
     context: function () {
       return {
-        isSync: Session.isSync()
+        isSync: this.isSync()
       };
     },
 
@@ -96,6 +97,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin, FloatingPlace
 
   _.extend(View.prototype, PasswordMixin);
   _.extend(View.prototype, FloatingPlaceholderMixin);
+  _.extend(View.prototype, ServiceMixin);
 
   return View;
 });
diff --git a/app/scripts/views/complete_reset_password.js b/app/scripts/views/complete_reset_password.js
@@ -79,7 +79,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin, FloatingPlace
 
       // damaged and expired links have special messages.
       return {
-        isSync: Session.isSync(),
+        isSync: this.isSync(),
         isLinkDamaged: ! doesLinkValidate,
         isLinkExpired: isLinkExpired,
         isLinkValid: doesLinkValidate && ! isLinkExpired

diff --git a/app/scripts/views/delete_account.js b/app/scripts/views/delete_account.js
@@ -10,9 +10,10 @@ define([
   'views/form',
   'stache!templates/delete_account',
   'lib/session',
-  'views/mixins/password-mixin'
+  'views/mixins/password-mixin',
+  'views/mixins/service-mixin'
 ],
-function (_, BaseView, FormView, Template, Session, PasswordMixin) {
+function (_, BaseView, FormView, Template, Session, PasswordMixin, ServiceMixin) {
   var t = BaseView.t;
 
   var View = FormView.extend({
@@ -30,7 +31,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin) {
 
     context: function () {
       return {
-        isSync: Session.isSync(),
+        isSync: this.isSync(),
         email: Session.email
       };
     },
@@ -49,6 +50,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin) {
   });
 
   _.extend(View.prototype, PasswordMixin);
+  _.extend(View.prototype, ServiceMixin);
 
   return View;
 });

diff --git a/app/scripts/views/mixins/service-mixin.js b/app/scripts/views/mixins/service-mixin.js
@@ -119,6 +119,10 @@ define([
         this.setupOAuthLinks();
       }
       return result;
+    },
+
+    isSync: function () {
+      return Session.service === 'sync';
     }
   };
 });
diff --git a/app/scripts/views/sign_in.js b/app/scripts/views/sign_in.js
@@ -14,9 +14,10 @@ define([
   'lib/session',
   'views/mixins/password-mixin',
   'lib/auth-errors',
-  'lib/validate'
+  'lib/validate',
+  'views/mixins/service-mixin'
 ],
-function (_, p, BaseView, FormView, SignInTemplate, Constants, Session, PasswordMixin, AuthErrors, Validate) {
+function (_, p, BaseView, FormView, SignInTemplate, Constants, Session, PasswordMixin, AuthErrors, Validate, ServiceMixin) {
   var t = BaseView.t;
 
   var View = FormView.extend({
@@ -42,7 +43,7 @@ function (_, p, BaseView, FormView, SignInTemplate, Constants, Session, Password
         serviceName: this.serviceName,
         email: email,
         password: Session.prefillPassword,
-        isSync: Session.isSync()
+        isSync: this.isSync()
       };
     },
 
@@ -56,6 +57,18 @@ function (_, p, BaseView, FormView, SignInTemplate, Constants, Session, Password
       Session.set('prefillPassword', this.$('.password').val());
     },
 
+    beforeRender: function() {
+      var self = this;
+      return p().then(function () {
+          return FormView.prototype.beforeRender.call(self);
+        })
+        .then(function () {
+          if (self.hasService() && self.isSync()) {
+            return self.setServiceInfo();
+          }
+        });
+    },
+
     submit: function () {
       var email = this.$('.email').val();
       var password = this.$('.password').val();
@@ -123,6 +136,7 @@ function (_, p, BaseView, FormView, SignInTemplate, Constants, Session, Password
   });
 
   _.extend(View.prototype, PasswordMixin);
+  _.extend(View.prototype, ServiceMixin);
 
   return View;
 });
diff --git a/app/scripts/views/sign_up.js b/app/scripts/views/sign_up.js
@@ -6,14 +6,16 @@
 
 define([
   'underscore',
+  'p-promise',
   'views/base',
   'views/form',
   'stache!templates/sign_up',
   'lib/session',
   'views/mixins/password-mixin',
-  'lib/auth-errors'
+  'lib/auth-errors',
+  'views/mixins/service-mixin'
 ],
-function (_, BaseView, FormView, Template, Session, PasswordMixin, AuthErrors) {
+function (_, p, BaseView, FormView, Template, Session, PasswordMixin, AuthErrors, ServiceMixin) {
   var t = BaseView.t;
 
   function selectAutoFocusEl(email, password) {
@@ -52,8 +54,20 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin, AuthErrors) {
     beforeRender: function () {
       if (document.cookie.indexOf('tooyoung') > -1) {
         this.navigate('cannot_create_account');
-        return false;
+        return p(false);
       }
+
+      this.service = Session.service;
+
+      var self = this;
+      return p().then(function () {
+          return FormView.prototype.beforeRender.call(self);
+        })
+        .then(function () {
+          if (self.hasService() && self.isSync()) {
+            return self.setServiceInfo();
+          }
+        });
     },
 
     // afterRender fucnction to handle select-row hack (issue 822)
@@ -93,7 +107,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin, AuthErrors) {
         password: Session.prefillPassword,
         year: Session.prefillYear || 'none',
         service: Session.service,
-        isSync: Session.isSync(),
+        isSync: this.isSync(),
         shouldFocusEmail: autofocusEl === 'email',
         shouldFocusPassword: autofocusEl === 'password',
         shouldFocusYear: autofocusEl === 'year'
@@ -208,6 +222,7 @@ function (_, BaseView, FormView, Template, Session, PasswordMixin, AuthErrors) {
   });
 
   _.extend(View.prototype, PasswordMixin);
+  _.extend(View.prototype, ServiceMixin);
 
   return View;
 });
diff --git a/app/styles/_general.scss b/app/styles/_general.scss
@@ -135,9 +135,10 @@ header h1 {
   margin: 0 0 32px 0;
 }
 
-header h1 span {
-  left: -9999px;
-  position: relative;
+header h1 span.service {
+  display: block;
+  font-size: 18px;
+  font-weight: 200;
 }
 
 header h2 {

diff --git a/app/tests/spec/views/sign_in.js b/app/tests/spec/views/sign_in.js
@@ -14,13 +14,16 @@ define([
   'lib/auth-errors',
   'lib/metrics',
   'lib/fxa-client',
+  'lib/translator',
+  'lib/service-name',
   '../../mocks/window',
   '../../mocks/router',
   '../../lib/helpers'
 ],
-function (chai, $, p, View, Session, AuthErrors, Metrics, FxaClient, WindowMock, RouterMock, TestHelpers) {
+function (chai, $, p, View, Session, AuthErrors, Metrics, FxaClient, Translator, ServiceName, WindowMock, RouterMock, TestHelpers) {
   var assert = chai.assert;
   var wrapAssertion = TestHelpers.wrapAssertion;
+  var translator = new Translator('en-US', ['en-US']);
 
   describe('views/sign_in', function () {
     var view, email, routerMock, metrics, windowMock, fxaClient;
@@ -68,6 +71,22 @@ function (chai, $, p, View, Session, AuthErrors, Metrics, FxaClient, WindowMock,
               assert.equal(view.$('[type=password]').val(), 'prefilled password');
             });
       });
+
+      it('Shows Sync service name', function () {
+        Session.set('service', 'sync');
+        var syncName = new ServiceName(translator).get('sync');
+
+        // initialize a new view to set the service name
+        view = new View({
+          router: routerMock,
+          metrics: metrics,
+          window: windowMock
+        });
+        return view.render()
+            .then(function () {
+              assert.include(view.$('#fxa-signin-header').text(), syncName);
+            });
+      });
     });
 
 

diff --git a/app/tests/spec/views/sign_up.js b/app/tests/spec/views/sign_up.js
@@ -15,13 +15,16 @@ define([
   'lib/auth-errors',
   'lib/metrics',
   'lib/fxa-client',
+  'lib/translator',
+  'lib/service-name',
   '../../mocks/router',
   '../../mocks/window',
   '../../lib/helpers'
 ],
-function (chai, _, $, p, View, Session, AuthErrors, Metrics, FxaClient, RouterMock, WindowMock, TestHelpers) {
+function (chai, _, $, p, View, Session, AuthErrors, Metrics, FxaClient, Translator, ServiceName, RouterMock, WindowMock, TestHelpers) {
   var assert = chai.assert;
   var wrapAssertion = TestHelpers.wrapAssertion;
+  var translator = new Translator('en-US', ['en-US']);
 
   function fillOutSignUp (email, password, opts) {
     opts = opts || {};
@@ -102,11 +105,23 @@ function (chai, _, $, p, View, Session, AuthErrors, Metrics, FxaClient, RouterMo
       it('shows choose what to sync checkbox when service is sync even after session is cleared', function () {
         Session.set('service', 'sync');
         Session.clear();
+
         return view.render()
             .then(function () {
               assert.equal(view.$('.customize-sync-row').length, 1);
             });
       });
+
+      it('Shows Sync service name', function () {
+        Session.set('service', 'sync');
+        var syncName = new ServiceName(translator).get('sync');
+
+        // create a new view so that it initializes with the service from Session
+        return view.render()
+            .then(function () {
+              assert.include(view.$('#fxa-signup-header').text(), syncName);
+            });
+      });
     });
 
     describe('isValid', function () {