Permalink
Browse files

Applying visual design to browser http authentication dialog using bu…

…ilding blocks, closes #4732
  • Loading branch information...
1 parent c3a2455 commit 906e8aa6bf385c561b03ae6df6d788965b9b92cb @benfrancis benfrancis committed Sep 18, 2012
View
@@ -64,35 +64,6 @@
</div>
<div id="screen">
- <div id="authentication-dialog">
- <div id="authentication-dialog-http-authentication">
- <div class="authentication-dialog-buttons">
- <h3 l10n-id="login-to-site">Log in to site</h3>
- <button id="authentication-dialog-http-authentication-ok" data-l10n-id="ok">OK</button>
- <button id="authentication-dialog-http-authentication-cancel" data-l10n-id="cancel">
- Cancel
- </button>
- </div>
- <div class="authentication-dialog-message-container">
- <div>
- <span id="authentication-dialog-http-authentication-message"></span>
- </div>
- <div>
- <span data-l10n-id="username">Username</span>
- </div>
- <div>
- <input id="authentication-dialog-username-input" />
- </div>
- <div>
- <span data-l10n-id="password">Password</span>
- </div>
- <div>
- <input id="authentication-dialog-password-input" type="password" />
- </div>
- </div>
- </div>
- </div>
-
<div id="modal-dialog">
<div id="modal-dialog-table">
<div id="modal-dialog-tablecell">
@@ -181,6 +152,25 @@ <h1 data-l10n-id="edit-bookmark">Edit Bookmark</h1>
<input type="hidden" id="bookmark-previous-url"></input>
</section>
+ <section id="http-authentication-dialog" role="region" class="hidden skin-dark">
+ <header>
+ <button id="http-authentication-cancel">
+ <span class="icon icon-close">close</span>
+ </button>
+ <menu type="toolbar">
+ <button id="http-authentication-ok" data-l10n-id="login">Login</button>
+ </menu>
+ <h1 l10n-id="login-to-a-website">Login to a website</h1>
+ </header>
+ <span id="http-authentication-message"></span>
+ <label data-l10n-id="username">Username
+ <input type="text" id="http-authentication-username" />
+ </label>
+ <label data-l10n-id="password">Password
+ <input id="http-authentication-password" type="password" />
+ </label>
+ </section>
+
<div id="settings">
<header id="settings-header">
<menu type="toolbar">
@@ -4,33 +4,27 @@
'use strict';
var AuthenticationDialog = {
- // Used for element id access.
- // e.g., 'authentication-dialog-alert-ok'
- prefix: 'authentication-dialog-',
-
- // DOM
- elements: {},
_confirmed: {},
// Get all elements when inited.
getAllElements: function ad_getAllElements() {
- var elementsID = ['http-authentication', 'username-input', 'password-input',
- 'http-authentication-message', 'http-authentication-ok',
- 'http-authentication-cancel'];
var toCamelCase = function toCamelCase(str) {
return str.replace(/\-(.)/g, function replacer(str, p1) {
return p1.toUpperCase();
});
};
- elementsID.forEach(function createElementRef(name) {
- this.elements[toCamelCase(name)] =
- document.getElementById(this.prefix + name);
- }, this);
+ var elementIDs = [
+ 'http-authentication-dialog', 'http-authentication-username',
+ 'http-authentication-password', 'http-authentication-message',
+ 'http-authentication-ok', 'http-authentication-cancel'];
- this.screen = document.getElementById('screen');
+ // Loop and add element with camel style name to Modal Dialog attribute.
+ elementIDs.forEach(function createElementRef(name) {
+ this[toCamelCase(name)] = document.getElementById(name);
+ }, this);
},
currentEvents: {},
@@ -42,29 +36,25 @@ var AuthenticationDialog = {
this.boundToWindow = bindToWindow || false;
- for (var id in elements) {
- if (elements[id].tagName.toLowerCase() == 'button') {
- elements[id].addEventListener('click', this);
- }
- }
+ this.httpAuthenticationOk.addEventListener('click', this);
+ this.httpAuthenticationCancel.addEventListener('click', this);
},
// Default event handler
handleEvent: function ad_handleEvent(evt, origin) {
- var elements = this.elements;
switch (evt.type) {
case 'mozbrowserusernameandpasswordrequired':
evt.preventDefault();
this.currentEvents[origin] = evt;
- // Show modal dialog only if
+ // Show authentication dialog only if
// the frame is currently displayed.
this.show(origin);
break;
case 'click':
- if (evt.currentTarget === elements.httpAuthenticationCancel) {
+ if (evt.currentTarget === this.httpAuthenticationCancel) {
this.cancelHandler();
} else {
this.confirmHandler();
@@ -73,72 +63,65 @@ var AuthenticationDialog = {
}
},
- // Show relative dialog and set message/input value well
+ // Show dialog and set message
show: function ad_show(origin) {
this.currentOrigin = origin;
var evt = this.currentEvents[origin];
var message = evt.detail.message;
- var elements = this.elements;
- this.screen.classList.add('authentication-dialog');
- elements.httpAuthentication.classList.add('visible');
+ this.httpAuthenticationDialog.classList.remove('hidden');
var _ = navigator.mozL10n.get;
// XXX: We don't have a better way to detect login failed.
if (this._confirmed[origin]) {
message = _('the-username-or-password-is-incorrect');
- elements.httpAuthenticationMessage.classList.add('error');
+ this.httpAuthenticationMessage.classList.add('error');
} else {
var l10nArgs = { host: evt.detail.host };
message = _('http-authentication-message', l10nArgs);
- elements.httpAuthenticationMessage.classList.remove('error');
+ this.httpAuthenticationMessage.classList.remove('error');
}
- elements.httpAuthenticationMessage.textContent = message;
+ this.httpAuthenticationMessage.textContent = message;
- elements.usernameInput.value = '';
- elements.passwordInput.value = '';
- elements.usernameInput.focus();
+ this.httpAuthenticationUsername.value = '';
+ this.httpAuthenticationPassword.value = '';
+ this.httpAuthenticationUsername.focus();
},
hide: function ad_hide() {
var evt = this.currentEvents[this.currentOrigin];
if (!evt)
return;
- this.elements.httpAuthentication.classList.remove('visible');
+ this.httpAuthenticationDialog.classList.add('hidden');
this.currentOrigin = null;
- this.screen.classList.remove('authentication-dialog');
},
- // When user clicks OK button on alert/confirm/prompt
+ // When user clicks OK button on authentication dialog
confirmHandler: function ad_confirmHandler() {
- var elements = this.elements;
-
var evt = this.currentEvents[this.currentOrigin];
- evt.detail.authenticate(elements.usernameInput.value,
- elements.passwordInput.value);
- elements.httpAuthentication.classList.remove('visible');
+ evt.detail.authenticate(this.httpAuthenticationUsername.value,
+ this.httpAuthenticationPassword.value);
+ this.httpAuthenticationDialog.classList.add('hidden');
// To remember we had ever logged in.
this._confirmed[this.currentOrigin] = true;
delete this.currentEvents[this.currentOrigin];
- this.screen.classList.remove('authentication-dialog');
},
- // When user clicks cancel button on confirm/prompt or
+ // When user clicks cancel button on authentication dialog or
// when the user try to escape the dialog with the escape key
cancelHandler: function ad_cancelHandler() {
var evt = this.currentEvents[this.currentOrigin];
- var elements = this.elements;
evt.detail.cancel();
if (this._confirmed[this.currentOrigin])
delete this._confirmed[this.currentOrigin];
delete this.currentEvents[this.currentOrigin];
- this.screen.classList.remove('authentication-dialog');
+ this.httpAuthenticationDialog.classList.add('hidden');
},
originHasEvent: function(origin) {
@@ -68,8 +68,12 @@ page-title=Page Title
address=Address
add-to-home-screen=Add to Home Screen
-# dialog
-http-authentication-message=The site {{host}} requires you to log in.
+# HTTP Authentication dialog
+username=Username
+password=Password
+login=Login
+login-to-a-website=Login to website
+http-authentication-message=The website {{host}} requires you to login.
the-username-or-password-is-incorrect=The username or password is incorrect.
# Crash screen
@@ -208,7 +208,7 @@ input[type="image"] {
top: 50px;
width: 100%;
height: 3px;
- z-index: 200;
+ z-index: 99;
}
#throbber.loading {
@@ -785,19 +785,50 @@ li[role="listitem"] small {
display: none;
}
+/*
+ * HTTP Authentication Dialog
+ */
+#http-authentication-dialog {
+ z-index: 102;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #EEEEEE;
+}
+
+#http-authentication-dialog.hidden {
+ display: none;
+}
+
+#http-authentication-message {
+ display: block;
+ font-size: 1.5rem;
+ margin: 1rem 2rem;
+}
+
+#http-authentication-message.error {
+ color: #950d0d;
+}
+
/* The following can be removed once we have a building block
* for entry sheets.
*/
- #bookmark-entry-sheet label {
+ #bookmark-entry-sheet label,
+ #http-authentication-dialog label {
display: block;
- position: relaitve;
+ position: relative;
margin: 1rem 2rem;
text-transform: uppercase;
font-size: 1.5rem;
}
#bookmark-entry-sheet input[type="text"],
- #bookmark-entry-sheet input[type="url"] {
+ #bookmark-entry-sheet input[type="url"],
+ #http-authentication-dialog input[type="text"],
+ #http-authentication-dialog input[type="password"] {
-moz-box-sizing: border-box;
border: 1px solid #D1D1D1;
border-radius: 0.3rem;

0 comments on commit 906e8aa

Please sign in to comment.