feat(auth): move to hello.js for social auth, paves the way for multiple

connectors. Prettier buttons via zocial

bower.json

@@ -41,12 +41,14 @@
     "jquery-colorbox": "~1.4.36",
     "pnotify": "~1.3.1",
     "jquery-ui": "~1.10.3",
-    "angular-facebook": "~0.2.3"
+    "hello": "~1.3.1",
+    "css-social-buttons": "https://github.com/samcollins/css-social-buttons.git"
   },
   "devDependencies": {
     "angular-mocks": "1.3.0-beta.11"
   },
   "resolutions": {
-    "angular": "1.3.0-beta.11"
+    "angular": "1.3.0-beta.11",
+    "jquery": ">=1.9.0"
   }
 }

public/js/controllers/authCtrl.js

@@ -5,8 +5,8 @@
  */
 
 angular.module('authCtrl', [])
-  .controller("AuthCtrl", ['$scope', '$rootScope', 'User', '$http', '$location', '$window','ApiUrlService', '$modal', 'Facebook',
-    function($scope, $rootScope, User, $http, $location, $window, ApiUrlService, $modal, Facebook) {
+  .controller("AuthCtrl", ['$scope', '$rootScope', 'User', '$http', '$location', '$window','ApiUrlService', '$modal',
+    function($scope, $rootScope, User, $http, $location, $window, ApiUrlService, $modal) {
 
       $scope.logout = function() {
         localStorage.clear();
@@ -112,22 +112,20 @@ angular.module('authCtrl', [])
         return selectNotificationValue(false, false, false, false, true);
       }
 
-      // ------ Facebook ----------
-      // See https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2 for boilerplate
-      $scope.fbLogin = function(){
-        var thenLogin = function(response){
-          $http.post(ApiUrlService.get() + "/api/v2/user/auth/facebook", response.authResponse)
+      // ------ Social ----------
+
+      hello.init({
+        facebook : window.env.FACEBOOK_KEY,
+      });
+
+      $scope.socialLogin = function(network){
+        hello(network).login({scope:'email'}).then(function(auth){
+          $http.post(ApiUrlService.get() + "/api/v2/user/auth/social", auth)
             .success(function(data, status, headers, config) {
               runAuth(data.id, data.token);
             }).error(errorAlert);
-        }
-        Facebook.getLoginStatus(function(response) {
-          if (response.status === 'connected') {
-            thenLogin(response);
-          } else {
-            Facebook.login(thenLogin)
-          }
-
+        }, function( e ){
+          alert("Signin error: " + e.error.message );
         });
       }
     }

public/js/static.js

@@ -1,15 +1,11 @@
 "use strict";
 
-window.habitrpgStatic = angular.module('habitrpgStatic', ['notificationServices', 'userServices', 'chieffancypants.loadingBar', 'authCtrl', 'ui.bootstrap', 'facebook'])
+window.habitrpgStatic = angular.module('habitrpgStatic', ['notificationServices', 'userServices', 'chieffancypants.loadingBar', 'authCtrl', 'ui.bootstrap'])
   .constant("API_URL", "")
   .constant("STORAGE_USER_ID", 'habitrpg-user')
   .constant("STORAGE_SETTINGS_ID", 'habit-mobile-settings')
   .constant("MOBILE_APP", false)
 
-.config(['FacebookProvider', function(FacebookProvider){
-  FacebookProvider.init(window.env.FACEBOOK_KEY);
-}])
-
 .controller("PlansCtrl", ['$rootScope',
   function($rootScope) {
     $rootScope.clickContact = function(){

public/manifest.json

@@ -21,6 +21,7 @@
             "bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js",
             "bower_components/select2/select2.js",
             "bower_components/angular-ui-select2/src/select2.js",
+            "bower_components/hello/dist/hello.all.min.js",
 
             "bower_components/angular-bootstrap/ui-bootstrap.js",
             "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
@@ -66,6 +67,7 @@
         ],
         "css": [
             "bower_components/bootstrap/dist/css/bootstrap.css",
+            "bower_components/css-social-buttons/css/zocial.css",
             "app.css",
             "bower_components/pnotify/jquery.pnotify.default.css",
             "bower_components/pnotify/jquery.pnotify.default.icons.css",
@@ -83,7 +85,7 @@
             "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
             "bower_components/bootstrap/dist/js/bootstrap.js",
             "bower_components/jquery-colorbox/jquery.colorbox-min.js",
-            "bower_components/angular-facebook/lib/angular-facebook.js",
+            "bower_components/hello/dist/hello.all.min.js",
 
             "bower_components/angular-loading-bar/build/loading-bar.js",
             "js/env.js",
@@ -95,6 +97,7 @@
         ],
         "css": [
             "bower_components/bootstrap/dist/css/bootstrap.css",
+            "bower_components/css-social-buttons/css/zocial.css",
             "bower_components/jquery-colorbox/example1/colorbox.css",
             "static.css"
         ]

src/controllers/auth.js

@@ -166,17 +166,20 @@ api.loginLocal = function(req, res, next) {
 };
 
 /*
- POST /user/auth/facebook
+ POST /user/auth/social
  */
-api.loginFacebook = function(req, res, next) {
-  var accessToken = req.body.accessToken;
+api.loginSocial = function(req, res, next) {
+  var access_token = req.body.authResponse.access_token,
+    network = req.body.network;
+  if (network!=='facebook')
+    return res.json(401, {err:"Only Facebook supported currently."});
   async.waterfall([
     function(cb){
-      // TODO is this private function here safe to use?
-      passport._strategies.facebook.userProfile(accessToken, cb);
+      passport._strategies[network].userProfile(access_token, cb);
     },
     function(profile, cb) {
-      User.findOne({'auth.facebook.id': profile.id}, {_id:1, apiToken:1, auth:1}, function(err, user){
+      var q = {};q['auth.'+network+'.id'] = profile.id;
+      User.findOne(q, {_id:1, apiToken:1, auth:1}, function(err, user){
         if (err) return cb(err);
         cb(null, {user:user, profile:profile});
       });
@@ -185,20 +188,22 @@ api.loginFacebook = function(req, res, next) {
       if (data.user) return cb(null, data.user);
       // Create new user
       var prof = data.profile;
-      var user = new User({
+      var user = {
         preferences: {
           language: req.language // User language detected from browser, not saved
         },
         auth: {
-          facebook: prof,
           timestamps: {created: +new Date(), loggedIn: +new Date()}
         }
-      });
+      };
+      user.auth[network] = prof;
+      user = new User(user);
       user.save(cb);
+
       if(isProd && prof.emails && prof.emails[0] && prof.emails[0].value){
         emailUser((prof.displayName || prof.username), prof.emails[0].value, 'welcome');
       }
-      ga.event('register', 'Facebook').send();
+      ga.event('register', network).send();
     }
   ], function(err, user){
     if (err) return res.json(401, {err: err.toString ? err.toString() : err});
@@ -207,6 +212,12 @@ api.loginFacebook = function(req, res, next) {
   })
 };
 
+/**
+ * DELETE /user/auth/social
+ * TODO implement
+ */
+api.deleteSocial = function(req,res,next){next()}
+
 api.resetPassword = function(req, res, next){
   var email = req.body.email,
     salt = utils.makeSalt(),

src/routes/auth.js

@@ -7,13 +7,13 @@ var router = new express.Router();
 auth.setupPassport(router); //FIXME make this consistent with the others
 router.post('/api/v2/register', i18n.getUserLanguage, auth.registerUser);
 router.post('/api/v2/user/auth/local', i18n.getUserLanguage, auth.loginLocal);
-router.post('/api/v2/user/auth/facebook', i18n.getUserLanguage, auth.loginFacebook);
+router.post('/api/v2/user/auth/social', i18n.getUserLanguage, auth.loginSocial);
 router.post('/api/v2/user/reset-password', i18n.getUserLanguage, auth.resetPassword);
 router.post('/api/v2/user/change-password', i18n.getUserLanguage, auth.auth, auth.changePassword);
 router.post('/api/v2/user/change-username', i18n.getUserLanguage, auth.auth, auth.changeUsername);
 
 router.post('/api/v1/register', i18n.getUserLanguage, auth.registerUser);
 router.post('/api/v1/user/auth/local', i18n.getUserLanguage, auth.loginLocal);
-router.post('/api/v1/user/auth/facebook', i18n.getUserLanguage, auth.loginFacebook);
+router.post('/api/v1/user/auth/social', i18n.getUserLanguage, auth.loginSocial);
 
 module.exports = router;

views/static/login-modal.jade

@@ -3,11 +3,15 @@ script(id='modals/login.html', type='text/ng-template')
     button.close(type='button', ng-click='$close()') ×
     h4.modal-title=env.t('loginAndReg')
   .modal-body(ng-controller='AuthCtrl')
-    a(href='#', ng-click='fbLogin()')
-      img(src='/bower_components/habitrpg-shared/img/facebook-login-register.jpeg', alt=env.t('loginFacebookAlt'))
-
-    //can we add in google auth? I like google auth
-    h3=env.t('or')
+    a.zocial.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')=env.t('loginFacebookAlt')
+    //-ul.list-inline
+      li
+        a.zocial.icon.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')
+      li
+        a.zocial.icon.googleplus(alt="Google", ng-click='socialLogin("google")') Google+
+      li
+        a.zocial.icon.twitter(alt="Twitter", ng-click='socialLogin("twitter")') Twitter
+    hr
     ul.nav.nav-tabs
       li.active
         a(data-toggle='tab',data-target='#login-tab')=env.t('login')