OAuth configuration directive

Author: acoumb

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

@@ -3,10 +3,13 @@
 
     vm.oauthConfig = {};
 
-    umbracoCmsIntegrationsCrmDynamicsResource.checkOAuthConfiguration().then(function(response) {
+    umbracoCmsIntegrationsCrmDynamicsResource.checkOAuthConfiguration().then(function (response) {
         if (response && response.isAuthorized) {
             vm.oauthConfig.isConnected = true;
             vm.oauthConfig.fullName = response.fullName;
+
+            if (typeof $scope.connected === "function")
+                $scope.connected();
         }
     });
 
@@ -23,6 +26,9 @@
         umbracoCmsIntegrationsCrmDynamicsResource.revokeAccessToken().then(function () {
             vm.oauthConfig.isConnected = false;
             notificationsService.success("Dynamics Configuration", "OAuth connection revoked.");
+
+            if (typeof $scope.revoked === "function")
+                $scope.revoked();
         });
     }
 
@@ -41,9 +47,11 @@
                     umbracoCmsIntegrationsCrmDynamicsResource.getSystemUserFullName().then(function(response) {
                         vm.oauthConfig.fullName = response;
                     });
+
+                    if (typeof $scope.connected === "function")
+                        $scope.connected();
                 }
             });
-
         }
     }, false);
 }

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

@@ -6,6 +6,7 @@
     vm.dynamicsFormsList = [];
     vm.searchTerm = "";
     vm.iFrameEmbedded = false;
+    vm.isConnected = false;
 
     umbracoCmsIntegrationsCrmDynamicsResource.checkOAuthConfiguration().then(function (response) {
         if (response.isAuthorized) {
@@ -59,6 +60,7 @@
     };
 
     function loadForms() {
+        vm.dynamicsFormsList = [];
         umbracoCmsIntegrationsCrmDynamicsResource.getForms().then(function (response) {
             if (response) {
                 response.value.forEach(item => {
@@ -72,6 +74,16 @@
             }
         });
     }
+
+    $scope.connected = function () {
+        vm.isConnected = true;
+        loadForms();
+    };
+
+    $scope.revoked = function () {
+        vm.isConnected = false;
+        vm.dynamicsFormsList = [];
+    };
 }
 
 angular.module("umbraco")

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/oauthconfiguration.directive.js

@@ -0,0 +1,11 @@
+angular.module("umbraco.directives")
+    .directive("oauthConfiguration", function () {
+        return {
+            restrict: "E",
+            scope: {
+                "connected": "&onConnected",
+                "revoked": "&onRevoked"
+            },
+            templateUrl: "/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/configuration.html"
+        }
+});

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/package.manifest

@@ -1,8 +1,9 @@
 {
 	"javascript": [
 		"~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/configuration.controller.js",
-    "~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/formpicker.controller.js",
-		"~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/dynamics.resource.js"
+		"~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/formpicker.controller.js",
+		"~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/dynamics.resource.js",
+		"~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/oauthconfiguration.directive.js"
 	],
 	"css": [
 		"~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/css/styles.css"

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

@@ -5,14 +5,17 @@
                 <umb-box-header title="{{ model.title }}" description="{{ model.subtitle }}"></umb-box-header>
                 <umb-box-content>
                     <div class="dynOverlayGroup">
+                        <oauth-configuration on-connected="connected()" on-revoked="revoked()"></oauth-configuration>
+                    </div>
+                    <div class="dynOverlayGroup" ng-if="vm.isConnected">
                         <div class="form-search">
                             <i class="icon-search"></i>
                             <input type="text" class="-full-width-input" ng-model="vm.searchTerm" placeholder="Type to search..." umb-auto-focus="" aria-invalid="false">
                         </div>
                     </div>
-                    <div class="dynOverlayGroup">
+                    <div class="dynOverlayGroup" ng-if="vm.isConnected">
                         <ul class="dynFormsList">
-                            <li ng-repeat="form in vm.dynamicsFormsList | orderBy:'name' | filter:vm.searchTerm" ng-click="model.selectForm(form, vm.iFrameEmbedded)" 
+                            <li ng-repeat="form in vm.dynamicsFormsList | orderBy:'name' | filter:vm.searchTerm" ng-click="model.selectForm(form, vm.iFrameEmbedded)"
                                 class="ng-scope" role="button" tabindex="0">
                                 <a href="" ng-attr-title="form.name">
                                     <i class="icon-umb-contour"></i>
@@ -21,7 +24,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="dynOverlayGroup">
+                    <div class="dynOverlayGroup" ng-if="vm.isConnected">
                         <umb-toggle checked="vm.iFrameEmbedded"
                                     on-click="vm.toggleRenderMode()"
                                     show-labels="true"

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

@@ -51,6 +51,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Dynamics\js\oauthConfiguration.directive.js" />
 	  <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Dynamics\Render\DynamicsForm.cshtml" />
 	  <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Dynamics\Render\DynamicsFormV8.cshtml" />
 	</ItemGroup>