Mwalsh/social signup

app/authenticators/torii.js

@@ -1,17 +1,37 @@
 import Torii from 'ember-simple-auth/authenticators/torii';
 import service from 'ember-service/inject';
+import fetch from 'fetch';
+import RSVP from 'rsvp';
+import config from 'wnyc-web-client/config/environment';
+import { decamelizeKeys } from 'wnyc-web-client/helpers/decamelize-keys';
 
 export default Torii.extend({
   torii: service(),
 
   authenticate() {
-    return this._super(...arguments).then(data => {
-      return {
-        access_token: data.accessToken,
-        provider: data.provider,
-        expires_in: data.expiresIn,
-        user_id: data.userId
-      };
+    return this._super(...arguments)
+    .then((data) => {
+      return RSVP.all([
+        data,
+        this.getSession(data.provider, data.accessToken)
+      ]);
+    })
+    .then(([data, response]) => {
+      if (response && response.ok) {
+        return decamelizeKeys([data]);
+      } else {
+        return RSVP.reject(response);
+      }
     });
   },
+
+  getSession(provider, accessToken) {
+    return fetch(`${config.wnycAuthAPI}/v1/session`, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'X-Provider': provider
+      }
+    });
+  }
 });

app/components/account-wrapper/template.hbs

@@ -1,20 +1,24 @@
 <div class="account-main">
-  <div class="account-logo">
-    <a href="/">
-      {{nypr-svg icon='wnyc-logo'}}
-    </a>
-  </div>
-{{yield}}
+  {{#each flashMessages.queue as |flash|}}
+    {{flash-message flash=flash}}
+  {{/each}}
+  <div class="account-wrapper">
+    <div class="account-logo">
+      <a href="/">
+        {{nypr-svg icon='wnyc-logo'}}
+      </a>
+    </div>
+    {{yield}}
 
-  <div class="account-footer">
-    <div class="account-footer-links">
-      {{link-to 'Terms' 'djangorendered' 'terms' target='_blank'}}
-      {{link-to 'Privacy' 'djangorendered' 'privacy' target='_blank'}}
-      {{link-to 'Help' 'djangorendered' 'contact' target='_blank'}}
+    <div class="account-footer">
+      <div class="account-footer-links">
+        {{link-to 'Terms' 'djangorendered' 'terms' target='_blank'}}
+        {{link-to 'Privacy' 'djangorendered' 'privacy' target='_blank'}}
+        {{link-to 'Help' 'djangorendered' 'contact' target='_blank'}}
+      </div>
+      <div>&copy; {{moment-format (now) 'YYYY'}} New York Public Radio</div>
     </div>
-    <div>&copy; {{moment-format (now) 'YYYY'}} New York Public Radio</div>
   </div>
-
 </div>
 <div class="account-promo">
   <div class="account-promo-blurb">

app/components/site-chrome/template.hbs

@@ -149,6 +149,10 @@
 
   <div class="l-full sitechrome-page-content-area">
 
+    {{#each flashMessages.queue as |flash|}}
+       {{flash-message flash=flash}}
+    {{/each}}
+
     {{yield}}
 
   </div>

app/helpers/decamelize-keys.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export function decamelizeKeys([ source ]/*, hash*/) {
+  let dest = {};
+  Object.keys(source).forEach(k => dest[k.decamelize()] = source[k]);
+  return dest;
+}
+
+export default Ember.Helper.helper(decamelizeKeys);

app/services/current-user.js

@@ -9,7 +9,8 @@ export default Service.extend({
     if (this.get('session.isAuthenticated')) {
       let user = this.get('store').queryRecord('user', {me: true});
       this.set('user', user);
-      user.catch(() => {
+      return user
+      .catch(() => {
         // this access token has since been revoked
         this.get('session').invalidate();
       });

app/services/session.js

@@ -21,7 +21,7 @@ export default SessionService.extend({
         return RSVP.Promise.resolve(null);
       }
     }
-    
+
     let { browserId } = this.get('data');
     if (legacyId || browserId) {
       if (report) {
@@ -34,7 +34,7 @@ export default SessionService.extend({
         .then( ({ browser_id }) => this.set('data.browserId', browser_id));
     }
   },
-  
+
   staffAuth() {
     fetch(`${config.wnycAdminRoot}/api/v1/is_logged_in/?bust_cache=${Math.random()}`, {
       credentials: 'include'
@@ -47,11 +47,12 @@ export default SessionService.extend({
       });
     });
   },
-  
+
   verify(email, password) {
     let authenticator = getOwner(this).lookup('authenticator:nypr');
     return authenticator.authenticate(email, password);
   }
+
 });
 
 function reportBrowserId(knownId) {

app/styles/_accounts.scss

@@ -227,24 +227,31 @@
 }
 
 .account-main {
+  @include mq($medium-and-up) {
+    width: 45%;
+    height: 100vh;
+  }
+
+  @include mq($h-medium) {
+    height: initial;
+  }
+}
+
+.account-wrapper {
+  position: relative;
   @include flexbox((
     display: flex,
     flex-direction: column,
     justify-content: flex-start
   ));
 
   @include mq($medium-and-up) {
-    width: 45%;
-
     @include flexbox((
       justify-content: space-between
     ));
-    height: 100vh;
   }
 
   @include mq($h-medium) {
-    height: initial;
-
     @include flexbox((
       justify-content: flex-start
     ));

app/styles/_flash.scss

@@ -1,5 +1,5 @@
-.alert-success {
-  background-color: #0eb8ba;
+.alert-success,
+.alert-warning {
   padding: 18px 28px;
   color: white;
   font-weight: 600;
@@ -10,7 +10,31 @@
   left: 0;
   right: 0;
 
+  .account-main & {
+    position: static;
+    width: 100%;
+  }
+
+  .sitechrome-page-content-area & {
+    position: static;
+    width: 100%;
+    margin-top: -24px;
+    margin-bottom: 24px;
+  }
+
+  .index_loading .sitechrome-page-content-area & {
+    margin-top: 0px;
+  }
+
   + .account-info {
     padding-top: 125px;
   }
 }
+
+.alert-success {
+  background-color: $lightgreen;
+}
+
+.alert-warning {
+  background-color: #ff0033;
+}

app/styles/_user-navigation.scss

@@ -18,6 +18,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  overflow: hidden;
   line-height: 100%;
   background-color: $lightergray;
   margin: 0px 0px 0px 10px;

app/templates/profile.hbs

@@ -1,7 +1,3 @@
-{{#each flashMessages.queue as |flash|}}
-  {{flash-message flash=flash}}
-{{/each}}
-
 <div class="l-constrained account-info">
   <h2 class="account-header">
     <div class="account-avatar">

config/environment.js

@@ -93,6 +93,9 @@ module.exports = function(environment) {
         ]
       }
     },
+    flashMessageDefaults: {
+      preventDuplicates: true
+    },
     queueAudioBumperURL: 'http://audio.wnyc.org/streambumper/streambumper000008_audio_queue.mp3',
     siteSlug: 'wnyc',
     siteName: 'WNYC',

mirage/config.js

@@ -152,9 +152,10 @@ export default function() {
   this.post('/v1/password', {});
 
   this.get('/v1/session', ({users}, request) => {
-    if (!request.requestHeaders.Authorization) {
+    if (!request.requestHeaders.Authorization && !request.requestHeaders.authorization) {
       return new Response(401);
     }
+
     return users.first();
   });
   this.post('/v1/session', {access_token: 'secret', expires_in: 3600, token_type: 'bearer'});
@@ -165,10 +166,10 @@ export default function() {
     let body = JSON.parse(request.requestBody);
     if (request.requestHeaders['X-Provider']) {
       let fbUser = users.create({
-        email: faker.internet.email(),
-        given_name: faker.name.firstName(),
-        family_name: faker.name.lastName(),
-        perferred_username: faker.name.firstName() + faker.name.firstName(),
+        email: body.email || faker.internet.email(),
+        given_name: body.given_name || faker.name.firstName(),
+        family_name: body.family_name || faker.name.lastName(),
+        preferred_username: body.preferred_username || faker.name.firstName() + faker.name.firstName(),
         facebook_id: body.facebook_id,
         picture: body.picture
       });
@@ -178,7 +179,7 @@ export default function() {
     return users.first();
   });
   this.patch('/v1/user', (schema, request) => {
-    if (!request.requestHeaders.Authorization) {
+    if (!request.requestHeaders.Authorization && !request.requestHeaders.authorization) {
       return new Response(401);
     }
     let user = schema.users.first();

mirage/factories/user.js

@@ -5,5 +5,6 @@ export default Factory.extend({
   adminURL: "/admin",
   email: faker.internet.email,
   given_name: faker.name.firstName,
-  family_name: faker.name.lastName
+  family_name: faker.name.lastName,
+  picture: faker.internet.avatar
 });

package.json

@@ -93,10 +93,10 @@
     "liquid-fire": "0.26.4",
     "loader.js": "^4.0.10",
     "morgan": "^1.6.1",
-    "nypr-account-settings": "nypublicradio/nypr-account-settings",
     "nypr-ads": "nypublicradio/nypr-ads",
     "nypr-player": "nypublicradio/nypr-player",
     "nypr-ui": "nypublicradio/nypr-ui",
+    "nypr-account-settings": "nypublicradio/nypr-account-settings#d4a20e76df91c1150e581a16bcf47420b38d98d8",
     "torii": "0.8.1"
   },
   "ember-addon": {

tests/acceptance/login-test.js

@@ -5,11 +5,13 @@ import { Response } from 'ember-cli-mirage';
 import config from 'wnyc-web-client/config/environment';
 import { currentSession } from 'wnyc-web-client/tests/helpers/ember-simple-auth';
 import 'wnyc-web-client/tests/helpers/with-feature';
+import dummySuccessProviderFb from 'wnyc-web-client/tests/helpers/torii-dummy-success-provider-fb';
+import dummyFailureProvider from 'wnyc-web-client/tests/helpers/torii-dummy-failure-provider';
+import { registerMockOnInstance } from 'wnyc-web-client/tests/helpers/register-mock';
 
 moduleForAcceptance('Acceptance | login', {
   beforeEach() {
     server.create('stream');
-    server.create('user');
   }
 });
 
@@ -28,6 +30,7 @@ test('Log in button is visible at load', function(assert) {
 });
 
 test('Submitting valid credentials redirects to previous route', function(assert) {
+  server.create('user');
   let page = server.create('django-page', {id: '/'});
 
   andThen(() => {
@@ -73,6 +76,7 @@ test('Submitting invalid credentials shows form level error message', function(a
 });
 
 skip('Clicking logout hides privileged links', function(assert) {
+  server.create('user');
   server.create('django-page', {id: '/'});
   visit('/login');
   andThen(() => {
@@ -96,3 +100,33 @@ test('Log in with Facebook button is visible at load', function(assert) {
 
   andThen(() => assert.equal(find('button:contains(Log in with Facebook)').length, 1));
 });
+
+test('Successful facebook login redirects', function(assert) {
+  let user = server.create('user');
+  registerMockOnInstance(this.application, 'torii-provider:facebook-connect', dummySuccessProviderFb);
+  withFeature('socialAuth');
+  visit('/login');
+
+  click('button:contains(Log in with Facebook)');
+
+  andThen(() => {
+    assert.equal(currentURL(), '/');
+    assert.ok(currentSession(this.application).get('isAuthenticated'), 'Session is authenticated');
+    assert.equal(find('.user-nav-greeting').text().trim(), user.given_name);
+    assert.equal(find('.user-nav-avatar > img').attr('src'), user.picture);
+  });
+});
+
+test('Unsuccessful facebook login shows alert', function(assert) {
+  registerMockOnInstance(this.application, 'torii-provider:facebook-connect', dummyFailureProvider);
+  withFeature('socialAuth');
+  visit('/login');
+
+  click('button:contains(Log in with Facebook)');
+
+  andThen(() => {
+    assert.equal(currentURL(), '/login');
+    assert.equal(find('.alert-warning').text().trim(), "We're sorry, but we weren't able to log you in through Facebook.");
+    assert.ok(!currentSession(this.application).get('isAuthenticated'), 'Session is not authenticated');
+  });
+});