implement new webmaker login

Gruntfile.coffee

@@ -16,6 +16,8 @@ module.exports = (grunt) ->
     'app/_bower_components/locompleter/locompleter.js'
     'app/_bower_components/webmaker-analytics/analytics.js'
     'app/_bower_components/spiiin/src/spiiin.js'
+    'app/_bower_components/webmaker-login-ux/dist/ngWebmakerLogin.js'
+    'app/_bower_components/webmaker-login-ux/dist/templates/ngWebmakerLogin.templates.js'
     'app/_js/app.js'
     'app/_js/services.js'
     'app/_js/controllers.js'

app/_js/app.js

@@ -4,6 +4,7 @@ angular.module('wmProfile', [
   'ui.bootstrap',
   'wmProfile.filters',
   'wmProfile.services',
+  'ngWebmakerLogin',
   'localization',
   'wmProfile.directives',
   'wmProfile.controllers',
@@ -14,9 +15,9 @@ angular.module('wmProfile', [
 config(['$routeProvider', '$locationProvider',
   function ($routeProvider, $locationProvider) {
     $routeProvider.when('/:locale?/user/:username/badges', {
-        templateUrl: '/user/_partials/badges.html',
-        controller: 'badges'
-      })
+      templateUrl: '/user/_partials/badges.html',
+      controller: 'badges'
+    })
       .when('/:locale?/user/:username/badges', {
         templateUrl: '/user/_partials/badges.html',
         controller: 'badges'
@@ -58,10 +59,10 @@ run(['$rootScope', '$http', 'jQuery',
     };
 
     $.ajax({
-        async: false,
-        url: '/user/_service/env.json',
-        dataType: 'json'
-      })
+      async: false,
+      url: '/user/_service/env.json',
+      dataType: 'json'
+    })
       .done(function (config) {
         $rootScope.WMP.config = config;
         // Set locale information

app/_js/controllers.js

@@ -99,71 +99,4 @@ angular.module('wmProfile.controllers', [])
         return curYear !== prevYear;
       };
     }
-  ])
-  .controller('createUserController', ['$scope', '$http', '$modal', 'loginService',
-    function ($scope, $http, $modal, loginService) {
-
-      loginService.auth.on('newuser', function (assertion) {
-        $modal.open({
-          templateUrl: '/user/_partials/create-user-form.html',
-          controller: createUserCtrl,
-          resolve: {
-            assertion: function () {
-              return assertion;
-            }
-          }
-        });
-      });
-
-      var createUserCtrl = function ($scope, $modalInstance, loginService, assertion) {
-
-        $scope.form = {};
-        $scope.user = {};
-
-        // TODO: Finish localization and remove hard coded variables.
-        $scope.supported_languages = 'en-US';
-        $scope.currentLang = 'en-US';
-        $scope.langmap = {
-          'en-US': {
-            'nativeName': 'English (United States)',
-            'englishName': 'English (United States)'
-          }
-        };
-
-        $scope.checkUsername = function () {
-          if (!$scope.form.user.username) {
-            return;
-          }
-          $http
-            .post(loginService.auth.urls.checkUsername, {
-              username: $scope.form.user.username.$viewValue
-            })
-            .success(function (username) {
-              $scope.form.user.username.$setValidity('taken', !username.exists);
-            })
-            .error(function (err) {
-              console.log(err);
-              $scope.form.user.username.$setValidity('taken', true);
-            });
-        };
-
-        $scope.createUser = function () {
-          $scope.submit = true;
-          if ($scope.form.user.$valid && $scope.form.agree) {
-            loginService.auth.createUser({
-              assertion: assertion,
-              user: $scope.user
-            });
-            $modalInstance.close();
-          }
-        };
-
-        $scope.cancel = function () {
-          loginService.auth.analytics.webmakerNewUserCancelled();
-          $modalInstance.dismiss('cancel');
-        };
-      };
-
-      loginService.auth.verify();
-    }
   ]);

app/_js/directives.js

@@ -12,59 +12,57 @@ angular.module('wmProfile.directives', [])
       }
     };
   })
-  .directive('wmpSrc', ['jQuery', function (jQuery) {
-    // Add wmp-src to an img to only give it a src if the target is loadable
-    // This prevents broken images from displaying and creates hooks for other display logic
-    return {
-      restrict: 'A',
-      scope: {
-        url: '@wmpSrc',
-        didFail: '=wmpSrcFailed'
-      },
-      link: function ($scope, el, attrs) {
-        var elLoader = jQuery('<img>');
-        el.fadeTo(0, 0);
-
-        elLoader.on('load', function () {
-          el.attr('src', $scope.url).fadeTo(200, 1);
-          $scope.didFail = false;
-          $scope.$apply();
-        });
+  .directive('wmpSrc', ['jQuery',
+    function (jQuery) {
+      // Add wmp-src to an img to only give it a src if the target is loadable
+      // This prevents broken images from displaying and creates hooks for other display logic
+      return {
+        restrict: 'A',
+        scope: {
+          url: '@wmpSrc',
+          didFail: '=wmpSrcFailed'
+        },
+        link: function ($scope, el, attrs) {
+          var elLoader = jQuery('<img>');
+          el.fadeTo(0, 0);
 
-        elLoader.on('error', function () {
-          $scope.didFail = true;
-          $scope.$apply();
-        });
+          elLoader.on('load', function () {
+            el.attr('src', $scope.url).fadeTo(200, 1);
+            $scope.didFail = false;
+            $scope.$apply();
+          });
 
-        // Attempt to load target image in a non attached IMG element
-        elLoader.attr('src', $scope.url);
-      }
-    };
-  }])
-  .directive('wmpLogin', ['WebmakerAuthClient', 'loginService',
-    function (WebmakerAuthClient, loginService) {
+          elLoader.on('error', function () {
+            $scope.didFail = true;
+            $scope.$apply();
+          });
+
+          // Attempt to load target image in a non attached IMG element
+          elLoader.attr('src', $scope.url);
+        }
+      };
+    }
+  ])
+  .directive('wmpLogin', ['$rootScope',
+    function ($rootScope) {
       return {
         restrict: 'E',
         scope: false,
         templateUrl: '/user/_partials/login.html',
         link: function ($scope, el, attrs) {
-          $scope.userInfo = loginService.getData();
-          $scope.userLoggedIn = !!$scope.userInfo; // No user info means not logged in
+          $scope.userInfo = undefined;
+          $scope.userLoggedIn = false; // No user info means not logged in
 
-          $scope.$on('userLoggedIn', function (event, data) {
+          $rootScope.$on('signedIn', function (user) {
             $scope.userLoggedIn = true;
-            $scope.userInfo = data;
+            $scope.userInfo = user;
             $scope.$digest();
           });
 
-          $scope.$on('userLoggedOut', function (event, data) {
+          $rootScope.$on('loggedOut', function (user) {
             $scope.userLoggedIn = false;
             $scope.userInfo = undefined;
-            $scope.$digest();
           });
-
-          $scope.login = loginService.auth.login;
-          $scope.logout = loginService.auth.logout;
         }
       };
     }

app/_less/components/imports.less

@@ -12,3 +12,6 @@
 
 // Selectize for create user form.
 @import "../_bower_components/selectize/dist/less/selectize";
+
+// Webmaker Login
+@import "../_bower_components/webmaker-login-ux/dist/css/webmakerLogin.css";

app/_partials/login.html

@@ -1,25 +1,25 @@
 <ul class="nav navbar-nav navbar-right">
-  <li class="dropdown" ng-class="{open: ddOpen}" ng-cloak ng-show="userInfo.email">
+  <li class="dropdown" ng-class="{open: ddOpen}" ng-cloak ng-show="_user.email">
     <button class="navbar-user-info dropdown-toggle no-style" ng-click="ddOpen = !ddOpen">
       <span class="sr-only">{{ 'userlinks' | i18n }}</span>
-      <img class="user-info-avatar" ng-src="{{ userInfo.avatar }}">
+      <img class="user-info-avatar" ng-src="{{ _user.avatar }}">
       <span>{{ 'Hi' | i18n }}, </span>
-      <strong>{{ userInfo.username }}</strong> <span class="label label-primary" ng-show="userInfo.isAdmin">{{ 'admin' | i18n }}</span>  <span class="caret"></span>
+      <strong>{{ _user.username }}</strong> <span class="label label-primary" ng-show="_user.isAdmin">{{ 'admin' | i18n }}</span>  <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
       <li>
-        <a href="/user/{{ userInfo.username }}" target="_self"><span class="fa fa-user"></span> {{ 'myprofile' | i18n }}</a>
+        <a href="/user/{{ _user.username }}" target="_self"><span class="fa fa-user"></span> {{ 'myprofile' | i18n }}</a>
       </li>
       <li>
         <a href="{{ WMP.config.accountSettingsURL }}" target="_blank"><span class="fa fa-cog"></span> {{ 'Settings' | i18n }}</a>
       </li>
       <li class="divider"></li>
       <li>
-        <a href="#" ng-click="logout(); ddOpen = false;"><span class="fa fa-sign-out"></span> {{ 'logout' | i18n }}</a>
+        <a wm-logout href="#" ng-click="ddOpen = false;"><span class="fa fa-sign-out"></span> {{ 'logout' | i18n }}</a>
       </li>
     </ul>
   </li>
   <li>
-    <button ng-cloak ng-show="!userInfo.email" class="btn btn-primary btn-sm navbar-btn" ng-click="login()">{{ 'login' | i18n }}</button>
+    <button wm-signin ng-cloak ng-show="!_user.email" class="btn btn-primary btn-sm navbar-btn">{{ 'login' | i18n }}</button>
   </li>
 </ul>

app/index.template

@@ -27,14 +27,13 @@
 </head>
 
 <body ng-cloak>
-  <div ng-controller="createUserController"></div>
 
   <div class="alert alert-info top-banner" ng-hide="userLoggedIn">
     <div class="container">
       <strong>
         Want your own Webmaker profile? <span ng-if="userExists === false && WMP.username">{{ WMP.username }} is available!</span>
       </strong>
-      <button class="btn btn-sm btn-info" ng-click="login()">Sign up today!</button>
+      <button wm-join-webmaker wm-password-reset showcta="false" class="btn btn-sm btn-info">Sign up today!</button>
     </div>
   </div>
 

bower.json

@@ -20,7 +20,7 @@
     "selectize": "0.9.0",
     "makeapi-client": "https://github.com/mozilla/makeapi-client.git#v0.5.24",
     "makerstrap": "0.1.3",
-    "webmaker-auth-client": "0.1.11",
+    "webmaker-login-ux": "1.0.1",
     "ngInfiniteScroll": "1.1.2",
     "spiiin": "0.2.0"
   }

env.cson.example

@@ -11,6 +11,7 @@
   # URL for Login
   loginUrl: 'http://localhost:3000'
   loginUrlWithAuth: 'http://testuser:password@localhost:3000'
+  loginEmailUrl: 'http://localhost:1969'
 
   # Login secret key
   sessionSecret: 'dummy secret value'

package.json

@@ -22,7 +22,7 @@
     "morgan": "1.0.1",
     "newrelic": "1.5.5",
     "optimist": "0.6.1",
-    "webmaker-auth": "0.1.4",
+    "webmaker-auth": "0.2.1",
     "webmaker-i18n": "0.3.22",
     "webmaker-locale-mapping": "0.0.5",
     "webmaker-translation-stats": "0.0.1",

server/routes/index.js

@@ -135,11 +135,19 @@ module.exports = function (config, webmakerAuth, liveReloadRelativePath) {
     });
   });
 
-  router.post('/user/_service/login/verify', webmakerAuth.handlers.verify);
-  router.post('/user/_service/login/authenticate', webmakerAuth.handlers.authenticate);
-  router.post('/user/_service/login/create', webmakerAuth.handlers.create);
-  router.post('/user/_service/login/logout', webmakerAuth.handlers.logout);
-  router.post('/user/_service/login/check-username', webmakerAuth.handlers.exists);
+  router.post('/verify', webmakerAuth.handlers.verify);
+  router.post('/authenticate', webmakerAuth.handlers.authenticate);
+  router.post('/create', webmakerAuth.handlers.create);
+  router.post('/logout', webmakerAuth.handlers.logout);
+  router.post('/check-username', webmakerAuth.handlers.exists);
+
+  router.post('/auth/v2/create', webmakerAuth.handlers.createUser);
+  router.post('/auth/v2/uid-exists', webmakerAuth.handlers.uidExists);
+  router.post('/auth/v2/request', webmakerAuth.handlers.request);
+  router.post('/auth/v2/authenticateToken', webmakerAuth.handlers.authenticateToken);
+  router.post('/auth/v2/verify-password', webmakerAuth.handlers.verifyPassword);
+  router.post('/auth/v2/request-reset-code', webmakerAuth.handlers.requestResetCode);
+  router.post('/auth/v2/reset-password', webmakerAuth.handlers.resetPassword);
 
   return router;
 };

server/server.js

@@ -15,6 +15,7 @@ module.exports = function (config) {
     // required
     loginURL: config.loginUrl,
     secretKey: config.sessionSecret,
+    loginHost: config.loginEmailUrl,
 
     // optional
     authLoginURL: config.loginUrlWithAuth,
@@ -54,6 +55,16 @@ module.exports = function (config) {
     translation_directory: path.resolve(__dirname, '../locale')
   }));
 
+  var webmakerLoginJSON = require('../app/_bower_components/webmaker-login-ux/locale/en_US/webmaker-login.json');
+
+  i18n.addLocaleObject({
+    'en-US': webmakerLoginJSON
+  }, function (err, res) {
+    if (err) {
+      console.error(err);
+    }
+  });
+
   app.use(routes);
   app.use(middleware.errorHandler);
   app.use('/user', express.static(lrAbsolutePath || __dirname + '/../app'));