Access Control: fix login dialog (#262).

Adapted to recent changes in GUIToolkit's Dialog class. Furthermore in GUIToolkit: the Dialog's close() method takes 2 optional parameters to run a fade out animation: {{{ dialog.close(duration, callback) }}} Furthermore in Webclient: there is a new GUI helper method to attach a Return key handler to an jQuery object: {{{ dm4c.on_return_key(element, callback) }}} See ticket 262.
dmx-systems · Aug 7, 2012 · 0d66742 · 0d66742
1 parent 983bdf7
commit 0d66742
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/modules/dm4-accesscontrol/src/main/resources/web/script/plugin.js b/modules/dm4-accesscontrol/src/main/resources/web/script/plugin.js
@@ -44,6 +44,8 @@ dm4c.add_plugin("de.deepamehta.accesscontrol", function() {
 
     dm4c.add_listener("init", function() {
 
+        var login_dialog
+
         create_login_widget()
         create_login_dialog()
 
@@ -81,7 +83,7 @@ dm4c.add_plugin("de.deepamehta.accesscontrol", function() {
 
                 function show_login() {
                     dom.append($("<a>").attr("href", "#").text("Login").click(function() {
-                        $("#login-dialog").dialog("open")
+                        login_dialog.open()
                         return false
                     }))
                 }
@@ -97,17 +99,29 @@ dm4c.add_plugin("de.deepamehta.accesscontrol", function() {
                 .after($("<div>").addClass("field-label").text("Password"))
                 .after(password_input)
                 .after(message_div)
-            dm4c.ui.dialog("login-dialog", "Login", dialog_content, "auto", "OK", do_try_login)
+            login_dialog = dm4c.ui.dialog({
+                title: "Login",
+                content: dialog_content,
+                button_label: "OK",
+                button_handler: do_try_login
+            })
+            //
+            dm4c.on_return_key(username_input, function() {
+                password_input.focus();
+            })
+            dm4c.on_return_key(password_input, function() {
+                do_try_login();
+            })
 
             function do_try_login() {
                 var username = username_input.val()
                 var password = password_input.val()
                 var user = try_login(username, password)
                 if (user) {
-                    show_message("Login OK", "login-ok", close_login_dialog)
+                    show_message("Login OK", "ok", close_login_dialog)
                     self.do_login(user)
                 } else {
-                    show_message("Login failed", "login-failed")
+                    show_message("Login failed", "failed")
                 }
             }
 
@@ -118,9 +132,8 @@ dm4c.add_plugin("de.deepamehta.accesscontrol", function() {
             }
 
             function close_login_dialog() {
-                $("#login-dialog").parent().fadeOut(400, function() {
-                    $("#login-dialog").dialog("close")
-                    // clear fields for possible re-open
+                login_dialog.close(400, function() {
+                    // clear fields for next re-open
                     username_input.val("")
                     password_input.val("")
                     message_div.text("")

diff --git a/modules/dm4-accesscontrol/src/main/resources/web/style/accesscontrol.css b/modules/dm4-accesscontrol/src/main/resources/web/style/accesscontrol.css
@@ -10,10 +10,10 @@
     margin-top: 1em;
 }
 
-.login-ok {
+#login-message.ok {
     color: green;
 }
 
-.login-failed {
+#login-message.failed {
     color: red;
 }
diff --git a/modules/dm4-webclient/src/main/resources/web/script/util/gui_toolkit.js b/modules/dm4-webclient/src/main/resources/web/script/util/gui_toolkit.js
@@ -95,8 +95,17 @@ function GUIToolkit(config) {
                 dialog.dialog("open")
             }
 
-            this.close = function() {
-                dialog.dialog("close")
+            /**
+             * @paran   duration    Optional: determines how long the fade out animation will run (in milliseconds).
+             *                      If not specified (or 0) no animation is run (the dialog disappears immediately).
+             * @paran   callback    Optional: function to be called once the animation is complete.
+             */
+            this.close = function(duration, callback) {
+                duration = duration || 0
+                dialog.parent().fadeOut(duration, function() {
+                    dialog.dialog("close")
+                    callback && callback()
+                })
             }
 
             this.empty = function() {

diff --git a/modules/dm4-webclient/src/main/resources/web/script/webclient.js b/modules/dm4-webclient/src/main/resources/web/script/webclient.js
@@ -1080,6 +1080,17 @@ function Webclient() {
         dm4c.trigger_plugin_hook("post_refresh_create_menu", dm4c.toolbar.create_menu)
     }
 
+    // ---
+
+    // ### TODO: formulate this as an jQuery extension
+    this.on_return_key = function(element, callback) {
+        element.keyup(function(event) {
+            if (event.which == 13) {
+                callback();
+            }
+        })
+    }
+
     // === Images ===
 
     var image_tracker   // ### FIXME: the image tracker is global. There can only be one at a time.