chore:Webhook custom documentation (#3636)

* improved the documentation

* fixed the `customBodyPlaceholder` not being translated

* fixed required not being set where necessary

* changed the docs that `monitorJSON` is also avalibale for cert-expiry

src/components/notifications/Webhook.vue

@@ -12,9 +12,7 @@
     </div>
 
     <div class="mb-3">
-        <label for="webhook-request-body" class="form-label">{{
-            $t("Request Body")
-        }}</label>
+        <label for="webhook-request-body" class="form-label">{{ $t("Request Body") }}</label>
         <select
             id="webhook-request-body"
             v-model="$parent.notification.webhookContentType"
@@ -26,40 +24,29 @@
             <option value="custom">{{ $t("webhookBodyCustomOption") }}</option>
         </select>
 
-        <div class="form-text">
-            <div v-if="$parent.notification.webhookContentType == 'json'">
-                <p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
-            </div>
-            <div v-if="$parent.notification.webhookContentType == 'form-data'">
-                <i18n-t tag="p" keypath="webhookFormDataDesc">
+        <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>
-            </div>
-            <div v-if="$parent.notification.webhookContentType == 'custom'">
-                <i18n-t tag="p" keypath="webhookCustomBodyDesc">
-                    <template #msg>
-                        <code>msg</code>
-                    </template>
-                    <template #heartbeat>
-                        <code>heartbeatJSON</code>
-                    </template>
-                    <template #monitor>
-                        <code>monitorJSON</code>
-                    </template>
+        <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>
-            </div>
-        </div>
+            <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
-            v-if="$parent.notification.webhookContentType == 'custom'"
                 id="customBody"
                 v-model="$parent.notification.webhookCustomBody"
                 class="form-control"
                 :placeholder="customBodyPlaceholder"
+                required
             ></textarea>
+        </template>
     </div>
 
     <div class="mb-3">
@@ -67,15 +54,14 @@
             <input v-model="showAdditionalHeadersField" class="form-check-input" type="checkbox">
             <label class="form-check-label">{{ $t("webhookAdditionalHeadersTitle") }}</label>
         </div>
-        <div class="form-text">
-            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
-        </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>
@@ -90,18 +76,18 @@ export default {
     computed: {
         headersPlaceholder() {
             return this.$t("Example:", [
-                `
-{
+`{
     "Authorization": "Authorization Token"
 }`,
             ]);
         },
         customBodyPlaceholder() {
-            return `Example:
-{
-    "Title": "Uptime Kuma Alert - {{ monitorJSON['name'] }}",
+            return this.$t("Example:", [
+`{
+    "Title": "Uptime Kuma Alert{% if monitorJSON %} - {{ monitorJSON['name'] }}{% endif %}",
     "Body": "{{ msg }}"
-}`;
+}`
+            ]);
         }
     },
 };

src/lang/en.json

@@ -213,7 +213,12 @@
     "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}",
-    "webhookCustomBodyDesc": "Define a custom HTTP Body for the request. Template variables {msg}, {heartbeat}, {monitor} are accepted.",
+    "liquidIntroduction": "Templatability is achieved via the Liquid templating language. Please refer to the {0} for usage instructions. These are the available variables:",
+    "templateMsg": "message of the notification",
+    "templateHeartbeatJSON": "object describing the heartbeat",
+    "templateMonitorJSON": "object describing the monitor",
+    "templateLimitedToUpDownCertNotifications": "only available for UP/DOWN/Certificate expiry notifications",
+    "templateLimitedToUpDownNotifications": "only available for UP/DOWN notifications",
     "webhookAdditionalHeadersTitle": "Additional Headers",
     "webhookAdditionalHeadersDesc": "Sets additional headers sent with the webhook. Each header should be defined as a JSON key/value.",
     "webhookBodyPresetOption": "Preset - {0}",