V14: Integrations (Dynamics)

- Add oauth configuration

Author: dtng95

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/context/dynamics.context.ts

@@ -2,6 +2,7 @@ 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";
 
 export class DynamicsContext extends UmbControllerBase{
     #repository: DynamicsRepository;
@@ -33,8 +34,8 @@ export class DynamicsContext extends UmbControllerBase{
         return await this.#repository.checkOauthConfiguration();
     }
 
-    async getAccessToken(){
-        return await this.#repository.getAccessToken();
+    async getAccessToken(oAuthRequestDtoModel: OAuthRequestDtoModel){
+        return await this.#repository.getAccessToken(oAuthRequestDtoModel);
     }
 
     async getEmbedCode(formId: string){

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics-form-modal.element.ts

@@ -2,16 +2,28 @@ import { customElement, html, repeat, state } from "@umbraco-cms/backoffice/exte
 import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
 import { DynamicsFormPickerModalData, DynamicsFormPickerModalValue } from "./dynamics.modal-token";
 import { DYNAMICS_CONTEXT_TOKEN } from "../context/dynamics.context";
-import { FormDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { FormDtoModel, OAuthConfigurationDtoModel, OAuthRequestDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { UMB_NOTIFICATION_CONTEXT, UmbNotificationColor } from "@umbraco-cms/backoffice/notification";
+import { DynamicsOAuthSetup } from "../models/dynamics-service.model";
 
 const elementName = "dynamics-forms-modal";
 
 @customElement(elementName)
 export default class DynamicsFormModalElement extends UmbModalBaseElement<DynamicsFormPickerModalData, DynamicsFormPickerModalValue>{
     #dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
 
+    @state()
+    private _loading = false;
     @state()
     private _forms: Array<FormDtoModel> = [];
+    @state()
+    private _oAuthConfig: OAuthConfigurationDtoModel | undefined;
+    @state()
+    private _oauthSetup: DynamicsOAuthSetup = {
+        isConnected: false,
+        isAccessTokenExpired: false,
+        isAccessTokenValid: false
+    };
 
     constructor() {
         super();
@@ -24,25 +36,96 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
 
     async connectedCallback() {
         super.connectedCallback();
-        await this.getForms();
+        await this.#checkOAuthConfiguration();
+    }
+
+    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.");
+
+        this._oAuthConfig = data;
+
+        await this.#getForms();
     }
 
-    async getForms(){
+    async #getForms(){
+        this._loading = true;
         const { data } = await this.#dynamicsContext.getForms("Both");
         if(!data) return;
 
         this._forms = data;
+        this._loading = false;
     }
 
     _onSelect(form: FormDtoModel){
         this.value = { selectedForm: form };
         this._submitModal();
     }
 
+    async #connectButtonClick(){
+        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");
+
+                }
+
+            }
+        }, false);
+
+        const { data } = await this.#dynamicsContext.getAuthorizationUrl();
+        if (!data) return;
+
+        window.open(data, "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
+    }
+
+    async #revokeButtonClick(){
+        await this.#dynamicsContext.revokeAccessToken();
+
+        this._oauthSetup = {
+            isConnected: false
+        };
+        this._showSuccess("OAuth connection revoked.");
+
+        this.dispatchEvent(new CustomEvent("revoke"));
+    }
+
+    private async _showSuccess(message: string) {
+        await this._showMessage(message, "positive");
+    }
+
+    private async _showError(message: string) {
+        await this._showMessage(message, "danger");
+    }
+
+    private async _showMessage(message: string, color: UmbNotificationColor) {
+        const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+        notificationContext?.peek(color, {
+            data: { message },
+        });
+    }
+
     render(){
         return html`
             <umb-body-layout>
-                <uui-box headline="Dynamics Marketing Forms">
+            
+            ${this._loading ? html`<div class="center loader"><uui-loader></uui-loader></div>` : ""}
+                
+            <uui-box headline=${this.data!.headline}>
                     <div slot="header">Select a form</div>
 
                     ${repeat(this._forms, (form) => html`
@@ -57,16 +140,20 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
                 <uui-box headline="Dynamics - OAuth Status">
                     <div slot="header">Please connect with your Microsoft account.</div>
                     <div>
-                        <p><b>Connected</b>: Thanhnd</p>
+                        <p><b>Connected</b>: ${this._oAuthConfig?.fullName}</p>
                     </div>
                     <div>
                         <uui-button 
                             look="primary" 
-                            label="Connect"></uui-button>
+                            label="Connect"
+                            ?disabled=${this._oauthSetup?.isConnected}
+                            @click=${this.#connectButtonClick}></uui-button>
                         <uui-button 
                             color="danger" 
                             look="secondary" 
-                            label="Revoke"></uui-button>
+                            label="Revoke"
+                            ?disabled=${!this._oauthSetup?.isConnected}
+                            @click=${this.#revokeButtonClick}></uui-button>
                     </div>
                 </uui-box>
 

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics.modal-token.ts

@@ -4,7 +4,6 @@ import { DynamicsFormPickerConfiguration } from "../types/types";
 
 export type DynamicsFormPickerModalData = {
     headline: string;
-    selectedFormId: string | null;
     config: DynamicsFormPickerConfiguration | undefined;
 }
 

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/models/dynamics-service.model.ts

@@ -0,0 +1,5 @@
+export type DynamicsOAuthSetup = {
+    isConnected?: boolean;
+    isAccessTokenExpired?: boolean;
+    isAccessTokenValid?: boolean;
+}

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/property-editor/dynamics-form-picker-property-editor.element.ts

@@ -56,11 +56,20 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
 
         if (this.value == null || this.value.length == 0) return;
 
-        await this.#getForms();
+        await this.#checkOAuthConfiguration();
     }
 
-    async #getForms(){
+    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.");
 
+        await this.#getForm();
+    }
+
+    async #getForm(){
+        const model: FormDtoModel = JSON.parse(JSON.stringify(this.value));
+        this.selectedForm = model;
     }
 
     deleteForm(formId: string){
@@ -71,7 +80,6 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
         const pickerContext = this.#modalManagerContext?.open(this, DYNAMICS_MODAL_TOKEN, {
             data: {
                 headline: "Dynamics Forms",
-                selectedFormId: "1",
                 config: this._config
             },
         });

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/repository/dynamics.repository.ts

@@ -1,7 +1,7 @@
 import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
 import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
 import { tryExecuteAndNotify } from "@umbraco-cms/backoffice/resources";
-import { DynamicsService } from "@umbraco-integrations/dynamics/generated";
+import { DynamicsService, OAuthRequestDtoModel } from "@umbraco-integrations/dynamics/generated";
 
 export class DynamicsRepository extends UmbControllerBase {
     constructor(host: UmbControllerHost) {
@@ -50,8 +50,8 @@ export class DynamicsRepository extends UmbControllerBase {
         return { data };
     }
 
-    async getAccessToken(){
-        const { data, error } = await tryExecuteAndNotify(this, DynamicsService.getAccessToken());
+    async getAccessToken(oAuthRequestDtoModel: OAuthRequestDtoModel){
+        const { data, error } = await tryExecuteAndNotify(this, DynamicsService.getAccessToken({requestBody: oAuthRequestDtoModel}));
 
         if (error || !data) {
             return { error };