feat(oauth): update OAuth configuration UX

api/http/handler/settings/settings_public.go

@@ -33,8 +33,7 @@ func (handler *Handler) settingsPublic(w http.ResponseWriter, r *http.Request) *
 		AllowPrivilegedModeForRegularUsers: settings.AllowPrivilegedModeForRegularUsers,
 		EnableHostManagementFeatures:       settings.EnableHostManagementFeatures,
 		ExternalTemplates:                  false,
-		// TODO: check if state=portainer useful or not
+		OAuthLoginURI: fmt.Sprintf("%s?response_type=code&client_id=%s&redirect_uri=%s&scope=%s&prompt=login",
-		OAuthLoginURI: fmt.Sprintf("%s?response_type=code&client_id=%s&redirect_uri=%s&scope=%s&state=portainer&prompt=login",
 			settings.OAuthSettings.AuthorizationURI,
 			settings.OAuthSettings.ClientID,
 			settings.OAuthSettings.RedirectURI,

app/extensions/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js

@@ -40,7 +40,7 @@ angular.module('portainer.extensions.oauth')
       } else {
         ctrl.provider = ctrl.providers[0];
       }
-      ctrl.onSelect(ctrl.provider);
+      ctrl.onSelect(ctrl.provider, false);
     }
 
     function getProviderByURL(providerAuthURL) {

app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.html

@@ -5,7 +5,7 @@
 <div class="form-group"></div>
 <div class="form-group" style="margin-bottom: 0">
   <div class="boxselector_wrapper">
-    <div ng-click="$ctrl.onSelect($ctrl.provider)">
+    <div ng-click="$ctrl.onSelect($ctrl.provider, true)">
       <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">
@@ -15,7 +15,7 @@
         <p>Microsoft OAuth provider</p>
       </label>
     </div>
-    <div ng-click="$ctrl.onSelect($ctrl.provider)">
+    <div ng-click="$ctrl.onSelect($ctrl.provider, true)">
       <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">
@@ -25,7 +25,7 @@
         <p>Google OAuth provider</p>
       </label>
     </div>
-    <div ng-click="$ctrl.onSelect($ctrl.provider)">
+    <div ng-click="$ctrl.onSelect($ctrl.provider, true)">
       <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">
@@ -35,7 +35,7 @@
         <p>Github OAuth provider</p>
       </label>
     </div>
-    <div ng-click="$ctrl.onSelect($ctrl.provider)">
+    <div ng-click="$ctrl.onSelect($ctrl.provider, true)">
       <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">

app/extensions/oauth/components/oauth-settings/oauth-settings-controller.js

@@ -11,7 +11,7 @@ angular.module('portainer.extensions.oauth')
     this.$onInit = onInit;
     this.onSelectProvider = onSelectProvider;
     this.onMicrosoftTenantIDChange = onMicrosoftTenantIDChange;
-    this.resetProviderConfiguration = resetProviderConfiguration;
+    this.useDefaultProviderConfiguration = useDefaultProviderConfiguration;
 
     function onMicrosoftTenantIDChange() {
       var tenantID = ctrl.state.microsoftTenantID;
@@ -21,7 +21,7 @@ angular.module('portainer.extensions.oauth')
       ctrl.settings.ResourceURI = _.replace('https://graph.windows.net/TENANT_ID/me?api-version=2013-11-08', 'TENANT_ID', tenantID);
     }
 
-    function resetProviderConfiguration() {
+    function useDefaultProviderConfiguration() {
       ctrl.settings.AuthorizationURI = ctrl.state.provider.authUrl;
       ctrl.settings.AccessTokenURI = ctrl.state.provider.accessTokenUrl;
       ctrl.settings.ResourceURI = ctrl.state.provider.resourceUrl;
@@ -33,8 +33,8 @@ angular.module('portainer.extensions.oauth')
       }
     }
 
-    function onSelectProvider(provider) {
+    function useExistingConfiguration() {
-      ctrl.state.provider = provider;
+      var provider = ctrl.state.provider;
       ctrl.settings.AuthorizationURI = ctrl.settings.AuthorizationURI === '' ? provider.authUrl : ctrl.settings.AuthorizationURI;
       ctrl.settings.AccessTokenURI = ctrl.settings.AccessTokenURI === '' ? provider.accessTokenUrl : ctrl.settings.AccessTokenURI;
       ctrl.settings.ResourceURI = ctrl.settings.ResourceURI === '' ? provider.resourceUrl : ctrl.settings.ResourceURI;
@@ -46,10 +46,21 @@ angular.module('portainer.extensions.oauth')
       }
     }
 
+    function onSelectProvider(provider, overrideConfiguration) {
+      ctrl.state.provider = provider;
+
+      if (overrideConfiguration) {
+        useDefaultProviderConfiguration();
+      } else {
+        useExistingConfiguration();
+      }
+    }
+
     function onInit() {
       if (ctrl.settings.RedirectURI === '') {
         ctrl.settings.RedirectURI = window.location.origin;
       }
+
       if (ctrl.settings.AuthorizationURI !== '') {
         ctrl.state.provider.authUrl = ctrl.settings.AuthorizationURI;
 

app/extensions/oauth/components/oauth-settings/oauth-settings.html

@@ -207,7 +207,7 @@
       <a class="small interactive" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
         <i class="fa fa-wrench space-right" aria-hidden="true"></i> Override default configuration
       </a>
-      <a class="small interactive" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetProviderConfiguration()">
+      <a class="small interactive" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.useDefaultProviderConfiguration()">
         <i class="fa fa-cogs space-right" aria-hidden="true"></i> Use default configuration
       </a>
     </div>

app/portainer/views/auth/auth.html

@@ -61,7 +61,7 @@
       <div class="panel panel-default" ng-show="state.isInOAuthProcess">
         <div class="panel-body">
           <div class="form-group text-center">
-              <span class="small text-muted">Connecting with OAuth <span button-spinner="true"></span></span>
+              <span class="small text-muted">OAuth authentication in progress... <span button-spinner="true"></span></span>
           </div>
         </div>
       </div>