Merge pull request #496 from jlmitch5/login_refactor_3

Login refactor 3

awx/ui/client/legacy-styles/ansible-ui.less

@@ -2018,11 +2018,19 @@ button.dropdown-toggle,
     border-bottom-color: #848992;
 }
 
+.tooltip.top .tooltip-arrow {
+    border-top-color: #848992;
+}
+
 .tooltip.Tooltip.fade.bottom.in {
     opacity: 1;
     padding-top: 4px;
 }
 
+.tooltip.in {
+    opacity: 1;
+}
+
 .tooltip-inner {
     background-color: #848992;
 }
@@ -2030,3 +2038,45 @@ button.dropdown-toggle,
 .tooltip-inner--logOut {
     margin-left: -15px !important;
 }
+
+.modal {
+    transition: all 0.3s ease-out !important;
+}
+
+.modal.fade .modal-dialog {
+  transform: translate(0, 0);
+}
+
+.modal-backdrop, .modal-backdrop.fade.in {
+    opacity: .25;
+}
+
+.form-control {
+    border-color: #e1e1e1;
+    background-color: #f6f6f6;
+    color: #161b1f;
+    transition: border-color 0.3s;
+    box-shadow: none;
+}
+
+.form-control:active, .form-control:focus {
+    box-shadow: none;
+    border-color: #167ec4;
+}
+
+.form-control.ng-dirty.ng-invalid, .form-control.ng-dirty.ng-invalid:focus {
+    box-shadow: none;
+}
+
+.error {
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+
+.error.ng-hide-add {
+    display: none;
+}
+
+.error.ng-hide {
+    opacity: 0;
+}

awx/ui/client/src/app.js

@@ -76,6 +76,7 @@ __deferLoadIfEnabled();
 /*#endif#*/
 
 var tower = angular.module('Tower', [
+    'ngAnimate',
     'pendolytics',
     'ngRoute',
     'ngSanitize',

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;
+    margin-bottom: 15px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: normal;
-    color: #1778c3;
+    color: #161b1f;
-    text-align: center;
+    transition: opacity 0.2s;
 }
 
 .LoginModal-alert--error {
     color: #ff5850;
+    padding-bottom: 4px;
 }
 
-.LoginModal-labelAsterisk:before {
+.LoginModal-alert {
-    margin-right: -2px;
+    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;
 }

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();
                     }
                 });
         }

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

@@ -1,33 +1,36 @@
 <div id="login-modal" class="modal fade LoginModal">
-    <div class="modal-dialog">
+    <div class="modal-dialog LoginModal-dialog">
-        <div class="modal-content">
+        <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="modal-body LoginModal-body">
-                <div class="LoginModal-alert" ng-show="!sessionExpired && !sessionLimitExpired">
+                <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">
+                <div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionExpired">
-                    Your session timed out due to inactivity. Please
+                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle">Your session timed out due to inactivity. Please sign in.</i>
-                    sign in.
                 </div>
-                <div class="LoginModal-alert" ng-show="sessionLimitExpired">
+                <div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionLimitExpired">
-                    Maximum per-user sessions reached. Please
+                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle">Maximum per-user sessions reached. Please sign in.</i>
-                    sign in.
+                </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">
+                    <div class="form-group LoginModal-formGroup">
-                        <label class="control-label
+                        <label class="LoginModal-label
-                            col-md-2 col-sm-2
+                            col-md-12">USERNAME
-                            col-xs-3 prepend-asterisk
-                            LoginModal-labelAsterisk">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"
@@ -42,13 +45,11 @@
                                 ng-bind="usernameError"></div>
                         </div>
                     </div>
-                    <div class="form-group">
+                    <div class="form-group LoginModal-formGroup">
-                        <label class="control-label
+                        <label class="LoginModal-label
-                            col-md-2 col-sm-2
+                            col-md-12">PASSWORD
-                            col-xs-3 prepend-asterisk
-                            LoginModal-labelAsterisk">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">
+                <div id="login_modal_notice" class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">NOTICE</div>{{ customLoginInfo | sanitize }}</div>
-                    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>
-            <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">
+                        id="login-button"
-                        <i class="fa fa-sign-in"></i> Sign in
+                        class="btn LoginModal-signInButton">
+                        SIGN IN
                     </button>
                 </div>
             </div>

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

@@ -2,16 +2,20 @@
 .LoginModalNotice {
     font-size: 12px;
     width: 100%;
-    height: 129px;
+    max-height: 129px;
-    padding: 5px 10px;
+    padding: 15px;
+    padding-top: 10px;
+    margin-bottom: 15px;
     border-radius: 4px;
-    border: 0px;
+    border: 1px solid #e1e1e1;
-    background-color: #efefef;
+    background-color: #fff;
-    overflow: scroll;
+    color: #848992;
+    overflow-y: scroll;
+    overflow-x: visible;
 }
 
 .LoginModalNotice-title {
-    color: #808080;
+    color: #b7b7b7;
     font-weight: bold;
     padding-bottom: 4px;
     font-size: 14px;

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

@@ -7,8 +7,7 @@
 
 .ThirdPartySignOn-label {
     flex: initial;
-    font-weight: bold;
+    color: #b7b7b7;
-    color: #717680;
 }
 
 .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;
 }

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

@@ -1,6 +1,6 @@
 <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"

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";