refactor(client): Add /signup_complete endpoint. Collapse all code/templates for *_complete screens.

Closes #557

app/scripts/router.js

@@ -9,7 +9,6 @@ define([
   'backbone',
   'lib/session',
   'views/sign_in',
-  'views/sign_in_complete',
   'views/sign_up',
   'views/confirm',
   'views/legal',
@@ -20,7 +19,7 @@ define([
   'views/reset_password',
   'views/confirm_reset_password',
   'views/complete_reset_password',
-  'views/reset_password_complete',
+  'views/ready',
   'views/settings',
   'views/change_password',
   //'views/delete_account',
@@ -31,7 +30,6 @@ function (
   Backbone,
   Session,
   SignInView,
-  SignInCompleteView,
   SignUpView,
   ConfirmView,
   LegalView,
@@ -42,7 +40,7 @@ function (
   ResetPasswordView,
   ConfirmResetPasswordView,
   CompleteResetPasswordView,
-  ResetPasswordCompleteView,
+  ReadyView,
   SettingsView,
   ChangePasswordView
   //DeleteAccountView
@@ -58,8 +56,11 @@ function (
     routes: {
       '': 'redirectToSignup',
       'signin': showView(SignInView),
-      'signin_complete': showView(SignInCompleteView),
+      'signin_complete': showView(ReadyView, { type: 'sign_in' }),
       'signup': showView(SignUpView),
+      'signup_complete': showView(ReadyView, { type: 'sign_up' }),
+      'cannot_create_account': showView(CannotCreateAccountView),
+      'verify_email': showView(CompleteSignUpView),
       'confirm': showView(ConfirmView),
       'settings': showView(SettingsView),
       'change_password': showView(ChangePasswordView),
@@ -67,12 +68,10 @@ function (
       'legal': showView(LegalView),
       'legal/terms': showView(TosView),
       'legal/privacy': showView(PpView),
-      'cannot_create_account': showView(CannotCreateAccountView),
-      'verify_email': showView(CompleteSignUpView),
       'reset_password': showView(ResetPasswordView),
       'confirm_reset_password': showView(ConfirmResetPasswordView),
       'complete_reset_password': showView(CompleteResetPasswordView),
-      'reset_password_complete': showView(ResetPasswordCompleteView),
+      'reset_password_complete': showView(ReadyView, { type: 'reset_password' }),
       'force_auth': showView(SignInView, { forceAuth: true })
     },
 

app/scripts/templates/complete_sign_up.mustache

@@ -1,19 +1,8 @@
 <header>
   <h1 class="fox-logo"><span>{{#t}}Firefox Accounts{{/t}}</span></h1>
-  <h2 id="fxa-complete-sign-up-header" class="complete">{{#t}}Account verified{{/t}}</h2>
+  <h2 id="fxa-complete-sign-up-header">{{#t}}Completing sign up{{/t}}</h2>
 </header>
 
 <section>
   <div class="error"></div>
-
-  <div id="fxa-complete-sign-up-ready" class="complete">
-    <div class="graphic graphic-checkbox">{{#t}}Success{{/t}}</div>
-
-    {{#service}}
-    <p>{{#t}}You are now ready to use %(service)s.{{/t}}</p>
-    {{/service}}
-    {{^service}}
-      <p>{{#t}}Your account is ready!{{/t}}</p>
-    {{/service}}
-  </div>
 </section>

app/scripts/templates/ready.mustache

@@ -1,6 +1,14 @@
 <header>
   <h1 class="fox-logo"><span>{{#t}}Firefox Accounts{{/t}}</span></h1>
+  {{#signIn}}
+  <h2 id="fxa-sign-in-complete-header">{{#t}}Signed in successfully{{/t}}</h2>
+  {{/signIn}}
+  {{#signUp}}
+  <h2 id="fxa-sign-up-complete-header">{{#t}}Account verified{{/t}}</h2>
+  {{/signUp}}
+  {{#resetPassword}}
   <h2 id="fxa-reset-password-complete-header">{{#t}}Password reset{{/t}}</h2>
+  {{/resetPassword}}
 </header>
 
 <section>

app/scripts/templates/sign_in_complete.mustache

@@ -1,19 +0,0 @@
-<header>
-  <h1 class="fox-logo"><span>{{#t}}Firefox Accounts{{/t}}</span></h1>
-  <h2 id="fxa-sign-in-complete-header">{{#t}}Signed in successfully{{/t}}</h2>
-</header>
-
-<section>
-  <div class="error"></div>
-
-  <div id="fxa-sign-in-complete-ready">
-    <div class="graphic graphic-checkbox">{{#t}}Success{{/t}}</div>
-
-    {{#service}}
-    <p>{{#t}}You are now ready to use %(service)s.{{/t}}</p>
-    {{/service}}
-    {{^service}}
-      <p>{{#t}}Your account is ready!{{/t}}</p>
-    {{/service}}
-  </div>
-</section>

app/scripts/views/complete_sign_up.js

@@ -8,33 +8,16 @@ define([
   'underscore',
   'views/base',
   'stache!templates/complete_sign_up',
-  'lib/session',
   'lib/fxa-client',
-  'lib/url',
-  'lib/xss',
-  'lib/strings'
+  'lib/url'
 ],
-function (_, BaseView, CompleteSignUpTemplate, Session, FxaClient, Url, Xss, Strings) {
+function (_, BaseView, CompleteSignUpTemplate, FxaClient, Url) {
   var t = BaseView.t;
 
   var CompleteSignUpView = BaseView.extend({
     template: CompleteSignUpTemplate,
     className: 'complete_sign_up',
 
-    context: function () {
-      var service = Session.service;
-
-      if (Session.redirectTo) {
-        service = Strings.interpolate('<a href="%s" class="no-underline" id="redirectTo">%s</a>', [
-          Xss.href(Session.redirectTo), Session.service
-        ]);
-      }
-
-      return {
-        service: service
-      };
-    },
-
     afterRender: function () {
       var searchParams = this.window.location.search;
       var uid = Url.searchParam('uid', searchParams);
@@ -51,10 +34,8 @@ function (_, BaseView, CompleteSignUpTemplate, Session, FxaClient, Url, Xss, Str
       var client = new FxaClient();
       client.verifyCode(uid, code)
             .then(function () {
-              // TODO - (Issue #557) we could go to a "sign_up_complete" screen here.
-              self.$('#fxa-complete-sign-up-success').show();
+              self.navigate('signup_complete');
 
-              self.$('.complete').show();
               self.trigger('verify_code_complete');
             })
             .then(null, function (err) {

app/scripts/views/ready.js

@@ -2,12 +2,19 @@
  * 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/. */
 
+/**
+ * Handle sign_in_complete, sign_up_complete,
+ * and reset_password_complete.
+ * Prints a message to the user that says
+ * "All ready! You can go visit {{ service }}"
+ */
+
 'use strict';
 
 define([
   'underscore',
   'views/base',
-  'stache!templates/reset_password_complete',
+  'stache!templates/ready',
   'lib/session',
   'lib/xss',
   'lib/strings'
@@ -17,6 +24,12 @@ function (_, BaseView, Template, Session, Xss, Strings) {
     template: Template,
     className: 'reset_password_complete',
 
+    initialize: function (options) {
+      options = options || {};
+
+      this.type = options.type;
+    },
+
     context: function () {
       var service = Session.service;
 
@@ -27,8 +40,15 @@ function (_, BaseView, Template, Session, Xss, Strings) {
       }
 
       return {
-        service: service
+        service: service,
+        signIn: this.is('sign_in'),
+        signUp: this.is('sign_up'),
+        resetPassword: this.is('reset_password')
       };
+    },
+
+    is: function (type) {
+      return this.type === type;
     }
   });
 

app/scripts/views/sign_in_complete.js

@@ -1,36 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * 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/. */
-
-'use strict';
-
-define([
-  'underscore',
-  'views/base',
-  'stache!templates/sign_in_complete',
-  'lib/session',
-  'lib/xss',
-  'lib/strings'
-],
-function (_, BaseView, Template, Session, Xss, Strings) {
-  var View = BaseView.extend({
-    template: Template,
-    className: 'sign_in_complete',
-
-    context: function () {
-      var service = Session.service;
-
-      if (Session.redirectTo) {
-        service = Strings.interpolate('<a href="%s" class="no-underline" id="redirectTo">%s</a>', [
-          Xss.href(Session.redirectTo), Session.service
-        ]);
-      }
-
-      return {
-        service: service
-      };
-    }
-  });
-
-  return View;
-});

app/tests/main.js

@@ -65,7 +65,6 @@ require([
   '../tests/spec/views/sign_up',
   '../tests/spec/views/complete_sign_up',
   '../tests/spec/views/sign_in',
-  '../tests/spec/views/sign_in_complete',
   '../tests/spec/views/settings',
   '../tests/spec/views/change_password',
   '../tests/spec/views/delete_account',
@@ -75,7 +74,7 @@ require([
   '../tests/spec/views/reset_password',
   '../tests/spec/views/confirm_reset_password',
   '../tests/spec/views/complete_reset_password',
-  '../tests/spec/views/reset_password_complete'
+  '../tests/spec/views/ready'
 ],
 function (Translator) {
   // The translator is expected to be on the window object.

app/tests/spec/views/complete_sign_up.js

@@ -94,23 +94,6 @@ function (chai, View, Session, FxaClientWrapper,
 
         view.render();
       });
-
-      it('shows redirectTo button if redirectTo is available', function () {
-        windowMock.location.search = '?code=code&uid=uid';
-        Session.set('redirectTo', 'https://sync.firefox.com');
-        view.render();
-
-        assert.equal(view.$('#redirectTo').length, 1);
-      });
-
-      it('does not show redirectTo button if redirectTo is not available',
-         function () {
-        windowMock.location.search = '?code=code&uid=uid';
-        view.render();
-
-        assert.equal(view.$('#redirectTo').length, 0);
-      });
-
     });
   });
 });

app/tests/spec/views/ready.js

@@ -7,14 +7,14 @@
 
 define([
   'chai',
-  'views/reset_password_complete',
+  'views/ready',
   'lib/session'
 ],
 function (chai, View, Session) {
   /*global describe, beforeEach, afterEach, it*/
   var assert = chai.assert;
 
-  describe('views/reset_password_complete', function () {
+  describe('views/ready', function () {
     var view;
 
     beforeEach(function () {
@@ -32,12 +32,27 @@ function (chai, View, Session) {
     });
 
     describe('render', function () {
-      it('renders', function () {
+      it('renders with correct header for reset_password type', function () {
+        view.type = 'reset_password';
         view.render();
 
         assert.ok(view.$('#fxa-reset-password-complete-header').length);
       });
 
+      it('renders with correct header for sign_in type', function () {
+        view.type = 'sign_in';
+        view.render();
+
+        assert.ok(view.$('#fxa-sign-in-complete-header').length);
+      });
+
+      it('renders with correct header for sign_up type', function () {
+        view.type = 'sign_up';
+        view.render();
+
+        assert.ok(view.$('#fxa-sign-up-complete-header').length);
+      });
+
       it('shows redirectTo link and service name if available', function () {
         Session.set('redirectTo', 'https://sync.firefox.com');
         Session.set('service', 'Firefox Sync');

app/tests/spec/views/sign_in_complete.js

@@ -1,60 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * 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/. */
-
-'use strict';
-
-
-define([
-  'chai',
-  'views/sign_in_complete',
-  'lib/session'
-],
-function (chai, View, Session) {
-  /*global describe, beforeEach, afterEach, it*/
-  var assert = chai.assert;
-
-  describe('views/sign_in_complete', function () {
-    var view;
-
-    beforeEach(function () {
-      Session.clear();
-
-      view = new View({});
-    });
-
-    afterEach(function () {
-      Session.clear();
-
-      view.remove();
-      view.destroy();
-      view = null;
-    });
-
-    describe('render', function () {
-      it('renders', function () {
-        view.render();
-
-        assert.ok(view.$('#fxa-sign-in-complete-header').length);
-      });
-
-      it('shows redirectTo link and service name if available', function () {
-        Session.set('redirectTo', 'https://sync.firefox.com');
-        Session.set('service', 'Firefox Sync');
-        view.render();
-
-        assert.equal(view.$('#redirectTo').length, 1);
-        var html = view.$('section').text();
-        assert.notEqual(html.indexOf('Firefox Sync'), -1);
-      });
-
-      it('does not show redirectTo link if unavailable', function () {
-        view.render();
-        assert.equal(view.$('#redirectTo').length, 0);
-      });
-    });
-  });
-});
-
-
-

server/lib/routes.js

@@ -71,6 +71,7 @@ module.exports = function (fxAccountUrl, templates) {
       '/signin',
       '/signin_complete',
       '/signup',
+      '/signup_complete',
       '/confirm',
       '/settings',
       '/change_password',

tests/functional/complete_sign_up.js

@@ -48,8 +48,10 @@ define([
 
           return self.get('remote')
             .get(require.toUrl(url))
-            .waitForElementById('fxa-complete-sign-up-header')
 
+            // a successful user is immediately redirected to the
+            // sign-up-complete page.
+            .waitForElementById('fxa-sign-up-complete-header')
             .end();
         });
     }

tests/server/routes.js

@@ -24,6 +24,7 @@ define([
     '/signin': 200,
     '/signin_complete': 200,
     '/signup': 200,
+    '/signup_complete': 200,
     '/confirm': 200,
     '/settings': 200,
     '/change_password': 200,