Merge pull request #204 from umbraco/feature/dynamics-manually-exchange-auth-code-for-access-token

Add feature to manually exchange auth codes

Author: acoumb

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

@@ -35,4 +35,13 @@
 
 .dynFormSelected {
     background: #fee4e1;
+}
+
+#authCode {
+    display: none;
+}
+
+#inAuthCode {
+    width: 40%;
+    margin: 0 auto;
 }

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/configuration.controller.js

@@ -21,10 +21,17 @@
 
     vm.onConnectClick = function () {
 
-        window.addEventListener("message", getAccessToken, false);
+        window.addEventListener("message", handleOAuthSuccess, false);
         umbracoCmsIntegrationsCrmDynamicsResource.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);
         });
     }
 
@@ -45,33 +52,50 @@
         });
     }
 
-    function getAccessToken(event) {
+    vm.onAuthorize = function () {
+        getAccessToken(vm.authCode);
+    }
+
+    function getAccessToken(code) {
+        if (!code || code.length == 0) {
+            notificationsService.warning("Dynamics Configuration", "Please add a valid authentication code.");
+            return;
+        }
+
+        umbracoCmsIntegrationsCrmDynamicsResource.getAccessToken(event.data.code).then(function (response) {
+            if (response.startsWith("Error:")) {
+
+                // if directive runs from property editor, the notifications should be hidden, because they will not be displayed properly behind the overlay window.
+                // if directive runs from data type, the notifications are displayed
+                if (typeof $scope.connected === "undefined")
+                    notificationsService.error("Dynamics Configuration", response);
+            } else {
+                vm.oauthConfig.isConnected = true;
+
+                // if directive runs from property editor, the notifications should be hidden, because they will not be displayed properly behind the overlay window.
+                // if directive runs from data type, the notifications are displayed
+                if (typeof $scope.connected === "undefined")
+                    notificationsService.success("Dynamics Configuration", "OAuth connected.");
+
+                umbracoCmsIntegrationsCrmDynamicsResource.getSystemUserFullName().then(function (response) {
+                    vm.oauthConfig.fullName = response;
+                });
+
+                if (typeof $scope.connected === "function")
+                    $scope.connected();
+            }
+        });
+    }
+
+    function handleOAuthSuccess(event) {
         if (event.data.type === "dynamics:oauth:success") {
-            umbracoCmsIntegrationsCrmDynamicsResource.getAccessToken(event.data.code).then(function (response) {
-                if (response.startsWith("Error:")) {
-
-                    // if directive runs from property editor, the notifications should be hidden, because they will not be displayed properly behind the overlay window.
-                    // if directive runs from data type, the notifications are displayed
-                    if (typeof $scope.connected === "undefined")
-                        notificationsService.error("Dynamics Configuration", response);
-                } else {
-                    vm.oauthConfig.isConnected = true;
-
-                    // if directive runs from property editor, the notifications should be hidden, because they will not be displayed properly behind the overlay window.
-                    // if directive runs from data type, the notifications are displayed
-                    if (typeof $scope.connected === "undefined")
-                        notificationsService.success("Dynamics Configuration", "OAuth connected.");
-
-                    umbracoCmsIntegrationsCrmDynamicsResource.getSystemUserFullName().then(function (response) {
-                        vm.oauthConfig.fullName = response;
-                    });
-
-                    if (typeof $scope.connected === "function")
-                        $scope.connected();
-                }
-            });
+            getAccessToken(event.data.code);
         }
     }
+
+    function toggleAuthCodeSection(isVisible) {
+        document.getElementById("authCode").style.display = isVisible ? "block" : "none";
+    }
 }
 
 angular.module("umbraco")

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/configuration.html

@@ -24,4 +24,13 @@
             </umb-button>
         </div>
     </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.Dynamics/Umbraco.Cms.Integrations.Crm.Dynamics.csproj

@@ -10,7 +10,7 @@
 		<PackageIconUrl></PackageIconUrl>
 		<PackageProjectUrl>https://github.com/umbraco/Umbraco.Cms.Integrations/blob/main/src/Umbraco.Cms.Integrations.Crm.Dynamics</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/umbraco/Umbraco.Cms.Integrations</RepositoryUrl>
-		<Version>1.3.4</Version>
+		<Version>1.3.5</Version>
 		<Authors>Umbraco HQ</Authors>
 		<Company>Umbraco</Company>
 		<PackageTags>Umbraco;Umbraco-Marketplace</PackageTags>