From c643197b1918e405768f78ea9b4da7f09ee82326 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvoborni@redhat.com>
Date: Thu, 1 Mar 2012 13:58:21 +0100
Subject: 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(-)

(limited to 'install')

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