demodalize login to deal with back button issues

awx/ui/client/src/login/loginModal/loginModal.block.less

@@ -1,6 +1,5 @@
 /** @define LoginModal */
 .LoginModal-dialog {
-    max-width: ~"calc(100% - 30px)";
     margin: 30px auto;
     margin-top: 135px;
 }
@@ -13,17 +12,28 @@
     box-shadow: none;
     background-color: #fff;
     border-radius: 4px;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.LoginModal-content.is-loggedOut {
+    opacity: 1;
+    transition: opacity 0.5s;
 }
 
 .LoginModal-header {
     text-align: center;
     background-color: #167ec4;
     border-bottom: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
 }
 
 .LoginModal-body {
     padding-top: 15px;
     padding-bottom: 0px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .LoginModal-logoImage {
@@ -32,8 +42,8 @@
 
 .LoginModal-logoImage--notCustom {
     max-width: 190px;
-    margin-top: -6px;
-    margin-bottom: -6px;
+    margin-top: 6px;
+    margin-bottom: 6px;
 }
 
 .LoginModal-alert {

awx/ui/client/src/login/loginModal/loginModal.directive.js

@@ -15,12 +15,6 @@ export default
                 controller: authenticationController,
                 templateUrl: templateUrl('login/loginModal/loginModal'),
                 link: function(scope, element, attrs) {
-                    // Display the login dialog
-                    $('#login-modal').modal({
-                        show: true,
-                        keyboard: false,
-                        backdrop: 'static'
-                    });
                 }
             };
         }

awx/ui/client/src/login/loginModal/loginModal.partial.html

@@ -1,12 +1,13 @@
-<div id="login-modal" class="modal fade LoginModal">
-    <div class="modal-dialog LoginModal-dialog">
-        <div class="modal-content LoginModal-content">
-            <div class="modal-header LoginModal-header">
+<div id="login-modal" class="LoginModal">
+    <div class="LoginModal-dialog">
+        <div class="LoginModal-content"
+            ng-class="{'is-loggedOut' : !$root.current_user.username}">
+            <div class="LoginModal-header">
                 <img id="login_modal_image" class="LoginModal-logoImage"
                     ng-class="{'LoginModal-logoImage--notCustom': !customLogoPresent}"
                     ng-src="/static/assets/{{ customLogo }}" >
             </div>
-            <div class="modal-body LoginModal-body">
+            <div class="LoginModal-body">
                 <div class="LoginModal-alert" ng-show="!sessionExpired && !sessionLimitExpired && !attemptFailed && !thirdPartyAttemptFailed">
                     Welcome to Ansible Tower! &nbsp;Please sign in.
                 </div>