Merge pull request #203 from umbraco/feature/manually-exchange-authorization-code-for-access-token

Add feature for manually exchange an authorization code for a token

Author: acoumb

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/css/styles.css

@@ -19,11 +19,11 @@
     background-color: #eee;
 }
 
-    .hsFormsList a i {
-        position: absolute;
-        top: .4rem;
-        left: .25rem;
-    }
+.hsFormsList a i {
+    position: absolute;
+    top: .4rem;
+    left: .25rem;
+}
 
 .hsFormsList .formLine {
     display: block;
@@ -33,4 +33,11 @@
     padding-top: 4px;
 }
 
+#authCode {
+    display: none;
+}
 
+#inAuthCode {
+    width: 40%;
+    margin: 0 auto;
+}

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/settings.controller.js

@@ -39,11 +39,17 @@
 
     vm.onConnectClick = function () {
 
-        window.addEventListener("message", getAccessToken, false);
+        window.addEventListener("message", handleOAuthSuccess, false);
         umbracoCmsIntegrationsCrmHubspotResource.getAuthorizationUrl().then(function (response) {
             vm.authWindow = window.open(response,
                 "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
 
+            // check in 7 seconds for authorization window closed
+            setTimeout(() => {
+                if (vm.authWindow && !vm.authWindow.closed) {
+                    toggleAuthCodeSection(true);
+                }
+            }, 7000);
         });
     }
 
@@ -62,26 +68,40 @@
         });
     }
 
-    function getAccessToken(event) {
+    vm.onAuthorize = function () {
+        getAccessToken(vm.authCode);
+    }
+
+    function handleOAuthSuccess(event) {
         if (event.data.type === "hubspot:oauth:success") {
-            umbracoCmsIntegrationsCrmHubspotResource.getAccessToken(event.data.code).then(function (response) {
-                vm.authEventHandled = true;
+            getAccessToken(event.data.code);
+        }
+    }
 
-                if (response.startsWith("Error:")) {
-                    if (typeof $scope.connected === "undefined")
-                        notificationsService.error("HubSpot Configuration", response);
-                } else {
-                    vm.oauthSetup.isConnected = true;
-                    vm.status.description = umbracoCmsIntegrationsCrmHubspotService.configDescription.OAuthConnected;
+    function getAccessToken(code) {
+        if (!code || code.length == 0) {
+            notificationsService.warning("HubSpot Configuration", "Please add a valid authentication code.");
+            return; 
+        }
 
-                    if (typeof $scope.connected === "undefined")
-                        notificationsService.success("HubSpot Configuration", "OAuth connected.");
+        umbracoCmsIntegrationsCrmHubspotResource.getAccessToken(code).then(function (response) {
+            vm.authEventHandled = true;
+            toggleAuthCodeSection(false);
 
-                    if (typeof $scope.connected === "function")
-                        $scope.connected();
-                }
-            });
-        }
+            if (response.startsWith("Error:")) {
+                if (typeof $scope.connected === "undefined")
+                    notificationsService.error("HubSpot Configuration", response);
+            } else {
+                vm.oauthSetup.isConnected = true;
+                vm.status.description = umbracoCmsIntegrationsCrmHubspotService.configDescription.OAuthConnected;
+
+                if (typeof $scope.connected === "undefined")
+                    notificationsService.success("HubSpot Configuration", "OAuth connected.");
+
+                if (typeof $scope.connected === "function")
+                    $scope.connected();
+            }
+        });
     }
 
     function validateOAuthSetup() {
@@ -105,6 +125,10 @@
 
         });
     }
+
+    function toggleAuthCodeSection(isVisible) {
+        document.getElementById("authCode").style.display = isVisible ? "block" : "none";
+    }
 }
 
 angular.module("umbraco")

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/settings.html

@@ -18,4 +18,13 @@
                     disabled="!vm.oauthSetup.isConnected">
         </umb-button>
     </div>
+    <div id="authCode" class="mt3">
+        <input id="inAuthCode" type="text" ng-model="vm.authCode" placeholder="Authorization code" no-dirty-check />
+        <umb-button action="vm.onAuthorize()"
+                    type="button"
+                    button-style="primary"
+                    state="init"
+                    label="Authorize">
+        </umb-button>
+    </div>
 </div>

src/Umbraco.Cms.Integrations.Crm.Hubspot/Umbraco.Cms.Integrations.Crm.Hubspot.csproj

@@ -10,7 +10,7 @@
 		<PackageIconUrl></PackageIconUrl>
 		<PackageProjectUrl>https://github.com/umbraco/Umbraco.Cms.Integrations/blob/main/src/Umbraco.Cms.Integrations.Crm.Hubspot</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/umbraco/Umbraco.Cms.Integrations</RepositoryUrl>
-		<Version>4.0.2</Version>
+		<Version>4.0.3</Version>
 		<Authors>Umbraco HQ</Authors>
 		<Company>Umbraco</Company>
 		<PackageTags>Umbraco;Umbraco-Marketplace</PackageTags>
@@ -60,10 +60,6 @@
 		</Content>
 	</ItemGroup>
 
-	<ItemGroup>
-	  <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Hubspot\js\hubspotauthorization.directive.js" />
-	</ItemGroup>
-
 	<ItemGroup>
 		<Content Include="hubspot.png">
 			<Pack>true</Pack>