Merge pull request #621 from mozilla/issue-546-signin-complete-screen

fix(client): Add /signin_complete endpoint.

app/scripts/router.js

@@ -9,6 +9,7 @@ define([
   'backbone',
   'lib/session',
   'views/sign_in',
+  'views/sign_in_complete',
   'views/sign_up',
   'views/confirm',
   'views/legal',
@@ -30,6 +31,7 @@ function (
   Backbone,
   Session,
   SignInView,
+  SignInCompleteView,
   SignUpView,
   ConfirmView,
   LegalView,
@@ -56,6 +58,7 @@ function (
     routes: {
       '': 'redirectToSignup',
       'signin': showView(SignInView),
+      'signin_complete': showView(SignInCompleteView),
       'signup': showView(SignUpView),
       'confirm': showView(ConfirmView),
       'settings': showView(SettingsView),

app/scripts/templates/sign_in_complete.mustache

@@ -0,0 +1,19 @@
+<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/sign_in.js

@@ -74,7 +74,7 @@ function (_, BaseView, FormView, SignInTemplate, Session, FxaClient, PasswordMix
       client.signIn(email, password)
             .then(function (accountData) {
               if (accountData.verified) {
-                self.navigate('settings');
+                self.navigate('signin_complete');
               } else {
                 return client.signUpResend()
                   .then(function () {

app/scripts/views/sign_in_complete.js

@@ -0,0 +1,36 @@
+/* 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,6 +65,7 @@ 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',

app/tests/spec/views/sign_in_complete.js

@@ -0,0 +1,60 @@
+/* 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

@@ -69,6 +69,7 @@ module.exports = function (fxAccountUrl, templates) {
     var FRONTEND_ROUTES = [
       '/',
       '/signin',
+      '/signin_complete',
       '/signup',
       '/confirm',
       '/settings',

tests/functional/force_auth.js

@@ -15,7 +15,6 @@ define([
 
   var AUTH_SERVER_ROOT = 'http://127.0.0.1:9000/v1';
   var EMAIL_SERVER_ROOT = 'http://127.0.0.1:9001';
-  var SIGNIN_URL = 'http://localhost:3030/signin';
   var FORCE_AUTH_URL = 'http://localhost:3030/force_auth';
   var PASSWORD = 'password';
   var user;
@@ -45,30 +44,6 @@ define([
         });
     },
 
-    'sign in': function () {
-      return this.get('remote')
-        .get(require.toUrl(SIGNIN_URL))
-        .waitForElementById('fxa-signin-header')
-
-        .elementByCssSelector('form input.email')
-          .click()
-          .type(email)
-        .end()
-
-        .elementByCssSelector('form input.password')
-          .click()
-          .type(PASSWORD)
-        .end()
-
-        .elementByCssSelector('button[type="submit"]')
-          .click()
-        .end()
-
-        // success is setting the settings screen.
-        .waitForElementById('fxa-settings-header')
-        .end();
-    },
-
     'sign in via force-auth': function () {
       return this.get('remote')
         .get(require.toUrl(FORCE_AUTH_URL + '?email=' + email))
@@ -83,7 +58,7 @@ define([
           .click()
         .end()
 
-        .waitForElementById('fxa-settings-header')
+        .waitForElementById('fxa-sign-in-complete-header')
         .end();
     },
 

tests/functional/sign_in.js

@@ -114,8 +114,8 @@ define([
               .click()
             .end()
 
-            // success is setting the settings screen.
-            .waitForElementById('fxa-settings-header')
+            // success is seeing the sign-in-complete screen.
+            .waitForElementById('fxa-sign-in-complete-header')
             .end();
         });
     },

tests/server/routes.js

@@ -22,6 +22,7 @@ define([
     '/config': 200,
     '/': 200,
     '/signin': 200,
+    '/signin_complete': 200,
     '/signup': 200,
     '/confirm': 200,
     '/settings': 200,