github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(frontend): de-emphasize internal login when OAuth is enabled (#3065) (#4565) 

* feat(frontend): de-emphasize internal login when OAuth is enabled (#3065)

* feat(frontend): change the "Use internal authentication" style to be primary (#3065)

* feat(frontend): resize the login with "provider" button to use a 120% font size (#3065)

* feat(frontend): remove unused css for h1 tag (#3065)

Co-authored-by: Simon Meng <simon.meng@portainer.io>
pull/4609/head
cong meng 2021-01-08 15:30:43 +13:00 committed by GitHub
parent cf508065ec
commit 105d1ae519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/css/app.css
View File

@ -927,6 +927,27 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
z-index: 2;
}
.striketext:before,
.striketext:after {
background-color: #777777;
content: '';
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.striketext:before {
right: 0.5em;
margin-left: -50%;
}
.striketext:after {
left: 0.5em;
margin-right: -50%;
}
/*bootbox override*/
.modal-open {
padding-right: 0 !important;

73
app/portainer/views/auth/auth.html
View File

@ -8,41 +8,62 @@
<img ng-if="ctrl.logo" ng-src="{{ ctrl.logo }}" class="simple-box-logo" />
</div>
<!-- !login box logo -->
<!-- login panel -->
<div class="panel panel-default" ng-if="!ctrl.state.loginInProgress">
<div class="panel-body">
<!-- login form -->
<form class="simple-box-form form-horizontal">
<!-- username input -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input id="username" type="text" class="form-control" name="username" ng-model="ctrl.formValues.Username" auto-focus />
</div>
<!-- !username input -->
<!-- password input -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input id="password" type="password" class="form-control" name="password" ng-model="ctrl.formValues.Password" />
</div>
<!-- !password input -->
<!-- login button -->
<div class="form-group">
<div class="col-sm-12">
<a ng-href="{{ ctrl.OAuthLoginURI }}" ng-if="ctrl.AuthenticationMethod === 3">
<div class="btn btn-primary btn-sm pull-left" style="margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'Microsoft'">
<div class="col-sm-12" style="display: flex; justify-content: center;" ng-if="ctrl.state.showOAuthLogin">
<a ng-href="{{ ctrl.OAuthLoginURI }}">
<div class="btn btn-primary pull-left" style="font-size: 120%; margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'Microsoft'">
<i class="fab fa-microsoft" aria-hidden="true"></i> Login with Microsoft
</div>
<div class="btn btn-primary btn-sm pull-left" style="margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'Google'">
<div class="btn btn-primary pull-left" style="font-size: 120%; margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'Google'">
<i class="fab fa-google" aria-hidden="true"></i> Login with Google
</div>
<div class="btn btn-primary btn-sm pull-left" style="margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'Github'">
<div class="btn btn-primary pull-left" style="font-size: 120%; margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'Github'">
<i class="fab fa-github" aria-hidden="true"></i> Login with Github
</div>
<div class="btn btn-primary btn-sm pull-left" style="margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'OAuth'">
<div class="btn btn-primary pull-left" style="font-size: 120%; margin-left: 2px;" ng-if="ctrl.state.OAuthProvider === 'OAuth'">
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login with OAuth
</div>
</a>
</div>
</div>
<!-- divider -->
<div class="form-group" ng-if="ctrl.state.showOAuthLogin">
<div class="col-sm-12" style="display: flex; align-items: center; justify-content: center;">
<div class="striketext small text-muted" style="display: flex; align-items: center; justify-content: center; width: 90%;">or</div>
</div>
</div>
<!-- use internal auth button -->
<div class="form-group" ng-if="ctrl.state.showOAuthLogin && !ctrl.state.showStandardLogin">
<div class="col-sm-12" style="display: flex; justify-content: center;">
<div class="btn btn-sm btn-primary pull-left" style="margin-left: 2px;" ng-click="ctrl.toggleStandardLogin()">
Use internal authentication
</div>
</div>
</div>
<!-- !username input -->
<div class="input-group" ng-if="ctrl.state.showStandardLogin">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input id="username" type="text" class="form-control" name="username" ng-model="ctrl.formValues.Username" auto-focus />
</div>
<!-- password input -->
<div class="input-group" ng-if="ctrl.state.showStandardLogin">
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input id="password" type="password" class="form-control" name="password" ng-model="ctrl.formValues.Password" />
</div>
<div class="form-group" ng-if="ctrl.state.showStandardLogin">
<!-- login button -->
<div class="col-sm-12" style="display: flex; align-items: center; justify-content: center;">
<button
type="submit"
class="btn btn-primary btn-sm pull-right"
@ -53,19 +74,19 @@
<span ng-hide="ctrl.state.loginInProgress"><i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login</span>
<span ng-show="ctrl.state.loginInProgress">Login in progress...</span>
</button>
<span class="pull-right" style="margin: 5px;" ng-if="ctrl.state.AuthenticationError">
<i class="fa fa-exclamation-triangle red-icon" aria-hidden="true" style="margin-right: 2px;"></i>
<span class="small text-danger">{{ ctrl.state.AuthenticationError }}</span>
</span>
</div>
</div>
<!-- !login button -->
</form>
<!-- !login form -->
<!-- error message -->
<div class="pull-right" ng-if="ctrl.state.AuthenticationError">
<i class="fa fa-exclamation-triangle red-icon" aria-hidden="true" style="margin-right: 2px;"></i>
<span class="small text-danger">{{ ctrl.state.AuthenticationError }}</span>
</div>
</div>
</div>
<!-- !login panel -->
<div class="panel panel-default" ng-show="ctrl.state.loginInProgress">
<div class="panel-body">

11
app/portainer/views/auth/authController.js
View File

@ -40,6 +40,8 @@ class AuthenticationController {
Password: '',
};
this.state = {
showOAuthLogin: false,
showStandardLogin: false,
AuthenticationError: '',
loginInProgress: true,
OAuthProvider: '',
@ -222,12 +224,17 @@ class AuthenticationController {
}
}
toggleStandardLogin() {
this.state.showStandardLogin = !this.state.showStandardLogin;
}
async onInit() {
try {
const settings = await this.SettingsService.publicSettings();
this.AuthenticationMethod = settings.AuthenticationMethod;
this.state.OAuthProvider = this.determineOauthProvider(settings.OAuthLoginURI);
this.state.showOAuthLogin = settings.AuthenticationMethod === 3;
this.state.showStandardLogin = !this.state.showOAuthLogin;
this.state.OAuthLoginURI = settings.OAuthLoginURI;
this.state.OAuthProvider = this.determineOauthProvider(settings.OAuthLoginURI);
const code = this.URLHelper.getParameter('code');
const state = this.URLHelper.getParameter('state');