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

2 files changed, 45 insertions, 6 deletions

diff --git a/install/ui/dialog.js b/install/ui/dialog.js
index 28c71ad54..324eb9b93 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 b5a7486d5..34174c81a 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() {