V14: Integrations (Dynamics)

dtng95 · dtng95 · commit cddea5358411 · 2024-08-12T18:10:04.000+07:00
- Refractor authorization check
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Api/Management/Controllers/CheckOAuthConfigurationController.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Api/Management/Controllers/CheckOAuthConfigurationController.cs
@@ -19,17 +19,16 @@ public CheckOAuthConfigurationController(IOptions<DynamicsSettings> options, Dyn
         }
 
         [HttpGet("oauth-configuration")]
-        [ProducesResponseType(typeof(OAuthConfigurationDto), StatusCodes.Status200OK)]
-        [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+        [ProducesResponseType(typeof(OAuthConfigurationDto), StatusCodes.Status200OK)] 
         public async Task<IActionResult> CheckOAuthConfiguration()
         {
             var oauthConfiguration = DynamicsConfigurationService.GetOAuthConfiguration();
 
-            if (oauthConfiguration == null) return Unauthorized(new OAuthConfigurationDto { Message = string.Empty });
+            if (oauthConfiguration == null) return Ok(new OAuthConfigurationDto { Message = string.Empty });
 
             var identity = await DynamicsService.GetIdentity(oauthConfiguration.AccessToken);
 
-            if (!identity.IsAuthorized) return Unauthorized(new OAuthConfigurationDto { Message = identity.Error != null ? identity.Error.Message : string.Empty });
+            if (!identity.IsAuthorized) return Ok(new OAuthConfigurationDto { Message = identity.Error != null ? identity.Error.Message : string.Empty });
 
             oauthConfiguration.IsAuthorized = true;
 
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Api/Management/Controllers/GetAuthorizationUrlController.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Api/Management/Controllers/GetAuthorizationUrlController.cs
@@ -19,6 +19,10 @@ public GetAuthorizationUrlController(IOptions<DynamicsSettings> options, Dynamic
 
         [HttpGet("authorization-url")]
         [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
-        public IActionResult GetAuthorizationUrl() => Ok(AuthorizationService.GetAuthorizationUrl());
+        public IActionResult GetAuthorizationUrl()
+        {
+            var url = AuthorizationService.GetAuthorizationUrl();
+            return Ok(url);
+        }
     }
 }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/config/authorization/authorization-property-editor.element.ts b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/config/authorization/authorization-property-editor.element.ts
@@ -10,23 +10,24 @@ const elementName = "dynamics-authorization";
 @customElement(elementName)
 export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
     #dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
+    #settingsModel?: OAuthConfigurationDtoModel;
 
     @state()
     private _oauthSetup: DynamicsOAuthSetup = {
         isConnected: false,
-        isAccessTokenExpired: false,
+        isAccessTokenExpired: true,
         isAccessTokenValid: false
     };
 
-    @state()
-    private _oAuthConfig: OAuthConfigurationDtoModel | undefined;
-
     constructor() {
         super();
 
         this.consumeContext(DYNAMICS_CONTEXT_TOKEN, (context) => {
             if (!context) return;
             this.#dynamicsContext = context;
+            this.observe(context.settingsModel, (settingsModel) => {
+                this.#settingsModel = settingsModel;
+            });
         });
     }
 
@@ -37,56 +38,55 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
     }
 
     async #checkOAuthConfiguration(){
-        const { data } = await this.#dynamicsContext.checkOauthConfiguration();
-        if (!data) {
-            this._oauthSetup = {
-                isConnected: false,
-                isAccessTokenExpired: true,
-                isAccessTokenValid: false
-            }
+        //const { data } = await this.#dynamicsContext.checkOauthConfiguration();
+        if (!this.#settingsModel) {
+            return;
+        }
+
+        if (!this.#settingsModel.isAuthorized) {
+            this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
         } else {
-            if (!data.isAuthorized) {
-                this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
-            } else {
-                this._oauthSetup = {
-                    isConnected: true,
-                    isAccessTokenExpired: false,
-                    isAccessTokenValid: true
-                }
-
-                this._oAuthConfig = data;
+            this._oauthSetup = {
+                isConnected: true,
+                isAccessTokenExpired: false,
+                isAccessTokenValid: true
             }
         }
     }
 
     async #connectButtonClick(){
+        const { data } = await this.#dynamicsContext.getAuthorizationUrl();
+        if (!data) return;
+
+        window.open(data, "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
+
         window.addEventListener("message", async (event: MessageEvent) => {
             if (event.data.type === "dynamics:oauth:success") {
 
                 const oauthRequestDtoModel: OAuthRequestDtoModel = {
                     code: event.data.code
                 };
 
-                const { data } = await this.#dynamicsContext.getAccessToken(oauthRequestDtoModel);
-                if (!data) return;
-
-                if (data.startsWith("Error:")) {
-                    this._showError(data);
-                } else {
-                    this._oauthSetup = {
-                        isConnected: true
-                    };
-                    this._showSuccess("OAuth Connected");
-
-                }
-
+                await this.getAccessToken(oauthRequestDtoModel);
             }
         }, false);
+    }
 
-        const { data } = await this.#dynamicsContext.getAuthorizationUrl();
+    async getAccessToken(oauthRequestDtoModel: OAuthRequestDtoModel){
+        const { data } = await this.#dynamicsContext.getAccessToken(oauthRequestDtoModel);
         if (!data) return;
 
-        window.open(data, "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
+        if (data.startsWith("Error:")) {
+            this._showError(data);
+        } else {
+            this._oauthSetup = {
+                isConnected: true
+            };
+            this._showSuccess("OAuth Connected");
+
+            this.dispatchEvent(new CustomEvent("connect"));
+        }
+
     }
 
     async #revokeButtonClick(){
@@ -121,7 +121,7 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
                 ${this._oauthSetup.isConnected ? 
                     html`
                         <span>
-                            <b>Connected</b>: ${this._oAuthConfig?.fullName}
+                            <b>Connected</b>: ${this.#settingsModel?.fullName}
                         </span>
                     ` : 
                     html`
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/context/dynamics.context.ts b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/context/dynamics.context.ts
@@ -2,10 +2,13 @@ import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
 import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
 import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
 import { DynamicsRepository } from "../repository/dynamics.repository";
-import { OAuthRequestDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { OAuthConfigurationDtoModel, OAuthRequestDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { UmbObjectState } from "@umbraco-cms/backoffice/observable-api";
 
 export class DynamicsContext extends UmbControllerBase{
     #repository: DynamicsRepository;
+    #settingsModel = new UmbObjectState<OAuthConfigurationDtoModel | undefined>(undefined);
+    settingsModel = this.#settingsModel.asObservable();
 
     constructor(host: UmbControllerHost){
         super(host);
@@ -16,6 +19,7 @@ export class DynamicsContext extends UmbControllerBase{
 
     async hostConnected() {
         super.hostConnected();
+        await this.checkOauthConfiguration();
     }
 
     async getForms(module: string){
@@ -31,7 +35,8 @@ export class DynamicsContext extends UmbControllerBase{
     }
 
     async checkOauthConfiguration(){
-        return await this.#repository.checkOauthConfiguration();
+        const { data } = await this.#repository.checkOauthConfiguration();
+        this.#settingsModel.setValue(data);
     }
 
     async getAccessToken(oAuthRequestDtoModel: OAuthRequestDtoModel){
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics-form-modal.element.ts b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics-form-modal.element.ts
@@ -11,7 +11,8 @@ const elementName = "dynamics-forms-modal";
 @customElement(elementName)
 export default class DynamicsFormModalElement extends UmbModalBaseElement<DynamicsFormPickerModalData, DynamicsFormPickerModalValue>{
     #dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
-    
+    #settingsModel?: OAuthConfigurationDtoModel;
+
     @state()
     private _loading = false;
     @state()
@@ -23,6 +24,9 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
         this.consumeContext(DYNAMICS_CONTEXT_TOKEN, (context) => {
             if (!context) return;
             this.#dynamicsContext = context;
+            this.observe(context.settingsModel, (settingsModel) => {
+                this.#settingsModel = settingsModel;
+            });
         });
     }
 
@@ -32,16 +36,16 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
     }
 
     async #checkOAuthConfiguration(){
-        const { data } = await this.#dynamicsContext.checkOauthConfiguration();
-        if (!data) {
+        
+        if (!this.#settingsModel) {
+            return;
+        }
 
+        if (!this.#settingsModel.isAuthorized) {
+            this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
         } else {
-            if (!data.isAuthorized) {
-                this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
-            } else {
 
-                await this.#getForms();
-            }
+            await this.#getForms();
         }
     }
 
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/property-editor/dynamics-form-picker-property-editor.element.ts b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/property-editor/dynamics-form-picker-property-editor.element.ts
@@ -3,7 +3,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { DYNAMICS_CONTEXT_TOKEN } from "../context/dynamics.context";
 import { UMB_MODAL_MANAGER_CONTEXT } from "@umbraco-cms/backoffice/modal";
-import { FormDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { FormDtoModel, OAuthConfigurationDtoModel } from "@umbraco-integrations/dynamics/generated";
 import { DynamicsFormPickerConfiguration } from "../types/types";
 import { UmbPropertyEditorConfigCollection } from "@umbraco-cms/backoffice/property-editor";
 import { DYNAMICS_MODAL_TOKEN } from "../modal/dynamics.modal-token";
@@ -14,6 +14,7 @@ const elementName = "dynamics-form-picker";
 @customElement(elementName)
 export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements UmbPropertyEditorUiElement {
     #dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
+    #settingsModel?: OAuthConfigurationDtoModel;
     #modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
     @state()
 	private _config?: DynamicsFormPickerConfiguration;
@@ -45,9 +46,9 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
         this.consumeContext(DYNAMICS_CONTEXT_TOKEN, (context) => {
             if (!context) return;
             this.#dynamicsContext = context;
-            // this.observe(context.settingsModel, (settingsModel) => {
-            //     this.#settingsModel = settingsModel;
-            // });
+            this.observe(context.settingsModel, (settingsModel) => {
+                this.#settingsModel = settingsModel;
+            });
         });
     }
 
@@ -60,9 +61,8 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
     }
 
     async #checkOAuthConfiguration(){
-        const {data} = await this.#dynamicsContext.checkOauthConfiguration();
-        if(!data) return;
-        if(!data.isAuthorized) this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.");
+        if(!this.#settingsModel) return;
+        if(!this.#settingsModel.isAuthorized) this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.");
 
         await this.#getForm();
     }

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,10 @@ public GetAuthorizationUrlController(IOptions<DynamicsSettings> options, Dynamic`
`19`	`19`
`20`	`20`	`[HttpGet("authorization-url")]`
`21`	`21`	`[ProducesResponseType(typeof(string), StatusCodes.Status200OK)]`
`22`		`- public IActionResult GetAuthorizationUrl() => Ok(AuthorizationService.GetAuthorizationUrl());`
	`22`	`+ public IActionResult GetAuthorizationUrl()`
	`23`	`+ {`
	`24`	`+ var url = AuthorizationService.GetAuthorizationUrl();`
	`25`	`+ return Ok(url);`
	`26`	`+ }`
`23`	`27`	`}`
`24`	`28`	`}`