New notification provider: Threema Gateway

src/components/NotificationDialog.vue

@@ -152,6 +152,7 @@ export default {
                 "stackfield": "Stackfield",
                 "teams": "Microsoft Teams",
                 "telegram": "Telegram",
+                "threema": "Threema",
                 "twilio": "Twilio",
                 "Splunk": "Splunk",
                 "webhook": "Webhook",

src/components/notifications/Threema.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="mb-3">
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipientType") }}</label>
+        <select
+            id="threema-recipient" v-model="$parent.notification.threemaRecipientType" :required="true"
+            class="form-select"
+        >
+            <option value="identity">{{ $t("threemaRecipientTypeIdentity") }}</option>
+            <option value="phone">{{ $t("threemaRecipientTypePhone") }}</option>
+            <option value="email">{{ $t("threemaRecipientTypeEmail") }}</option>
+        </select>
+    </div>
+    <div v-if="$parent.notification.threemaRecipientType === 'identity'" class="mb-3">
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypeIdentity") }} <small>({{ $t("threemaRecipientTypeIdentityFormat") }})</small></label>
+        <input
+            id="threema-recipient"
+            v-model="$parent.notification.threemaRecipient"
+            class="form-control"
+            minlength="8"
+            maxlength="8"
+            pattern="[A-Z0-9]{8}"
+            required
+            type="text"
+        >
+    </div>
+    <div v-if="$parent.notification.threemaRecipientType === 'phone'" class="mb-3">
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }}  {{ $t("threemaRecipientTypePhone") }} <small>({{ $t("threemaRecipientTypePhoneFormat") }})</small></label>
+        <input
+            id="threema-recipient"
+            v-model="$parent.notification.threemaRecipient"
+            class="form-control"
+            maxlength="15"
+            pattern="\d{1,15}"
+            required
+            type="text"
+        >
+    </div>
+    <div v-if="$parent.notification.threemaRecipientType === 'email'" class="mb-3">
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypeEmail") }}</label>
+        <input
+            id="threema-recipient"
+            v-model="$parent.notification.threemaRecipient"
+            class="form-control"
+            maxlength="254"
+            required
+            type="email"
+        >
+    </div>
+    <div class="mb-3">
+        <label class="form-label" for="threema-sender">{{ $t("threemaSenderIdentity") }} <small>({{ $t("threemaSenderIdentityFormat") }})</small></label>
+        <input
+            id="threema-sender"
+            v-model="$parent.notification.threemaSenderIdentity"
+            class="form-control"
+            minlength="8"
+            maxlength="8"
+            pattern="^\*[A-Z0-9]{7}$"
+            required
+            type="text"
+        >
+    </div>
+    <div class="mb-3">
+        <label class="form-label" for="threema-secret">{{ $t("threemaApiAuthenticationSecret") }}</label>
+        <HiddenInput
+            id="threema-secret" v-model="$parent.notification.threemaSecret" :required="true"
+            autocomplete="false"
+        ></HiddenInput>
+        <i18n-t class="form-text" keypath="wayToGetThreemaGateway" tag="div">
+            <a href="https://threema.ch/en/gateway" target="_blank">{{ $t("here") }}</a>
+        </i18n-t>
+        <i18n-t class="form-text" keypath="threemaBasicModeInfo" tag="div">
+            <a href="https://gateway.threema.ch/en/developer/api" target="_blank">{{ $t("here") }}</a>
+        </i18n-t>
+    </div>
+</template>
+<script lang="ts" setup>
+import HiddenInput from "../HiddenInput.vue";
+</script>

src/components/notifications/index.js

@@ -52,6 +52,7 @@ import STMP from "./SMTP.vue";
 import Teams from "./Teams.vue";
 import TechulusPush from "./TechulusPush.vue";
 import Telegram from "./Telegram.vue";
+import Threema from "./Threema.vue";
 import Twilio from "./Twilio.vue";
 import Webhook from "./Webhook.vue";
 import WeCom from "./WeCom.vue";
@@ -119,6 +120,7 @@ const NotificationFormList = {
     "stackfield": Stackfield,
     "teams": Teams,
     "telegram": Telegram,
+    "threema": Threema,
     "twilio": Twilio,
     "Splunk": Splunk,
     "webhook": Webhook,

src/lang/en.json

@@ -942,5 +942,17 @@
     "Allow Long SMS": "Allow Long SMS",
     "cellsyntSplitLongMessages": "Split long messages into up to 6 parts. 153 x 6 = 918 characters.",
     "max 15 digits": "max 15 digits",
-    "max 11 alphanumeric characters": "max 11 alphanumeric characters"
+    "max 11 alphanumeric characters": "max 11 alphanumeric characters",
+    "wayToGetThreemaGateway": "You can register for Threema Gateway {0}.",
+    "threemaRecipient": "Recipient",
+    "threemaRecipientType": "Recipient Type",
+    "threemaRecipientTypeIdentity": "Threema-ID",
+    "threemaRecipientTypeIdentityFormat": "8 characters",
+    "threemaRecipientTypePhone": "Phone Number",
+    "threemaRecipientTypePhoneFormat": "E.164, without leading +",
+    "threemaRecipientTypeEmail": "Email Address",
+    "threemaSenderIdentity": "Sender",
+    "threemaSenderIdentityFormat": "8 characters, usually starts with '*'",
+    "threemaApiAuthenticationSecret": "API authentication secret",
+    "threemaBasicModeInfo": "Note: This integration uses Threema Gateway in basic mode (server-based encryption). Further details can be found {0}."
 }