feat: rework notification templating and add support for telegram (#5637)

src/components/TemplatedTextarea.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="form-text mb-2">
+        <i18n-t tag="div" keypath="liquidIntroduction">
+            <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
+        </i18n-t>
+
+        <code v-pre>{{ msg }}</code>: {{ $t("templateMsg") }}<br />
+        <code v-pre>{{ name }}</code>: {{ $t("templateServiceName") }}<br />
+        <code v-pre>{{ status }}</code>: {{ $t("templateStatus") }}<br />
+        <code v-pre>{{ hostnameOrURL }}</code>: {{ $t("templateHostnameOrURL") }}<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 />
+    </div>
+
+    <textarea
+        :id="id"
+        ref="templatedTextarea"
+        v-model="model"
+        class="form-control"
+        :placeholder="placeholder"
+        :required="required"
+        autocomplete="false"
+    ></textarea>
+</template>
+
+<script>
+export default {
+    props: {
+        /**
+         * The value of the templated textarea.
+         */
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        /**
+         * id for the templated textarea.
+         */
+        id: {
+            type: String,
+            required: true,
+        },
+        /**
+         * Whether the templated textarea is required.
+         * @example true
+         */
+        required: {
+            type: Boolean,
+            required: true,
+        },
+        /**
+         * Placeholder text for the templated textarea.
+         */
+        placeholder: {
+            type: String,
+            default: ""
+        },
+    },
+    emits: [ "update:modelValue" ],
+    computed: {
+        /**
+         * Send value update to parent on change.
+         */
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            }
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+textarea {
+    min-height: 150px;
+}
+</style>