From c6ca1b1c2b6661bc933c1a56ce906a495ce3b926 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Wed, 11 Nov 2015 15:29:36 -0500
Subject: [PATCH] update loginModal based on 3.0 mockups

---
 .../login/loginModal/loginModal.block.less    | 99 +++++++++++++++++--
 .../login/loginModal/loginModal.controller.js | 10 +-
 .../login/loginModal/loginModal.partial.html  | 64 ++++++------
 .../loginModal/loginMotalNotice.block.less    | 16 +--
 .../thirdPartySignOn.block.less               | 12 ++-
 .../thirdPartySignOn.partial.html             |  4 +-
 .../thirdPartySignOn.service.js               |  2 +-
 7 files changed, 150 insertions(+), 57 deletions(-)

diff --git a/awx/ui/client/src/login/loginModal/loginModal.block.less b/awx/ui/client/src/login/loginModal/loginModal.block.less
index 262ab3a736..552cc6650f 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.block.less
+++ b/awx/ui/client/src/login/loginModal/loginModal.block.less
@@ -1,40 +1,121 @@
 /** @define LoginModal */
+.LoginModal-dialog {
+    max-width: ~"calc(100% - 30px)";
+    margin: 30px auto;
+    margin-top: 135px;
+}
+
+.LoginModal-content {
+    max-width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+    border: 0;
+    box-shadow: none;
+    background-color: #fff;
+    border-radius: 4px;
+}
 
 .LoginModal-header {
     text-align: center;
-    background-color: #171717;
+    background-color: #167ec4;
+    border-bottom: 0;
+}
+
+.LoginModal-body {
+    padding-top: 15px;
+    padding-bottom: 0px;
 }
 
 .LoginModal-logoImage {
     max-width: 100%;
 }
 
+.LoginModal-logoImage--notCustom {
+    max-width: 190px;
+    margin-top: -6px;
+    margin-bottom: -6px;
+}
+
 .LoginModal-alert {
-    margin-bottom: 25px;
-    font-size: 14px;
+    margin-bottom: 15px;
+    font-size: 16px;
     font-weight: normal;
-    color: #1778c3;
-    text-align: center;
+    color: #161b1f;
+    transition: opacity 0.2s;
 }
 
 .LoginModal-alert--error {
     color: #ff5850;
+    padding-bottom: 4px;
 }
 
-.LoginModal-labelAsterisk:before {
-    margin-right: -2px;
+.LoginModal-alert {
+    opacity: 1;
+}
+
+.LoginModal-alert.ng-hide {
+    display: none;
+    opacity: 0;
+}
+
+.LoginModal-alert.ng-hide-add {
+    display: none;
+    opacity: 0;
+}
+
+.LoginModal-alert.ng-hide-remove {
+    display: block;
+}
+
+.LoginModal-alertIcon {
+    display: flex;
+    align-items: center;
+    line-height: 19px;
+}
+
+.LoginModal-alertIcon:before {
+    margin-right: 10px;
+}
+
+.LoginModal-formGroup {
+    margin-bottom: 15px;
+}
+
+.LoginModal-label {
+    color: #b7b7b7;
+    font-weight: 400;
 }
 
 .LoginModal-footer {
     display: flex;
+    flex-wrap: wrap-reverse;
     align-items: center;
+    padding: 20px;
+    padding-top: 5px;
+    padding-bottom: 0px;
 }
 
 .LoginModal-footerBlock {
     flex: 1 0 auto;
-    text-align: left;
+    margin-bottom: 20px;
+    display: flex;
+    max-width: 100%;
 }
 
 .LoginModal-footerBlock--submit {
-    text-align: right;
+    flex: initial;
+    margin-left: auto;
+    padding-left: 20px;
+}
+
+.LoginModal-signInButton {
+    transition: background-color 0.2s;
+    background-color: #5bbdbf;
+    color: #fff;
+}
+
+.LoginModal-signInButton:hover,
+.LoginModal-signInButton:focus {
+    color: #fff;
+    background-color: #7bced0;
 }
diff --git a/awx/ui/client/src/login/loginModal/loginModal.controller.js b/awx/ui/client/src/login/loginModal/loginModal.controller.js
index ce451834b4..9741e2887c 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.controller.js
+++ b/awx/ui/client/src/login/loginModal/loginModal.controller.js
@@ -111,7 +111,13 @@ export default ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$l
     });
 
 
-    scope.customLogo = ($AnsibleConfig.custom_logo) ? "custom_console_logo.png" : "tower_console_logo.png";
+    if ($AnsibleConfig.custom_logo) {
+        scope.customLogo = "custom_console_logo.png"
+        scope.customLogoPresent = true;
+    } else {
+        scope.customLogo = "login_modal_logo.png";
+        scope.customLogoPresent = false;
+    }
 
     scope.customLoginInfo = $AnsibleConfig.custom_login_info;
     scope.customLoginInfoPresent = (scope.customLoginInfo) ? true : false;
@@ -182,6 +188,7 @@ export default ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$l
         if (Empty(username) || Empty(password)) {
             scope.reset();
             scope.attemptFailed = true;
+            $('#login-username').focus();
         } else {
             Wait('start');
             Authorization.retrieveToken(username, password)
@@ -201,6 +208,7 @@ export default ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$l
                     } else {
                         scope.reset();
                         scope.attemptFailed = true;
+                        $('#login-username').focus();
                     }
                 });
         }
diff --git a/awx/ui/client/src/login/loginModal/loginModal.partial.html b/awx/ui/client/src/login/loginModal/loginModal.partial.html
index 09461b5032..f79bf3dfab 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.partial.html
+++ b/awx/ui/client/src/login/loginModal/loginModal.partial.html
@@ -1,39 +1,42 @@
 <div id="login-modal" class="modal fade LoginModal">
-    <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-dialog LoginModal-dialog">
+        <div class="modal-content LoginModal-content">
             <div class="modal-header LoginModal-header">
-                <img class="LoginModal-logoImage"
+                <img id="login_modal_image" class="LoginModal-logoImage"
+                    ng-class="{'LoginModal-logoImage--notCustom': !customLogoPresent}"
                     ng-src="/static/assets/{{ customLogo }}" >
             </div>
-            <div class="modal-body">
-                <div class="LoginModal-alert" ng-show="!sessionExpired && !sessionLimitExpired">
+            <div class="modal-body LoginModal-body">
+                <div class="LoginModal-alert" ng-show="!sessionExpired && !sessionLimitExpired && !attemptFailed && !thirdPartyAttemptFailed">
                     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 class="LoginModal-alert LoginModal-alert--error" ng-show="sessionExpired">
+                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle">Your session timed out due to inactivity. Please sign in.</i>
                 </div>
-                <div class="LoginModal-alert" ng-show="sessionLimitExpired">
-                    Maximum per-user sessions reached. Please
-                    sign in.
+                <div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionLimitExpired">
+                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle">Maximum per-user sessions reached. Please sign in.</i>
+                </div>
+                <div class="LoginModal-alert LoginModal-alert--error" ng-show="attemptFailed">
+                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle">Invalid username and/or password.  Please try again.</i>
+                </div>
+                <div class="LoginModal-alert LoginModal-alert--error" ng-show="thirdPartyAttemptFailed">
+                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle">{{ thirdPartyAttemptFailed }}</i>
                 </div>
                 <form id="login-form"
                     name="loginForm"
                     class="form-horizontal"
                     autocomplete="off" novalidate>
-                    <div class="form-group">
-                        <label class="control-label
-                            col-md-2 col-sm-2
-                            col-xs-3 prepend-asterisk
-                            LoginModal-labelAsterisk">Username
+                    <div class="form-group LoginModal-formGroup">
+                        <label class="LoginModal-label
+                            col-md-12">USERNAME
                         </label>
-                        <div class="col-md-10 col-sm-10 col-xs-9">
+                        <div class="col-md-12">
                             <input type="text" name="login_username"
                                 class="form-control"
                                 ng-model="login_username"
                                 id="login-username"
                                 autocomplete="off" required>
-                            <div class="error"
+                            <div class="error animate-hide"
                                 ng-show="loginForm.login_username.$dirty &&
                                 loginForm.login_username.$error.required">
                                 Please enter a username.
@@ -42,13 +45,11 @@
                                 ng-bind="usernameError"></div>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label class="control-label
-                            col-md-2 col-sm-2
-                            col-xs-3 prepend-asterisk
-                            LoginModal-labelAsterisk">Password
+                    <div class="form-group LoginModal-formGroup">
+                        <label class="LoginModal-label
+                            col-md-12">PASSWORD
                         </label>
-                        <div class="col-md-10 col-sm-10 col-xs-9">
+                        <div class="col-md-12">
                             <input type="password"
                                 name="login_password"
                                 id="login-password"
@@ -66,23 +67,18 @@
                         </div>
                     </div>
                 </form>
-                <div class="LoginModal-alert LoginModal-alert--error" ng-show="attemptFailed">
-                    Invalid username and/or password.  Please try again.
-                </div>
-                <div class="LoginModal-alert LoginModal-alert--error" ng-show="thirdPartyAttemptFailed">
-                    {{ thirdPartyAttemptFailed }}
-                </div>
-                <div class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">Notice</div>{{ customLoginInfo | sanitize }}</div>
+                <div id="login_modal_notice" class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">NOTICE</div>{{ customLoginInfo | sanitize }}</div>
             </div>
-            <div class="modal-footer LoginModal-footer">
+            <div class="LoginModal-footer">
                 <div class="LoginModal-footerBlock">
                     <third-party-sign-on></third-party-sign-on>
                 </div>
                 <div class="LoginModal-footerBlock
                     LoginModal-footerBlock--submit">
                     <button ng-click="systemLogin(login_username, login_password)"
-                        id="login-button" class="btn btn-primary">
-                        <i class="fa fa-sign-in"></i> Sign in
+                        id="login-button"
+                        class="btn LoginModal-signInButton">
+                        SIGN IN
                     </button>
                 </div>
             </div>
diff --git a/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less b/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
index efcd8a5cf5..66c3d76361 100644
--- a/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
+++ b/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
@@ -2,16 +2,20 @@
 .LoginModalNotice {
     font-size: 12px;
     width: 100%;
-    height: 129px;
-    padding: 5px 10px;
+    max-height: 129px;
+    padding: 15px;
+    padding-top: 10px;
+    margin-bottom: 15px;
     border-radius: 4px;
-    border: 0px;
-    background-color: #efefef;
-    overflow: scroll;
+    border: 1px solid #e1e1e1;
+    background-color: #fff;
+    color: #848992;
+    overflow-y: scroll;
+    overflow-x: visible;
 }
 
 .LoginModalNotice-title {
-    color: #808080;
+    color: #b7b7b7;
     font-weight: bold;
     padding-bottom: 4px;
     font-size: 14px;
diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
index 0f466f5075..be6591b3fd 100644
--- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
+++ b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
@@ -7,8 +7,7 @@
 
 .ThirdPartySignOn-label {
     flex: initial;
-    font-weight: bold;
-    color: #717680;
+    color: #b7b7b7;
 }
 
 .ThirdPartySignOn-item {
@@ -16,11 +15,12 @@
 }
 
 .ThirdPartySignOn-button {
+    transition: color 0.2s;
     flex: 1 0 auto;
     height: 30px;
     width: 30px;
     border-radius: 50%;
-    color: #C1C1C1;
+    color: #ccc;
     background-color: #fff;
     border: 0;
     padding: 0;
@@ -31,7 +31,7 @@
 }
 
 .ThirdPartySignOn-button:hover {
-    color: #717680;
+    color: #e1e1e1;
 }
 
 .ThirdPartySignOn-button--error:hover {
@@ -42,6 +42,10 @@
     font-size: 35px;
 }
 
+.ThirdPartySignOn-icon--gitHub {
+    margin-top: -3px;
+}
+
 .ThirdPartySignOn-icon--fontCustom {
     font-size: 30px;
 }
diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html
index 94e3ba9504..3e5c94f3ab 100644
--- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html
+++ b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html
@@ -1,9 +1,9 @@
 <div class="ThirdPartySignOn" ng-if="thirdPartyLoginSupported">
     <div class="ThirdPartySignOn-label">
-        Sign In With
+        SIGN IN WITH
     </div>
     <div ng-repeat="item in loginItems" class="ThirdPartySignOn-item">
-        <button type="button" class="ThirdPartySignOn-button"   
+        <button type="button" class="ThirdPartySignOn-button"
             ng-class="item.button" data-placement="top"
             ng-attr-aw-tool-tip="{{ item.tooltip }}"
             ng-click="goTo(item.link)">
diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js
index 4129b9b758..0110aac95b 100644
--- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js
+++ b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js
@@ -40,7 +40,7 @@
                         var newOption = {};
 
                         newOption.type = "github";
-                        newOption.icon = "fa-github";
+                        newOption.icon = "fa-github ThirdPartySignOn-icon--gitHub";
                         newOption.link = option.login_url;
                         newOption.tooltip = "Sign in with GitHub";