feat(notification): add additional Header to webhook

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>