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

@@ -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,

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() {