Merge branch 'master' into import-export

2024-11-27 16:54:04 +00:00 · 2021-09-07 14:12:53 +02:00 · 2021-09-07 14:12:53 +02:00 · 242e494cb5
commit 242e494cb5
parent 8f9a973ede f842fb409e
36 changed files with 1219 additions and 595 deletions
--- a/README.md
+++ b/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

--- a/25
+++ b/25
@ -1,25 +1,30 @@
-# DON'T UPDATE TO alpine3.13, 1.14, see #41.
-FROM node:14-alpine3.12 AS release
+FROM node:14-bullseye-slim 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 && \
-            ln -s /usr/bin/python3 /usr/bin/python && \
-            npm install mapbox/node-sqlite3#593c9d && \
-            apk del .build-deps && \
-            rm -f /usr/bin/python
+RUN npm install mapbox/node-sqlite3#593c9d

 # 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
--- a/26
+++ b/26
@ -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
--- a/extra/healthcheck.js
+++ b/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",
-    port: "3001",
-    timeout: 2000,
+    host: process.env.HOST || "127.0.0.1",
+    port: parseInt(process.env.PORT) || 3001,
+    timeout: 120 * 1000,
 };
-let request = http.request(options, (res) => {
-    console.log(`STATUS: ${res.statusCode}`);
-    if (res.statusCode == 200) {
+
+let request = client.request(options, (res) => {
+    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();
--- a/extra/update-version.js
+++ b/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);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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.2 && npm install --legacy-peer-deps && node node_modules/esbuild/install.js && npm run build && npm prune",
+        "setup": "git checkout 1.5.3 && 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",
--- a/server/client.js
+++ b/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,
+}
--- a/server/notification.js
+++ b/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"],
-                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                        "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"],
-                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                        "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"],
-                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                        "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"],
-                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                        "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                        "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.";
--- a/server/server.js
+++ b/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);
--- a/src/assets/vars.scss
+++ b/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;
--- a/src/components/HeartbeatBar.vue
+++ b/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.beatMargin = 2.4;
-            this.beatHeight = 16
+            this.beatWidth = 5;
+            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);
--- a/src/components/HiddenInput.vue
+++ b/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>
--- a/src/components/NotificationDialog.vue
+++ b/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() {
--- a/src/icon.js
+++ b/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 }
--- a/src/languages/da-DK.js
+++ b/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"
 }
--- a/src/languages/de-DE.js
+++ b/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",
 }
--- a/src/languages/en.js
+++ b/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"
 }
--- a/src/languages/es-ES.js
+++ b/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"
 }
--- a/src/languages/fr-FR.js
+++ b/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"
 }
--- a/src/languages/ja.js
+++ b/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"
 }
--- a/src/languages/ko-KR.js
+++ b/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"
 }
--- a/src/languages/nl-NL.js
+++ b/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"
 }
--- a/src/languages/pl.js
+++ b/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"
+}
--- a/src/languages/ru-RU.js
+++ b/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"
 }
--- a/src/languages/sr-latn.js
+++ b/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"
 }
--- a/src/languages/sr.js
+++ b/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"
 }
--- a/src/languages/sv-SE.js
+++ b/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)",
-    notAvailableShort: "N/A"
+    respTime: "Svarstid (ms)",
+    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"
 }
--- a/src/languages/zh-CN.js
+++ b/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"
 }
--- a/src/languages/zh-HK.js
+++ b/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: "脈搏"
 }
--- a/src/main.js
+++ b/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({
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@ -107,8 +107,8 @@ export default {
            }
        });

-        socket.on("heartbeatList", (monitorID, data) => {
-            if (! (monitorID in this.heartbeatList)) {
+        socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
+            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) => {
-            if (! (monitorID in this.importantHeartbeatList)) {
+        socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
+            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: {
--- a/src/mixins/theme.js
+++ b/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
--- a/src/pages/Details.vue
+++ b/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 {
-        margin-left: 10px !important;
-        margin-right: 10px !important;
+        button, a {
+            margin-left: 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>
--- a/src/pages/Settings.vue
+++ b/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>
--- a/src/pages/Setup.vue
+++ b/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) {