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
2026-05-02 03:01:46 -04:00 · 2012-11-14 20:41:12 -08:00
parent e93e35ce08
commit 646b3576cd
10 changed files with 122 additions and 34 deletions
--- a/examples/unfinished/accounts-ui-viewer/accounts-ui-viewer.js
+++ b/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();
        }
--- a/packages/accounts-ui-unstyled/login_buttons.html
+++ b/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>
--- a/packages/accounts-ui-unstyled/login_buttons.js
+++ b/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,7 +156,7 @@
    if (email.indexOf('@') !== -1) {
      return true;
    } else {
-      loginButtonsSession.set('errorMessage', "Invalid email");
+      loginButtonsSession.errorMessage("Invalid email");
      return false;
    }
  };
@@ -155,7 +164,7 @@
    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;
    }
  };
--- a/packages/accounts-ui-unstyled/login_buttons_dialogs.js
+++ b/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();
--- a/packages/accounts-ui-unstyled/login_buttons_dropdown.html
+++ b/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>
--- a/packages/accounts-ui-unstyled/login_buttons_dropdown.js
+++ b/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;
      }
    }
--- a/packages/accounts-ui-unstyled/login_buttons_session.js
+++ b/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) {
--- a/packages/accounts-ui-unstyled/login_buttons_single.html
+++ b/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>
+
--- a/packages/accounts-ui-unstyled/login_buttons_single.js
+++ b/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");
        }
      };

--- a/packages/accounts-ui/login_buttons.less
+++ b/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; }