Update to 1.23.16

* [V1 Only] Change dev server's data path to ./data/v1

* Fix GHSA-2qgm-m29m-cj2h

.github/workflows/auto-test.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, ubuntu-latest, windows-latest, ARM64]
-        node: [ 14, 20 ]
+        node: [ 16, 20.5 ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -33,8 +33,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node }}
-    - run: npm install npm@9 -g
+    - run: npm ci
-    - run: npm install
     - run: npm run build
     - run: npm test
       env:
@@ -50,7 +49,7 @@ jobs:
     strategy:
       matrix:
         os: [ ARMv7 ]
-        node: [ 14, 20 ]
+        node: [ 16, 20.5 ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -61,7 +60,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-      - run: npm install npm@9 -g
       - run: npm ci --production
 
   check-linters:
@@ -71,11 +69,11 @@ jobs:
     - run: git config --global core.autocrlf false  # Mainly for Windows
     - uses: actions/checkout@v4
 
-    - name: Use Node.js 14
+    - name: Use Node.js 20
       uses: actions/setup-node@v4
       with:
-        node-version: 14
+        node-version: 20.5
-    - run: npm install
+    - run: npm ci
     - run: npm run lint:prod
 
   e2e-tests:
@@ -85,11 +83,11 @@ jobs:
     - run: git config --global core.autocrlf false  # Mainly for Windows
     - uses: actions/checkout@v4
 
-    - name: Use Node.js 14
+    - name: Use Node.js 16
       uses: actions/setup-node@v4
       with:
-        node-version: 14
+        node-version: 16
-    - run: npm install
+    - run: npm ci
     - run: npm run build
     - run: npm run cy:test
 
@@ -100,10 +98,10 @@ jobs:
     - run: git config --global core.autocrlf false  # Mainly for Windows
     - uses: actions/checkout@v4
 
-    - name: Use Node.js 14
+    - name: Use Node.js 16
       uses: actions/setup-node@v4
       with:
-        node-version: 14
+        node-version: 16
-    - run: npm install
+    - run: npm ci
     - run: npm run build
     - run: npm run cy:run:unit

db/patch-monitor-tls-info-add-fk.sql

@@ -0,0 +1,18 @@
+BEGIN TRANSACTION;
+
+PRAGMA writable_schema = TRUE;
+
+UPDATE
+	SQLITE_MASTER
+SET
+	sql = replace(sql,
+	'monitor_id INTEGER NOT NULL',
+	'monitor_id INTEGER NOT NULL REFERENCES [monitor] ([id]) ON DELETE CASCADE ON UPDATE CASCADE'
+)
+WHERE
+	name = 'monitor_tls_info'
+	AND type = 'table';
+
+PRAGMA writable_schema = RESET;
+
+COMMIT;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.23.11",
+    "version": "1.23.16",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -24,7 +24,7 @@
         "start-frontend-devcontainer": "cross-env NODE_ENV=development DEVCONTAINER=1 vite --host --config ./config/vite.config.js",
         "start": "npm run start-server",
         "start-server": "node server/server.js",
-        "start-server-dev": "cross-env NODE_ENV=development node server/server.js",
+        "start-server-dev": "cross-env NODE_ENV=development node server/server.js --data-dir=./data/v1/",
         "build": "vite build --config ./config/vite.config.js",
         "test": "node test/prepare-test-server.js && npm run jest-backend",
         "test-with-build": "npm run build && npm test",
@@ -42,7 +42,7 @@
         "build-docker-nightly-amd64": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push --progress plain",
         "build-docker-pr-test": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64 -t louislam/uptime-kuma:pr-test --target pr-test . --push",
         "upload-artifacts": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:upload-artifact --build-arg VERSION --build-arg GITHUB_TOKEN --target upload-artifact . --progress plain",
-        "setup": "git checkout 1.23.11 && npm ci --production && npm run download-dist",
+        "setup": "git checkout 1.23.16 && npm ci --production && npm run download-dist",
         "download-dist": "node extra/download-dist.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
@@ -78,18 +78,18 @@
         "start-server-node14-win": "private\\node14\\node.exe server/server.js"
     },
     "dependencies": {
-        "@grpc/grpc-js": "~1.7.3",
+        "@grpc/grpc-js": "~1.8.22",
         "@louislam/ping": "~0.4.4-mod.1",
         "@louislam/sqlite3": "15.1.6",
         "args-parser": "~1.3.0",
-        "axios": "~0.27.0",
+        "axios": "~0.28.1",
         "axios-ntlm": "1.3.0",
         "badge-maker": "~3.3.1",
         "bcryptjs": "~2.4.3",
         "cacheable-lookup": "~6.0.4",
         "chardet": "~1.4.0",
         "check-password-strength": "^2.0.5",
-        "cheerio": "~1.0.0-rc.12",
+        "cheerio": "1.0.0-rc.12",
         "chroma-js": "~2.4.2",
         "command-exists": "~1.2.9",
         "compare-versions": "~3.6.0",
@@ -97,7 +97,7 @@
         "croner": "~6.0.5",
         "dayjs": "~1.11.5",
         "dotenv": "~16.0.3",
-        "express": "~4.17.3",
+        "express": "~4.21.0",
         "express-basic-auth": "~1.2.1",
         "express-static-gzip": "~2.1.7",
         "form-data": "~4.0.0",
@@ -118,11 +118,11 @@
         "mongodb": "~4.17.1",
         "mqtt": "~4.3.7",
         "mssql": "~8.1.4",
-        "mysql2": "~3.6.2",
+        "mysql2": "~3.9.6",
         "nanoid": "~3.3.4",
         "node-cloudflared-tunnel": "~1.0.9",
         "node-radius-client": "~1.0.0",
-        "nodemailer": "~6.6.5",
+        "nodemailer": "~6.9.13",
         "nostr-tools": "^1.13.1",
         "notp": "~2.0.3",
         "openid-client": "^5.4.2",
@@ -138,16 +138,16 @@
         "redbean-node": "~0.3.0",
         "redis": "~4.5.1",
         "semver": "~7.5.4",
-        "socket.io": "~4.6.1",
+        "socket.io": "~4.8.0",
-        "socket.io-client": "~4.6.1",
+        "socket.io-client": "~4.8.0",
         "socks-proxy-agent": "6.1.1",
-        "tar": "~6.1.11",
+        "tar": "~6.2.1",
         "tcp-ping": "~0.1.1",
         "thirty-two": "~1.0.2",
         "ws": "^8.13.0"
     },
     "devDependencies": {
-        "@actions/github": "~5.0.1",
+        "@actions/github": "~5.1.1",
         "@babel/eslint-parser": "^7.22.7",
         "@babel/preset-env": "^7.15.8",
         "@fortawesome/fontawesome-svg-core": "~1.2.36",
@@ -171,7 +171,7 @@
         "cypress": "^13.2.0",
         "delay": "^5.0.0",
         "dns2": "~2.0.1",
-        "dompurify": "~2.4.3",
+        "dompurify": "~3.1.7",
         "eslint": "~8.14.0",
         "eslint-plugin-vue": "~8.7.1",
         "favico.js": "~0.3.10",
@@ -191,7 +191,7 @@
         "timezones-list": "~3.0.1",
         "typescript": "~4.4.4",
         "v-pagination-3": "~0.1.7",
-        "vite": "~4.4.1",
+        "vite": "~5.2.8",
         "vite-plugin-compression": "^0.5.1",
         "vue": "~3.3.4",
         "vue-chartjs": "~5.2.0",

server/database.js

@@ -84,6 +84,7 @@ class Database {
         "patch-notification-config.sql": true,
         "patch-fix-kafka-producer-booleans.sql": true,
         "patch-timeout.sql": true,
+        "patch-monitor-tls-info-add-fk.sql": true,
     };
 
     /**

server/model/monitor.js

@@ -230,10 +230,12 @@ class Monitor extends BeanModel {
     /**
      * Encode user and password to Base64 encoding
      * for HTTP "basic" auth, as per RFC-7617
+     * @param {string|null} user - The username (nullable if not changed by a user)
+     * @param {string|null} pass - The password (nullable if not changed by a user)
      * @returns {string}
      */
     encodeBase64(user, pass) {
-        return Buffer.from(user + ":" + pass).toString("base64");
+        return Buffer.from(`${user || ""}:${pass || ""}`).toString("base64");
     }
 
     /**
@@ -510,6 +512,18 @@ class Monitor extends BeanModel {
                         }
                     }
 
+                    let tlsInfo = {};
+                    // Store tlsInfo when secureConnect event is emitted
+                    // The keylog event listener is a workaround to access the tlsSocket
+                    options.httpsAgent.once("keylog", async (line, tlsSocket) => {
+                        tlsSocket.once("secureConnect", async () => {
+                            tlsInfo = checkCertificate(tlsSocket);
+                            tlsInfo.valid = tlsSocket.authorized || false;
+
+                            await this.handleTlsInfo(tlsInfo);
+                        });
+                    });
+
                     log.debug("monitor", `[${this.name}] Axios Options: ${JSON.stringify(options)}`);
                     log.debug("monitor", `[${this.name}] Axios Request`);
 
@@ -519,31 +533,19 @@ class Monitor extends BeanModel {
                     bean.msg = `${res.status} - ${res.statusText}`;
                     bean.ping = dayjs().valueOf() - startTime;
 
-                    // Check certificate if https is used
+                    // fallback for if kelog event is not emitted, but we may still have tlsInfo,
-                    let certInfoStartTime = dayjs().valueOf();
+                    // e.g. if the connection is made through a proxy
-                    if (this.getUrl()?.protocol === "https:") {
+                    if (this.getUrl()?.protocol === "https:" && tlsInfo.valid === undefined) {
-                        log.debug("monitor", `[${this.name}] Check cert`);
+                        const tlsSocket = res.request.res.socket;
-                        try {
-                            let tlsInfoObject = checkCertificate(res);
-                            tlsInfo = await this.updateTlsInfo(tlsInfoObject);
 
-                            if (!this.getIgnoreTls() && this.isEnabledExpiryNotification()) {
+                        if (tlsSocket) {
-                                log.debug("monitor", `[${this.name}] call checkCertExpiryNotifications`);
+                            tlsInfo = checkCertificate(tlsSocket);
-                                await this.checkCertExpiryNotifications(tlsInfoObject);
+                            tlsInfo.valid = tlsSocket.authorized || false;
-                            }
 
-                        } catch (e) {
+                            await this.handleTlsInfo(tlsInfo);
-                            if (e.message !== "No TLS certificate in response") {
-                                log.error("monitor", "Caught error");
-                                log.error("monitor", e.message);
-                            }
                         }
                     }
 
-                    if (process.env.TIMELOGGER === "1") {
-                        log.debug("monitor", "Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms");
-                    }
-
                     if (process.env.UPTIME_KUMA_LOG_RESPONSE_BODY_MONITOR_ID === this.id) {
                         log.info("monitor", res.data);
                     }
@@ -576,8 +578,12 @@ class Monitor extends BeanModel {
                         let data = res.data;
 
                         // convert data to object
-                        if (typeof data === "string") {
+                        if (typeof data === "string" && res.headers["content-type"] !== "application/json") {
-                            data = JSON.parse(data);
+                            try {
+                                data = JSON.parse(data);
+                            } catch (_) {
+                                // Failed to parse as JSON, just process it as a string
+                            }
                         }
 
                         let expression = jsonata(this.jsonPath);
@@ -1676,6 +1682,21 @@ class Monitor extends BeanModel {
         const parentActive = await Monitor.isParentActive(parent.id);
         return parent.active && parentActive;
     }
+
+    /**
+     * Store TLS certificate information and check for expiry
+     * @param {Object} tlsInfo Information about the TLS connection
+     * @returns {Promise<void>}
+     */
+    async handleTlsInfo(tlsInfo) {
+        await this.updateTlsInfo(tlsInfo);
+        this.prometheus?.update(null, tlsInfo);
+
+        if (!this.getIgnoreTls() && this.isEnabledExpiryNotification()) {
+            log.debug("monitor", `[${this.name}] call checkCertExpiryNotifications`);
+            await this.checkCertExpiryNotifications(tlsInfo);
+        }
+    }
 }
 
 module.exports = Monitor;

server/monitor-types/real-browser-monitor-type.js

@@ -9,6 +9,10 @@ const Database = require("../database");
 const jwt = require("jsonwebtoken");
 const config = require("../config");
 
+/**
+ * Cached instance of a browser
+ * @type {import ("playwright-core").Browser}
+ */
 let browser = null;
 
 let allowedList = [];
@@ -62,8 +66,15 @@ async function isAllowedChromeExecutable(executablePath) {
     return allowedList.includes(executablePath);
 }
 
+/**
+ * Get the current instance of the browser. If there isn't one, create
+ * it.
+ * @returns {Promise<import ("playwright-core").Browser>} The browser
+ */
 async function getBrowser() {
-    if (!browser) {
+    if (browser && browser.isConnected()) {
+        return browser;
+    } else {
         let executablePath = await Settings.get("chromeExecutable");
 
         executablePath = await prepareChromeExecutable(executablePath);
@@ -72,8 +83,9 @@ async function getBrowser() {
             //headless: false,
             executablePath,
         });
+
+        return browser;
     }
-    return browser;
 }
 
 async function prepareChromeExecutable(executablePath) {
@@ -181,6 +193,14 @@ class RealBrowserMonitorType extends MonitorType {
         const context = await browser.newContext();
         const page = await context.newPage();
 
+        // Prevent Local File Inclusion
+        // Accept only http:// and https://
+        // https://github.com/louislam/uptime-kuma/security/advisories/GHSA-2qgm-m29m-cj2h
+        let url = new URL(monitor.url);
+        if (url.protocol !== "http:" && url.protocol !== "https:") {
+            throw new Error("Invalid url protocol, only http and https are allowed.");
+        }
+
         const res = await page.goto(monitor.url, {
             waitUntil: "networkidle",
             timeout: monitor.interval * 1000 * 0.8,

server/notification-providers/dingding.js

@@ -18,7 +18,7 @@ class DingDing extends NotificationProvider {
                         text: `## [${this.statusToString(heartbeatJSON["status"])}] ${monitorJSON["name"]} \n> ${heartbeatJSON["msg"]}\n> Time (${heartbeatJSON["timezone"]}): ${heartbeatJSON["localDateTime"]}`,
                     }
                 };
-                if (this.sendToDingDing(notification, params)) {
+                if (await this.sendToDingDing(notification, params)) {
                     return okMsg;
                 }
             } else {
@@ -28,7 +28,7 @@ class DingDing extends NotificationProvider {
                         content: msg
                     }
                 };
-                if (this.sendToDingDing(notification, params)) {
+                if (await this.sendToDingDing(notification, params)) {
                     return okMsg;
                 }
             }
@@ -59,7 +59,7 @@ class DingDing extends NotificationProvider {
         if (result.data.errmsg === "ok") {
             return true;
         }
-        return false;
+        throw new Error(result.data.errmsg);
     }
 
     /**

server/prometheus.js

@@ -79,23 +79,25 @@ class Prometheus {
             }
         }
 
-        try {
+        if (heartbeat) {
-            monitorStatus.set(this.monitorLabelValues, heartbeat.status);
+            try {
-        } catch (e) {
+                monitorStatus.set(this.monitorLabelValues, heartbeat.status);
-            log.error("prometheus", "Caught error");
+            } catch (e) {
-            log.error("prometheus", e);
+                log.error("prometheus", "Caught error");
-        }
+                log.error("prometheus", e);
-
+            }
-        try {
+
-            if (typeof heartbeat.ping === "number") {
+            try {
-                monitorResponseTime.set(this.monitorLabelValues, heartbeat.ping);
+                if (typeof heartbeat.ping === "number") {
-            } else {
+                    monitorResponseTime.set(this.monitorLabelValues, heartbeat.ping);
-                // Is it good?
+                } else {
-                monitorResponseTime.set(this.monitorLabelValues, -1);
+                    // Is it good?
+                    monitorResponseTime.set(this.monitorLabelValues, -1);
+                }
+            } catch (e) {
+                log.error("prometheus", "Caught error");
+                log.error("prometheus", e);
             }
-        } catch (e) {
-            log.error("prometheus", "Caught error");
-            log.error("prometheus", e);
         }
     }
 

server/server.js

@@ -1205,6 +1205,12 @@ let needSetup = false;
                     await doubleCheckPassword(socket, currentPassword);
                 }
 
+                // Log out all clients if enabling auth
+                // GHSA-23q2-5gf8-gjpp
+                if (currentDisabledAuth && !data.disableAuth) {
+                    server.disconnectAllSocketClients(socket.userID, socket.id);
+                }
+
                 const previousChromeExecutable = await Settings.get("chromeExecutable");
                 const previousNSCDStatus = await Settings.get("nscd");
 

server/socket-handlers/status-page-socket-handler.js

@@ -147,7 +147,7 @@ module.exports.statusPageSocketHandler = (socket) => {
                 config.logo = `/upload/${filename}?t=` + Date.now();
 
             } else {
-                config.icon = imgDataUrl;
+                config.logo = imgDataUrl;
             }
 
             statusPage.slug = config.slug;

server/util-server.js

@@ -716,20 +716,27 @@ const parseCertificateInfo = function (info) {
 
 /**
  * Check if certificate is valid
- * @param {Object} res Response object from axios
+ * @param {tls.TLSSocket} socket TLSSocket, which may or may not be connected
  * @returns {Object} Object containing certificate information
  */
-exports.checkCertificate = function (res) {
+exports.checkCertificate = function (socket) {
-    if (!res.request.res.socket) {
+    let certInfoStartTime = dayjs().valueOf();
-        throw new Error("No socket found");
+
+    // Return null if there is no socket
+    if (socket === undefined || socket == null) {
+        return null;
     }
 
-    const info = res.request.res.socket.getPeerCertificate(true);
+    const info = socket.getPeerCertificate(true);
-    const valid = res.request.res.socket.authorized || false;
+    const valid = socket.authorized || false;
 
     log.debug("cert", "Parsing Certificate Info");
     const parsedInfo = parseCertificateInfo(info);
 
+    if (process.env.TIMELOGGER === "1") {
+        log.debug("monitor", "Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms");
+    }
+
     return {
         valid: valid,
         certInfo: parsedInfo

src/components/notifications/SMTP.vue

@@ -5,6 +5,14 @@
             <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
         </div>
 
+        <i18n-t tag="div" keypath="Either enter the hostname of the server you want to connect to or localhost if you intend to use a locally configured mail transfer agent" class="form-text">
+            <template #localhost>
+                <code>localhost</code>
+            </template>
+            <template #local_mta>
+                <a href="https://wikipedia.org/wiki/Mail_Transfer_Agent" target="_blank">{{ $t("locally configured mail transfer agent") }}</a>
+            </template>
+        </i18n-t>
         <div class="mb-3">
             <label for="port" class="form-label">{{ $t("Port") }}</label>
             <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">

src/components/settings/APIKeys.vue

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

@@ -57,10 +57,29 @@ for (let lang in languageList) {
 
 const rtlLangs = [ "fa", "ar-SY", "ur" ];
 
-export const currentLocale = () => localStorage.locale
+/**
-    || languageList[navigator.language] && navigator.language
+ * Find the best matching locale to display
-    || languageList[navigator.language.substring(0, 2)] && navigator.language.substring(0, 2)
+ * If no locale can be matched, the default is "en"
-    || "en";
+ * @returns {string} the locale that should be displayed
+ */
+export function currentLocale() {
+    for (const locale of [ localStorage.locale, navigator.language, ...navigator.languages ]) {
+        // localstorage might not have a value or there might not be a language in `navigator.language`
+        if (!locale) {
+            continue;
+        }
+        if (locale in messages) {
+            return locale;
+        }
+        // some locales are further specified such as "en-US".
+        // If we only have a generic locale for this, we can use it too
+        const genericLocale = locale.split("-")[0];
+        if (genericLocale in messages) {
+            return genericLocale;
+        }
+    }
+    return "en";
+}
 
 export const localeDirection = () => {
     return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr";

src/lang/en.json

@@ -57,6 +57,8 @@
     "Friendly Name": "Friendly Name",
     "URL": "URL",
     "Hostname": "Hostname",
+    "locally configured mail transfer agent": "locally configured mail transfer agent",
+    "Either enter the hostname of the server you want to connect to or localhost if you intend to use a locally configured mail transfer agent": "Either enter the hostname of the server you want to connect to or {localhost} if you intend to use a {local_mta}",
     "Port": "Port",
     "Heartbeat Interval": "Heartbeat Interval",
     "Request Timeout": "Request Timeout",
@@ -818,5 +820,6 @@
     "showCertificateExpiry": "Show Certificate Expiry",
     "noOrBadCertificate": "No/Bad Certificate",
     "gamedigGuessPort": "Gamedig: Guess Port",
-    "gamedigGuessPortDescription": "The port used by Valve Server Query Protocol may be different from the client port. Try this if the monitor cannot connect to your server."
+    "gamedigGuessPortDescription": "The port used by Valve Server Query Protocol may be different from the client port. Try this if the monitor cannot connect to your server.",
+    "apiKeysDisabledMsg": "API keys are disabled because authentication is disabled."
 }

src/util.js

@@ -6,9 +6,12 @@
 //
 // 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 };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 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 = exports.sleep = exports.flipStatus = exports.badgeConstants = 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.isDev = void 0;
-const dayjs = require("dayjs");
+const dayjs_1 = __importDefault(require("dayjs"));
 exports.isDev = process.env.NODE_ENV === "development";
 exports.appName = "Uptime Kuma";
 exports.DOWN = 0;
@@ -129,11 +132,11 @@ class Logger {
         module = module.toUpperCase();
         level = level.toUpperCase();
         let now;
-        if (dayjs.tz) {
+        if (dayjs_1.default.tz) {
-            now = dayjs.tz(new Date()).format();
+            now = dayjs_1.default.tz(new Date()).format();
         }
         else {
-            now = dayjs().format();
+            now = (0, dayjs_1.default)().format();
         }
         const formattedMessage = (typeof msg === "string") ? `${now} [${module}] ${level}: ${msg}` : msg;
         if (level === "INFO") {
@@ -222,7 +225,7 @@ function polyfill() {
 exports.polyfill = polyfill;
 class TimeLogger {
     constructor() {
-        this.startTime = dayjs().valueOf();
+        this.startTime = (0, dayjs_1.default)().valueOf();
     }
     /**
      * Output time since start of monitor
@@ -230,7 +233,7 @@ class TimeLogger {
      */
     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");
         }
     }
 }
@@ -394,21 +397,21 @@ exports.parseTimeFromTimeObject = parseTimeFromTimeObject;
  * @returns ISO Date time
  */
 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;
 /**
  * @param input
  */
 function utcToISODateTime(input) {
-    return dayjs.utc(input).toISOString();
+    return dayjs_1.default.utc(input).toISOString();
 }
 exports.utcToISODateTime = utcToISODateTime;
 /**
  * For SQL_DATETIME_FORMAT
  */
 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;
 /**
@@ -418,6 +421,6 @@ exports.utcToLocal = utcToLocal;
  * @returns Date in requested format
  */
 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;

src/util.ts

@@ -6,7 +6,7 @@
 // Backend uses the compiled file util.js
 // Frontend uses util.ts
 
-import * as dayjs  from "dayjs";
+import dayjs from "dayjs";
 import * as timezone from "dayjs/plugin/timezone";
 import * as utc from "dayjs/plugin/utc";
 

test/cypress/unit/i18n.spec.js

@@ -3,42 +3,62 @@ import { currentLocale } from "../../../src/i18n";
 describe("Test i18n.js", () => {
 
     it("currentLocale()", () => {
-        const setLanguage = (language) => {
+        const setLanguages = (languages) => {
-            Object.defineProperty(window.navigator, 'language', { 
+            Object.defineProperty(navigator, 'language', {
-                value: language, 
+                value: languages[0],
-                writable: true 
+                writable: true
+            });
+            Object.defineProperty(navigator, 'languages', {
+                value: languages,
+                writable: true
             });
         }
-        setLanguage('en-EN');
 
+        setLanguages(['en-EN']);
         expect(currentLocale()).equal("en");
 
-        setLanguage('zh-HK');
+        setLanguages(['zh-HK']);
         expect(currentLocale()).equal("zh-HK");
 
         // Note that in Safari on iOS prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr" etc.
         // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language
-        setLanguage('zh-hk');
+        setLanguages(['zh-hk']);
         expect(currentLocale()).equal("en");
 
-        setLanguage('en-US');
+        setLanguages(['en-US']);
         expect(currentLocale()).equal("en");
 
-        setLanguage('ja-ZZ');
+        setLanguages(['ja-ZZ']);
         expect(currentLocale()).equal("ja");
 
-        setLanguage('zz-ZZ');
+        setLanguages(['zz-ZZ']);
         expect(currentLocale()).equal("en");
 
-        setLanguage('zz-ZZ');
+        setLanguages(['zz-ZZ']);
         expect(currentLocale()).equal("en");
 
-        setLanguage('en');
+        setLanguages(['en-US', 'en', 'pl', 'ja']);
-        localStorage.locale = "en";
         expect(currentLocale()).equal("en");
 
-        localStorage.locale = "zh-HK";
+        setLanguages(['en-US', 'pl', 'ja']);
-        expect(currentLocale()).equal("zh-HK");
+        expect(currentLocale()).equal("en");
+
+        setLanguages(['abc', 'en-US', 'pl', 'ja']);
+        expect(currentLocale()).equal("en");
+
+        setLanguages(['fil-PH', 'pl']);
+        expect(currentLocale()).equal("pl");
+
+        setLanguages(['shi-Latn-MA', 'pl']);
+        expect(currentLocale()).equal("pl");
+
+        setLanguages(['pl']);
+        localStorage.locale = "ja-ZZ";
+        expect(currentLocale()).equal("ja");
+
+        setLanguages(['pl']);
+        localStorage.locale = "invalid-lang";
+        expect(currentLocale()).equal("pl");
     });
 
-});
+});

tsconfig.json

@@ -11,7 +11,8 @@
         "removeComments": false,
         "preserveConstEnums": true,
         "sourceMap": false,
-        "strict": true
+        "strict": true,
+        "esModuleInterop": true
     },
     "files": [
         "./src/util.ts"