From 1c9d4a7492f5850c2eb0c4d2b58dbad9ee10effb Mon Sep 17 00:00:00 2001
From: Avital Oliver <avital@thewe.net>
Date: Thu, 4 Oct 2012 23:19:20 -0700
Subject: [PATCH] accounts-ui: support changing password, and some misc reorg

- If you're using accounts-password, or you are using more than one oauth provider,
  show a dropdown instead of the logout button. (This means that loginButtons either always
  shows a dropdown or never)
- If you have a username or email set, show "Change password" and "Logout" in the dropdown.
- If you don't have a username or email set, just show "Logout"

While at it, refactored some code I touched.
---
 .../accounts-password/passwords_common.js     |   2 +-
 .../accounts-ui-unstyled/login_buttons.html   |  69 +++-
 .../accounts-ui-unstyled/login_buttons.js     | 299 ++++++++++++------
 .../login_buttons_images.css                  |   8 +-
 packages/accounts-ui/login_buttons.less       |   9 +-
 5 files changed, 271 insertions(+), 116 deletions(-)

diff --git a/packages/accounts-password/passwords_common.js b/packages/accounts-password/passwords_common.js
index 69ae38975d..7ad0470e16 100644
--- a/packages/accounts-password/passwords_common.js
+++ b/packages/accounts-password/passwords_common.js
@@ -1 +1 @@
-Accounts.passwords = {};
+Accounts.password = {};
diff --git a/packages/accounts-ui-unstyled/login_buttons.html b/packages/accounts-ui-unstyled/login_buttons.html
index 5538f45028..82f58fbdcd 100644
--- a/packages/accounts-ui-unstyled/login_buttons.html
+++ b/packages/accounts-ui-unstyled/login_buttons.html
@@ -1,14 +1,11 @@
 <template name="loginButtons">
   <div id="login-buttons">
     {{#if currentUser}}
-      <div class="login-header">
-        {{#if currentUser.loading}}
-        <div class="loading"></div>
-        {{else}}
-        {{displayName}}
-        {{/if}}
-      </div>
-      <div class="login-button" id="login-buttons-logout">Logout</div>
+      {{#if dropdown}}
+        {{> loginButtonsLoggedInDropdown}}
+      {{else}}
+        {{> loginButtonsLoggedInRow}}
+      {{/if}}
     {{else}}
       {{#if services}}
         {{#if configurationLoaded}}
@@ -25,6 +22,44 @@
   </div>
 </template>
 
+<template name="loginButtonsLoggedInDropdown">
+  <div class="login-link-and-dropdown-list">
+    {{#if currentUser.loading}}
+    <div class="loading"></div>
+    {{else}}
+    <a class="login-link-text" id="login-name-link">
+      {{displayName}} ▾
+    </a>
+    {{#if dropdownVisible}}
+    <div id="login-dropdown-list" class="accounts-dialog">
+      <a class="login-close-text">Close</a>
+      <div class="login-close-text-clear"></div>
+
+      {{#if inChangePasswordFlow}}
+      {{> loginButtonsChangePassword}}
+      {{else}}
+      {{#if allowChangingPassword}}
+      <div class="login-button" id="login-buttons-open-change-password">Change password</div>
+      {{/if}}
+      <div class="login-button" id="login-buttons-logout">Logout</div>
+      {{/if}}
+    </div>
+    {{/if}}
+    {{/if}}
+  </div>
+</template>
+
+<template name="loginButtonsLoggedInRow">
+  <div class="login-header">
+    {{#if currentUser.loading}}
+    <div class="loading"></div>
+    {{else}}
+    {{displayName}}
+    {{/if}}
+  </div>
+  <div class="login-button" id="login-buttons-logout">Logout</div>
+</template>
+
 <template name="loginButtonsServicesRow">
   {{#each services}}
     {{#if isPasswordService}}
@@ -70,12 +105,12 @@
       {{#if configured}}
         <div class="login-button" id="login-buttons-{{name}}">
           <div class="login-image" id="login-buttons-image-{{name}}"></div>
-          Sign in with {{name}}
+          Sign in with {{capitalizedName}}
         </div>
       {{else}}
         <div class="login-button configure-button" id="login-buttons-{{name}}">
           <div class="login-image" id="login-buttons-image-{{name}}"></div>
-          Configure {{name}} Login
+          Configure {{capitalizedName}} Login
         </div>
       {{/if}}
     {{/if}}
@@ -100,7 +135,7 @@
 
 <template name="loginButtonsServicesDropdown">
   <div class="login-link-and-dropdown-list">
-    <a class="login-link-text">Sign in</a>
+    <a class="login-link-text" id="login-sign-in-link">Sign in ▾</a>
     {{#if dropdownVisible}}
     <div id="login-dropdown-list" class="accounts-dialog">
       <a class="login-close-text">Close</a>
@@ -124,6 +159,18 @@
   </div>
 </template>
 
+<template name="loginButtonsChangePassword">
+  {{#each fields}}
+  {{> loginButtonsFormField}}
+  {{/each}}
+
+  {{> loginButtonsMessages}}
+
+  <div class="login-button login-button-form-submit" id="login-buttons-do-change-password">
+    Change password
+  </div>
+</template>
+
 <template name="resetPasswordForm">
   {{#if inResetPasswordFlow}}
   <div class="hide-background"></div>
diff --git a/packages/accounts-ui-unstyled/login_buttons.js b/packages/accounts-ui-unstyled/login_buttons.js
index a6204fe778..bb788a01e0 100644
--- a/packages/accounts-ui-unstyled/login_buttons.js
+++ b/packages/accounts-ui-unstyled/login_buttons.js
@@ -4,8 +4,12 @@
   //
 
   var DROPDOWN_VISIBLE_KEY = 'Meteor.loginButtons.dropdownVisible';
+
+  // XXX consider replacing these with one key that has an enum for values.
   var IN_SIGNUP_FLOW_KEY = 'Meteor.loginButtons.inSignupFlow';
   var IN_FORGOT_PASSWORD_FLOW_KEY = 'Meteor.loginButtons.inForgotPasswordFlow';
+  var IN_CHANGE_PASSWORD_FLOW_KEY = 'Meteor.loginButtons.inChangePasswordFlow';
+
   var ERROR_MESSAGE_KEY = 'Meteor.loginButtons.errorMessage';
   var INFO_MESSAGE_KEY = 'Meteor.loginButtons.infoMessage';
   var RESET_PASSWORD_TOKEN_KEY = 'Meteor.loginButtons.resetPasswordToken';
@@ -19,6 +23,7 @@
   var resetSession = function () {
     Session.set(IN_SIGNUP_FLOW_KEY, false);
     Session.set(IN_FORGOT_PASSWORD_FLOW_KEY, false);
+    Session.set(IN_CHANGE_PASSWORD_FLOW_KEY, false);
     Session.set(DROPDOWN_VISIBLE_KEY, false);
     resetMessages();
   };
@@ -40,71 +45,67 @@
   };
 
   Template.loginButtons.events = {
-    'click #login-buttons-Facebook': function () {
+    'click #login-buttons-facebook': function () {
       resetMessages();
-      Meteor.loginWithFacebook(function (e) {
-        if (!e || e instanceof Accounts.LoginCancelledError) {
-          // do nothing
-        } else if (e instanceof Accounts.ConfigError) {
-          configureService("Facebook"); // XXX refactor "Facebook" -> "facebook"
-        } else {
-          Session.set(ERROR_MESSAGE_KEY, e.reason || "Unknown error");
-        }
-      });
+      Meteor.loginWithFacebook(makeLoginCallback('facebook'));
     },
 
-    'click #login-buttons-Google': function () {
+    'click #login-buttons-google': function () {
       resetMessages();
-      Meteor.loginWithGoogle(function (e) {
-        if (!e || e instanceof Accounts.LoginCancelledError) {
-          // do nothing
-        } else if (e instanceof Accounts.ConfigError) {
-          configureService("Google");
-        } else {
-          Session.set(ERROR_MESSAGE_KEY, e.reason || "Unknown error");
-        }
-      });
+      Meteor.loginWithGoogle(makeLoginCallback('google'));
     },
 
-    'click #login-buttons-Weibo': function () {
+    'click #login-buttons-weibo': function () {
       resetMessages();
-      Meteor.loginWithWeibo(function (e) {
-        if (!e || e instanceof Accounts.LoginCancelledError) {
-          // do nothing
-        } else if (e instanceof Accounts.ConfigError) {
-          configureService("Weibo");
-        } else {
-          Session.set(ERROR_MESSAGE_KEY, e.reason || "Unknown error");
-        }
-      });
+      Meteor.loginWithWeibo(makeLoginCallback('weibo'));
     },
 
-    'click #login-buttons-Twitter': function () {
+    'click #login-buttons-twitter': function () {
       resetMessages();
-      Meteor.loginWithTwitter(function (e) {
-        if (!e || e instanceof Accounts.LoginCancelledError) {
-          // do nothing
-        } else if (e instanceof Accounts.ConfigError) {
-          configureService("Twitter");
-        } else {
-          Session.set(ERROR_MESSAGE_KEY, e.reason || "Unknown error");
-        }
-      });
+      Meteor.loginWithTwitter(makeLoginCallback('twitter'));
+    },
+
+    'click #login-name-link': function () {
+      Session.set(DROPDOWN_VISIBLE_KEY, true);
+      Meteor.flush();
+      correctDropdownZIndexes();
+    },
+
+    'click .login-close-text': function () {
+      resetSession();
+    },
+
+    'click #login-buttons-open-change-password': function() {
+      resetMessages();
+      Session.set(IN_CHANGE_PASSWORD_FLOW_KEY, true);
     },
 
     'click #login-buttons-logout': function() {
-      Meteor.logout();
-      resetSession();
+      Meteor.logout(resetSession);
     }
   };
 
+  var makeLoginCallback = function(service) {
+    return function (e) {
+      if (!e) {
+        resetSession();
+      } else if (e instanceof Accounts.LoginCancelledError) {
+        // do nothing
+      } else if (e instanceof Accounts.ConfigError) {
+        configureService(service);
+      } else {
+        Session.set(ERROR_MESSAGE_KEY, e.reason || "Unknown error");
+      }
+    };
+  };
+
   // decide whether we should show a dropdown rather than a row of
   // buttons
   Template.loginButtons.dropdown = function () {
     var services = getLoginServices();
 
     var hasPasswordService = _.any(services, function (service) {
-      return service.name === 'Password';
+      return service.name === 'password';
     });
 
     return hasPasswordService || services.length > 1;
@@ -118,19 +119,39 @@
     return Accounts.loginServicesConfigured();
   };
 
-  Template.loginButtons.displayName = function () {
+
+  //
+  // loginButtonsLoggedInRow template
+  //
+  Template.loginButtonsLoggedInRow.displayName = function () {
+    return displayName();
+  };
+
+
+  //
+  // loginButtonsLoggedInDropdown template
+  //
+
+  Template.loginButtonsLoggedInDropdown.displayName = function () {
+    return displayName();
+  };
+
+  Template.loginButtonsLoggedInDropdown.inChangePasswordFlow = function () {
+    return Session.get(IN_CHANGE_PASSWORD_FLOW_KEY);
+  };
+
+  Template.loginButtonsLoggedInDropdown.dropdownVisible = function () {
+    return Session.get(DROPDOWN_VISIBLE_KEY);
+  };
+
+  Template.loginButtonsLoggedInDropdown.allowChangingPassword = function () {
+    // it would be more correct to check whether the user has a password set,
+    // but in order to do that we'd have to send more data down to the client,
+    // and it'd be preferable not to send down the entire service.password document.
+    //
+    // instead we use the heuristic: if the user has a username or email set.
     var user = Meteor.user();
-    if (!user)
-      return '';
-
-    if (user.profile && user.profile.name)
-      return user.profile.name;
-    if (user.username)
-      return user.username;
-    if (user.emails && user.emails[0] && user.emails[0].address)
-      return user.emails[0].address;
-
-    return '';
+    return user.username || (user.emails && user.emails[0] && user.emails[0].address);
   };
 
 
@@ -262,7 +283,7 @@
   };
 
   Template.loginButtonsServicesRow.isPasswordService = function () {
-    return this.name === 'Password';
+    return this.name === 'password';
   };
 
   Template.loginButtonsServicesRow.hasOtherServices = function () {
@@ -290,6 +311,10 @@
     return !!Accounts.configuration.findOne({service: this.name.toLowerCase()});
   };
 
+  Template.loginButtonsServicesRow.capitalizedName = function () {
+    return capitalize(this.name);
+  };
+
 
   //
   // loginButtonsMessage template
@@ -339,23 +364,10 @@
   //
 
   Template.loginButtonsServicesDropdown.events = {
-    'click .login-link-text': function () {
+    'click #login-sign-in-link': function () {
       Session.set(DROPDOWN_VISIBLE_KEY, true);
-      // IE <= 7 has a z-index bug that means we can't just give the
-      // dropdown a z-index and expect it to stack above the rest of
-      // the page even if nothing else has a z-index.  The nature of
-      // the bug is that all positioned elements are considered to
-      // have z-index:0 (not auto) and therefore start new stacking
-      // contexts, with ties broken by page order.
-      //
-      // The fix, then is to give z-index:1 to all ancestors
-      // of the dropdown having z-index:0.
       Meteor.flush();
-      for(var n = document.getElementById('login-dropdown-list').parentNode;
-          n.nodeName !== 'BODY';
-          n = n.parentNode)
-        if (n.style.zIndex === 0)
-          n.style.zIndex = 1;
+      correctDropdownZIndexes();
     },
     'click .login-close-text': function () {
       resetSession();
@@ -486,6 +498,40 @@
     }
   });
 
+  //
+  // loginButtonsChangePassword template
+  //
+
+  Template.loginButtonsChangePassword.events({
+    'keypress #login-old-password, keypress #login-password, keypress #login-password-again': function (event) {
+      if (event.keyCode === 13)
+        changePassword();
+    },
+    'click #login-buttons-do-change-password': function () {
+      changePassword();
+    }
+  });
+
+  Template.loginButtonsChangePassword.fields = function () {
+    return [
+      {fieldName: 'old-password', fieldLabel: 'Current Password', inputType: 'password',
+       visible: function () {
+         return true;
+       }},
+      {fieldName: 'password', fieldLabel: 'New Password', inputType: 'password',
+       visible: function () {
+         return true;
+       }},
+      {fieldName: 'password-again', fieldLabel: 'New Password (again)',
+       inputType: 'password',
+       visible: function () {
+         return Meteor.accounts._options.requireUsername
+           && !Meteor.accounts._options.requireEmail;
+       }}
+    ];
+  };
+
+
   //
   // configureLoginServicesDialog template
   //
@@ -497,7 +543,7 @@
     'click #configure-login-services-dialog-save-configuration': function () {
       if (Session.get(CONFIGURE_LOGIN_SERVICES_DIALOG_SAVE_ENABLED)) {
         // Prepare the configuration document for this login service
-        var serviceName = Session.get(CONFIGURE_LOGIN_SERVICES_DIALOG_SERVICE_NAME).toLowerCase();
+        var serviceName = Session.get(CONFIGURE_LOGIN_SERVICES_DIALOG_SERVICE_NAME);
         var configuration = {
           service: serviceName
         };
@@ -548,7 +594,7 @@
   // template should be defined in the service's package
   var configureLoginServicesDialogTemplateForService = function () {
     var serviceName = Session.get(CONFIGURE_LOGIN_SERVICES_DIALOG_SERVICE_NAME);
-    return Template['configureLoginServicesDialogFor' + serviceName];
+    return Template['configureLoginServicesDialogFor' + capitalize(serviceName)];
   };
 
   var configurationFields = function () {
@@ -577,6 +623,21 @@
   // helpers
   //
 
+  var displayName = function () {
+    var user = Meteor.user();
+    if (!user)
+      return '';
+
+    if (user.profile && user.profile.name)
+      return user.profile.name;
+    if (user.username)
+      return user.username;
+    if (user.emails && user.emails[0] && user.emails[0].address)
+      return user.emails[0].address;
+
+    return '';
+  };
+
   var elementValueById = function(id) {
     var element = document.getElementById(id);
     if (!element)
@@ -606,6 +667,8 @@
     Meteor.loginWithPassword(loginSelector, password, function (error, result) {
       if (error) {
         Session.set(ERROR_MESSAGE_KEY, error.reason || "Unknown error");
+      } else {
+        resetSession();
       }
     });
   };
@@ -637,13 +700,8 @@
     else
       options.password = password;
 
-    var passwordAgain = elementValueById('login-password-again');
-    if (passwordAgain !== null) {
-      if (password !== passwordAgain) {
-        Session.set(ERROR_MESSAGE_KEY, "Passwords don't match");
-        return;
-      }
-    }
+    if (!matchPasswordAgainIfPresent())
+      return;
 
     if (Accounts._options.validateEmails)
       options.validation = true;
@@ -651,6 +709,8 @@
     Accounts.createUser(options, function (error) {
       if (error) {
         Session.set(ERROR_MESSAGE_KEY, error.reason || "Unknown error");
+      } else {
+        resetSession();
       }
     });
   };
@@ -662,23 +722,66 @@
       login();
   };
 
+  var changePassword = function () {
+    resetMessages();
+
+    var oldPassword = elementValueById('login-old-password');
+
+    var password = elementValueById('login-password');
+    if (!validatePassword(password))
+      return;
+
+    if (!matchPasswordAgainIfPresent())
+      return;
+
+    Accounts.changePassword(oldPassword, password, function (error) {
+      if (error) {
+        Session.set(ERROR_MESSAGE_KEY, error.reason || "Unknown error");
+      } else {
+        Session.set(INFO_MESSAGE_KEY, "Password changed");
+      }
+    });
+  };
+
+  var matchPasswordAgainIfPresent = function () {
+    var passwordAgain = elementValueById('login-password-again');
+    if (passwordAgain !== null) {
+      var password = elementValueById('login-password');
+      if (password !== passwordAgain) {
+        Session.set(ERROR_MESSAGE_KEY, "Passwords don't match");
+        return false;
+      }
+    }
+    return true;
+  };
+
+  var correctDropdownZIndexes = function () {
+    // IE <= 7 has a z-index bug that means we can't just give the
+    // dropdown a z-index and expect it to stack above the rest of
+    // the page even if nothing else has a z-index.  The nature of
+    // the bug is that all positioned elements are considered to
+    // have z-index:0 (not auto) and therefore start new stacking
+    // contexts, with ties broken by page order.
+    //
+    // The fix, then is to give z-index:1 to all ancestors
+    // of the dropdown having z-index:0.
+    for(var n = document.getElementById('login-dropdown-list').parentNode;
+        n.nodeName !== 'BODY';
+        n = n.parentNode)
+      if (n.style.zIndex === 0)
+        n.style.zIndex = 1;
+  };
+
   var getLoginServices = function () {
     var ret = [];
-    // XXX It would be nice if there were an automated way to read the
-    // list of services, such as _.each(Accounts.services, ...)
-    if (Accounts.facebook)
-      ret.push({name: 'Facebook'});
-    if (Accounts.google)
-      ret.push({name: 'Google'});
-    if (Accounts.weibo)
-      ret.push({name: 'Weibo'});
-    if (Accounts.twitter)
-      ret.push({name: 'Twitter'});
-
-    // make sure to put accounts last, since this is the order in the
-    // ui as well
-    if (Accounts.passwords)
-      ret.push({name: 'Password'});
+    // make sure to put password last, since this is how it is styled
+    // in the ui as well.
+    _.each(
+      ['facebook', 'google', 'weibo', 'twitter', 'password'],
+      function (service) {
+        if (Accounts[service])
+          ret.push({name: service});
+      });
 
     return ret;
   };
@@ -712,5 +815,11 @@
       return false;
     }
   };
+
+  // XXX from http://epeli.github.com/underscore.string/lib/underscore.string.js
+  var capitalize = function(str){
+    str = str == null ? '' : String(str);
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  };
 })();
 
diff --git a/packages/accounts-ui-unstyled/login_buttons_images.css b/packages/accounts-ui-unstyled/login_buttons_images.css
index 88f9b54546..de146a50b0 100644
--- a/packages/accounts-ui-unstyled/login_buttons_images.css
+++ b/packages/accounts-ui-unstyled/login_buttons_images.css
@@ -1,17 +1,17 @@
 /* These should be in their respective packages */
 
-#login-buttons-image-Google {
+#login-buttons-image-google {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAADCklEQVQ4jSXSy2ucVRjA4d97zvdNJpPJbTJJE9rYaCINShZtRCFIA1bbLryBUlyoLQjqVl12W7UbN4qb1gtuYhFRRBCDBITaesFbbI3RFBLSptEY05l0ZjLfnMvrov/Bs3gAcF71x6VVHTk+o8nDH+hrH89rUK9Z9Yaen57S3wVtGaMBNGC0IegWKIDxTtVaOHVugZVmH3HX3Zz+4l+W1xvkOjuZfPsspY4CNkZELEgEIJKwYlBjEwjec/mfCMVuorVs76R8+P0KYMmP30U2dT8eIZqAR2ipRcWjEYxGSCRhV08e04oYMoxYLi97EI9YCJ0FHBYbIVGDlUBLwRlLIuYW6chEmQt/rJO09RJjhjEJEYvJYGNhkbUhw43OXtIWDFRq9G87nAaSK6sVRm8r8fzRMWbOX2Xx7ypd7ZET03sQhDOz73DqSJOrd+7HSo4QIu0Nx/4rOzx+cRXZ9+z7+uqJ+3hiepxK3fHZT2tMjXYzOtzL6dmznPzhLexgN0QlxAAYxAlqUqRmkf5j59RlNQ6MFHhgcpCTTx8EUb5e+plD7x4jjg1ANCAgrRQAdR7xKXjBlGyLYi7PxaUmb8z8xcpGHVXLHaXdjI0egKyJiQYTEhSPREVIEUBNC+Mqm+xpz3j0njLPHB2nsh1QgeG+IS48dYbD5YNoo0ZUAbVEuTUoKuBSZOarX/WhyQn6eg2+usDWf0s0tq8zNPYk+WI/Lnge++hlvlyfQ3NdECzGRWKwEEA0qNY251n69kV6+Y0kbaCZoebG2X3oU7pKoyxuXOPe945zs9DCeosGIXoBDyaLdf6ce4Hbk+/Y299ksKtAuaeNsiyw8c1LKIZ95b0MdgxA5giixACpTxEPSau6QdFfI5/2cLPmEW+JAQrtJUJzDXF1dkwHzVodJMX4HFEcQQMaFdPeM0Jb/4PUtzzaLKAhRyJFwo6lbegRNFfk819muV5dR4JBQoQdQ2xFiDmSNDHiaptamR9Gq5cQ18AledrGDpOfeI5Lq8u88smbhMRisoSAgAYghdfn5H/JkHuRZ1owLAAAAABJRU5ErkJggg==);
 }
 
-#login-buttons-image-Facebook {
+#login-buttons-image-facebook {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAq0lEQVQ4jWP8//8/AyWAhYGBgcEmauYZBgYGYxL1nj2yLN2ECcohVTNcDwsxKlXlhRm6yzwZRAS5GRgYGBhsombC5ZhwaUIGyJrRAVEuwGYzSS7AB/C64MiydKx8ZJfgNeDN+68MDAwIL8D4RLsgIHsJis0wPjKgOAyoE4hcnGwMGkpiBBUbacvA2TfuvaKiC759/3X23NUnOPMDtgTEwMBwloGBgYGR0uwMAGOPLJS9mkQHAAAAAElFTkSuQmCC);
 }
 
-#login-buttons-image-Weibo {
+#login-buttons-image-weibo {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKySURBVDhPY2AgEpR5sjf/nS/6//UkoX+XJltuCvVxkcOp9cyZM1w/r13TuXvmDD9MkYIwg7qrNrubnzFb6J5intPHqrnvCnIwyKIYsmrVKuaFYWEFW2Sk79zX0f6/REHhKFABC0zRsky+rXMSeZdKCTLIHqgUvLAknW8L3IAQDw/RFlbWnQ801P+DNN8D4n0qyk94GRiEjTg5Lbz4+YOCdbhjVmTxbZwex7PUW58t8O1Ukf9gA2IDAoRPWFudfayt9f+mpsb/6yrK/28qKf4/ISf7YZu83K07QMNe6On9nyWusMtVm813azH/UWctZo/vc8TABjB3CApufAzSqKjw/7apyf+nMdH/XxUX/X+RnfX/qY/3/5tqqv/vq6v936KsfB2onltaiEHGx5AteFep4EmGUEHB1Adamv9v6er8fztp0v//79////nr1/+3X778B4N///5/O3jw/0N39//nlBQ/louLd4MMAWImcPhsU1G6DfLvt717wepnz537X0FB4T8fL+//AH///2/evgWL/7l///9dE+P/b4AWTZSWXg/UzAj2/w2gs59mZYEV7d+//z8rE9N/JUXF/w62tiD//a+urIS4BAgeA712Cxg2F40M36alpXGBDTgmI/3hdUU5WEFjff3/wvx8MNvcxARsQE1VFUQ30Et37Oz+P1RV+b/J0nIjUATigmgBvtzH5mb//9++/f/mkyf/A4KC/nv7+oI1W1hb/3/1+fP//9+//39ekP//CVDzTlnZxxtnz1ZBSUDeDAyZh7W13nybOeP/7W1b/09rbf2/FhgWHy9c+P912bL/D11d/l+WEP8/SUR4Ox8DA6pmmEkpHh4ya0JCim4lJGx7kZp8821CwrN7Hh4Pr7m6nDoSET61PjDQichsA3T7//+s/16/5gXSkIAa1AAAh8dhOVd5xHAAAAAASUVORK5CYII=);
 }
 
-#login-buttons-image-Twitter {
+#login-buttons-image-twitter {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAByklEQVQ4jaVTz0sbQRh92V10l006GaKJCtEtmqMYU0Qpwqb4B6zgXdT0WEr7B0ih4MGLP05CUWMvHkQwglhvGhsvKmJOBhTUQjWU2slilKarrAfdZROTQ8m7fPMx33szb75vXKZpohpwVbEBCNaCMUYopXppAWOMxDNsOPf3H1WIeDoSURYYYwQAKKW6y7KgLe2vam11KyMRZcEpEP6SOkwbUgc4ATAKUF8YW2fXhZejvaHPsc7gvH2DnCfQGEtdxrd/5NRJteUDpVTf+5kLp2WlA6JsCyZv9ChplPKdTfJZkYWhEF3bvnV3fb36NZSY3dP6Q/5V4hFvIAaKPckE8W5pLBIQdwHAthBdPtpJuhpeAwDu74DrP4/R1/Ts4cwBWg/gN+DowoSqTBPezAMAeAHw+suSw4Q7schFApF6af19a+2yLVIB7xR+0Zk75yCveu82FMnMViKHCXcSa3PPVBJAX5BszL2SP2kNwvdy5M1e+S2AogME4HFYPibPpxKZC03nRAp/M+Dx2UWDzTXfpttrx72ikCoVtrrAAwgdXBk9iazxxtpskfhs1O86aHXXpAEcA7ivJGDBDcDnyAsA2FMsi1KB/0bVv/EBBBSY9mZ7PAsAAAAASUVORK5CYII=);
 }
diff --git a/packages/accounts-ui/login_buttons.less b/packages/accounts-ui/login_buttons.less
index 9403ca3cb6..4900399f59 100644
--- a/packages/accounts-ui/login_buttons.less
+++ b/packages/accounts-ui/login_buttons.less
@@ -11,10 +11,6 @@
     background-image: url(data:image/gif;base64,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);
 }
 
-#login-buttons #login-buttons-logout {
-    margin-left: 4px;
-}
-
 @login-buttons-accounts-dialog-width: 178px;
 
 #login-buttons .login-button, .accounts-dialog .login-button {
@@ -41,6 +37,10 @@
     -o-border-radius: 3px;
 }
 
+#login-buttons .login-header {
+    margin-right: 4px;
+}
+
 #login-buttons .login-button-disabled, .accounts-dialog .login-button-disabled {
     color: #ccc;
 }
@@ -261,4 +261,3 @@
   font-family: "Courier New", Courier, monospace;
 }
 
-