Merge branch 'master' into import-export

README.md

@@ -27,6 +27,7 @@ VPS is sponsored by Uptime Kuma sponsors on [Open Collective](https://opencollec
 * Fancy, Reactive, Fast UI/UX.
 * Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and [70+ notification services, click here for the full list](https://github.com/louislam/uptime-kuma/issues/284). 
 * 20 seconds interval.
+* [Multi Languages](https://github.com/louislam/uptime-kuma/tree/master/src/languages)
 
 ## 🔧 How to Install
 

dockerfile

@@ -1,25 +1,30 @@
-# DON'T UPDATE TO alpine3.13, 1.14, see #41.
+FROM node:14-bullseye-slim AS release
-FROM node:14-alpine3.12 AS release
 WORKDIR /app
 
+# install dependencies
+RUN apt update && apt --yes install python3 python3-pip python3-dev git g++ make iputils-ping
+RUN ln -s /usr/bin/python3 /usr/bin/python
+
 # split the sqlite install here, so that it can caches the arm prebuilt
-RUN apk add --no-cache --virtual .build-deps make g++ python3 python3-dev git && \
+RUN npm install mapbox/node-sqlite3#593c9d
-            ln -s /usr/bin/python3 /usr/bin/python && \
-            npm install mapbox/node-sqlite3#593c9d && \
-            apk del .build-deps && \
-            rm -f /usr/bin/python
 
 # Install apprise
-RUN apk add --no-cache python3 py3-cryptography py3-pip py3-six py3-yaml py3-click py3-markdown py3-requests py3-requests-oauthlib
+RUN apt --yes install python3-cryptography python3-six python3-yaml python3-click python3-markdown python3-requests python3-requests-oauthlib
 RUN pip3 --no-cache-dir install apprise && \
-            rm -rf /root/.cache
+    rm -rf /root/.cache
+
+# additional package should be added here, since we don't want to re-compile the arm prebuilt again
+
+# add sqlite3 cli for debugging in the future
+RUN apt --yes install sqlite3
+
 
 COPY . .
 RUN npm install --legacy-peer-deps && npm run build && npm prune
 
 EXPOSE 3001
 VOLUME ["/app/data"]
-HEALTHCHECK --interval=60s --timeout=30s --start-period=300s CMD node extra/healthcheck.js
+HEALTHCHECK --interval=600s --timeout=130s --start-period=300s CMD node extra/healthcheck.js
 CMD ["node", "server/server.js"]
 
 FROM release AS nightly

dockerfile-alpine

@@ -0,0 +1,26 @@
+# DON'T UPDATE TO alpine3.13, 1.14, see #41.
+FROM node:14-alpine3.12 AS release
+WORKDIR /app
+
+# split the sqlite install here, so that it can caches the arm prebuilt
+RUN apk add --no-cache --virtual .build-deps make g++ python3 python3-dev git && \
+            ln -s /usr/bin/python3 /usr/bin/python && \
+            npm install mapbox/node-sqlite3#593c9d && \
+            apk del .build-deps && \
+            rm -f /usr/bin/python
+
+# Install apprise
+RUN apk add --no-cache python3 py3-cryptography py3-pip py3-six py3-yaml py3-click py3-markdown py3-requests py3-requests-oauthlib
+RUN pip3 --no-cache-dir install apprise && \
+            rm -rf /root/.cache
+
+COPY . .
+RUN npm install --legacy-peer-deps && npm run build && npm prune
+
+EXPOSE 3001
+VOLUME ["/app/data"]
+HEALTHCHECK --interval=600s --timeout=130s --start-period=300s CMD node extra/healthcheck.js
+CMD ["node", "server/server.js"]
+
+FROM release AS nightly
+RUN npm run mark-as-nightly

extra/healthcheck.js

@@ -1,19 +1,31 @@
-let http = require("http");
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+
+let client;
+
+if (process.env.SSL_KEY && process.env.SSL_CERT) {
+    client = require("https");
+} else {
+    client = require("http");
+}
+
 let options = {
-    host: "localhost",
+    host: process.env.HOST || "127.0.0.1",
-    port: "3001",
+    port: parseInt(process.env.PORT) || 3001,
-    timeout: 2000,
+    timeout: 120 * 1000,
 };
-let request = http.request(options, (res) => {
+
-    console.log(`STATUS: ${res.statusCode}`);
+let request = client.request(options, (res) => {
-    if (res.statusCode == 200) {
+    console.log(`Health Check OK [Res Code: ${res.statusCode}]`);
+    if (res.statusCode === 200) {
         process.exit(0);
     } else {
         process.exit(1);
     }
 });
+
 request.on("error", function (err) {
-    console.log("ERROR");
+    console.error("Health Check ERROR");
     process.exit(1);
 });
+
 request.end();

extra/update-version.js

@@ -23,6 +23,8 @@ if (! exists) {
     pkg.version = newVersion;
     pkg.scripts.setup = pkg.scripts.setup.replaceAll(oldVersion, newVersion);
     pkg.scripts["build-docker"] = pkg.scripts["build-docker"].replaceAll(oldVersion, newVersion);
+    pkg.scripts["build-docker-alpine"] = pkg.scripts["build-docker-alpine"].replaceAll(oldVersion, newVersion);
+    pkg.scripts["build-docker-debian"] = pkg.scripts["build-docker-debian"].replaceAll(oldVersion, newVersion);
     fs.writeFileSync("package.json", JSON.stringify(pkg, null, 4) + "\n");
 
     commit(newVersion);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.5.2",
+    "version": "1.5.3",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -18,11 +18,12 @@
         "start-server": "node server/server.js",
         "build": "vite build",
         "vite-preview-dist": "vite preview --host",
-        "build-docker": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.5.2 --target release . --push",
+        "build-docker": "npm run build-docker-alpine && npm run build-docker-debian",
+        "build-docker-alpine": "docker buildx build -f dockerfile-alpine --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:alpine -t louislam/uptime-kuma:1-alpine -t louislam/uptime-kuma:1.5.3-alpine --target release . --push",
+        "build-docker-debian": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.5.3 -t louislam/uptime-kuma:debian -t louislam/uptime-kuma:1-debian -t louislam/uptime-kuma:1.5.3-debian --target release . --push",
         "build-docker-nightly": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly --target nightly . --push",
         "build-docker-nightly-amd64": "docker buildx build --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push --progress plain",
-        "build-docker-1.5.0-debian": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:1.5.0-debian --target release . --push",
+        "setup": "git checkout 1.5.3 && npm install --legacy-peer-deps && node node_modules/esbuild/install.js && npm run build && npm prune",
-        "setup": "git checkout 1.5.2 && npm install --legacy-peer-deps && node node_modules/esbuild/install.js && npm run build && npm prune",
         "update-version": "node extra/update-version.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
@@ -64,7 +65,7 @@
         "sqlite3": "github:mapbox/node-sqlite3#593c9d",
         "tcp-ping": "^0.1.1",
         "v-pagination-3": "^0.1.6",
-        "vue": "^3.2.6",
+        "vue": "^3.2.8",
         "vue-chart-3": "^0.5.7",
         "vue-confirm-dialog": "^1.0.2",
         "vue-i18n": "^9.1.7",

server/client.js

@@ -0,0 +1,91 @@
+/*
+ * For Client Socket
+ */
+const { TimeLogger } = require("../src/util");
+const { R } = require("redbean-node");
+const { io } = require("./server");
+
+async function sendNotificationList(socket) {
+    const timeLogger = new TimeLogger();
+
+    let result = [];
+    let list = await R.find("notification", " user_id = ? ", [
+        socket.userID,
+    ]);
+
+    for (let bean of list) {
+        result.push(bean.export())
+    }
+
+    io.to(socket.userID).emit("notificationList", result)
+
+    timeLogger.print("Send Notification List");
+
+    return list;
+}
+
+/**
+ * Send Heartbeat History list to socket
+ * @param toUser  True = send to all browsers with the same user id, False = send to the current browser only
+ * @param overwrite Overwrite client-side's heartbeat list
+ */
+async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
+    const timeLogger = new TimeLogger();
+
+    let list = await R.find("heartbeat", `
+        monitor_id = ?
+        ORDER BY time DESC
+        LIMIT 100
+    `, [
+        monitorID,
+    ])
+
+    let result = [];
+
+    for (let bean of list) {
+        result.unshift(bean.toJSON());
+    }
+
+    if (toUser) {
+        io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
+    } else {
+        socket.emit("heartbeatList", monitorID, result, overwrite);
+    }
+
+    timeLogger.print(`[Monitor: ${monitorID}] sendHeartbeatList`);
+}
+
+/**
+ *  Important Heart beat list (aka event list)
+ * @param socket
+ * @param monitorID
+ * @param toUser  True = send to all browsers with the same user id, False = send to the current browser only
+ * @param overwrite Overwrite client-side's heartbeat list
+ */
+async function sendImportantHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
+    const timeLogger = new TimeLogger();
+
+    let list = await R.find("heartbeat", `
+        monitor_id = ?
+        AND important = 1
+        ORDER BY time DESC
+        LIMIT 500
+    `, [
+        monitorID,
+    ])
+
+    timeLogger.print(`[Monitor: ${monitorID}] sendImportantHeartbeatList`);
+
+    if (toUser) {
+        io.to(socket.userID).emit("importantHeartbeatList", monitorID, list, overwrite);
+    } else {
+        socket.emit("importantHeartbeatList", monitorID, list, overwrite);
+    }
+
+}
+
+module.exports = {
+    sendNotificationList,
+    sendImportantHeartbeatList,
+    sendHeartbeatList,
+}

server/notification.js

@@ -4,6 +4,8 @@ const FormData = require("form-data");
 const nodemailer = require("nodemailer");
 const child_process = require("child_process");
 
+const { UP, DOWN } = require("../src/util");
+
 class Notification {
 
     /**
@@ -80,7 +82,7 @@ class Notification {
             }
 
         } else if (notification.type === "smtp") {
-            return await Notification.smtp(notification, msg)
+            return await Notification.smtp(notification, msg, heartbeatJSON)
 
         } else if (notification.type === "discord") {
             try {
@@ -109,7 +111,7 @@ class Notification {
                 }
 
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
-                if (heartbeatJSON["status"] == 0) {
+                if (heartbeatJSON["status"] == DOWN) {
                     let discorddowndata = {
                         username: discordDisplayName,
                         embeds: [{
@@ -139,7 +141,7 @@ class Notification {
                     await axios.post(notification.discordWebhookUrl, discorddowndata)
                     return okMsg;
 
-                } else if (heartbeatJSON["status"] == 1) {
+                } else if (heartbeatJSON["status"] == UP) {
                     let discordupdata = {
                         username: discordDisplayName,
                         embeds: [{
@@ -343,7 +345,7 @@ class Notification {
                 const mattermostIconEmoji = notification.mattermosticonemo;
                 const mattermostIconUrl = notification.mattermosticonurl;
 
-                if (heartbeatJSON["status"] == 0) {
+                if (heartbeatJSON["status"] == DOWN) {
                     let mattermostdowndata = {
                         username: mattermostUserName,
                         text: "Uptime Kuma Alert",
@@ -387,7 +389,7 @@ class Notification {
                         mattermostdowndata
                     );
                     return okMsg;
-                } else if (heartbeatJSON["status"] == 1) {
+                } else if (heartbeatJSON["status"] == UP) {
                     let mattermostupdata = {
                         username: mattermostUserName,
                         text: "Uptime Kuma Alert",
@@ -489,19 +491,19 @@ class Notification {
                     return okMsg;
                 }
 
-                if (heartbeatJSON["status"] == 0) {
+                if (heartbeatJSON["status"] == DOWN) {
                     let downdata = {
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
-                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "body": "[🔴 Down] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
                     }
                     await axios.post(lunaseadevice, downdata)
                     return okMsg;
                 }
 
-                if (heartbeatJSON["status"] == 1) {
+                if (heartbeatJSON["status"] == UP) {
                     let updata = {
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
-                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "body": "[✅ Up] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
                     }
                     await axios.post(lunaseadevice, updata)
                     return okMsg;
@@ -527,18 +529,18 @@ class Notification {
                         "body": "Testing Successful.",
                     }
                     await axios.post(pushbulletUrl, testdata, config)
-                } else if (heartbeatJSON["status"] == 0) {
+                } else if (heartbeatJSON["status"] == DOWN) {
                     let downdata = {
                         "type": "note",
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
-                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "body": "[🔴 Down] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
                     }
                     await axios.post(pushbulletUrl, downdata, config)
-                } else if (heartbeatJSON["status"] == 1) {
+                } else if (heartbeatJSON["status"] == UP) {
                     let updata = {
                         "type": "note",
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
-                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "body": "[✅ Up] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
                     }
                     await axios.post(pushbulletUrl, updata, config)
                 }
@@ -566,7 +568,7 @@ class Notification {
                         ]
                     }
                     await axios.post(lineAPIUrl, testMessage, config)
-                } else if (heartbeatJSON["status"] == 0) {
+                } else if (heartbeatJSON["status"] == DOWN) {
                     let downMessage = {
                         "to": notification.lineUserID,
                         "messages": [
@@ -577,7 +579,7 @@ class Notification {
                         ]
                     }
                     await axios.post(lineAPIUrl, downMessage, config)
-                } else if (heartbeatJSON["status"] == 1) {
+                } else if (heartbeatJSON["status"] == UP) {
                     let upMessage = {
                         "to": notification.lineUserID,
                         "messages": [
@@ -634,7 +636,7 @@ class Notification {
         await R.trash(bean)
     }
 
-    static async smtp(notification, msg) {
+    static async smtp(notification, msg, heartbeatJSON = null) {
 
         const config = {
             host: notification.smtpHost,
@@ -652,12 +654,17 @@ class Notification {
 
         let transporter = nodemailer.createTransport(config);
 
+        let bodyTextContent = msg;
+        if(heartbeatJSON) {
+            bodyTextContent = `${msg}\nTime (UTC): ${heartbeatJSON["time"]}`;
+        }
+
         // send mail with defined transport object
         await transporter.sendMail({
             from: `"Uptime Kuma" <${notification.smtpFrom}>`,
             to: notification.smtpTo,
             subject: msg,
-            text: msg,
+            text: bodyTextContent,
         });
 
         return "Sent Successfully.";

server/server.js

@@ -82,7 +82,12 @@ if (sslKey && sslCert) {
 }
 
 const io = new Server(server);
-app.use(express.json())
+module.exports.io = io;
+
+// Must be after io instantiation
+const { sendNotificationList, sendHeartbeatList, sendImportantHeartbeatList } = require("./client");
+
+app.use(express.json());
 
 /**
  * Total WebSocket client connected to server currently, no actual use
@@ -657,6 +662,76 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
             }
         });
 
+        socket.on("clearEvents", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Clear Events Monitor: ${monitorID} User ID: ${socket.userID}`)
+
+                await R.exec("UPDATE heartbeat SET msg = ?, important = ? WHERE monitor_id = ? ", [
+                    "",
+                    "0",
+                    monitorID,
+                ]);
+
+                await sendImportantHeartbeatList(socket, monitorID, true, true);
+
+                callback({
+                    ok: true,
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
+        socket.on("clearHeartbeats", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Clear Heartbeats Monitor: ${monitorID} User ID: ${socket.userID}`)
+
+                await R.exec("DELETE FROM heartbeat WHERE monitor_id = ?", [
+                    monitorID
+                ]);
+
+                await sendHeartbeatList(socket, monitorID, true, true);
+
+                callback({
+                    ok: true,
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
+        socket.on("clearStatistics", async (callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Clear Statistics User ID: ${socket.userID}`)
+
+                await R.exec("DELETE FROM heartbeat");
+
+                callback({
+                    ok: true,
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
         debug("added all socket handlers")
 
         // ***************************
@@ -725,25 +800,6 @@ async function sendMonitorList(socket) {
     return list;
 }
 
-async function sendNotificationList(socket) {
-    const timeLogger = new TimeLogger();
-
-    let result = [];
-    let list = await R.find("notification", " user_id = ? ", [
-        socket.userID,
-    ]);
-
-    for (let bean of list) {
-        result.push(bean.export())
-    }
-
-    io.to(socket.userID).emit("notificationList", result)
-
-    timeLogger.print("Send Notification List");
-
-    return list;
-}
-
 async function afterLogin(socket, user) {
     socket.userID = user.id;
     socket.join(user.id)
@@ -878,48 +934,6 @@ async function startMonitors() {
     }
 }
 
-/**
- * Send Heartbeat History list to socket
- */
-async function sendHeartbeatList(socket, monitorID) {
-    const timeLogger = new TimeLogger();
-
-    let list = await R.find("heartbeat", `
-        monitor_id = ?
-        ORDER BY time DESC
-        LIMIT 100
-    `, [
-        monitorID,
-    ])
-
-    let result = [];
-
-    for (let bean of list) {
-        result.unshift(bean.toJSON())
-    }
-
-    socket.emit("heartbeatList", monitorID, result)
-
-    timeLogger.print(`[Monitor: ${monitorID}] sendHeartbeatList`)
-}
-
-async function sendImportantHeartbeatList(socket, monitorID) {
-    const timeLogger = new TimeLogger();
-
-    let list = await R.find("heartbeat", `
-        monitor_id = ?
-        AND important = 1
-        ORDER BY time DESC
-        LIMIT 500
-    `, [
-        monitorID,
-    ])
-
-    timeLogger.print(`[Monitor: ${monitorID}] sendImportantHeartbeatList`);
-
-    socket.emit("importantHeartbeatList", monitorID, list)
-}
-
 async function shutdownFunction(signal) {
     console.log("Shutdown requested");
     console.log("Called signal: " + signal);

src/assets/vars.scss

@@ -16,3 +16,5 @@ $dark-border-color: #1d2634;
 $easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
 $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+
+$dropdown-border-radius: 0.5rem;

src/components/HeartbeatBar.vue

@@ -31,7 +31,7 @@ export default {
             beatWidth: 10,
             beatHeight: 30,
             hoverScale: 1.5,
-            beatMargin: 3,      // Odd number only, even = blurry
+            beatMargin: 4,
             move: false,
             maxBeat: -1,
         }
@@ -122,11 +122,26 @@ export default {
             this.$root.heartbeatList[this.monitorId] = [];
         }
     },
+
     mounted() {
         if (this.size === "small") {
-            this.beatWidth = 5.6;
+            this.beatWidth = 5;
-            this.beatMargin = 2.4;
+            this.beatHeight = 16;
-            this.beatHeight = 16
+            this.beatMargin = 2;
+        }
+
+        // Suddenly, have an idea how to handle it universally.
+        // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
+        const actualWidth = this.beatWidth * window.devicePixelRatio;
+        const actualMargin = this.beatMargin * window.devicePixelRatio;
+
+        if (! Number.isInteger(actualWidth)) {
+            this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
+            console.log(this.beatWidth);
+        }
+
+        if (! Number.isInteger(actualMargin)) {
+            this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
         }
 
         window.addEventListener("resize", this.resize);

src/components/HiddenInput.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="input-group mb-3">
+        <!--
+        Hack - Disable Chrome save password
+        readonly + onfocus
+        https://stackoverflow.com/questions/41217019/how-to-prevent-a-browser-from-storing-passwords
+       -->
+        <input
+            v-model="model"
+            :type="visibility"
+            class="form-control"
+            :placeholder="placeholder"
+            :maxlength="maxlength"
+            :autocomplete="autocomplete"
+            :required="required"
+            :readonly="isReadOnly"
+            @focus="removeReadOnly"
+        >
+
+        <a v-if="visibility == 'password'" class="btn btn-outline-primary" @click="showInput()">
+            <font-awesome-icon icon="eye" />
+        </a>
+        <a v-if="visibility == 'text'" class="btn btn-outline-primary" @click="hideInput()">
+            <font-awesome-icon icon="eye-slash" />
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        placeholder: {
+            type: String,
+            default: ""
+        },
+        maxlength: {
+            type: Number,
+            default: 255
+        },
+        autocomplete: {
+            type: Boolean,
+        },
+        required: {
+            type: Boolean
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            visibility: "password",
+            readOnlyValue: false,
+        }
+    },
+    computed: {
+        model: {
+            get() {
+                return this.modelValue
+            },
+            set(value) {
+                this.$emit("update:modelValue", value)
+            }
+        },
+        isReadOnly() {
+            // Actually readonly from prop
+            if (this.readonly) {
+                return true;
+            }
+
+            // Hack - Disable Chrome save password
+            return this.readOnlyValue;
+        }
+    },
+    created() {
+        // Hack - Disable Chrome save password
+        if (this.autocomplete) {
+            this.readOnlyValue = "readonly";
+        }
+    },
+    methods: {
+        showInput() {
+            this.visibility = "text";
+        },
+        hideInput() {
+            this.visibility = "password";
+        },
+
+        // Hack - Disable Chrome save password
+        removeReadOnly() {
+            if (this.autocomplete) {
+                this.readOnlyValue = false;
+            }
+        }
+    }
+}
+</script>

src/components/NotificationDialog.vue

@@ -40,7 +40,7 @@
                         <template v-if="notification.type === 'telegram'">
                             <div class="mb-3">
                                 <label for="telegram-bot-token" class="form-label">Bot Token</label>
-                                <input id="telegram-bot-token" v-model="notification.telegramBotToken" type="text" class="form-control" required>
+                                <HiddenInput id="telegram-bot-token" v-model="notification.telegramBotToken" :required="true" :readonly="true"></HiddenInput>
                                 <div class="form-text">
                                     You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
                                 </div>
@@ -130,7 +130,7 @@
 
                             <div class="mb-3">
                                 <label for="password" class="form-label">Password</label>
-                                <input id="password" v-model="notification.smtpPassword" type="password" class="form-control" autocomplete="false">
+                                <HiddenInput id="password" v-model="notification.smtpPassword" :required="true" autocomplete="false"></HiddenInput>
                             </div>
 
                             <div class="mb-3">
@@ -195,7 +195,7 @@
                         <template v-if="notification.type === 'gotify'">
                             <div class="mb-3">
                                 <label for="gotify-application-token" class="form-label">Application Token</label>
-                                <input id="gotify-application-token" v-model="notification.gotifyapplicationToken" type="text" class="form-control" required>
+                                <HiddenInput id="gotify-application-token" v-model="notification.gotifyapplicationToken" :required="true"></HiddenInput>
                             </div>
                             <div class="mb-3">
                                 <label for="gotify-server-url" class="form-label">Server URL</label>
@@ -306,13 +306,13 @@
                         <template v-if="notification.type === 'pushy'">
                             <div class="mb-3">
                                 <label for="pushy-app-token" class="form-label">API_KEY</label>
-                                <input id="pushy-app-token" v-model="notification.pushyAPIKey" type="text" class="form-control" required>
+                                <HiddenInput id="pushy-app-token" v-model="notification.pushyAPIKey" :required="true"></HiddenInput>
                             </div>
 
                             <div class="mb-3">
                                 <label for="pushy-user-key" class="form-label">USER_TOKEN</label>
                                 <div class="input-group mb-3">
-                                    <input id="pushy-user-key" v-model="notification.pushyToken" type="text" class="form-control" required>
+                                    <HiddenInput id="pushy-user-key" v-model="notification.pushyToken" :required="true"></HiddenInput>
                                 </div>
                             </div>
                             <p style="margin-top: 8px;">
@@ -323,7 +323,7 @@
                         <template v-if="notification.type === 'octopush'">
                             <div class="mb-3">
                                 <label for="octopush-key" class="form-label">API KEY</label>
-                                <input id="octopush-key" v-model="notification.octopushAPIKey" type="text" class="form-control" required>
+                                <HiddenInput id="octopush-key" v-model="notification.octopushAPIKey" :required="true"></HiddenInput>
                                 <label for="octopush-login" class="form-label">API LOGIN</label>
                                 <input id="octopush-login" v-model="notification.octopushLogin" type="text" class="form-control" required>
                             </div>
@@ -354,9 +354,9 @@
                         <template v-if="notification.type === 'pushover'">
                             <div class="mb-3">
                                 <label for="pushover-user" class="form-label">User Key<span style="color: red;"><sup>*</sup></span></label>
-                                <input id="pushover-user" v-model="notification.pushoveruserkey" type="text" class="form-control" required>
+                                <HiddenInput id="pushover-user" v-model="notification.pushoveruserkey" :required="true"></HiddenInput>
                                 <label for="pushover-app-token" class="form-label">Application Token<span style="color: red;"><sup>*</sup></span></label>
-                                <input id="pushover-app-token" v-model="notification.pushoverapptoken" type="text" class="form-control" required>
+                                <HiddenInput id="pushover-app-token" v-model="notification.pushoverapptoken" :required="true"></HiddenInput>
                                 <label for="pushover-device" class="form-label">Device</label>
                                 <input id="pushover-device" v-model="notification.pushoverdevice" type="text" class="form-control">
                                 <label for="pushover-device" class="form-label">Message Title</label>
@@ -442,7 +442,7 @@
                         <template v-if="notification.type === 'pushbullet'">
                             <div class="mb-3">
                                 <label for="pushbullet-access-token" class="form-label">Access Token</label>
-                                <input id="pushbullet-access-token" v-model="notification.pushbulletAccessToken" type="text" class="form-control" required>
+                                <HiddenInput id="pushbullet-access-token" v-model="notification.pushbulletAccessToken" :required="true"></HiddenInput>
                             </div>
 
                             <p style="margin-top: 8px;">
@@ -453,7 +453,7 @@
                         <template v-if="notification.type === 'line'">
                             <div class="mb-3">
                                 <label for="line-channel-access-token" class="form-label">Channel access token</label>
-                                <input id="line-channel-access-token" v-model="notification.lineChannelAccessToken" type="text" class="form-control" required>
+                                <HiddenInput id="line-channel-access-token" v-model="notification.lineChannelAccessToken" :required="true"></HiddenInput>
                             </div>
                             <div class="form-text">
                                 Line Developers Console - <b>Basic Settings</b>
@@ -497,11 +497,13 @@ import { ucfirst } from "../util.ts"
 import axios from "axios";
 import { useToast } from "vue-toastification"
 import Confirm from "./Confirm.vue";
+import HiddenInput from "./HiddenInput.vue";
 const toast = useToast()
 
 export default {
     components: {
         Confirm,
+        HiddenInput,
     },
     props: {},
     data() {

src/icon.js

@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons"
+import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"
 //import { fa } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 
 // Add Free Font Awesome Icons here
 // https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
-library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp);
+library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash);
 
 export { FontAwesomeIcon }

src/languages/da-DK.js

@@ -108,5 +108,12 @@ export default {
     "Repeat Password": "Gentag adgangskoden",
     "Resource Record Type": "Resource Record Type",
     respTime: "Resp. Time (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/de-DE.js

@@ -104,6 +104,12 @@ export default {
     rrtypeDescription: "Wähle den RR-Typ aus, welchen du überwachen möchtest.",
     "Last Result": "Letztes Ergebnis",
     pauseMonitorMsg: "Bist du sicher das du den Monitor pausieren möchtest?",
+    clearEventsMsg: "Bist du sicher das du alle Ereignisse für diesen Monitor löschen möchtest?",
+    clearHeartbeatsMsg: "Bist du sicher das du alle Statistiken für diesen Monitor löschen möchtest?",
+    "Clear Data": "Lösche Daten",
+    Events: "Ereignisse",
+    Heartbeats: "Statistiken",
+    confirmClearStatisticsMsg: "Bist du sicher das du ALLE Statistiken löschen möchtest?",
     "Create your admin account": "Erstelle dein Admin Konto",
     "Repeat Password": "Wiederhole das Passwort",
     "Resource Record Type": "Resource Record Type",
@@ -111,5 +117,6 @@ export default {
     "Export": "Export",
     "Import": "Import",
     respTime: "Antw. Zeit (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Erstellen",
 }

src/languages/en.js

@@ -16,6 +16,9 @@ export default {
     resoverserverDescription: "Cloudflare is the default server, you can change the resolver server anytime.",
     rrtypeDescription: "Select the RR-Type you want to monitor",
     pauseMonitorMsg: "Are you sure want to pause?",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     Settings: "Settings",
     Dashboard: "Dashboard",
     "New Update": "New Update",
@@ -111,5 +114,9 @@ export default {
     "Export": "Export",
     "Import": "Import",
     respTime: "Resp. Time (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/es-ES.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Crea tu cuenta de administrador",
     "Repeat Password": "Repetir contraseña",
     respTime: "Tiempo de resp. (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/fr-FR.js

@@ -66,7 +66,7 @@ export default {
     "Theme - Heartbeat Bar": "Voir les services surveillés",
     Normal: "Général",
     Bottom: "En dessous",
-    None: "Non",
+    None: "Rien",
     Timezone: "Fuseau Horaire",
     "Search Engine Visibility": "Visibilité par les moteurs de recherche",
     "Allow indexing": "Autoriser l'indexation par des moteurs de recherche",
@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Créez votre compte administrateur",
     "Repeat Password": "Répéter le mot de passe",
     respTime: "Temps de réponse (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Créer",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/ja.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Create your admin account",
     "Repeat Password": "Repeat Password",
     respTime: "Resp. Time (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/ko-KR.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "관리자 계정 만들기",
     "Repeat Password": "비밀번호 재입력",
     respTime: "응답 시간 (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/nl-NL.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Maak uw beheerdersaccount aan",
     "Repeat Password": "Herhaal wachtwoord",
     respTime: "resp. tijd (ms)",
-    notAvailableShort: "N.v.t."
+    notAvailableShort: "N.v.t.",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/pl.js

@@ -0,0 +1,113 @@
+export default {
+    languageName: "Polski",
+    checkEverySecond: "Sprawdzaj co {0} sekund.",
+    "Avg.": "Średnia ",
+    retriesDescription: "Maksymalna liczba powtórzeń, zanim usługa zostanie oznaczona jako wyłączona i zostanie wysłane powiadomienie",
+    ignoreTLSError: "Ignoruj błąd TLS/SSL dla stron HTTPS",
+    upsideDownModeDescription: "Odwróć status do góry nogami. Jeśli usługa jest osiągalna, to jest oznaczona jako niedostępna.",
+    maxRedirectDescription: "Maksymalna liczba przekierowań do wykonania. Ustaw na 0, aby wyłączyć przekierowania.",
+    acceptedStatusCodesDescription: "Wybierz kody stanu, które są uważane za udaną odpowiedź.",
+    passwordNotMatchMsg: "Powtórzone hasło nie pasuje.",
+    notificationDescription: "Proszę przypisać powiadomienie do monitora(ów), aby zadziałało.",
+    keywordDescription: "Wyszukiwanie słów kluczowych w zwykłym html lub odpowiedzi JSON. Wielkość liter ma znaczenie.",
+    pauseDashboardHome: "Pauza",
+    deleteMonitorMsg: "Czy na pewno chcesz usunąć ten monitor?",
+    deleteNotificationMsg: "Czy na pewno chcesz usunąć to powiadomienie dla wszystkich monitorów?",
+    resoverserverDescription: "Cloudflare jest domyślnym serwerem, możesz zmienić serwer resolver w każdej chwili.",
+    rrtypeDescription: "Wybierz RR-Type który chcesz monitorować",
+    pauseMonitorMsg: "Czy na pewno chcesz wstrzymać?",
+    Settings: "Ustawienia",
+    Dashboard: "Panel",
+    "New Update": "Nowa aktualizacja",
+    Language: "Język",
+    Appearance: "Wygląd",
+    Theme: "Motyw",
+    General: "Ogólne",
+    Version: "Wersja",
+    "Check Update On GitHub": "Sprawdź aktualizację na GitHub.",
+    List: "Lista",
+    Add: "Dodaj",
+    "Add New Monitor": "Dodaj nowy monitor",
+    "Quick Stats": "Szybkie statystyki",
+    Up: "Online",
+    Down: "Offline",
+    Pending: "Oczekujący",
+    Unknown: "Nieznane",
+    Pause: "Pauza",
+    Name: "Nazwa",
+    Status: "Status",
+    DateTime: "Data i godzina",
+    Message: "Wiadomość",
+    "No important events": "Brak ważnych wydarzeń",
+    Resume: "Wznów",
+    Edit: "Edytuj",
+    Delete: "Usuń",
+    Current: "aktualny",
+    Uptime: "Czas pracy",
+    "Cert Exp.": "Wygaśnięcie certyfikatu",
+    days: "dni",
+    day: "dzień",
+    "-day": " dni",
+    hour: "godzina",
+    "-hour": " godziny",
+    Response: "Odpowiedź",
+    Ping: "Ping",
+    "Monitor Type": "Typ monitora",
+    Keyword: "Słowo kluczowe",
+    "Friendly Name": "Przyjazna nazwa",
+    URL: "URL",
+    Hostname: "Nazwa hosta",
+    Port: "Port",
+    "Heartbeat Interval": "Interwał bicia serca",
+    Retries: "Prób",
+    Advanced: "Zaawansowane",
+    "Upside Down Mode": "Tryb do góry nogami",
+    "Max. Redirects": "Maks. przekierowania",
+    "Accepted Status Codes": "Akceptowane kody statusu",
+    Save: "Zapisz",
+    Notifications: "Powiadomienia",
+    "Not available, please setup.": "Niedostępne, proszę skonfigurować.",
+    "Setup Notification": "Konfiguracja powiadomień",
+    Light: "Jasny",
+    Dark: "Ciemny",
+    Auto: "Automatyczny",
+    "Theme - Heartbeat Bar": "Motyw - pasek bicia serca",
+    Normal: "Normalne",
+    Bottom: "Na dole",
+    None: "Brak",
+    Timezone: "Strefa czasowa",
+    "Search Engine Visibility": "Widoczność w wyszukiwarce",
+    "Allow indexing": "Pozwól na indeksowanie",
+    "Discourage search engines from indexing site": "Zniechęcaj wyszukiwarki do indeksowania strony",
+    "Change Password": "Zmień hasło",
+    "Current Password": "Aktualne hasło",
+    "New Password": "Nowe hasło",
+    "Repeat New Password": "Powtórz nowe hasło",
+    "Update Password": "Zaktualizuj hasło",
+    "Disable Auth": "Wyłącz autoryzację",
+    "Enable Auth": "Włącz autoryzację ",
+    Logout: "Wyloguj się",
+    Leave: "Zostaw",
+    "I understand, please disable": "Rozumiem, proszę wyłączyć",
+    Confirm: "Potwierdź",
+    Yes: "Tak",
+    No: "Nie",
+    Username: "Nazwa użytkownika",
+    Password: "Hasło",
+    "Remember me": "Zapamiętaj mnie",
+    Login: "Zaloguj się",
+    "No Monitors, please": "Brak monitorów, proszę",
+    "add one": "dodaj jeden",
+    "Notification Type": "Typ powiadomienia",
+    Email: "Email",
+    Test: "Test",
+    "Certificate Info": "Informacje o certyfikacie",
+    "Resolver Server": "Server resolver",
+    "Resource Record Type": "Typ rekordu zasobów",
+    "Last Result": "Ostatni wynik",
+    "Create your admin account": "Utwórz swoje konto administratora",
+    "Repeat Password": "Powtórz hasło",
+    respTime: "Czas odp. (ms)",
+    notAvailableShort: "N/A",
+    Create: "Stwórz"
+}

src/languages/ru-RU.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Создайте аккаунт администратора",
     "Repeat Password": "Повторите пароль",
     respTime: "Resp. Time (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/sr-latn.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Naprivi administratorski nalog",
     "Repeat Password": "Ponovite lozinku",
     respTime: "Vreme odg. (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/sr.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "Наприви администраторски налог",
     "Repeat Password": "Поновите лозинку",
     respTime: "Време одг. (мс)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/sv-SE.js

@@ -1,14 +1,14 @@
 export default {
-    languageName: "Swedish",
+    languageName: "Svenska",
     checkEverySecond: "Uppdatera var {0} sekund.",
-    "Avg.": "Genomsnitt ",
+    "Avg.": "Genomsnittligt ",
     retriesDescription: "Max antal försök innan tjänsten markeras som nere och en notis skickas",
     ignoreTLSError: "Ignorera TLS/SSL-fel för webbsidor med HTTPS",
     upsideDownModeDescription: "Vänd upp och ner på statusen. Om tjänsten är nåbar visas den som NERE.",
     maxRedirectDescription: "Max antal omdirigeringar att följa. Välj 0 för att avaktivera omdirigeringar.",
     acceptedStatusCodesDescription: "Välj statuskoder som räknas som lyckade.",
     passwordNotMatchMsg: "Det bekräftade lösenordet stämmer ej överens.",
-    notificationDescription: "Vänligen lägg till en notistjänst till övervakaren.",
+    notificationDescription: "Vänligen lägg till en notistjänst till dina övervakare.",
     keywordDescription: "Sök efter nyckelord i ren HTML eller JSON-svar. Sökningen är skiftkänslig.",
     pauseDashboardHome: "Pausa",
     deleteMonitorMsg: "Är du säker på att du vill ta bort den här övervakningen?",
@@ -33,10 +33,10 @@ export default {
     Down: "Nere",
     Pending: "Pågående",
     Unknown: "Okänt",
-    Pause: "Paus",
+    Pause: "Pausa",
     Name: "Namn",
     Status: "Status",
-    DateTime: "DatumTid",
+    DateTime: "Datum & Tid",
     Message: "Meddelande",
     "No important events": "Inga viktiga händelser",
     Resume: "Återuppta",
@@ -44,17 +44,17 @@ export default {
     Delete: "Ta bort",
     Current: "Nuvarande",
     Uptime: "Drifttid",
-    "Cert Exp.": "Certifikatsutgång",
+    "Cert Exp.": "Certifikat utgår",
     days: "dagar",
     day: "dag",
-    "-day": "-dag",
+    "-day": " dagar",
     hour: "timme",
-    "-hour": "-timme",
+    "-hour": " timmar",
     Response: "Svar",
     Ping: "Ping",
     "Monitor Type": "Övervakningstyp",
     Keyword: "Nyckelord",
-    "Friendly Name": "Vänligt Namn",
+    "Friendly Name": "Namn",
     URL: "URL",
     Hostname: "Värdnamn",
     Port: "Port",
@@ -67,14 +67,14 @@ export default {
     Save: "Spara",
     Notifications: "Notiser",
     "Not available, please setup.": "Ej tillgänglig, vänligen konfigurera.",
-    "Setup Notification": "Konfigurera Notis",
+    "Setup Notification": "Ny Notistjänst",
     Light: "Ljust",
     Dark: "Mörkt",
-    Auto: "Automatisk",
+    Auto: "Automatiskt",
     "Theme - Heartbeat Bar": "Tema - Heartbeat Bar",
     Normal: "Normal",
     Bottom: "Botten",
-    None: "Ingen",
+    None: "Tomt",
     Timezone: "Tidszon",
     "Search Engine Visibility": "Synlighet på Sökmotorer",
     "Allow indexing": "Tillåt indexering",
@@ -107,6 +107,13 @@ export default {
     "Last Result": "Senaste resultat",
     "Create your admin account": "Skapa ditt administratörskonto",
     "Repeat Password": "Upprepa Lösenord",
-    respTime: "Resp. Time (ms)",
+    respTime: "Svarstid (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "Ej Tillg.",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/zh-CN.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "创建管理员账号",
     "Repeat Password": "重复密码",
     respTime: "Resp. Time (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "Create",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/zh-HK.js

@@ -108,5 +108,12 @@ export default {
     "Create your admin account": "製作你的管理員帳號",
     "Repeat Password": "重複密碼",
     respTime: "反應時間 (ms)",
-    notAvailableShort: "N/A"
+    notAvailableShort: "N/A",
+    Create: "建立",
+    clearEventsMsg: "是否確定刪除這個監測器的所有事件？",
+    clearHeartbeatsMsg: "是否確定刪除這個監測器的所有脈搏資料？",
+    confirmClearStatisticsMsg: "是否確定刪除所有監測器的脈搏資料？（您的監測器會繼續正常運作）",
+    "Clear Data": "清除資料",
+    Events: "事件",
+    Heartbeats: "脈搏"
 }

src/main.js

@@ -28,7 +28,7 @@ import zhHK from "./languages/zh-HK";
 import deDE from "./languages/de-DE";
 import nlNL from "./languages/nl-NL";
 import esEs from "./languages/es-ES";
-import fr from "./languages/fr";
+import frFR from "./languages/fr-FR";
 import ja from "./languages/ja";
 import daDK from "./languages/da-DK";
 import sr from "./languages/sr";
@@ -37,6 +37,7 @@ import svSE from "./languages/sv-SE";
 import koKR from "./languages/ko-KR";
 import ruRU from "./languages/ru-RU";
 import zhCN from "./languages/zh-CN";
+import pl from "./languages/pl"
 
 const routes = [
     {
@@ -105,7 +106,7 @@ const languageList = {
     "de-DE": deDE,
     "nl-NL": nlNL,
     "es-ES": esEs,
-    "fr": fr,
+    "fr-FR": frFR,
     "ja": ja,
     "da-DK": daDK,
     "sr": sr,
@@ -114,6 +115,7 @@ const languageList = {
     "ko-KR": koKR,
     "ru-RU": ruRU,
     "zh-CN": zhCN,
+    "pl": pl,
 };
 
 const i18n = createI18n({

src/mixins/socket.js

@@ -107,8 +107,8 @@ export default {
             }
         });
 
-        socket.on("heartbeatList", (monitorID, data) => {
+        socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
-            if (! (monitorID in this.heartbeatList)) {
+            if (! (monitorID in this.heartbeatList) || overwrite) {
                 this.heartbeatList[monitorID] = data;
             } else {
                 this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID])
@@ -127,8 +127,8 @@ export default {
             this.certInfoList[monitorID] = JSON.parse(data)
         });
 
-        socket.on("importantHeartbeatList", (monitorID, data) => {
+        socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
-            if (! (monitorID in this.importantHeartbeatList)) {
+            if (! (monitorID in this.importantHeartbeatList) || overwrite) {
                 this.importantHeartbeatList[monitorID] = data;
             } else {
                 this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
@@ -257,6 +257,18 @@ export default {
         uploadBackup(uploadedJSON, callback) {
             socket.emit("uploadBackup", uploadedJSON, callback)
         },
+
+        clearEvents(monitorID, callback) {
+            socket.emit("clearEvents", monitorID, callback)
+        },
+
+        clearHeartbeats(monitorID, callback) {
+            socket.emit("clearHeartbeats", monitorID, callback)
+        },
+
+        clearStatistics(callback) {
+            socket.emit("clearStatistics", callback)
+        },
     },
 
     computed: {

src/mixins/theme.js

@@ -11,7 +11,7 @@ export default {
     mounted() {
         // Default Light
         if (! this.userTheme) {
-            this.userTheme = "light";
+            this.userTheme = "auto";
         }
 
         // Default Heartbeat Bar

src/pages/Details.vue

@@ -133,6 +133,23 @@
             </div>
 
             <div class="shadow-box table-shadow-box">
+                <div class="dropdown dropdown-clear-data">
+                    <button class="btn btn-sm btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                        <font-awesome-icon icon="trash" /> {{ $t("Clear Data") }}
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <button type="button" class="dropdown-item" @click="clearEventsDialog">
+                                {{ $t("Events") }}
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" @click="clearHeartbeatsDialog">
+                                {{ $t("Heartbeats") }}
+                            </button>
+                        </li>
+                    </ul>
+                </div>
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -172,6 +189,14 @@
             <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMonitor">
                 {{ $t("deleteMonitorMsg") }}
             </Confirm>
+
+            <Confirm ref="confirmClearEvents" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearEvents">
+                {{ $t("clearEventsMsg") }}
+            </Confirm>
+
+            <Confirm ref="confirmClearHeartbeats" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearHeartbeats">
+                {{ $t("clearHeartbeatsMsg") }}
+            </Confirm>
         </div>
     </transition>
 </template>
@@ -251,6 +276,7 @@ export default {
 
         importantHeartBeatList() {
             if (this.$root.importantHeartbeatList[this.monitor.id]) {
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
                 return this.$root.importantHeartbeatList[this.monitor.id]
             }
@@ -313,6 +339,14 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        clearEventsDialog() {
+            this.$refs.confirmClearEvents.show();
+        },
+
+        clearHeartbeatsDialog() {
+            this.$refs.confirmClearHeartbeats.show();
+        },
+
         deleteMonitor() {
             this.$root.deleteMonitor(this.monitor.id, (res) => {
                 if (res.ok) {
@@ -324,6 +358,21 @@ export default {
             })
         },
 
+        clearEvents() {
+            this.$root.clearEvents(this.monitor.id, (res) => {
+                if (! res.ok) {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        clearHeartbeats() {
+            this.$root.clearHeartbeats(this.monitor.id, (res) => {
+                if (! res.ok) {
+                    toast.error(res.msg);
+                }
+            })
+        },
     },
 }
 </script>
@@ -340,16 +389,20 @@ export default {
 @media (max-width: 550px) {
     .functions {
         text-align: center;
-    }
 
-    button, a {
+        button, a {
-        margin-left: 10px !important;
+            margin-left: 10px !important;
-        margin-right: 10px !important;
+            margin-right: 10px !important;
+        }
     }
 
     .ping-chart-wrapper {
         padding: 10px !important;
     }
+
+    .dropdown-clear-data {
+        margin-bottom: 10px;
+    }
 }
 
 @media (max-width: 400px) {
@@ -364,6 +417,13 @@ export default {
         padding-left: 25px;
         padding-right: 25px;
     }
+
+    .dropdown-clear-data {
+        button {
+            display: block;
+            padding-top: 4px;
+        }
+    }
 }
 
 .url {
@@ -417,10 +477,30 @@ table {
     color: black;
 }
 
+.dropdown-clear-data {
+    float: right;
+}
+
 .dark {
     .keyword {
         color: $dark-font-color;
     }
+
+    .dropdown-clear-data {
+        ul {
+            background-color: $dark-bg;
+            border-color: $dark-bg2;
+            border-width: 2px;
+
+            li button {
+                color: $dark-font-color;
+            }
+
+            li button:hover {
+                background-color: $dark-bg2;
+            }
+        }
+    }
 }
 
 </style>

src/pages/Settings.vue

@@ -134,6 +134,7 @@
                                 <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">{{ $t("Enable Auth") }}</button>
                                 <button v-if="! settings.disableAuth" class="btn btn-primary me-1" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
                                 <button v-if="! settings.disableAuth" class="btn btn-danger me-1" @click="$root.logout">{{ $t("Logout") }}</button>
+                                <button class="btn btn-outline-danger me-1" @click="confirmClearStatistics">{{ $t("Clear all Statistics") }}</button>
                             </div>
                         </template>
                     </div>
@@ -221,6 +222,15 @@
                     <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
                     <p>신중하게 사용하세요.</p>
                 </template>
+                <template v-if="$i18n.locale === 'pl' ">
+                    <p>Czy na pewno chcesz <strong>wyłączyć autoryzację</strong>?</p>
+                    <p>Jest przeznaczony dla <strong>kogoś, kto ma autoryzację zewnętrzną</strong> przed Uptime Kuma, taką jak Cloudflare Access.</p>
+                    <p>Proszę używać ostrożnie.</p>
+                </template>
+            </Confirm>
+
+            <Confirm ref="confirmClearStatistics" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearStatistics">
+                {{ $t("confirmClearStatisticsMsg") }}
             </Confirm>
         </div>
     </transition>
@@ -320,6 +330,10 @@ export default {
             this.$refs.confirmDisableAuth.show();
         },
 
+        confirmClearStatistics() {
+            this.$refs.confirmClearStatistics.show();
+        },
+
         disableAuth() {
             this.settings.disableAuth = true;
             this.saveSettings();
@@ -366,6 +380,16 @@ export default {
                 })
             }
         },
+
+        clearStatistics() {
+            this.$root.clearStatistics((res) => {
+                if (res.ok) {
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
     },
 }
 </script>

src/pages/Setup.vue

@@ -14,6 +14,15 @@
                 </p>
 
                 <div class="form-floating">
+                    <select id="language" v-model="$i18n.locale" class="form-select">
+                        <option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
+                            {{ $i18n.messages[lang].languageName }}
+                        </option>
+                    </select>
+                    <label for="language" class="form-label">{{ $t("Language") }}</label>
+                </div>
+
+                <div class="form-floating mt-3">
                     <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required>
                     <label for="floatingInput">{{ $t("Username") }}</label>
                 </div>
@@ -29,7 +38,7 @@
                 </div>
 
                 <button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">
-                    Create
+                    {{ $t("Create") }}
                 </button>
             </form>
         </div>
@@ -49,6 +58,11 @@ export default {
             repeatPassword: "",
         }
     },
+    watch: {
+        "$i18n.locale"() {
+            localStorage.locale = this.$i18n.locale;
+        },
+    },
     mounted() {
         this.$root.getSocket().emit("needSetup", (needSetup) => {
             if (! needSetup) {