From 77f9523984687967832b5b69a022ba80cb7b2584 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Mon, 16 Nov 2015 13:18:52 -0500
Subject: [PATCH] demodalize login to deal with back button issues

---
 .../src/login/loginModal/loginModal.block.less   | 16 +++++++++++++---
 .../src/login/loginModal/loginModal.directive.js |  6 ------
 .../src/login/loginModal/loginModal.partial.html | 11 ++++++-----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/awx/ui/client/src/login/loginModal/loginModal.block.less b/awx/ui/client/src/login/loginModal/loginModal.block.less
index 552cc6650f..34f77bf899 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.block.less
+++ b/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 {
diff --git a/awx/ui/client/src/login/loginModal/loginModal.directive.js b/awx/ui/client/src/login/loginModal/loginModal.directive.js
index 4d5964025f..700399a4aa 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.directive.js
+++ b/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'
-                    });
                 }
             };
         }
diff --git a/awx/ui/client/src/login/loginModal/loginModal.partial.html b/awx/ui/client/src/login/loginModal/loginModal.partial.html
index d5455c0452..fff09a430c 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.partial.html
+++ b/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>