fix(avatars): redirect unverified users to confirm screen

Fixes #1662.

app/scripts/views/settings/avatar.js

@@ -8,9 +8,10 @@ define([
   'underscore',
   'views/form',
   'stache!templates/settings/avatar',
+  'lib/auth-errors',
   'lib/session'
 ],
-function (_, FormView, Template, Session) {
+function (_, FormView, Template, AuthErrors, Session) {
   var View = FormView.extend({
     // user must be authenticated to see Settings
     mustAuth: true,
@@ -34,12 +35,24 @@ function (_, FormView, Template, Session) {
     // we would fetch the image right after sign in, or only for
     // specific email domains (#1567).
     _fetchProfileImage: function () {
+      var self = this;
+
       return this.profileClient.getAvatar()
         .then(function (result) {
           if (result.avatar) {
             Session.set('avatar', result.avatar);
             Session.set('avatarId', result.id);
           }
+        }, function (err) {
+          if (AuthErrors.is(err, 'UNVERIFIED_ACCOUNT')) {
+            return self.fxaClient.signUpResend()
+              .then(function () {
+                self.navigate('confirm');
+                return false;
+              });
+          }
+
+          throw err;
         });
     }
 

app/tests/spec/views/settings/avatar.js

@@ -13,11 +13,14 @@ define([
   'views/settings/avatar',
   '../../../mocks/router',
   '../../../mocks/profile',
+  '../../../mocks/fxa-client',
   'lib/promise',
   'lib/session',
-  'lib/profile'
+  'lib/profile',
+  'lib/auth-errors'
 ],
-function (chai, _, $, sinon, View, RouterMock, ProfileMock, p, Session, Profile) {
+function (chai, _, $, sinon, View, RouterMock, ProfileMock, FxaClientMock,
+    p, Session, Profile, AuthErrors) {
   var assert = chai.assert;
   var pngSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==';
   var IMG_URL = 'http://127.0.0.1:1112/avatar/example.jpg';
@@ -26,14 +29,17 @@ function (chai, _, $, sinon, View, RouterMock, ProfileMock, p, Session, Profile)
     var view;
     var routerMock;
     var profileClientMock;
+    var fxaClientMock;
 
     beforeEach(function () {
       routerMock = new RouterMock();
       profileClientMock = new ProfileMock();
+      fxaClientMock = new FxaClientMock();
 
       view = new View({
         router: routerMock,
-        profileClient: profileClientMock
+        profileClient: profileClientMock,
+        fxaClient: fxaClientMock
       });
     });
 
@@ -43,6 +49,7 @@ function (chai, _, $, sinon, View, RouterMock, ProfileMock, p, Session, Profile)
       view = null;
       routerMock = null;
       profileClientMock = null;
+      fxaClientMock = null;
     });
 
     describe('with no session', function () {
@@ -88,6 +95,23 @@ function (chai, _, $, sinon, View, RouterMock, ProfileMock, p, Session, Profile)
           });
       });
 
+      it('has an unverified account', function () {
+        Session.clear('avatar');
+
+        sinon.stub(fxaClientMock, 'signUpResend', function () {
+          return p();
+        });
+
+        sinon.stub(profileClientMock, 'getAvatar', function () {
+          return p.reject(AuthErrors.toError('UNVERIFIED_ACCOUNT'));
+        });
+
+        return view.render()
+          .then(function () {
+            assert.equal(routerMock.page, 'confirm');
+          });
+      });
+
       it('loads an avatar from the server', function () {
         Session.clear('avatar');
         var id = 'foo';

tests/functional/avatar.js

@@ -25,12 +25,14 @@ define([
   var PASSWORD = 'password';
   var email;
   var client;
+  var email2;
 
   registerSuite({
     name: 'settings/avatar',
 
     beforeEach: function () {
       email = TestHelpers.createEmail();
+      email2 = TestHelpers.createEmail();
 
       client = new FxaClient(AUTH_SERVER_ROOT, {
         xhr: nodeXMLHttpRequest.XMLHttpRequest
@@ -70,6 +72,41 @@ define([
       return FunctionalHelpers.clearBrowserState(this);
     },
 
+    'go to avatars with unverified account': function () {
+      var self = this;
+
+      return client.signUp(email2, PASSWORD)
+        .then(function () {
+          return FunctionalHelpers.clearBrowserState(self);
+        })
+        .then(function () {
+          return self.get('remote')
+            .get(require.toUrl(SIGNIN_URL))
+            .findByCssSelector('form input.email')
+              .click()
+              .type(email2)
+            .end()
+
+            .findByCssSelector('form input.password')
+              .click()
+              .type(PASSWORD)
+            .end()
+
+            .findByCssSelector('button[type="submit"]')
+              .click()
+            .end()
+
+            .findById('fxa-confirm-header')
+            .end()
+
+            .get(require.toUrl(AVATAR_URL))
+
+            // success is going to the confirm page
+            .findById('fxa-confirm-header')
+            .end();
+        });
+    },
+
     'go to avatars then avatar change': function () {
       return this.get('remote')
         .get(require.toUrl(AVATAR_URL))