Usability was improved in Unauthorized/Login dialog.
When the dialog is opened a link which switches to login form is focus
so user can do following:
1) press enter (login form is displayed and username field is focused )
2) type username
3) press tab
4) type password
5) press enter
this sequence will execute login request.
When filling form user can also press 'escape' to go back to previous
form state. It's the same as if he would click on the 'back' button.
https://fedorahosted.org/freeipa/ticket/2450
--
Petr Vobornik
From d05c016da3ba51dbe3362ceeb87336e7f37031b3 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Thu, 1 Mar 2012 13:58:21 +0100
Subject: [PATCH] Improved usability of login dialog
Usability was imporved in Unauthorized/Login dialog.
When the dialog is opened a link which switches to login form is focus so user can do following:
1) press enter (login form is displayed and username field is focused )
2) type username
3) press tab
4) type password
5) press enter
this sequence will execute login request.
When filling form user can also press 'escape' to go back to previous form state. It's the same as if he would click on the 'back' button.
https://fedorahosted.org/freeipa/ticket/2450
---
install/ui/dialog.js | 3 +++
install/ui/ipa.js | 48 ++++++++++++++++++++++++++++++++++++++++++------
2 files changed, 45 insertions(+), 6 deletions(-)
diff --git a/install/ui/dialog.js b/install/ui/dialog.js
index 28c71ad540de21f4579651e5428e70e0a3ca6e66..324eb9b93e8557af44a4dbcfe39609a6d149b44e 100644
--- a/install/ui/dialog.js
+++ b/install/ui/dialog.js
@@ -66,6 +66,8 @@ IPA.dialog = function(spec) {
that.title = spec.title;
that.width = spec.width || 500;
that.height = spec.height;
+ that.close_on_escape = spec.close_on_escape !== undefined ?
+ spec.close_on_escape : true;
that.widgets = IPA.widget_container();
that.fields = IPA.field_container({ container: that });
@@ -156,6 +158,7 @@ IPA.dialog = function(spec) {
that.container.dialog({
title: that.title,
modal: true,
+ closeOnEscape: that.close_on_escape,
width: that.width,
minWidth: that.width,
height: that.height,
diff --git a/install/ui/ipa.js b/install/ui/ipa.js
index b5a7486d594b867b3a4a8e26b9fda0e4c81705b3..34174c81a9b3fd142301c3ea80b86fb4e98a949f 100644
--- a/install/ui/ipa.js
+++ b/install/ui/ipa.js
@@ -489,6 +489,7 @@ IPA.command = function(spec) {
xhr: xhr,
text_status: text_status,
error_thrown: error_thrown,
+ close_on_escape: false,
command: that
});
@@ -1353,10 +1354,19 @@ IPA.unauthorized_dialog = function(spec) {
}).appendTo(that.krb_message_contatiner);
text = IPA.get_message('login.form_auth', "form-based authentication");
- $('<a/>', {
+ that.form_auth_link = $('<a/>', {
text: text,
- style: 'cursor:pointer;',
- click: that.show_form
+ href: '#',
+ click: function() {
+ that.show_form();
+ return false;
+ },
+ keydown: function(event) {
+ if (event.keyCode === 13) { //enter
+ that.show_form();
+ return false;
+ }
+ }
}).appendTo(fb_title);
fb_title.append('.');
@@ -1368,7 +1378,8 @@ IPA.unauthorized_dialog = function(spec) {
that.form = $('<div>', {
'class': 'auth-dialog',
- style: 'display: none;'
+ style: 'display: none;',
+ keyup: that.on_form_keyup
}).appendTo(that.container);
var text = IPA.get_message('login.login', "Login");
@@ -1421,20 +1432,45 @@ IPA.unauthorized_dialog = function(spec) {
});
};
+ that.open = function() {
+ that.dialog_open();
+ that.form_auth_link.focus();
+ };
+
+ that.on_form_keyup = function(event) {
+
+ if (that.switching) {
+ that.switching = false;
+ return;
+ }
+
+ if (event.keyCode === 13) { // enter
+ that.on_login();
+ event.preventDefault();
+ } else if (event.keyCode === 27) { // escape
+ that.on_back();
+ event.preventDefault();
+ }
+ };
+
that.show_form = function() {
+ that.switching = true;
+
that.krb_message_contatiner.css('display', 'none');
that.form.css('display', 'block');
-
that.display_buttons(['login', 'back']);
+
+ var user_field = that.fields.get_field('username');
+ user_field.widget.focus_input();
};
that.on_back = function() {
that.krb_message_contatiner.css('display', 'block');
that.form.css('display', 'none');
-
that.display_buttons(['retry']);
+ that.form_auth_link.focus();
};
that.on_login = function() {
--
1.7.7.6
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
