External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 00:57:48 -02:30
Code Issues Packages Projects Releases Wiki Activity

update loginModal based on 3.0 mockups

Browse Source
This commit is contained in:
John Mitchell
2015-11-11 15:29:36 -05:00
parent 0e104249a0
commit c6ca1b1c2b
7 changed files with 150 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
awx/ui/client/src/login/loginModal/loginModal.block.less
View File

@@ -1,40 +1,121 @@
/** @define LoginModal */ /** @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 { .LoginModal-header {
text-align: center; text-align: center;
background-color: #171717; background-color: #167ec4;
border-bottom: 0;
}
.LoginModal-body {
padding-top: 15px;
padding-bottom: 0px;
} }
.LoginModal-logoImage { .LoginModal-logoImage {
max-width: 100%; max-width: 100%;
} }
.LoginModal-logoImage--notCustom {
max-width: 190px;
margin-top: -6px;
margin-bottom: -6px;
}
.LoginModal-alert { .LoginModal-alert {
margin-bottom: 25px; margin-bottom: 15px;
font-size: 14px; font-size: 16px;
font-weight: normal; font-weight: normal;
color: #1778c3; color: #161b1f;
text-align: center; transition: opacity 0.2s;
} }
.LoginModal-alert--error { .LoginModal-alert--error {
color: #ff5850; 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 { .LoginModal-footer {
display: flex; display: flex;
flex-wrap: wrap-reverse;
align-items: center; align-items: center;
padding: 20px;
padding-top: 5px;
padding-bottom: 0px;
} }
.LoginModal-footerBlock { .LoginModal-footerBlock {
flex: 1 0 auto; flex: 1 0 auto;
text-align: left; margin-bottom: 20px;
display: flex;
max-width: 100%;
} }
.LoginModal-footerBlock--submit { .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;
} }

10
awx/ui/client/src/login/loginModal/loginModal.controller.js
View File

@@ -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.customLoginInfo = $AnsibleConfig.custom_login_info;
scope.customLoginInfoPresent = (scope.customLoginInfo) ? true : false; scope.customLoginInfoPresent = (scope.customLoginInfo) ? true : false;
@@ -182,6 +188,7 @@ export default ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$l
if (Empty(username) || Empty(password)) { if (Empty(username) || Empty(password)) {
scope.reset(); scope.reset();
scope.attemptFailed = true; scope.attemptFailed = true;
$('#login-username').focus();
} else { } else {
Wait('start'); Wait('start');
Authorization.retrieveToken(username, password) Authorization.retrieveToken(username, password)
@@ -201,6 +208,7 @@ export default ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$l
} else { } else {
scope.reset(); scope.reset();
scope.attemptFailed = true; scope.attemptFailed = true;
$('#login-username').focus();
} }
}); });
} }

64
awx/ui/client/src/login/loginModal/loginModal.partial.html
View File

@@ -1,39 +1,42 @@
<div id="login-modal" class="modal fade LoginModal"> <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"> <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 }}" > ng-src="/static/assets/{{ customLogo }}" >
</div> </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. Welcome to Ansible Tower! &nbsp;Please sign in.
</div> </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>
<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> </div>
<form id="login-form" <form id="login-form"
name="loginForm" name="loginForm"
class="form-horizontal" class="form-horizontal"
autocomplete="off" novalidate> 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> </label>
<div class="col-md-10 col-sm-10 col-xs-9"> <div class="col-md-12">
<input type="text" name="login_username" <input type="text" name="login_username"
class="form-control" class="form-control"
ng-model="login_username" ng-model="login_username"
id="login-username" id="login-username"
autocomplete="off" required> autocomplete="off" required>
<div class="error" <div class="error animate-hide"
ng-show="loginForm.login_username.$dirty && ng-show="loginForm.login_username.$dirty &&
loginForm.login_username.$error.required"> loginForm.login_username.$error.required">
Please enter a username. Please enter a username.
@@ -42,13 +45,11 @@
ng-bind="usernameError"></div> ng-bind="usernameError"></div>
</div> </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> </label>
<div class="col-md-10 col-sm-10 col-xs-9"> <div class="col-md-12">
<input type="password" <input type="password"
name="login_password" name="login_password"
id="login-password" id="login-password"
@@ -66,23 +67,18 @@
</div> </div>
</div> </div>
</form> </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>
<div class="LoginModal-alert LoginModal-alert--error" ng-show="thirdPartyAttemptFailed"> <div class="LoginModal-footer">
{{ 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-footerBlock"> <div class="LoginModal-footerBlock">
<third-party-sign-on></third-party-sign-on> <third-party-sign-on></third-party-sign-on>
</div> </div>
<div class="LoginModal-footerBlock <div class="LoginModal-footerBlock
LoginModal-footerBlock--submit"> LoginModal-footerBlock--submit">
<button ng-click="systemLogin(login_username, login_password)" <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> </button>
</div> </div>
</div> </div>

16
awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
View File

@@ -2,16 +2,20 @@
.LoginModalNotice { .LoginModalNotice {
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;
height: 129px; max-height: 129px;
padding: 5px 10px; padding: 15px;
padding-top: 10px;
margin-bottom: 15px;
border-radius: 4px; 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 { .LoginModalNotice-title {
color: #808080; color: #b7b7b7;
font-weight: bold; font-weight: bold;
padding-bottom: 4px; padding-bottom: 4px;
font-size: 14px; font-size: 14px;

12
awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
View File

@@ -7,8 +7,7 @@
.ThirdPartySignOn-label { .ThirdPartySignOn-label {
flex: initial; flex: initial;
font-weight: bold; color: #b7b7b7;
color: #717680;
} }
.ThirdPartySignOn-item { .ThirdPartySignOn-item {
@@ -16,11 +15,12 @@
} }
.ThirdPartySignOn-button { .ThirdPartySignOn-button {
transition: color 0.2s;
flex: 1 0 auto; flex: 1 0 auto;
height: 30px; height: 30px;
width: 30px; width: 30px;
border-radius: 50%; border-radius: 50%;
color: #C1C1C1; color: #ccc;
background-color: #fff; background-color: #fff;
border: 0; border: 0;
padding: 0; padding: 0;
@@ -31,7 +31,7 @@
} }
.ThirdPartySignOn-button:hover { .ThirdPartySignOn-button:hover {
color: #717680; color: #e1e1e1;
} }
.ThirdPartySignOn-button--error:hover { .ThirdPartySignOn-button--error:hover {
@@ -42,6 +42,10 @@
font-size: 35px; font-size: 35px;
} }
.ThirdPartySignOn-icon--gitHub {
margin-top: -3px;
}
.ThirdPartySignOn-icon--fontCustom { .ThirdPartySignOn-icon--fontCustom {
font-size: 30px; font-size: 30px;
} }

2
awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html
View File

@@ -1,6 +1,6 @@
<div class="ThirdPartySignOn" ng-if="thirdPartyLoginSupported"> <div class="ThirdPartySignOn" ng-if="thirdPartyLoginSupported">
<div class="ThirdPartySignOn-label"> <div class="ThirdPartySignOn-label">
Sign In With SIGN IN WITH
</div> </div>
<div ng-repeat="item in loginItems" class="ThirdPartySignOn-item"> <div ng-repeat="item in loginItems" class="ThirdPartySignOn-item">
<button type="button" class="ThirdPartySignOn-button" <button type="button" class="ThirdPartySignOn-button"

2
awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js
View File

@@ -40,7 +40,7 @@
var newOption = {}; var newOption = {};
newOption.type = "github"; newOption.type = "github";
newOption.icon = "fa-github"; newOption.icon = "fa-github ThirdPartySignOn-icon--gitHub";
newOption.link = option.login_url; newOption.link = option.login_url;
newOption.tooltip = "Sign in with GitHub"; newOption.tooltip = "Sign in with GitHub";