Fix bug 1088195 - Integrate webmaker login 3.0

bower.json

@@ -5,14 +5,12 @@
     "jquery": "1.8.3",
     "jquery-ui": "1.9.1",
     "makerstrap": "0.2.7",
-    "nav-global": "https://github.com/mozilla/nav-global/archive/v0.1.4.tar.gz",
-    "persona-btn": "0.0.12",
     "popcorn-js": "1.5.10",
     "ua-parser-js": "0.6.2",
     "webmaker-analytics": "0.1.0",
-    "webmaker-auth-client": "0.1.11",
+    "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.3.11.tar.gz",
     "webmaker-language-picker": "0.0.25",
-    "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.3.11.tar.gz"
+    "webmaker-login-ux": "1.1.2"
   },
   "resolutions": {
     "selectize": "0.10.1",

lib/default-config.js

@@ -28,7 +28,7 @@ module.exports = {
 
   "LOGIN_SERVER_URL_WITH_AUTH": "http://testuser:password@localhost:3000",
 
-  "LOGIN_SERVER_URL": "http://@localhost:3000",
+  "LOGIN_SERVER_URL": "http://localhost:3000",
 
   "AUDIENCE": "http://localhost:7777",
 

package.json

@@ -106,7 +106,7 @@
     "requirejs-middleware": "0.1.2",
     "rtltr-for-less": "0.0.7",
     "sequelize": "^1.7.8",
-    "webmaker-auth": "0.1.4",
+    "webmaker-auth": "^0.2.0",
     "webmaker-download-locales": "0.1.2",
     "webmaker-i18n": "0.3.20",
     "webmaker-locale-mapping": "0.0.5",

public/css/butter.ui.less

@@ -2,6 +2,8 @@
  * If a copy of the MIT license was not distributed with this file, you can
  * obtain one at https://raw.github.com/mozilla/butter/master/LICENSE */
 
+@import "nav-global";
+
 @import "../static/bower/makerstrap/less/makerstrap";
 @makerstrap-bower-path: "../static/bower";
 
@@ -50,3 +52,18 @@ body {
   font-size: 16px;
   line-height: normal;
 }
+
+/* Webmaker Login UX compatibility */
+.modal-backdrop {
+  z-index: 11000;
+}
+.modal {
+  z-index: 11001;
+}
+.modal * {
+  box-sizing: border-box;
+}
+.modal {
+  font-size: 14px;
+  line-height: 1.42857;
+}

public/css/globals.less

@@ -4,7 +4,7 @@
 @TRAY_SPACING: @TRAY_HEIGHT - 10;
 @TRAY_SPACING_MINIMIZED: 35px;
 @TABZILLA_HEIGHT: 210px;
-@import (less) "../static/bower/webmaker-auth-client/create-user/create-user-form.css";
+@import (less) "../static/bower/webmaker-login-ux/dist/css/webmakerLogin.css";
 
 // Z INDEXES
 @BASE_Z_INDEX: 10000;

public/css/header.less

@@ -1,9 +1,6 @@
 @language-bower-path: "../..";
 @bower-path: "../static/bower";
 @colors-path: "../../../../css";
-@import "../static/bower/persona-btn/persona-btn";
-
-@personaBtnPath: "../static/bower/persona-btn";
 @import "@{bower-path}/webmaker-language-picker/styles/languages";
 
 
@@ -149,15 +146,6 @@
       display: none;
       text-align: left;
       line-height: 40px;
-      a,
-      button {
-        color: inherit;
-        text-decoration: none;
-        padding: 0;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
       .icon-signout {
         display: none;
       }

public/css/nav-global.less

@@ -0,0 +1,108 @@
+/*********************************************************
+* Webmaker nav
+*/
+
+#webmaker-nav {
+  font-family: "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 13px;
+  width: 100%;
+  color: #373737;
+}
+
+.webmaker-nav-container {
+  overflow: hidden;
+  background: #eaeff2;
+  border-bottom: 1px solid #fff;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 15px;
+}
+
+.webmaker-nav {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  font-size: 1em;
+}
+
+.webmaker-nav li a {
+  display: block;
+  height: 100%;
+  padding: 0 10px;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  color: #373737;
+}
+
+#logo {
+  line-height: 1;
+  float: left;
+  display: block;
+}
+
+/*********************************************************
+* User/Login Styles
+*/
+
+.user-info {
+  float: right;
+  text-align: right;
+}
+
+.user-info > li {
+  float: left;
+  border-right: none;
+  height: 100%;
+  margin: 0.9em 0;
+  border-right: 1px solid #b5b7b8;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.webmaker-nav .user {
+  position: relative;
+  padding-left: 36px;
+  border-right: none;
+  img {
+    position: absolute;
+    left: 0;
+    top: -0.4em;
+    border-radius: 50%;
+    width: 26px;
+    height: 26px;
+  }
+}
+
+#identity {
+  font-weight: bold;
+  > a {
+    color: inherit;
+  }
+}
+
+/*********************************************************
+* Login button states - done via a JS class switch
+*/
+
+/* Initial we don't want anything shown */
+#webmaker-nav {
+  .user,
+  .dash,
+  .makes,
+  #webmaker-logout {
+    display: none;
+  }
+}
+
+/* We're logged in - show all the things */
+#webmaker-nav.loggedin {
+  .user,
+  .dash,
+  .makes {
+    display: block;
+  }
+}

public/src/cornfield/module.js

@@ -2,7 +2,7 @@
  * If a copy of the MIT license was not distributed with this file, you can
  * obtain one at https://raw.github.com/mozilla/butter/master/LICENSE */
 
-define( [ "util/xhr", "localized", "webmaker-auth-client" ], function( xhr, Localized, WebmakerAuth ) {
+define( [ "util/xhr", "localized" ], function( xhr, Localized ) {
 
   var Cornfield = function( butter ) {
 
@@ -31,15 +31,21 @@ define( [ "util/xhr", "localized", "webmaker-auth-client" ], function( xhr, Loca
       butter.dispatch( "logout" );
     }
 
-    webmakerAuth = new WebmakerAuth({
-      csrfToken: document.querySelector( "meta[name=csrf-token]" ).content
-    });
-
     function onReady() {
+      webmakerAuth = new window.WebmakerLogin({
+        csrfToken: document.querySelector( "meta[name=csrf-token]" ).content,
+        showCTA: false
+      });
       butter.unlisten( "ready", onReady );
       webmakerAuth.on( "login", onLogin );
       webmakerAuth.on( "logout", onLogout );
-      webmakerAuth.verify();
+      webmakerAuth.on( "verified", function(user) {
+        if ( user ) {
+          onLogin( user );
+        } else {
+          onLogout();
+        }
+      });
     }
 
     if ( butter.isReady ) {
@@ -126,8 +132,15 @@ define( [ "util/xhr", "localized", "webmaker-auth-client" ], function( xhr, Loca
       });
     }
 
-    this.login = webmakerAuth.login;
-    this.logout = webmakerAuth.logout;
+    this.create = function() {
+      webmakerAuth.create();
+    };
+    this.login = function() {
+      webmakerAuth.login();
+    };
+    this.logout = function() {
+      webmakerAuth.logout();
+    };
     this.remove = removeFunction;
     this.save = saveFunction;
     this.publish = publishFunction;

public/src/popcorn.js

@@ -50,8 +50,7 @@ requirejs.config({
     "WebmakerUI": "../static/bower/webmaker-ui/ui",
     "webmaker-ui-fragments": "../static/bower/webmaker-ui/webmaker-ui-fragments",
     "eventEmitter": "../static/bower/eventEmitter",
-    "ua-parser": "../static/bower/ua-parser-js/src/ua-parser.min",
-    "webmaker-auth-client": "../static/bower/webmaker-auth-client/dist/webmaker-auth-client.min"
+    "ua-parser": "../static/bower/ua-parser-js/src/ua-parser.min"
   },
   // shim config defines dependencies between non-AMD modules, which is all of the Popcorn code
   shim: {

public/src/ui/header.js

@@ -13,8 +13,9 @@ define([ "languages", "localized", "dialog/dialog", "util/lang", "l10n!/layouts/
         _saveButton = _saveContainer.querySelector( ".butter-save-btn" ),
         _clearEvents = _rootElement.querySelector( ".butter-clear-events-btn" ),
         _webmakerNav = _rootElement.querySelector( "#webmaker-nav" ),
-        _personaButton = _rootElement.querySelector( ".webmaker-login" ),
-        _logoutButton = _rootElement.querySelector( ".webmaker-logout" ),
+        _joinButton = _rootElement.querySelector( ".join-button" ),
+        _signinButton = _rootElement.querySelector( ".signin-button" ),
+        _logoutButton = _rootElement.querySelector( ".logout-button" ),
         _userName = _rootElement.querySelector( ".user-name-container a" ),
         _userImage = _rootElement.querySelector( ".user-image" ),
         _removeProject = _rootElement.querySelector( ".butter-remove-project-btn" ),
@@ -50,7 +51,8 @@ define([ "languages", "localized", "dialog/dialog", "util/lang", "l10n!/layouts/
 
     _this.element = _rootElement;
 
-    _personaButton.addEventListener( "click", butter.cornfield.login );
+    _joinButton.addEventListener( "click", butter.cornfield.create );
+    _signinButton.addEventListener( "click", butter.cornfield.login );
     _logoutButton.addEventListener( "click", butter.cornfield.logout );
 
     // Display the img after the src has loaded.
@@ -243,8 +245,9 @@ define([ "languages", "localized", "dialog/dialog", "util/lang", "l10n!/layouts/
         togglePreviewButton( isSaved );
         toggleSaveButton( !isSaved && butter.cornfield.authenticated() );
         toggleDeleteProject( isSaved && butter.cornfield.authenticated() );
-        _logoutButton.classList.remove( "butter-hidden" );
-        _personaButton.classList.add( "butter-hidden" );
+        _joinButton.classList.add( "hidden" );
+        _signinButton.classList.add( "hidden" );
+        _logoutButton.classList.remove( "hidden" );
         _webmakerNav.classList.add( "loggedin" );
         _userName.textContent = butter.cornfield.username();
         _userImage.addEventListener( "load", userImageLoaded );
@@ -254,8 +257,9 @@ define([ "languages", "localized", "dialog/dialog", "util/lang", "l10n!/layouts/
         togglePreviewButton( false );
         toggleSaveButton( false );
         toggleTooltips( false );
-        _personaButton.classList.remove( "butter-hidden" );
-        _logoutButton.classList.add( "butter-hidden" );
+        _joinButton.classList.remove( "hidden" );
+        _signinButton.classList.remove( "hidden" );
+        _logoutButton.classList.add( "hidden" );
         _webmakerNav.classList.remove( "loggedin" );
         _userName.textContent = "";
         _userImage.removeEventListener( "load", userImageLoaded, false );

public/templates/basic/style.less

@@ -1,5 +1,4 @@
 @import "../../css/globals.less";
-@import (less) "../../static/bower/nav-global/nav.css";
 
 /* ===== Primary Styles ========================================================
    Author: @k88hudson

server.js

@@ -45,15 +45,15 @@ app.disable( "x-powered-by" );
 
 var webmakerAuth = new WebmakerAuth({
   loginURL: config.LOGIN_SERVER_URL,
-  authLoginUrl: config.LOGIN_SERVER_URL_WITH_AUTH,
+  loginHost: config.APP_HOSTNAME,
+  authLoginURL: config.LOGIN_SERVER_URL_WITH_AUTH,
   secretKey: config.SECRET,
   forceSSL: config.FORCE_SSL,
   domain: config.COOKIE_DOMAIN
 });
 
 app.configure( function() {
-  var tmpDir = path.normalize( require( "os" ).tmpDir() + "/mozilla.butter/" ),
-      authLocaleJSON;
+  var tmpDir = path.normalize( require( "os" ).tmpDir() + "/mozilla.butter/" );
 
   if ( config.ENABLE_GELF_LOGS ) {
     messina = require( "messina" );
@@ -143,16 +143,6 @@ app.configure( function() {
       translation_directory: path.resolve( __dirname, "locale" )
     }));
 
-    // Adding an external JSON file to our existing one for the specified locale
-    authLocaleJSON = require( "./public/static/bower/webmaker-auth-client/locale/en_US/create-user-form.json" );
-    i18n.addLocaleObject({
-      "en-US": authLocaleJSON
-    }, function (err) {
-      if (err) {
-        console.error(err);
-      }
-    });
-
     app.locals({
       config: {
         app_hostname: APP_HOSTNAME,
@@ -232,11 +222,17 @@ app.post( "/api/publish/:myproject",
   routes.make.publish
 );
 
-app.post( "/verify", webmakerAuth.handlers.verify );
 app.post( "/authenticate", webmakerAuth.handlers.authenticate );
-app.post( "/create", webmakerAuth.handlers.create );
 app.post( "/logout", webmakerAuth.handlers.logout );
-app.post( "/check-username", webmakerAuth.handlers.exists );
+app.post( "/verify", webmakerAuth.handlers.verify );
+
+app.post( "/auth/v2/create", webmakerAuth.handlers.createUser );
+app.post( "/auth/v2/uid-exists", webmakerAuth.handlers.uidExists );
+app.post( "/auth/v2/request", webmakerAuth.handlers.request );
+app.post( "/auth/v2/authenticateToken", webmakerAuth.handlers.authenticateToken );
+app.post( "/auth/v2/verify-password", webmakerAuth.handlers.verifyPassword );
+app.post( "/auth/v2/request-reset-code", webmakerAuth.handlers.requestResetCode );
+app.post( "/auth/v2/reset-password", webmakerAuth.handlers.resetPassword );
 
 app.get( "/", routes.pages.editor );
 app.get( "/index.html", routes.pages.editor );

views/editor.html

@@ -42,7 +42,6 @@
 </head>
 <body>
 
-  {% include "/static/bower/webmaker-auth-client/create-user/create-user-form.html" %}
   <div class="body-wrapper">
     <div class="stage-wrapper">
       <div id="embed-wrapper" class="wrapper cf faded embed">
@@ -60,6 +59,7 @@
     <script src="/src/editor/disableWebRTC.js"></script>
     <script src="{{ togetherjs }}/togetherjs-min.js"></script>
   {% endif %}
+  <script src="/static/bower/webmaker-login-ux/dist/min/webmakerLogin.min.js"></script>
   <script src="/src/butter.js"></script>
   <script src="/templates/basic/template.js"></script>
 </body>