Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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
  • Loading branch information...
commit 646b3576cd140c2ebd6cc005eec6b69600d3f0bd 1 parent e93e35c
Avital Oliver avital authored
12 examples/unfinished/accounts-ui-viewer/accounts-ui-viewer.js
View
@@ -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();
}
34 packages/accounts-ui-unstyled/login_buttons.html
View
@@ -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>
15 packages/accounts-ui-unstyled/login_buttons.js
View
@@ -88,6 +88,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;
}
};
4 packages/accounts-ui-unstyled/login_buttons_dialogs.js
View
@@ -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();
22 packages/accounts-ui-unstyled/login_buttons_dropdown.html
View
@@ -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>
16 packages/accounts-ui-unstyled/login_buttons_dropdown.js
View
@@ -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;
}
}
27 packages/accounts-ui-unstyled/login_buttons_session.js
View
@@ -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) {
7 packages/accounts-ui-unstyled/login_buttons_single.html
View
@@ -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>
+
2  packages/accounts-ui-unstyled/login_buttons_single.js
View
@@ -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");
}
};
17 packages/accounts-ui/login_buttons.less
View
@@ -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; }
Please sign in to comment.
Something went wrong with that request. Please try again.