From 18164181b47a56a863d5ef2343f177b920e80ca4 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Wed, 23 Sep 2015 10:49:56 -0400
Subject: [PATCH] moved login modal to less block styling

---
 awx/ui/client/legacy-styles/ansible-ui.less   |  22 ----
 awx/ui/client/src/login/loginModal.block.less |  23 ++++
 .../client/src/login/loginModal.partial.html  | 113 +++++++++++-------
 3 files changed, 96 insertions(+), 62 deletions(-)
 create mode 100644 awx/ui/client/src/login/loginModal.block.less

diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 2dfc7682e6..7141f12dda 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -366,10 +366,6 @@ textarea.allowresize {
   margin-right: -5px;
 }
 
-.prepend-asterisk--login:before {
-    margin-right: -2px;
-}
-
 .subtitle {
   font-size: 16px;
 }
@@ -547,14 +543,6 @@ dd {
   word-break: break-all;
 }
 
-.login-alert {
-  margin-bottom: 25px;
-  font-size: 14px;
-  font-weight: normal;
-  color: @blue-link;
-  text-align: center;
-}
-
 .controls {
   min-height: 15px;
 }
@@ -593,16 +581,6 @@ dd {
   background-color: @black;
 }
 
-.modal-header.login-header {
-    text-align: center;
-    background-color: @black;
-    border-left: 1px solid #686868;
-    border-right: 1px solid #686868;
-    border-top: 1px solid #686868;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-}
-
 .login-header img {
     width: 60%;
 }
diff --git a/awx/ui/client/src/login/loginModal.block.less b/awx/ui/client/src/login/loginModal.block.less
new file mode 100644
index 0000000000..daac3b8152
--- /dev/null
+++ b/awx/ui/client/src/login/loginModal.block.less
@@ -0,0 +1,23 @@
+/** @define LoginModal */
+
+.LoginModal-header {
+    text-align: center;
+    background-color: #171717;
+    border-left: 1px solid #686868;
+    border-right: 1px solid #686868;
+    border-top: 1px solid #686868;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.LoginModal-alert {
+    margin-bottom: 25px;
+    font-size: 14px;
+    font-weight: normal;
+    color: #1778c3;
+    text-align: center;
+}
+
+.LoginModal-labelAsterisk:before {
+    margin-right: -2px;
+}
diff --git a/awx/ui/client/src/login/loginModal.partial.html b/awx/ui/client/src/login/loginModal.partial.html
index e6bd3215c1..bf80236ca4 100644
--- a/awx/ui/client/src/login/loginModal.partial.html
+++ b/awx/ui/client/src/login/loginModal.partial.html
@@ -1,40 +1,73 @@
-<!-- login modal -->
-<div id="login-modal" class="modal fade">
-   <div class="modal-dialog">
-      <div class="modal-content" id="login-modal-content">
-
-          <div class="modal-header login-header">
-              <img src="" + $basePath + "assets/tower_console_logo.png" >
-          </div>
-          <div class="modal-body" id="login-modal-body">
-              <div class="login-alert" ng-show="!sessionExpired">Welcome to Ansible Tower! &nbsp;Please sign in.</div>
-              <div class="login-alert" ng-show="sessionExpired">Your session timed out due to inactivity. Please sign in.</div>
-              <form id="login-form" name="loginForm" class="form-horizontal" autocomplete="off" novalidate >
-                  <div class="form-group">
-                      <label class="control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk prepend-asterisk--login">Username</label>
-                      <div class="col-md-8 col-sm-8 col-xs-9">
-                          <input type="text" name="login_username" class="form-control" ng-model="login_username"
-                              id="login-username" autocomplete="off" required>
-                          <div class="error" ng-show="loginForm.login_username.$dirty && loginForm.login_username.$error.required">Please enter a username.</div>
-                          <div class="error api-error" ng-bind="usernameError"></div>
-                      </div>
-                  </div>
-                  <div class="form-group">
-                      <label class="control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk repend-asterisk--login">Password</label>
-                      <div class="col-md-8 col-sm-8 col-xs-9">
-                          <input type="password" name="login_password" id="login-password" class="form-control"
-                              ng-model="login_password" required autocomplete="off">
-                          <div class="error" ng-show="loginForm.login_password.$dirty && loginForm.login_password.$error.required">Please enter a password.</div>
-                          <div class="error api-error" ng-bind="passwordError"></div>
-                      </div>
-                  </div>
-              </form>
-          </div>
-          <div class="modal-footer">
-              <button ng-click="systemLogin(login_username, login_password)" id="login-button" class="btn btn-primary"><i class="fa fa-sign-in"></i> Sign in</button>
-          </div>
-
-
-      </div><!-- modal-content -->
-   </div><!-- modal-dialog -->
-</div><!-- modal -->
+<div id="login-modal" class="modal fade LoginModal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header LoginModal-header">
+                <img src="/static/assets/tower_console_logo.png">
+            </div>
+            <div class="modal-body">
+                <div class="LoginModal-alert" ng-show="!sessionExpired">
+                    Welcome to Ansible Tower! &nbsp;Please sign in.
+                </div>
+                <div class="LoginModal-alert" ng-show="sessionExpired">
+                    Your session timed out due to inactivity. Please
+                    sign in.
+                </div>
+                <form id="login-form"
+                    name="loginForm"
+                    class="form-horizontal"
+                    autocomplete="off" novalidate>
+                    <div class="form-group">
+                        <label class="control-label col-md-offset-1
+                            col-md-2 col-sm-offset-1 col-sm-2
+                            col-xs-3 prepend-asterisk
+                            LoginModal-labelAsterisk">Username
+                        </label>
+                        <div class="col-md-8 col-sm-8 col-xs-9">
+                            <input type="text" name="login_username"
+                                class="form-control"
+                                ng-model="login_username"
+                                id="login-username"
+                                autocomplete="off" required>
+                            <div class="error"
+                                ng-show="loginForm.login_username.$dirty &&
+                                loginForm.login_username.$error.required">
+                                Please enter a username.
+                            </div>
+                            <div class="error api-error"
+                                ng-bind="usernameError"></div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-md-offset-1
+                            col-md-2 col-sm-offset-1 col-sm-2
+                            col-xs-3 prepend-asterisk
+                            LoginModal-labelAsterisk">Password
+                        </label>
+                        <div class="col-md-8 col-sm-8 col-xs-9">
+                            <input type="password"
+                                name="login_password"
+                                id="login-password"
+                                class="form-control"
+                                ng-model="login_password" required
+                                autocomplete="off">
+                            <div class="error"
+                                ng-show="loginForm.login_password.$dirty
+                                &&
+                                loginForm.login_password.$error.required">
+                                Please enter a password.
+                            </div>
+                            <div class="error api-error"
+                                ng-bind="passwordError"></div>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button ng-click="systemLogin(login_username, login_password)"
+                    id="login-button" class="btn btn-primary">
+                    <i class="fa fa-sign-in"></i> Sign in
+                </button>
+            </div>
+        </div>
+   </div>
+</div>