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

View File

@ -29,13 +29,22 @@
<div class="form-group">
<div class="col-sm-12" >
<a ng-href="{{OAuthLoginURI}}" ng-if="AuthenticationMethod === 3">
<div class="btn btn-primary btn-sm pull-left" style="margin-left:2px">
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login with OAuth
<div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="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="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>
</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>
<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>
<span class="small text-danger">{{ state.AuthenticationError }}</span>

View File

@ -1,130 +1,146 @@
angular.module('portainer.app').controller('AuthenticationController', ['$q', '$scope', '$state', '$stateParams', '$sanitize', 'Authentication', 'UserService', 'EndpointService', 'StateManager', 'Notifications', 'SettingsService', 'URLHelper',
function($q, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, StateManager, Notifications, SettingsService, URLHelper) {
$scope.logo = StateManager.getState().application.logo;
angular.module('portainer.app')
.controller('AuthenticationController', ['$q', '$scope', '$state', '$stateParams', '$sanitize', 'Authentication', 'UserService', 'EndpointService', 'StateManager', 'Notifications', 'SettingsService', 'URLHelper',
function($q, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, StateManager, Notifications, SettingsService, URLHelper) {
$scope.logo = StateManager.getState().application.logo;
$scope.formValues = {
Username: '',
Password: ''
};
$scope.formValues = {
Username: '',
Password: ''
};
$scope.state = {
AuthenticationError: '',
isInOAuthProcess: true
};
$scope.state = {
AuthenticationError: '',
isInOAuthProcess: true,
OAuthProvider: ''
};
$scope.authenticateUser = function() {
var username = $scope.formValues.Username;
var password = $scope.formValues.Password;
$scope.authenticateUser = function() {
var username = $scope.formValues.Username;
var password = $scope.formValues.Password;
Authentication.login(username, password)
.then(function success() {
checkForEndpoints();
})
.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() {
Authentication.login(username, password)
.then(function success() {
checkForEndpoints();
})
.catch(function error() {
SettingsService.publicSettings()
.then(function success(settings) {
$scope.AuthenticationMethod = settings.AuthenticationMethod;
$scope.OAuthLoginURI = settings.OAuthLoginURI;
});
.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';
});
});
};
if ($stateParams.logout || $stateParams.error) {
Authentication.logout();
$scope.state.AuthenticationError = $stateParams.error;
$scope.state.isInOAuthProcess = false;
return;
}
if (Authentication.isAuthenticated()) {
$state.go('portainer.home');
}
var authenticationEnabled = $scope.applicationState.application.authentication;
if (!authenticationEnabled) {
unauthenticatedFlow();
function unauthenticatedFlow() {
EndpointService.endpoints()
.then(function success(endpoints) {
if (endpoints.length === 0) {
$state.go('portainer.init.endpoint');
} 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');
if (code) {
oAuthLogin(code);
} else {
$scope.state.isInOAuthProcess = false;
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 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) {
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;
});
if (Authentication.isAuthenticated()) {
$state.go('portainer.home');
}
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();
}]);