feat(notification): add additional Header to webhook

server/notification-providers/webhook.js

@@ -28,8 +28,15 @@ class Webhook extends NotificationProvider {
                 finalData = data;
             }
 
-            if (notification.webhookAuthorizationHeader) {
-                config.headers["Authorization"] = notification.webhookAuthorizationHeader;
+            if (notification.webhookAdditionalHeaders) {
+                try {
+                    config.headers = {
+                        ...config.headers,
+                        ...JSON.parse(notification.webhookAdditionalHeaders)
+                    };
+                } catch (err) {
+                    throw "Addional Headers is not a valid JSON";
+                }
             }
 
             await axios.post(notification.webhookURL, finalData, config);

src/components/notifications/Webhook.vue

@@ -12,7 +12,9 @@
     </div>
 
     <div class="mb-3">
-        <label for="webhook-content-type" class="form-label">{{ $t("Content Type") }}</label>
+        <label for="webhook-content-type" class="form-label">{{
+            $t("Content Type")
+        }}</label>
         <select
             id="webhook-content-type"
             v-model="$parent.notification.webhookContentType"
@@ -24,7 +26,7 @@
         </select>
 
         <div class="form-text">
-            <p>{{ $t("webhookJsonDesc", ["\"application/json\""]) }}</p>
+            <p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
             <i18n-t tag="p" keypath="webhookFormDataDesc">
                 <template #multipart>"multipart/form-data"</template>
                 <template #decodeFunction>
@@ -35,20 +37,42 @@
     </div>
 
     <div class="mb-3">
-        <label for="authorization-header" class="form-label">{{ $t("Authorization Header") }}</label>
-        <HiddenInput
-            id="authorization-header"
-            v-model="$parent.notification.webhookAuthorizationHeader"
-            autocomplete="one-time-code"
-        ></HiddenInput>
+        <i18n-t
+            tag="label"
+            class="form-label"
+            for="additionalHeaders"
+            keypath="webhookAdditionalHeadersTitle"
+        >
+        </i18n-t>
+        <textarea
+            id="additionalHeaders"
+            v-model="$parent.notification.webhookAdditionalHeaders"
+            class="form-control"
+            :placeholder="headersPlaceholder"
+        ></textarea>
+        <div class="form-text">
+            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
+        </div>
     </div>
 </template>
 
 <script>
-import HiddenInput from "../HiddenInput.vue";
 export default {
-    components: {
-        HiddenInput,
+    computed: {
+        headersPlaceholder() {
+            return this.$t("Example:", [
+                `
+{
+    "HeaderName": "HeaderValue"
+}`,
+            ]);
+        },
     },
 };
 </script>
+
+<style lang="scss" scoped>
+textarea {
+    min-height: 200px;
+}
+</style>

src/languages/en.js

@@ -206,6 +206,8 @@ export default {
     "Content Type": "Content Type",
     webhookJsonDesc: "{0} is good for any modern HTTP servers such as Express.js",
     webhookFormDataDesc: "{multipart} is good for PHP. The JSON will need to be parsed with {decodeFunction}",
+    webhookAdditionalHeadersTitle: "Additional Headers",
+    webhookAdditionalHeadersDesc: "Sets additional headers sent with the webhook.",
     smtp: "Email (SMTP)",
     secureOptionNone: "None / STARTTLS (25, 587)",
     secureOptionTLS: "TLS (465)",