Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-04 13:25:26 +02:00
Code Issues Releases Activity

feat(oauth): update OAuth UX

Browse source
This commit is contained in:
Anthony Lapenna 2019-02-14 15:58:45 +13:00
parent 16226b1202
commit de76ba4e67
10 changed files with 278 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/extensions/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js Normal file
View file

@ -0,0 +1,56 @@
angular.module('portainer.extensions.oauth')
.controller('OAuthProviderSelectorController', function OAuthProviderSelectorController() {
var ctrl = this;
this.providers = [
{
userIdentifier: 'mail',
scope: 'id,email,name',
name: 'microsoft'
},
{
authUrl: 'https://accounts.google.com/o/oauth2/auth',
accessTokenUrl: 'https://accounts.google.com/o/oauth2/token',
resourceUrl: 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json',
userIdentifier: 'email',
scopes: 'profile email',
name: 'google'
},
{
authUrl: 'https://github.com/login/oauth/authorize',
accessTokenUrl: 'https://github.com/login/oauth/access_token',
resourceUrl: 'https://api.github.com/user',
userIdentifier: 'login',
scopes: 'id email name',
name: 'github'
},
{
name: 'custom'
}
];
this.$onInit = onInit;
function onInit() {
console.log(ctrl.provider.authUrl);
if (ctrl.provider.authUrl) {
ctrl.provider = getProviderByURL(ctrl.provider.authUrl);
} else {
ctrl.provider = ctrl.providers[0];
}
ctrl.onSelect(ctrl.provider);
}
function getProviderByURL(providerAuthURL) {
if (providerAuthURL.indexOf('login.microsoftonline.com') !== -1) {
return ctrl.providers[0];
}
else if (providerAuthURL.indexOf('accounts.google.com') !== -1) {
return ctrl.providers[1];
}
else if (providerAuthURL.indexOf('github.com') !== -1) {
return ctrl.providers[2];
}
return ctrl.provider[3];
}
});

58
app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.html
View file

@ -1,17 +1,49 @@
<div class="col-sm-12 form-section-title">
Provider
</div>
Provider
</div>
<div class="form-group">
<div class="col-sm-12">
<select
class="form-control"
id="oauth-provider-selector"
ng-model="$ctrl.selectedProvider"
ng-change="$ctrl.onSelect($ctrl.selectedProvider)"
ng-options="provider as provider.name for provider in $ctrl.providers"
>
</select>
<div class="form-group"></div>
<div class="form-group" style="margin-bottom: 0">
<div class="boxselector_wrapper">
<div ng-click="$ctrl.onSelect($ctrl.provider)">
<input type="radio" id="oauth_provider_microsoft" ng-model="$ctrl.provider" ng-value="$ctrl.providers[0]">
<label for="oauth_provider_microsoft">
<div class="boxselector_header">
<i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
Microsoft
</div>
<p>Microsoft OAuth provider</p>
</label>
</div>
<div ng-click="$ctrl.onSelect($ctrl.provider)">
<input type="radio" id="oauth_provider_google" ng-model="$ctrl.provider" ng-value="$ctrl.providers[1]">
<label for="oauth_provider_google">
<div class="boxselector_header">
<i class="fab fa-google" aria-hidden="true" style="margin-right: 2px;"></i>
Google
</div>
<p>Google OAuth provider</p>
</label>
</div>
<div ng-click="$ctrl.onSelect($ctrl.provider)">
<input type="radio" id="oauth_provider_github" ng-model="$ctrl.provider" ng-value="$ctrl.providers[2]">
<label for="oauth_provider_github">
<div class="boxselector_header">
<i class="fab fa-github" aria-hidden="true" style="margin-right: 2px;"></i>
Github
</div>
<p>Github OAuth provider</p>
</label>
</div>
<div ng-click="$ctrl.onSelect($ctrl.provider)">
<input type="radio" id="oauth_provider_custom" ng-model="$ctrl.provider" ng-value="$ctrl.providers[3]">
<label for="oauth_provider_custom">
<div class="boxselector_header">
<i class="fa fa-user-check" aria-hidden="true" style="margin-right: 2px;"></i>
Custom
</div>
<p>Custom OAuth provider</p>
</label>
</div>
</div>
</div>

18
app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.js
View file

@ -1,20 +1,8 @@
angular.module('portainer.extensions.oauth').component('oauthProvidersSelector', {
templateUrl: 'app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.html',
bindings: {
onSelect: '<'
onSelect: '<',
provider: '='
},
controller: function oauthProvidersSelectorController() {
this.providers = [
{
name: 'Facebook',
authUrl: 'https://www.facebook.com/v3.2/dialog/oauth',
accessTokenUrl: 'https://graph.facebook.com/v3.2/oauth/access_token',
resourceUrl: 'https://graph.facebook.com/v3.2/me?fields=email',
userIdentifier: 'email'
},
{
name: 'Custom'
}
];
}
controller: 'OAuthProviderSelectorController'
});