Merge pull request #496 from jlmitch5/login_refactor_3

Login refactor 3
2026-01-14 03:10:42 -03:30 · 2015-11-12 17:54:36 -05:00 · 2015-11-12 17:54:36 -05:00 · 31a3843e50
commit 31a3843e50
parent ce78fee680 ce027a8e9d
10 changed files with 201 additions and 57 deletions
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/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;
+}
--- a/awx/ui/client/lib/angular-animate/.bower.json
+++ b/awx/ui/client/lib/angular-animate/.bower.json
@ -16,4 +16,4 @@
  "_source": "git://github.com/angular/bower-angular-animate.git",
  "_target": "~1.4.7",
  "_originalSource": "angular-animate"
-}
+}
--- a/awx/ui/client/src/app.js
+++ b/awx/ui/client/src/app.js
@ -76,6 +76,7 @@ __deferLoadIfEnabled();
 /*#endif#*/

 var tower = angular.module('Tower', [
+    'ngAnimate',
    'pendolytics',
    'ngRoute',
    'ngSanitize',
--- 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;
 }
--- 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();
                    }
                });
        }
--- a/awx/ui/client/src/login/loginModal/loginModal.partial.html
+++ b/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-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"
@ -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>
--- 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;
--- 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;
 }
--- 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)">
--- 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";