Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	README.md
#	dockerfile
#	package-lock.json
#	package.json
#	server/server.js
#	src/assets/app.scss
#	src/assets/vars.scss
#	src/pages/EditMonitor.vue
#	src/pages/Settings.vue

.eslintrc.js

@@ -77,6 +77,8 @@ module.exports = {
         "no-empty": ["error", {
             "allowEmptyCatch": true
         }],
-        "no-control-regex": "off"
+        "no-control-regex": "off",
+        "one-var": ["error", "never"],
+        "max-statements-per-line": ["error", { "max": 1 }]
     },
 }

.stylelintrc

@@ -4,7 +4,6 @@
         "indentation": 4,
         "no-descending-specificity": null,
         "selector-list-comma-newline-after": null,
-        "declaration-empty-line-before": null,
+        "declaration-empty-line-before": null
-        "no-duplicate-selectors": null
     }
 }

CONTRIBUTING.md

@@ -1,146 +0,0 @@
-# Project Info
-
-First of all, thank you everyone who made pull requests for Uptime Kuma, I never thought GitHub Community can be that nice! And also because of this, I also never thought other people actually read my code and edit my code. It is not structed and commented so well, lol. Sorry about that.
-
-The project was created with vite.js (vue3). Then I created a sub-directory called "server" for server part. Both frontend and backend share the same package.json. 
-
-The frontend code build into "dist" directory. The server uses "dist" as root. This is how production is working.
-
-# Can I create a pull request for Uptime Kuma?
-
-Generally, if the pull request is working fine and it do not affect any existing logic, workflow and perfomance, I will merge to the master branch once it is tested.
-
-If you are not sure, feel free to create an empty pull request draft first.
-
-## Pull Request Examples
-
-### ✅ High - Medium Priority
-
-- Add a new notification
-- Add a chart
-- Fix a bug
-
-### *️⃣ Requires one more reviewer 
-
-I do not have such knowledge to test it
-
-- Add k8s supports 
-
-### *️⃣ Low Priority 
-
-It chnaged my current workflow and require further studies.
-
-- Change my release approach
-
-### ❌ Won't Merge
-
-- Duplicated pull request
-- Buggy
-- Existing logic is completely modified or deleted
-- A function that is completely out of scope
-
-# Project Styles
-
-I personally do not like something need to learn so much and need to config so much before you can finally start the app. 
-
-For example, recently, because I am not a python expert, I spent a 2 hours to resolve all problems in order to install and use the Apprise cli. Apprise requires so many hidden requirements, I have to figure out myself how to solve the problems by Google search for my OS. That is painful. I do not want Uptime Kuma to be like this way, so:  
-
-- Easy to install for non-Docker users, no native build dependency is needed (at least for x86_64), no extra config, no extra effort to get it run
-- Single container for Docker users, no very complex docker-composer file. Just map the volume and expose the port, then good to go
-- All settings in frontend.
-- Easy to use
-
-# Coding Styles
-
-- Follow .editorconfig
-- Follow eslint
-
-## Name convention
-
-- Javascript/Typescript: camelCaseType
-- SQLite: underscore_type
-- CSS/SCSS: dash-type
-
-# Tools
-- Node.js >= 14
-- Git
-- IDE that supports .editorconfig and eslint (I am using Intellji Idea)
-- A SQLite tool (I am using SQLite Expert Personal)
-
-# Install dependencies 
-
-```bash
-npm install --dev
-```
-
-# Backend Dev
-
-```bash
-npm run start-server
-
-# Or 
-
-node server/server.js
-```
-
-It binds to 0.0.0.0:3001 by default.
-
-
-## Backend Details
-
-It is mainly a socket.io app + express.js.
-
-express.js is just used for serving the frontend built files (index.html, .js and .css etc.) 
-
-# Frontend Dev
-
-Start frontend dev server. Hot-reload enabled in this way. It binds to 0.0.0.0:3000.
-
-```bash
-npm run dev
-```
-
-PS: You can ignore those scss warnings, those warnings are from Bootstrap that I cannot fix.
-
-You can use Vue Devtool Chrome extension for debugging.
-
-After the frontend server started. It cannot connect to the websocket server even you have started the server. You need to tell the frontend that is a dev env by running this in DevTool console and refresh:
-
-```javascript
-localStorage.dev = "dev";
-```
-
-So that the frontend will try to connect websocket server in 3001.
-
-Alternately, you can specific NODE_ENV to "development".
-
-
-## Build the frontend
-
-```bash
-npm run build
-```
-
-## Frontend Details
-
-Uptime Kuma Frontend is a single page application (SPA). Most paths are handled by Vue Router.
-
-The router in "src/main.js"
-
-As you can see, most data in frontend is stored in root level, even though you changed the current router to any other pages.
-
-The data and socket logic in "src/mixins/socket.js"
-
-# Database Migration
-
-1. create `patch{num}.sql` in `./db/`
-1. update `latestVersion` in `./server/database.js`
-
-# Unit Test
-
-Yes, no unit test for now. I know it is very important, but at the same time my spare time is very limited. I want to implement my ideas first. I will go back to this in some points.
-
-
-
-  
-

db/patch7.sql

@@ -0,0 +1,10 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE monitor
+	ADD dns_resolve_type VARCHAR(5);
+
+ALTER TABLE monitor
+	ADD dns_resolve_server VARCHAR(255);
+
+COMMIT;

db/patch8.sql

@@ -0,0 +1,7 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE monitor
+    ADD dns_last_result VARCHAR(255);
+
+COMMIT;

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/install.batsh

@@ -198,7 +198,7 @@ if (type == "local") {
    bash("git clone https://github.com/louislam/uptime-kuma.git .");
    bash("npm run setup");
 
-   bash("pm2 start npm --name uptime-kuma -- run start-server -- --port=$port");
+   bash("pm2 start server/server.js --name uptime-kuma -- --port=$port");
 
 } else {
     defaultVolume = "uptime-kuma";
@@ -212,8 +212,8 @@ if (type == "local") {
     bash("check=$(docker info)");
 
     bash("if [[ \"$check\" == *\"Is the docker daemon running\"* ]]; then
-      echo \"Error: docker is not running\"
+      \"echo\" \"Error: docker is not running\"
-      exit 1
+      \"exit\" \"1\"
     fi");
 
     if ("$3" != "") {

extra/simple-dns-server.js

@@ -0,0 +1,144 @@
+/*
+ * Simple DNS Server
+ * For testing DNS monitoring type, dev only
+ */
+const dns2 = require("dns2");
+
+const { Packet } = dns2;
+
+const server = dns2.createServer({
+    udp: true
+});
+
+server.on("request", (request, send, rinfo) => {
+    for (let question of request.questions) {
+        console.log(question.name, type(question.type), question.class);
+
+        const response = Packet.createResponseFromRequest(request);
+
+        if (question.name === "existing.com") {
+
+            if (question.type === Packet.TYPE.A) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    address: "1.2.3.4"
+                });
+            } if (question.type === Packet.TYPE.AAAA) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    address: "fe80::::1234:5678:abcd:ef00",
+                });
+            } else if (question.type === Packet.TYPE.CNAME) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    domain: "cname1.existing.com",
+                });
+            } else if (question.type === Packet.TYPE.MX) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    exchange: "mx1.existing.com",
+                    priority: 5
+                });
+            } else if (question.type === Packet.TYPE.NS) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    ns: "ns1.existing.com",
+                });
+            } else if (question.type === Packet.TYPE.SOA) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    primary: "existing.com",
+                    admin: "admin@existing.com",
+                    serial: 2021082701,
+                    refresh: 300,
+                    retry: 3,
+                    expiration: 10,
+                    minimum: 10,
+                });
+            } else if (question.type === Packet.TYPE.SRV) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    priority: 5,
+                    weight: 5,
+                    port: 8080,
+                    target: "srv1.existing.com",
+                });
+            } else if (question.type === Packet.TYPE.TXT) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    data: "#v=spf1 include:_spf.existing.com ~all",
+                });
+            } else if (question.type === Packet.TYPE.CAA) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    flags: 0,
+                    tag: "issue",
+                    value: "ca.existing.com",
+                });
+            }
+
+        }
+
+        if (question.name === "4.3.2.1.in-addr.arpa") {
+            if (question.type === Packet.TYPE.PTR) {
+                response.answers.push({
+                    name: question.name,
+                    type: question.type,
+                    class: question.class,
+                    ttl: 300,
+                    domain: "ptr1.existing.com",
+                });
+            }
+        }
+
+        send(response);
+    }
+});
+
+server.on("listening", () => {
+    console.log("Listening");
+    console.log(server.addresses());
+});
+
+server.on("close", () => {
+    console.log("server closed");
+});
+
+server.listen({
+    udp: 5300
+});
+
+function type(code) {
+    for (let name in Packet.TYPE) {
+        if (Packet.TYPE[name] === code) {
+            return name;
+        }
+    }
+}

extra/update-language-files/.gitignore

@@ -0,0 +1,3 @@
+package-lock.json
+test.js
+languages/

extra/update-language-files/index.js

@@ -0,0 +1,78 @@
+// Need to use es6 to read language files
+
+import fs from "fs";
+import path from "path";
+import util from "util";
+
+// https://stackoverflow.com/questions/13786160/copy-folder-recursively-in-node-js
+/**
+ * Look ma, it's cp -R.
+ * @param {string} src  The path to the thing to copy.
+ * @param {string} dest The path to the new copy.
+ */
+const copyRecursiveSync = function (src, dest) {
+    let exists = fs.existsSync(src);
+    let stats = exists && fs.statSync(src);
+    let isDirectory = exists && stats.isDirectory();
+    if (isDirectory) {
+        fs.mkdirSync(dest);
+        fs.readdirSync(src).forEach(function (childItemName) {
+            copyRecursiveSync(path.join(src, childItemName),
+                path.join(dest, childItemName));
+        });
+    } else {
+        fs.copyFileSync(src, dest);
+    }
+};
+console.log(process.argv)
+const baseLangCode = process.argv[2] || "zh-HK";
+console.log("Base Lang: " + baseLangCode);
+fs.rmdirSync("./languages", { recursive: true });
+copyRecursiveSync("../../src/languages", "./languages");
+
+const en = (await import("./languages/en.js")).default;
+const baseLang = (await import(`./languages/${baseLangCode}.js`)).default;
+const files = fs.readdirSync("./languages");
+console.log(files);
+for (const file of files) {
+    if (file.endsWith(".js")) {
+        console.log("Processing " + file);
+        const lang = await import("./languages/" + file);
+
+        let obj;
+
+        if (lang.default) {
+            console.log("is js module");
+            obj = lang.default;
+        } else {
+            console.log("empty file");
+            obj = {
+                languageName: "<Your Language name in your language (not in English)>"
+            };
+        }
+
+        // En first
+        for (const key in en) {
+            if (! obj[key]) {
+                obj[key] = en[key];
+            }
+        }
+
+        // Base second
+        for (const key in baseLang) {
+            if (! obj[key]) {
+                obj[key] = key;
+            }
+        }
+
+        const code = "export default " + util.inspect(obj, {
+            depth: null,
+        });
+
+        fs.writeFileSync(`../../src/languages/${file}`, code);
+
+    }
+}
+
+fs.rmdirSync("./languages", { recursive: true });
+console.log("Done, fix the format by eslint now");

extra/update-language-files/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "update-language-files",
+    "type": "module",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "",
+    "license": "ISC"
+}

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);

install.sh

@@ -166,7 +166,7 @@ fi
   cd $installPath
   git clone https://github.com/louislam/uptime-kuma.git .
   npm run setup
-  pm2 start npm --name uptime-kuma -- run start-server -- --port=$port
+  pm2 start server/server.js --name uptime-kuma -- --port=$port
 else
   defaultVolume="uptime-kuma"
   check=$(docker -v)
@@ -176,8 +176,8 @@ else
 fi
   check=$(docker info)
   if [[ "$check" == *"Is the docker daemon running"* ]]; then
-      echo "Error: docker is not running"
+      "echo" "Error: docker is not running"
-      exit 1
+      "exit" "1"
     fi
   if [ "$3" != "" ]; then
     port="$3"

package.json

@@ -10,51 +10,60 @@
         "vite-preview-dist": "vite preview --host"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "1.2.35",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-regular-svg-icons": "5.15.3",
+        "@fortawesome/free-regular-svg-icons": "^5.15.4",
-        "@fortawesome/free-solid-svg-icons": "5.15.3",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/vue-fontawesome": "3.0.0-4",
+        "@fortawesome/vue-fontawesome": "^3.0.0-4",
-        "@popperjs/core": "2.9.2",
+        "@popperjs/core": "^2.9.3",
-        "args-parser": "1.3.0",
+        "args-parser": "^1.3.0",
-        "axios": "0.21.1",
+        "axios": "^0.21.1",
-        "bcrypt": "5.0.1",
+        "bcryptjs": "^2.4.3",
-        "bootstrap": "5.0.2",
+        "bootstrap": "^5.1.0",
         "chart.js": "^3.5.1",
         "chartjs-adapter-dayjs": "^1.0.0",
-        "command-exists": "1.2.9",
+        "command-exists": "^1.2.9",
         "compare-versions": "^3.6.0",
-        "dayjs": "1.10.6",
+        "dayjs": "^1.10.6",
-        "express": "4.17.1",
+        "express": "^4.17.1",
-        "express-basic-auth": "1.2.0",
+        "express-basic-auth": "^1.2.0",
-        "form-data": "4.0.0",
+        "form-data": "^4.0.0",
-        "http-graceful-shutdown": "3.1.3",
+        "http-graceful-shutdown": "^3.1.4",
-        "jsonwebtoken": "8.5.1",
+        "jsonwebtoken": "^8.5.1",
-        "nodemailer": "6.6.3",
+        "nodemailer": "^6.6.3",
-        "password-hash": "1.2.2",
+        "password-hash": "^1.2.2",
-        "prom-client": "13.1.0",
+        "prom-client": "^13.2.0",
-        "prometheus-api-metrics": "3.2.0",
+        "prometheus-api-metrics": "^3.2.0",
-        "redbean-node": "0.0.20",
+        "redbean-node": "0.1.2",
-        "socket.io": "4.1.3",
+        "socket.io": "^4.2.0",
-        "socket.io-client": "4.1.3",
+        "socket.io-client": "^4.2.0",
-        "sqlite3": "5.0.2",
+        "sqlite3": "github:mapbox/node-sqlite3#593c9d",
-        "tcp-ping": "0.1.1",
+        "tcp-ping": "^0.1.1",
-        "v-pagination-3": "0.1.6",
+        "v-pagination-3": "^0.1.6",
-        "vue": "3.0.5",
+        "vue": "^3.2.8",
         "vue-chart-3": "^0.5.7",
-        "vue-confirm-dialog": "1.0.2",
+        "vue-confirm-dialog": "^1.0.2",
-        "vue-i18n": "^8.25.0",
+        "vue-i18n": "^9.1.7",
-        "vue-router": "4.0.10",
+        "vue-multiselect": "^3.0.0-alpha.2",
-        "vue-toastification": "2.0.0-rc.1"
+        "vue-router": "^4.0.11",
+        "vue-toastification": "^2.0.0-rc.1"
     },
     "devDependencies": {
-        "@vitejs/plugin-legacy": "1.5.1",
-        "@vitejs/plugin-vue": "1.3.0",
-        "@vue/compiler-sfc": "3.1.5",
         "auto-changelog": "2.3.0",
-        "core-js": "3.16.0",
         "release-it": "14.10.1",
-        "sass": "1.37.2",
+        "@babel/eslint-parser": "^7.15.0",
-        "vite": "2.4.4"
+        "@types/bootstrap": "^5.1.2",
+        "@vitejs/plugin-legacy": "^1.5.2",
+        "@vitejs/plugin-vue": "^1.6.0",
+        "@vue/compiler-sfc": "^3.2.6",
+        "core-js": "^3.17.0",
+        "dns2": "^2.0.1",
+        "eslint": "^7.32.0",
+        "eslint-plugin-vue": "^7.17.0",
+        "sass": "^1.38.2",
+        "stylelint": "^13.13.1",
+        "stylelint-config-standard": "^22.0.0",
+        "typescript": "^4.4.2",
+        "vite": "^2.5.3"
     },
     "release-it": {
         "git": {

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/database.js

@@ -5,17 +5,15 @@ const { setSetting, setting } = require("./util-server");
 class Database {
 
     static templatePath = "./db/kuma.db"
-    static path = "./data/kuma.db";
+    static dataDir;
-    static latestVersion = 6;
+    static path;
+    static latestVersion = 8;
     static noReject = true;
     static sqliteInstance = null;
 
     static async connect() {
         const acquireConnectionTimeout = 120 * 1000;
 
-        R.useBetterSQLite3 = true;
-        R.betterSQLite3Options.timeout = acquireConnectionTimeout;
-
         R.setup("sqlite", {
             filename: Database.path,
             useNullAsDefault: true,
@@ -59,7 +57,7 @@ class Database {
             console.info("Database patch is needed")
 
             console.info("Backup the db")
-            const backupPath = "./data/kuma.db.bak" + version;
+            const backupPath = this.dataDir + "kuma.db.bak" + version;
             fs.copyFileSync(Database.path, backupPath);
 
             const shmPath = Database.path + "-shm";
@@ -124,11 +122,8 @@ class Database {
                 return statement !== "";
             })
 
-        // Use better-sqlite3 to run, prevent "This statement does not return data. Use run() instead"
-        const db = await this.getBetterSQLite3Database();
-
         for (let statement of statements) {
-            db.prepare(statement).run();
+            await R.exec(statement);
         }
     }
 

server/model/monitor.js

@@ -7,7 +7,7 @@ dayjs.extend(timezone)
 const axios = require("axios");
 const { Prometheus } = require("../prometheus");
 const { debug, UP, DOWN, PENDING, flipStatus, TimeLogger } = require("../../src/util");
-const { tcping, ping, checkCertificate, checkStatusCode } = require("../util-server");
+const { tcping, ping, dnsResolve, checkCertificate, checkStatusCode, getTotalClientInRoom } = require("../util-server");
 const { R } = require("redbean-node");
 const { BeanModel } = require("redbean-node/dist/bean-model");
 const { Notification } = require("../notification")
@@ -48,6 +48,9 @@ class Monitor extends BeanModel {
             upsideDown: this.isUpsideDown(),
             maxredirects: this.maxredirects,
             accepted_statuscodes: this.getAcceptedStatuscodes(),
+            dns_resolve_type: this.dns_resolve_type,
+            dns_resolve_server: this.dns_resolve_server,
+            dns_last_result: this.dns_last_result,
             notificationIDList,
         };
     }
@@ -174,6 +177,46 @@ class Monitor extends BeanModel {
                     bean.ping = await ping(this.hostname);
                     bean.msg = ""
                     bean.status = UP;
+                } else if (this.type === "dns") {
+                    let startTime = dayjs().valueOf();
+                    let dnsMessage = "";
+
+                    let dnsRes = await dnsResolve(this.hostname, this.dns_resolve_server, this.dns_resolve_type);
+                    bean.ping = dayjs().valueOf() - startTime;
+
+                    if (this.dns_resolve_type == "A" || this.dns_resolve_type == "AAAA" || this.dns_resolve_type == "TXT") {
+                        dnsMessage += "Records: ";
+                        dnsMessage += dnsRes.join(" | ");
+                    } else if (this.dns_resolve_type == "CNAME" || this.dns_resolve_type == "PTR") {
+                        dnsMessage = dnsRes[0];
+                    } else if (this.dns_resolve_type == "CAA") {
+                        dnsMessage = dnsRes[0].issue;
+                    } else if (this.dns_resolve_type == "MX") {
+                        dnsRes.forEach(record => {
+                            dnsMessage += `Hostname: ${record.exchange} - Priority: ${record.priority} | `;
+                        });
+                        dnsMessage = dnsMessage.slice(0, -2)
+                    } else if (this.dns_resolve_type == "NS") {
+                        dnsMessage += "Servers: ";
+                        dnsMessage += dnsRes.join(" | ");
+                    } else if (this.dns_resolve_type == "SOA") {
+                        dnsMessage += `NS-Name: ${dnsRes.nsname} | Hostmaster: ${dnsRes.hostmaster} | Serial: ${dnsRes.serial} | Refresh: ${dnsRes.refresh} | Retry: ${dnsRes.retry} | Expire: ${dnsRes.expire} | MinTTL: ${dnsRes.minttl}`;
+                    } else if (this.dns_resolve_type == "SRV") {
+                        dnsRes.forEach(record => {
+                            dnsMessage += `Name: ${record.name} | Port: ${record.port} | Priority: ${record.priority} | Weight: ${record.weight} | `;
+                        });
+                        dnsMessage = dnsMessage.slice(0, -2)
+                    }
+
+                    if (this.dnsLastResult !== dnsMessage) {
+                        R.exec("UPDATE `monitor` SET dns_last_result = ? WHERE id = ? ", [
+                            dnsMessage,
+                            this.id
+                        ]);
+                    }
+
+                    bean.msg = dnsMessage;
+                    bean.status = UP;
                 }
 
                 if (this.isUpsideDown()) {
@@ -310,10 +353,16 @@ class Monitor extends BeanModel {
     }
 
     static async sendStats(io, monitorID, userID) {
+        const hasClients = getTotalClientInRoom(io, userID) > 0;
+
+        if (hasClients) {
             await Monitor.sendAvgPing(24, io, monitorID, userID);
             await Monitor.sendUptime(24, io, monitorID, userID);
             await Monitor.sendUptime(24 * 30, io, monitorID, userID);
             await Monitor.sendCertInfo(io, monitorID, userID);
+        } else {
+            debug("No clients in the room, no need to send stats");
+        }
     }
 
     /**

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 {
@@ -95,12 +97,25 @@ class Notification {
                     await axios.post(notification.discordWebhookUrl, discordtestdata)
                     return okMsg;
                 }
+
+                let url;
+
+                if (monitorJSON["type"] === "port") {
+                    url = monitorJSON["hostname"];
+                    if (monitorJSON["port"]) {
+                        url += ":" + monitorJSON["port"];
+                    }
+
+                } else {
+                    url = monitorJSON["url"];
+                }
+
                 // 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: [{
-                            title: "❌ One of your services went down. ❌",
+                            title: "❌ Your service " + monitorJSON["name"] + " went down. ❌",
                             color: 16711680,
                             timestamp: heartbeatJSON["time"],
                             fields: [
@@ -110,7 +125,7 @@ class Notification {
                                 },
                                 {
                                     name: "Service URL",
-                                    value: monitorJSON["url"],
+                                    value: url,
                                 },
                                 {
                                     name: "Time (UTC)",
@@ -126,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: [{
@@ -140,7 +155,7 @@ class Notification {
                                 },
                                 {
                                     name: "Service URL",
-                                    value: "[Visit Service](" + monitorJSON["url"] + ")",
+                                    value: url.startsWith("http") ? "[Visit Service](" + url + ")" : url,
                                 },
                                 {
                                     name: "Time (UTC)",
@@ -279,6 +294,150 @@ class Notification {
                 throwGeneralAxiosError(error)
             }
 
+        } else if (notification.type === "rocket.chat") {
+            try {
+                if (heartbeatJSON == null) {
+                    let data = {
+                        "text": "Uptime Kuma Rocket.chat testing successful.",
+                        "channel": notification.rocketchannel,
+                        "username": notification.rocketusername,
+                        "icon_emoji": notification.rocketiconemo,
+                    }
+                    await axios.post(notification.rocketwebhookURL, data)
+                    return okMsg;
+                }
+
+                const time = heartbeatJSON["time"];
+                let data = {
+                    "text": "Uptime Kuma Alert",
+                    "channel": notification.rocketchannel,
+                    "username": notification.rocketusername,
+                    "icon_emoji": notification.rocketiconemo,
+                    "attachments": [
+                        {
+                            "title": "Uptime Kuma Alert *Time (UTC)*\n" + time,
+                            "title_link": notification.rocketbutton,
+                            "text": "*Message*\n" + msg,
+                            "color": "#32cd32"
+                        }
+                    ]
+                }
+                await axios.post(notification.rocketwebhookURL, data)
+                return okMsg;
+            } catch (error) {
+                throwGeneralAxiosError(error)
+            }
+
+        } else if (notification.type === "mattermost") {
+            try {
+                const mattermostUserName = notification.mattermostusername || "Uptime Kuma";
+                // If heartbeatJSON is null, assume we're testing.
+                if (heartbeatJSON == null) {
+                    let mattermostTestData = {
+                        username: mattermostUserName,
+                        text: msg,
+                    }
+                    await axios.post(notification.mattermostWebhookUrl, mattermostTestData)
+                    return okMsg;
+                }
+
+                const mattermostChannel = notification.mattermostchannel;
+                const mattermostIconEmoji = notification.mattermosticonemo;
+                const mattermostIconUrl = notification.mattermosticonurl;
+
+                if (heartbeatJSON["status"] == DOWN) {
+                    let mattermostdowndata = {
+                        username: mattermostUserName,
+                        text: "Uptime Kuma Alert",
+                        channel: mattermostChannel,
+                        icon_emoji: mattermostIconEmoji,
+                        icon_url: mattermostIconUrl,
+                        attachments: [
+                            {
+                                fallback:
+                                    "Your " +
+                                    monitorJSON["name"] +
+                                    " service went down.",
+                                color: "#FF0000",
+                                title:
+                                    "❌ " +
+                                    monitorJSON["name"] +
+                                    " service went down. ❌",
+                                title_link: monitorJSON["url"],
+                                fields: [
+                                    {
+                                        short: true,
+                                        title: "Service Name",
+                                        value: monitorJSON["name"],
+                                    },
+                                    {
+                                        short: true,
+                                        title: "Time (UTC)",
+                                        value: heartbeatJSON["time"],
+                                    },
+                                    {
+                                        short: false,
+                                        title: "Error",
+                                        value: heartbeatJSON["msg"],
+                                    },
+                                ],
+                            },
+                        ],
+                    };
+                    await axios.post(
+                        notification.mattermostWebhookUrl,
+                        mattermostdowndata
+                    );
+                    return okMsg;
+                } else if (heartbeatJSON["status"] == UP) {
+                    let mattermostupdata = {
+                        username: mattermostUserName,
+                        text: "Uptime Kuma Alert",
+                        channel: mattermostChannel,
+                        icon_emoji: mattermostIconEmoji,
+                        icon_url: mattermostIconUrl,
+                        attachments: [
+                            {
+                                fallback:
+                                    "Your " +
+                                    monitorJSON["name"] +
+                                    " service went up!",
+                                color: "#32CD32",
+                                title:
+                                    "✅ " +
+                                    monitorJSON["name"] +
+                                    " service went up! ✅",
+                                title_link: monitorJSON["url"],
+                                fields: [
+                                    {
+                                        short: true,
+                                        title: "Service Name",
+                                        value: monitorJSON["name"],
+                                    },
+                                    {
+                                        short: true,
+                                        title: "Time (UTC)",
+                                        value: heartbeatJSON["time"],
+                                    },
+                                    {
+                                        short: false,
+                                        title: "Ping",
+                                        value: heartbeatJSON["ping"] + "ms",
+                                    },
+                                ],
+                            },
+                        ],
+                    };
+                    await axios.post(
+                        notification.mattermostWebhookUrl,
+                        mattermostupdata
+                    );
+                    return okMsg;
+                }
+            } catch (error) {
+                throwGeneralAxiosError(error);
+            }
+
         } else if (notification.type === "pushover") {
             let pushoverlink = "https://api.pushover.net/1/messages.json"
             try {
@@ -328,19 +487,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;
@@ -366,18 +525,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)
                 }
@@ -405,7 +564,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": [
@@ -416,7 +575,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": [
@@ -473,7 +632,7 @@ class Notification {
         await R.trash(bean)
     }
 
-    static async smtp(notification, msg) {
+    static async smtp(notification, msg, heartbeatJSON = null) {
 
         const config = {
             host: notification.smtpHost,
@@ -491,12 +650,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/password-hash.js

@@ -1,5 +1,5 @@
 const passwordHashOld = require("password-hash");
-const bcrypt = require("bcrypt");
+const bcrypt = require("bcryptjs");
 const saltRounds = 10;
 
 exports.generate = function (password) {

server/ping-lite.js

@@ -1,14 +1,13 @@
 // https://github.com/ben-bradley/ping-lite/blob/master/ping-lite.js
 // Fixed on Windows
 const net = require("net");
-const spawn = require("child_process").spawn,
+const spawn = require("child_process").spawn;
-    events = require("events"),
+const events = require("events");
-    fs = require("fs"),
+const fs = require("fs");
-    WIN = /^win/.test(process.platform),
+const WIN = /^win/.test(process.platform);
-    LIN = /^linux/.test(process.platform),
+const LIN = /^linux/.test(process.platform);
-    MAC = /^darwin/.test(process.platform);
+const MAC = /^darwin/.test(process.platform);
-    FBSD = /^freebsd/.test(process.platform);
+const FBSD = /^freebsd/.test(process.platform);
-const { debug } = require("../src/util");
 
 module.exports = Ping;
 
@@ -22,15 +21,17 @@ function Ping(host, options) {
 
     events.EventEmitter.call(this);
 
+    const timeout = 10;
+
     if (WIN) {
         this._bin = "c:/windows/system32/ping.exe";
-        this._args = (options.args) ? options.args : [ "-n", "1", "-w", "5000", host ];
+        this._args = (options.args) ? options.args : [ "-n", "1", "-w", timeout * 1000, host ];
         this._regmatch = /[><=]([0-9.]+?)ms/;
 
     } else if (LIN) {
         this._bin = "/bin/ping";
 
-        const defaultArgs = [ "-n", "-w", "2", "-c", "1", host ];
+        const defaultArgs = [ "-n", "-w", timeout, "-c", "1", host ];
 
         if (net.isIPv6(host) || options.ipv6) {
             defaultArgs.unshift("-6");
@@ -47,13 +48,13 @@ function Ping(host, options) {
             this._bin = "/sbin/ping";
         }
 
-        this._args = (options.args) ? options.args : [ "-n", "-t", "2", "-c", "1", host ];
+        this._args = (options.args) ? options.args : [ "-n", "-t", timeout, "-c", "1", host ];
         this._regmatch = /=([0-9.]+?) ms/;
 
     } else if (FBSD) {
         this._bin = "/sbin/ping";
 
-        const defaultArgs = [ "-n", "-t", "2", "-c", "1", host ];
+        const defaultArgs = [ "-n", "-t", timeout, "-c", "1", host ];
 
         if (net.isIPv6(host) || options.ipv6) {
             defaultArgs.unshift("-6");
@@ -88,7 +89,9 @@ Ping.prototype.send = function (callback) {
         return self.emit("result", ms);
     };
 
-    let _ended, _exited, _errored;
+    let _ended;
+    let _exited;
+    let _errored;
 
     this._ping = spawn(this._bin, this._args); // spawn the binary
 
@@ -120,9 +123,9 @@ Ping.prototype.send = function (callback) {
     });
 
     function onEnd() {
-        let stdout = this.stdout._stdout,
+        let stdout = this.stdout._stdout;
-            stderr = this.stderr._stderr,
+        let stderr = this.stderr._stderr;
-            ms;
+        let ms;
 
         if (stderr) {
             return callback(new Error(stderr));

server/server.js

@@ -6,6 +6,7 @@ const { sleep, debug, TimeLogger, getRandomInt } = require("../src/util");
 console.log("Importing Node libraries")
 const fs = require("fs");
 const http = require("http");
+const https = require("https");
 
 console.log("Importing 3rd-party libraries")
 debug("Importing express");
@@ -45,11 +46,48 @@ console.info("Version: " + checkVersion.version);
 const hostname = process.env.HOST || args.host;
 const port = parseInt(process.env.PORT || args.port || 3001);
 
+// SSL
+const sslKey = process.env.SSL_KEY || args["ssl-key"] || undefined;
+const sslCert = process.env.SSL_CERT || args["ssl-cert"] || undefined;
+
+// Demo Mode?
+const demoMode = args["demo"] || false;
+
+if (demoMode) {
+    console.log("==== Demo Mode ====");
+}
+
+// Data Directory (must be end with "/")
+Database.dataDir = process.env.DATA_DIR || args["data-dir"] || "./data/";
+Database.path = Database.dataDir + "kuma.db";
+if (! fs.existsSync(Database.dataDir)) {
+    fs.mkdirSync(Database.dataDir, { recursive: true });
+}
+console.log(`Data Dir: ${Database.dataDir}`);
+
 console.log("Creating express and socket.io instance")
 const app = express();
-const server = http.createServer(app);
+
+let server;
+
+if (sslKey && sslCert) {
+    console.log("Server Type: HTTPS");
+    server = https.createServer({
+        key: fs.readFileSync(sslKey),
+        cert: fs.readFileSync(sslCert)
+    }, app);
+} else {
+    console.log("Server Type: HTTP");
+    server = http.createServer(app);
+}
+
 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
@@ -291,6 +329,8 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
                 bean.upsideDown = monitor.upsideDown;
                 bean.maxredirects = monitor.maxredirects;
                 bean.accepted_statuscodes_json = JSON.stringify(monitor.accepted_statuscodes);
+                bean.dns_resolve_type = monitor.dns_resolve_type;
+                bean.dns_resolve_server = monitor.dns_resolve_server;
 
                 await R.store(bean)
 
@@ -541,6 +581,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")
 
         // ***************************
@@ -609,25 +719,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)
@@ -762,48 +853,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);

server/util-server.js

@@ -4,6 +4,7 @@ const { R } = require("redbean-node");
 const { debug } = require("../src/util");
 const passwordHash = require("./password-hash");
 const dayjs = require("dayjs");
+const { Resolver } = require("dns");
 
 /**
  * Init or reset JWT secret
@@ -76,6 +77,30 @@ exports.pingAsync = function (hostname, ipv6 = false) {
     });
 }
 
+exports.dnsResolve = function (hostname, resolver_server, rrtype) {
+    const resolver = new Resolver();
+    resolver.setServers([resolver_server]);
+    return new Promise((resolve, reject) => {
+        if (rrtype == "PTR") {
+            resolver.reverse(hostname, (err, records) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(records);
+                }
+            });
+        } else {
+            resolver.resolve(hostname, rrtype, (err, records) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(records);
+                }
+            });
+        }
+    })
+}
+
 exports.setting = async function (key) {
     let value = await R.getCell("SELECT `value` FROM setting WHERE `key` = ? ", [
         key,
@@ -223,3 +248,26 @@ exports.checkStatusCode = function (status, accepted_codes) {
 
     return false;
 }
+
+exports.getTotalClientInRoom = (io, roomName) => {
+
+    const sockets = io.sockets;
+
+    if (! sockets) {
+        return 0;
+    }
+
+    const adapter = sockets.adapter;
+
+    if (! adapter) {
+        return 0;
+    }
+
+    const room = adapter.rooms.get(roomName);
+
+    if (room) {
+        return room.size;
+    } else {
+        return 0;
+    }
+}

src/assets/app.scss

@@ -1,46 +1,52 @@
 @import "vars.scss";
 @import "node_modules/bootstrap/scss/bootstrap";
 
-html,
+#app {
-body,
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
-input,
-.modal-content {
-    background: var(--page-background);
-    color: var(--main-font-color);
 }
-a,
+
-.table,
+h1 {
-.nav-link {
+    font-size: 32px;
-    color: var(--main-font-color);
 }
-.nav-pills .nav-link.active,
+
-.nav-pills .show > .nav-link {
+h2 {
-    color: #0a0a0a;
+    font-size: 26px;
 }
 
-.nav-link:hover,
+::-webkit-scrollbar {
-.nav-link:focus {
+    width: 10px;
-    color: #5cdd8b;
 }
 
-.form-control,
+::-webkit-scrollbar-thumb {
-.form-control:focus,
+    background: #ccc;
-.form-select,
+    border-radius: 20px;
-.form-select:focus {
-    color: var(--main-font-color);
-    background-color: var(--background-4);
 }
 
-#app {
+.modal {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    backdrop-filter: blur(3px);
-        segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif,
+}
-        apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
+
+.modal-content {
+    border-radius: 1rem;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+
+    .dark & {
+        box-shadow: 0 15px 70px rgb(0 0 0);
+        background-color: $dark-bg;
+    }
+}
+
+.VuePagination__count {
+    font-size: 13px;
+    text-align: center;
 }
 
 .shadow-box {
-    overflow: hidden;
+    //overflow: hidden;   // Forget why add this, but multiple select hide by this
     box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
     padding: 10px;
+    border-radius: 10px;
+
     &.big-padding {
         padding: 20px;
     }
@@ -52,26 +58,233 @@ a,
 }
 
 .btn-primary {
-    // color: white;
+    color: white;
-    color: #0a0a0a;
+
-
+    &:hover, &:active, &:focus, &.active {
-    &:hover,
+        color: white;
-    &:active,
-    &:focus,
-    &.active {
-        color: #0a0a0a;
         background-color: $highlight;
         border-color: $highlight;
     }
+
+    .dark & {
+        color: $dark-font-color2;
+    }
 }
 
-.modal-content {
+.btn-warning {
-    border-radius: 1rem;
+    color: white;
-    backdrop-filter: blur(3px);
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
+}
+
+.btn-info {
+    color: white;
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
 }
 
-@media (prefers-color-scheme: dark) {
+@media (max-width: 550px) {
-    a:hover {
+    .table-shadow-box {
-        color: #7ce8a4;
+        padding: 10px !important;
+
+        thead {
+            display: none;
+        }
+
+        tbody {
+            .shadow-box {
+                background-color: white;
+            }
+        }
+
+        tr {
+            margin-top: 0 !important;
+            padding: 4px 10px !important;
+            display: block;
+            margin-bottom: 6px;
+
+            td:first-child {
+                font-weight: bold;
+            }
+
+            td:nth-child(-n+3) {
+                text-align: center;
+            }
+
+            td:last-child {
+                text-align: left;
+            }
+
+            td {
+                border-bottom: 1px solid $dark-font-color;
+                display: block;
+                padding: 4px;
+
+                .badge {
+                    margin: auto;
+                    display: block;
+                    width: 30%;
                 }
+            }
+        }
+    }
+}
+
+// Dark Theme override here
+.dark {
+    background-color: #090c10;
+    color: $dark-font-color;
+
+    &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
+        background: $dark-border-color;
+    }
+
+    .shadow-box {
+        background-color: $dark-bg;
+    }
+
+    .form-check-input {
+        background-color: $dark-bg2;
+    }
+
+    .form-switch .form-check-input {
+        background-color: #131a21;
+    }
+
+    a,
+    .table,
+    .nav-link {
+        color: $dark-font-color;
+
+        &.btn-info {
+            color: white;
+        }
+    }
+
+    .form-control,
+    .form-control:focus,
+    .form-select,
+    .form-select:focus {
+        color: $dark-font-color;
+        background-color: $dark-bg2;
+    }
+
+    .form-control, .form-select {
+        border-color: $dark-border-color;
+    }
+
+    .table-hover > tbody > tr:hover {
+        --bs-table-accent-bg: #070a10;
+        color: $dark-font-color;
+    }
+
+    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+        color: $dark-font-color2;
+    }
+
+    .bg-primary {
+        color: $dark-font-color2;
+    }
+
+    .btn-secondary {
+        color: white;
+    }
+
+    .btn-warning {
+        color: $dark-font-color2;
+
+        &:hover, &:active, &:focus, &.active {
+            color: $dark-font-color2;
+        }
+    }
+
+    .btn-close {
+        box-shadow: none;
+        filter: invert(1);
+
+        &:hover {
+            opacity: 0.6;
+        }
+    }
+
+    .modal-header {
+        border-color: $dark-bg;
+    }
+
+    .modal-footer {
+        border-color: $dark-bg;
+    }
+
+    // Pagination
+    .page-item.disabled .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+    }
+
+    .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+
+    // Multiselect
+    .multiselect__tags {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__input, .multiselect__single {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+
+    .multiselect__content-wrapper {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect--above .multiselect__content-wrapper {
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__option--selected {
+        background-color: $dark-bg;
+    }
+
+    @media (max-width: 550px) {
+        .table-shadow-box {
+            tbody {
+                .shadow-box {
+                    background-color: $dark-bg2;
+
+                    td {
+                        border-bottom: 1px solid $dark-border-color;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*
+ * Transitions
+ */
+
+// page-change
+.slide-fade-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: translateY(50px);
+    opacity: 0;
 }

src/assets/vars.scss

@@ -1,32 +1,20 @@
 $primary: #5cdd8b;
 $danger: #dc3545;
-$warning: #dca235;
+$warning: #f8a306;
 $link-color: #111;
-$border-radius: .25rem;
+$border-radius: 50rem;
 
 $highlight: #7ce8a4;
 $highlight-white: #e7faec;
 
-:root {
+$dark-font-color: #b1b8c0;
-    color-scheme: light dark;
+$dark-font-color2: #020b05;
-    // 
+$dark-bg: #0d1117;
-    --page-background: #fafafa;
+$dark-bg2: #070a10;
-    --background-secondary: #d0d3d5;
+$dark-border-color: #1d2634;
-    --background-4: #d0d3d5;
-    --background-ternary: #8e8e8e;
-    --background-sidebar-active: #e4e4e4;
-    --background-navbar: #FFF;
-    --main-font-color: #212529;
-}
 
-@media (prefers-color-scheme: dark) {
+$easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
-    :root {
+$easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        --page-background: #0a0a0a;
+$easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);
-        --background-secondary: #656565;
+
-        --background-4: #313131;
+$dropdown-border-radius: 0.5rem;
-        --background-ternary: #a7a7a7;
-        --background-sidebar-active: #777777;
-        --background-navbar: #333333;
-        --main-font-color: #e4e4e4;
-    }
-}

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);
@@ -163,10 +178,6 @@ export default {
 
         &.empty {
             background-color: aliceblue;
-
-            .dark & {
-                background-color: #d0d3d5;
-            }
         }
 
         &.down {

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/MonitorList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow-box list mb-4">
+    <div class="shadow-box list mb-3" :class="{ scrollbar: scrollbar }">
         <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
             {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
         </div>
@@ -34,6 +34,11 @@ export default {
         Uptime,
         HeartbeatBar,
     },
+    props: {
+        scrollbar: {
+            type: Boolean,
+        },
+    },
     computed: {
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
@@ -83,8 +88,13 @@ export default {
 }
 
 .list {
-    height: auto;
+    &.scrollbar {
         min-height: calc(100vh - 240px);
+        max-height: calc(100vh - 30px);
+        overflow-y: auto;
+        position: sticky;
+        top: 10px;
+    }
 
     .item {
         display: block;

src/components/NotificationDialog.vue

@@ -20,12 +20,14 @@
                                 <option value="signal">Signal</option>
                                 <option value="gotify">Gotify</option>
                                 <option value="slack">Slack</option>
+                                <option value="rocket.chat">Rocket.chat</option>
                                 <option value="pushover">Pushover</option>
                                 <option value="pushy">Pushy</option>
                                 <option value="octopush">Octopush</option>
                                 <option value="lunasea">LunaSea</option>
                                 <option value="pushbullet">Pushbullet</option>
                                 <option value="line">Line Messenger</option>
+                                <option value="mattermost">Mattermost</option>
                             </select>
                         </div>
 
@@ -37,7 +39,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>
@@ -127,7 +129,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">
@@ -192,7 +194,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>
@@ -237,16 +239,79 @@
                             </div>
                         </template>
 
+                        <template v-if="notification.type === 'rocket.chat'">
+                            <div class="mb-3">
+                                <label for="rocket-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
+                                <input id="rocket-webhook-url" v-model="notification.rocketwebhookURL" type="text" class="form-control" required>
+                                <label for="rocket-username" class="form-label">Username</label>
+                                <input id="rocket-username" v-model="notification.rocketusername" type="text" class="form-control">
+                                <label for="rocket-iconemo" class="form-label">Icon Emoji</label>
+                                <input id="rocket-iconemo" v-model="notification.rocketiconemo" type="text" class="form-control">
+                                <label for="rocket-channel" class="form-label">Channel Name</label>
+                                <input id="rocket-channel-name" v-model="notification.rocketchannel" type="text" class="form-control">
+                                <label for="rocket-button-url" class="form-label">Uptime Kuma URL</label>
+                                <input id="rocket-button" v-model="notification.rocketbutton" type="text" class="form-control">
+                                <div class="form-text">
+                                    <span style="color: red;"><sup>*</sup></span>Required
+                                    <p style="margin-top: 8px;">
+                                        More info about webhooks on: <a href="https://docs.rocket.chat/guides/administration/administration/integrations" target="_blank">https://api.slack.com/messaging/webhooks</a>
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        Enter the channel name on Rocket.chat Channel Name field if you want to bypass the webhook channel. Ex: #other-channel
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </template>
+
+                        <template v-if="notification.type === 'mattermost'">
+                            <div class="mb-3">
+                                <label for="mattermost-webhook-url" class="form-label">Webhook URL<span style="color:red;"><sup>*</sup></span></label>
+                                <input id="mattermost-webhook-url" v-model="notification.mattermostWebhookUrl" type="text" class="form-control" required>
+                                <label for="mattermost-username" class="form-label">Username</label>
+                                <input id="mattermost-username" v-model="notification.mattermostusername" type="text" class="form-control">
+                                <label for="mattermost-iconurl" class="form-label">Icon URL</label>
+                                <input id="mattermost-iconurl" v-model="notification.mattermosticonurl" type="text" class="form-control">
+                                <label for="mattermost-iconemo" class="form-label">Icon Emoji</label>
+                                <input id="mattermost-iconemo" v-model="notification.mattermosticonemo" type="text" class="form-control">
+                                <label for="mattermost-channel" class="form-label">Channel Name</label>
+                                <input id="mattermost-channel-name" v-model="notification.mattermostchannel" type="text" class="form-control">
+                                <div class="form-text">
+                                    <span style="color:red;"><sup>*</sup></span>Required
+                                    <p style="margin-top: 8px;">
+                                        More info about webhooks on: <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        You can override the default channel that webhook posts to by entering the channel name into "Channel Name" field. This needs to be enabled in Mattermost webhook settings. Ex: #other-channel
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        You can provide a link to a picture in "Icon URL" to override the default profile picture. Will not be used if Icon Emoji is set.
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a> Note: emoji takes preference over Icon URL.
+                                    </p>
+                                </div>
+                            </div>
+                        </template>
+
                         <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;">
@@ -257,7 +322,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>
@@ -288,9 +353,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>
@@ -356,7 +421,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;">
@@ -367,7 +432,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>
@@ -400,8 +465,8 @@
         </div>
     </form>
 
-    <Confirm ref="confirmDelete" btn-style="btn-danger" @yes="deleteNotification">
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteNotification">
-        Are you sure want to delete this notification for all monitors?
+        {{ $t("deleteNotificationMsg") }}
     </Confirm>
 </template>
 
@@ -411,11 +476,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/components/PingChart.vue

@@ -24,6 +24,7 @@ export default {
     },
     data() {
         return {
+            // Configurable filtering on top of the returned data
             chartPeriodHrs: 6,
         };
     },
@@ -55,11 +56,10 @@ export default {
 
                 elements: {
                     point: {
+                        // Hide points on chart unless mouse-over
                         radius: 0,
+                        hitRadius: 100,
                     },
-                    bar: {
-                        barThickness: "flex",
-                    }
                 },
                 scales: {
                     x: {
@@ -77,15 +77,15 @@ export default {
                             maxRotation: 0,
                             autoSkipPadding: 30,
                         },
-                        bounds: "ticks",
                         grid: {
                             color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
+                            offset: false,
                         },
                     },
                     y: {
                         title: {
                             display: true,
-                            text: "Resp. Time (ms)",
+                            text: this.$t("respTime"),
                         },
                         offset: false,
                         grid: {
@@ -109,8 +109,11 @@ export default {
                         mode: "nearest",
                         intersect: false,
                         padding: 10,
+                        backgroundColor: this.$root.theme === "light" ? "rgba(212,232,222,1.0)" : "rgba(32,42,38,1.0)",
+                        bodyColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
+                        titleColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                         filter: function (tooltipItem) {
-                            return tooltipItem.datasetIndex === 0;
+                            return tooltipItem.datasetIndex === 0;  // Hide tooltip on Bar Chart
                         },
                         callbacks: {
                             label: (context) => {
@@ -125,32 +128,29 @@ export default {
             }
         },
         chartData() {
-            let ping_data = [];
+            let pingData = [];  // Ping Data for Line Chart, y-axis contains ping time
-            let down_data = [];
+            let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
             if (this.monitorId in this.$root.heartbeatList) {
-                ping_data = this.$root.heartbeatList[this.monitorId]
+                this.$root.heartbeatList[this.monitorId]
                     .filter(
                         (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
                     .map((beat) => {
-                        return {
+                        const x = this.$root.datetime(beat.time);
-                            x: dayjs.utc(beat.time).tz(this.$root.timezone).format("YYYY-MM-DD HH:mm:ss"),
+                        pingData.push({
+                            x,
                             y: beat.ping,
-                        };
                         });
-                down_data = this.$root.heartbeatList[this.monitorId]
+                        downData.push({
-                    .filter(
+                            x,
-                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
-                    .map((beat) => {
-                        return {
-                            x: dayjs.utc(beat.time).tz(this.$root.timezone).format("YYYY-MM-DD HH:mm:ss"),
                             y: beat.status === 0 ? 1 : 0,
-                        };
+                        })
                     });
             }
             return {
                 datasets: [
                     {
-                        data: ping_data,
+                        // Line Chart
+                        data: pingData,
                         fill: "origin",
                         tension: 0.2,
                         borderColor: "#5CDD8B",
@@ -158,11 +158,15 @@ export default {
                         yAxisID: "y",
                     },
                     {
+                        // Bar Chart
                         type: "bar",
-                        data: down_data,
+                        data: downData,
                         borderColor: "#00000000",
                         backgroundColor: "#DC354568",
                         yAxisID: "y1",
+                        barThickness: "flex",
+                        barPercentage: 1,
+                        categoryPercentage: 1,
                     },
                 ],
             };

src/components/Uptime.vue

@@ -22,7 +22,7 @@ export default {
                 return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
             }
 
-            return "N/A"
+            return this.$t("notAvailableShort")
         },
 
         color() {

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/README.md

@@ -0,0 +1,18 @@
+# How to translate
+
+1. Fork this repo.
+2. Create a language file. (e.g. `zh-TW.js`) The filename must be ISO language code: http://www.lingoes.net/en/translator/langcode.htm
+3. `npm run update-language-files --base-lang=de-DE`
+6. Your language file should be filled in. You can translate now.
+7. Translate `src/pages/Settings.vue` (search for a `Confirm` component with `rel="confirmDisableAuth"`).
+8. Import your language file in `src/main.js` and add it to `languageList` constant.
+9. Make a [pull request](https://github.com/louislam/uptime-kuma/pulls) when you have done.
+
+
+
+One of good examples:
+https://github.com/louislam/uptime-kuma/pull/316/files
+
+
+If you do not have programming skills, let me know in [Issues section](https://github.com/louislam/uptime-kuma/issues). I will assist you. 😏
+

src/languages/da-DK.js

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Danish",
+    Settings: "Indstillinger",
+    Dashboard: "Dashboard",
+    "New Update": "Opdatering tilgængelig",
+    Language: "Sprog",
+    Appearance: "Udseende",
+    Theme: "Tema",
+    General: "Generelt",
+    Version: "Version",
+    "Check Update On GitHub": "Tjek efter opdateringer på Github",
+    List: "Liste",
+    Add: "Tilføj",
+    "Add New Monitor": "Tilføj ny Overvåger",
+    "Quick Stats": "Oversigt",
+    Up: "Aktiv",
+    Down: "Inaktiv",
+    Pending: "Afventer",
+    Unknown: "Ukendt",
+    Pause: "Pause",
+    pauseDashboardHome: "Pauset",
+    Name: "Navn",
+    Status: "Status",
+    DateTime: "Dato / Tid",
+    Message: "Beskeder",
+    "No important events": "Inden vigtige begivenheder",
+    Resume: "Fortsæt",
+    Edit: "Rediger",
+    Delete: "Slet",
+    Current: "Aktuelt",
+    Uptime: "Oppetid",
+    "Cert Exp.": "Certifikatets udløb",
+    days: "Dage",
+    day: "Dag",
+    "-day": "-Dage",
+    hour: "Timer",
+    "-hour": "-Timer",
+    checkEverySecond: "Tjek hvert {0} sekund",
+    "Avg.": "Gennemsnit",
+    Response: " Respons",
+    Ping: "Ping",
+    "Monitor Type": "Overvåger Type",
+    Keyword: "Nøgleord",
+    "Friendly Name": "Visningsnavn",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Port",
+    "Heartbeat Interval": "Taktinterval",
+    Retries: "Gentagelser",
+    retriesDescription: "Maksimalt antal gentagelser, før tjenesten markeres som inaktiv og sender en meddelelse.",
+    Advanced: "Avanceret",
+    ignoreTLSError: "Ignorere TLS/SSL web fejl",
+    "Upside Down Mode": "Omvendt tilstand",
+    upsideDownModeDescription: "Håndter tilstanden omvendt. Hvis tjenesten er tilgængelig, vises den som inaktiv.",
+    "Max. Redirects": "Maks. Omdirigeringer",
+    maxRedirectDescription: "Maksimalt antal omdirigeringer, der skal følges. Indstil til 0 for at deaktivere omdirigeringer.",
+    "Accepted Status Codes": "Tilladte HTTP-Statuskoder",
+    acceptedStatusCodesDescription: "Vælg de statuskoder, der stadig skal vurderes som vellykkede.",
+    Save: "Gem",
+    Notifications: "Underretninger",
+    "Not available, please setup.": "Ikke tilgængelige, opsæt venligst.",
+    "Setup Notification": "Opsæt underretninger",
+    Light: "Lys",
+    Dark: "Mørk",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Tema - Tidslinje",
+    Normal: "Normal",
+    Bottom: "Bunden",
+    None: "Ingen",
+    Timezone: "Tidszone",
+    "Search Engine Visibility": "Søgemaskine synlighed",
+    "Allow indexing": "Tillad indeksering",
+    "Discourage search engines from indexing site": "Frabed søgemaskiner at indeksere webstedet",
+    "Change Password": "Ændre adgangskode",
+    "Current Password": "Nuværende adgangskode",
+    "New Password": "Ny adgangskode",
+    "Repeat New Password": "Gentag den nye adgangskode",
+    passwordNotMatchMsg: "Adgangskoderne er ikke ens.",
+    "Update Password": "Opdater adgangskode",
+    "Disable Auth": "Deaktiver autentificering",
+    "Enable Auth": "Aktiver autentificering",
+    Logout: "Log ud",
+    notificationDescription: "Tildel underretninger til Overvåger(e), så denne funktion træder i kraft.",
+    Leave: "Verlassen",
+    "I understand, please disable": "Jeg er indforstået, deaktiver venligst",
+    Confirm: "Bekræft",
+    Yes: "Ja",
+    No: "Nej",
+    Username: "Brugernavn",
+    Password: "Adgangskode",
+    "Remember me": "Husk mig",
+    Login: "Log ind",
+    "No Monitors, please": "Ingen Overvågere",
+    "add one": "tilføj en",
+    "Notification Type": "Underretningstype",
+    Email: "E-Mail",
+    Test: "Test",
+    "Certificate Info": "Certifikatoplysninger",
+    keywordDescription: "Søg efter et søgeord i almindelig HTML- eller JSON -output. Bemærk, at der skelnes mellem store og små bogstaver.",
+    deleteMonitorMsg: "Er du sikker på, at du vil slette overvågeren?",
+    deleteNotificationMsg: "Er du sikker på, at du vil slette denne underretning for alle overvågere? ",
+    resoverserverDescription: "Cloudflare er standardserveren, den kan til enhver tid ændres.",
+    "Resolver Server": "Navne-server",
+    rrtypeDescription: "Vælg den type RR, du vil overvåge.",
+    "Last Result": "Seneste resultat",
+    pauseMonitorMsg: "Er du sikker på, at du vil pause Overvågeren?",
+    "Create your admin account": "Opret din administratorkonto",
+    "Repeat Password": "Gentag adgangskoden",
+    "Resource Record Type": "Resource Record Type",
+    respTime: "Resp. Time (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "German",
+    Settings: "Einstellungen",
+    Dashboard: "Dashboard",
+    "New Update": "Update Verfügbar",
+    Language: "Sprache",
+    Appearance: "Erscheinung",
+    Theme: "Thema",
+    General: "Allgemein",
+    Version: "Version",
+    "Check Update On GitHub": "Überprüfen von Updates auf Github",
+    List: "Liste",
+    Add: "Hinzufügen",
+    "Add New Monitor": "Neuer Monitor",
+    "Quick Stats": "Übersicht",
+    Up: "Aktiv",
+    Down: "Inaktiv",
+    Pending: "Ausstehend",
+    Unknown: "Unbekannt",
+    Pause: "Pausieren",
+    pauseDashboardHome: "Pausiert",
+    Name: "Name",
+    Status: "Status",
+    DateTime: "Datum / Uhrzeit",
+    Message: "Nachricht",
+    "No important events": "Keine wichtigen Ereignisse",
+    Resume: "Fortsetzen",
+    Edit: "Bearbeiten",
+    Delete: "Löschen",
+    Current: "Aktuell",
+    Uptime: "Verfügbarkeit",
+    "Cert Exp.": "Zertifikatsablauf",
+    days: "Tage",
+    day: "Tag",
+    "-day": "-Tage",
+    hour: "Stunde",
+    "-hour": "-Stunden",
+    checkEverySecond: "Überprüfe alle {0} Sekunden",
+    "Avg.": "Durchschn. ",
+    Response: " Antwortzeit",
+    Ping: "Ping",
+    "Monitor Type": "Monitor Typ",
+    Keyword: "Schlüsselwort",
+    "Friendly Name": "Anzeigename",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Port",
+    "Heartbeat Interval": "Taktintervall",
+    Retries: "Wiederholungen",
+    retriesDescription: "Maximale Anzahl von Wiederholungen, bevor der Dienst als inaktiv markiert und eine Benachrichtigung gesendet wird.",
+    Advanced: "Erweitert",
+    ignoreTLSError: "Ignoriere TLS/SSL Fehler von Webseiten",
+    "Upside Down Mode": "Umgedrehter Modus",
+    upsideDownModeDescription: "Drehe den Modus um, ist der Dienst erreichbar, wird er als Inaktiv angezeigt.",
+    "Max. Redirects": "Max. Weiterleitungen",
+    maxRedirectDescription: "Maximale Anzahl von Weiterleitungen, denen gefolgt werden soll. Setzte auf 0, um Weiterleitungen zu deaktivieren.",
+    "Accepted Status Codes": "Erlaubte HTTP-Statuscodes",
+    acceptedStatusCodesDescription: "Wähle die Statuscodes aus, welche trotzdem als erfolgreich gewertet werden sollen.",
+    Save: "Speichern",
+    Notifications: "Benachrichtigungen",
+    "Not available, please setup.": "Keine verfügbar, bitte einrichten.",
+    "Setup Notification": "Benachrichtigung einrichten",
+    Light: "Hell",
+    Dark: "Dunkel",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Thema - Taktleiste",
+    Normal: "Normal",
+    Bottom: "Unten",
+    None: "Keine",
+    Timezone: "Zeitzone",
+    "Search Engine Visibility": "Suchmaschinensichtbarkeit",
+    "Allow indexing": "Indizierung zulassen",
+    "Discourage search engines from indexing site": "Halte Suchmaschinen von der Indexierung der Seite ab",
+    "Change Password": "Passwort ändern",
+    "Current Password": "Dezeitiges Passwort",
+    "New Password": "Neues Passwort",
+    "Repeat New Password": "Wiederhole neues Passwort",
+    passwordNotMatchMsg: "Passwörter stimmen nicht überein. ",
+    "Update Password": "Ändere Passwort",
+    "Disable Auth": "Authentifizierung deaktivieren",
+    "Enable Auth": "Authentifizierung aktivieren",
+    Logout: "Ausloggen",
+    notificationDescription: "Weise den Monitor(en) eine Benachrichtigung zu, damit diese Funktion greift.",
+    Leave: "Verlassen",
+    "I understand, please disable": "Ich verstehe, bitte deaktivieren",
+    Confirm: "Bestätige",
+    Yes: "Ja",
+    No: "Nein",
+    Username: "Benutzername",
+    Password: "Passwort",
+    "Remember me": "Passwort merken",
+    Login: "Einloggen",
+    "No Monitors, please": "Keine Monitore, bitte",
+    "add one": "hinzufügen",
+    "Notification Type": "Benachrichtigungs Dienst",
+    Email: "E-Mail",
+    Test: "Test",
+    "Certificate Info": "Zertifikatsinfo",
+    keywordDescription: "Suche nach einem Schlüsselwort in der HTML oder JSON Ausgabe. Bitte beachte, es wird in der Groß-/Kleinschreibung unterschieden.",
+    deleteMonitorMsg: "Bist du sicher das du den Monitor löschen möchtest?",
+    deleteNotificationMsg: "Möchtest du diese Benachrichtigung wirklich für alle Monitore löschen?",
+    resoverserverDescription: "Cloudflare ist als der Standardserver festgelegt, dieser kann jederzeit geändern werden.",
+    "Resolver Server": "Auflösungsserver",
+    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",
+    respTime: "Antw. Zeit (ms)",
+    notAvailableShort: "N/A",
+    Create: "Erstellen",
+}

src/languages/en.js

@@ -9,4 +9,111 @@ export default {
     acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
     passwordNotMatchMsg: "The repeat password does not match.",
     notificationDescription: "Please assign a notification to monitor(s) to get it to work.",
+    keywordDescription: "Search keyword in plain html or JSON response and it is case-sensitive",
+    pauseDashboardHome: "Pause",
+    deleteMonitorMsg: "Are you sure want to delete this monitor?",
+    deleteNotificationMsg: "Are you sure want to delete this notification for all monitors?",
+    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",
+    Language: "Language",
+    Appearance: "Appearance",
+    Theme: "Theme",
+    General: "General",
+    Version: "Version",
+    "Check Update On GitHub": "Check Update On GitHub",
+    List: "List",
+    Add: "Add",
+    "Add New Monitor": "Add New Monitor",
+    "Quick Stats": "Quick Stats",
+    Up: "Up",
+    Down: "Down",
+    Pending: "Pending",
+    Unknown: "Unknown",
+    Pause: "Pause",
+    Name: "Name",
+    Status: "Status",
+    DateTime: "DateTime",
+    Message: "Message",
+    "No important events": "No important events",
+    Resume: "Resume",
+    Edit: "Edit",
+    Delete: "Delete",
+    Current: "Current",
+    Uptime: "Uptime",
+    "Cert Exp.": "Cert Exp.",
+    days: "days",
+    day: "day",
+    "-day": "-day",
+    hour: "hour",
+    "-hour": "-hour",
+    Response: "Response",
+    Ping: "Ping",
+    "Monitor Type": "Monitor Type",
+    Keyword: "Keyword",
+    "Friendly Name": "Friendly Name",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Port",
+    "Heartbeat Interval": "Heartbeat Interval",
+    Retries: "Retries",
+    Advanced: "Advanced",
+    "Upside Down Mode": "Upside Down Mode",
+    "Max. Redirects": "Max. Redirects",
+    "Accepted Status Codes": "Accepted Status Codes",
+    Save: "Save",
+    Notifications: "Notifications",
+    "Not available, please setup.": "Not available, please setup.",
+    "Setup Notification": "Setup Notification",
+    Light: "Light",
+    Dark: "Dark",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Theme - Heartbeat Bar",
+    Normal: "Normal",
+    Bottom: "Bottom",
+    None: "None",
+    Timezone: "Timezone",
+    "Search Engine Visibility": "Search Engine Visibility",
+    "Allow indexing": "Allow indexing",
+    "Discourage search engines from indexing site": "Discourage search engines from indexing site",
+    "Change Password": "Change Password",
+    "Current Password": "Current Password",
+    "New Password": "New Password",
+    "Repeat New Password": "Repeat New Password",
+    "Update Password": "Update Password",
+    "Disable Auth": "Disable Auth",
+    "Enable Auth": "Enable Auth",
+    Logout: "Logout",
+    Leave: "Leave",
+    "I understand, please disable": "I understand, please disable",
+    Confirm: "Confirm",
+    Yes: "Yes",
+    No: "No",
+    Username: "Username",
+    Password: "Password",
+    "Remember me": "Remember me",
+    Login: "Login",
+    "No Monitors, please": "No Monitors, please",
+    "add one": "add one",
+    "Notification Type": "Notification Type",
+    Email: "Email",
+    Test: "Test",
+    "Certificate Info": "Certificate Info",
+    "Resolver Server": "Resolver Server",
+    "Resource Record Type": "Resource Record Type",
+    "Last Result": "Last Result",
+    "Create your admin account": "Create your admin account",
+    "Repeat Password": "Repeat Password",
+    respTime: "Resp. Time (ms)",
+    notAvailableShort: "N/A",
+    Create: "Create",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats"
 }

src/languages/es-ES.js

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Español",
+    checkEverySecond: "Comprobar cada {0} segundos.",
+    "Avg.": "Media. ",
+    retriesDescription: "Número máximo de intentos antes de que el servicio se marque como CAÍDO y una notificación sea enviada.",
+    ignoreTLSError: "Ignorar error TLS/SSL para sitios web HTTPS",
+    upsideDownModeDescription: "Invertir el estado. Si el servicio es alcanzable, está CAÍDO.",
+    maxRedirectDescription: "Número máximo de direcciones a seguir. Establecer a 0 para deshabilitar.",
+    acceptedStatusCodesDescription: "Seleccionar los códigos de estado que se consideran como respuesta exitosa.",
+    passwordNotMatchMsg: "La contraseña repetida no coincide.",
+    notificationDescription: "Por favor asigne una notificación a el/los monitor(es) para hacerlos funcional(es).",
+    keywordDescription: "Palabra clave en HTML plano o respuesta JSON y es sensible a mayúsculas",
+    pauseDashboardHome: "Pausar",
+    deleteMonitorMsg: "¿Seguro que quieres eliminar este monitor?",
+    deleteNotificationMsg: "¿Seguro que quieres eliminar esta notificación para todos los monitores?",
+    resoverserverDescription: "Cloudflare es el servidor por defecto, puedes cambiar el servidor de resolución en cualquier momento.",
+    rrtypeDescription: "Selecciona el tipo de registro que quieres monitorizar",
+    pauseMonitorMsg: "¿Seguro que quieres pausar?",
+    Settings: "Ajustes",
+    Dashboard: "Panel",
+    "New Update": "Vueva actualización",
+    Language: "Idioma",
+    Appearance: "Apariencia",
+    Theme: "Tema",
+    General: "General",
+    Version: "Versión",
+    "Check Update On GitHub": "Comprobar actualizaciones en GitHub",
+    List: "Lista",
+    Add: "Añadir",
+    "Add New Monitor": "Añadir nuevo monitor",
+    "Quick Stats": "Estadísticas rápidas",
+    Up: "Funcional",
+    Down: "Caído",
+    Pending: "Pendiente",
+    Unknown: "Desconociso",
+    Pause: "Pausa",
+    Name: "Nombre",
+    Status: "Estado",
+    DateTime: "Fecha y Hora",
+    Message: "Mensaje",
+    "No important events": "No hay eventos importantes",
+    Resume: "Reanudar",
+    Edit: "Editar",
+    Delete: "Eliminar",
+    Current: "Actual",
+    Uptime: "Tiempo activo",
+    "Cert Exp.": "Caducidad cert.",
+    days: "días",
+    day: "día",
+    "-day": "-día",
+    hour: "hora",
+    "-hour": "-hora",
+    Response: "Respuesta",
+    Ping: "Ping",
+    "Monitor Type": "Tipo de Monitor",
+    Keyword: "Palabra clave",
+    "Friendly Name": "Nombre sencillo",
+    URL: "URL",
+    Hostname: "Nombre del host",
+    Port: "Puerto",
+    "Heartbeat Interval": "Intervalo de latido",
+    Retries: "Reintentos",
+    Advanced: "Avanzado",
+    "Upside Down Mode": "Modo invertido",
+    "Max. Redirects": "Máx. redirecciones",
+    "Accepted Status Codes": "Códigos de estado aceptados",
+    Save: "Guardar",
+    Notifications: "Notificaciones",
+    "Not available, please setup.": "No disponible, por favor configurar.",
+    "Setup Notification": "Configurar notificación",
+    Light: "Claro",
+    Dark: "Oscuro",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Tema - Barra de intervalo de latido",
+    Normal: "Normal",
+    Bottom: "Abajo",
+    None: "Ninguno",
+    Timezone: "Zona horaria",
+    "Search Engine Visibility": "Visibilidad motor de búsqueda",
+    "Allow indexing": "Permitir indexación",
+    "Discourage search engines from indexing site": "Disuadir a los motores de búsqueda de indexar el sitio",
+    "Change Password": "Cambiar contraseña",
+    "Current Password": "Contraseña actual",
+    "New Password": "Nueva contraseña",
+    "Repeat New Password": "Repetir nueva contraseña",
+    "Update Password": "Actualizar contraseña",
+    "Disable Auth": "Deshabilitar Autenticación ",
+    "Enable Auth": "Habilitar Autenticación ",
+    Logout: "Cerrar sesión",
+    Leave: "Salir",
+    "I understand, please disable": "Lo comprendo, por favor deshabilitar",
+    Confirm: "Confirmar",
+    Yes: "Sí",
+    No: "No",
+    Username: "Usuario",
+    Password: "Contraseña",
+    "Remember me": "Recordarme",
+    Login: "Acceso",
+    "No Monitors, please": "Sin monitores, por favor",
+    "add one": "añade uno",
+    "Notification Type": "Tipo de notificación",
+    Email: "Email",
+    Test: "Test",
+    "Certificate Info": "Información del certificado ",
+    "Resolver Server": "Servidor de resolución",
+    "Resource Record Type": "Tipo de Registro",
+    "Last Result": "Último resultado",
+    "Create your admin account": "Crea tu cuenta de administrador",
+    "Repeat Password": "Repetir contraseña",
+    respTime: "Tiempo de resp. (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Français (France)",
+    Settings: "Paramètres",
+    Dashboard: "Tableau de bord",
+    "New Update": "Mise à jour disponible",
+    Language: "Langue",
+    Appearance: "Apparence",
+    Theme: "Thème",
+    General: "Général",
+    Version: "Version",
+    "Check Update On GitHub": "Consulter les mises à jour sur Github",
+    List: "Lister",
+    Add: "Ajouter",
+    "Add New Monitor": "Ajouter une nouvelle sonde",
+    "Quick Stats": "Résumé",
+    Up: "En ligne",
+    Down: "Hors ligne",
+    Pending: "En attente",
+    Unknown: "Inconnu",
+    Pause: "En Pause",
+    pauseDashboardHome: "Éléments mis en pause",
+    Name: "Nom",
+    Status: "État",
+    DateTime: "Heure",
+    Message: "Messages",
+    "No important events": "Pas d'évènements important",
+    Resume: "Reprendre",
+    Edit: "Modifier",
+    Delete: "Supprimer",
+    Current: "Actuellement",
+    Uptime: "Uptime",
+    "Cert Exp.": "Certificat expiré",
+    days: "Jours",
+    day: "Jour",
+    "-day": "Journée",
+    hour: "Heure",
+    "-hour": "Heures",
+    checkEverySecond: "Vérifier toutes les {0} secondes",
+    "Avg.": "Moyen",
+    Response: "Temps de réponse",
+    Ping: "Ping",
+    "Monitor Type": "Type de Sonde",
+    Keyword: "Mot-clé",
+    "Friendly Name": "Nom d'affichage",
+    URL: "URL",
+    Hostname: "Nom d'hôte",
+    Port: "Port",
+    "Heartbeat Interval": "Intervale de vérification",
+    Retries: "Essais",
+    retriesDescription: "Nombre d'essais avant que le service soit déclaré hors-ligne.",
+    Advanced: "Avancé",
+    ignoreTLSError: "Ignorer les erreurs liées au certificat SSL/TLS",
+    "Upside Down Mode": "Mode inversé",
+    upsideDownModeDescription: "Si le service est en ligne, il sera alors noté hors-ligne et vice-versa.",
+    "Max. Redirects": "Nombre maximum de redirections",
+    maxRedirectDescription: "Nombre maximal de redirections avant que le service soit noté hors-ligne.",
+    "Accepted Status Codes": "Codes HTTP",
+    acceptedStatusCodesDescription: "Codes HTTP considérés comme en ligne",
+    Save: "Sauvegarder",
+    Notifications: "Notifications",
+    "Not available, please setup.": "Pas de système de notification disponible, merci de le configurer",
+    "Setup Notification": "Créer une notification",
+    Light: "Clair",
+    Dark: "Sombre",
+    Auto: "Automatique",
+    "Theme - Heartbeat Bar": "Voir les services surveillés",
+    Normal: "Général",
+    Bottom: "En dessous",
+    None: "Rien",
+    Timezone: "Fuseau Horaire",
+    "Search Engine Visibility": "Visibilité par les moteurs de recherche",
+    "Allow indexing": "Autoriser l'indexation par des moteurs de recherche",
+    "Discourage search engines from indexing site": "Refuser l'indexation par des moteurs de recherche",
+    "Change Password": "Changer le mot de passe",
+    "Current Password": "Mot de passe actuel",
+    "New Password": "Nouveau mot de passe",
+    "Repeat New Password": "Répéter votre nouveau mot de passe",
+    passwordNotMatchMsg: "Les mots de passe ne correspondent pas",
+    "Update Password": "Mettre à jour le mot de passe",
+    "Disable Auth": "Désactiver l'authentification",
+    "Enable Auth": "Activer l'authentification",
+    Logout: "Se déconnecter",
+    notificationDescription: "Une fois ajoutée, vous devez l'activer manuellement dans les paramètres de vos hôtes.",
+    Leave: "Quitter",
+    "I understand, please disable": "J'ai compris, désactivez-le",
+    Confirm: "Confirmer",
+    Yes: "Oui",
+    No: "Non",
+    Username: "Nom d'utilisateur",
+    Password: "Mot de passe",
+    "Remember me": "Se souvenir de moi",
+    Login: "Se connecter",
+    "No Monitors, please": "Pas de sondes, veuillez ",
+    "add one": "en ajouter une.",
+    "Notification Type": "Type de notification",
+    Email: "Email",
+    Test: "Tester",
+    keywordDescription: "Le mot clé sera recherché dans la réponse HTML/JSON reçue du site internet.",
+    "Certificate Info": "Informations sur le certificat SSL",
+    deleteMonitorMsg: "Êtes-vous sûr de vouloir supprimer cette sonde ?",
+    deleteNotificationMsg: "Êtes-vous sûr de vouloir supprimer ce type de notifications ? Une fois désactivée, les services qui l'utilisent ne pourront plus envoyer de notifications.",
+    "Resolver Server": "Serveur DNS utilisé",
+    "Resource Record Type": "Type d'enregistrement DNS recherché",
+    resoverserverDescription: "Le DNS de cloudflare est utilisé par défaut, mais vous pouvez le changer si vous le souhaitez.",
+    rrtypeDescription: "Veuillez séléctionner un type d'enregistrement DNS",
+    pauseMonitorMsg: "Etes vous sur de vouloir mettre en pause cette sonde ?",
+    "Last Result": "Dernier résultat",
+    "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",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "日本語",
+    checkEverySecond: "{0}秒ごとにチェックします。",
+    "Avg.": "平均 ",
+    retriesDescription: "サービスがダウンとしてマークされ、通知が送信されるまでの最大リトライ数",
+    ignoreTLSError: "HTTPS ウェブサイトの TLS/SSL エラーを無視する",
+    upsideDownModeDescription: "ステータスの扱いを逆にします。サービスに到達可能な場合は、DOWNとなる。",
+    maxRedirectDescription: "フォローするリダイレクトの最大数。リダイレクトを無効にするには0を設定する。",
+    acceptedStatusCodesDescription: "成功した応答とみなされるステータスコードを選択する。",
+    passwordNotMatchMsg: "繰り返しのパスワードが一致しません。",
+    notificationDescription: "監視を機能させるには、監視に通知を割り当ててください。",
+    keywordDescription: "プレーンHTMLまたはJSON応答でキーワードを検索し、大文字と小文字を区別します",
+    pauseDashboardHome: "一時停止",
+    deleteMonitorMsg: "この監視を削除してよろしいですか？",
+    deleteNotificationMsg: "全ての監視のこの通知を削除してよろしいですか？",
+    resoverserverDescription: "Cloudflareがデフォルトのサーバーですが、いつでもリゾルバサーバーを変更できます。",
+    rrtypeDescription: "監視するRRタイプを選択します",
+    pauseMonitorMsg: "一時停止しますか？",
+    Settings: "設定",
+    Dashboard: "ダッシュボード",
+    "New Update": "New Update",
+    Language: "言語",
+    Appearance: "外観",
+    Theme: "テーマ",
+    General: "General",
+    Version: "バージョン",
+    "Check Update On GitHub": "GitHubでアップデートを確認する",
+    List: "一覧",
+    Add: "追加",
+    "Add New Monitor": "監視の追加",
+    "Quick Stats": "統計",
+    Up: "Up",
+    Down: "Down",
+    Pending: "中止",
+    Unknown: "不明",
+    Pause: "一時停止",
+    Name: "名前",
+    Status: "ステータス",
+    DateTime: "日時",
+    Message: "メッセージ",
+    "No important events": "重要なイベントなし",
+    Resume: "再開",
+    Edit: "編集",
+    Delete: "削除",
+    Current: "現在",
+    Uptime: "起動時間",
+    "Cert Exp.": "証明書有効期限",
+    days: "日間",
+    day: "日",
+    "-day": "-日",
+    hour: "時間",
+    "-hour": "-時間",
+    Response: "レスポンス",
+    Ping: "Ping",
+    "Monitor Type": "監視タイプ",
+    Keyword: "キーワード",
+    "Friendly Name": "Friendly Name",
+    URL: "URL",
+    Hostname: "ホスト名",
+    Port: "ポート",
+    "Heartbeat Interval": "監視間隔",
+    Retries: "Retries",
+    Advanced: "Advanced",
+    "Upside Down Mode": "Upside Down Mode",
+    "Max. Redirects": "最大リダイレクト数",
+    "Accepted Status Codes": "承認されたステータスコード",
+    Save: "保存",
+    Notifications: "通知",
+    "Not available, please setup.": "利用できません。設定してください。",
+    "Setup Notification": "通知設定",
+    Light: "Light",
+    Dark: "Dark",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Theme - Heartbeat Bar",
+    Normal: "通常",
+    Bottom: "下部",
+    None: "なし",
+    Timezone: "タイムゾーン",
+    "Search Engine Visibility": "検索エンジンでの表示",
+    "Allow indexing": "インデックス作成を許可する",
+    "Discourage search engines from indexing site": "検索エンジンにインデックスさせないようにする",
+    "Change Password": "パスワード変更",
+    "Current Password": "現在のパスワード",
+    "New Password": "新しいパスワード",
+    "Repeat New Password": "確認のため新しいパスワードをもう一度",
+    "Update Password": "パスワードの更新",
+    "Disable Auth": "認証の無効化",
+    "Enable Auth": "認証の有効化",
+    Logout: "ログアウト",
+    Leave: "作業を中止する",
+    "I understand, please disable": "理解した上で無効化する",
+    Confirm: "確認",
+    Yes: "はい",
+    No: "いいえ",
+    Username: "ユーザー名",
+    Password: "パスワード",
+    "Remember me": "パスワードを忘れた場合",
+    Login: "ログイン",
+    "No Monitors, please": "監視がありません",
+    "add one": "add one",
+    "Notification Type": "通知タイプ",
+    Email: "Eメール",
+    Test: "テスト",
+    "Certificate Info": "証明書情報",
+    "Resolver Server": "問い合わせ先DNSサーバ",
+    "Resource Record Type": "DNSレコード設定",
+    "Last Result": "最終結果",
+    "Create your admin account": "Create your admin account",
+    "Repeat Password": "Repeat Password",
+    respTime: "Resp. Time (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "한국어",
+    checkEverySecond: "{0} 초마다 체크해요.",
+    "Avg.": "평균 ",
+    retriesDescription: "서비스가 중단된 후 알림을 보내기 전 최대 재시도 횟수",
+    ignoreTLSError: "HTTPS 웹사이트에서 TLS/SSL 에러 무시하기",
+    upsideDownModeDescription: "서버 상태를 반대로 표시해요. 서버가 작동하면 오프라인으로 표시할 거에요.",
+    maxRedirectDescription: "최대 리다이렉트 횟수에요. 0을 입력하면 리다이렉트를 꺼요.",
+    acceptedStatusCodesDescription: "응답 성공으로 간주할 상태 코드를 정해요.",
+    passwordNotMatchMsg: "비밀번호 재입력이 일치하지 않아요.",
+    notificationDescription: "모니터링에 알림을 설정할 수 있어요.",
+    keywordDescription: "Html 이나 JSON에서 대소문자를 구분해 키워드를 검색해요.",
+    pauseDashboardHome: "일시 정지",
+    deleteMonitorMsg: "정말 이 모니터링을 삭제할까요?",
+    deleteNotificationMsg: "정말 이 알림을 모든 모니터링에서 삭제할까요?",
+    resoverserverDescription: "Cloudflare가 기본 서버에요, 원한다면 언제나 다른 resolver 서버로 변경할 수 있어요.",
+    rrtypeDescription: "모니터링할 RR-Type을 선택해요.",
+    pauseMonitorMsg: "정말 이 모니터링을 일시 정지 할까요?",
+    Settings: "설정",
+    Dashboard: "대시보드",
+    "New Update": "새로운 업데이트",
+    Language: "언어",
+    Appearance: "외형",
+    Theme: "테마",
+    General: "일반",
+    Version: "버전",
+    "Check Update On GitHub": "깃허브에서 업데이트 확인",
+    List: "목록",
+    Add: "추가",
+    "Add New Monitor": "새로운 모니터링 추가하기",
+    "Quick Stats": "간단한 정보",
+    Up: "온라인",
+    Down: "오프라인",
+    Pending: "대기 중",
+    Unknown: "알 수 없음",
+    Pause: "일시 정지",
+    Name: "이름",
+    Status: "상태",
+    DateTime: "날짜",
+    Message: "메시지",
+    "No important events": "중요 이벤트 없음",
+    Resume: "재개",
+    Edit: "수정",
+    Delete: "삭제",
+    Current: "현재",
+    Uptime: "업타임",
+    "Cert Exp.": "인증서 만료",
+    days: "일",
+    day: "일",
+    "-day": "-일",
+    hour: "시간",
+    "-hour": "-시간",
+    Response: "응답",
+    Ping: "핑",
+    "Monitor Type": "모니터링 종류",
+    Keyword: "키워드",
+    "Friendly Name": "이름",
+    URL: "URL",
+    Hostname: "호스트네임",
+    Port: "포트",
+    "Heartbeat Interval": "하트비트 주기",
+    Retries: "재시도",
+    Advanced: "고급",
+    "Upside Down Mode": "상태 반전 모드",
+    "Max. Redirects": "최대 리다이렉트",
+    "Accepted Status Codes": "응답 성공 상태 코드",
+    Save: "저장",
+    Notifications: "알림",
+    "Not available, please setup.": "존재하지 않아요, 새로운거 하나 만드는건 어때요?",
+    "Setup Notification": "알림 설정",
+    Light: "라이트",
+    Dark: "다크",
+    Auto: "자동",
+    "Theme - Heartbeat Bar": "테마 - 하트비트 바",
+    Normal: "기본값",
+    Bottom: "가운데",
+    None: "제거",
+    Timezone: "시간대",
+    "Search Engine Visibility": "검색 엔진 활성화",
+    "Allow indexing": "인덱싱 허용",
+    "Discourage search engines from indexing site": "검색 엔진 인덱싱 거부",
+    "Change Password": "비밀번호 변경",
+    "Current Password": "기존 비밀번호",
+    "New Password": "새로운 비밀번호",
+    "Repeat New Password": "새로운 비밀번호 재입력",
+    "Update Password": "비밀번호 변경",
+    "Disable Auth": "인증 끄기",
+    "Enable Auth": "인증 켜기",
+    Logout: "로그아웃",
+    Leave: "나가기",
+    "I understand, please disable": "기능에 대해 이해했으니 꺼주세요.",
+    Confirm: "확인",
+    Yes: "확인",
+    No: "취소",
+    Username: "이름",
+    Password: "비밀번호",
+    "Remember me": "비밀번호 기억하기",
+    Login: "로그인",
+    "No Monitors, please": "모니터링이 없어요,",
+    "add one": "하나 추가해봐요",
+    "Notification Type": "알림 종류",
+    Email: "이메일",
+    Test: "테스트",
+    "Certificate Info": "인증서 정보",
+    "Resolver Server": "Resolver 서버",
+    "Resource Record Type": "자원 레코드 유형",
+    "Last Result": "최근 결과",
+    "Create your admin account": "관리자 계정 만들기",
+    "Repeat Password": "비밀번호 재입력",
+    respTime: "응답 시간 (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Nederlands",
+    checkEverySecond: "Controleer elke {0} seconden.",
+    "Avg.": "Gem. ",
+    retriesDescription: "Maximum aantal nieuwe pogingen voordat de service wordt gemarkeerd als niet beschikbaar en er een melding wordt verzonden",
+    ignoreTLSError: "Negeer TLS/SSL-fout voor HTTPS-websites",
+    upsideDownModeDescription: "Draai de status om. Als de service bereikbaar is, is deze OFFLINE.",
+    maxRedirectDescription: "Maximaal aantal te volgen omleidingen. Stel in op 0 om omleidingen uit te schakelen.",
+    acceptedStatusCodesDescription: "Selecteer statuscodes die als een succesvol antwoord worden beschouwd.",
+    passwordNotMatchMsg: "Het herhaalwachtwoord komt niet overeen.",
+    notificationDescription: "Wijs a.u.b. een melding toe aan de monitor(s) om het te laten werken.",
+    keywordDescription: "Zoek trefwoord in gewone html of JSON-response en het is hoofdlettergevoelig",
+    pauseDashboardHome: "Gepauzeerd",
+    deleteMonitorMsg: "Weet u zeker dat u deze monitor wilt verwijderen?",
+    deleteNotificationMsg: "Weet u zeker dat u deze melding voor alle monitoren wilt verwijderen?",
+    resoverserverDescription: "Cloudflare is de standaardserver, u kunt de resolver server op elk moment wijzigen.",
+    rrtypeDescription: "Selecteer het RR-type dat u wilt monitoren",
+    pauseMonitorMsg: "Weet je zeker dat je wilt pauzeren?",
+    Settings: "Instellingen",
+    Dashboard: "Dashboard",
+    "New Update": "Nieuwe update",
+    Language: "Taal",
+    Appearance: "Weergave",
+    Theme: "Thema",
+    General: "Algemeen",
+    Version: "Versie",
+    "Check Update On GitHub": "Controleer voor updates op GitHub",
+    List: "Lijst",
+    Add: "Toevoegen",
+    "Add New Monitor": "Nieuwe monitor toevoegen",
+    "Quick Stats": "Snelle statistieken",
+    Up: "Online",
+    Down: "Offline",
+    Pending: "In afwachting",
+    Unknown: "Onbekend",
+    Pause: "Pauze",
+    Name: "Naam",
+    Status: "Status",
+    DateTime: "Datum Tijd",
+    Message: "Bericht",
+    "No important events": "Geen belangrijke gebeurtenissen",
+    Resume: "Hervat",
+    Edit: "Wijzigen",
+    Delete: "Verwijderen",
+    Current: "Huidig",
+    Uptime: "Uptime",
+    "Cert Exp.": "Cert. verl.",
+    days: "dagen",
+    day: "dag",
+    "-day": "-dag",
+    hour: "uur",
+    "-hour": "-uur",
+    Response: "Antwoord",
+    Ping: "Ping",
+    "Monitor Type": "Monitortype:",
+    Keyword: "Trefwoord",
+    "Friendly Name": "Vriendelijke naam",
+    URL: "URL",
+    Hostname: "Hostnaam",
+    Port: "Poort",
+    "Heartbeat Interval": "Hartslaginterval",
+    Retries: "Pogingen",
+    Advanced: "Geavanceerd",
+    "Upside Down Mode": "Ondersteboven modus",
+    "Max. Redirects": "Max. Omleidingen",
+    "Accepted Status Codes": "Geaccepteerde statuscodes",
+    Save: "Opslaan",
+    Notifications: "Meldingen",
+    "Not available, please setup.": "Niet beschikbaar, stel a.u.b. in.",
+    "Setup Notification": "Melding instellen",
+    Light: "Licht",
+    Dark: "Donker",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Thema - Hartslagbalk",
+    Normal: "Normaal",
+    Bottom: "Onderkant",
+    None: "Geen",
+    Timezone: "Tijdzone",
+    "Search Engine Visibility": "Zichtbaarheid voor zoekmachines",
+    "Allow indexing": "Indexering toestaan",
+    "Discourage search engines from indexing site": "Ontmoedig zoekmachines om de site te indexeren",
+    "Change Password": "Verander wachtwoord",
+    "Current Password": "Huidig ​​wachtwoord",
+    "New Password": "Nieuw wachtwoord",
+    "Repeat New Password": "Herhaal nieuw wachtwoord",
+    "Update Password": "Vernieuw wachtwoord",
+    "Disable Auth": "Autorisatie uitschakelen",
+    "Enable Auth": "Autorisatie inschakelen",
+    Logout: "Uitloggen",
+    Leave: "Vertrekken",
+    "I understand, please disable": "Ik begrijp het, schakel a.u.b. uit",
+    Confirm: "Bevestigen",
+    Yes: "Ja",
+    No: "Nee",
+    Username: "Gebruikersnaam",
+    Password: "Wachtwoord",
+    "Remember me": "Wachtwoord onthouden",
+    Login: "Inloggen",
+    "No Monitors, please": "Geen monitoren, ",
+    "add one": "voeg een toe",
+    "Notification Type": "Melding type",
+    Email: "E-mail",
+    Test: "Testen",
+    "Certificate Info": "Certificaat informatie",
+    "Resolver Server": "Resolver Server",
+    "Resource Record Type": "Type bronrecord",
+    "Last Result": "Laatste resultaat",
+    "Create your admin account": "Maak uw beheerdersaccount aan",
+    "Repeat Password": "Herhaal wachtwoord",
+    respTime: "resp. tijd (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Русский",
+    checkEverySecond: "Проверять каждые {0} секунд.",
+    "Avg.": "Средн. ",
+    retriesDescription: "Максимальное количество попыток перед пометкой сервиса как недоступного и отправкой уведомления",
+    ignoreTLSError: "Игнорировать ошибку TLS/SSL для HTTPS сайтов",
+    upsideDownModeDescription: "Реверс статуса сервиса. Если сервис доступен, то он помечается как НЕДОСТУПНЫЙ.",
+    maxRedirectDescription: "Максимальное количество перенаправлений. Поставьте 0, чтобы отключить перенаправления.",
+    acceptedStatusCodesDescription: "Выберите коды статусов, которые должны считаться за успешный ответ.",
+    passwordNotMatchMsg: "Повтор пароля не совпадает.",
+    notificationDescription: "Привяжите уведомления к мониторам.",
+    keywordDescription: "Поиск слова в чистом HTML или в JSON-ответе (чувствительно к регистру)",
+    pauseDashboardHome: "Пауза",
+    deleteMonitorMsg: "Вы действительно хотите удалить данный монитор?",
+    deleteNotificationMsg: "Вы действительно хотите удалить это уведомление для всех мониторов?",
+    resoverserverDescription: "Cloudflare является сервером по умолчанию. Вы всегда можете сменить данный сервер.",
+    rrtypeDescription: "Выберите тип ресурсной записи, который вы хотите отслеживать",
+    pauseMonitorMsg: "Вы действительно хотите поставить на паузу?",
+    Settings: "Настройки",
+    Dashboard: "Панель",
+    "New Update": "Обновление",
+    Language: "Язык",
+    Appearance: "Внешний вид",
+    Theme: "Тема",
+    General: "Общее",
+    Version: "Версия",
+    "Check Update On GitHub": "Проверить обновления на GitHub",
+    List: "Список",
+    Add: "Добавить",
+    "Add New Monitor": "Новый монитор",
+    "Quick Stats": "Статистика",
+    Up: "Доступно",
+    Down: "Недоступно",
+    Pending: "Ожидание",
+    Unknown: "Неизвестно",
+    Pause: "Пауза",
+    Name: "Имя",
+    Status: "Статус",
+    DateTime: "Дата и время",
+    Message: "Сообщение",
+    "No important events": "Важных событий нет",
+    Resume: "Возобновить",
+    Edit: "Изменить",
+    Delete: "Удалить",
+    Current: "Текущий",
+    Uptime: "Аптайм",
+    "Cert Exp.": "Сертификат просрочен",
+    days: "дней",
+    day: "день",
+    "-day": " дней",
+    hour: "час",
+    "-hour": " часа",
+    Response: "Ответ",
+    Ping: "Пинг",
+    "Monitor Type": "Тип монитора",
+    Keyword: "Слово",
+    "Friendly Name": "Имя",
+    URL: "URL",
+    Hostname: "Имя хоста",
+    Port: "Порт",
+    "Heartbeat Interval": "Частота опроса",
+    Retries: "Попыток",
+    Advanced: "Дополнительно",
+    "Upside Down Mode": "Режим реверса статуса",
+    "Max. Redirects": "Макс. перенаправлений",
+    "Accepted Status Codes": "Допустимые коды статуса",
+    Save: "Сохранить",
+    Notifications: "Уведомления",
+    "Not available, please setup.": "Доступных уведомлений нет, необходима настройка.",
+    "Setup Notification": "Настроить уведомления",
+    Light: "Светлая",
+    Dark: "Тёмная",
+    Auto: "Авто",
+    "Theme - Heartbeat Bar": "Тема - Полоса частоты опроса",
+    Normal: "Обычный",
+    Bottom: "Снизу",
+    None: "Отсутствует",
+    Timezone: "Часовой пояс",
+    "Search Engine Visibility": "Видимость поисковым движком",
+    "Allow indexing": "Разрешить индексирование",
+    "Discourage search engines from indexing site": "Не позволять индексировать сайт",
+    "Change Password": "Сменить пароль",
+    "Current Password": "Текущий пароль",
+    "New Password": "Новый пароль",
+    "Repeat New Password": "Повтор нового пароля",
+    "Update Password": "Обновить пароль",
+    "Disable Auth": "Отключить авторизацию",
+    "Enable Auth": "Включить авторизацию",
+    Logout: "Выйти",
+    Leave: "Отмена",
+    "I understand, please disable": "Я понимаю, всё равно отключить",
+    Confirm: "Подтвердить",
+    Yes: "Да",
+    No: "Нет",
+    Username: "Логин",
+    Password: "Пароль",
+    "Remember me": "Запомнить меня",
+    Login: "Вход в систему",
+    "No Monitors, please": "Мониторов нет, пожалуйста",
+    "add one": "создайте новый",
+    "Notification Type": "Тип уведомления",
+    Email: "Почта",
+    Test: "Проверка",
+    "Certificate Info": "Информация о сертификате",
+    "Resolver Server": "DNS сервер",
+    "Resource Record Type": "Тип ресурсной записи",
+    "Last Result": "Последний результат",
+    "Create your admin account": "Создайте аккаунт администратора",
+    "Repeat Password": "Повторите пароль",
+    respTime: "Resp. Time (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Srpski",
+    checkEverySecond: "Proveri svakih {0} sekundi.",
+    "Avg.": "Prosečni ",
+    retriesDescription: "Maksimum pokušaja pre nego što se servis obeleži kao neaktivan i pošalje se obaveštenje.",
+    ignoreTLSError: "Ignoriši TLS/SSL greške za HTTPS veb stranice.",
+    upsideDownModeDescription: "Obrnite status. Ako je servis dostupan, onda je obeležen kao neaktivan.",
+    maxRedirectDescription: "Maksimani broj preusmerenja da se prate. Postavite na 0 da bi se isključila preusmerenja.",
+    acceptedStatusCodesDescription: "Odaberite statusne kodove koji se smatraju uspešnim odgovorom.",
+    passwordNotMatchMsg: "Ponovljena lozinka se ne poklapa.",
+    notificationDescription: "Molim Vas postavite obaveštenje za masmatrače da bise aktivirali.",
+    keywordDescription: "Pretraži ključnu reč u čistom html ili JSON odgovoru sa osetljivim velikim i malim slovima",
+    pauseDashboardHome: "Pauziraj",
+    deleteMonitorMsg: "Da li ste sigurni da želite da obrišete ovog posmatrača?",
+    deleteNotificationMsg: "Da li ste sigurni d aželite da uklonite ovo obaveštenje za sve posmatrače?",
+    resoverserverDescription: "Cloudflare je podrazumevani server. Možete promeniti server za raszrešavanje u bilo kom trenutku.",
+    rrtypeDescription: "Odaberite RR-Type koji želite da posmatrate",
+    pauseMonitorMsg: "Da li ste sigurni da želite da pauzirate?",
+    Settings: "Podešavanja",
+    Dashboard: "Komandna tabla",
+    "New Update": "Nova verzija",
+    Language: "Jezik",
+    Appearance: "Izgled",
+    Theme: "Tema",
+    General: "Opšte",
+    Version: "Verzija",
+    "Check Update On GitHub": "Proverite novu verziju na GitHub-u",
+    List: "Lista",
+    Add: "Dodaj",
+    "Add New Monitor": "Dodaj novog posmatrača",
+    "Quick Stats": "Brze statistike",
+    Up: "Aktivno",
+    Down: "Neaktivno",
+    Pending: "Nerešeno",
+    Unknown: "Nepoznato",
+    Pause: "Pauziraj",
+    Name: "Ime",
+    Status: "Status",
+    DateTime: "Datum i vreme",
+    Message: "Poruka",
+    "No important events": "Nema bitnih događaja",
+    Resume: "Nastavi",
+    Edit: "Izmeni",
+    Delete: "Ukloni",
+    Current: "Trenutno",
+    Uptime: "Vreme rada",
+    "Cert Exp.": "Istek sert.",
+    days: "dana",
+    day: "dan",
+    "-day": "-dana",
+    hour: "sat",
+    "-hour": "-sata",
+    Response: "Odgovor",
+    Ping: "Ping",
+    "Monitor Type": "Tip posmatrača",
+    Keyword: "Ključna reč",
+    "Friendly Name": "Prijateljsko ime",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Port",
+    "Heartbeat Interval": "Interval otkucaja srca",
+    Retries: "Pokušaji",
+    Advanced: "Napredno",
+    "Upside Down Mode": "Naopak mod",
+    "Max. Redirects": "Maks. preusmerenja",
+    "Accepted Status Codes": "Prihvaćeni statusni kodovi",
+    Save: "Sačuvaj",
+    Notifications: "Obaveštenja",
+    "Not available, please setup.": "Nije dostupno, molim Vas podesite.",
+    "Setup Notification": "Postavi obaveštenje",
+    Light: "Svetlo",
+    Dark: "Tamno",
+    Auto: "Automatsko",
+    "Theme - Heartbeat Bar": "Tema - Traka otkucaja srca",
+    Normal: "Normalno",
+    Bottom: "Dole",
+    None: "Isključeno",
+    Timezone: "Vremenska zona",
+    "Search Engine Visibility": "Vidljivost pretraživačima",
+    "Allow indexing": "Dozvoli indeksiranje",
+    "Discourage search engines from indexing site": "Odvraćajte pretraživače od indeksiranja sajta",
+    "Change Password": "Promeni lozinku",
+    "Current Password": "Trenutna lozinka",
+    "New Password": "Nova lozinka",
+    "Repeat New Password": "Ponovi novu lozinku",
+    "Update Password": "Izmeni lozinku",
+    "Disable Auth": "Isključi autentifikaciju",
+    "Enable Auth": "Uključi autentifikaciju",
+    Logout: "Odloguj se",
+    Leave: "Izađi",
+    "I understand, please disable": "Razumem, molim te isključi",
+    Confirm: "Potvrdi",
+    Yes: "Da",
+    No: "Ne",
+    Username: "Korisničko ime",
+    Password: "Lozinka",
+    "Remember me": "Zapamti me",
+    Login: "Uloguj se",
+    "No Monitors, please": "Bez posmatrača molim",
+    "add one": "dodaj jednog",
+    "Notification Type": "Tip obaveštenja",
+    Email: "E-pošta",
+    Test: "Test",
+    "Certificate Info": "Informacije sertifikata",
+    "Resolver Server": "Razrešivački server",
+    "Resource Record Type": "Tip zapisa resursa",
+    "Last Result": "Poslednji rezultat",
+    "Create your admin account": "Naprivi administratorski nalog",
+    "Repeat Password": "Ponovite lozinku",
+    respTime: "Vreme odg. (ms)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Српски",
+    checkEverySecond: "Провери сваких {0} секунди.",
+    "Avg.": "Просечни ",
+    retriesDescription: "Максимум покушаја пре него што се сервис обележи као неактиван и пошаље се обавештење.",
+    ignoreTLSError: "Игнориши TLS/SSL грешке за HTTPS веб странице.",
+    upsideDownModeDescription: "Обрните статус. Ако је сервис доступан, онда је обележен као неактиван.",
+    maxRedirectDescription: "Максимани број преусмерења да се прате. Поставите на 0 да би се искључила преусмерења.",
+    acceptedStatusCodesDescription: "Одаберите статусне кодове који се сматрају успешним одговором.",
+    passwordNotMatchMsg: "Поновљена лозинка се не поклапа.",
+    notificationDescription: "Молим Вас поставите обавештење за масматраче да бисе активирали.",
+    keywordDescription: "Претражи кључну реч у чистом html или JSON одговору са осетљивим великим и малим словима",
+    pauseDashboardHome: "Паузирај",
+    deleteMonitorMsg: "Да ли сте сигурни да желите да обришете овог посматрача?",
+    deleteNotificationMsg: "Да ли сте сигурни д ажелите да уклоните ово обавештење за све посматраче?",
+    resoverserverDescription: "Cloudflare је подразумевани сервер. Можете променити сервер за расзрешавање у било ком тренутку.",
+    rrtypeDescription: "Одаберите RR-Type који желите да посматрате",
+    pauseMonitorMsg: "Да ли сте сигурни да желите да паузирате?",
+    Settings: "Подешавања",
+    Dashboard: "Командна табла",
+    "New Update": "Нова верзија",
+    Language: "Језик",
+    Appearance: "Изглед",
+    Theme: "Тема",
+    General: "Опште",
+    Version: "Верзија",
+    "Check Update On GitHub": "Проверите нову верзију на GitHub-у",
+    List: "Листа",
+    Add: "Додај",
+    "Add New Monitor": "Додај новог посматрача",
+    "Quick Stats": "Брзе статистике",
+    Up: "Активно",
+    Down: "Неактивно",
+    Pending: "Нерешено",
+    Unknown: "Непознато",
+    Pause: "Паузирај",
+    Name: "Име",
+    Status: "Статус",
+    DateTime: "Датум и време",
+    Message: "Порука",
+    "No important events": "Нема битних догађаја",
+    Resume: "Настави",
+    Edit: "Измени",
+    Delete: "Уклони",
+    Current: "Тренутно",
+    Uptime: "Време рада",
+    "Cert Exp.": "Истек серт.",
+    days: "дана",
+    day: "дан",
+    "-day": "-дана",
+    hour: "сат",
+    "-hour": "-сата",
+    Response: "Одговор",
+    Ping: "Пинг",
+    "Monitor Type": "Тип посматрача",
+    Keyword: "Кључна реч",
+    "Friendly Name": "Пријатељско име",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Порт",
+    "Heartbeat Interval": "Интервал откуцаја срца",
+    Retries: "Покушаји",
+    Advanced: "Напредно",
+    "Upside Down Mode": "Наопак мод",
+    "Max. Redirects": "Макс. преусмерења",
+    "Accepted Status Codes": "Прихваћени статусни кодови",
+    Save: "Сачувај",
+    Notifications: "Обавештења",
+    "Not available, please setup.": "Није доступно, молим Вас подесите.",
+    "Setup Notification": "Постави обавештење",
+    Light: "Светло",
+    Dark: "Тамно",
+    Auto: "Аутоматско",
+    "Theme - Heartbeat Bar": "Тема - Трака откуцаја срца",
+    Normal: "Нормално",
+    Bottom: "Доле",
+    None: "Искључено",
+    Timezone: "Временска зона",
+    "Search Engine Visibility": "Видљивост претраживачима",
+    "Allow indexing": "Дозволи индексирање",
+    "Discourage search engines from indexing site": "Одвраћајте претраживаче од индексирања сајта",
+    "Change Password": "Промени лозинку",
+    "Current Password": "Тренутна лозинка",
+    "New Password": "Нова лозинка",
+    "Repeat New Password": "Понови нову лозинку",
+    "Update Password": "Измени лозинку",
+    "Disable Auth": "Искључи аутентификацију",
+    "Enable Auth": "Укључи аутентификацију",
+    Logout: "Одлогуј се",
+    Leave: "Изађи",
+    "I understand, please disable": "Разумем, молим те искључи",
+    Confirm: "Потврди",
+    Yes: "Да",
+    No: "Не",
+    Username: "Корисничко име",
+    Password: "Лозинка",
+    "Remember me": "Запамти ме",
+    Login: "Улогуј се",
+    "No Monitors, please": "Без посматрача молим",
+    "add one": "додај једног",
+    "Notification Type": "Тип обавештења",
+    Email: "Е-пошта",
+    Test: "Тест",
+    "Certificate Info": "Информације сертификата",
+    "Resolver Server": "Разрешивачки сервер",
+    "Resource Record Type": "Тип записа ресурса",
+    "Last Result": "Последњи резултат",
+    "Create your admin account": "Наприви администраторски налог",
+    "Repeat Password": "Поновите лозинку",
+    respTime: "Време одг. (мс)",
+    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

@@ -0,0 +1,119 @@
+export default {
+    languageName: "Svenska",
+    checkEverySecond: "Uppdatera var {0} sekund.",
+    "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 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?",
+    deleteNotificationMsg: "Är du säker på att du vill ta bort den här notisen för alla övervakare?",
+    resoverserverDescription: "Cloudflare är den förvalda servern. Du kan byta resolver när som helst.",
+    rrtypeDescription: "Välj den RR-typ du vill övervaka",
+    pauseMonitorMsg: "Är du säker på att du vill pausa?",
+    Settings: "Inställningar",
+    Dashboard: "Infopanel",
+    "New Update": "Ny uppdatering",
+    Language: "Språk",
+    Appearance: "Utseende",
+    Theme: "Tema",
+    General: "Allmänt",
+    Version: "Version",
+    "Check Update On GitHub": "Sök efter uppdatering på GitHub",
+    List: "Lista",
+    Add: "Lägg till",
+    "Add New Monitor": "Lägg Till Ny Övervakare",
+    "Quick Stats": "Snabbstatistik",
+    Up: "Uppe",
+    Down: "Nere",
+    Pending: "Pågående",
+    Unknown: "Okänt",
+    Pause: "Pausa",
+    Name: "Namn",
+    Status: "Status",
+    DateTime: "Datum & Tid",
+    Message: "Meddelande",
+    "No important events": "Inga viktiga händelser",
+    Resume: "Återuppta",
+    Edit: "Redigera",
+    Delete: "Ta bort",
+    Current: "Nuvarande",
+    Uptime: "Drifttid",
+    "Cert Exp.": "Certifikat utgår",
+    days: "dagar",
+    day: "dag",
+    "-day": " dagar",
+    hour: "timme",
+    "-hour": " timmar",
+    Response: "Svar",
+    Ping: "Ping",
+    "Monitor Type": "Övervakningstyp",
+    Keyword: "Nyckelord",
+    "Friendly Name": "Namn",
+    URL: "URL",
+    Hostname: "Värdnamn",
+    Port: "Port",
+    "Heartbeat Interval": "Hjärtslagsintervall",
+    Retries: "Försök",
+    Advanced: "Avancerat",
+    "Upside Down Mode": "Upp och ner-läge",
+    "Max. Redirects": "Max antal omdirigeringar",
+    "Accepted Status Codes": "Tillåtna statuskoder",
+    Save: "Spara",
+    Notifications: "Notiser",
+    "Not available, please setup.": "Ej tillgänglig, vänligen konfigurera.",
+    "Setup Notification": "Ny Notistjänst",
+    Light: "Ljust",
+    Dark: "Mörkt",
+    Auto: "Automatiskt",
+    "Theme - Heartbeat Bar": "Tema - Heartbeat Bar",
+    Normal: "Normal",
+    Bottom: "Botten",
+    None: "Tomt",
+    Timezone: "Tidszon",
+    "Search Engine Visibility": "Synlighet på Sökmotorer",
+    "Allow indexing": "Tillåt indexering",
+    "Discourage search engines from indexing site": "Hindra sökmotorer från att indexera sidan",
+    "Change Password": "Byt Lösenord",
+    "Current Password": "Nuvarande Lösenord",
+    "New Password": "Nytt Lösenord",
+    "Repeat New Password": "Upprepa Nytt Lösenord",
+    "Update Password": "Uppdatera Lösenord",
+    "Disable Auth": "Avaktivera Autentisering",
+    "Enable Auth": "Aktivera Autentisering",
+    Logout: "Logga ut",
+    Leave: "Lämna",
+    "I understand, please disable": "Jag förstår, vänligen avaktivera",
+    Confirm: "Bekräfta",
+    Yes: "Ja",
+    No: "Nej",
+    Username: "Användarnamn",
+    Password: "Lösenord",
+    "Remember me": "Kom ihåg mig",
+    Login: "Logga in",
+    "No Monitors, please": "Inga Övervakare, tack",
+    "add one": "lägg till en",
+    "Notification Type": "Notistyp",
+    Email: "Email",
+    Test: "Test",
+    "Certificate Info": "Certifikatsinfo",
+    "Resolver Server": "Resolverserver",
+    "Resource Record Type": "RR-typ",
+    "Last Result": "Senaste resultat",
+    "Create your admin account": "Skapa ditt administratörskonto",
+    "Repeat Password": "Upprepa Lösenord",
+    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"
+}

src/languages/zh-CN.js

@@ -0,0 +1,119 @@
+export default {
+    languageName: "简体中文",
+    checkEverySecond: "检测频率 {0} 秒",
+    "Avg.": "平均",
+    retriesDescription: "最大重试失败次数",
+    ignoreTLSError: "忽略HTTPS站点的证书错误",
+    upsideDownModeDescription: "反向状态监控（状态码范围外为有效状态，反之为无效）",
+    maxRedirectDescription: "最大重定向次数，设置为 0 禁止重定向",
+    acceptedStatusCodesDescription: "选择被视为成功响应的状态码",
+    passwordNotMatchMsg: "两次密码输入不一致",
+    notificationDescription: "请为监控项配置消息通知",
+    keywordDescription: "检测响应内容中的关键字，区分大小写",
+    pauseDashboardHome: "暂停",
+    deleteMonitorMsg: "确定要删除此监控吗？",
+    deleteNotificationMsg: "确定要删除此消息通知吗？这将对所有监控生效。",
+    resoverserverDescription: "默认服务器 Cloudflare，可以修改为任意你想要使用的DNS服务器",
+    rrtypeDescription: "选择要监控的资源记录类型",
+    pauseMonitorMsg: "确定要暂停吗？",
+    Settings: "设置",
+    Dashboard: "仪表盘",
+    "New Update": "有新版本更新",
+    Language: "语言",
+    Appearance: "外观设置",
+    Theme: "主题",
+    General: "基本设置",
+    Version: "Version",
+    "Check Update On GitHub": "检查更新",
+    List: "列表",
+    Add: "添加",
+    "Add New Monitor": "创建监控项",
+    "Quick Stats": "状态速览",
+    Up: "正常",
+    Down: "故障",
+    Pending: "检测失败",
+    Unknown: "未知",
+    Pause: "暂停",
+    Name: "名称",
+    Status: "状态",
+    DateTime: "时间",
+    Message: "事件",
+    "No important events": "暂无重要事件",
+    Resume: "恢复",
+    Edit: "修改",
+    Delete: "删除",
+    Current: "当前",
+    Uptime: "可用率",
+    "Cert Exp.": "证书过期",
+    days: "天",
+    day: "天",
+    "-day": " 天",
+    hour: "小时",
+    "-hour": " 小时",
+    Response: "响应时长",
+    Ping: "Ping",
+    "Monitor Type": "监控类型",
+    Keyword: "关键字",
+    "Friendly Name": "自定义名称",
+    URL: "网址URL",
+    Hostname: "主机名",
+    Port: "端口号",
+    "Heartbeat Interval": "心跳间隔",
+    Retries: "重试次数",
+    Advanced: "高级选项",
+    "Upside Down Mode": "反向监控",
+    "Max. Redirects": "重定向次数",
+    "Accepted Status Codes": "有效状态码",
+    Save: "保存",
+    Notifications: "消息通知",
+    "Not available, please setup.": "无可用通道，请先设置",
+    "Setup Notification": "设置通知",
+    Light: "明亮",
+    Dark: "黑暗",
+    Auto: "自动",
+    "Theme - Heartbeat Bar": "状态显示",
+    Normal: "正常显示",
+    Bottom: "靠下显示",
+    None: "不显示",
+    Timezone: "时区",
+    "Search Engine Visibility": "搜索引擎设置",
+    "Allow indexing": "允许索引",
+    "Discourage search engines from indexing site": "阻止搜索引擎索引网站",
+    "Change Password": "修改密码",
+    "Current Password": "当前密码",
+    "New Password": "新的密码",
+    "Repeat New Password": "重复新的密码",
+    "Update Password": "更新密码",
+    "Disable Auth": "禁用身份验证",
+    "Enable Auth": "启用身份验证",
+    Logout: "退出",
+    Leave: "离开",
+    "I understand, please disable": "我已了解，继续禁用",
+    Confirm: "确认",
+    Yes: "确定",
+    No: "取消",
+    Username: "用户名",
+    Password: "密码",
+    "Remember me": "记住登录",
+    Login: "登录",
+    "No Monitors, please": "还没有监控项，",
+    "add one": "点击新增",
+    "Notification Type": "消息类型",
+    Email: "邮件",
+    Test: "测试一下",
+    "Certificate Info": "证书信息",
+    "Resolver Server": "解析服务器",
+    "Resource Record Type": "资源记录类型",
+    "Last Result": "Last Result",
+    "Create your admin account": "创建管理员账号",
+    "Repeat Password": "重复密码",
+    respTime: "Resp. Time (ms)",
+    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

@@ -18,6 +18,7 @@ export default {
     Pending: "待定",
     Unknown: "不明",
     Pause: "暫停",
+    pauseDashboardHome: "暫停",
     Name: "名稱",
     Status: "狀態",
     DateTime: "日期時間",
@@ -92,6 +93,27 @@ export default {
     "No Monitors, please": "沒有監測器，請",
     "add one": "新增",
     "Notification Type": "通知類型",
-    "Email": "電郵",
+    Email: "電郵",
-    "Test": "測試",
+    Test: "測試",
+    keywordDescription: "搜索 HTML 或 JSON 裡是否有出現關鍵字（注意英文大細階）",
+    "Certificate Info": "憑證詳細資料",
+    deleteMonitorMsg: "是否確定刪除這個監測器",
+    deleteNotificationMsg: "是否確定刪除這個通知設定？如監測器啟用了這個通知，將會收不到通知。",
+    "Resolver Server": "DNS 伺服器",
+    "Resource Record Type": "DNS 記錄類型",
+    resoverserverDescription: "預設值為 Cloudflare DNS 伺服器，你可以轉用其他 DNS 伺服器。",
+    rrtypeDescription: "請選擇 DNS 記錄類型",
+    pauseMonitorMsg: "是否確定暫停？",
+    "Last Result": "最後結果",
+    "Create your admin account": "製作你的管理員帳號",
+    "Repeat Password": "重複密碼",
+    respTime: "反應時間 (ms)",
+    notAvailableShort: "N/A",
+    Create: "建立",
+    clearEventsMsg: "是否確定刪除這個監測器的所有事件？",
+    clearHeartbeatsMsg: "是否確定刪除這個監測器的所有脈搏資料？",
+    confirmClearStatisticsMsg: "是否確定刪除所有監測器的脈搏資料？（您的監測器會繼續正常運作）",
+    "Clear Data": "清除資料",
+    Events: "事件",
+    Heartbeats: "脈搏"
 }

src/layouts/Layout.vue

@@ -40,19 +40,10 @@
         </header>
 
         <main>
-            <!-- Add :key to disable vue router re-use the same component -->
+            <router-view v-if="$root.loggedIn" />
-            <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
             <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
         </main>
 
-        <footer>
-            <div class="container-fluid">
-                Uptime Kuma -
-                {{ $t("Version") }}: {{ $root.info.version }} -
-                <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
-            </div>
-        </footer>
-
         <!-- Mobile Only -->
         <div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
         <nav v-if="$root.isMobile" class="bottom-nav">
@@ -190,18 +181,6 @@ main {
     color: white;
 }
 
-footer {
-    font-size: 13px;
-    margin-top: 10px;
-    padding-bottom: 30px;
-    margin-left: 10px;
-    text-align: center;
-}
-
-footer {
-    color: #aaa;
-}
-
 .dark {
     header {
         background-color: #161b22;

src/main.js

@@ -25,6 +25,19 @@ import { appName } from "./util.ts";
 
 import en from "./languages/en";
 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 frFR from "./languages/fr-FR";
+import ja from "./languages/ja";
+import daDK from "./languages/da-DK";
+import sr from "./languages/sr";
+import srLatn from "./languages/sr-latn";
+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 = [
     {
@@ -90,6 +103,19 @@ const router = createRouter({
 const languageList = {
     en,
     "zh-HK": zhHK,
+    "de-DE": deDE,
+    "nl-NL": nlNL,
+    "es-ES": esEs,
+    "fr-FR": frFR,
+    "ja": ja,
+    "da-DK": daDK,
+    "sr": sr,
+    "sr-latn": srLatn,
+    "sv-SE": svSE,
+    "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])
@@ -254,6 +254,17 @@ export default {
             this.importantHeartbeatList = {}
         },
 
+        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/Dashboard.vue

@@ -5,11 +5,12 @@
                 <div>
                     <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Monitor") }}</router-link>
                 </div>
-                <MonitorList />
+                <MonitorList :scrollbar="true" />
             </div>
 
-            <div class="col-12 col-md-7 col-xl-8">
+            <div class="col-12 col-md-7 col-xl-8 mb-3">
-                <router-view />
+                <!-- Add :key to disable vue router re-use the same component -->
+                <router-view :key="$route.fullPath" />
             </div>
         </div>
     </div>
@@ -26,7 +27,6 @@ export default {
     data() {
         return {}
     },
-
 }
 </script>
 

src/pages/DashboardHome.vue

@@ -5,7 +5,7 @@
                 {{ $t("Quick Stats") }}
             </h1>
 
-            <div class="shadow-box big-padding text-center">
+            <div class="shadow-box big-padding text-center mb-4">
                 <div class="row">
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
@@ -20,7 +20,7 @@
                         <span class="num text-secondary">{{ stats.unknown }}</span>
                     </div>
                     <div class="col">
-                        <h3>{{ $t("Pause") }}</h3>
+                        <h3>{{ $t("pauseDashboardHome") }}</h3>
                         <span class="num text-secondary">{{ stats.pause }}</span>
                     </div>
                 </div>
@@ -170,7 +170,6 @@ export default {
 
 .shadow-box {
     padding: 20px;
-    margin-top: 25px;
 }
 
 table {

src/pages/Details.vue

@@ -8,7 +8,11 @@
                 <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
                 <span v-if="monitor.type === 'keyword'">
                     <br>
-                    <span>Keyword:</span> <span class="keyword">{{ monitor.keyword }}</span>
+                    <span>{{ $t("Keyword") }}:</span> <span class="keyword">{{ monitor.keyword }}</span>
+                </span>
+                <span v-if="monitor.type === 'dns'">[{{ monitor.dns_resolve_type }}] {{ monitor.hostname }}
+                    <br>
+                    <span>{{ $t("Last Result") }}:</span> <span class="keyword">{{ monitor.dns_last_result }}</span>
                 </span>
             </p>
 
@@ -80,7 +84,7 @@
                 <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
                     <div class="row">
                         <div class="col">
-                            <h4>Certificate Info</h4>
+                            <h4>{{ $t("Certificate Info") }}</h4>
                             <table class="text-start">
                                 <tbody>
                                     <tr class="my-3">
@@ -129,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>
@@ -161,12 +182,20 @@
                 </div>
             </div>
 
-            <Confirm ref="confirmPause" @yes="pauseMonitor">
+            <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseMonitor">
-                Are you sure want to pause?
+                {{ $t("pauseMonitorMsg") }}
+            </Confirm>
+
+            <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="confirmDelete" btn-style="btn-danger" @yes="deleteMonitor">
+            <Confirm ref="confirmClearHeartbeats" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearHeartbeats">
-                Are you sure want to delete this monitor?
+                {{ $t("clearHeartbeatsMsg") }}
             </Confirm>
         </div>
     </transition>
@@ -234,7 +263,7 @@ export default {
                 return this.lastHeartBeat.ping;
             }
 
-            return "N/A"
+            return this.$t("notAvailableShort")
         },
 
         avgPing() {
@@ -242,11 +271,12 @@ export default {
                 return this.$root.avgPingList[this.monitor.id];
             }
 
-            return "N/A"
+            return this.$t("notAvailableShort")
         },
 
         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]
             }
@@ -309,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) {
@@ -320,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>
@@ -336,16 +389,20 @@ export default {
 @media (max-width: 550px) {
     .functions {
         text-align: center;
-    }
 
         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) {
@@ -360,6 +417,13 @@ export default {
         padding-left: 25px;
         padding-right: 25px;
     }
+
+    .dropdown-clear-data {
+        button {
+            display: block;
+            padding-top: 4px;
+        }
+    }
 }
 
 .url {
@@ -413,9 +477,30 @@ table {
     color: black;
 }
 
+.dropdown-clear-data {
+    float: right;
+}
+
 .dark {
     .keyword {
         color: #0a0a0a;
     }
+
+    .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/EditMonitor.vue

@@ -1,15 +1,15 @@
 <template>
-    <h1 class="mb-3">
+    <transition name="slide-fade" appear>
-        {{ pageName }}
+        <div>
-    </h1>
+            <h1 class="mb-3">{{ pageName }}</h1>
             <form @submit.prevent="submit">
                 <div class="shadow-box">
                     <div class="row">
                         <div class="col-md-6">
-                    <h2>General</h2>
+                            <h2 class="mb-2">{{ $t("General") }}</h2>
 
-                    <div class="mb-3">
+                            <div class="my-3">
-                        <label for="type" class="form-label">Monitor Type</label>
+                                <label for="type" class="form-label">{{ $t("Monitor Type") }}</label>
                                 <select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example">
                                     <option value="http">
                                         HTTP(s)
@@ -21,97 +21,167 @@
                                         Ping
                                     </option>
                                     <option value="keyword">
-                                HTTP(s) - Keyword
+                                        HTTP(s) - {{ $t("Keyword") }}
+                                    </option>
+                                    <option value="dns">
+                                        DNS
                                     </option>
                                 </select>
                             </div>
 
-                    <div class="mb-3">
+                            <div class="my-3">
-                        <label for="name" class="form-label">Friendly Name</label>
+                                <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
                                 <input id="name" v-model="monitor.name" type="text" class="form-control" required>
                             </div>
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3">
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
-                        <label for="url" class="form-label">URL</label>
+                                <label for="url" class="form-label">{{ $t("URL") }}</label>
                                 <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
                             </div>
 
-                    <div v-if="monitor.type === 'keyword' " class="mb-3">
+                            <div v-if="monitor.type === 'keyword' " class="my-3">
-                        <label for="keyword" class="form-label">Keyword</label>
+                                <label for="keyword" class="form-label">{{ $t("Keyword") }}</label>
                                 <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
                                 <div class="form-text">
-                            Search keyword in plain html or JSON response and it is case-sensitive
+                                    {{ $t("keywordDescription") }}
                                 </div>
                             </div>
 
-                    <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="mb-3">
+                            <!-- TCP Port / Ping / DNS only -->
-                        <label for="hostname" class="form-label">Hostname</label>
+                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' " class="my-3">
+                                <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                 <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
                             </div>
 
-                    <div v-if="monitor.type === 'port' " class="mb-3">
+                            <!-- For TCP Port Type -->
-                        <label for="port" class="form-label">Port</label>
+                            <div v-if="monitor.type === 'port' " class="my-3">
+                                <label for="port" class="form-label">{{ $t("Port") }}</label>
                                 <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                             </div>
 
-                    <div class="mb-3">
+                            <!-- For DNS Type -->
-                        <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
+                            <template v-if="monitor.type === 'dns'">
-                        <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="1" step="1">
+                                <div class="my-3">
+                                    <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
+                                    <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
+                                    <div class="form-text">
+                                        {{ $t("resoverserverDescription") }}
+                                    </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
+
+                                    <!-- :allow-empty="false" is not working, set a default value instead https://github.com/shentao/vue-multiselect/issues/336   -->
+                                    <VueMultiselect
+                                        id="dns_resolve_type"
+                                        v-model="monitor.dns_resolve_type"
+                                        :options="dnsresolvetypeOptions"
+                                        :multiple="false"
+                                        :close-on-select="true"
+                                        :clear-on-select="false"
+                                        :preserve-search="false"
+                                        placeholder="Pick a RR-Type..."
+                                        :preselect-first="false"
+                                        :max-height="500"
+                                        :taggable="false"
+                                    ></VueMultiselect>
+
+                                    <div class="form-text">
+                                        {{ $t("rrtypeDescription") }}
+                                    </div>
+                                </div>
+                            </template>
+
+                            <div class="my-3">
+                                <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
+                                <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1">
                             </div>
 
-                    <div class="mb-3">
+                            <div class="my-3">
-                        <label for="maxRetries" class="form-label">Retries</label>
+                                <label for="maxRetries" class="form-label">{{ $t("Retries") }}</label>
                                 <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
                                 <div class="form-text">
-                            Maximum retries before the service is marked as down and a notification is sent
+                                    {{ $t("retriesDescription") }}
                                 </div>
                             </div>
 
-                    <h2>Advanced</h2>
+                            <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3 form-check">
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
                                 <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
                                 <label class="form-check-label" for="ignore-tls">
-                            Ignore TLS/SSL error for HTTPS websites
+                                    {{ $t("ignoreTLSError") }}
                                 </label>
                             </div>
 
-                    <div class="mb-3 form-check">
+                            <div class="my-3 form-check">
                                 <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
                                 <label class="form-check-label" for="upside-down">
-                            Upside Down Mode
+                                    {{ $t("Upside Down Mode") }}
                                 </label>
                                 <div class="form-text">
-                            Flip the status upside down. If the service is reachable, it is DOWN.
+                                    {{ $t("upsideDownModeDescription") }}
                                 </div>
                             </div>
 
-                    <div>
+                            <!-- HTTP / Keyword only -->
-                        <button class="btn btn-primary" type="submit" :disabled="processing">
+                            <template v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
-                            Save
+                                <div class="my-3">
-                        </button>
+                                    <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
+                                    <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+                                    <div class="form-text">
+                                        {{ $t("maxRedirectDescription") }}
+                                    </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
+
+                                    <VueMultiselect
+                                        id="acceptedStatusCodes"
+                                        v-model="monitor.accepted_statuscodes"
+                                        :options="acceptedStatusCodeOptions"
+                                        :multiple="true"
+                                        :close-on-select="false"
+                                        :clear-on-select="false"
+                                        :preserve-search="true"
+                                        placeholder="Pick Accepted Status Codes..."
+                                        :preselect-first="false"
+                                        :max-height="600"
+                                        :taggable="true"
+                                    ></VueMultiselect>
+
+                                    <div class="form-text">
+                                        {{ $t("acceptedStatusCodesDescription") }}
+                                    </div>
+                                </div>
+                            </template>
+
+                            <div class="mt-5 mb-1">
+                                <button class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
                             </div>
                         </div>
 
                         <div class="col-md-6">
                             <div v-if="$root.isMobile" class="mt-3" />
 
-                    <h2>Notifications</h2>
+                            <h2 class="mb-2">{{ $t("Notifications") }}</h2>
                             <p v-if="$root.notificationList.length === 0">
-                        Not available, please setup.
+                                {{ $t("Not available, please setup.") }}
                             </p>
 
-                    <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch mb-3">
+                            <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
                                 <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
 
                                 <label class="form-check-label" :for=" 'notification' + notification.id">
                                     {{ notification.name }}
-                            <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                                    <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
                                 </label>
                             </div>
 
                             <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                        Setup Notification
+                                {{ $t("Setup Notification") }}
                             </button>
                         </div>
                     </div>
@@ -119,28 +189,51 @@
             </form>
 
             <NotificationDialog ref="notificationDialog" />
+        </div>
+    </transition>
 </template>
 
 <script>
 import NotificationDialog from "../components/NotificationDialog.vue";
 import { useToast } from "vue-toastification"
+import VueMultiselect from "vue-multiselect"
+import { isDev } from "../util.ts";
 const toast = useToast()
 
 export default {
     components: {
         NotificationDialog,
+        VueMultiselect,
     },
+
     data() {
         return {
             processing: false,
             monitor: {
                 notificationIDList: {},
+                // Do not add default value here, please check init() method
             },
+            acceptedStatusCodeOptions: [],
+            dnsresolvetypeOptions: [],
+
+            // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
+            ipRegexPattern: "((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))",
         }
     },
+
     computed: {
+
+        ipRegex() {
+
+            // Allow to test with simple dns server with port (127.0.0.1:5300)
+            if (! isDev) {
+                return this.ipRegexPattern;
+            }
+            return null;
+        },
+
         pageName() {
-            return (this.isAdd) ? "Add New Monitor" : "Edit"
+            return this.$t((this.isAdd) ? "Add New Monitor" : "Edit");
         },
         isAdd() {
             return this.$route.path === "/add";
@@ -150,12 +243,40 @@ export default {
         },
     },
     watch: {
-        "$route.fullPath" () {
+        "$route.fullPath"() {
             this.init();
         },
     },
     mounted() {
         this.init();
+
+        let acceptedStatusCodeOptions = [
+            "100-199",
+            "200-299",
+            "300-399",
+            "400-499",
+            "500-599",
+        ];
+
+        let dnsresolvetypeOptions = [
+            "A",
+            "AAAA",
+            "CAA",
+            "CNAME",
+            "MX",
+            "NS",
+            "PTR",
+            "SOA",
+            "SRV",
+            "TXT",
+        ];
+
+        for (let i = 100; i <= 999; i++) {
+            acceptedStatusCodeOptions.push(i.toString());
+        }
+
+        this.acceptedStatusCodeOptions = acceptedStatusCodeOptions;
+        this.dnsresolvetypeOptions = dnsresolvetypeOptions;
     },
     methods: {
         init() {
@@ -170,6 +291,10 @@ export default {
                     notificationIDList: {},
                     ignoreTls: false,
                     upsideDown: false,
+                    maxredirects: 10,
+                    accepted_statuscodes: ["200-299"],
+                    dns_resolve_type: "A",
+                    dns_resolve_server: "1.1.1.1",
                 }
             } else if (this.isEdit) {
                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
@@ -209,6 +334,40 @@ export default {
 }
 </script>
 
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style lang="scss">
+    @import "../assets/vars.scss";
+
+    .multiselect__tags {
+        border-radius: 1.5rem;
+        border: 1px solid #ced4da;
+    }
+
+    .multiselect--active .multiselect__tags {
+        border-radius: 1rem;
+    }
+
+    .multiselect__option--highlight {
+        background: $primary !important;
+    }
+
+    .multiselect__option--highlight::after {
+        background: $primary !important;
+    }
+
+    .multiselect__tag {
+        border-radius: 50rem;
+        background: $primary !important;
+    }
+
+    .dark {
+        .multiselect__tag {
+            color: $dark-font-color2;
+        }
+    }
+</style>
+
 <style scoped>
     .shadow-box {
         padding: 20px;

src/pages/Settings.vue

@@ -1,18 +1,64 @@
 <template>
-    <h1 class="mb-3">
+    <transition name="slide-fade" appear>
-        Settings
+        <div>
+            <h1 v-show="show" class="mb-3">
+                {{ $t("Settings") }}
             </h1>
 
             <div class="shadow-box">
                 <div class="row">
                     <div class="col-md-6">
-                <h2>General</h2>
+                        <h2 class="mb-2">{{ $t("Appearance") }}</h2>
+
+                        <div class="mb-3">
+                            <label for="language" class="form-label">{{ $t("Language") }}</label>
+                            <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>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="timezone" class="form-label">{{ $t("Theme") }}</label>
+
+                            <div>
+                                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                    <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
+                                    <label class="btn btn-outline-primary" for="btncheck1">{{ $t("Light") }}</label>
+
+                                    <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
+                                    <label class="btn btn-outline-primary" for="btncheck2">{{ $t("Dark") }}</label>
+
+                                    <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
+                                    <label class="btn btn-outline-primary" for="btncheck3">{{ $t("Auto") }}</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
+                            <div>
+                                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                    <input id="btncheck4" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="normal">
+                                    <label class="btn btn-outline-primary" for="btncheck4">{{ $t("Normal") }}</label>
+
+                                    <input id="btncheck5" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom">
+                                    <label class="btn btn-outline-primary" for="btncheck5">{{ $t("Bottom") }}</label>
+
+                                    <input id="btncheck6" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none">
+                                    <label class="btn btn-outline-primary" for="btncheck6">{{ $t("None") }}</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h2 class="mt-5 mb-2">{{ $t("General") }}</h2>
                         <form class="mb-3" @submit.prevent="saveGeneral">
                             <div class="mb-3">
-                        <label for="timezone" class="form-label">Timezone</label>
+                                <label for="timezone" class="form-label">{{ $t("Timezone") }}</label>
                                 <select id="timezone" v-model="$root.userTimezone" class="form-select">
                                     <option value="auto">
-                                Auto: {{ guessTimezone }}
+                                        {{ $t("Auto") }}: {{ guessTimezone }}
                                     </option>
                                     <option v-for="(timezone, index) in timezoneList" :key="index" :value="timezone.value">
                                         {{ timezone.name }}
@@ -20,85 +66,166 @@
                                 </select>
                             </div>
 
+                            <div class="mb-3">
+                                <label class="form-label">{{ $t("Search Engine Visibility") }}</label>
+
+                                <div class="form-check">
+                                    <input id="searchEngineIndexYes" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="true" required>
+                                    <label class="form-check-label" for="searchEngineIndexYes">
+                                        {{ $t("Allow indexing") }}
+                                    </label>
+                                </div>
+                                <div class="form-check">
+                                    <input id="searchEngineIndexNo" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="false" required>
+                                    <label class="form-check-label" for="searchEngineIndexNo">
+                                        {{ $t("Discourage search engines from indexing site") }}
+                                    </label>
+                                </div>
+                            </div>
+
                             <div>
                                 <button class="btn btn-primary" type="submit">
-                            Save
+                                    {{ $t("Save") }}
                                 </button>
                             </div>
                         </form>
 
                         <template v-if="loaded">
                             <template v-if="! settings.disableAuth">
-                        <h2>Change Password</h2>
+                                <h2 class="mt-5 mb-2">{{ $t("Change Password") }}</h2>
                                 <form class="mb-3" @submit.prevent="savePassword">
                                     <div class="mb-3">
-                                <label for="current-password" class="form-label">Current Password</label>
+                                        <label for="current-password" class="form-label">{{ $t("Current Password") }}</label>
                                         <input id="current-password" v-model="password.currentPassword" type="password" class="form-control" required>
                                     </div>
 
                                     <div class="mb-3">
-                                <label for="new-password" class="form-label">New Password</label>
+                                        <label for="new-password" class="form-label">{{ $t("New Password") }}</label>
                                         <input id="new-password" v-model="password.newPassword" type="password" class="form-control" required>
                                     </div>
 
                                     <div class="mb-3">
-                                <label for="repeat-new-password" class="form-label">Repeat New Password</label>
+                                        <label for="repeat-new-password" class="form-label">{{ $t("Repeat New Password") }}</label>
                                         <input id="repeat-new-password" v-model="password.repeatNewPassword" type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" required>
                                         <div class="invalid-feedback">
-                                    The repeat password does not match.
+                                            {{ $t("passwordNotMatchMsg") }}
                                         </div>
                                     </div>
 
                                     <div>
                                         <button class="btn btn-primary" type="submit">
-                                    Update Password
+                                            {{ $t("Update Password") }}
                                         </button>
                                     </div>
                                 </form>
                             </template>
 
-                    <h2>Advanced</h2>
+                            <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
 
                             <div class="mb-3">
-                        <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button>
+                                <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">Disable 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">Logout</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>
 
-            <div class="col-md-6">
+                    <div class="notification-list col-md-6">
                         <div v-if="$root.isMobile" class="mt-3" />
 
-                <h2>Notifications</h2>
+                        <h2>{{ $t("Notifications") }}</h2>
                         <p v-if="$root.notificationList.length === 0">
-                    Not available, please setup.
+                            {{ $t("Not available, please setup.") }}
                         </p>
                         <p v-else>
-                    Please assign a notification to monitor(s) to get it to work.
+                            {{ $t("notificationDescription") }}
                         </p>
 
                         <ul class="list-group mb-3" style="border-radius: 1rem;">
                             <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
                                 {{ notification.name }}<br>
-                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                                <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
                             </li>
                         </ul>
 
                         <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                    Setup Notification
+                            {{ $t("Setup Notification") }}
                         </button>
                     </div>
                 </div>
             </div>
 
+            <footer>
+                <div class="container-fluid">
+                    Uptime Kuma -
+                    {{ $t("Version") }}: {{ $root.info.version }} -
+                    <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
+                </div>
+            </footer>
+
             <NotificationDialog ref="notificationDialog" />
 
-    <Confirm ref="confirmDisableAuth" btn-style="btn-danger" yes-text="I understand, please disable" no-text="Leave" @yes="disableAuth">
+            <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
+                <template v-if="$i18n.locale === 'en' ">
                     <p>Are you sure want to <strong>disable auth</strong>?</p>
                     <p>It is for <strong>someone who have 3rd-party auth</strong> in front of Uptime Kuma such as Cloudflare Access.</p>
                     <p>Please use it carefully.</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'es-ES' ">
+                    <p>Seguro que deseas <strong>deshabilitar la autenticación</strong>?</p>
+                    <p>Es para <strong>quien implementa autenticación de terceros</strong> ante Uptime Kuma como por ejemplo Cloudflare Access.</p>
+                    <p>Por favor usar con cuidado.</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'zh-HK' ">
+                    <p>你是否確認<strong>取消登入認証</strong>？</p>
+                    <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
+                    <p>請小心使用。</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'zh-CN' ">
+                    <p>是否确定 <strong>取消登录验证</strong>？</p>
+                    <p>这是为 <strong>有第三方认证</strong> 的用户提供的功能，如 Cloudflare Access</p>
+                    <p>请谨慎使用！</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'de-DE' ">
+                    <p>Bist du sicher das du die <strong>Authentifizierung deaktivieren</strong> möchtest?</p>
+                    <p>Es ist für <strong>jemanden der eine externe Authentifizierung</strong> vor Uptime Kuma geschaltet hat, wie z.B. Cloudflare Access.</p>
+                    <p>Bitte mit Vorsicht nutzen.</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'sr' ">
+                    <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
+                    <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
+                    <p>Молим Вас користите ово са пажњом.</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'sr-latn' ">
+                    <p>Da li ste sigurni da želite da <strong>isključite autentifikaciju</strong>?</p>
+                    <p>To je za <strong>one koji imaju dodatu autentifikaciju</strong> ispred Uptime Kuma kao na primer Cloudflare Access.</p>
+                    <p>Molim Vas koristite ovo sa pažnjom.</p>
+                </template>
+
+                <template v-if="$i18n.locale === 'ko-KR' ">
+                    <p>정말로 <strong>인증 기능을 끌까요</strong>?</p>
+                    <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>
 </template>
 
 <script>
@@ -123,7 +250,7 @@ export default {
         return {
             timezoneList: timezoneList(),
             guessTimezone: dayjs.tz.guess(),
-
+            show: true,
             invalidPassword: false,
             password: {
                 currentPassword: "",
@@ -140,6 +267,10 @@ export default {
         "password.repeatNewPassword"() {
             this.invalidPassword = false;
         },
+
+        "$i18n.locale"() {
+            localStorage.locale = this.$i18n.locale;
+        },
     },
 
     mounted() {
@@ -150,7 +281,7 @@ export default {
 
         saveGeneral() {
             localStorage.timezone = this.$root.userTimezone;
-            toast.success("Saved.")
+            this.saveSettings();
         },
 
         savePassword() {
@@ -171,6 +302,11 @@ export default {
         loadSettings() {
             this.$root.getSocket().emit("getSettings", (res) => {
                 this.settings = res.data;
+
+                if (this.settings.searchEngineIndex === undefined) {
+                    this.settings.searchEngineIndex = false;
+                }
+
                 this.loaded = true;
             })
         },
@@ -186,6 +322,10 @@ export default {
             this.$refs.confirmDisableAuth.show();
         },
 
+        confirmClearStatistics() {
+            this.$refs.confirmClearStatistics.show();
+        },
+
         disableAuth() {
             this.settings.disableAuth = true;
             this.saveSettings();
@@ -197,21 +337,50 @@ export default {
             this.$root.storage().removeItem("token");
         },
 
+        clearStatistics() {
+            this.$root.clearStatistics((res) => {
+                if (res.ok) {
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
     },
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-    .shadow-box {
+@import "../assets/vars.scss";
+
+.shadow-box {
     padding: 20px;
+}
+
+.btn-check:active + .btn-outline-primary,
+.btn-check:checked + .btn-outline-primary,
+.btn-check:hover + .btn-outline-primary {
+    color: #fff;
+}
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
     }
-    .list-group-item{
+
-        background-color: var(--background-4);
-        color: var(--main-font-color);
-    }
     .btn-check:active + .btn-outline-primary,
     .btn-check:checked + .btn-outline-primary,
     .btn-check:hover + .btn-outline-primary {
         color: #000;
     }
+}
+
+footer {
+    color: #aaa;
+    font-size: 13px;
+    margin-top: 20px;
+    padding-bottom: 30px;
+    text-align: center;
+}
 </style>

src/pages/Setup.vue

@@ -10,26 +10,35 @@
                 </div>
 
                 <p class="mt-3">
-                    Create your admin account
+                    {{ $t("Create your admin account") }}
                 </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">Username</label>
+                    <label for="floatingInput">{{ $t("Username") }}</label>
                 </div>
 
                 <div class="form-floating mt-3">
                     <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required>
-                    <label for="floatingPassword">Password</label>
+                    <label for="floatingPassword">{{ $t("Password") }}</label>
                 </div>
 
                 <div class="form-floating mt-3">
                     <input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required>
-                    <label for="repeat">Repeat Password</label>
+                    <label for="repeat">{{ $t("Repeat Password") }}</label>
                 </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) {