AC-317 Now use 'esc' key to dismiss modal dialogs. First field on modal forms is now automatically focused.

awx/ui/static/js/controllers/Authentication.js

@@ -12,8 +12,16 @@
 
 function Authenticate($window, $scope, $rootScope, $location, Authorization, ToggleClass, Alert)
 {
+   var setLoginFocus = function() {
+      $('#login-username').focus();
+      };
+
    // Display the login dialog
    $('#login-modal').modal({ show: true, keyboard: false, backdrop: 'static' });
+   // Set focus to username field
+   $('#login-modal').on('shown.bs.modal', function() {
+       setLoginFocus();
+       });
 
    var scope = angular.element(document.getElementById('login-modal')).scope();
    
@@ -58,7 +66,7 @@ function Authenticate($window, $scope, $rootScope, $location, Authorization, Tog
        var token;
        if (username == null || username == undefined || username == '' || 
            password == null || password == undefined || password == '' ) {
-           Alert('Error!', 'Please provide a username and password before attempting to login.');
+           Alert('Error!', 'Please provide a username and password before attempting to login.', 'alert-danger', setLoginFocus);
        }
        else {
            Authorization.retrieveToken(username, password)
@@ -86,11 +94,11 @@ function Authenticate($window, $scope, $rootScope, $location, Authorization, Tog
                                  $location.path('/organizations');
                                  })
                              .error(function(data, status, headers, config) {
-                                 Alert('Error', 'Failed to access user information. GET returned status: ' + status);
+                                 Alert('Error', 'Failed to access user information. GET returned status: ' + status, 'alert-danger', setLoginFocus);
                                  });
                          })
                      .error( function(data, status, headers, config) {
-                         Alert('Error', 'Failed to access license information. GET returned status: ' + status);
+                         Alert('Error', 'Failed to access license information. GET returned status: ' + status, 'alert-danger', setLoginFocus);
                          });
                  })
              .error( function(data, status, headers, config) {
@@ -111,7 +119,7 @@ function Authenticate($window, $scope, $rootScope, $location, Authorization, Tog
                        msg = 'The login attempt failed with a status of: ' + status;
                     }
                     scope.reset();
-                    Alert(hdr, msg);
+                    Alert(hdr, msg, 'alert-danger', setLoginFocus);
                  }
                  });
            }

awx/ui/static/lib/ansible/directives.js

@@ -224,6 +224,10 @@ angular.module('AWDirectives', ['RestServices'])
             $(document).bind('keydown', function(e) {
                 if (e.keyCode === 27) {
                    $(element).popover('destroy');
+                   $('.popover').each(function(index) {
+                      // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+                      $(this).remove();
+                      });
                 }
                 });
         }

awx/ui/static/lib/ansible/form-generator.js

@@ -72,15 +72,31 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        if (options.modal) {
           this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle;  //Default title for default modal
           this.scope.formModalInfo = false  //Disable info button for default modal
-          $('.popover').popover('hide');  //remove any lingering pop-overs
+          $('.popover').each(function(index) {
+              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+              $(this).remove();
+              });
           if (options.modal_selector) {
-             $(options.modal_selector).removeClass('skinny-modal'); //Used in job_events to remove white space
+             $(options.modal_selector).modal({ show: true, backdrop: 'static', keyboard: true });
-             $(options.modal_selector).modal({ show: true, backdrop: 'static', keyboard: false });
+             $(options.modal_selector).on('shown.bs.modal', function() {
+                 $(options.modal_select + ' input:first').focus();
+                 });
           }
           else {
-             //$('#form-modal').removeClass('skinny-modal'); //Used in job_events to remove white space
+             $('#form-modal').modal({ show: true, backdrop: 'static', keyboard: true });
-             $('#form-modal').modal({ show: true, backdrop: 'static', keyboard: false });
+             $('#form-modal').on('shown.bs.modal', function() {
+                 $('#form-modal input:first').focus();
+                 });
           }
+          $(document).bind('keydown', function(e) {
+              if (e.keyCode === 27) {
+                 if (options.modal_selector) {
+                    $(options.modal_selector).modal('hide');
+                 }
+                 $('#prompt-modal').modal('hide');
+                 $('#form-modal').modal('hide');
+              }
+              });
        }
        return this.scope;
        },

awx/ui/static/lib/ansible/list-generator.js

@@ -88,8 +88,16 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        if (options.mode == 'lookup') {
           // options should include {hdr: <dialog header>, action: <function...> }
           this.scope.lookupHeader = options.hdr;
-          $('.popover').popover('hide');  //remove any lingering pop-overs
+          $('.popover').each(function(index) {
-          $('#lookup-modal').modal({ backdrop: 'static', keyboard: false });
+              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+              $(this).remove();
+              });
+          $('#lookup-modal').modal({ backdrop: 'static', keyboard: true });
+          $(document).bind('keydown', function(e) {
+              if (e.keyCode === 27) {
+                 $('#lookup-modal').modal('hide');
+              }
+              });
        }
        
        return this.scope;

awx/ui/static/lib/ansible/utilities.js

@@ -44,12 +44,30 @@ angular.module('Utilities',[])
                 action();
                 });
          }
+         $(document).bind('keydown', function(e) {
+            if (e.keyCode === 27) {
+               $('#alert-modal2').modal('hide');
+               if (action) {
+                  action();
+               }
+            }
+            });
       }
       else {
          $rootScope.alertHeader = hdr;
          $rootScope.alertBody = msg;
          $rootScope.alertClass = (cls) ? cls : 'alert-danger';  //default alert class is alert-danger
          $('#alert-modal').modal({ show: true, keyboard: true , backdrop: 'static' });
+         
+         $(document).bind('keydown', function(e) {
+            if (e.keyCode === 27) {
+               $('#alert-modal').modal('hide');
+               if (action) {
+                  action();
+               }
+            }
+            });
+
          $rootScope.disableButtons = (disableButtons) ? true : false;
          if (action) {
             $('#alert-modal').on('hidden', function() {