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

feat(oauth): update authentication panel with OAuth provider details

pull/2749/head
Anthony Lapenna 2019-02-19 09:54:02 +13:00
parent e325ad10dd
commit 9918c1260b
2 changed files with 143 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,13 +29,22 @@
<div class="form-group"> <div class="form-group">
<div class="col-sm-12" > <div class="col-sm-12" >
<a ng-href="{{OAuthLoginURI}}" ng-if="AuthenticationMethod === 3"> <a ng-href="{{OAuthLoginURI}}" ng-if="AuthenticationMethod === 3">
<div class="btn btn-primary btn-sm pull-left" style="margin-left:2px"> <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="state.OAuthProvider === 'Microsoft'">
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login with OAuth <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="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="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="state.OAuthProvider === ''">
<i class="fa fa-sign-in-alt" aria-hidden="true" ></i> Login with OAuth
</div> </div>
</a> </a>
<button type="submit" class="btn btn-primary btn-sm pull-right" ng-click="authenticateUser()"><i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login</button> <button type="submit" class="btn btn-primary btn-sm pull-right" ng-click="authenticateUser()"><i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login</button>
<span class="pull-right" style="margin: 5px;" ng-if="state.AuthenticationError"> <span class="pull-right" style="margin: 5px;" ng-if="state.AuthenticationError">
<i class="fa fa-exclamation-triangle red-icon" aria-hidden="true" style="margin-right: 2px;"></i> <i class="fa fa-exclamation-triangle red-icon" aria-hidden="true" style="margin-right: 2px;"></i>
<span class="small text-danger">{{ state.AuthenticationError }}</span> <span class="small text-danger">{{ state.AuthenticationError }}</span>

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

@ -1,130 +1,146 @@
angular.module('portainer.app').controller('AuthenticationController', ['$q', '$scope', '$state', '$stateParams', '$sanitize', 'Authentication', 'UserService', 'EndpointService', 'StateManager', 'Notifications', 'SettingsService', 'URLHelper', angular.module('portainer.app')
function($q, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, StateManager, Notifications, SettingsService, URLHelper) { .controller('AuthenticationController', ['$q', '$scope', '$state', '$stateParams', '$sanitize', 'Authentication', 'UserService', 'EndpointService', 'StateManager', 'Notifications', 'SettingsService', 'URLHelper',
$scope.logo = StateManager.getState().application.logo; function($q, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, StateManager, Notifications, SettingsService, URLHelper) {
$scope.logo = StateManager.getState().application.logo;
$scope.formValues = { $scope.formValues = {
Username: '', Username: '',
Password: '' Password: ''
}; };
$scope.state = { $scope.state = {
AuthenticationError: '', AuthenticationError: '',
isInOAuthProcess: true isInOAuthProcess: true,
}; OAuthProvider: ''
};
$scope.authenticateUser = function() { $scope.authenticateUser = function() {
var username = $scope.formValues.Username; var username = $scope.formValues.Username;
var password = $scope.formValues.Password; var password = $scope.formValues.Password;
Authentication.login(username, password) Authentication.login(username, password)
.then(function success() { .then(function success() {
checkForEndpoints(); checkForEndpoints();
}) })
.catch(function error() { .catch(function error() {
SettingsService.publicSettings()
.then(function success(settings) {
if (settings.AuthenticationMethod === 1) {
return Authentication.login($sanitize(username), $sanitize(password));
}
return $q.reject();
})
.then(function success() {
$state.go('portainer.updatePassword');
})
.catch(function error() {
$scope.state.AuthenticationError = 'Invalid credentials';
});
});
};
function unauthenticatedFlow() {
EndpointService.endpoints()
.then(function success(endpoints) {
if (endpoints.length === 0) {
$state.go('portainer.init.endpoint');
} else {
$state.go($stateParams.redirect || 'portainer.home');
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve endpoints');
});
}
function authenticatedFlow() {
UserService.administratorExists()
.then(function success(exists) {
if (!exists) {
$state.go('portainer.init.admin');
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to verify administrator account existence');
});
}
function checkForEndpoints() {
EndpointService.endpoints()
.then(function success(data) {
var endpoints = data;
var userDetails = Authentication.getUserDetails();
if (endpoints.length === 0 && userDetails.role === 1) {
$state.go('portainer.init.endpoint');
} else {
$state.go($stateParams.redirect || 'portainer.home');
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve endpoints');
});
}
function initView() {
SettingsService.publicSettings() SettingsService.publicSettings()
.then(function success(settings) { .then(function success(settings) {
$scope.AuthenticationMethod = settings.AuthenticationMethod; if (settings.AuthenticationMethod === 1) {
$scope.OAuthLoginURI = settings.OAuthLoginURI; return Authentication.login($sanitize(username), $sanitize(password));
}); }
return $q.reject();
})
.then(function success() {
$state.go('portainer.updatePassword');
})
.catch(function error() {
$scope.state.AuthenticationError = 'Invalid credentials';
});
});
};
if ($stateParams.logout || $stateParams.error) { function unauthenticatedFlow() {
Authentication.logout(); EndpointService.endpoints()
$scope.state.AuthenticationError = $stateParams.error; .then(function success(endpoints) {
$scope.state.isInOAuthProcess = false; if (endpoints.length === 0) {
return; $state.go('portainer.init.endpoint');
}
if (Authentication.isAuthenticated()) {
$state.go('portainer.home');
}
var authenticationEnabled = $scope.applicationState.application.authentication;
if (!authenticationEnabled) {
unauthenticatedFlow();
} else { } else {
authenticatedFlow(); $state.go($stateParams.redirect || 'portainer.home');
} }
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve endpoints');
});
}
var code = URLHelper.getParameter('code'); function authenticatedFlow() {
if (code) { UserService.administratorExists()
oAuthLogin(code); .then(function success(exists) {
} else { if (!exists) {
$scope.state.isInOAuthProcess = false; $state.go('portainer.init.admin');
} }
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to verify administrator account existence');
});
}
function checkForEndpoints() {
EndpointService.endpoints()
.then(function success(data) {
var endpoints = data;
var userDetails = Authentication.getUserDetails();
if (endpoints.length === 0 && userDetails.role === 1) {
$state.go('portainer.init.endpoint');
} else {
$state.go($stateParams.redirect || 'portainer.home');
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve endpoints');
});
}
function determineOauthProvider(LoginURI) {
if (LoginURI.indexOf('login.microsoftonline.com') !== -1) {
return 'Microsoft';
}
else if (LoginURI.indexOf('accounts.google.com') !== -1) {
return 'Google';
}
else if (LoginURI.indexOf('github.com') !== -1) {
return 'Github';
}
return 'OAuth';
}
function initView() {
SettingsService.publicSettings()
.then(function success(settings) {
$scope.AuthenticationMethod = settings.AuthenticationMethod;
$scope.OAuthLoginURI = settings.OAuthLoginURI;
$scope.state.OAuthProvider = determineOauthProvider(settings.OAuthLoginURI);
});
if ($stateParams.logout || $stateParams.error) {
Authentication.logout();
$scope.state.AuthenticationError = $stateParams.error;
$scope.state.isInOAuthProcess = false;
return;
} }
function oAuthLogin(code) { if (Authentication.isAuthenticated()) {
return Authentication.OAuthLogin(code) $state.go('portainer.home');
.then(function success() {
URLHelper.cleanParameters();
$state.go('portainer.home');
})
.catch(function error() {
$scope.state.AuthenticationError = 'Unable to login via OAuth';
$scope.state.isInOAuthProcess = false;
});
} }
var authenticationEnabled = $scope.applicationState.application.authentication;
if (!authenticationEnabled) {
unauthenticatedFlow();
} else {
authenticatedFlow();
}
initView(); var code = URLHelper.getParameter('code');
}]); if (code) {
oAuthLogin(code);
} else {
$scope.state.isInOAuthProcess = false;
}
}
function oAuthLogin(code) {
return Authentication.OAuthLogin(code)
.then(function success() {
URLHelper.cleanParameters();
$state.go('portainer.home');
})
.catch(function error() {
$scope.state.AuthenticationError = 'Unable to login via OAuth';
$scope.state.isInOAuthProcess = false;
});
}
initView();
}]);