1 files changed, 100 insertions, 0 deletions
diff --git a/src/components/notifications/Webhook.vue b/src/components/notifications/Webhook.vue
new file mode 100644
index 0000000..8c67a27
--- /dev/null
+++ b/src/components/notifications/Webhook.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="mb-3">
+        <label for="webhook-url" class="form-label">{{ $t("Post URL") }}</label>
+        <input
+            id="webhook-url"
+            v-model="$parent.notification.webhookURL"
+            type="url"
+            pattern="https?://.+"
+            class="form-control"
+            required
+        />
+    </div>
+
+    <div class="mb-3">
+        <label for="webhook-request-body" class="form-label">{{ $t("Request Body") }}</label>
+        <select
+            id="webhook-request-body"
+            v-model="$parent.notification.webhookContentType"
+            class="form-select"
+            required
+        >
+            <option value="json">{{ $t("webhookBodyPresetOption", ["application/json"]) }}</option>
+            <option value="form-data">{{ $t("webhookBodyPresetOption", ["multipart/form-data"]) }}</option>
+            <option value="custom">{{ $t("webhookBodyCustomOption") }}</option>
+        </select>
+
+        <div v-if="$parent.notification.webhookContentType == 'json'" class="form-text">{{ $t("webhookJsonDesc", ['"application/json"']) }}</div>
+        <i18n-t v-else-if="$parent.notification.webhookContentType == 'form-data'" tag="div" keypath="webhookFormDataDesc" class="form-text">
+            <template #multipart>multipart/form-data"</template>
+            <template #decodeFunction>
+                <strong>json_decode($_POST['data'])</strong>
+            </template>
+        </i18n-t>
+        <template v-else-if="$parent.notification.webhookContentType == 'custom'">
+            <i18n-t tag="div" keypath="liquidIntroduction" class="form-text">
+                <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
+            </i18n-t>
+            <code v-pre>{{msg}}</code>: {{ $t("templateMsg") }}<br />
+            <code v-pre>{{heartbeatJSON}}</code>: {{ $t("templateHeartbeatJSON") }} <b>({{ $t("templateLimitedToUpDownNotifications") }})</b><br />
+            <code v-pre>{{monitorJSON}}</code>: {{ $t("templateMonitorJSON") }} <b>({{ $t("templateLimitedToUpDownCertNotifications") }})</b><br />
+
+            <textarea
+                id="customBody"
+                v-model="$parent.notification.webhookCustomBody"
+                class="form-control"
+                :placeholder="customBodyPlaceholder"
+                required
+            ></textarea>
+        </template>
+    </div>
+
+    <div class="mb-3">
+        <div class="form-check form-switch">
+            <input v-model="showAdditionalHeadersField" class="form-check-input" type="checkbox">
+            <label class="form-check-label">{{ $t("webhookAdditionalHeadersTitle") }}</label>
+        </div>
+        <div class="form-text">{{ $t("webhookAdditionalHeadersDesc") }}</div>
+        <textarea
+            v-if="showAdditionalHeadersField"
+            id="additionalHeaders"
+            v-model="$parent.notification.webhookAdditionalHeaders"
+            class="form-control"
+            :placeholder="headersPlaceholder"
+            :required="showAdditionalHeadersField"
+        ></textarea>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showAdditionalHeadersField: this.$parent.notification.webhookAdditionalHeaders != null,
+        };
+    },
+    computed: {
+        headersPlaceholder() {
+            return this.$t("Example:", [
+`{
+    "Authorization": "Authorization Token"
+}`,
+            ]);
+        },
+        customBodyPlaceholder() {
+            return this.$t("Example:", [
+`{
+    "Title": "Uptime Kuma Alert{% if monitorJSON %} - {{ monitorJSON['name'] }}{% endif %}",
+    "Body": "{{ msg }}"
+}`
+            ]);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+textarea {
+    min-height: 200px;
+}
+</style>