From dc2a8cf1f49e9f88544f0993a7d514f3f6ee4958 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Thu, 21 Feb 2019 14:02:25 +1300
Subject: [PATCH] feat(oauth): update OAuth configuration UX

---
 api/http/handler/settings/settings_public.go  |  3 +--
 .../oauth-provider-selector-controller.js     |  2 +-
 .../oauth-providers-selector.html             |  8 ++++----
 .../oauth-settings-controller.js              | 19 +++++++++++++++----
 .../oauth-settings/oauth-settings.html        |  2 +-
 app/portainer/views/auth/auth.html            |  2 +-
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/api/http/handler/settings/settings_public.go b/api/http/handler/settings/settings_public.go
index 800c43641..cc1e07854 100644
--- a/api/http/handler/settings/settings_public.go
+++ b/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&state=portainer&prompt=login",
+		OAuthLoginURI: fmt.Sprintf("%s?response_type=code&client_id=%s&redirect_uri=%s&scope=%s&prompt=login",
 			settings.OAuthSettings.AuthorizationURI,
 			settings.OAuthSettings.ClientID,
 			settings.OAuthSettings.RedirectURI,
diff --git a/app/extensions/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js b/app/extensions/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js
index 73721cb1c..1cb1155cc 100644
--- a/app/extensions/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js
+++ b/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) {
diff --git a/app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.html b/app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.html
index 8422f0900..56023908e 100644
--- a/app/extensions/oauth/components/oauth-providers-selector/oauth-providers-selector.html
+++ b/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">
diff --git a/app/extensions/oauth/components/oauth-settings/oauth-settings-controller.js b/app/extensions/oauth/components/oauth-settings/oauth-settings-controller.js
index c7de7e428..07d39e6cc 100644
--- a/app/extensions/oauth/components/oauth-settings/oauth-settings-controller.js
+++ b/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) {
-      ctrl.state.provider = provider;
+    function useExistingConfiguration() {
+      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;
 
diff --git a/app/extensions/oauth/components/oauth-settings/oauth-settings.html b/app/extensions/oauth/components/oauth-settings/oauth-settings.html
index a3ec3169c..1ea16c374 100644
--- a/app/extensions/oauth/components/oauth-settings/oauth-settings.html
+++ b/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>
diff --git a/app/portainer/views/auth/auth.html b/app/portainer/views/auth/auth.html
index 1aea214f0..81f5a4251 100644
--- a/app/portainer/views/auth/auth.html
+++ b/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>