accounts-ui fixes related to the introduction of {{loggingIn}}

- Correctly position certain elements
- Reduce flicker/things moving around in various cases
- Force dropdown to open in case there is a message to display

examples/unfinished/accounts-ui-viewer/accounts-ui-viewer.js

@@ -114,7 +114,7 @@ if (Meteor.isClient) {
     return settings.alignRight ? 'right' : 'left';
   };
 
-  var fakeLogin = function () {
+  var fakeLogin = function (callback) {
     Accounts.createUser(
       {username: Meteor.uuid(),
        password: "password",
@@ -130,6 +130,7 @@ if (Meteor.isClient) {
         if (! Session.get('settings').hasPasswords)
           Meteor.users.update(Meteor.userId(),
                               { $unset: { username: 1 }});
+        callback();
       });
   };
 
@@ -169,17 +170,18 @@ if (Meteor.isClient) {
         Accounts.loginServiceConfiguration.remove({service: service});
       } else if (this.key === "messages") {
         if (this.value === "error") {
-          Accounts._loginButtonsSession.set('errorMessage', 'An error occurred!  Gee golly gosh.');
+          Accounts._loginButtonsSession.errorMessage('An error occurred!  Gee golly gosh.');
         } else if (this.value === "info") {
-          Accounts._loginButtonsSession.set('infoMessage', 'Here is some information that is crucial.');
+          Accounts._loginButtonsSession.infoMessage('Here is some information that is crucial.');
         } else if (this.value === "clear") {
           Accounts._loginButtonsSession.resetMessages();
         }
       } else if (this.key === "sign") {
         if (this.value === 'in') {
           // create a random new user
-          Accounts._loginButtonsSession.closeDropdown();
-          fakeLogin();
+          fakeLogin(function () {
+            Accounts._loginButtonsSession.closeDropdown();
+          });
         } else if (this.value === 'out') {
           Meteor.logout();
         }

packages/accounts-ui-unstyled/login_buttons.html

@@ -7,7 +7,21 @@
 <template name="_loginButtons">
   <div id="login-buttons" class="login-buttons-dropdown-align-{{align}}">
     {{#if currentUser}}
-      {{> _loginButtonsLoggedIn}}
+      {{#if loggingIn}}
+        {{! We aren't actually logged in yet; we're just setting Meteor.userId
+            optimistically during an at-startup login-with-token. We expose this
+            state so other UIs can treat it specially, but we'll just treat it
+            as logged out. }}
+        {{#if dropdown}}
+          {{> _loginButtonsLoggingIn }}
+        {{else}}
+          <div class="login-buttons-with-only-one-button">
+            {{> _loginButtonsLoggingInSingleLoginButton }}
+          </div>
+        {{/if}}
+      {{else}}
+        {{> _loginButtonsLoggedIn}}
+      {{/if}}
     {{else}}
       {{> _loginButtonsLoggedOut}}
     {{/if}}
@@ -33,7 +47,7 @@
         {{#with singleService}} {{! at this point there must be only one configured services }}
           <div class="login-buttons-with-only-one-button">
             {{#if loggingIn}}
-              {{> _loginButtonsLoggingIn}}
+              {{> _loginButtonsLoggingInSingleLoginButton}}
             {{else}}
               {{> _loginButtonsLoggedOutSingleLoginButton}}
             {{/if}}
@@ -57,5 +71,21 @@
 </template>
 
 <template name="_loginButtonsLoggingIn">
+  {{> _loginButtonsLoggingInPadding}}
   <div class="loading">&nbsp;</div>
+  {{> _loginButtonsLoggingInPadding}}
+</template>
+
+<template name="_loginButtonsLoggingInPadding">
+  {{#unless dropdown}}
+    {{! invisible div used for correct height of surrounding div. this ensures
+        that the _loginButtons template is always the same height
+        and the rest of the page doesn't move up and down }}
+    <div class="login-buttons-padding">
+      <div class="login-button single-login-button" style="visibility: hidden;" id="login-buttons-logout">&nbsp;</div>
+    </div>
+  {{else}}
+    {{! just add some padding }}
+    <div class="login-buttons-padding" />
+  {{/unless}}
 </template>

packages/accounts-ui-unstyled/login_buttons.js

@@ -87,6 +87,15 @@
   };
 
 
+  //
+  // loginButtonsLoggingInPadding template
+  //
+
+  Template._loginButtonsLoggingInPadding.dropdown = function () {
+    return Accounts._loginButtons.dropdown();
+  };
+
+
   //
   // helpers
   //
@@ -136,7 +145,7 @@
     if (username.length >= 3) {
       return true;
     } else {
-      loginButtonsSession.set('errorMessage', "Username must be at least 3 characters long");
+      loginButtonsSession.errorMessage("Username must be at least 3 characters long");
       return false;
     }
   };
@@ -147,15 +156,15 @@
     if (email.indexOf('@') !== -1) {
       return true;
     } else {
-      loginButtonsSession.set('errorMessage', "Invalid email");
+      loginButtonsSession.errorMessage("Invalid email");
       return false;
     }
   };
   Accounts._loginButtons.validatePassword = function (password) {
     if (password.length >= 6) {
       return true;
     } else {
-      loginButtonsSession.set('errorMessage', "Password must be at least 6 characters long");
+      loginButtonsSession.errorMessage("Password must be at least 6 characters long");
       return false;
     }
   };

packages/accounts-ui-unstyled/login_buttons_dialogs.js

@@ -61,7 +61,7 @@
       loginButtonsSession.get('resetPasswordToken'), newPassword,
       function (error) {
         if (error) {
-          loginButtonsSession.set('errorMessage', error.reason || "Unknown error");
+          loginButtonsSession.errorMessage(error.reason || "Unknown error");
         } else {
           loginButtonsSession.set('resetPasswordToken', null);
           Accounts._enableAutoLogin();
@@ -102,7 +102,7 @@
       loginButtonsSession.get('enrollAccountToken'), password,
       function (error) {
         if (error) {
-          loginButtonsSession.set('errorMessage', error.reason || "Unknown error");
+          loginButtonsSession.errorMessage(error.reason || "Unknown error");
         } else {
           loginButtonsSession.set('enrollAccountToken', null);
           Accounts._enableAutoLogin();

packages/accounts-ui-unstyled/login_buttons_dropdown.html

@@ -43,20 +43,24 @@
 <!--            -->
 <template name="_loginButtonsLoggedOutDropdown">
   <div class="login-link-and-dropdown-list {{additionalClasses}}">
-    <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>
-      {{#if loggingIn}}
-        {{> _loginButtonsLoggingIn}}
-      {{/if}}
-      <div class="login-close-text-clear"></div>
-      {{> _loginButtonsLoggedOutAllServices}}
-    </div>
+      {{! This text is covered by the dropdown, but duplicating it here
+          makes the position of "Close" match the position of this text. }}
+      <a class="login-link-text" id="login-sign-in-link">Sign in ▾</a>
+      <div id="login-dropdown-list" class="accounts-dialog">
+        <a class="login-close-text">Close</a>
+        {{#if loggingIn}}
+          {{> _loginButtonsLoggingIn}}
+        {{/if}}
+        <div class="login-close-text-clear"></div>
+        {{> _loginButtonsLoggedOutAllServices}}
+      </div>
     {{else}}
       {{#if loggingIn}}
         {{! Not normally visible, but if the user closes the dropdown during login.}}
         {{> _loginButtonsLoggingIn}}
+      {{else}}
+        <a class="login-link-text" id="login-sign-in-link">Sign in ▾</a>
       {{/if}}
     {{/if}}
   </div>

packages/accounts-ui-unstyled/login_buttons_dropdown.js

@@ -379,7 +379,7 @@
 
     Meteor.loginWithPassword(loginSelector, password, function (error, result) {
       if (error) {
-        loginButtonsSession.set('errorMessage', error.reason || "Unknown error");
+        loginButtonsSession.errorMessage(error.reason || "Unknown error");
       } else {
         loginButtonsSession.closeDropdown();
       }
@@ -419,7 +419,7 @@
 
     Accounts.createUser(options, function (error) {
       if (error) {
-        loginButtonsSession.set('errorMessage', error.reason || "Unknown error");
+        loginButtonsSession.errorMessage(error.reason || "Unknown error");
       } else {
         loginButtonsSession.closeDropdown();
       }
@@ -433,12 +433,12 @@
     if (email.indexOf('@') !== -1) {
       Accounts.forgotPassword({email: email}, function (error) {
         if (error)
-          loginButtonsSession.set('errorMessage', error.reason || "Unknown error");
+          loginButtonsSession.errorMessage(error.reason || "Unknown error");
         else
-          loginButtonsSession.set('infoMessage', "Email sent");
+          loginButtonsSession.infoMessage("Email sent");
       });
     } else {
-      loginButtonsSession.set('errorMessage', "Invalid email");
+      loginButtonsSession.errorMessage("Invalid email");
     }
   };
 
@@ -458,11 +458,11 @@
 
     Accounts.changePassword(oldPassword, password, function (error) {
       if (error) {
-        loginButtonsSession.set('errorMessage', error.reason || "Unknown error");
+        loginButtonsSession.errorMessage(error.reason || "Unknown error");
       } else {
         loginButtonsSession.set('inChangePasswordFlow', false);
         loginButtonsSession.set('inMessageOnlyFlow', true);
-        loginButtonsSession.set('infoMessage', "Password changed");
+        loginButtonsSession.infoMessage("Password changed");
       }
     });
   };
@@ -474,7 +474,7 @@
       // notably not trimmed. a password could (?) start or end with a space
       var password = elementValueById('login-password');
       if (password !== passwordAgain) {
-        loginButtonsSession.set('errorMessage', "Passwords don't match");
+        loginButtonsSession.errorMessage("Passwords don't match");
         return false;
       }
     }

packages/accounts-ui-unstyled/login_buttons_session.js

@@ -31,6 +31,13 @@
   Accounts._loginButtonsSession = {
     set: function(key, value) {
       validateKey(key);
+      if (_.contains(['errorMessage', 'infoMessage'], key))
+        throw new Error("Don't set errorMessage or infoMessage directly. Instead, use errorMessage() or infoMessage().");
+
+      this._set(key, value);
+    },
+
+    _set: function(key, value) {
       Session.set(KEY_PREFIX + key, value);
     },
 
@@ -48,9 +55,25 @@
       this.resetMessages();
     },
 
+    infoMessage: function(message) {
+      this._set("errorMessage", null);
+      this._set("infoMessage", message);
+      this.set("dropdownVisible", true); // See #OpenDropdownForMessage
+    },
+
+    errorMessage: function(message) {
+      this._set("errorMessage", message);
+      this._set("infoMessage", null);
+
+      // #OpenDropdownForMessage
+      // for the case that you're taking some action in the dropdown, and then you
+      // get an error or message. notably has no effect in the single button case.
+      this.set("dropdownVisible", true);
+    },
+
     resetMessages: function () {
-      this.set("errorMessage", null);
-      this.set("infoMessage", null);
+      this._set("errorMessage", null);
+      this._set("infoMessage", null);
     },
 
     configureService: function (name) {

packages/accounts-ui-unstyled/login_buttons_single.html

@@ -12,6 +12,12 @@
   </div>
 </template>
 
+<template name="_loginButtonsLoggingInSingleLoginButton">
+  <div class="login-text-and-button">
+    {{> _loginButtonsLoggingIn}}
+  </div>
+</template>
+
 <template name="_loginButtonsLoggedInSingleLogoutButton">
   <div class="login-text-and-button">
     <div class="login-display-name">
@@ -20,3 +26,4 @@
     <div class="login-button single-login-button" id="login-buttons-logout">Sign Out</div>
   </div>
 </template>
+

packages/accounts-ui-unstyled/login_buttons_single.js

@@ -14,7 +14,7 @@
         } else if (err instanceof Accounts.ConfigError) {
           loginButtonsSession.configureService(serviceName);
         } else {
-          loginButtonsSession.set('errorMessage', err.reason || "Unknown error");
+          loginButtonsSession.errorMessage(err.reason || "Unknown error");
         }
       };
 

packages/accounts-ui/login_buttons.less

@@ -91,7 +91,7 @@
 #login-buttons {
 
   .display-inline-block();
-  margin-right: 0.01px; // Fixes display on IE8: http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html
+  margin-right: 0.2px; // Fixes display on IE8: http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html
 
   // This seems to keep the height of the line from
   // being sensitive to the presence of the unicode down arrow,
@@ -183,6 +183,11 @@
 }
 
 #login-buttons {
+  .login-buttons-padding {
+    display: inline-block;
+    width: 30px;
+  }
+
   .login-display-name { margin-right: 4px; }
   .configure-button {
 
@@ -215,9 +220,17 @@
     position: relative;
     padding-bottom: 8px;
   }
-  #login-dropdown-list .loading {
+
+  .login-text-and-button .loading, .login-link-and-dropdown-list .loading {
+    display: inline-block;
+  }
+  &.login-buttons-dropdown-align-left #login-dropdown-list .loading {
     float: right;
   }
+  &.login-buttons-dropdown-align-right #login-dropdown-list .loading {
+    float: left;
+  }
+
 
   .login-close-text-clear { clear: both; }