From d0f1e4c4c9c25a18e388d895c7119ba771246703 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Thu, 4 Jan 2024 11:53:08 -0600
Subject: [PATCH 1/9] Apply eslint in SettingDriverAuthorization component

---
 .../components/SettingDriverAuthorization.vue | 78 ++++++++++++-------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index a5772dddcf..d295e3509e 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -5,8 +5,8 @@
         pill
         :variant="isAuthorized ? 'success' : 'warning'"
       >
-        <span v-if="isAuthorized">{{ $t('Authorized') }}</span>
-        <span v-else>{{ $t('Not Authorized') }}</span>
+        <span v-if="isAuthorized">{{ $t("Authorized") }}</span>
+        <span v-else>{{ $t("Not Authorized") }}</span>
       </b-badge>
     </div>
     <div v-else>
@@ -24,34 +24,34 @@
         class="d-block"
       >
         <div>
-          <h5
-            v-if="setting.name"
-            class="mb-0"
-          >
-            {{ $t(setting.name) }}
+          <h5 class="mb-0">
+            <span v-if="setting.name">{{ $t(setting.name) }}</span>
+            <span v-else>{{ $t(setting.key) }}</span>
           </h5>
-          <h5
-            v-else
-            class="mb-0"
-          >
-            {{ setting.key }}
-          </h5>
-          <small class="form-text text-muted">{{ $t('Configure the driver connection properties.') }}</small>
+          <small class="form-text text-muted">{{
+            $t("Configure the driver connection properties.")
+          }}</small>
         </div>
         <button
           type="button"
-          :aria-label="$t('Close')"
           class="close"
+          :aria-label="$t('Close')"
           @click="onCancel"
         >
-          ×
+          &times;
         </button>
       </template>
       <div>
         <b-form-group
           required
           :label="$t('Client ID')"
-          :description="formDescription('The client ID assigned when you register your application.', 'client_id', errors)"
+          :description="
+            formDescription(
+              'The client ID assigned when you register your application.',
+              'client_id',
+              errors
+            )
+          "
           :invalid-feedback="errorMessage('client_id', errors)"
           :state="errorState('client_id', errors)"
         >
@@ -69,7 +69,13 @@
         <b-form-group
           required
           :label="$t('Client Secret')"
-          :description="formDescription('The client secret assigned when you register your application.', 'client_secret', errors)"
+          :description="
+            formDescription(
+              'The client secret assigned when you register your application.',
+              'client_secret',
+              errors
+            )
+          "
           :invalid-feedback="errorMessage('client_secret', errors)"
           :state="errorState('client_secret', errors)"
         >
@@ -103,7 +109,13 @@
         <b-form-group
           required
           :label="$t('Redirect URL')"
-          :description="formDescription('This value must match the callback URL you specify in your app settings.', 'callback_url', errors)"
+          :description="
+            formDescription(
+              'This value must match the callback URL you specify in your app settings.',
+              'callback_url',
+              errors
+            )
+          "
           :invalid-feedback="errorMessage('callback_url', errors)"
           :state="errorState('callback_url', errors)"
         >
@@ -145,7 +157,7 @@
           data-cy="cancel-button"
           @click="onCancel"
         >
-          {{ $t('Cancel') }}
+          {{ $t("Cancel") }}
         </button>
         <button
           type="button"
@@ -154,7 +166,7 @@
           :disabled="isButtonDisabled"
           @click="onSave"
         >
-          {{ $t('Authorize') }}
+          {{ $t("Authorize") }}
         </button>
       </div>
     </b-modal>
@@ -169,7 +181,7 @@
       no-fade
     >
       <div class="text-center">
-        <h3>{{ $t('Connecting Driver') }}</h3>
+        <h3>{{ $t("Connecting Driver") }}</h3>
         <i class="fas fa-circle-notch fa-spin fa-3x p-0 text-primary" />
       </div>
     </b-modal>
@@ -259,11 +271,20 @@ export default {
   },
   methods: {
     onCopy() {
-      navigator.clipboard.writeText(this.formData.callback_url).then(() => {
-        ProcessMaker.alert(this.$t("The setting was copied to your clipboard."), "success");
-      }, () => {
-        ProcessMaker.alert(this.$t("The setting was not copied to your clipboard."), "danger");
-      });
+      navigator.clipboard.writeText(this.formData.callback_url).then(
+        () => {
+          ProcessMaker.alert(
+            this.$t("The setting was copied to your clipboard."),
+            "success",
+          );
+        },
+        () => {
+          ProcessMaker.alert(
+            this.$t("The setting was not copied to your clipboard."),
+            "danger",
+          );
+        },
+      );
     },
     togglePassword() {
       if (this.type === "text") {
@@ -298,7 +319,8 @@ export default {
       this.showAuthorizingModal = true;
       this.showModal = false;
       this.resetData = false;
-      ProcessMaker.apiClient.post(`settings/${this.setting.id}/get-oauth-url`, this.formData)
+      ProcessMaker.apiClient
+        .post(`settings/${this.setting.id}/get-oauth-url`, this.formData)
         .then((response) => {
           window.location = response.data?.url;
         })

From 6fae3e86ca1fa0cbb403afbb4d472ef57204f3e1 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Thu, 4 Jan 2024 17:06:43 -0600
Subject: [PATCH 2/9] Add AuthSchemes connection components

---
 .../components/SettingDriverAuthorization.vue | 146 +++--------------
 .../cdata/NoneConnectionProperties.vue        |  21 +++
 .../cdata/OauthConnectionProperties.vue       | 149 ++++++++++++++++++
 3 files changed, 193 insertions(+), 123 deletions(-)
 create mode 100644 resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
 create mode 100644 resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue

diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index d295e3509e..0389d3a5ee 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -10,7 +10,7 @@
       </b-badge>
     </div>
     <div v-else>
-      Empty
+      {{ $t("Empty") }}
     </div>
     <b-modal
       v-model="showModal"
@@ -28,9 +28,9 @@
             <span v-if="setting.name">{{ $t(setting.name) }}</span>
             <span v-else>{{ $t(setting.key) }}</span>
           </h5>
-          <small class="form-text text-muted">{{
-            $t("Configure the driver connection properties.")
-          }}</small>
+          <small class="form-text text-muted">
+            {{ $t("Configure the driver connection properties.") }}
+          </small>
         </div>
         <button
           type="button"
@@ -42,104 +42,11 @@
         </button>
       </template>
       <div>
-        <b-form-group
-          required
-          :label="$t('Client ID')"
-          :description="
-            formDescription(
-              'The client ID assigned when you register your application.',
-              'client_id',
-              errors
-            )
-          "
-          :invalid-feedback="errorMessage('client_id', errors)"
-          :state="errorState('client_id', errors)"
-        >
-          <b-form-input
-            v-model="formData.client_id"
-            required
-            autofocus
-            autocomplete="off"
-            :state="errorState('client_id', errors)"
-            name="client_id"
-            data-cy="client_id"
-          />
-        </b-form-group>
-
-        <b-form-group
-          required
-          :label="$t('Client Secret')"
-          :description="
-            formDescription(
-              'The client secret assigned when you register your application.',
-              'client_secret',
-              errors
-            )
-          "
-          :invalid-feedback="errorMessage('client_secret', errors)"
-          :state="errorState('client_secret', errors)"
-        >
-          <b-input-group>
-            <b-form-input
-              v-model="formData.client_secret"
-              required
-              autofocus
-              autocomplete="off"
-              trim
-              :type="type"
-              :state="errorState('client_secret', errors)"
-              name="client_secret"
-              data-cy="client_secret"
-            />
-            <b-input-group-append>
-              <b-button
-                :aria-label="$t('Toggle Show Password')"
-                variant="secondary"
-                @click="togglePassword"
-              >
-                <i
-                  class="fas"
-                  :class="icon"
-                />
-              </b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
-
-        <b-form-group
-          required
-          :label="$t('Redirect URL')"
-          :description="
-            formDescription(
-              'This value must match the callback URL you specify in your app settings.',
-              'callback_url',
-              errors
-            )
-          "
-          :invalid-feedback="errorMessage('callback_url', errors)"
-          :state="errorState('callback_url', errors)"
-        >
-          <b-input-group>
-            <b-form-input
-              v-model="formData.callback_url"
-              autofocus
-              readonly
-              autocomplete="off"
-              :state="errorState('callback_url', errors)"
-              name="callback_url"
-              data-cy="callback_url"
-            />
-            <b-input-group-append>
-              <b-button
-                :aria-label="$t('Copy')"
-                variant="secondary"
-                @click="onCopy"
-              >
-                <i class="fas fa-copy" />
-              </b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
+        <component
+          :is="authSchemeToComponent(setting.config.AuthScheme)"
+          :form-data="formData"
+          @updateFormData="updateFormData"
+        />
 
         <additional-driver-connection-properties
           :driver-key="setting?.key"
@@ -193,9 +100,15 @@
 import { FormErrorsMixin, Required } from "SharedComponents";
 import settingMixin from "../mixins/setting";
 import AdditionalDriverConnectionProperties from "./AdditionalDriverConnectionProperties.vue";
+import OAuthConnectionProperties from "./cdata/OauthConnectionProperties.vue";
+import NoneConnectionProperties from "./cdata/NoneConnectionProperties.vue";
 
 export default {
-  components: { AdditionalDriverConnectionProperties },
+  components: {
+    AdditionalDriverConnectionProperties,
+    OAuthConnectionProperties,
+    NoneConnectionProperties,
+  },
   mixins: [settingMixin, FormErrorsMixin, Required],
   props: {
     setting: {
@@ -210,11 +123,7 @@ export default {
   data() {
     return {
       input: "",
-      formData: {
-        client_id: "",
-        client_secret: "",
-        callback_url: "",
-      },
+      formData: {},
       selected: null,
       showModal: false,
       showAuthorizingModal: false,
@@ -223,6 +132,10 @@ export default {
       isInvalid: true,
       type: "password",
       resetData: true,
+      componentsMap: {
+        OAuth: "oauth-connection-properties",
+        None: "none-connection-properties",
+      },
     };
   },
   computed: {
@@ -270,21 +183,8 @@ export default {
     this.transformed = this.copy(this.formData);
   },
   methods: {
-    onCopy() {
-      navigator.clipboard.writeText(this.formData.callback_url).then(
-        () => {
-          ProcessMaker.alert(
-            this.$t("The setting was copied to your clipboard."),
-            "success",
-          );
-        },
-        () => {
-          ProcessMaker.alert(
-            this.$t("The setting was not copied to your clipboard."),
-            "danger",
-          );
-        },
-      );
+    authSchemeToComponent(scheme) {
+      return this.componentsMap[scheme] || null;
     },
     togglePassword() {
       if (this.type === "text") {
diff --git a/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
new file mode 100644
index 0000000000..11c30368e9
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
@@ -0,0 +1,21 @@
+<template>
+  <div />
+</template>
+<script>
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      config: {},
+    };
+  },
+  mounted() {
+    this.config = this.formData;
+  },
+};
+</script>
diff --git a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
new file mode 100644
index 0000000000..3299083856
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <b-form-group
+      required
+      :label="$t('Client ID')"
+      :description="
+        formDescription(
+          'The client ID assigned when you register your application.',
+          'client_id',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('client_id', errors)"
+      :state="errorState('client_id', errors)"
+    >
+      <b-form-input
+        v-model="config.client_id"
+        required
+        autofocus
+        autocomplete="off"
+        :state="errorState('client_id', errors)"
+        name="client_id"
+        data-cy="client_id"
+      />
+    </b-form-group>
+
+    <b-form-group
+      required
+      :label="$t('Client Secret')"
+      :description="
+        formDescription(
+          'The client secret assigned when you register your application.',
+          'client_secret',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('client_secret', errors)"
+      :state="errorState('client_secret', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.client_secret"
+          required
+          autofocus
+          autocomplete="off"
+          trim
+          :type="type"
+          :state="errorState('client_secret', errors)"
+          name="client_secret"
+          data-cy="client_secret"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Toggle Show Password')"
+            variant="secondary"
+            @click="togglePassword"
+          >
+            <i
+              class="fas"
+              :class="icon"
+            />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+
+    <b-form-group
+      required
+      :label="$t('Redirect URL')"
+      :description="
+        formDescription(
+          'This value must match the callback URL you specify in your app settings.',
+          'callback_url',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('callback_url', errors)"
+      :state="errorState('callback_url', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.callback_url"
+          autofocus
+          readonly
+          autocomplete="off"
+          :state="errorState('callback_url', errors)"
+          name="callback_url"
+          data-cy="callback_url"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Copy')"
+            variant="secondary"
+            @click="onCopy"
+          >
+            <i class="fas fa-copy" />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      config: {
+        client_id: "",
+        client_secret: "",
+        callback_url: "",
+      },
+      errors: {},
+    };
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = this.formData;
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {
+    onCopy() {
+      this.$copyText(this.config.callback_url).then(() => {
+        this.$bvToast.toast(this.$t("Copied"), {
+          title: this.$t("Success"),
+          variant: "success",
+          solid: true,
+        });
+      });
+    },
+  },
+};
+</script>

From 0be7eb7d9361a64d1a6e3f80e0e871a491237dc1 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Fri, 5 Jan 2024 14:27:04 -0600
Subject: [PATCH 3/9] Fix typo in import statement and update component name

---
 .../components/SettingDriverAuthorization.vue  | 18 ++----------------
 .../cdata/OauthConnectionProperties.vue        | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index 0389d3a5ee..c85de08a3d 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -100,13 +100,13 @@
 import { FormErrorsMixin, Required } from "SharedComponents";
 import settingMixin from "../mixins/setting";
 import AdditionalDriverConnectionProperties from "./AdditionalDriverConnectionProperties.vue";
-import OAuthConnectionProperties from "./cdata/OauthConnectionProperties.vue";
+import OauthConnectionProperties from "./cdata/OauthConnectionProperties.vue";
 import NoneConnectionProperties from "./cdata/NoneConnectionProperties.vue";
 
 export default {
   components: {
     AdditionalDriverConnectionProperties,
-    OAuthConnectionProperties,
+    OauthConnectionProperties,
     NoneConnectionProperties,
   },
   mixins: [settingMixin, FormErrorsMixin, Required],
@@ -130,7 +130,6 @@ export default {
       transformed: null,
       errors: {},
       isInvalid: true,
-      type: "password",
       resetData: true,
       componentsMap: {
         OAuth: "oauth-connection-properties",
@@ -155,12 +154,6 @@ export default {
     changed() {
       return JSON.stringify(this.formData) !== JSON.stringify(this.transformed);
     },
-    icon() {
-      if (this.type === "password") {
-        return "fa-eye";
-      }
-      return "fa-eye-slash";
-    },
     isButtonDisabled() {
       return this.isInvalid || (this.isAuthorized && !this.changed);
     },
@@ -186,13 +179,6 @@ export default {
     authSchemeToComponent(scheme) {
       return this.componentsMap[scheme] || null;
     },
-    togglePassword() {
-      if (this.type === "text") {
-        this.type = "password";
-      } else {
-        this.type = "text";
-      }
-    },
     validateData() {
       // Check if client_id and client_secret are empty
       const clientIdEmpty = _.isEmpty(this.formData.client_id);
diff --git a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
index 3299083856..e1c6fd099d 100644
--- a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
@@ -44,7 +44,7 @@
           autofocus
           autocomplete="off"
           trim
-          :type="type"
+          :type="inputType"
           :state="errorState('client_secret', errors)"
           name="client_secret"
           data-cy="client_secret"
@@ -120,8 +120,16 @@ export default {
         callback_url: "",
       },
       errors: {},
+      inputType: "password",
     };
   },
+  computed: {
+    icon() {
+      return this.inputType === "password"
+        ? "fa-eye-slash"
+        : "fa-eye";
+    },
+  },
   watch: {
     config: {
       deep: true,
@@ -144,6 +152,9 @@ export default {
         });
       });
     },
+    togglePassword() {
+      this.inputType = this.inputType === "password" ? "text" : "password";
+    },
   },
 };
 </script>

From 8f63a94c9ce0490da281048df67f4c952470047d Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Mon, 8 Jan 2024 09:21:51 -0600
Subject: [PATCH 4/9] Add BamboohrConnectionProperties component

---
 .../AdditionalDriverConnectionProperties.vue  |   3 +
 .../cdata/BamboohrConnectionProperties.vue    | 105 ++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue

diff --git a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
index 683b6e38b9..8dcb98e849 100644
--- a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
+++ b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
@@ -13,6 +13,7 @@ import ExcelConnectionProperties from "./cdata/ExcelConnectionProperties.vue";
 import GithubConnectionProperties from "./cdata/GithubConnectionProperties.vue";
 import DocusignConnectionProperties from "./cdata/DocusignConnectionProperties.vue";
 import GmailConnectionProperties from "./cdata/GmailConnectionProperties.vue";
+import BamboohrConnectionProperties from "./cdata/BamboohrConnectionProperties.vue";
 
 export default {
   components: {
@@ -20,6 +21,7 @@ export default {
     GithubConnectionProperties,
     DocusignConnectionProperties,
     GmailConnectionProperties,
+    BamboohrConnectionProperties,
   },
   props: {
     formData: {
@@ -38,6 +40,7 @@ export default {
         "cdata.github": "github-connection-properties",
         "cdata.docusign": "docusign-connection-properties",
         "cdata.gmail": "gmail-connection-properties",
+        "cdata.bamboohr": "bamboohr-connection-properties",
       },
     };
   },
diff --git a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
new file mode 100644
index 0000000000..63415449f1
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <!-- API key input field -->
+    <b-form-group
+      required
+      :label="$t('API Key')"
+      :description="formDescription('Your BambooHR API Key.', 'APIKey', errors)"
+      :invalid-feedback="errorMessage('APIKey', errors)"
+      :state="errorState('APIKey', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.APIKey"
+          required
+          autofocus
+          autocomplete="off"
+          trim
+          :type="inputType"
+          :state="errorState('APIKey', errors)"
+          name="APIKey"
+          data-cy="api-key"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Toggle Show Password')"
+            variant="secondary"
+            @click="togglePassword"
+          >
+            <i
+              class="fas"
+              :class="icon"
+            />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+
+    <!-- Domain input field -->
+    <b-form-group
+      required
+      :label="$t('Domain')"
+      :description="
+        formDescription('The Domain for the BambooHR account.', 'Domain', errors)
+      "
+      :invalid-feedback="errorMessage('Domain', errors)"
+      :state="errorState('Domain', errors)"
+    >
+      <b-form-input
+        v-model="config.Domain"
+        required
+        autofocus
+        autocomplete="off"
+        :state="errorState('Domain', errors)"
+        name="Domain"
+        data-cy="domain"
+      />
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      errors: {},
+      config: {
+        AuthScheme: "None",
+        APIKey: "",
+        Domain: "",
+      },
+      inputType: "password",
+    };
+  },
+  computed: {
+    icon() {
+      return this.inputType === "password" ? "fa-eye-slash" : "fa-eye";
+    },
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {
+    togglePassword() {
+      this.inputType = this.inputType === "password" ? "text" : "password";
+    },
+  },
+};
+</script>

From 990bf8147595f898d734ad4d67d0e98ccc231ce1 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Mon, 8 Jan 2024 11:45:20 -0600
Subject: [PATCH 5/9] Update authorization button and remove unnecessary code

Fix authentication scheme in connection properties components
---
 .../components/SettingDriverAuthorization.vue | 52 +++++++------------
 .../cdata/BamboohrConnectionProperties.vue    |  1 -
 .../cdata/ExcelConnectionProperties.vue       |  1 -
 .../cdata/GmailConnectionProperties.vue       |  1 -
 .../cdata/NoneConnectionProperties.vue        |  4 +-
 .../cdata/OauthConnectionProperties.vue       |  1 +
 6 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index c85de08a3d..d18b8d8e37 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <!-- Authorize badge -->
     <div v-if="hasAuthorizedBadge">
       <b-badge
         pill
@@ -12,6 +13,8 @@
     <div v-else>
       {{ $t("Empty") }}
     </div>
+
+    <!-- Connection properties modal -->
     <b-modal
       v-model="showModal"
       class="setting-object-modal"
@@ -43,7 +46,7 @@
       </template>
       <div>
         <component
-          :is="authSchemeToComponent(setting.config.AuthScheme)"
+          :is="authSchemeToComponent(setting.config?.AuthScheme)"
           :form-data="formData"
           @updateFormData="updateFormData"
         />
@@ -70,7 +73,6 @@
           type="button"
           class="btn btn-secondary ml-3"
           data-cy="authorize-button"
-          :disabled="isButtonDisabled"
           @click="onSave"
         >
           {{ $t("Authorize") }}
@@ -78,6 +80,7 @@
       </div>
     </b-modal>
 
+    <!-- Authorizing modal -->
     <b-modal
       v-model="showAuthorizingModal"
       class="setting-object-modal"
@@ -94,7 +97,6 @@
     </b-modal>
   </div>
 </template>
-
 <script>
 // eslint-disable-next-line import/no-unresolved
 import { FormErrorsMixin, Required } from "SharedComponents";
@@ -129,7 +131,6 @@ export default {
       showAuthorizingModal: false,
       transformed: null,
       errors: {},
-      isInvalid: true,
       resetData: true,
       componentsMap: {
         OAuth: "oauth-connection-properties",
@@ -151,20 +152,6 @@ export default {
       }
       return false;
     },
-    changed() {
-      return JSON.stringify(this.formData) !== JSON.stringify(this.transformed);
-    },
-    isButtonDisabled() {
-      return this.isInvalid || (this.isAuthorized && !this.changed);
-    },
-  },
-  watch: {
-    formData: {
-      handler() {
-        this.isInvalid = this.validateData();
-      },
-      deep: true,
-    },
   },
   mounted() {
     if (this.value === null) {
@@ -172,20 +159,12 @@ export default {
     } else {
       this.formData = this.value;
     }
-    this.isInvalid = this.validateData();
     this.transformed = this.copy(this.formData);
   },
   methods: {
     authSchemeToComponent(scheme) {
       return this.componentsMap[scheme] || null;
     },
-    validateData() {
-      // Check if client_id and client_secret are empty
-      const clientIdEmpty = _.isEmpty(this.formData.client_id);
-      const clientSecretEmpty = _.isEmpty(this.formData.client_secret);
-
-      return _.isEmpty(this.formData) || clientIdEmpty || clientSecretEmpty;
-    },
     onCancel() {
       this.showModal = false;
     },
@@ -201,6 +180,14 @@ export default {
     onModalHidden() {
       this.resetFormData();
     },
+    generateCallbackUrl(item) {
+      if (item.config.AuthScheme === "OAuth") {
+        const name = item.key.split("cdata.")[1];
+        const appUrl = document.head.querySelector("meta[name=\"app-url\"]").content;
+
+        this.formData.callback_url = `${appUrl}/external-integrations/${name}`;
+      }
+    },
     authorizeConnection() {
       this.showAuthorizingModal = true;
       this.showModal = false;
@@ -213,23 +200,20 @@ export default {
         .catch((error) => {
           const errorMessage = error.response?.data?.message || error.message;
           ProcessMaker.alert(errorMessage, "danger");
+        })
+        .finally(() => {
           this.showModal = true;
           this.showAuthorizingModal = false;
         });
     },
     onSave() {
-      const driver = this.setting.key.split("cdata.")[1];
-
+      const name = this.setting.key.split("cdata.")[1];
+      this.formData.name = name;
+      const driver = this.setting.config?.driver;
       this.formData.driver = driver;
       this.transformed = { ...this.formData };
       this.authorizeConnection();
     },
-    generateCallbackUrl(data) {
-      const name = data.key.split("cdata.")[1];
-      const appUrl = document.head.querySelector("meta[name=\"app-url\"]").content;
-
-      this.formData.callback_url = `${appUrl}/external-integrations/${name}`;
-    },
     resetFormData() {
       if (this.resetData) {
         this.formData = {
diff --git a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
index 63415449f1..3ae7df957f 100644
--- a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
@@ -73,7 +73,6 @@ export default {
     return {
       errors: {},
       config: {
-        AuthScheme: "None",
         APIKey: "",
         Domain: "",
       },
diff --git a/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue b/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
index 045e6f8a48..d80858b488 100644
--- a/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
@@ -61,7 +61,6 @@ export default {
       config: {
         connection_type: "",
         uri: "",
-        AuthScheme: "OAuth",
       },
       connectionOptions: {
         oauth: [
diff --git a/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue b/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
index 862eab8e6c..2e04b5914e 100644
--- a/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
@@ -18,7 +18,6 @@ export default {
     return {
       errors: {},
       config: {
-        AuthScheme: "OAuth",
         Schema: "REST",
         Scope: "https://mail.google.com/",
       },
diff --git a/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
index 11c30368e9..e6af942617 100644
--- a/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
@@ -11,7 +11,9 @@ export default {
   },
   data() {
     return {
-      config: {},
+      config: {
+        AuthScheme: "None",
+      },
     };
   },
   mounted() {
diff --git a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
index e1c6fd099d..cdb35cf727 100644
--- a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
@@ -115,6 +115,7 @@ export default {
   data() {
     return {
       config: {
+        AuthScheme: "OAuth",
         client_id: "",
         client_secret: "",
         callback_url: "",

From 9c4db2675423febd0d08b273099e2dd20375cc3f Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Tue, 9 Jan 2024 11:21:42 -0600
Subject: [PATCH 6/9] Update authorization logic

---
 .../AdditionalDriverConnectionProperties.vue   |  2 +-
 .../components/SettingDriverAuthorization.vue  | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
index 8dcb98e849..37eec5195b 100644
--- a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
+++ b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
@@ -40,7 +40,7 @@ export default {
         "cdata.github": "github-connection-properties",
         "cdata.docusign": "docusign-connection-properties",
         "cdata.gmail": "gmail-connection-properties",
-        "cdata.bamboohr": "bamboohr-connection-properties",
+        "cdata.BambooHR": "bamboohr-connection-properties",
       },
     };
   },
diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index d18b8d8e37..7fb7a00799 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -192,6 +192,14 @@ export default {
       this.showAuthorizingModal = true;
       this.showModal = false;
       this.resetData = false;
+
+      if (this.setting.config.AuthScheme === "OAuth") {
+        this.authorizeOAuthConnection();
+      } else {
+        this.authorizeNoneConnection();
+      }
+    },
+    authorizeOAuthConnection() {
       ProcessMaker.apiClient
         .post(`settings/${this.setting.id}/get-oauth-url`, this.formData)
         .then((response) => {
@@ -206,11 +214,13 @@ export default {
           this.showAuthorizingModal = false;
         });
     },
+    authorizeNoneConnection() {
+      const { driver } = this.setting.config;
+      window.location.href = `${window.location.origin}/external-integrations/${driver}`;
+    },
     onSave() {
-      const name = this.setting.key.split("cdata.")[1];
-      this.formData.name = name;
-      const driver = this.setting.config?.driver;
-      this.formData.driver = driver;
+      this.formData.name = this.setting.config?.name;
+      this.formData.driver = this.setting.config?.driver;
       this.transformed = { ...this.formData };
       this.authorizeConnection();
     },

From b229b22dd400cd17836eca77375e5841e0eae873 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Wed, 10 Jan 2024 15:35:23 -0600
Subject: [PATCH 7/9] Update connection properties components

---
 .../AdditionalDriverConnectionProperties.vue  |   3 +
 .../components/SettingDriverAuthorization.vue |   7 +-
 .../cdata/BamboohrConnectionProperties.vue    |   4 +
 .../cdata/DocusignConnectionProperties.vue    |   5 +-
 .../cdata/PasswordConnectionProperties.vue    | 113 ++++++++++++++++
 .../cdata/SapHanaConnectionProperties.vue     | 125 ++++++++++++++++++
 6 files changed, 255 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
 create mode 100644 resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue

diff --git a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
index 37eec5195b..7f194144af 100644
--- a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
+++ b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
@@ -14,6 +14,7 @@ import GithubConnectionProperties from "./cdata/GithubConnectionProperties.vue";
 import DocusignConnectionProperties from "./cdata/DocusignConnectionProperties.vue";
 import GmailConnectionProperties from "./cdata/GmailConnectionProperties.vue";
 import BamboohrConnectionProperties from "./cdata/BamboohrConnectionProperties.vue";
+import SapHanaConnectionProperties from "./cdata/SapHanaConnectionProperties.vue";
 
 export default {
   components: {
@@ -22,6 +23,7 @@ export default {
     DocusignConnectionProperties,
     GmailConnectionProperties,
     BamboohrConnectionProperties,
+    SapHanaConnectionProperties,
   },
   props: {
     formData: {
@@ -41,6 +43,7 @@ export default {
         "cdata.docusign": "docusign-connection-properties",
         "cdata.gmail": "gmail-connection-properties",
         "cdata.BambooHR": "bamboohr-connection-properties",
+        "cdata.saphana": "sap-hana-connection-properties",
       },
     };
   },
diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index 7fb7a00799..f4096d4d12 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -46,8 +46,9 @@
       </template>
       <div>
         <component
-          :is="authSchemeToComponent(setting.config?.AuthScheme)"
+          :is="authSchemeToComponent(setting.config.AuthScheme)"
           :form-data="formData"
+          :auth-scheme="setting.config.AuthScheme"
           @updateFormData="updateFormData"
         />
 
@@ -104,12 +105,14 @@ import settingMixin from "../mixins/setting";
 import AdditionalDriverConnectionProperties from "./AdditionalDriverConnectionProperties.vue";
 import OauthConnectionProperties from "./cdata/OauthConnectionProperties.vue";
 import NoneConnectionProperties from "./cdata/NoneConnectionProperties.vue";
+import PasswordConnectionProperties from "./cdata/PasswordConnectionProperties.vue";
 
 export default {
   components: {
     AdditionalDriverConnectionProperties,
     OauthConnectionProperties,
     NoneConnectionProperties,
+    PasswordConnectionProperties,
   },
   mixins: [settingMixin, FormErrorsMixin, Required],
   props: {
@@ -135,6 +138,8 @@ export default {
       componentsMap: {
         OAuth: "oauth-connection-properties",
         None: "none-connection-properties",
+        Password: "password-connection-properties",
+        Basic: "password-connection-properties",
       },
     };
   },
diff --git a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
index 3ae7df957f..74032c3495 100644
--- a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
@@ -93,6 +93,10 @@ export default {
     },
   },
   mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
     this.$emit("updateFormData", this.config);
   },
   methods: {
diff --git a/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue b/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
index 81cdbbfc7b..7599845514 100644
--- a/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
@@ -51,7 +51,10 @@ export default {
     },
   },
   mounted() {
-    this.config.use_sandbox = this.formData?.use_sandbox ?? true;
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
 
     // Emit the updateFormData event after assigning values.
     this.$emit("updateFormData", this.config);
diff --git a/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue b/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
new file mode 100644
index 0000000000..523630db86
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <b-form-group
+      required
+      :label="$t('User')"
+      :description="
+        formDescription('The user account used to authenticate.', 'user', errors)
+      "
+      :invalid-feedback="errorMessage('user', errors)"
+      :state="errorState('user', errors)"
+    >
+      <b-form-input
+        v-model="config.user"
+        required
+        autofocus
+        autocomplete="off"
+        :state="errorState('user', errors)"
+        name="user"
+        data-cy="user"
+      />
+    </b-form-group>
+
+    <b-form-group
+      required
+      :label="$t('Password')"
+      :description="
+        formDescription('The password used to authenticate the user.', 'password', errors)
+      "
+      :invalid-feedback="errorMessage('password', errors)"
+      :state="errorState('password', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.password"
+          required
+          autofocus
+          autocomplete="off"
+          trim
+          :type="inputType"
+          :state="errorState('password', errors)"
+          name="password"
+          data-cy="password"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Toggle Show Password')"
+            variant="secondary"
+            @click="togglePassword"
+          >
+            <i
+              class="fas"
+              :class="icon"
+            />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+    authScheme: {
+      type: String,
+      default: "Password",
+    },
+  },
+  data() {
+    return {
+      config: {
+        AuthScheme: this.authScheme,
+        user: "",
+        password: "",
+      },
+      errors: {},
+      inputType: "password",
+    };
+  },
+  computed: {
+    icon() {
+      return this.inputType === "password" ? "fa-eye-slash" : "fa-eye";
+    },
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {
+    togglePassword() {
+      this.inputType = this.inputType === "password" ? "text" : "password";
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue b/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
new file mode 100644
index 0000000000..d366edbc09
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <!-- Server input field -->
+    <b-form-group
+      required
+      :label="$t('Server')"
+      :description="
+        formDescription(
+          'The name of the server running SAP HANA database.',
+          'server',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('server', errors)"
+      :state="errorState('server', errors)"
+    >
+      <b-form-input
+        v-model="config.server"
+        type="text"
+        required
+        trim
+        name="server"
+        data-cy="server"
+        :state="errorState('server', errors)"
+      />
+    </b-form-group>
+
+    <!-- Port input field -->
+    <b-form-group
+      required
+      :label="$t('Port')"
+      :description="formDescription('The port of the SAP HANA database.', 'port', errors)"
+      :invalid-feedback="errorMessage('port', errors)"
+      :state="errorState('port', errors)"
+    >
+      <b-form-input
+        v-model="config.port"
+        required
+        name="port"
+        data-cy="port"
+        :state="errorState('port', errors)"
+      />
+    </b-form-group>
+
+    <!-- Database input field -->
+    <b-form-group
+      required
+      :label="$t('Database')"
+      :description="
+        formDescription('The name of the SAP HANA database.', 'database', errors)
+      "
+      :invalid-feedback="errorMessage('database', errors)"
+      :state="errorState('database', errors)"
+    >
+      <b-form-input
+        v-model="config.database"
+        required
+        name="database"
+        data-cy="database"
+        :state="errorState('database', errors)"
+      />
+    </b-form-group>
+
+    <!-- UseSSL switch field -->
+    <b-form-group
+      :label="$t('Use SSL')"
+      :description="
+        formDescription('This field sets whether SSL is enabled.', 'UseSSL', errors)
+      "
+      :invalid-feedback="errorMessage('UseSSL', errors)"
+      :state="errorState('UseSSL', errors)"
+    >
+      <b-form-checkbox
+        v-model="config.UseSSL"
+        name="use_ssl"
+        data-cy="use_ssl"
+        switch
+        :state="errorState('UseSSL', errors)"
+      />
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      errors: {},
+      config: {
+        server: "",
+        port: "",
+        database: "",
+        UseSSL: true,
+      },
+    };
+  },
+  computed: {},
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {},
+};
+</script>

From 0d0e5fa65f23587c5afc3a5f72947cb0489613a1 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Thu, 11 Jan 2024 13:11:05 -0600
Subject: [PATCH 8/9] Fix authentication scheme console error and update
 connection properties

---
 .../settings/components/SettingDriverAuthorization.vue      | 6 +++---
 .../settings/components/cdata/NoneConnectionProperties.vue  | 5 ++++-
 .../settings/components/cdata/OauthConnectionProperties.vue | 5 ++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index f4096d4d12..c0aeb6b7b8 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -46,9 +46,9 @@
       </template>
       <div>
         <component
-          :is="authSchemeToComponent(setting.config.AuthScheme)"
+          :is="authSchemeToComponent(setting.config?.AuthScheme)"
           :form-data="formData"
-          :auth-scheme="setting.config.AuthScheme"
+          :auth-scheme="setting.config?.AuthScheme"
           @updateFormData="updateFormData"
         />
 
@@ -118,7 +118,7 @@ export default {
   props: {
     setting: {
       type: [Object, null],
-      default: null,
+      default: () => ({}),
     },
     value: {
       type: Object,
diff --git a/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
index e6af942617..f95f8d50ca 100644
--- a/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
@@ -17,7 +17,10 @@ export default {
     };
   },
   mounted() {
-    this.config = this.formData;
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
   },
 };
 </script>
diff --git a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
index cdb35cf727..43d205c1b4 100644
--- a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
@@ -140,7 +140,10 @@ export default {
     },
   },
   mounted() {
-    this.config = this.formData;
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
     this.$emit("updateFormData", this.config);
   },
   methods: {

From 037abd5faf69a3198e62fa4e80c2bc2715cc90ac Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Tue, 13 Feb 2024 13:47:01 -0600
Subject: [PATCH 9/9] Refactor driver authorization logic when AuthScheme is
 None

---
 .../components/SettingDriverAuthorization.vue     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index c0aeb6b7b8..494ac24c6b 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -220,8 +220,19 @@ export default {
         });
     },
     authorizeNoneConnection() {
-      const { driver } = this.setting.config;
-      window.location.href = `${window.location.origin}/external-integrations/${driver}`;
+      ProcessMaker.apiClient
+        .post(`settings/${this.setting.id}/authorize-driver`, this.formData)
+        .then((response) => {
+          window.location = response.data.url;
+          this.showModal = false;
+          this.showAuthorizingModal = true;
+        })
+        .catch((error) => {
+          const errorMessage = error.response?.data?.message || error.message;
+          ProcessMaker.alert(errorMessage, "danger");
+          this.showModal = true;
+          this.showAuthorizingModal = false;
+        });
     },
     onSave() {
       this.formData.name = this.setting.config?.name;