Merge branch 'master' into snmp-monitor

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,87 @@
+<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
+            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") }}</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 class="form-text">
+            <p>{{ $t("threemaRecipientTypeIdentityFormat") }}</p>
+        </div>
+    </div>
+    <div v-else-if="$parent.notification.threemaRecipientType === 'phone'" class="mb-3">
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypePhone") }}</label>
+        <input
+            id="threema-recipient"
+            v-model="$parent.notification.threemaRecipient"
+            class="form-control"
+            maxlength="15"
+            pattern="\d{1,15}"
+            required
+            type="text"
+        >
+        <div class="form-text">
+            <p>{{ $t("threemaRecipientTypePhoneFormat") }}</p>
+        </div>
+    </div>
+    <div v-else-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") }}</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 class="form-text">
+            <p>{{ $t("threemaSenderIdentityFormat") }}</p>
+        </div>
+    </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
+            autocomplete="false"
+        ></HiddenInput>
+    </div>
+    <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>
+</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/components/settings/APIKeys.vue

@@ -1,53 +1,63 @@
 <template>
     <div>
-        <div class="add-btn">
-            <button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
-                <font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
-            </button>
+        <div
+            v-if="settings.disableAuth"
+            class="mt-5 d-flex align-items-center justify-content-center my-3"
+        >
+            {{ $t("apiKeysDisabledMsg") }}
         </div>
+        <div v-else>
+            <div class="add-btn">
+                <button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
+                    <font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
+                </button>
+            </div>
 
-        <div>
-            <span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
-                {{ $t("No API Keys") }}
-            </span>
+            <div>
+                <span
+                    v-if="Object.keys(keyList).length === 0"
+                    class="d-flex align-items-center justify-content-center my-3"
+                >
+                    {{ $t("No API Keys") }}
+                </span>
 
-            <div
-                v-for="(item, index) in keyList"
-                :key="index"
-                class="item"
-                :class="item.status"
-            >
-                <div class="left-part">
-                    <div
-                        class="circle"
-                    ></div>
-                    <div class="info">
-                        <div class="title">{{ item.name }}</div>
-                        <div class="status">
-                            {{ $t("apiKey-" + item.status) }}
-                        </div>
-                        <div class="date">
-                            {{ $t("Created") }}: {{ item.createdDate }}
-                        </div>
-                        <div class="date">
-                            {{ $t("Expires") }}: {{ item.expires || $t("Never") }}
+                <div
+                    v-for="(item, index) in keyList"
+                    :key="index"
+                    class="item"
+                    :class="item.status"
+                >
+                    <div class="left-part">
+                        <div class="circle"></div>
+                        <div class="info">
+                            <div class="title">{{ item.name }}</div>
+                            <div class="status">
+                                {{ $t("apiKey-" + item.status) }}
+                            </div>
+                            <div class="date">
+                                {{ $t("Created") }}: {{ item.createdDate }}
+                            </div>
+                            <div class="date">
+                                {{ $t("Expires") }}:
+                                {{ item.expires || $t("Never") }}
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                <div class="buttons">
-                    <div class="btn-group" role="group">
-                        <button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
-                            <font-awesome-icon icon="pause" /> {{ $t("Disable") }}
-                        </button>
+                    <div class="buttons">
+                        <div class="btn-group" role="group">
+                            <button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
+                                <font-awesome-icon icon="pause" /> {{ $t("Disable") }}
+                            </button>
 
-                        <button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
-                            <font-awesome-icon icon="play" /> {{ $t("Enable") }}
-                        </button>
+                            <button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
+                                <font-awesome-icon icon="play" /> {{ $t("Enable") }}
+                            </button>
 
-                        <button class="btn btn-danger" @click="deleteDialog(item.id)">
-                            <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
-                        </button>
+                            <button class="btn btn-danger" @click="deleteDialog(item.id)">
+                                <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -88,6 +98,9 @@ export default {
             let result = Object.values(this.$root.apiKeyList);
             return result;
         },
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
     },
 
     methods: {
@@ -126,9 +139,11 @@ export default {
          * @returns {void}
          */
         disableKey() {
-            this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
-                this.$root.toastRes(res);
-            });
+            this.$root
+                .getSocket()
+                .emit("disableAPIKey", this.selectedKeyID, (res) => {
+                    this.$root.toastRes(res);
+                });
         },
 
         /**
@@ -146,113 +161,113 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    @import "../../assets/vars.scss";
-
-    .mobile {
-        .item {
-            flex-direction: column;
-            align-items: flex-start;
-            margin-bottom: 20px;
-        }
-    }
-
-    .add-btn {
-        padding-top: 20px;
-        padding-bottom: 20px;
-    }
+@import "../../assets/vars.scss";
 
+.mobile {
     .item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        text-decoration: none;
-        border-radius: 10px;
-        transition: all ease-in-out 0.15s;
-        justify-content: space-between;
-        padding: 10px;
-        min-height: 90px;
-        margin-bottom: 5px;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 20px;
+    }
+}
 
-        &:hover {
-            background-color: $highlight-white;
+.add-btn {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    border-radius: 10px;
+    transition: all ease-in-out 0.15s;
+    justify-content: space-between;
+    padding: 10px;
+    min-height: 90px;
+    margin-bottom: 5px;
+
+    &:hover {
+        background-color: $highlight-white;
+    }
+
+    &.active {
+        .circle {
+            background-color: $primary;
         }
+    }
 
-        &.active {
-            .circle {
-                background-color: $primary;
-            }
-        }
-
-        &.inactive {
-            .circle {
-                background-color: $danger;
-            }
-        }
-
-        &.expired {
-            .left-part {
-                opacity: 0.3;
-            }
-
-            .circle {
-                background-color: $dark-font-color;
-            }
+    &.inactive {
+        .circle {
+            background-color: $danger;
         }
+    }
 
+    &.expired {
         .left-part {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-
-            .circle {
-                width: 25px;
-                height: 25px;
-                border-radius: 50rem;
-            }
-
-            .info {
-                .title {
-                    font-weight: bold;
-                    font-size: 20px;
-                }
-
-                .status {
-                    font-size: 14px;
-                }
-            }
+            opacity: 0.3;
         }
 
-        .buttons {
-            display: flex;
-            gap: 8px;
-            flex-direction: row-reverse;
+        .circle {
+            background-color: $dark-font-color;
+        }
+    }
 
-            .btn-group {
-                width: 310px;
+    .left-part {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+
+        .circle {
+            width: 25px;
+            height: 25px;
+            border-radius: 50rem;
+        }
+
+        .info {
+            .title {
+                font-weight: bold;
+                font-size: 20px;
+            }
+
+            .status {
+                font-size: 14px;
             }
         }
     }
 
-    .date {
-        margin-top: 5px;
-        display: block;
-        font-size: 14px;
-        background-color: rgba(255, 255, 255, 0.5);
-        border-radius: 20px;
-        padding: 0 10px;
-        width: fit-content;
+    .buttons {
+        display: flex;
+        gap: 8px;
+        flex-direction: row-reverse;
 
-        .dark & {
-            color: white;
-            background-color: rgba(255, 255, 255, 0.1);
+        .btn-group {
+            width: 310px;
         }
     }
+}
 
-    .dark {
-        .item {
-            &:hover {
-                background-color: $dark-bg2;
-            }
+.date {
+    margin-top: 5px;
+    display: block;
+    font-size: 14px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 20px;
+    padding: 0 10px;
+    width: fit-content;
+
+    .dark & {
+        color: white;
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.dark {
+    .item {
+        &:hover {
+            background-color: $dark-bg2;
         }
     }
+}
 </style>

src/lang/en.json

@@ -949,5 +949,18 @@
     "snmpOIDHelptext": "Enter the OID for the sensor or status you want to monitor. Use network management tools like MIB browsers or SNMP software if you're unsure about the OID.",
     "Condition": "Condition",
     "SNMP Version": "SNMP Version",
-    "Please enter a valid OID.": "Please enter a valid OID."
+    "Please enter a valid OID.": "Please enter a valid OID.",
+    "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": "Gateway-ID",
+    "threemaSenderIdentityFormat": "8 characters, usually starts with *",
+    "threemaApiAuthenticationSecret": "Gateway-ID Secret",
+    "threemaBasicModeInfo": "Note: This integration uses Threema Gateway in basic mode (server-based encryption). Further details can be found {0}.",
+    "apiKeysDisabledMsg": "API keys are disabled because authentication is disabled."
 }

src/pages/Details.vue

@@ -16,7 +16,7 @@
                 </div>
             </div>
             <p class="url">
-                <a v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'mp-health' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ filterPassword(monitor.url) }}</a>
+                <a v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'mp-health' || monitor.type === 'real-browser' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ filterPassword(monitor.url) }}</a>
                 <span v-if="monitor.type === 'port'">TCP Port {{ monitor.hostname }}:{{ monitor.port }}</span>
                 <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
                 <span v-if="monitor.type === 'keyword'">

src/util.js

@@ -8,10 +8,14 @@
 // Backend uses the compiled file util.js
 // Frontend uses util.ts
 */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sleep = exports.flipStatus = exports.badgeConstants = exports.CONSOLE_STYLE_BgGray = exports.CONSOLE_STYLE_BgWhite = exports.CONSOLE_STYLE_BgCyan = exports.CONSOLE_STYLE_BgMagenta = exports.CONSOLE_STYLE_BgBlue = exports.CONSOLE_STYLE_BgYellow = exports.CONSOLE_STYLE_BgGreen = exports.CONSOLE_STYLE_BgRed = exports.CONSOLE_STYLE_BgBlack = exports.CONSOLE_STYLE_FgPink = exports.CONSOLE_STYLE_FgBrown = exports.CONSOLE_STYLE_FgViolet = exports.CONSOLE_STYLE_FgLightBlue = exports.CONSOLE_STYLE_FgLightGreen = exports.CONSOLE_STYLE_FgOrange = exports.CONSOLE_STYLE_FgGray = exports.CONSOLE_STYLE_FgWhite = exports.CONSOLE_STYLE_FgCyan = exports.CONSOLE_STYLE_FgMagenta = exports.CONSOLE_STYLE_FgBlue = exports.CONSOLE_STYLE_FgYellow = exports.CONSOLE_STYLE_FgGreen = exports.CONSOLE_STYLE_FgRed = exports.CONSOLE_STYLE_FgBlack = exports.CONSOLE_STYLE_Hidden = exports.CONSOLE_STYLE_Reverse = exports.CONSOLE_STYLE_Blink = exports.CONSOLE_STYLE_Underscore = exports.CONSOLE_STYLE_Dim = exports.CONSOLE_STYLE_Bright = exports.CONSOLE_STYLE_Reset = exports.MIN_INTERVAL_SECOND = exports.MAX_INTERVAL_SECOND = exports.SQL_DATETIME_FORMAT_WITHOUT_SECOND = exports.SQL_DATETIME_FORMAT = exports.SQL_DATE_FORMAT = exports.STATUS_PAGE_MAINTENANCE = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.MAINTENANCE = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isNode = exports.isDev = void 0;
 exports.evaluateJsonQuery = exports.intHash = exports.localToUTC = exports.utcToLocal = exports.utcToISODateTime = exports.isoToUTCDateTime = exports.parseTimeFromTimeObject = exports.parseTimeObject = exports.getMaintenanceRelativeURL = exports.getMonitorRelativeURL = exports.genSecret = exports.getCryptoRandomInt = exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.log = exports.debug = exports.ucfirst = void 0;
+exports.intHash = exports.localToUTC = exports.utcToLocal = exports.utcToISODateTime = exports.isoToUTCDateTime = exports.parseTimeFromTimeObject = exports.parseTimeObject = exports.getMaintenanceRelativeURL = exports.getMonitorRelativeURL = exports.genSecret = exports.getCryptoRandomInt = exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.log = exports.debug = exports.ucfirst = void 0;
 const dayjs = require("dayjs");
 const jsonata = require("jsonata");
 exports.isDev = process.env.NODE_ENV === "development";
@@ -153,11 +157,11 @@ class Logger {
         module = module.toUpperCase();
         level = level.toUpperCase();
         let now;
-        if (dayjs.tz) {
-            now = dayjs.tz(new Date()).format();
+        if (dayjs_1.default.tz) {
+            now = dayjs_1.default.tz(new Date()).format();
         }
         else {
-            now = dayjs().format();
+            now = (0, dayjs_1.default)().format();
         }
         const levelColor = consoleLevelColors[level];
         const moduleColor = consoleModuleColors[intHash(module, consoleModuleColors.length)];
@@ -258,11 +262,11 @@ function polyfill() {
 exports.polyfill = polyfill;
 class TimeLogger {
     constructor() {
-        this.startTime = dayjs().valueOf();
+        this.startTime = (0, dayjs_1.default)().valueOf();
     }
     print(name) {
         if (exports.isDev && process.env.TIMELOGGER === "1") {
-            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
+            console.log(name + ": " + ((0, dayjs_1.default)().valueOf() - this.startTime) + "ms");
         }
     }
 }
@@ -374,19 +378,19 @@ function parseTimeFromTimeObject(obj) {
 }
 exports.parseTimeFromTimeObject = parseTimeFromTimeObject;
 function isoToUTCDateTime(input) {
-    return dayjs(input).utc().format(exports.SQL_DATETIME_FORMAT);
+    return (0, dayjs_1.default)(input).utc().format(exports.SQL_DATETIME_FORMAT);
 }
 exports.isoToUTCDateTime = isoToUTCDateTime;
 function utcToISODateTime(input) {
-    return dayjs.utc(input).toISOString();
+    return dayjs_1.default.utc(input).toISOString();
 }
 exports.utcToISODateTime = utcToISODateTime;
 function utcToLocal(input, format = exports.SQL_DATETIME_FORMAT) {
-    return dayjs.utc(input).local().format(format);
+    return dayjs_1.default.utc(input).local().format(format);
 }
 exports.utcToLocal = utcToLocal;
 function localToUTC(input, format = exports.SQL_DATETIME_FORMAT) {
-    return dayjs(input).utc().format(format);
+    return (0, dayjs_1.default)(input).utc().format(format);
 }
 exports.localToUTC = localToUTC;
 function intHash(str, length = 10) {

src/util.ts

@@ -9,7 +9,7 @@
 // Frontend uses util.ts
 */
 
-import * as dayjs from "dayjs";
+import dayjs from "dayjs";
 
 // For loading dayjs plugins, don't remove event though it is not used in this file
 // eslint-disable-next-line @typescript-eslint/no-unused-vars