update to 1.11.0

Updated translation

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -1,7 +1,7 @@
 name: 🚀 Feature Request
 description: "Submit a proposal for a new feature"
 #title: "[Feature] "
-labels: [enhancement]
+labels: [feature-request]
 body:
   - type: checkboxes
     id: no-duplicate-issues

.github/PULL_REQUEST_TEMPLATE.md

@@ -25,4 +25,4 @@ Please delete options that are not relevant.
 
 ## Screenshots (if any)
 
-Please do not use any external image service. Instead, just paste in or drag and drop the image here and it will be uploaded automatically.
+Please do not use any external image service. Instead, just paste in or drag and drop the image here, and it will be uploaded automatically.

CONTRIBUTING.md

@@ -1,8 +1,8 @@
 # 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.
+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 structured 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 project was created with vite.js (vue3). Then I created a subdirectory called "server" for server part. Both frontend and backend share the same package.json.
 
 The frontend code build into "dist" directory. The server (express.js) exposes the "dist" directory as root of the endpoint. This is how production is working.
 
@@ -27,11 +27,10 @@ The frontend code build into "dist" directory. The server (express.js) exposes t
 
 ## 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 into the master branch once it is tested.
+Generally, if the pull request is working fine, and it does not affect any existing logic, workflow and performance, I will merge into the master branch once it is tested.
 
 If you are not sure whether I will accept your pull request, feel free to create an empty pull request draft first.
 
-
 ### Recommended Pull Request Guideline
 
 1. Fork the project
@@ -41,7 +40,7 @@ If you are not sure whether I will accept your pull request, feel free to create
    `git commit -m "[empty commit] pull request for <YOUR TASK NAME>" --allow-empty`
 1. Push to your fork repo
 1. Create a pull request: https://github.com/louislam/uptime-kuma/compare
-1. Write a proper description   
+1. Write a proper description
 1. Click "Change to draft"
 
 ### Pull Request Examples
@@ -66,14 +65,13 @@ I do not have such knowledge to test it.
 
 #### ⚠ Low Priority - Harsh Mode
 
-Some pull requests are required to modifiy the core. To be honest, I do not want anyone to try to do that, because it would spend a lot of your time. I will review your pull request harshly. Also you may need to write a lot of unit tests to ensure that there is no breaking change.
+Some pull requests are required to modify the core. To be honest, I do not want anyone to try to do that, because it would spend a lot of your time. I will review your pull request harshly. Also, you may need to write a lot of unit tests to ensure that there is no breaking change.
 
 - Touch large parts of code of any very important features
 - Touch monitoring logic
 - Drop a table or drop a column for any reason
 - Touch the entry point of Docker or Node.js
-- Modifiy auth
-
+- Modify auth
 
 #### *️⃣ Low Priority
 
@@ -114,7 +112,7 @@ I personally do not like something need to learn so much and need to config so m
 
 - Node.js >= 14
 - Git
-- IDE that supports ESLint and EditorConfig (I am using Intellji Idea)
+- IDE that supports ESLint and EditorConfig (I am using IntelliJ IDEA)
 - A SQLite tool (SQLite Expert Personal is suggested)
 
 ## Install dependencies
@@ -141,9 +139,9 @@ express.js is just used for serving the frontend built files (index.html, .js an
 
 - model/ (Object model, auto mapping to the database table name)
 - modules/ (Modified 3rd-party modules)
-- notification-providers/ (indivdual notification logic)
+- notification-providers/ (individual notification logic)
 - routers/ (Express Routers)
-- scoket-handler (Socket.io Handlers)
+- socket-handler (Socket.io Handlers)
 - server.js (Server main logic)
 
 ## How to start the Frontend Dev Server
@@ -201,7 +199,7 @@ ncu -u -t patch
 npm install
 ```
 
-Since previously updating vite 2.5.10 to 2.6.0 broke the application completely, from now on, it should update patch release version only.
+Since previously updating Vite 2.5.10 to 2.6.0 broke the application completely, from now on, it should update patch release version only.
 
 Patch release = the third digit ([Semantic Versioning](https://semver.org/))
 
@@ -209,20 +207,19 @@ Patch release = the third digit ([Semantic Versioning](https://semver.org/))
 
 Please read: https://github.com/louislam/uptime-kuma/tree/master/src/languages
 
-
 ## Wiki
 
-Since there is no way to make a pull request to wiki's repo, I have setup another repo to do that.
+Since there is no way to make a pull request to wiki's repo, I have set up another repo to do that.
 
 https://github.com/louislam/uptime-kuma-wiki
 
-
-## Maintainer 
+## Maintainer
 
 Check the latest issues and pull requests:
 https://github.com/louislam/uptime-kuma/issues?q=sort%3Aupdated-desc
 
 ### Release Procedures
+
 1. Draft a release note
 1. Make sure the repo is cleared
 1. `npm run update-version 1.X.X`
@@ -234,22 +231,24 @@ https://github.com/louislam/uptime-kuma/issues?q=sort%3Aupdated-desc
 1. SSH to demo site server and update to 1.X.X
 
 Checking:
+
 - Check all tags is fine on https://hub.docker.com/r/louislam/uptime-kuma/tags
 - Try the Docker image with tag 1.X.X (Clean install / amd64 / arm64 / armv7)
-- Try clean install with Node.js 
+- Try clean installation with Node.js
 
 ### Release Wiki
 
 #### Setup Repo
-```
+
+```bash
 git clone https://github.com/louislam/uptime-kuma-wiki.git
 cd uptime-kuma-wiki
 git remote add production https://github.com/louislam/uptime-kuma.wiki.git
 ```
 
 #### Push to Production Wiki
-```
+
+```bash
 git pull
 git push production master
 ```
-

README.md

@@ -17,13 +17,13 @@ Try it!
 
 https://demo.uptime.kuma.pet
 
-It is a temporary live demo, all data will be deleted after 10 minutes. The server is located at Tokyo, so if you live far from there it may affect your experience. I suggest that you should install and try it out for the best demo experience.
+It is a temporary live demo, all data will be deleted after 10 minutes. The server is located in Tokyo, so if you live far from there, it may affect your experience. I suggest that you should install and try it out for the best demo experience.
 
 VPS is sponsored by Uptime Kuma sponsors on [Open Collective](https://opencollective.com/uptime-kuma)! Thank you so much!
 
 ## ⭐ Features
 
-* Monitoring uptime for HTTP(s) / TCP / Ping / DNS Record / Push.
+* Monitoring uptime for HTTP(s) / TCP / HTTP(s) Keyword / Ping / DNS Record / Push / Steam Game Server.
 * Fancy, Reactive, Fast UI/UX.
 * Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and [70+ notification services, click here for the full list](https://github.com/louislam/uptime-kuma/tree/master/src/components/notifications).
 * 20 second intervals.
@@ -67,7 +67,7 @@ Browse to http://localhost:3001 after starting.
 
 ### Advanced Installation
 
-If you need more options or need to browse via a reserve proxy, please read:
+If you need more options or need to browse via a reverse proxy, please read:
 
 https://github.com/louislam/uptime-kuma/wiki/%F0%9F%94%A7-How-to-Install
 
@@ -120,7 +120,7 @@ If you love this project, please consider giving me a ⭐.
 
 ### Issues Page
 
-You can discuss or ask for help in [Issues](https://github.com/louislam/uptime-kuma/issues).
+You can discuss or ask for help in [issues](https://github.com/louislam/uptime-kuma/issues).
 
 ### Subreddit
 
@@ -132,8 +132,8 @@ https://www.reddit.com/r/UptimeKuma/
 
 If you want to report a bug or request a new feature. Free feel to open a [new issue](https://github.com/louislam/uptime-kuma/issues).
 
-If you want to translate Uptime Kuma into your langauge, please read: https://github.com/louislam/uptime-kuma/tree/master/src/languages
+If you want to translate Uptime Kuma into your language, please read: https://github.com/louislam/uptime-kuma/tree/master/src/languages
 
 If you want to modify Uptime Kuma, this guideline may be useful for you: https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md
 
-English proofreading is needed too because my grammar is not that great sadly. Feel free to correct my grammar in this readme, source code, or wiki.
+English proofreading is needed too because my grammar is not that great, sadly. Feel free to correct my grammar in this README, source code, or wiki.

config/jest-debug-env.js

@@ -0,0 +1,33 @@
+const PuppeteerEnvironment = require("jest-environment-puppeteer");
+const util = require("util");
+
+class DebugEnv extends PuppeteerEnvironment {
+    async handleTestEvent(event, state) {
+        const ignoredEvents = [
+            "setup",
+            "add_hook",
+            "start_describe_definition",
+            "add_test",
+            "finish_describe_definition",
+            "run_start",
+            "run_describe_start",
+            "test_start",
+            "hook_start",
+            "hook_success",
+            "test_fn_start",
+            "test_fn_success",
+            "test_done",
+            "run_describe_finish",
+            "run_finish",
+            "teardown",
+            "test_fn_failure",
+        ];
+        if (!ignoredEvents.includes(event.name)) {
+            console.log(
+                new Date().toString() + ` Unhandled event [${event.name}] ` + util.inspect(event)
+            );
+        }
+    }
+}
+
+module.exports = DebugEnv;

config/jest-puppeteer.config.js

@@ -1,6 +1,20 @@
 module.exports = {
     "launch": {
+        "dumpio": true,
+        "slowMo": 500,
         "headless": process.env.HEADLESS_TEST || false,
         "userDataDir": "./data/test-chrome-profile",
+        args: [
+            "--disable-setuid-sandbox",
+            "--disable-gpu",
+            "--disable-dev-shm-usage",
+            "--no-default-browser-check",
+            "--no-experiments",
+            "--no-first-run",
+            "--no-pings",
+            "--no-sandbox",
+            "--no-zygote",
+            "--single-process",
+        ],
     }
 };

config/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
         "__DEV__": true
     },
     "testRegex": "./test/e2e.spec.js",
+    "testEnvironment": "./config/jest-debug-env.js",
     "rootDir": "..",
     "testTimeout": 30000,
 };

db/patch-monitor-basic-auth.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 basic_auth_user TEXT default null;
+
+ALTER TABLE monitor
+    ADD basic_auth_pass TEXT default null;
+
+COMMIT;

docker/alpine-base.dockerfile

@@ -4,5 +4,5 @@ WORKDIR /app
 
 # Install apprise, iputils for non-root ping, setpriv
 RUN apk add --no-cache iputils setpriv dumb-init python3 py3-cryptography py3-pip py3-six py3-yaml py3-click py3-markdown py3-requests py3-requests-oauthlib && \
-    pip3 --no-cache-dir install apprise && \
+    pip3 --no-cache-dir install apprise==0.9.6 && \
     rm -rf /root/.cache

docker/debian-base.dockerfile

@@ -4,9 +4,9 @@ FROM node:14-buster-slim
 WORKDIR /app
 
 # Install Apprise, add sqlite3 cli for debugging in the future, iputils-ping for ping, util-linux for setpriv
-# Stupid python3 and python3-pip actually install a lot of useless things into Debian, specific --no-install-recommends to skip them, make the base even smaller than alpine!
+# Stupid python3 and python3-pip actually install a lot of useless things into Debian, specify --no-install-recommends to skip them, make the base even smaller than alpine!
 RUN apt update && \
     apt --yes --no-install-recommends install python3 python3-pip python3-cryptography python3-six python3-yaml python3-click python3-markdown python3-requests python3-requests-oauthlib \
         sqlite3 iputils-ping util-linux dumb-init && \
-    pip3 --no-cache-dir install apprise && \
+    pip3 --no-cache-dir install apprise==0.9.6 && \
     rm -rf /var/lib/apt/lists/*

extra/remove-2fa.js

@@ -0,0 +1,60 @@
+console.log("== Uptime Kuma Remove 2FA Tool ==");
+console.log("Loading the database");
+
+const Database = require("../server/database");
+const { R } = require("redbean-node");
+const readline = require("readline");
+const TwoFA = require("../server/2fa");
+const args = require("args-parser")(process.argv);
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+const main = async () => {
+    Database.init(args);
+    await Database.connect();
+
+    try {
+        // No need to actually reset the password for testing, just make sure no connection problem. It is ok for now.
+        if (!process.env.TEST_BACKEND) {
+            const user = await R.findOne("user");
+            if (! user) {
+                throw new Error("user not found, have you installed?");
+            }
+
+            console.log("Found user: " + user.username);
+
+            let ans = await question("Are you sure want to remove 2FA? [y/N]");
+
+            if (ans.toLowerCase() === "y") {
+                await TwoFA.disable2FA(user.id);
+                console.log("2FA has been removed successfully.");
+            }
+
+        }
+    } catch (e) {
+        console.error("Error: " + e.message);
+    }
+
+    await Database.close();
+    rl.close();
+
+    console.log("Finished.");
+};
+
+function question(question) {
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            resolve(answer);
+        });
+    });
+}
+
+if (!process.env.TEST_BACKEND) {
+    main();
+}
+
+module.exports = {
+    main,
+};

package.json

@@ -1,13 +1,13 @@
 {
     "name": "uptime-kuma",
-    "version": "1.10.1",
+    "version": "1.11.0",
     "license": "MIT",
     "repository": {
         "type": "git",
         "url": "https://github.com/louislam/uptime-kuma.git"
     },
     "engines": {
-        "node": "14.*"
+        "node": "14.* || >=16.*"
     },
     "scripts": {
         "install-legacy": "npm install --legacy-peer-deps",
@@ -22,7 +22,7 @@
         "build": "vite build --config ./config/vite.config.js",
         "test": "node test/prepare-test-server.js && node server/server.js --port=3002 --data-dir=./data/test/ --test",
         "test-with-build": "npm run build && npm test",
-        "jest": "node test/prepare-jest.js && npm run jest-frontend && npm run jest-backend && jest --config=./config/jest.config.js",
+        "jest": "node test/prepare-jest.js && npm run jest-frontend && npm run jest-backend",
         "jest-frontend": "cross-env TEST_FRONTEND=1 jest --config=./config/jest-frontend.config.js",
         "jest-backend": "cross-env TEST_BACKEND=1 jest --config=./config/jest-backend.config.js",
         "tsc": "tsc",
@@ -30,17 +30,18 @@
         "build-docker": "npm run build-docker-debian && npm run build-docker-alpine",
         "build-docker-alpine-base": "docker buildx build -f docker/alpine-base.dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:base-alpine . --push",
         "build-docker-debian-base": "docker buildx build -f docker/debian-base.dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:base-debian . --push",
-        "build-docker-alpine": "docker buildx build -f docker/dockerfile-alpine --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:alpine -t louislam/uptime-kuma:1-alpine -t louislam/uptime-kuma:1.10.1-alpine --target release . --push",
-        "build-docker-debian": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.10.1 -t louislam/uptime-kuma:debian -t louislam/uptime-kuma:1-debian -t louislam/uptime-kuma:1.10.1-debian --target release . --push",
+        "build-docker-alpine": "docker buildx build -f docker/dockerfile-alpine --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:alpine -t louislam/uptime-kuma:1-alpine -t louislam/uptime-kuma:1.11.0-alpine --target release . --push",
+        "build-docker-debian": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.11.0 -t louislam/uptime-kuma:debian -t louislam/uptime-kuma:1-debian -t louislam/uptime-kuma:1.11.0-debian --target release . --push",
         "build-docker-nightly": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly --target nightly . --push",
         "build-docker-nightly-alpine": "docker buildx build -f docker/dockerfile-alpine --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly-alpine --target nightly . --push",
         "build-docker-nightly-amd64": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push --progress plain",
         "upload-artifacts": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:upload-artifact --build-arg GITHUB_TOKEN --target upload-artifact . --progress plain",
-        "setup": "git checkout 1.10.1 && npm ci --production && npm run download-dist",
+        "setup": "git checkout 1.11.0 && npm ci --production && npm run download-dist",
         "download-dist": "node extra/download-dist.js",
         "update-version": "node extra/update-version.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
+        "remove-2fa": "node extra/remove-2fa.js",
         "compile-install-script": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./extra/compile-install-script.ps1",
         "test-install-script-centos7": "npm run compile-install-script && docker build --progress plain -f test/test_install_script/centos7.dockerfile .",
         "test-install-script-alpine3": "npm run compile-install-script && docker build --progress plain -f test/test_install_script/alpine3.dockerfile .",
@@ -49,20 +50,21 @@
         "test-nodejs16": "docker build --progress plain -f test/ubuntu-nodejs16.dockerfile .",
         "simple-dns-server": "node extra/simple-dns-server.js",
         "update-language-files-with-base-lang": "cd extra/update-language-files && node index.js %npm_config_base_lang% && eslint ../../src/languages/**.js --fix",
-        "update-language-files": "cd extra/update-language-files && node index.js && eslint ../../src/languages/**.js --fix"
+        "update-language-files": "cd extra/update-language-files && node index.js && eslint ../../src/languages/**.js --fix",
+        "ncu-patch": "ncu -u -t patch"
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "~1.2.36",
         "@fortawesome/free-regular-svg-icons": "~5.15.4",
         "@fortawesome/free-solid-svg-icons": "~5.15.4",
-        "@fortawesome/vue-fontawesome": "~3.0.0-4",
-        "@louislam/sqlite3": "~6.0.0",
+        "@fortawesome/vue-fontawesome": "~3.0.0-5",
+        "@louislam/sqlite3": "~6.0.1",
         "@popperjs/core": "~2.10.2",
         "args-parser": "~1.3.0",
         "axios": "~0.21.4",
         "bcryptjs": "~2.4.3",
         "bootstrap": "5.1.3",
-        "bree": "~6.3.1",
+        "bree": "~7.1.0",
         "chardet": "^1.3.0",
         "chart.js": "~3.6.0",
         "chartjs-adapter-dayjs": "~1.0.0",
@@ -73,7 +75,7 @@
         "express": "~4.17.1",
         "express-basic-auth": "~1.2.0",
         "form-data": "~4.0.0",
-        "http-graceful-shutdown": "~3.1.4",
+        "http-graceful-shutdown": "~3.1.5",
         "iconv-lite": "^0.6.3",
         "jsonwebtoken": "~8.5.1",
         "jwt-decode": "^3.1.2",
@@ -82,10 +84,10 @@
         "notp": "~2.0.3",
         "password-hash": "~1.2.2",
         "postcss-rtlcss": "~3.4.1",
-        "postcss-scss": "~4.0.1",
+        "postcss-scss": "~4.0.2",
         "prom-client": "~13.2.0",
         "prometheus-api-metrics": "~3.2.0",
-        "qrcode": "~1.4.4",
+        "qrcode": "~1.5.0",
         "redbean-node": "0.1.3",
         "socket.io": "~4.2.0",
         "socket.io-client": "~4.2.0",
@@ -102,30 +104,30 @@
         "vue-image-crop-upload": "~3.0.3",
         "vue-multiselect": "~3.0.0-alpha.2",
         "vue-qrcode": "~1.0.0",
-        "vue-router": "~4.0.11",
-        "vue-toastification": "~2.0.0-rc.1",
+        "vue-router": "~4.0.12",
+        "vue-toastification": "~2.0.0-rc.5",
         "vuedraggable": "~4.1.0"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "~7.15.7",
+        "@babel/eslint-parser": "~7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@types/bootstrap": "~5.1.6",
-        "@vitejs/plugin-legacy": "~1.6.2",
+        "@vitejs/plugin-legacy": "~1.6.3",
         "@vitejs/plugin-vue": "~1.9.4",
-        "@vue/compiler-sfc": "~3.2.20",
+        "@vue/compiler-sfc": "~3.2.22",
         "babel-plugin-rewire": "~1.2.0",
-        "core-js": "~3.18.1",
+        "core-js": "~3.18.3",
         "cross-env": "~7.0.3",
         "dns2": "~2.0.1",
         "eslint": "~7.32.0",
         "eslint-plugin-vue": "~7.18.0",
-        "jest": "~27.2.4",
+        "jest": "~27.2.5",
         "jest-puppeteer": "~6.0.0",
         "puppeteer": "~10.4.0",
         "sass": "~1.42.1",
         "stylelint": "~13.13.1",
         "stylelint-config-standard": "~22.0.0",
-        "typescript": "~4.4.3",
-        "vite": "~2.6.13"
+        "typescript": "~4.4.4",
+        "vite": "~2.6.14"
     }
 }

server/2fa.js

@@ -0,0 +1,14 @@
+const { checkLogin } = require("./util-server");
+const { R } = require("redbean-node");
+
+class TwoFA {
+
+    static async disable2FA(userID) {
+        return await R.exec("UPDATE `user` SET twofa_status = 0 WHERE id = ? ", [
+            userID,
+        ]);
+    }
+
+}
+
+module.exports = TwoFA;

server/database.js

@@ -52,6 +52,7 @@ class Database {
         "patch-http-monitor-method-body-and-headers.sql": true,
         "patch-2fa-invalidate-used-token.sql": true,
         "patch-notification_sent_history.sql": true,
+        "patch-monitor-basic-auth.sql": true,
     }
 
     /**
@@ -79,7 +80,7 @@ class Database {
         console.log(`Data Dir: ${Database.dataDir}`);
     }
 
-    static async connect() {
+    static async connect(testMode = false) {
         const acquireConnectionTimeout = 120 * 1000;
 
         const Dialect = require("knex/lib/dialects/sqlite3/index.js");
@@ -112,8 +113,13 @@ class Database {
         await R.autoloadModels("./server/model");
 
         await R.exec("PRAGMA foreign_keys = ON");
-        // Change to WAL
-        await R.exec("PRAGMA journal_mode = WAL");
+        if (testMode) {
+            // Change to MEMORY
+            await R.exec("PRAGMA journal_mode = MEMORY");
+        } else {
+            // Change to WAL
+            await R.exec("PRAGMA journal_mode = WAL");
+        }
         await R.exec("PRAGMA cache_size = -12000");
         await R.exec("PRAGMA auto_vacuum = FULL");
 

server/model/monitor.js

@@ -58,6 +58,8 @@ class Monitor extends BeanModel {
             method: this.method,
             body: this.body,
             headers: this.headers,
+            basic_auth_user: this.basic_auth_user,
+            basic_auth_pass: this.basic_auth_pass,
             hostname: this.hostname,
             port: this.port,
             maxretries: this.maxretries,
@@ -80,6 +82,15 @@ class Monitor extends BeanModel {
         };
     }
 
+    /**
+     * Encode user and password to Base64 encoding
+     * for HTTP "basic" auth, as per RFC-7617
+     * @returns {string}
+     */
+    encodeBase64(user, pass) {
+        return Buffer.from(user + ":" + pass).toString("base64");
+    }
+
     /**
      * Parse to boolean
      * @returns {boolean}
@@ -141,7 +152,16 @@ class Monitor extends BeanModel {
                     // Do not do any queries/high loading things before the "bean.ping"
                     let startTime = dayjs().valueOf();
 
+                    // HTTP basic auth
+                    let basicAuthHeader = {};
+                    if (this.basic_auth_user) {
+                        basicAuthHeader = {
+                            "Authorization": "Basic " + this.encodeBase64(this.basic_auth_user, this.basic_auth_pass),
+                        };
+                    }
+
                     debug(`[${this.name}] Prepare Options for axios`);
+
                     const options = {
                         url: this.url,
                         method: (this.method || "get").toLowerCase(),
@@ -151,6 +171,7 @@ class Monitor extends BeanModel {
                             "Accept": "*/*",
                             "User-Agent": "Uptime-Kuma/" + version,
                             ...(this.headers ? JSON.parse(this.headers) : {}),
+                            ...(basicAuthHeader),
                         },
                         httpsAgent: new https.Agent({
                             maxCachedSessions: 0,      // Use Custom agent to disable session reuse (https://github.com/nodejs/node/issues/3940)
@@ -275,6 +296,9 @@ class Monitor extends BeanModel {
                     debug("heartbeatCount" + heartbeatCount + " " + time);
 
                     if (heartbeatCount <= 0) {
+                        // Fix #922, since previous heartbeat could be inserted by api, it should get from database
+                        previousBeat = await Monitor.getPreviousHeartbeat(this.id);
+
                         throw new Error("No heartbeat in the time window");
                     } else {
                         // No need to insert successful heartbeat for push type, so end here
@@ -730,6 +754,15 @@ class Monitor extends BeanModel {
             debug("No notification, no need to send cert notification");
         }
     }
+
+    static async getPreviousHeartbeat(monitorID) {
+        return await R.getRow(`
+            SELECT status, time FROM heartbeat
+            WHERE id = (select MAX(id) from heartbeat where monitor_id = ?)
+        `, [
+            monitorID
+        ]);
+    }
 }
 
 module.exports = Monitor;

server/notification-providers/dingding.js

@@ -14,8 +14,8 @@ class DingDing extends NotificationProvider {
                 let params = {
                     msgtype: "markdown",
                     markdown: {
-                        title: monitorJSON["name"],
-                        text: `## [${this.statusToString(heartbeatJSON["status"])}] \n > ${heartbeatJSON["msg"]}  \n > Time(UTC):${heartbeatJSON["time"]}`,
+                        title: `[${this.statusToString(heartbeatJSON["status"])}] ${monitorJSON["name"]}`,
+                        text: `## [${this.statusToString(heartbeatJSON["status"])}] ${monitorJSON["name"]} \n > ${heartbeatJSON["msg"]}  \n > Time(UTC):${heartbeatJSON["time"]}`,
                     }
                 };
                 if (this.sendToDingDing(notification, params)) {

server/notification-providers/pushover.js

@@ -7,12 +7,12 @@ class Pushover extends NotificationProvider {
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
         let okMsg = "Sent Successfully.";
-        let pushoverlink = "https://api.pushover.net/1/messages.json"
+        let pushoverlink = "https://api.pushover.net/1/messages.json";
 
         try {
             if (heartbeatJSON == null) {
                 let data = {
-                    "message": "<b>Uptime Kuma Pushover testing successful.</b>",
+                    "message": msg,
                     "user": notification.pushoveruserkey,
                     "token": notification.pushoverapptoken,
                     "sound": notification.pushoversounds,
@@ -21,8 +21,8 @@ class Pushover extends NotificationProvider {
                     "retry": "30",
                     "expire": "3600",
                     "html": 1,
-                }
-                await axios.post(pushoverlink, data)
+                };
+                await axios.post(pushoverlink, data);
                 return okMsg;
             }
 
@@ -36,11 +36,11 @@ class Pushover extends NotificationProvider {
                 "retry": "30",
                 "expire": "3600",
                 "html": 1,
-            }
-            await axios.post(pushoverlink, data)
+            };
+            await axios.post(pushoverlink, data);
             return okMsg;
         } catch (error) {
-            this.throwGeneralAxiosError(error)
+            this.throwGeneralAxiosError(error);
         }
 
     }

server/notification-providers/serwersms.js

@@ -0,0 +1,44 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class SerwerSMS extends NotificationProvider {
+
+    name = "serwersms";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully.";
+
+        try {
+            let config = {
+                headers: {
+                    "Content-Type": "application/json",
+                }
+            };
+            let data = {
+                "username": notification.serwersmsUsername,
+                "password": notification.serwersmsPassword,
+                "phone": notification.serwersmsPhoneNumber,
+                "text": msg.replace(/[^\x00-\x7F]/g, ""),
+                "sender": notification.serwersmsSenderName,
+            };
+
+            let resp = await axios.post("https://api2.serwersms.pl/messages/send_sms", data, config);
+
+            if (!resp.data.success) {
+                if (resp.data.error) {
+                    let error = `SerwerSMS.pl API returned error code ${resp.data.error.code} (${resp.data.error.type}) with error message: ${resp.data.error.message}`;
+                    this.throwGeneralAxiosError(error);
+                } else {
+                    let error = "SerwerSMS.pl API returned an unexpected response";
+                    this.throwGeneralAxiosError(error);
+                }
+            }
+
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = SerwerSMS;

server/notification-providers/stackfield.js

@@ -0,0 +1,41 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const { setting } = require("../util-server");
+const { getMonitorRelativeURL } = require("../../src/util");
+
+class Stackfield extends NotificationProvider {
+
+    name = "stackfield";
+
+    async send(notification, msg, monitorJSON = null) {
+        let okMsg = "Sent Successfully.";
+        try {
+            // Stackfield message formatting: https://www.stackfield.com/help/formatting-messages-2001
+
+            let textMsg = "+Uptime Kuma Alert+";
+
+            if (monitorJSON && monitorJSON.name) {
+                textMsg += `\n*${monitorJSON.name}*`;
+            }
+
+            textMsg += `\n${msg}`;
+
+            const baseURL = await setting("primaryBaseURL");
+            if (baseURL) {
+                textMsg += `\n${baseURL + getMonitorRelativeURL(monitorJSON.id)}`;
+            }
+
+            const data = {
+                "Title": textMsg,
+            };
+
+            await axios.post(notification.stackfieldwebhookURL, data);
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+
+    }
+}
+
+module.exports = Stackfield;

server/notification.js

@@ -23,6 +23,8 @@ const Feishu = require("./notification-providers/feishu");
 const AliyunSms = require("./notification-providers/aliyun-sms");
 const DingDing = require("./notification-providers/dingding");
 const Bark = require("./notification-providers/bark");
+const SerwerSMS = require("./notification-providers/serwersms");
+const Stackfield = require("./notification-providers/stackfield");
 
 class Notification {
 
@@ -58,6 +60,8 @@ class Notification {
             new Telegram(),
             new Webhook(),
             new Bark(),
+            new SerwerSMS(),
+            new Stackfield(),
         ];
 
         for (let item of list) {

server/routers/api-router.js

@@ -31,12 +31,7 @@ router.get("/api/push/:pushToken", async (request, response) => {
             throw new Error("Monitor not found or not active.");
         }
 
-        const previousHeartbeat = await R.getRow(`
-            SELECT status, time FROM heartbeat
-            WHERE id = (select MAX(id) from heartbeat where monitor_id = ?)
-        `, [
-            monitor.id
-        ]);
+        const previousHeartbeat = await Monitor.getPreviousHeartbeat(monitor.id);
 
         let status = UP;
         if (monitor.isUpsideDown()) {
@@ -157,8 +152,11 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request,
                             JOIN tag
                             ON monitor_tag.tag_id = tag.id
                             WHERE monitor_tag.monitor_id = ?`, [monitor.id]
-                        );
-                    return {...monitor, tags: tags}
+                    );
+                    return {
+                        ...monitor,
+                        tags: tags
+                    };
                 }));
             }
 

server/server.js

@@ -120,6 +120,7 @@ module.exports.io = io;
 const { sendNotificationList, sendHeartbeatList, sendImportantHeartbeatList, sendInfo } = require("./client");
 const { statusPageSocketHandler } = require("./socket-handlers/status-page-socket-handler");
 const databaseSocketHandler = require("./socket-handlers/database-socket-handler");
+const TwoFA = require("./2fa");
 
 app.use(express.json());
 
@@ -176,7 +177,7 @@ exports.entryPage = "dashboard";
 
 (async () => {
     Database.init(args);
-    await initDatabase();
+    await initDatabase(testMode);
 
     exports.entryPage = await setting("entryPage");
 
@@ -420,10 +421,7 @@ exports.entryPage = "dashboard";
         socket.on("disable2FA", async (callback) => {
             try {
                 checkLogin(socket);
-
-                await R.exec("UPDATE `user` SET twofa_status = 0 WHERE id = ? ", [
-                    socket.userID,
-                ]);
+                await TwoFA.disable2FA(socket.userID);
 
                 callback({
                     ok: true,
@@ -541,8 +539,8 @@ exports.entryPage = "dashboard";
 
                 await updateMonitorNotification(bean.id, notificationIDList);
 
-                await startMonitor(socket.userID, bean.id);
                 await sendMonitorList(socket);
+                await startMonitor(socket.userID, bean.id);
 
                 callback({
                     ok: true,
@@ -575,6 +573,8 @@ exports.entryPage = "dashboard";
                 bean.method = monitor.method;
                 bean.body = monitor.body;
                 bean.headers = monitor.headers;
+                bean.basic_auth_user = monitor.basic_auth_user;
+                bean.basic_auth_pass = monitor.basic_auth_pass;
                 bean.interval = monitor.interval;
                 bean.retryInterval = monitor.retryInterval;
                 bean.hostname = monitor.hostname;
@@ -1139,6 +1139,8 @@ exports.entryPage = "dashboard";
                                 method: monitorListData[i].method || "GET",
                                 body: monitorListData[i].body,
                                 headers: monitorListData[i].headers,
+                                basic_auth_user: monitorListData[i].basic_auth_user,
+                                basic_auth_pass: monitorListData[i].basic_auth_pass,
                                 interval: monitorListData[i].interval,
                                 retryInterval: retryInterval,
                                 hostname: monitorListData[i].hostname,
@@ -1417,14 +1419,14 @@ async function getMonitorJSONList(userID) {
     return result;
 }
 
-async function initDatabase() {
+async function initDatabase(testMode = false) {
     if (! fs.existsSync(Database.path)) {
         console.log("Copying Database");
         fs.copyFileSync(Database.templatePath, Database.path);
     }
 
     console.log("Connecting to the Database");
-    await Database.connect();
+    await Database.connect(testMode);
     console.log("Connected");
 
     // Patch the database

src/assets/vars.scss

@@ -12,6 +12,7 @@ $dark-font-color2: #020b05;
 $dark-bg: #0d1117;
 $dark-bg2: #070a10;
 $dark-border-color: #1d2634;
+$dark-header-bg: #161b22;
 
 $easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
 $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

src/components/MonitorList.vue

@@ -137,7 +137,7 @@ export default {
     justify-content: space-between;
 
     .dark & {
-        background-color: #161b22;
+        background-color: $dark-header-bg;
         border-bottom: 0;
     }
 }

src/components/notifications/ClickSendSMS.vue

@@ -3,7 +3,7 @@
         <label for="clicksendsms-login" class="form-label">API Username</label>
         <div class="form-text">
             {{ $t("apiCredentials") }}
-            <a href="http://dashboard.clicksend.com/account/subaccounts" target="_blank">here</a>
+            <a href="http://dashboard.clicksend.com/account/subaccounts" target="_blank">{{ $t("here") }}</a>
         </div>
         <input id="clicksendsms-login" v-model="$parent.notification.clicksendsmsLogin" type="text" class="form-control" required>
         <label for="clicksendsms-key" class="form-label">API Key</label>

src/components/notifications/SMTP.vue

@@ -10,7 +10,7 @@
     </div>
 
     <div class="mb-3">
-        <label for="secure" class="form-label">Secure</label>
+        <label for="secure" class="form-label">{{ $t("Security") }}</label>
         <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
             <option :value="false">{{ $t("secureOptionNone") }}</option>
             <option :value="true">{{ $t("secureOptionTLS") }}</option>

src/components/notifications/SerwerSMS.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="mb-3">
+        <label for="serwersms-username" class="form-label">{{ $t('serwersmsAPIUser') }}</label>
+        <input id="serwersms-username" v-model="$parent.notification.serwersmsUsername" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="serwersms-key" class="form-label">{{ $t('serwersmsAPIPassword') }}</label>
+        <HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="serwersms-phone-number" class="form-label">{{ $t("serwersmsPhoneNumber") }}</label>
+        <input id="serwersms-phone-number" v-model="$parent.notification.serwersmsPhoneNumber" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="serwersms-sender-name" class="form-label">{{ $t("serwersmsSenderName") }}</label>
+        <input id="serwersms-sender-name" v-model="$parent.notification.serwersmsSenderName" type="text" minlength="3" maxlength="11" class="form-control">
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Stackfield.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="mb-3">
+        <label for="stackfield-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="stackfield-webhook-url" v-model="$parent.notification.stackfieldwebhookURL" type="text" class="form-control" required>
+
+        <div class="form-text">
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+                <a href="https://www.stackfield.com/developer-api#AnchorAPI2" target="_blank">https://www.stackfield.com/developer-api#AnchorAPI2</a>
+            </i18n-t>
+        </div>
+    </div>
+</template>

src/components/notifications/Telegram.vue

@@ -25,13 +25,7 @@
             </p>
 
             <p style="margin-top: 8px;">
-                <template v-if="$parent.notification.telegramBotToken">
-                    <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
-                </template>
-
-                <template v-else>
-                    {{ telegramGetUpdatesURL }}
-                </template>
+                <a :href="telegramGetUpdatesURL('withToken')" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL("masked") }}</a>
             </p>
         </div>
     </div>
@@ -40,49 +34,51 @@
 <script>
 import HiddenInput from "../HiddenInput.vue";
 import axios from "axios";
-import { useToast } from "vue-toastification"
+import { useToast } from "vue-toastification";
 const toast = useToast();
 
 export default {
     components: {
         HiddenInput,
     },
-    computed: {
-        telegramGetUpdatesURL() {
-            let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`
+    methods: {
+        telegramGetUpdatesURL(mode = "masked") {
+            let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`;
 
             if (this.$parent.notification.telegramBotToken) {
-                token = this.$parent.notification.telegramBotToken;
+                if (mode === "withToken") {
+                    token = this.$parent.notification.telegramBotToken;
+                } else if (mode === "masked") {
+                    token = "*".repeat(this.$parent.notification.telegramBotToken.length);
+                }
             }
 
             return `https://api.telegram.org/bot${token}/getUpdates`;
         },
-    },
-    methods: {
         async autoGetTelegramChatID() {
             try {
-                let res = await axios.get(this.telegramGetUpdatesURL)
+                let res = await axios.get(this.telegramGetUpdatesURL("withToken"));
 
                 if (res.data.result.length >= 1) {
-                    let update = res.data.result[res.data.result.length - 1]
+                    let update = res.data.result[res.data.result.length - 1];
 
                     if (update.channel_post) {
                         this.notification.telegramChatID = update.channel_post.chat.id;
                     } else if (update.message) {
                         this.notification.telegramChatID = update.message.chat.id;
                     } else {
-                        throw new Error(this.$t("chatIDNotFound"))
+                        throw new Error(this.$t("chatIDNotFound"));
                     }
 
                 } else {
-                    throw new Error(this.$t("chatIDNotFound"))
+                    throw new Error(this.$t("chatIDNotFound"));
                 }
 
             } catch (error) {
-                toast.error(error.message)
+                toast.error(error.message);
             }
 
         },
     }
-}
+};
 </script>

src/components/notifications/index.js

@@ -22,6 +22,8 @@ import Matrix from "./Matrix.vue";
 import AliyunSMS from "./AliyunSms.vue";
 import DingDing from "./DingDing.vue";
 import Bark from "./Bark.vue";
+import SerwerSMS from "./SerwerSMS.vue";
+import Stackfield from './Stackfield.vue';
 
 /**
  * Manage all notification form.
@@ -52,7 +54,9 @@ const NotificationFormList = {
     "mattermost": Mattermost,
     "matrix": Matrix,
     "DingDing": DingDing,
-    "Bark": Bark
+    "Bark": Bark,
+    "serwersms": SerwerSMS,
+    "stackfield": Stackfield,
 }
 
 export default NotificationFormList

src/components/settings/About.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="d-flex justify-content-center align-items-center">
+        <div class="logo d-flex flex-column justify-content-center align-items-center">
+            <object class="my-4" width="200" height="200" data="/icon.svg" />
+            <div class="fs-4 fw-bold">Uptime Kuma</div>
+            <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
+            <div class="my-1 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style lang="scss" scoped>
+.logo {
+    margin: 4em 1em;
+}
+.update-link {
+    font-size: 0.9em;
+}
+</style>

src/components/settings/Appearance.vue

@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <div class="my-4">
+            <label for="language" class="form-label">
+                {{ $t("Language") }}
+            </label>
+            <select id="language" v-model="$root.language" 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="my-4">
+            <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="my-4">
+            <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>
+    </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.btn-check:active + .btn-outline-primary,
+.btn-check:checked + .btn-outline-primary,
+.btn-check:hover + .btn-outline-primary {
+    color: #fff;
+
+    .dark & {
+        color: #000;
+    }
+}
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/settings/Backup.vue

@@ -0,0 +1,213 @@
+<template>
+    <div>
+        <div class="my-4">
+            <h4 class="mt-4 mb-2">{{ $t("Export Backup") }}</h4>
+
+            <p>
+                {{ $t("backupDescription") }} <br />
+                ({{ $t("backupDescription2") }}) <br />
+            </p>
+
+            <div class="mb-2">
+                <button class="btn btn-primary" @click="downloadBackup">
+                    {{ $t("Export") }}
+                </button>
+            </div>
+
+            <p>
+                <strong>{{ $t("backupDescription3") }}</strong>
+            </p>
+        </div>
+
+        <div class="my-4">
+            <h4 class="mt-4 mb-2">{{ $t("Import Backup") }}</h4>
+
+            <label class="form-label">{{ $t("Options") }}:</label>
+            <br />
+            <div class="form-check form-check-inline">
+                <input
+                    id="radioKeep"
+                    v-model="importHandle"
+                    class="form-check-input"
+                    type="radio"
+                    name="radioImportHandle"
+                    value="keep"
+                />
+                <label class="form-check-label" for="radioKeep">
+                    {{ $t("Keep both") }}
+                </label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input
+                    id="radioSkip"
+                    v-model="importHandle"
+                    class="form-check-input"
+                    type="radio"
+                    name="radioImportHandle"
+                    value="skip"
+                />
+                <label class="form-check-label" for="radioSkip">
+                    {{ $t("Skip existing") }}
+                </label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input
+                    id="radioOverwrite"
+                    v-model="importHandle"
+                    class="form-check-input"
+                    type="radio"
+                    name="radioImportHandle"
+                    value="overwrite"
+                />
+                <label class="form-check-label" for="radioOverwrite">
+                    {{ $t("Overwrite") }}
+                </label>
+            </div>
+            <div class="form-text mb-2">
+                {{ $t("importHandleDescription") }}
+            </div>
+
+            <div class="mb-2">
+                <input
+                    id="importBackup"
+                    type="file"
+                    class="form-control"
+                    accept="application/json"
+                />
+            </div>
+
+            <div class="input-group mb-2 justify-content-end">
+                <button
+                    type="button"
+                    class="btn btn-outline-primary"
+                    :disabled="processing"
+                    @click="confirmImport"
+                >
+                    <div
+                        v-if="processing"
+                        class="spinner-border spinner-border-sm me-1"
+                    ></div>
+                    {{ $t("Import") }}
+                </button>
+            </div>
+
+            <div
+                v-if="importAlert"
+                class="alert alert-danger mt-3"
+                style="padding: 6px 16px"
+            >
+                {{ importAlert }}
+            </div>
+        </div>
+
+        <Confirm
+            ref="confirmImport"
+            btn-style="btn-danger"
+            :yes-text="$t('Yes')"
+            :no-text="$t('No')"
+            @yes="importBackup"
+        >
+            {{ $t("confirmImportMsg") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "../../components/Confirm.vue";
+import dayjs from "dayjs";
+import { useToast } from "vue-toastification";
+
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+
+    data() {
+        return {
+            processing: false,
+            importHandle: "skip",
+            importAlert: null,
+        };
+    },
+
+    methods: {
+        confirmImport() {
+            this.$refs.confirmImport.show();
+        },
+
+        downloadBackup() {
+            let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
+            let fileName = `Uptime_Kuma_Backup_${time}.json`;
+            let monitorList = Object.values(this.$root.monitorList);
+            let exportData = {
+                version: this.$root.info.version,
+                notificationList: this.$root.notificationList,
+                monitorList: monitorList,
+            };
+            exportData = JSON.stringify(exportData, null, 4);
+            let downloadItem = document.createElement("a");
+            downloadItem.setAttribute(
+                "href",
+                "data:application/json;charset=utf-8," +
+                    encodeURIComponent(exportData)
+            );
+            downloadItem.setAttribute("download", fileName);
+            downloadItem.click();
+        },
+
+        importBackup() {
+            this.processing = true;
+            let uploadItem = document.getElementById("importBackup").files;
+
+            if (uploadItem.length <= 0) {
+                this.processing = false;
+                return (this.importAlert = this.$t("alertNoFile"));
+            }
+
+            if (uploadItem.item(0).type !== "application/json") {
+                this.processing = false;
+                return (this.importAlert = this.$t("alertWrongFileType"));
+            }
+
+            let fileReader = new FileReader();
+            fileReader.readAsText(uploadItem.item(0));
+
+            fileReader.onload = (item) => {
+                this.$root.uploadBackup(
+                    item.target.result,
+                    this.importHandle,
+                    (res) => {
+                        this.processing = false;
+
+                        if (res.ok) {
+                            toast.success(res.msg);
+                        } else {
+                            toast.error(res.msg);
+                        }
+                    }
+                );
+            };
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.dark {
+    #importBackup {
+        &::file-selector-button {
+            color: $primary;
+            background-color: $dark-bg;
+        }
+
+        &:hover:not(:disabled):not([readonly])::file-selector-button {
+            color: $dark-font-color2;
+            background-color: $primary;
+        }
+    }
+}
+</style>

src/components/settings/General.vue

@@ -0,0 +1,192 @@
+<template>
+    <div>
+        <form class="my-4" @submit.prevent="saveGeneral">
+            <!-- Timezone -->
+            <div class="mb-4">
+                <label for="timezone" class="form-label">
+                    {{ $t("Timezone") }}
+                </label>
+                <select id="timezone" v-model="$root.userTimezone" class="form-select">
+                    <option value="auto">
+                        {{ $t("Auto") }}: {{ guessTimezone }}
+                    </option>
+                    <option
+                        v-for="(timezone, index) in timezoneList"
+                        :key="index"
+                        :value="timezone.value"
+                    >
+                        {{ timezone.name }}
+                    </option>
+                </select>
+            </div>
+
+            <!-- Search Engine -->
+            <div class="mb-4">
+                <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>
+
+            <!-- Entry Page -->
+            <div class="mb-4">
+                <label class="form-label">{{ $t("Entry Page") }}</label>
+
+                <div class="form-check">
+                    <input
+                        id="entryPageYes"
+                        v-model="settings.entryPage"
+                        class="form-check-input"
+                        type="radio"
+                        name="statusPage"
+                        value="dashboard"
+                        required
+                    />
+                    <label class="form-check-label" for="entryPageYes">
+                        {{ $t("Dashboard") }}
+                    </label>
+                </div>
+
+                <div class="form-check">
+                    <input
+                        id="entryPageNo"
+                        v-model="settings.entryPage"
+                        class="form-check-input"
+                        type="radio"
+                        name="statusPage"
+                        value="statusPage"
+                        required
+                    />
+                    <label class="form-check-label" for="entryPageNo">
+                        {{ $t("Status Page") }}
+                    </label>
+                </div>
+            </div>
+
+            <!-- Primary Base URL -->
+            <div class="mb-4">
+                <label class="form-label" for="primaryBaseURL">
+                    {{ $t("Primary Base URL") }}
+                </label>
+
+                <div class="input-group mb-3">
+                    <input
+                        id="primaryBaseURL"
+                        v-model="settings.primaryBaseURL"
+                        class="form-control"
+                        name="primaryBaseURL"
+                        placeholder="https://"
+                        pattern="https?://.+"
+                    />
+                    <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">
+                        {{ $t("Auto Get") }}
+                    </button>
+                </div>
+
+                <div class="form-text"></div>
+            </div>
+
+            <!-- Steam API Key -->
+            <div class="mb-4">
+                <label class="form-label" for="steamAPIKey">
+                    {{ $t("Steam API Key") }}
+                </label>
+                <HiddenInput
+                    id="steamAPIKey"
+                    v-model="settings.steamAPIKey"
+                    autocomplete="one-time-code"
+                />
+                <div class="form-text">
+                    {{ $t("steamApiKeyDescription") }}
+                    <a href="https://steamcommunity.com/dev" target="_blank">
+                        https://steamcommunity.com/dev
+                    </a>
+                </div>
+            </div>
+
+            <!-- Save Button -->
+            <div>
+                <button class="btn btn-primary" type="submit">
+                    {{ $t("Save") }}
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../../components/HiddenInput.vue";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { timezoneList } from "../../util-frontend";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default {
+    components: {
+        HiddenInput,
+    },
+
+    data() {
+        return {
+            timezoneList: timezoneList(),
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+        guessTimezone() {
+            return dayjs.tz.guess();
+        }
+    },
+
+    methods: {
+        saveGeneral() {
+            localStorage.timezone = this.$root.userTimezone;
+            this.saveSettings();
+        },
+        autoGetPrimaryBaseURL() {
+            this.settings.primaryBaseURL = location.protocol + "//" + location.host;
+        },
+    },
+};
+</script>
+
+<style></style>

src/components/settings/MonitorHistory.vue

@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <div class="my-4">
+            <label for="keepDataPeriodDays" class="form-label">
+                {{
+                    $t("clearDataOlderThan", [
+                        settings.keepDataPeriodDays,
+                    ])
+                }}
+            </label>
+            <input
+                id="keepDataPeriodDays"
+                v-model="settings.keepDataPeriodDays"
+                type="number"
+                class="form-control"
+                required
+                min="1"
+                step="1"
+            />
+        </div>
+        <div class="my-4">
+            <button class="btn btn-primary" type="button" @click="saveSettings()">
+                {{ $t("Save") }}
+            </button>
+        </div>
+        <div class="my-4">
+            <div class="my-3">
+                <button class="btn btn-outline-info me-2" @click="shrinkDatabase">
+                    {{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})
+                </button>
+                <div class="form-text mt-2 mb-4 ms-2">{{ $t("shrinkDatabaseDescription") }}</div>
+            </div>
+            <button
+                id="clearAllStats-btn"
+                class="btn btn-outline-danger me-2 mb-2"
+                @click="confirmClearStatistics"
+            >
+                {{ $t("Clear all statistics") }}
+            </button>
+        </div>
+        <Confirm
+            ref="confirmClearStatistics"
+            btn-style="btn-danger"
+            :yes-text="$t('Yes')"
+            :no-text="$t('No')"
+            @yes="clearStatistics"
+        >
+            {{ $t("confirmClearStatisticsMsg") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "../../components/Confirm.vue";
+import { debug } from "../../util.ts";
+import { useToast } from "vue-toastification";
+
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+
+    data() {
+        return {
+            databaseSize: 0,
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+        databaseSizeDisplay() {
+            return (
+                Math.round((this.databaseSize / 1024 / 1024) * 10) / 10 + " MB"
+            );
+        },
+    },
+
+    mounted() {
+        this.loadDatabaseSize();
+    },
+
+    methods: {
+        loadDatabaseSize() {
+            debug("load database size");
+            this.$root.getSocket().emit("getDatabaseSize", (res) => {
+                if (res.ok) {
+                    this.databaseSize = res.size;
+                    debug("database size: " + res.size);
+                } else {
+                    debug(res);
+                }
+            });
+        },
+
+        shrinkDatabase() {
+            this.$root.getSocket().emit("shrinkDatabase", (res) => {
+                if (res.ok) {
+                    this.loadDatabaseSize();
+                    toast.success("Done");
+                } else {
+                    debug(res);
+                }
+            });
+        },
+
+        confirmClearStatistics() {
+            this.$refs.confirmClearStatistics.show();
+        },
+
+        clearStatistics() {
+            this.$root.clearStatistics((res) => {
+                if (res.ok) {
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style></style>

src/components/settings/Notifications.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="notification-list my-4">
+            <p v-if="$root.notificationList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+            <p v-else>
+                {{ $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)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+                {{ $t("Setup Notification") }}
+            </button>
+        </div>
+
+        <NotificationDialog ref="notificationDialog" />
+    </div>
+</template>
+
+<script>
+import NotificationDialog from "../../components/NotificationDialog.vue";
+
+export default {
+    components: {
+        NotificationDialog
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/settings/Security.vue

@@ -0,0 +1,323 @@
+<template>
+    <div>
+        <div v-if="settingsLoaded" class="my-4">
+            <!-- Change Password -->
+            <template v-if="!settings.disableAuth">
+                <p>
+                    {{ $t("Current User") }}: <strong>{{ username }}</strong>
+                    <button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
+                </p>
+
+                <h5 class="my-4">{{ $t("Change Password") }}</h5>
+                <form class="mb-3" @submit.prevent="savePassword">
+                    <div class="mb-3">
+                        <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">
+                            {{ $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">
+                            {{ $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">
+                            {{ $t("passwordNotMatchMsg") }}
+                        </div>
+                    </div>
+
+                    <div>
+                        <button class="btn btn-primary" type="submit">
+                            {{ $t("Update Password") }}
+                        </button>
+                    </div>
+                </form>
+            </template>
+
+            <div v-if="! settings.disableAuth" class="mt-5 mb-3">
+                <h5 class="my-4">
+                    {{ $t("Two Factor Authentication") }}
+                </h5>
+                <div class="mb-4">
+                    <button
+                        class="btn btn-primary me-2"
+                        type="button"
+                        @click="$refs.TwoFADialog.show()"
+                    >
+                        {{ $t("2FA Settings") }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="my-4">
+                <!-- Advanced -->
+                <h5 class="my-4">{{ $t("Advanced") }}</h5>
+
+                <div class="mb-4">
+                    <button v-if="settings.disableAuth" id="enableAuth-btn" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
+                    <button v-if="! settings.disableAuth" id="disableAuth-btn" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
+                </div>
+            </div>
+        </div>
+
+        <TwoFADialog ref="TwoFADialog" />
+
+        <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 === '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-else-if="$i18n.locale === 'pt-BR' ">
+                <p>Você tem certeza que deseja <strong>desativar a autenticação</strong>?</p>
+                <p>Isso é para <strong>alguém que tem autenticação de terceiros</strong> na frente do 'UpTime Kuma' como o Cloudflare Access.</p>
+                <p>Por favor, utilize isso com cautela.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'zh-HK' ">
+                <p>你是否確認<strong>取消登入認証</strong>？</p>
+                <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
+                <p>請小心使用。</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'zh-CN' ">
+                <p>是否确定 <strong>取消登录验证</strong>？</p>
+                <p>这是为 <strong>有第三方认证</strong> 的用户提供的功能，如 Cloudflare Access</p>
+                <p>请谨慎使用！</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'zh-TW' ">
+                <p>你是否要<strong>取消登入驗證</strong>？</p>
+                <p>此功能是設計給已有<strong>第三方認證</strong>的使用者，例如 Cloudflare Access。</p>
+                <p>請謹慎使用。</p>
+            </template>
+
+            <template v-else-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-else-if="$i18n.locale === 'sr' ">
+                <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
+                <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
+                <p>Молим Вас користите ово са пажњом.</p>
+            </template>
+
+            <template v-else-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 === 'hr-HR' ">
+                <p>Jeste li sigurni da želite <strong>isključiti autentikaciju</strong>?</p>
+                <p>To je za <strong>korisnike koji imaju vanjsku autentikaciju stranice</strong> ispred Uptime Kume, poput usluge Cloudflare Access.</p>
+                <p>Pažljivo koristite ovu opciju.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'tr-TR' ">
+                <p><strong>Şifreli girişi devre dışı bırakmak istediğinizden</strong>emin misiniz?</p>
+                <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
+                <p>Lütfen dikkatli kullanın.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'ko-KR' ">
+                <p>정말로 <strong>인증 기능을 끌까요</strong>?</p>
+                <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
+                <p>신중하게 사용하세요.</p>
+            </template>
+
+            <template v-else-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>
+
+            <template v-else-if="$i18n.locale === 'et-EE' ">
+                <p>Kas soovid <strong>lülitada autentimise välja</strong>?</p>
+                <p>Kastuamiseks <strong>välise autentimispakkujaga</strong>, näiteks Cloudflare Access.</p>
+                <p>Palun kasuta vastutustundlikult.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'it-IT' ">
+                <p>Si è certi di voler <strong>disabilitare l'autenticazione</strong>?</p>
+                <p>È per <strong>chi ha l'autenticazione gestita da terze parti</strong> messa davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
+                <p>Utilizzare con attenzione.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'id-ID' ">
+                <p>Apakah Anda yakin ingin <strong>menonaktifkan autentikasi</strong>?</p>
+                <p>Ini untuk <strong>mereka yang memiliki autentikasi pihak ketiga</strong> diletakkan di depan Uptime Kuma, misalnya akses Cloudflare.</p>
+                <p>Gunakan dengan hati-hati.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'ru-RU' ">
+                <p>Вы уверены, что хотите <strong>отключить авторизацию</strong>?</p>
+                <p>Это подходит для <strong>тех, у кого стоит другая авторизация</strong> перед открытием Uptime Kuma, например Cloudflare Access.</p>
+                <p>Пожалуйста, используйте с осторожностью.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'fa' ">
+                <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
+                <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
+                <p>لطفا از این امکان با دقت استفاده کنید.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'bg-BG' ">
+                <p>Сигурни ли сте, че желаете да <strong>изключите удостоверяването</strong>?</p>
+                <p>Използва се в случаите, когато <strong>има настроен алтернативен метод за удостоверяване</strong> преди Uptime Kuma, например Cloudflare Access.</p>
+                <p>Моля, използвайте с повишено внимание.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'hu' ">
+                <p>Biztos benne, hogy <strong>kikapcsolja a hitelesítést</strong>?</p>
+                <p>Akkor érdemes, ha <strong>van 3rd-party hitelesítés</strong> az Uptime Kuma-t megelőzően mint a Cloudflare Access.</p>
+                <p>Használja megfontoltan!</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'nb-NO' ">
+                <p>Er du sikker på at du vil <strong>deaktiver autentisering</strong>?</p>
+                <p>Dette er for <strong>de som har tredjepartsautorisering</strong> foran Uptime Kuma, for eksempel Cloudflare Access.</p>
+                <p>Vennligst vær forsiktig.</p>
+            </template>
+
+            <!-- English (en) -->
+            <template v-else>
+                <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>
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "../../components/Confirm.vue";
+import TwoFADialog from "../../components/TwoFADialog.vue";
+
+export default {
+    components: {
+        Confirm,
+        TwoFADialog
+    },
+
+    data() {
+        return {
+            username: "",
+            invalidPassword: false,
+            password: {
+                currentPassword: "",
+                newPassword: "",
+                repeatNewPassword: "",
+            }
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        }
+    },
+
+    watch: {
+        "password.repeatNewPassword"() {
+            this.invalidPassword = false;
+        },
+    },
+
+    mounted() {
+        this.loadUsername();
+    },
+
+    methods: {
+        savePassword() {
+            if (this.password.newPassword !== this.password.repeatNewPassword) {
+                this.invalidPassword = true;
+            } else {
+                this.$root
+                    .getSocket()
+                    .emit("changePassword", this.password, (res) => {
+                        this.$root.toastRes(res);
+                        if (res.ok) {
+                            this.password.currentPassword = "";
+                            this.password.newPassword = "";
+                            this.password.repeatNewPassword = "";
+                        }
+                    });
+            }
+        },
+
+        loadUsername() {
+            const jwtPayload = this.$root.getJWTPayload();
+
+            if (jwtPayload) {
+                this.username = jwtPayload.username;
+            }
+        },
+
+        disableAuth() {
+            this.settings.disableAuth = true;
+            this.saveSettings();
+        },
+
+        enableAuth() {
+            this.settings.disableAuth = false;
+            this.saveSettings();
+            this.$root.storage().removeItem("token");
+            location.reload();
+        },
+
+        confirmDisableAuth() {
+            this.$refs.confirmDisableAuth.show();
+        },
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+h5:after {
+    content: "";
+    display: block;
+    width: 50%;
+    padding-top: 8px;
+    border-bottom: 1px solid $dark-border-color;
+}
+</style>

src/i18n.js

@@ -1,62 +1,45 @@
 import { createI18n } from "vue-i18n/index";
-import daDK from "./languages/da-DK";
-import deDE from "./languages/de-DE";
 import en from "./languages/en";
-import esEs from "./languages/es-ES";
-import etEE from "./languages/et-EE";
-import fa from "./languages/fa";
-import frFR from "./languages/fr-FR";
-import hu from "./languages/hu";
-import hrHR from "./languages/hr-HR";
-import itIT from "./languages/it-IT";
-import idID from "./languages/id-ID";
-import ja from "./languages/ja";
-import koKR from "./languages/ko-KR";
-import nlNL from "./languages/nl-NL";
-import nbNO from "./languages/nb-NO";
-import pl from "./languages/pl";
-import ptBR from "./languages/pt-BR";
-import bgBG from "./languages/bg-BG";
-import ruRU from "./languages/ru-RU";
-import sr from "./languages/sr";
-import srLatn from "./languages/sr-latn";
-import svSE from "./languages/sv-SE";
-import trTR from "./languages/tr-TR";
-import vi from "./languages/vi";
-import zhCN from "./languages/zh-CN";
-import zhHK from "./languages/zh-HK";
-import zhTW from "./languages/zh-TW";
 
 const languageList = {
-    en,
-    "zh-HK": zhHK,
-    "bg-BG": bgBG,
-    "de-DE": deDE,
-    "nl-NL": nlNL,
-    "nb-NO": nbNO,
-    "es-ES": esEs,
-    "fa": fa,
-    "pt-BR": ptBR,
-    "fr-FR": frFR,
-    "hu": hu,
-    "hr-HR": hrHR,
-    "it-IT": itIT,
-    "id-ID" : idID,
-    "ja": ja,
-    "da-DK": daDK,
-    "sr": sr,
-    "sr-latn": srLatn,
-    "sv-SE": svSE,
-    "tr-TR": trTR,
-    "ko-KR": koKR,
-    "ru-RU": ruRU,
-    "zh-CN": zhCN,
-    "pl": pl,
-    "et-EE": etEE,
-    "vi": vi,
-    "zh-TW": zhTW
+    "zh-HK": "繁體中文 (香港)",
+    "bg-BG": "Български",
+    "de-DE": "Deutsch (Deutschland)",
+    "nl-NL": "Nederlands",
+    "nb-NO": "Norsk",
+    "es-ES": "Español",
+    "fa": "Farsi",
+    "pt-BR": "Português (Brasileiro)",
+    "fr-FR": "Français (France)",
+    "hu": "Magyar",
+    "hr-HR": "Hrvatski",
+    "it-IT": "Italiano (Italian)",
+    "id-ID": "Bahasa Indonesia (Indonesian)",
+    "ja": "日本語",
+    "da-DK": "Danish (Danmark)",
+    "sr": "Српски",
+    "sr-latn": "Srpski",
+    "sv-SE": "Svenska",
+    "tr-TR": "Türkçe",
+    "ko-KR": "한국어",
+    "ru-RU": "Русский",
+    "zh-CN": "简体中文",
+    "pl": "Polski",
+    "et-EE": "eesti",
+    "vi": "Vietnamese",
+    "zh-TW": "繁體中文 (台灣)"
 };
 
+let messages = {
+    en,
+};
+
+for (let lang in languageList) {
+    messages[lang] = {
+        languageName: languageList[lang]
+    };
+}
+
 const rtlLangs = ["fa"];
 
 export const currentLocale = () => localStorage.locale
@@ -73,5 +56,5 @@ export const i18n = createI18n({
     fallbackLocale: "en",
     silentFallbackWarn: true,
     silentTranslationWarn: true,
-    messages: languageList,
+    messages: messages,
 });

src/languages/README.md

@@ -4,11 +4,8 @@
 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. Run `npm run update-language-files`. You can also use this command to check if there are new strings to translate for your language.
 4. Your language file should be filled in. You can translate now.
-5. Translate `src/pages/Settings.vue` (search for a `Confirm` component with `rel="confirmDisableAuth"`).
-6. Import your language file in `src/i18n.js` and add it to `languageList` constant.
+5. Translate `src/components/settings/Security.vue` (search for a `Confirm` component with `rel="confirmDisableAuth"`).
+6. Add it into `languageList` constant.
 7. 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. 😏
+If you do not have programming skills, let me know in [the issues section](https://github.com/louislam/uptime-kuma/issues). I will assist you. 😏

src/languages/bg-BG.js

@@ -89,7 +89,7 @@ export default {
     Timezone: "Часова зона",
     "Search Engine Visibility": "Видимост за търсачки",
     "Allow indexing": "Разреши индексиране",
-    "Discourage search engines from indexing site": "Обезкуражи индексирането на сайта от търсачките",
+    "Discourage search engines from indexing site": "Не позволявай на търсачките да индексират този сайт",
     "Change Password": "Промени парола",
     "Current Password": "Текуща парола",
     "New Password": "Нова парола",
@@ -307,4 +307,5 @@ export default {
     PasswordsDoNotMatch: "Паролите не съвпадат.",
     "Current User": "Текущ потребител",
     recent: "Скорошни",
+    shrinkDatabaseDescription: "Инициира \"VACUUM\" за \"SQLite\" база данни. Ако Вашата база данни е създадена след версия 1.10.0, \"AUTO_VACUUM\" функцията е активна и това действие не нужно.",
 };

src/languages/en.js

@@ -307,4 +307,49 @@ export default {
     steamApiKeyDescription: "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key here: ",
     "Current User": "Current User",
     recent: "Recent",
+    Done: "Done",
+    Info: "Info",
+    Security: "Security",
+    "Steam API Key": "Steam API Key",
+    "Shrink Database": "Shrink Database",
+    "Pick a RR-Type...": "Pick a RR-Type...",
+    "Pick Accepted Status Codes...": "Pick Accepted Status Codes...",
+    Default: "Default",
+    "HTTP Options": "HTTP Options",
+    "Create Incident": "Create Incident",
+    Title: "Title",
+    Content: "Content",
+    Style: "Style",
+    info: "info",
+    warning: "warning",
+    danger: "danger",
+    primary: "primary",
+    light: "light",
+    dark: "dark",
+    Post: "Post",
+    "Please input title and content": "Please input title and content",
+    Created: "Created",
+    "Last Updated": "Last Updated",
+    Unpin: "Unpin",
+    "Switch to Light Theme": "Switch to Light Theme",
+    "Switch to Dark Theme": "Switch to Dark Theme",
+    "Show Tags": "Show Tags",
+    "Hide Tags": "Hide Tags",
+    Description: "Description",
+    "No monitors available.": "No monitors available.",
+    "Add one": "Add one",
+    "No Monitors": "No Monitors",
+    "Add one": "Add one",
+    "Untitled Group": "Untitled Group",
+    Services: "Services",
+    Discard: "Discard",
+    Cancel: "Cancel",
+    "Powered by": "Powered by",
+    shrinkDatabaseDescription: "Trigger database VACUUM for SQLite. If your database is created after 1.10.0, AUTO_VACUUM is already enabled and this action is not needed.",
+    serwersms: "SerwerSMS.pl",
+    serwersmsAPIUser: "API Username (incl. webapi_ prefix)",
+    serwersmsAPIPassword: "API Password",
+    serwersmsPhoneNumber: "Phone number",
+    serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
+    "stackfield": "Stackfield",
 };

src/languages/hr-HR.js

@@ -308,4 +308,43 @@ export default {
     steamApiKeyDescription: "Za praćenje Steam poslužitelja za igru, potrebno je imati Steam Web-API ključ. Možete registrirati vlastiti ključ ovdje: ",
     "Current User": "Trenutni korisnik",
     recent: "Nedavno",
+    Done: "Gotovo",
+    Info: "Informacije",
+    Security: "Sigurnost",
+    "Shrink Database": "Smanji bazu podataka",
+    "Pick a RR-Type...": "Odaberite vrstu DNS zapisa od navedenih...",
+    "Pick Accepted Status Codes...": "Odaberite HTTP statusne kodove koji će biti prihvaćeni...",
+    "Steam API Key": "Steam API ključ",
+    Default: "Zadano",
+    "HTTP Options": "HTTP Postavke",
+    "Create Incident": "Novi izvještaj o incidentu",
+    Title: "Naslov",
+    Content: "Sadržaj",
+    Style: "Stil",
+    info: "informacija",
+    warning: "upozorenje",
+    danger: "opasnost",
+    primary: "primarno",
+    light: "svijetlo",
+    dark: "tamno",
+    Post: "Objavi",
+    Created: "Stvoreno",
+    "Last Updated": "Uređeno",
+    "Please input title and content": "Naslov i sadržaj ne mogu biti prazni",
+    Unpin: "Ukloni",
+    "Switch to Light Theme": "Prebaci na svijetli način",
+    "Switch to Dark Theme": "Prebaci na tamni način",
+    "Show Tags": "Pokaži oznake",
+    "Hide Tags": "Sakrij oznake",
+    Description: "Opis",
+    "No monitors available.": "Nema dostupnih monitora.",
+    "Add one": "Add one",
+    "No Monitors": "Bez monitora",
+    "Add one": "Stvori jednog",
+    "Untitled Group": "Bezimena grupa",
+    Services: "Usluge",
+    Discard: "Odbaci",
+    Cancel: "Otkaži",
+    "Powered by": "Pokreće",
+    Saved: "Spremljeno",
 };

src/languages/hu.js

@@ -2,26 +2,26 @@ export default {
     languageName: "Magyar",
     checkEverySecond: "Ellenőrzés {0} másodpercenként",
     retryCheckEverySecond: "Újrapróbál {0} másodpercenként.",
-    retriesDescription: "Maximális próbálkozás mielőtt a szolgáltatás leállt jelőlést kap és értesítés kerül kiküldésre",
-    ignoreTLSError: "TLS/SSL hibák figyelnen kívül hagyása HTTPS weboldalaknál",
+    retriesDescription: "Maximális próbálkozás mielőtt a szolgáltatás 'Leállt' jelölést kap és értesítés kerül kiküldésre",
+    ignoreTLSError: "TLS/SSL hibák figyelmen kívül hagyása HTTPS weboldalaknál",
     upsideDownModeDescription: "Az állapot megfordítása. Ha a szolgáltatás elérhető, akkor lesz leállt állapotú.",
     maxRedirectDescription: "Az átirányítások maximális száma. állítsa 0-ra az átirányítás tiltásához.",
     acceptedStatusCodesDescription: "Válassza ki az állapot kódokat amelyek sikeres válasznak fognak számítani.",
     passwordNotMatchMsg: "A megismételt jelszó nem egyezik.",
     notificationDescription: "Kérem, rendeljen egy értesítést a figyeléshez, hogy működjön.",
-    keywordDescription: "Kulcsszó keresése a html-ben vagy a JSON válaszban. (kis-nagybetű érzékeny)",
+    keywordDescription: "Kulcsszó keresése a HTML-ben vagy a JSON válaszban. (kis-nagybetű érzékeny)",
     pauseDashboardHome: "Szünetel",
     deleteMonitorMsg: "Biztos, hogy törölni akarja ezt a figyelőt?",
     deleteNotificationMsg: "Biztos, hogy törölni akarja ezt az értesítést az összes figyelőnél?",
     resoverserverDescription: "A Cloudflare az alapértelmezett szerver, bármikor meg tudja változtatni a resolver server-t.",
-    rrtypeDescription: "Válassza ki az RR-Típust a figyelőhöz",
+    rrtypeDescription: "Válassza ki az RR-típust a figyelőhöz",
     pauseMonitorMsg: "Biztos, hogy szüneteltetni akarja?",
     enableDefaultNotificationDescription: "Minden új figyelőhöz ez az értesítés engedélyezett lesz alapértelmezetten. Kikapcsolhatja az értesítést külön minden figyelőnél.",
     clearEventsMsg: "Biztos, hogy törölni akar miden eseményt ennél a figyelnél?",
-    clearHeartbeatsMsg: "Biztos, hogy törölni akar minden heartbeat-et ennél a figyelőnél?",
-    confirmClearStatisticsMsg: "Biztos, hogy törölni akat MINDEN statisztikát?",
+    clearHeartbeatsMsg: "Biztos, hogy törölni akar minden életjelet ennél a figyelőnél?",
+    confirmClearStatisticsMsg: "Biztos, hogy törölni akar MINDEN statisztikát?",
     importHandleDescription: "Válassza a 'Meglévő kihagyását', ha ki szeretné hagyni az azonos nevő figyelőket vagy értesítésket. A 'Felülírás' törölni fog minden meglévő figyelőt és értesítést.",
-    confirmImportMsg: "Biztos, hogy importálja a mentést? Győzödjön meg róla, hogy jól választotta ki az importálás opciót.",
+    confirmImportMsg: "Biztos, hogy importálja a mentést? Győződjön meg róla, hogy jól választotta ki az importálás opciót.",
     twoFAVerifyLabel: "Kérem, adja meg a token-t, hogy a 2FA működését ellenőrizzük",
     tokenValidSettingsMsg: "A token érvényes! El tudja menteni a 2FA beállításait.",
     confirmEnableTwoFAMsg: "Biztosan engedélyezi a 2FA-t?",
@@ -54,23 +54,23 @@ export default {
     Delete: "Törlés",
     Current: "Aktuális",
     Uptime: "Uptime",
-    "Cert Exp.": "Tanúsítvány lejár",
-    days: "napok",
+    "Cert Exp.": "SSL lejárat",
+    days: "nap",
     day: "nap",
-    "-day": "-nap",
+    "-day": " nap",
     hour: "óra",
-    "-hour": "-óra",
+    "-hour": " óra",
     Response: "Válasz",
     Ping: "Ping",
     "Monitor Type": "Figyelő típusa",
     Keyword: "Kulcsszó",
     "Friendly Name": "Rövid név",
     URL: "URL",
-    Hostname: "Hostnév",
+    Hostname: "Hosztnév",
     Port: "Port",
-    "Heartbeat Interval": "Heartbeat időköz",
+    "Heartbeat Interval": "Életjel időköz",
     Retries: "Újrapróbálkozás",
-    "Heartbeat Retry Interval": "Heartbeat újrapróbálkozások időköze",
+    "Heartbeat Retry Interval": "Életjel újrapróbálkozások időköze",
     Advanced: "Haladó",
     "Upside Down Mode": "Fordított mód",
     "Max. Redirects": "Max. átirányítás",
@@ -82,8 +82,8 @@ export default {
     Light: "Világos",
     Dark: "Sötét",
     Auto: "Auto",
-    "Theme - Heartbeat Bar": "Téma - Heartbeat Bar",
-    Normal: "Normal",
+    "Theme - Heartbeat Bar": "Téma - Életjel sáv",
+    Normal: "Normál",
     Bottom: "Nyomógomb",
     None: "Nincs",
     Timezone: "Időzóna",
@@ -97,9 +97,9 @@ export default {
     "Update Password": "Jelszó módosítása",
     "Disable Auth": "Hitelesítés tiltása",
     "Enable Auth": "Hitelesítés engedélyezése",
-    Logout: "Kijelenetkezés",
+    Logout: "Kijelentkezés",
     Leave: "Elhagy",
-    "I understand, please disable": "Megértettem, kérem tilsa le",
+    "I understand, please disable": "Megértettem, kérem tiltsa le",
     Confirm: "Megerősítés",
     Yes: "Igen",
     No: "Nem",
@@ -113,7 +113,7 @@ export default {
     Email: "Email",
     Test: "Teszt",
     "Certificate Info": "Tanúsítvány információk",
-    "Resolver Server": "Resolver szerver",
+    "Resolver Server": "DNS szerver",
     "Resource Record Type": "Resource Record típusa",
     "Last Result": "Utolsó eredmény",
     "Create your admin account": "Hozza létre az adminisztrátor felhasználót",
@@ -129,11 +129,11 @@ export default {
     Create: "Létrehozás",
     "Clear Data": "Adatok törlése",
     Events: "Események",
-    Heartbeats: "Heartbeats",
-    "Auto Get": "Auto Get",
-    backupDescription: "Ki tudja menteni az összes figyelőt és értesítést egy JSON fájlba.",
-    backupDescription2: "Ui.: Történeti és esemény adatokat nem tartalmaz.",
-    backupDescription3: "Érzékeny adatok, pl. szolgáltatás kulcsok is vannak az export fájlban. Figyelmesen őrizze!",
+    Heartbeats: "Életjelek",
+    "Auto Get": "Auto lekérd.",
+    backupDescription: "Mentheti az összes figyelőt és értesítést egy JSON fájlba.",
+    backupDescription2: "Megj: Történeti és esemény adatokat nem tartalmaz.",
+    backupDescription3: "Érzékeny adatok, pl. szolgáltatás kulcsok is vannak az export fájlban. Figyeljen erre!",
     alertNoFile: "Válaszzon ki egy fájlt az importáláshoz.",
     alertWrongFileType: "Válasszon egy JSON fájlt.",
     "Clear all statistics": "Összes statisztika törlése",
@@ -144,17 +144,17 @@ export default {
     "Verify Token": "Token ellenőrzése",
     "Setup 2FA": "2FA beállítása",
     "Enable 2FA": "2FA engedélyezése",
-    "Disable 2FA": "2FA toltása",
+    "Disable 2FA": "2FA tiltása",
     "2FA Settings": "2FA beállítások",
-    "Two Factor Authentication": "Two Factor Authentication",
+    "Two Factor Authentication": "Kétfaktoros hitelesítés",
     Active: "Aktív",
     Inactive: "Inaktív",
     Token: "Token",
     "Show URI": "URI megmutatása",
-    Tags: "Cimkék",
+    Tags: "Címkék",
     "Add New below or Select...": "Adjon hozzá lentre vagy válasszon...",
-    "Tag with this name already exist.": "Ilyen nevű cimke már létezik.",
-    "Tag with this value already exist.": "Ilyen értékű cimke már létezik.",
+    "Tag with this name already exist.": "Ilyen nevű címke már létezik.",
+    "Tag with this value already exist.": "Ilyen értékű címke már létezik.",
     color: "szín",
     "value (optional)": "érték (opcionális)",
     Gray: "Szürke",
@@ -169,15 +169,15 @@ export default {
     "Avg. Ping": "Átl. ping",
     "Avg. Response": "Átl. válasz",
     "Entry Page": "Nyitólap",
-    statusPageNothing: "Semmi nincs itt, kérem, adjon hozzá egy figyelőt.",
+    statusPageNothing: "Semmi nincs itt. Adjon hozzá egy vagy több figyelőt.",
     "No Services": "Nincs szolgáltatás",
     "All Systems Operational": "Minden rendszer működik",
     "Partially Degraded Service": "Részlegesen leállt szolgáltatás",
     "Degraded Service": "Leállt szolgáltatás",
     "Add Group": "Csoport hozzáadása",
     "Add a monitor": "Figyelő hozzáadása",
-    "Edit Status Page": "Sátusz oldal szerkesztése",
-    "Go to Dashboard": "Menj az irányítópulthoz",
+    "Edit Status Page": "Státusz oldal szerkesztése",
+    "Go to Dashboard": "Irányítópulthoz",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",
@@ -192,9 +192,162 @@ export default {
     octopush: "Octopush",
     promosms: "PromoSMS",
     lunasea: "LunaSea",
-    apprise: "Apprise (Support 50+ Notification services)",
+    apprise: "Apprise (50+ értesítési szolgáltatás)",
     pushbullet: "Pushbullet",
     line: "Line Messenger",
     mattermost: "Mattermost",
-    "Status Page": "Status Page",
+    "Status Page": "Státusz oldal",
+    "Primary Base URL": "Elsődleges URL",
+    "Push URL": "Meghívandó URL",
+    needPushEvery: "Ezt az URL-t kell meghívni minden {0} másodpercben.",
+    pushOptionalParams: "Opcionális paraméterek: {0}",
+    defaultNotificationName: "{notification} értesítésem ({number})",
+    here: "itt",
+    Required: "Kötelező",
+    "Bot Token": "BOT token",
+    wayToGetTelegramToken: "Innen kaphat token-t: {0}.",
+    "Chat ID": "Csevegés ID",
+    supportTelegramChatID: "Támogatja a közvetlen csevegést, csoportnak küldést és csatona ID-t is",
+    wayToGetTelegramChatID: "A csevegés ID-t kinyerheti azzal, hogy küld egy üzenetet a bot-nak és erre az URL-re ellátogat, ahol láthatja a chat_id:-t",
+    "YOUR BOT TOKEN HERE": "AZ ÖN BOT TOKENJE ITT",
+    chatIDNotFound: "Csevegés ID nem található, küldjön egy első üzenetet a bot-nak",
+    "Post URL": "Cél URL (Post)",
+    "Content Type": "Tartalom típus (Content Type)",
+    webhookJsonDesc: "{0} ideális a moderh HTTP szerverekhez, mint az Express.js",
+    webhookFormDataDesc: "{multipart} ideális a PHP-hez. A JSON értelmezhető ezzel: {decodeFunction}",
+    secureOptionNone: "Nincs / STARTTLS (25, 587)",
+    secureOptionTLS: "TLS (465)",
+    "Ignore TLS Error": "TLS hiba figyelmen kívül hagyása",
+    "From Email": "Feladó email",
+    emailCustomSubject: "Egyedi tárgy",
+    "To Email": "Cél email",
+    smtpCC: "Másolat",
+    smtpBCC: "Titkos másolat",
+    "Discord Webhook URL": "Discord cím (webhook URL)",
+    wayToGetDiscordURL: "Kaphat egy ilyet, ha ellátogat a Server Settings -> Integrations -> Create Webhook oldalra",
+    "Bot Display Name": "Bot megjelenő neve",
+    "Prefix Custom Message": "Egyedi előtét üzenet",
+    "Hello @everyone is...": "Hello {'@'}mindenki...",
+    "Webhook URL": "Cím (webhook URL)",
+    wayToGetTeamsURL: "Itt megnézheti, hogy kell ilyen URL-t készíteni: {0}.",
+    Number: "Szám",
+    Recipients: "Címzettek",
+    needSignalAPI: "Egy Signal kliensre van szüksége, amihez REST API tartozik.",
+    wayToCheckSignalURL: "Itt megnézheti, hogy hozhat létre egyet:",
+    signalImportant: "FONTOS! Nem keverheti a csoportokat és számokat a címzetteknél.",
+    "Application Token": "Alkalmazás token",
+    "Server URL": "Szerver URL",
+    Priority: "Prioritás",
+    "Icon Emoji": "Emoji ikonok",
+    "Channel Name": "Csatorna neve",
+    "Uptime Kuma URL": "Uptime Kuma cím",
+    aboutWebhooks: "Webhook-okról több info: {0}",
+    aboutChannelName: "Adja meg a {0} csatorna nevét ha szeretné elkerülni a webhook-ot. Pl: #masik-csatorna",
+    aboutKumaURL: "Ha üresen hagyja a Uptime Kuma cím mezőt, akkor a projekt GitHub oldala lesz az alapértelmezett.",
+    emojiCheatSheet: "Emoji csalás: {0}",
+    clicksendsms: "ClickSend SMS",
+    "User Key": "Felhasználói kulcs",
+    Device: "Eszköz",
+    "Message Title": "Üzenet címe",
+    "Notification Sound": "Értesítési hang",
+    "More info on:": "További információ: {0}",
+    pushoverDesc1: "A vészhelyzeti prioritásnak (2) 30 másodperc az újrapróbálkozási alapértéke és egy óra után lejár.",
+    pushoverDesc2: "Ha különböző eszközökre szeretne értesítést küldeni, töltse ki az Eszköz mezőt.",
+    "SMS Type": "SMS típusa",
+    octopushTypePremium: "Premium (Fast - recommended for alerting)",
+    octopushTypeLowCost: "Low Cost (Slow - sometimes blocked by operator)",
+    checkPrice: "Nézze meg az {0} féle árat:",
+    apiCredentials: "API kulcsok",
+    octopushLegacyHint: "Az Octopush régi (2011-2020) verzióját használja vagy az újat?",
+    "Check octopush prices": "Nézze meg az Octopush {0} féle árát.",
+    octopushPhoneNumber: "Telefonszám (nemz. formátum, pl : +36705554433) ",
+    octopushSMSSender: "SMS küldő neve : 3-11 betű/szám (a-zA-Z0-9) vagy szóköz",
+    "LunaSea Device ID": "LunaSea eszköz ID",
+    "Apprise URL": "Apprise cím (URL)",
+    "Example:": "Például: {0}",
+    "Read more:": "Itt olvashat róla: {0}",
+    "Status:": "Állapot: {0}",
+    "Read more": "Tovább olvasom",
+    appriseInstalled: "Apprise telepítve.",
+    appriseNotInstalled: "Apprise nincs telepítve. {0}",
+    "Access Token": "Elérési token",
+    "Channel access token": "Csatorna elérési token",
+    "Line Developers Console": "Line Developers konzol",
+    lineDevConsoleTo: "Line Developers konzol - {0}",
+    "Basic Settings": "Alap beállítások",
+    "User ID": "Felhasználó ID",
+    "Messaging API": "Üzenet API",
+    wayToGetLineChannelToken: "{0} első eléréséhez készítsen egy Provider-t és csatornát (Messaging API), utána kaphatja meg a csatorna elérési token-t és felhasználó ID-t az alábbi menüpontban.",
+    "Icon URL": "Ikon cím (URL)",
+    aboutIconURL: "Megadhat egy webcímet az Ikon cím mezőben, ezzel felülírva az alapértelmezet képet. Nem kerül felhasználásra, ha az Emoji-k be vannak állítva.",
+    aboutMattermostChannelName: "Felülírhatja az alapértelmezett csatornát, ahova a webhook az adatokat küldi. Ehhez töltse ki a \"Csatorna neve\" mezőt (pl: #egyeb-csatorna). A Mattermost webhook beállításaiban további engedélyek szükségesek",
+    matrix: "Matrix",
+    promosmsTypeEco: "SMS ECO - olcsó, de lassú, gyakran túlterhelt. Csak lengyel címzettekhez.",
+    promosmsTypeFlash: "SMS FLASH - Az üzenet automatikusan megjelenik a fogadó eszközön. Csak lengyel címzettekhez.",
+    promosmsTypeFull: "SMS FULL - Prémium szintje az SMS-nek. Megadható a feladó neve, de előtte jóváhagyás szükséges. Ideális értesítésekhez.",
+    promosmsTypeSpeed: "SMS SPEED - A legmagasabb prioritás a rendszerben. Nagyon gyors és pontos, de költséges (kb. duplája a hagyományos SMS-nek).",
+    promosmsPhoneNumber: "Telefonszám (lengyel címzett esetén az országkód elhagyható)",
+    promosmsSMSSender: "SMS feladónév: Előre beállított név vagy az alábbiak egyike: InfoSMS, SMS Info, MaxSMS, INFO, SMS",
+    "Feishu WebHookUrl": "Feishu webhook cím (URL)",
+    matrixHomeserverURL: "Homeserver cím (URL http(s):// előtaggal és opcionálisan port-tal)",
+    "Internal Room Id": "Belső Szoba ID",
+    matrixDesc1: "A belső szoba ID-t a szpbák speciális beállítások között találja meg a Matrix kliens programban. Így kell kinéznie: !QMdRCpUIfLwsfjxye6:home.server.",
+    matrixDesc2: "Erősen ajánlott készíteni egy új felhasználót és nem a teljes joggal rendelkező felhasználót használni. Az új felhasználó létrehozása után csak azokba a szobákba kell megjhívni a felhasználót, ahol értesítéseket szeretne kapni. Ezzel a művelettel lehet elérési token-t kérni: {0}",
+    Method: "Metódus",
+    Body: "Törzs",
+    Headers: "Fejlécek",
+    PushUrl: "Push cím (URL)",
+    HeadersInvalidFormat: "A kérés fejléc nem egy valós JSON: ",
+    BodyInvalidFormat: "A kérés törzse nem egy valós JSON: ",
+    "Monitor History": "Vizsgálatok előzményei",
+    clearDataOlderThan: "Előzmények megtartása {0} napig.",
+    PasswordsDoNotMatch: "Jelszó nem egyezik.",
+    records: "sorok",
+    "One record": "Egy sor",
+    steamApiKeyDescription: "Steam Game Server ellenőrzéséhez szükséges egy Steam Web-API kulcs. Itt létrehozhat egy API kulcsot: ",
+    "Current User": "Felhasználó",
+    recent: "Legújabb",
+    Done: "Kész",
+    Info: "Infó",
+    Security: "Biztonság",
+    "Steam API Key": "Steam API kulcs",
+    "Shrink Database": "Adatbázis tömörítése",
+    "Pick a RR-Type...": "Válasszon egy RR-típust...",
+    "Pick Accepted Status Codes...": "Válasszon olyan kódot, ami elfogadottnak számít...",
+    Default: "Alapért.",
+    "HTTP Options": "HTTP beállítások",
+    "Create Incident": "Incidens létrehozása",
+    Title: "Cím",
+    Content: "Tartalom",
+    Style: "Stílus",
+    info: "info",
+    warning: "warning",
+    danger: "danger",
+    primary: "primary",
+    light: "light",
+    dark: "dark",
+    Post: "Bejegyzés",
+    "Please input title and content": "Adjon meg címet és tartalmat",
+    Created: "Létrehozva",
+    "Last Updated": "Utolsó mód.",
+    Unpin: "Leválaszt",
+    "Switch to Light Theme": "Világos témára váltás",
+    "Switch to Dark Theme": "Sötét témára váltás",
+    "Show Tags": "Címkék mutatása",
+    "Hide Tags": "Címkék elrejtése",
+    Description: "Leírás",
+    "No monitors available.": "Nincs még figyelő beállítva.",
+    "Add one": "Adjon hozzá egyet",
+    "No Monitors": "Nincs figyelő",
+    "Untitled Group": "Névtelen csoport",
+    Services: "Szolgáltatások",
+    Discard: "Elvet",
+    Cancel: "Mégsem",
+    "Powered by": "A megoldást szállítja az",
+    shrinkDatabaseDescription: "VACUUM futtatása az SQLite-on. Ha az adatbázisod 1.10.0-nál újabb, akkor az AUTO_VACUUM engedélyezve van, nincs szükség a műveletre.",
+    serwersms: "SerwerSMS.pl",
+    serwersmsAPIUser: "API felhasználónév (webapi_ előtaggal együtt)",
+    serwersmsAPIPassword: "API jelszó",
+    serwersmsPhoneNumber: "Telefonszám",
+    serwersmsSenderName: "SMS feladó neve (regisztrált név az oldalon)",
 };

src/languages/it-IT.js

@@ -33,6 +33,7 @@ export default {
     Appearance: "Aspetto",
     Theme: "Tema",
     General: "Generali",
+    "Primary Base URL": "URL base primario",
     Version: "Versione",
     "Check Update On GitHub": "Controlla aggiornamenti su GitHub",
     List: "Lista",
@@ -64,7 +65,7 @@ export default {
     Ping: "Ping",
     "Monitor Type": "Tipo di Monitoraggio",
     Keyword: "Parola chiave",
-    "Friendly Name": "Nome Amichevole",
+    "Friendly Name": "Nomignolo",
     URL: "URL",
     Hostname: "Nome Host",
     Port: "Porta",
@@ -75,6 +76,9 @@ export default {
     "Upside Down Mode": "Modalità capovolta",
     "Max. Redirects": "Reindirizzamenti massimi",
     "Accepted Status Codes": "Codici di stato accettati",
+    "Push URL": "Push URL",
+    needPushEvery: "Notificare questo URL ogni {0} secondi.",
+    pushOptionalParams: "Parametri aggiuntivi: {0}",
     Save: "Salva",
     Notifications: "Notifiche",
     "Not available, please setup.": "Non disponibili, da impostare.",
@@ -130,9 +134,9 @@ export default {
     "Clear Data": "Cancella dati",
     Events: "Eventi",
     Heartbeats: "Controlli",
-    "Auto Get": "Auto Get",
+    "Auto Get": "Rileva",
     backupDescription: "È possibile fare il backup di tutti i monitoraggi e di tutte le notifiche in un file JSON.",
-    backupDescription2: "P.S.: lo storico e i dati relativi agli eventi non saranno inclusi.",
+    backupDescription2: "P.S.: lo storico e i dati relativi agli eventi non saranno inclusi",
     backupDescription3: "Dati sensibili come i token di autenticazione saranno inclusi nel backup, tenere quindi in un luogo sicuro.",
     alertNoFile: "Selezionare il file da importare.",
     alertWrongFileType: "Selezionare un file JSON.",
@@ -152,49 +156,200 @@ export default {
     Token: "Token",
     "Show URI": "Mostra URI",
     Tags: "Etichette",
-    "Add New below or Select...": "Aggiungine una oppure scegli...",
+    "Add New below or Select...": "Aggiungi oppure scegli...",
     "Tag with this name already exist.": "Un'etichetta con questo nome già esiste.",
     "Tag with this value already exist.": "Un'etichetta con questo valore già esiste.",
-    color: "colori",
-    "value (optional)": "valore (opzionale)",
+    color: "colore",
+    "value (optional)": "descrizione (opzionale)",
     Gray: "Grigio",
     Red: "Rosso",
     Orange: "Arancione",
     Green: "Verde",
     Blue: "Blu",
-    Indigo: "Indigo",
+    Indigo: "Indaco",
     Purple: "Viola",
     Pink: "Rosa",
     "Search...": "Cerca...",
-    "Avg. Ping": "Ping medio",
-    "Avg. Response": "Risposta media",
-    "Entry Page": "Entry Page",
+    "Avg. Ping": "Tempo medio di risposta al ping",
+    "Avg. Response": "Tempo medio di risposta",
+    "Entry Page": "Pagina Principale",
     statusPageNothing: "Non c'è nulla qui, aggiungere un gruppo oppure un monitoraggio.",
     "No Services": "Nessun Servizio",
-    "All Systems Operational": "Tutti i sistemi sono operativi",
+    "All Systems Operational": "Tutti i sistemi sono funzionali",
     "Partially Degraded Service": "Servizio parzialmente degradato",
     "Degraded Service": "Servizio degradato",
     "Add Group": "Aggiungi Gruppo",
     "Add a monitor": "Aggiungi un monitoraggio",
     "Edit Status Page": "Modifica pagina di stato",
     "Go to Dashboard": "Vai al Cruscotto",
-    "Status Page": "Status Page",
-    telegram: "Telegram",
-    webhook: "Webhook",
-    smtp: "Email (SMTP)",
-    discord: "Discord",
-    teams: "Microsoft Teams",
-    signal: "Signal",
-    gotify: "Gotify",
-    slack: "Slack",
+    "Status Page": "Pagina di stato",
+    defaultNotificationName: "Allarme {notification} ({number})",
+    here: "qui",
+    "Required": "Richiesto",
+    "telegram": "Telegram",
+    "Bot Token": "Token del Bot",
+    "You can get a token from": "Puoi ricevere un token da",
+    "Chat ID": "ID Chat",
+    supportTelegramChatID: "Supporta Chat dirette / di Gruppo / ID Canale",
+    wayToGetTelegramChatID: "Puoi ricereve l'ID chat mandando un messaggio al bot andando in questo url per visualizzare il chat_id:",
+    "YOUR BOT TOKEN HERE": "QUI IL TOKEN DEL BOT",
+    chatIDNotFound: "Non trovo l'ID chat. Prima bisogna mandare un messaggio al bot",
+    "webhook": "Webhook",
+    "Post URL": "Post URL",
+    "Content Type": "Content Type",
+    webhookJsonDesc: "{0} va bene per qualsiasi server http moderno ad esempio express.js",
+    webhookFormDataDesc: "{multipart} va bene per PHP, c'è solo bisogno di analizzare il json con {decodeFunction}",
+    "smtp": "E-mail (SMTP)",
+    secureOptionNone: "Nessuno / STARTTLS (25, 587)",
+    secureOptionTLS: "TLS (465)",
+    "Ignore TLS Error": "Ignora gli errori TLS",
+    "From Email": "Mittente",
+    emailCustomSubject: "Oggetto personalizzato",
+    "To Email": "Destinatario",
+    smtpCC: "CC",
+    smtpBCC: "CCn",
+    "discord": "Discord",
+    "Discord Webhook URL": "URL Webhook di Discord",
+    wayToGetDiscordURL: "È possibile recuperarlo da Impostazioni server -> Integrazioni -> Creare Webhook",
+    "Bot Display Name": "Nome del Bot",
+    "Prefix Custom Message": "Prefisso per il messaggio personalizzato",
+    "Hello @everyone is...": "Ciao a {'@'}everyone ...",
+    "teams": "Microsoft Teams",
+    "Webhook URL": "URL Webhook",
+    wayToGetTeamsURL: "È possibile imparare a creare un URL Webhook {0}.",
+    "signal": "Signal",
+    "Number": "Numero",
+    "Recipients": "Destinatari",
+    needSignalAPI: "È necessario avere un client Signal con le API REST.",
+    wayToCheckSignalURL: "Controllare questo url per capire come impostarne uno:",
+    signalImportant: "IMPORTANTE: Non è possibile mischiare gruppi e numeri all'interno dei destinatari!",
+    "gotify": "Gotify",
+    "Application Token": "Token Applicazione",
+    "Server URL": "URL Server",
+    "Priority": "Priorità",
+    "slack": "Slack",
+    "Icon Emoji": "Icona Emoji",
+    "Channel Name": "Nome Canale",
+    "Uptime Kuma URL": "Indirizzo Uptime Kuma",
+    aboutWebhooks: "Maggiori informazioni riguardo ai webhooks su: {0}",
+    aboutChannelName: "Inserire il nome del canale nel campo \"Nome Canale\" {0} se si vuole bypassare il canale webhook. Ad esempio: #altro-canale",
+    aboutKumaURL: "Se si lascia bianco il campo Indirizzo Uptime Kuma, la pagina GitHub sarà il valore predefinito.",
+    emojiCheatSheet: "Lista Emoji: {0}",
     "rocket.chat": "Rocket.chat",
     pushover: "Pushover",
     pushy: "Pushy",
     octopush: "Octopush",
     promosms: "PromoSMS",
+    clicksendsms: "ClickSend SMS",
     lunasea: "LunaSea",
-    apprise: "Apprise (Support 50+ Notification services)",
+    apprise: "Apprise (Supporta più di 50 servizi di notifica)",
     pushbullet: "Pushbullet",
     line: "Line Messenger",
     mattermost: "Mattermost",
+    "User Key": "Chiave Utente",
+    "Device": "Dispositivo",
+    "Message Title": "Titolo Messaggio",
+    "Notification Sound": "Suono di Notifica",
+    "More info on:": "Maggiori informazioni su: {0}",
+    pushoverDesc1: "Priorità di Emergenza (2) ha 30 secondi di timeout tra un tentativo e l'altro e scadrà dopo un'ora.",
+    pushoverDesc2: "Se si vuole inviare la notifica a dispositivi differenti, riempire il campo Dispositivi.",
+    "SMS Type": "Tipo di SMS",
+    octopushTypePremium: "Premium (Veloce - raccomandato per allertare)",
+    octopushTypeLowCost: "A Basso Costo (Lento - talvolta bloccato dall'operatore)",
+    checkPrice: "Controlla {0} prezzi:",
+    apiCredentials: "Credenziali API",
+    octopushLegacyHint: "Si vuole utilizzare la vecchia versione (2011-2020) oppure la nuova versione di Octopush?",
+    "Check octopush prices": "Controlla i prezzi di Octopush {0}.",
+    octopushPhoneNumber: "Numero di telefono (formato internazionale (p.e.): +33612345678) ",
+    octopushSMSSender: "Nome del mittente: 3-11 caratteri alfanumerici e spazi (a-zA-Z0-9)",
+    "LunaSea Device ID": "ID dispositivo LunaSea",
+    "Apprise URL": "URL Apprise",
+    "Example:": "Esempio: {0}",
+    "Read more:": "Maggiori informazioni: {0}",
+    "Status:": "Stato: {0}",
+    "Read more": "Maggiori informazioni",
+    appriseInstalled: "Apprise è installato.",
+    appriseNotInstalled: "Apprise non è installato. {0}",
+    "Access Token": "Token di accesso",
+    "Channel access token": "Token di accesso al canale",
+    "Line Developers Console": "Console sviluppatori Line",
+    lineDevConsoleTo: "Console sviluppatori Line - {0}",
+    "Basic Settings": "Impostazioni Base",
+    "User ID": "ID Utente",
+    "Messaging API": "API di Messaggistica",
+    wayToGetLineChannelToken: "Prima accedi a {0}, crea un provider e un canale (API di Messaggistica), dopodiché puoi avere il token di accesso e l'id utente dal menù sopra.",
+    "Icon URL": "URL Icona",
+    aboutIconURL: "È possibile impostare un collegameno a una immagine in \"URL Icona\" per modificare l'immagine di profilo. Non verrà utilizzata se è impostata l'Icona Emoji.",
+    aboutMattermostChannelName: "È possibile modificare il canale predefinito che dove il webhook manda messaggi immettendo il nome del canale nel campo \"Nome Canale\". Questo va abilitato nelle impostazioni webhook di Mattermost webhook. P.E.: #altro-canale",
+    "matrix": "Matrix",
+    promosmsTypeEco: "SMS ECO - economico, ma lento e spesso sovraccarico. Limitato solamente a destinatari Polacchi.",
+    promosmsTypeFlash: "SMS FLASH - Il messaggio sarà automaticamente mostrato sul dispositivo dei destinatari. Limitato solo a destinatari Polacchi.",
+    promosmsTypeFull: "SMS FULL - Premium, È possibile utilizzare il proprio come come mittente (è necessario prima registrare il nome). Affidabile per gli allarmi.",
+    promosmsTypeSpeed: "SMS SPEED - Maggior priorità. Rapido, affidabile, ma costoso (costa il doppio di SMS FULL).",
+    promosmsPhoneNumber: "Numero di Telefono (per destinatari Polacchi si può omettere il codice area)",
+    promosmsSMSSender: "Mittente SMS : Nome preregistrato oppure uno dei seguenti: InfoSMS, SMS Info, MaxSMS, INFO, SMS",
+    "Feishu WebHookUrl": "URL WebHook di Feishu",
+    matrixHomeserverURL: "URL Server (con http(s):// e opzionalmente la porta)",
+    "Internal Room Id": "ID Stanza Interna",
+    matrixDesc1: "È possibile recuperare l'ID della stanza all'interno delle impostazioni avanzate della stanza nel client Matrix. Dovrebbe essere simile a !QMdRCpUIfLwsfjxye6:server.di.casa.",
+    matrixDesc2: "È altamente raccomandata la creazione di un nuovo utente e di non utilizare il proprio token di accesso Matrix poiché darà pieno controllo al proprio account e a tutte le stanze in cui si ha accesso. Piuttosto, si crei un nuovo utente per invitarlo nella stanza dove si vuole ricevere le notifiche. Si può accedere al token eseguendo {0}",
+    Method: "Metodo",
+    Body: "Corpo",
+    Headers: "Intestazioni",
+    PushUrl: "URL di Push",
+    HeadersInvalidFormat: "L'intestazione di richiesta non è un JSON valido: ",
+    BodyInvalidFormat: "Il corpo di richiesta non è un JSON valido: ",
+    "Monitor History": "Storico monitoraggio",
+    clearDataOlderThan: "Mantieni lo storico per {0} giorni.",
+    PasswordsDoNotMatch: "Le password non corrispondono.",
+    records: "records",
+    "One record": "One record",
+    steamApiKeyDescription: "Per monitorare un server di gioco Steam si necessita della chiave Web-API di Steam. È possibile registrare la propria chiave API qui: ",
+    "Current User": "Utente corrente",
+    recent: "Recenti",
+    Done: "Fatto",
+    Info: "Info",
+    Security: "Sicurezza",
+    "Steam API Key": "Chiave API di Steam",
+    "Shrink Database": "Comprimi Database",
+    "Pick a RR-Type...": "Scegli un tipo di RR...",
+    "Pick Accepted Status Codes...": "Scegli i codici di Stato Accettati...",
+    Default: "Predefinito",
+    "HTTP Options": "Opzioni HTTP",
+    "Create Incident": "Crea Incident",
+    Title: "Titolo",
+    Content: "Contenuto",
+    Style: "Stile",
+    info: "informativo",
+    warning: "attenzione",
+    danger: "critico",
+    primary: "primario",
+    light: "chiaro",
+    dark: "scuro",
+    Post: "Posta",
+    "Please input title and content": "Inserire il titolo e il contenuto",
+    Created: "Creato",
+    "Last Updated": "Ultima modifica",
+    Unpin: "Stacca",
+    "Switch to Light Theme": "Utilizza tema chiaro",
+    "Switch to Dark Theme": "Utilizza tema scuro",
+    "Show Tags": "Mostra etichette",
+    "Hide Tags": "Nascondi etichette",
+    Description: "Descrizione",
+    "No monitors available.": "Nessun monitoraggio disponibile.",
+    "Add one": "Aggiungi",
+    "No Monitors": "Nessun monitoraggio",
+    "Add one": "Aggiungi",
+    "Untitled Group": "Gruppo senza titolo",
+    Services: "Servizi",
+    Discard: "Scarta",
+    Cancel: "Annulla",
+    "Powered by": "Servito da",
+    shrinkDatabaseDescription: "Lancia il comando VACUUM sul database SQLite. Se il database è stato creato dopo la versione 1.10.0, AUTO_VACUUM è già abilitato e questa azione non è necessaria.",
+    serwersms: "SerwerSMS.pl",
+    serwersmsAPIUser: "Nome utente API (incl. prefisso webapi_)",
+    serwersmsAPIPassword: "Password API",
+    serwersmsPhoneNumber: "Numero di Telefono",
+    serwersmsSenderName: "Nome del mittente SMS (registrato via portale cliente)",
+    "stackfield": "Stackfield",
 };

src/languages/ja.js

@@ -17,7 +17,7 @@ export default {
     pauseMonitorMsg: "一時停止しますか？",
     Settings: "設定",
     Dashboard: "ダッシュボード",
-    "New Update": "New Update",
+    "New Update": "新しいアップデート",
     Language: "言語",
     Appearance: "外観",
     Theme: "テーマ",
@@ -53,7 +53,7 @@ export default {
     Ping: "Ping",
     "Monitor Type": "監視タイプ",
     Keyword: "キーワード",
-    "Friendly Name": "Friendly Name",
+    "Friendly Name": "分かりやすい名前",
     URL: "URL",
     Hostname: "ホスト名",
     Port: "ポート",
@@ -104,60 +104,60 @@ export default {
     "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)",
+    "Create your admin account": "Adminアカウントの作成",
+    "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",
-    "Auto Get": "Auto Get",
-    enableDefaultNotificationDescription: "For every new monitor this notification will be enabled by default. You can still disable the notification separately for each monitor.",
-    "Default enabled": "Default enabled",
-    "Also apply to existing monitors": "Also apply to existing monitors",
-    Export: "Export",
-    Import: "Import",
-    backupDescription: "You can backup all monitors and all notifications into a JSON file.",
-    backupDescription2: "PS: History and event data is not included.",
-    backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.",
-    alertNoFile: "Please select a file to import.",
-    alertWrongFileType: "Please select a JSON file.",
-    twoFAVerifyLabel: "Please type in your token to verify that 2FA is working",
-    tokenValidSettingsMsg: "Token is valid! You can now save the 2FA settings.",
-    confirmEnableTwoFAMsg: "Are you sure you want to enable 2FA?",
-    confirmDisableTwoFAMsg: "Are you sure you want to disable 2FA?",
-    "Apply on all existing monitors": "Apply on all existing monitors",
-    "Verify Token": "Verify Token",
-    "Setup 2FA": "Setup 2FA",
-    "Enable 2FA": "Enable 2FA",
-    "Disable 2FA": "Disable 2FA",
-    "2FA Settings": "2FA Settings",
-    "Two Factor Authentication": "Two Factor Authentication",
+    Create: "作成",
+    clearEventsMsg: "この監視のすべての記録を削除してもよろしいですか？",
+    clearHeartbeatsMsg: "この監視のすべての異常記録を削除してもよろしいですか？",
+    confirmClearStatisticsMsg: "すべての統計を削除してもよろしいですか？",
+    "Clear Data": "データを削除",
+    Events: "統計",
+    Heartbeats: "異常記録",
+    "Auto Get": "自動取得",
+    enableDefaultNotificationDescription: "監視を作成するごとに、この通知方法はデフォルトで有効になります。監視ごとに通知を無効にすることもできます。",
+    "Default enabled": "デフォルトで有効にする",
+    "Also apply to existing monitors": "既存のモニターにも適用する",
+    Export: "エクスポート",
+    Import: "インポート",
+    backupDescription: "すべての監視と通知方法をJSONファイルにできます。",
+    backupDescription2: "※ 履歴と統計のデータはバックアップされません。",
+    backupDescription3: "通知に使用するトークンなどの機密データも含まれています。注意して扱ってください。",
+    alertNoFile: "インポートするファイルを選択してください。",
+    alertWrongFileType: "JSONファイルを選択してください。",
+    twoFAVerifyLabel: "トークンを入力して、２段階認証を有効にします。",
+    tokenValidSettingsMsg: "トークンの確認が完了しました！ 「保存」をしてください。",
+    confirmEnableTwoFAMsg: "２段階認証を「有効」にします。よろしいですか？",
+    confirmDisableTwoFAMsg: "２段階認証を「無効」にします。よろしいですか？",
+    "Apply on all existing monitors": "既存のすべてのモニターに適用する",
+    "Verify Token": "認証する",
+    "Setup 2FA": "２段階認証の設定",
+    "Enable 2FA": "２段階認証を有効にする",
+    "Disable 2FA": "２段階認証を無効にする",
+    "2FA Settings": "２段階認証の設定",
+    "Two Factor Authentication": "２段階認証",
     Active: "Active",
     Inactive: "Inactive",
     Token: "Token",
     "Show URI": "Show URI",
-    "Clear all statistics": "Clear all Statistics",
+    "Clear all statistics": "すべての記録を削除",
     retryCheckEverySecond: "Retry every {0} seconds.",
-    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
-    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
-    "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
-    Options: "Options",
-    "Keep both": "Keep both",
-    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
+    importHandleDescription: "同じ名前のすべての監視または通知方法を上書きしない場合は、「既存のをスキップ」を選択します。 「上書きする」は、既存のすべてのモニターと通知を削除します。",
+    confirmImportMsg: "バックアップをインポートしてもよろしいですか？希望するオプションを選択してください。",
+    "Heartbeat Retry Interval": "異常検知後の再試行間隔",
+    "Import Backup": "バックアップのインポート",
+    "Export Backup": "バックアップのエクスポート",
+    "Skip existing": "既存のをスキップする",
+    Overwrite: "上書きする",
+    Options: "オプション",
+    "Keep both": "どちらも保持する",
+    Tags: "タグ",
+    "Add New below or Select...": "新規追加または選択...",
+    "Tag with this name already exist.": "この名前のタグはすでに存在しています。",
+    "Tag with this value already exist.": "この値のタグはすでに存在しています。",
+    color: "色",
+    "value (optional)": "値 (optional)",
     Gray: "Gray",
     Red: "Red",
     Orange: "Orange",
@@ -166,20 +166,20 @@ export default {
     Indigo: "Indigo",
     Purple: "Purple",
     Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-    "Entry Page": "Entry Page",
-    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "Search...": "検索...",
+    "Avg. Ping": "平均Ping時間",
+    "Avg. Response": "平均応答時間",
+    "Entry Page": "エントリーページ",
+    statusPageNothing: "ここには何もありません。グループまたは監視を追加してください。",
     "No Services": "No Services",
-    "All Systems Operational": "All Systems Operational",
-    "Partially Degraded Service": "Partially Degraded Service",
-    "Degraded Service": "Degraded Service",
-    "Add Group": "Add Group",
-    "Add a monitor": "Add a monitor",
-    "Edit Status Page": "Edit Status Page",
-    "Go to Dashboard": "Go to Dashboard",
-    "Status Page": "Status Page",
+    "All Systems Operational": "すべてのサービスが稼働中",
+    "Partially Degraded Service": "部分的にサービスが停止中",
+    "Degraded Service": "サービスが停止中",
+    "Add Group": "グループの追加",
+    "Add a monitor": "監視の追加",
+    "Edit Status Page": "ステータスページ編集",
+    "Go to Dashboard": "ダッシュボード",
+    "Status Page": "ステータスページ",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/nl-NL.js

@@ -116,7 +116,7 @@ export default {
     "Repeat Password": "Herhaal wachtwoord",
     Export: "Exporteren",
     Import: "Importeren",
-    respTime: "resp. tijd (ms)",
+    respTime: "reactietijd (ms)",
     notAvailableShort: "N.v.t.",
     "Default enabled": "Default enabled",
     "Apply on all existing monitors": "Pas toe op alle bestaande monitors",
@@ -138,48 +138,48 @@ export default {
     "Two Factor Authentication": "Two Factor Authenticatie",
     Active: "Actief",
     Inactive: "Inactief",
-    "Also apply to existing monitors": "Also apply to existing monitors",
+    "Also apply to existing monitors": "Voeg ook toe aan bestaande monitors",
     Token: "Token",
     "Show URI": "Toon URI",
     "Clear all statistics": "Wis alle statistieken",
-    retryCheckEverySecond: "Retry every {0} seconds.",
-    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
-    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
+    retryCheckEverySecond: "Probeer elke {0} seconden.",
+    importHandleDescription: "Kies 'Sla bestaande over' als je elke monitor of melding met dezelfde naam wilt overslaan. Kies 'Overschrijf' als je elke monitor of notificatie wilt verwijderen.",
+    confirmImportMsg: "Weet je zeker dat je dit bestand wilt importeren?",
     "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
-    Options: "Options",
-    "Keep both": "Keep both",
-    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
-    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
+    "Import Backup": "Importeer Backup",
+    "Export Backup": "Exporteer Backup",
+    "Skip existing": "Sla bestaande over",
+    Overwrite: "Overschrijf",
+    Options: "Opties",
+    "Keep both": "Bewaar beide",
+    Tags: "Labels",
+    "Add New below or Select...": "Voeg nieuwe toe of selecteer...",
+    "Tag with this name already exist.": "Label met deze naam bestaat al",
+    "Tag with this value already exist.": "Label met deze waarde bestaat al",
+    color: "Kleur",
+    "value (optional)": "waarde (optioneel)",
+    Gray: "Grijs",
+    Red: "Rood",
+    Orange: "Oranje",
+    Green: "Groen",
+    Blue: "Blauw",
     Indigo: "Indigo",
-    Purple: "Purple",
-    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
+    Purple: "Paars",
+    Pink: "Roze",
+    "Search...": "Zoeken...",
+    "Avg. Ping": "Gemiddelde Ping",
+    "Avg. Response": "Gemiddelde Response",
     "Entry Page": "Entry Page",
-    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    statusPageNothing: "Niets hier, voeg een groep of monitor toe.",
     "No Services": "No Services",
-    "All Systems Operational": "All Systems Operational",
-    "Partially Degraded Service": "Partially Degraded Service",
-    "Degraded Service": "Degraded Service",
-    "Add Group": "Add Group",
-    "Add a monitor": "Add a monitor",
-    "Edit Status Page": "Edit Status Page",
-    "Go to Dashboard": "Go to Dashboard",
-    "Status Page": "Status Page",
+    "All Systems Operational": "Alle systemen operationeel",
+    "Partially Degraded Service": "Gedeeltelijk verminderde prestaties",
+    "Degraded Service": "Verminderde prestaties",
+    "Add Group": "Voeg groep toe",
+    "Add a monitor": "Voeg monitor toe",
+    "Edit Status Page": "Wijzig status pagina",
+    "Go to Dashboard": "Ga naar Dashboard",
+    "Status Page": "Status Pagina",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/pl.js

@@ -307,4 +307,9 @@ export default {
     recent: "Ostatnie",
     clicksendsms: "ClickSend SMS",
     apiCredentials: "Poświadczenia API",
+    serwersms: "SerwerSMS.pl",
+    serwersmsAPIUser: "Nazwa użytkownika API (z prefiksem webapi_)",
+    serwersmsAPIPassword: "Hasło API",
+    serwersmsPhoneNumber: "Numer telefonu",
+    serwersmsSenderName: "Nazwa nadawcy (zatwierdzona w panelu klienta)",
 };

src/languages/vi.js

@@ -33,21 +33,22 @@ export default {
     Appearance: "Giao diện",
     Theme: "Theme",
     General: "Chung",
+    "Primary Base URL": "URL chính",
     Version: "Phiên bản",
     "Check Update On GitHub": "Kiểm tra bản cập nhật mới trên GitHub",
     List: "List",
     Add: "Thêm",
     "Add New Monitor": "Thêm mới Monitor",
     "Quick Stats": "Thống kê nhanh",
-    Up: "Lên",
-    Down: "Xuống",
+    Up: "Up",
+    Down: "Down",
     Pending: "Chờ xử lý",
     Unknown: "Không xác định",
     Pause: "Tạm dừng",
     Name: "Tên",
     Status: "Trạng thái",
     DateTime: "Ngày tháng",
-    Message: "Tin nhắn",
+    Message: "Trạng thái request",
     "No important events": "Không có sự kiện quan trọng nào",
     Resume: "Khôi phục",
     Edit: "Sửa",
@@ -64,17 +65,20 @@ export default {
     Ping: "Ping",
     "Monitor Type": "Kiểu monitor",
     Keyword: "Từ khoá",
-    "Friendly Name": "Tên dễ hiểu",
+    "Friendly Name": "Tên monitor",
     URL: "URL",
     Hostname: "Hostname",
     Port: "Port",
-    "Heartbeat Interval": "Tần suất heartbeat",
+    "Heartbeat Interval": "Tần suất kiểm tra",
     Retries: "Thử lại",
-    "Heartbeat Retry Interval": "Tần suất thử lại của Heartbeat",
+    "Heartbeat Retry Interval": "Tần suất kiểm tra lại",
     Advanced: "Nâng cao",
-    "Upside Down Mode": "Trạng thái đảo ngược",
-    "Max. Redirects": "Chuyển hướng tối đa",
+    "Upside Down Mode": "Chế độ đảo ngược",
+    "Max. Redirects": "Số chuyển hướng tối đa",
     "Accepted Status Codes": "Codes trạng thái chấp nhận",
+    "Push URL": "Push URL",
+    needPushEvery: "Bạn nên gọi URL mỗi {0} giây.",
+    pushOptionalParams: "Tuỳ chỉnh parameters: {0}",
     Save: "Lưu",
     Notifications: "Thông báo",
     "Not available, please setup.": "Chưa sẵn sàng, hãy cài đặt.",
@@ -131,7 +135,7 @@ export default {
     Events: "Sự kiện",
     Heartbeats: "Heartbeats",
     "Auto Get": "Tự động lấy",
-    backupDescription: "Bạn có thể sao lưu tất cả các màn hình và tất cả các thông báo vào một file JSON.",
+    backupDescription: "Bạn có thể sao lưu tất cả các monitor và tất cả các thông báo vào một file JSON.",
     backupDescription2: "PS: Không bao gồm dữ liệu lịch sử các sự kiện.",
     backupDescription3: "Hãy lưu giữ file này cẩn thận vì trong file đó chứa cả các mã token thông báo.",
     alertNoFile: "Hãy chọn file để khôi phục.",
@@ -171,7 +175,7 @@ export default {
     "Entry Page": "Entry Page",
     statusPageNothing: "Không có gì, hãy thêm nhóm monitor hoặc monitor.",
     "No Services": "Không có dịch vụ",
-    "All Systems Operational": "Tất cả các hệ thống hoạt động",
+    "All Systems Operational": "Tất cả các hệ thống hoạt động bình thường",
     "Partially Degraded Service": "Dịch vụ xuống cấp một phần",
     "Degraded Service": "Degraded Service",
     "Add Group": "Thêm nhóm",
@@ -184,7 +188,7 @@ export default {
     Required: "Bắt buộc",
     telegram: "Telegram",
     "Bot Token": "Bot Token",
-    "You can get a token from": "Bạn có thể lấy mã token từ",
+    wayToGetTelegramToken: "Bạn có thể lấy mã token từ",
     "Chat ID": "Chat ID",
     supportTelegramChatID: "Hỗ trợ chat trực tiếp / Nhóm / Kênh Chat ID",
     wayToGetTelegramChatID: "Bạn có thể lấy chat id của mình bằng cách gửi tin nhắn tới bot và truy cập url này để xem chat_id:",
@@ -200,6 +204,7 @@ export default {
     secureOptionTLS: "TLS (465)",
     "Ignore TLS Error": "Bỏ qua lỗi TLS",
     "From Email": "Từ Email",
+    emailCustomSubject: "Tuỳ chỉnh tiêu đề",
     "To Email": "Tới Email",
     smtpCC: "CC",
     smtpBCC: "BCC",
@@ -212,7 +217,7 @@ export default {
     teams: "Microsoft Teams",
     "Webhook URL": "Webhook URL",
     wayToGetTeamsURL: "Bạn có thể học cách tạo webhook url {0}.",
-    signal: "Signal",
+    signal: "Tín hiệu",
     Number: "Số",
     Recipients: "Người nhận",
     needSignalAPI: "Bạn cần một tín hiệu client với REST API.",
@@ -235,8 +240,9 @@ export default {
     pushy: "Pushy",
     octopush: "Octopush",
     promosms: "PromoSMS",
+    clicksendsms: "ClickSend SMS",
     lunasea: "LunaSea",
-    apprise: "Thông báo (Hỗ trợ 50+ dịch vụ thông báo)",
+    apprise: "Apprise (Hỗ trợ 50+ dịch vụ thông báo)",
     pushbullet: "Pushbullet",
     line: "Line Messenger",
     mattermost: "Mattermost",
@@ -250,8 +256,11 @@ export default {
     "SMS Type": "SMS Type",
     octopushTypePremium: "Premium (Nhanh - Khuyến nghị nên dùng cho cảnh báo)",
     octopushTypeLowCost: "Giá rẻ (Chậm, thỉnh thoảng bị chặn)",
+    checkPrice: "Kiểm tra giá {0}:",
+    apiCredentials: "API credentials",
+    octopushLegacyHint: "Bạn muốn sử dụng phiên bản cũ của Octopush (2011-2020) hay phiên bản mới?",
     "Check octopush prices": "Kiểm tra giá octopush {0}.",
-    octopushPhoneNumber: "Số điện thoại (Định dạng intl, vd : +33612345678) ",
+    octopushPhoneNumber: "Số điện thoại (Định dạng intl, vd : +84123456789) ",
     octopushSMSSender: "SMS người gửi : 3-11 ký tự chữ, số và dấu cách (a-zA-Z0-9)",
     "LunaSea Device ID": "LunaSea ID thiết bị",
     "Apprise URL": "Apprise URL",
@@ -280,4 +289,22 @@ export default {
     promosmsPhoneNumber: "Số điện thoại (Bỏ qua mã vùng với người Ba Lan)",
     promosmsSMSSender: "SMS Tên người gửi: Tên đã đăng ký trước hoặc tên mặc định: InfoSMS, SMS Info, MaxSMS, INFO, SMS",
     "Feishu WebHookUrl": "Feishu WebHookUrl",
+    matrixHomeserverURL: "Homeserver URL (với http(s):// và port tuỳ chỉnh)",
+    "Internal Room Id": "Room ID Nội bộ",
+    matrixDesc1: "Bạn có thể tìm thấy room ID nội bộ bằng cách tìm trong mục advanced của phần room settings trong Matrix client của bạn. Nó có dạng giống như !QMdRCpUIfLwsfjxye6:home.server.",
+    matrixDesc2: "Bạn nên tạo người dùng mới và đừng sử dụng mã token truy cập của Matrix user vì nó sẽ cho phép truy cập toàn quyền vào tài khoản của bạn và tất cả các phòng bạn đã tham gia. Thay vào đó, hãy tạo một người dùng mới và chỉ mời người đó vào phòng mà bạn muốn nhận thông báo. Bạn có thể lấy được mã token truy cập bằng cách chạy {0}",
+    Method: "Method",
+    Body: "Body",
+    Headers: "Headers",
+    PushUrl: "Push URL",
+    HeadersInvalidFormat: "Header request không hợp lệ JSON: ",
+    BodyInvalidFormat: "Tequest body không hợp lệ JSON: ",
+    "Monitor History": "Lịch sử Monitor",
+    clearDataOlderThan: "Giữ dữ liệu lịch sử monitor {0} ngày.",
+    PasswordsDoNotMatch: "Passwords không khớp.",
+    records: "records",
+    "One record": "One record",
+    steamApiKeyDescription: "Để monitor các Steam Game Server bạn cần một Steam Web-API key. Bạn có thể đăng ký API key tại đây: ",
+    "Current User": "User hiện tại",
+    recent: "Gần đây",
 };

src/layouts/Layout.vue

@@ -29,7 +29,7 @@
                     </router-link>
                 </li>
                 <li v-if="$root.loggedIn" class="nav-item">
-                    <router-link to="/settings" class="nav-link">
+                    <router-link to="/settings" class="nav-link" :class="{ active: $route.path.includes('settings') }">
                         <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
                     </router-link>
                 </li>
@@ -188,8 +188,8 @@ main {
 
 .dark {
     header {
-        background-color: #161b22;
-        border-bottom-color: #161b22 !important;
+        background-color: $dark-header-bg;
+        border-bottom-color: $dark-header-bg !important;
 
         span {
             color: #f0f6fc;

src/main.js

@@ -12,6 +12,7 @@ import mobile from "./mixins/mobile";
 import publicMixin from "./mixins/public";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
+import lang from "./mixins/lang";
 import { router } from "./router";
 import { appName } from "./util.ts";
 
@@ -22,6 +23,7 @@ const app = createApp({
         mobile,
         datetime,
         publicMixin,
+        lang,
     ],
     data() {
         return {

src/mixins/lang.js

@@ -0,0 +1,33 @@
+import { currentLocale } from "../i18n";
+import { setPageLocale } from "../util-frontend";
+const langModules = import.meta.glob("../languages/*.js");
+
+export default {
+    data() {
+        return {
+            language: currentLocale(),
+        };
+    },
+
+    async created() {
+        if (this.language !== "en") {
+            await this.changeLang(this.language);
+        }
+    },
+
+    watch: {
+        async language(lang) {
+            await this.changeLang(lang);
+        },
+    },
+
+    methods: {
+        async changeLang(lang) {
+            let message = (await langModules["../languages/" + lang + ".js"]()).default;
+            this.$i18n.setLocaleMessage(lang, message);
+            this.$i18n.locale = lang;
+            localStorage.locale = lang;
+            setPageLocale();
+        }
+    }
+};

src/mixins/socket.js

@@ -1,5 +1,6 @@
 import { io } from "socket.io-client";
 import { useToast } from "vue-toastification";
+import jwt_decode from "jwt-decode";
 const toast = useToast();
 
 let socket;
@@ -217,6 +218,15 @@ export default {
             return (this.remember) ? localStorage : sessionStorage;
         },
 
+        getJWTPayload() {
+            const jwtToken = this.$root.storage().token;
+
+            if (jwtToken && jwtToken !== "autoLogin") {
+                return jwt_decode(jwtToken);
+            }
+            return undefined;
+        },
+
         getSocket() {
             return socket;
         },

src/pages/EditMonitor.vue

@@ -103,7 +103,7 @@
                                         :close-on-select="true"
                                         :clear-on-select="false"
                                         :preserve-search="false"
-                                        placeholder="Pick a RR-Type..."
+                                        :placeholder="$t('Pick a RR-Type...')"
                                         :preselect-first="false"
                                         :max-height="500"
                                         :taggable="false"
@@ -177,7 +177,7 @@
                                         :close-on-select="false"
                                         :clear-on-select="false"
                                         :preserve-search="true"
-                                        placeholder="Pick Accepted Status Codes..."
+                                        :placeholder="$t('Pick Accepted Status Codes...')"
                                         :preselect-first="false"
                                         :max-height="600"
                                         :taggable="true"
@@ -194,7 +194,7 @@
                             </div>
 
                             <div class="mt-5 mb-1">
-                                <button class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
+                                <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
                             </div>
                         </div>
 
@@ -215,7 +215,7 @@
                                     <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
                                 </label>
 
-                                <span v-if="notification.isDefault == true" class="badge bg-primary ms-2">Default</span>
+                                <span v-if="notification.isDefault == true" class="badge bg-primary ms-2">{{ $t("Default") }}</span>
                             </div>
 
                             <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
@@ -265,6 +265,19 @@
                                     <label for="headers" class="form-label">{{ $t("Headers") }}</label>
                                     <textarea id="headers" v-model="monitor.headers" class="form-control" :placeholder="headersPlaceholder"></textarea>
                                 </div>
+
+                                <!-- HTTP Basic Auth -->
+                                <h4 class="mt-5 mb-2">{{ $t("HTTP Basic Auth") }}</h4>
+
+                                <div class="my-3">
+                                    <label for="basicauth" class="form-label">{{ $t("Username") }}</label>
+                                    <input id="basicauth-user" v-model="monitor.basic_auth_user" type="text" class="form-control" :placeholder="$t('Username')">
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="basicauth" class="form-label">{{ $t("Password") }}</label>
+                                    <input id="basicauth-pass" v-model="monitor.basic_auth_pass" type="password" class="form-control" :placeholder="$t('Password')">
+                                </div>
                             </template>
                         </div>
                     </div>
@@ -340,17 +353,17 @@ export default {
         },
 
         bodyPlaceholder() {
-            return `Example:
+            return this.$t("Example:", [`
 {
     "key": "value"
-}`;
+}`]);
         },
 
         headersPlaceholder() {
-            return `Example:
+            return this.$t("Example:", [`
 {
     "HeaderName": "HeaderValue"
-}`;
+}`]);
         }
 
     },

src/pages/Settings.vue

@@ -1,525 +1,93 @@
 <template>
-    <transition name="slide-fade" appear>
-        <div>
-            <h1 v-show="show" class="mb-3">
-                {{ $t("Settings") }}
-            </h1>
+    <div>
+        <h1 v-show="show" class="mb-3">
+            {{ $t("Settings") }}
+        </h1>
 
-            <div class="shadow-box">
-                <div class="row">
-                    <div class="col-md-6">
-                        <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 class="shadow-box">
+            <div class="row">
+                <div class="settings-menu">
+                    <router-link
+                        v-for="(item, key) in subMenus"
+                        :key="key"
+                        :to="`/settings/${key}`"
+                    >
+                        <div class="menu-item">
+                            {{ item.title }}
                         </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>
-
-                        <!-- General Settings -->
-                        <h2 class="mt-5 mb-2">{{ $t("General") }}</h2>
-
-                        <form class="mb-3" @submit.prevent="saveGeneral">
-                            <!-- Timezone -->
-                            <div class="mb-4">
-                                <label for="timezone" class="form-label">{{ $t("Timezone") }}</label>
-                                <select id="timezone" v-model="$root.userTimezone" class="form-select">
-                                    <option value="auto">
-                                        {{ $t("Auto") }}: {{ guessTimezone }}
-                                    </option>
-                                    <option v-for="(timezone, index) in timezoneList" :key="index" :value="timezone.value">
-                                        {{ timezone.name }}
-                                    </option>
-                                </select>
-                            </div>
-
-                            <!-- Search Engine -->
-                            <div class="mb-4">
-                                <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>
-
-                            <!-- Entry Page -->
-                            <div class="mb-4">
-                                <label class="form-label">{{ $t("Entry Page") }}</label>
-
-                                <div class="form-check">
-                                    <input id="entryPageYes" v-model="settings.entryPage" class="form-check-input" type="radio" name="statusPage" value="dashboard" required>
-                                    <label class="form-check-label" for="entryPageYes">
-                                        {{ $t("Dashboard") }}
-                                    </label>
-                                </div>
-
-                                <div class="form-check">
-                                    <input id="entryPageNo" v-model="settings.entryPage" class="form-check-input" type="radio" name="statusPage" value="statusPage" required>
-                                    <label class="form-check-label" for="entryPageNo">
-                                        {{ $t("Status Page") }}
-                                    </label>
-                                </div>
-                            </div>
-
-                            <!-- Primary Base URL -->
-                            <div class="mb-4">
-                                <label class="form-label" for="primaryBaseURL">{{ $t("Primary Base URL") }}</label>
-
-                                <div class="input-group mb-3">
-                                    <input id="primaryBaseURL" v-model="settings.primaryBaseURL" class="form-control" name="primaryBaseURL" placeholder="https://" pattern="https?://.+">
-                                    <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">{{ $t("Auto Get") }}</button>
-                                </div>
-
-                                <div class="form-text">
-                                </div>
-                            </div>
-
-                            <!-- Steam API Key -->
-                            <div class="mb-4">
-                                <label class="form-label" for="steamAPIKey">{{ $t("Steam API Key") }}</label>
-                                <HiddenInput id="steamAPIKey" v-model="settings.steamAPIKey" />
-                                <div class="form-text">
-                                    {{ $t("steamApiKeyDescription") }}<a href="https://steamcommunity.com/dev" target="_blank">https://steamcommunity.com/dev</a>
-                                </div>
-                            </div>
-
-                            <!-- Monitor History -->
-                            <div class="mb-4">
-                                <h4 class="mt-4">{{ $t("Monitor History") }}</h4>
-                                <div class="mt-2">
-                                    <label for="keepDataPeriodDays" class="form-label">{{ $t("clearDataOlderThan", [ settings.keepDataPeriodDays ]) }}</label>
-                                    <input id="keepDataPeriodDays" v-model="settings.keepDataPeriodDays" type="number" class="form-control" required min="1" step="1">
-                                </div>
-                            </div>
-
-                            <!-- Save Button -->
-                            <div>
-                                <button class="btn btn-primary" type="submit">
-                                    {{ $t("Save") }}
-                                </button>
-                            </div>
-                        </form>
-
-                        <template v-if="loaded">
-                            <!-- Change Password -->
-                            <template v-if="! settings.disableAuth">
-                                <h2 class="mt-5 mb-2">{{ $t("Change Password") }}</h2>
-                                <p>{{ $t("Current User") }}: <strong>{{ username }}</strong></p>
-                                <form class="mb-3" @submit.prevent="savePassword">
-                                    <div class="mb-3">
-                                        <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">{{ $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">{{ $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">
-                                            {{ $t("passwordNotMatchMsg") }}
-                                        </div>
-                                    </div>
-
-                                    <div>
-                                        <button class="btn btn-primary" type="submit">
-                                            {{ $t("Update Password") }}
-                                        </button>
-                                    </div>
-                                </form>
-                            </template>
-
-                            <div v-if="! settings.disableAuth" class="mt-5 mb-3">
-                                <h2 class="mb-2">
-                                    {{ $t("Two Factor Authentication") }}
-                                </h2>
-                                <button class="btn btn-primary me-2" type="button" @click="$refs.TwoFADialog.show()">{{ $t("2FA Settings") }}</button>
-                            </div>
-
-                            <h2 class="mt-5 mb-2">{{ $t("Export Backup") }}</h2>
-
-                            <p>
-                                {{ $t("backupDescription") }} <br />
-                                ({{ $t("backupDescription2") }}) <br />
-                            </p>
-
-                            <div class="mb-2">
-                                <button class="btn btn-primary" @click="downloadBackup">{{ $t("Export") }}</button>
-                            </div>
-
-                            <p><strong>{{ $t("backupDescription3") }}</strong></p>
-
-                            <h2 class="mt-5 mb-2">{{ $t("Import Backup") }}</h2>
-
-                            <label class="form-label">{{ $t("Options") }}:</label>
-                            <br>
-                            <div class="form-check form-check-inline">
-                                <input id="radioKeep" v-model="importHandle" class="form-check-input" type="radio" name="radioImportHandle" value="keep">
-                                <label class="form-check-label" for="radioKeep">{{ $t("Keep both") }}</label>
-                            </div>
-                            <div class="form-check form-check-inline">
-                                <input id="radioSkip" v-model="importHandle" class="form-check-input" type="radio" name="radioImportHandle" value="skip">
-                                <label class="form-check-label" for="radioSkip">{{ $t("Skip existing") }}</label>
-                            </div>
-                            <div class="form-check form-check-inline">
-                                <input id="radioOverwrite" v-model="importHandle" class="form-check-input" type="radio" name="radioImportHandle" value="overwrite">
-                                <label class="form-check-label" for="radioOverwrite">{{ $t("Overwrite") }}</label>
-                            </div>
-                            <div class="form-text mb-2">
-                                {{ $t("importHandleDescription") }}
-                            </div>
-
-                            <div class="mb-2">
-                                <input id="importBackup" type="file" class="form-control" accept="application/json">
-                            </div>
-
-                            <div class="input-group mb-2 justify-content-end">
-                                <button type="button" class="btn btn-outline-primary" :disabled="processing" @click="confirmImport">
-                                    <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
-                                    {{ $t("Import") }}
-                                </button>
-                            </div>
-
-                            <div v-if="importAlert" class="alert alert-danger mt-3" style="padding: 6px 16px;">
-                                {{ importAlert }}
-                            </div>
-
-                            <!-- Advanced -->
-                            <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
-
-                            <div class="mb-3">
-                                <button v-if="settings.disableAuth" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
-                                <button v-if="! settings.disableAuth" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
-                                <button v-if="! settings.disableAuth" class="btn btn-danger me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
-                                <button class="btn btn-outline-danger me-2 mb-2" @click="confirmClearStatistics">{{ $t("Clear all statistics") }}</button>
-                                <button class="btn btn-info me-2 mb-2" @click="shrinkDatabase">{{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})</button>
-                            </div>
-                        </template>
+                    </router-link>
+                </div>
+                <div class="settings-content">
+                    <div class="settings-content-header">
+                        {{ subMenus[currentPage].title }}
                     </div>
-
-                    <div class="col-md-6">
-                        <div v-if="$root.isMobile" class="mt-3" />
-
-                        <!-- Notifications -->
-                        <div class="notification-list ">
-                            <h2>{{ $t("Notifications") }}</h2>
-                            <p v-if="$root.notificationList.length === 0">
-                                {{ $t("Not available, please setup.") }}
-                            </p>
-                            <p v-else>
-                                {{ $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)">{{ $t("Edit") }}</a>
-                                </li>
-                            </ul>
-
-                            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                                {{ $t("Setup Notification") }}
-                            </button>
-                        </div>
-
-                        <!-- Info -->
-                        <h2 class="mt-5">{{ $t("Info") }}</h2>
-
-                        {{ $t("Version") }}: {{ $root.info.version }} <br />
-                        <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
+                    <div class="mx-3">
+                        <router-view v-slot="{ Component }">
+                            <transition name="slide-fade" appear>
+                                <component :is="Component" />
+                            </transition>
+                        </router-view>
                     </div>
                 </div>
             </div>
-
-            <NotificationDialog ref="notificationDialog" />
-            <TwoFADialog ref="TwoFADialog" />
-
-            <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 === '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-else-if="$i18n.locale === 'pt-BR' ">
-                    <p>Você tem certeza que deseja <strong>desativar a autenticação</strong>?</p>
-                    <p>Isso é para <strong>alguém que tem autenticação de terceiros</strong> na frente do 'UpTime Kuma' como o Cloudflare Access.</p>
-                    <p>Por favor, utilize isso com cautela.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'zh-HK' ">
-                    <p>你是否確認<strong>取消登入認証</strong>？</p>
-                    <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
-                    <p>請小心使用。</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'zh-CN' ">
-                    <p>是否确定 <strong>取消登录验证</strong>？</p>
-                    <p>这是为 <strong>有第三方认证</strong> 的用户提供的功能，如 Cloudflare Access</p>
-                    <p>请谨慎使用！</p>
-                </template>
-                
-                <template v-else-if="$i18n.locale === 'zh-TW' ">
-                    <p>你是否要<strong>取消登入驗證</strong>？</p>
-                    <p>此功能是設計給已有<strong>第三方認證</strong>的使用者，例如 Cloudflare Access。</p>
-                    <p>請謹慎使用。</p>
-                </template>
-
-                <template v-else-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-else-if="$i18n.locale === 'sr' ">
-                    <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
-                    <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
-                    <p>Молим Вас користите ово са пажњом.</p>
-                </template>
-
-                <template v-else-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 === 'hr-HR' ">
-                    <p>Jeste li sigurni da želite <strong>isključiti autentikaciju</strong>?</p>
-                    <p>To je za <strong>korisnike koji imaju vanjsku autentikaciju stranice</strong> ispred Uptime Kume, poput usluge Cloudflare Access.</p>
-                    <p>Pažljivo koristite ovu opciju.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'tr-TR' ">
-                    <p><strong>Şifreli girişi devre dışı bırakmak istediğinizden</strong>emin misiniz?</p>
-                    <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
-                    <p>Lütfen dikkatli kullanın.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'ko-KR' ">
-                    <p>정말로 <strong>인증 기능을 끌까요</strong>?</p>
-                    <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
-                    <p>신중하게 사용하세요.</p>
-                </template>
-
-                <template v-else-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>
-
-                <template v-else-if="$i18n.locale === 'et-EE' ">
-                    <p>Kas soovid <strong>lülitada autentimise välja</strong>?</p>
-                    <p>Kastuamiseks <strong>välise autentimispakkujaga</strong>, näiteks Cloudflare Access.</p>
-                    <p>Palun kasuta vastutustundlikult.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'it-IT' ">
-                    <p>Si è certi di voler <strong>disabilitare l'autenticazione</strong>?</p>
-                    <p>È per <strong>chi ha l'autenticazione gestita da terze parti</strong> messa davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
-                    <p>Utilizzare con attenzione.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'id-ID' ">
-                    <p>Apakah Anda yakin ingin <strong>menonaktifkan autentikasi</strong>?</p>
-                    <p>Ini untuk <strong>mereka yang memiliki autentikasi pihak ketiga</strong> diletakkan di depan Uptime Kuma, misalnya akses Cloudflare.</p>
-                    <p>Gunakan dengan hati-hati.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'ru-RU' ">
-                    <p>Вы уверены, что хотите <strong>отключить авторизацию</strong>?</p>
-                    <p>Это подходит для <strong>тех, у кого стоит другая авторизация</strong> перед открытием Uptime Kuma, например Cloudflare Access.</p>
-                    <p>Пожалуйста, используйте с осторожностью.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'fa' ">
-                    <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
-                    <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
-                    <p>لطفا از این امکان با دقت استفاده کنید.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'bg-BG' ">
-                    <p>Сигурни ли сте, че желаете да <strong>изключите удостоверяването</strong>?</p>
-                    <p>Използва се в случаите, когато <strong>има настроен алтернативен метод за удостоверяване</strong> преди Uptime Kuma, например Cloudflare Access.</p>
-                    <p>Моля, използвайте с повишено внимание.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'hu' ">
-                    <p>Biztos benne, hogy <strong>kikapcsolja a hitelesítést</strong>?</p>
-                    <p>Akkor érdemes, ha <strong>van 3rd-party hitelesítés</strong> az Uptime Kuma-t megelőzően mint a Cloudflare Access.</p>
-                    <p>Használja megfontoltan!</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'nb-NO' ">
-                    <p>Er du sikker på at du vil <strong>deaktiver autentisering</strong>?</p>
-                    <p>Dette er for <strong>de som har tredjepartsautorisering</strong> foran Uptime Kuma, for eksempel Cloudflare Access.</p>
-                    <p>Vennligst vær forsiktig.</p>
-                </template>
-
-                <!-- English (en) -->
-                <template v-else>
-                    <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>
-            </Confirm>
-
-            <Confirm ref="confirmClearStatistics" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearStatistics">
-                {{ $t("confirmClearStatisticsMsg") }}
-            </Confirm>
-            <Confirm ref="confirmImport" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="importBackup">
-                {{ $t("confirmImportMsg") }}
-            </Confirm>
         </div>
-    </transition>
+    </div>
 </template>
 
 <script>
-import HiddenInput from "../components/HiddenInput.vue";
-import Confirm from "../components/Confirm.vue";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-import NotificationDialog from "../components/NotificationDialog.vue";
-import TwoFADialog from "../components/TwoFADialog.vue";
-import jwt_decode from "jwt-decode";
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-import { timezoneList, setPageLocale } from "../util-frontend";
-import { useToast } from "vue-toastification";
-import { debug } from "../util.ts";
-
-const toast = useToast();
+import { useRoute } from "vue-router";
 
 export default {
-    components: {
-        NotificationDialog,
-        TwoFADialog,
-        Confirm,
-        HiddenInput,
-    },
-
     data() {
         return {
-            timezoneList: timezoneList(),
-            guessTimezone: dayjs.tz.guess(),
             show: true,
-            invalidPassword: false,
-            password: {
-                currentPassword: "",
-                newPassword: "",
-                repeatNewPassword: "",
-            },
-            settings: {
 
-            },
-            loaded: false,
-            importAlert: null,
-            importHandle: "skip",
-            processing: false,
-            databaseSize: 0,
+            settings: {},
+            settingsLoaded: false,
         };
     },
 
     computed: {
-        databaseSizeDisplay() {
-            return Math.round(this.databaseSize / 1024 / 1024 * 10) / 10 + " MB";
-        }
-    },
-
-    watch: {
-        "password.repeatNewPassword"() {
-            this.invalidPassword = false;
+        currentPage() {
+            let pathEnd = useRoute().path.split("/").at(-1);
+            if (pathEnd == "settings" || pathEnd == null) {
+                return "general";
+            }
+            return pathEnd;
         },
 
-        "$i18n.locale"() {
-            localStorage.locale = this.$i18n.locale;
-            setPageLocale();
+        subMenus() {
+            return {
+                general: {
+                    title: this.$t("General"),
+                },
+                appearance: {
+                    title: this.$t("Appearance"),
+                },
+                notifications: {
+                    title: this.$t("Notifications"),
+                },
+                "monitor-history": {
+                    title: this.$t("Monitor History"),
+                },
+                security: {
+                    title: this.$t("Security"),
+                },
+                backup: {
+                    title: this.$t("Backup"),
+                },
+                about: {
+                    title: this.$t("About"),
+                },
+            };
         },
     },
 
     mounted() {
-        this.loadUsername();
         this.loadSettings();
-        this.loadDatabaseSize();
     },
 
     methods: {
-
-        saveGeneral() {
-            localStorage.timezone = this.$root.userTimezone;
-            this.saveSettings();
-        },
-
-        savePassword() {
-            if (this.password.newPassword !== this.password.repeatNewPassword) {
-                this.invalidPassword = true;
-            } else {
-                this.$root.getSocket().emit("changePassword", this.password, (res) => {
-                    this.$root.toastRes(res);
-                    if (res.ok) {
-                        this.password.currentPassword = "";
-                        this.password.newPassword = "";
-                        this.password.repeatNewPassword = "";
-                    }
-                });
-            }
-        },
-
-        loadUsername() {
-            const jwtToken = this.$root.storage().token;
-            const jwtPayload = jwt_decode(jwtToken);
-            this.username = jwtPayload.username;
-        },
-
         loadSettings() {
             this.$root.getSocket().emit("getSettings", (res) => {
                 this.settings = res.data;
@@ -536,7 +104,7 @@ export default {
                     this.settings.keepDataPeriodDays = 180;
                 }
 
-                this.loaded = true;
+                this.settingsLoaded = true;
             });
         },
 
@@ -546,115 +114,6 @@ export default {
                 this.loadSettings();
             });
         },
-
-        confirmDisableAuth() {
-            this.$refs.confirmDisableAuth.show();
-        },
-
-        confirmClearStatistics() {
-            this.$refs.confirmClearStatistics.show();
-        },
-
-        confirmImport() {
-            this.$refs.confirmImport.show();
-        },
-
-        disableAuth() {
-            this.settings.disableAuth = true;
-            this.saveSettings();
-        },
-
-        enableAuth() {
-            this.settings.disableAuth = false;
-            this.saveSettings();
-            this.$root.storage().removeItem("token");
-        },
-
-        downloadBackup() {
-            let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
-            let fileName = `Uptime_Kuma_Backup_${time}.json`;
-            let monitorList = Object.values(this.$root.monitorList);
-            let exportData = {
-                version: this.$root.info.version,
-                notificationList: this.$root.notificationList,
-                monitorList: monitorList,
-            };
-            exportData = JSON.stringify(exportData, null, 4);
-            let downloadItem = document.createElement("a");
-            downloadItem.setAttribute("href", "data:application/json;charset=utf-8," + encodeURIComponent(exportData));
-            downloadItem.setAttribute("download", fileName);
-            downloadItem.click();
-        },
-
-        importBackup() {
-            this.processing = true;
-            let uploadItem = document.getElementById("importBackup").files;
-
-            if (uploadItem.length <= 0) {
-                this.processing = false;
-                return this.importAlert = this.$t("alertNoFile");
-            }
-
-            if (uploadItem.item(0).type !== "application/json") {
-                this.processing = false;
-                return this.importAlert = this.$t("alertWrongFileType");
-            }
-
-            let fileReader = new FileReader();
-            fileReader.readAsText(uploadItem.item(0));
-
-            fileReader.onload = item => {
-                this.$root.uploadBackup(item.target.result, this.importHandle, (res) => {
-                    this.processing = false;
-
-                    if (res.ok) {
-                        toast.success(res.msg);
-                    } else {
-                        toast.error(res.msg);
-                    }
-                });
-            };
-        },
-
-        clearStatistics() {
-            this.$root.clearStatistics((res) => {
-                if (res.ok) {
-                    this.$router.go();
-                } else {
-                    toast.error(res.msg);
-                }
-            });
-        },
-
-        autoGetPrimaryBaseURL() {
-            this.settings.primaryBaseURL = location.protocol + "//" + location.host;
-        },
-
-        shrinkDatabase() {
-            this.$root.getSocket().emit("shrinkDatabase", (res) => {
-                if (res.ok) {
-                    this.loadDatabaseSize();
-                    toast.success("Done");
-                } else {
-                    debug(res);
-                }
-            });
-        },
-
-        loadDatabaseSize() {
-            debug("load database size");
-            this.$root.getSocket().emit("getDatabaseSize", (res) => {
-
-                if (res.ok) {
-                    this.databaseSize = res.size;
-                    debug("database size: " + res.size);
-                } else {
-                    debug(res);
-                }
-
-            });
-        }
-
     },
 };
 </script>
@@ -664,37 +123,7 @@ export default {
 
 .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;
-    }
-
-    .btn-check:active + .btn-outline-primary,
-    .btn-check:checked + .btn-outline-primary,
-    .btn-check:hover + .btn-outline-primary {
-        color: #000;
-    }
-
-    #importBackup {
-        &::file-selector-button {
-            color: $primary;
-            background-color: $dark-bg;
-        }
-
-        &:hover:not(:disabled):not([readonly])::file-selector-button {
-            color: $dark-font-color2;
-            background-color: $primary;
-        }
-    }
+    min-height: calc(100vh - 155px);
 }
 
 footer {
@@ -704,4 +133,59 @@ footer {
     padding-bottom: 30px;
     text-align: center;
 }
+
+.settings-menu {
+    flex: 0 0 auto;
+    width: 300px;
+
+    a {
+        text-decoration: none !important;
+    }
+
+    .menu-item {
+        border-radius: 10px;
+        margin: 0.5em;
+        padding: 0.7em 1em;
+        cursor: pointer;
+    }
+
+    .menu-item:hover {
+        background: $highlight-white;
+
+        .dark & {
+            background: $dark-header-bg;
+        }
+    }
+
+    .active .menu-item {
+        background: $highlight-white;
+        border-left: 4px solid $primary;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        .dark & {
+            background: $dark-header-bg;
+        }
+    }
+}
+
+.settings-content {
+    flex: 0 0 auto;
+    width: calc(100% - 300px);
+
+    .settings-content-header {
+        width: calc(100% + 20px);
+        border-bottom: 1px solid #dee2e6;
+        border-radius: 0 10px 0 0;
+        margin-top: -20px;
+        margin-right: -20px;
+        padding: 12.5px 1em;
+        font-size: 26px;
+
+        .dark & {
+            background: $dark-header-bg;
+            border-bottom: 0;
+        }
+    }
+}
 </style>

src/pages/StatusPage.vue

@@ -101,9 +101,9 @@
 
             <!-- Incident Date -->
             <div class="date mt-3">
-                Created: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
+                {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
                 <span v-if="incident.lastUpdatedDate">
-                    Last Updated: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
+                    {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
                 </span>
             </div>
 
@@ -125,15 +125,15 @@
 
                 <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
                     <button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        Style: {{ incident.style }}
+                        {{ $t("Style") }}: {{ $t(incident.style) }}
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'info'">info</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">warning</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">danger</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">primary</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'light'">light</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">dark</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
                     </ul>
                 </div>
 
@@ -468,13 +468,13 @@ export default {
         },
 
         addGroup() {
-            let groupName = "Untitled Group";
+            let groupName = this.$t("Untitled Group");
 
             if (this.$root.publicGroupList.length === 0) {
-                groupName = "Services";
+                groupName = this.$t("Services");
             }
 
-            this.$root.publicGroupList.push({
+            this.$root.publicGroupList.unshift({
                 name: groupName,
                 monitorList: [],
             });
@@ -536,7 +536,7 @@ export default {
 
         postIncident() {
             if (this.incident.title == "" || this.incident.content == "") {
-                toast.error("Please input title and content.");
+                toast.error(this.$t("Please input title and content"));
                 return;
             }
 

src/router.js

@@ -11,6 +11,14 @@ import Setup from "./pages/Setup.vue";
 const StatusPage = () => import("./pages/StatusPage.vue");
 import Entry from "./pages/Entry.vue";
 
+import Appearance from "./components/settings/Appearance.vue";
+import General from "./components/settings/General.vue";
+import Notifications from "./components/settings/Notifications.vue";
+import MonitorHistory from "./components/settings/MonitorHistory.vue";
+import Security from "./components/settings/Security.vue";
+import Backup from "./components/settings/Backup.vue";
+import About from "./components/settings/About.vue";
+
 const routes = [
     {
         path: "/",
@@ -59,6 +67,37 @@ const routes = [
                     {
                         path: "/settings",
                         component: Settings,
+                        children: [
+                            {
+                                path: "general",
+                                alias: "",
+                                component: General,
+                            },
+                            {
+                                path: "appearance",
+                                component: Appearance,
+                            },
+                            {
+                                path: "notifications",
+                                component: Notifications,
+                            },
+                            {
+                                path: "monitor-history",
+                                component: MonitorHistory,
+                            },
+                            {
+                                path: "security",
+                                component: Security,
+                            },
+                            {
+                                path: "backup",
+                                component: Backup,
+                            },
+                            {
+                                path: "about",
+                                component: About,
+                            },
+                        ]
                     },
                 ],
             },

test/e2e.spec.js

@@ -59,18 +59,38 @@ describe("Init", () => {
 
         // Go to /
         await page.goto(baseURL);
-        await sleep(3000);
+        await page.waitForSelector("h1.mb-3");
         pathname = await page.evaluate(() => location.pathname);
         expect(pathname).toEqual("/dashboard");
     });
 
+    it("should create monitor", async () => {
+        // Create monitor
+        await page.goto(baseURL + "/add");
+        await page.waitForSelector("#name");
+
+        await page.type("#name", "Myself");
+        await page.waitForSelector("#url");
+        await page.click("#url", { clickCount: 3 });
+        await page.keyboard.type(baseURL);
+        await page.keyboard.press("Enter");
+
+        await page.waitForFunction(() => {
+            const badge = document.querySelector("span.badge");
+            return badge && badge.innerText == "100%";
+        }, { timeout: 5000 });
+
+    });
+
     // Settings Page
+    /*
     describe("Settings", () => {
-        beforeAll(async () => {
+        beforeEach(async () => {
             await page.goto(baseURL + "/settings");
         });
 
         it("Change Language", async () => {
+            await page.goto(baseURL + "/settings/appearance");
             await page.waitForSelector("#language");
 
             await page.select("#language", "zh-HK");
@@ -83,20 +103,33 @@ describe("Init", () => {
         });
 
         it("Change Theme", async () => {
-            await sleep(1000);
+            await page.goto(baseURL + "/settings/appearance");
 
             // Dark
             await click(page, ".btn[for=btncheck2]");
             await page.waitForSelector("div.dark");
 
-            await sleep(1000);
+            await page.waitForSelector(".btn[for=btncheck1]");
 
             // Light
             await click(page, ".btn[for=btncheck1]");
             await page.waitForSelector("div.light");
         });
 
-        // TODO: Heartbeat Bar Style
+        it("Change Heartbeat Bar Style", async () => {
+            await page.goto(baseURL + "/settings/appearance");
+
+            // Bottom
+            await click(page, ".btn[for=btncheck5]");
+            await page.waitForSelector("div.hp-bar-big");
+
+            // None
+            await click(page, ".btn[for=btncheck6]");
+            await page.waitForSelector("div.hp-bar-big", {
+                hidden: true,
+                timeout: 1000
+            });
+        });
 
         // TODO: Timezone
 
@@ -108,14 +141,14 @@ describe("Init", () => {
             // Yes
             await click(page, "#searchEngineIndexYes");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(2000);
+            await sleep(1000);
             res = await axios.get(baseURL + "/robots.txt");
             expect(res.data).not.toContain("Disallow: /");
 
             // No
             await click(page, "#searchEngineIndexNo");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(2000);
+            await sleep(1000);
             res = await axios.get(baseURL + "/robots.txt");
             expect(res.data).toContain("Disallow: /");
         });
@@ -125,25 +158,25 @@ describe("Init", () => {
 
             // Default
             await newPage.goto(baseURL);
-            await sleep(3000);
+            await newPage.waitForSelector("h1.mb-3", { timeout: 3000 });
             let pathname = await newPage.evaluate(() => location.pathname);
             expect(pathname).toEqual("/dashboard");
 
             // Status Page
             await click(page, "#entryPageNo");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(4000);
+            await sleep(1000);
             await newPage.goto(baseURL);
-            await sleep(4000);
+            await newPage.waitForSelector("img.logo", { timeout: 3000 });
             pathname = await newPage.evaluate(() => location.pathname);
             expect(pathname).toEqual("/status");
 
             // Back to Dashboard
             await click(page, "#entryPageYes");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(4000);
+            await sleep(1000);
             await newPage.goto(baseURL);
-            await sleep(4000);
+            await newPage.waitForSelector("h1.mb-3", { timeout: 3000 });
             pathname = await newPage.evaluate(() => location.pathname);
             expect(pathname).toEqual("/dashboard");
 
@@ -151,7 +184,7 @@ describe("Init", () => {
         });
 
         it("Change Password (wrong current password)", async () => {
-            await page.goto(baseURL + "/settings");
+            await page.goto(baseURL + "/settings/security");
             await page.waitForSelector("#current-password");
 
             await page.type("#current-password", "wrong_passw$$d");
@@ -159,10 +192,10 @@ describe("Init", () => {
             await page.type("#repeat-new-password", "new_password123");
 
             // Save
-            await click(page, "form > div > .btn[type=submit]", 1);
-            await sleep(4000);
+            await click(page, "form > div > .btn[type=submit]", 0);
+            await sleep(1000);
 
-            await click(page, ".btn-danger.btn.me-2");
+            await click(page, "#logout-btn");
             await login("admin", "new_password123");
             let elementCount = await page.evaluate(() => document.querySelectorAll("#floatingPassword").length);
             expect(elementCount).toEqual(1);
@@ -171,24 +204,26 @@ describe("Init", () => {
         });
 
         it("Change Password (wrong repeat)", async () => {
-            await page.goto(baseURL + "/settings");
+            await page.goto(baseURL + "/settings/security");
             await page.waitForSelector("#current-password");
 
             await page.type("#current-password", "admin123");
             await page.type("#new-password", "new_password123");
             await page.type("#repeat-new-password", "new_password1234567898797898");
 
-            await click(page, "form > div > .btn[type=submit]", 1);
-            await sleep(4000);
+            await click(page, "form > div > .btn[type=submit]", 0);
+            await sleep(1000);
 
-            await click(page, ".btn-danger.btn.me-2");
+            await click(page, "#logout-btn");
             await login("admin", "new_password123");
 
             let elementCount = await page.evaluate(() => document.querySelectorAll("#floatingPassword").length);
             expect(elementCount).toEqual(1);
 
             await login("admin", "admin123");
-            await sleep(3000);
+            await page.waitForSelector("#current-password");
+            let pathname = await page.evaluate(() => location.pathname);
+            expect(pathname).toEqual("/settings/security");
         });
 
         // TODO: 2FA
@@ -197,10 +232,37 @@ describe("Init", () => {
 
         // TODO: Import Backup
 
-        // TODO: Disable Auth
+        it("Should disable & enable auth", async () => {
+            await page.goto(baseURL + "/settings/security");
+            await click(page, "#disableAuth-btn");
+            await click(page, ".btn.btn-danger[data-bs-dismiss='modal']", 2); // Not a good way to do it
+            await page.waitForSelector("#enableAuth-btn", { timeout: 3000 });
+            await page.waitForSelector("#logout-btn", {
+                hidden: true,
+                timeout: 3000
+            });
 
-        // TODO: Clear Stats
+            const newPage = await browser.newPage();
+            await newPage.goto(baseURL);
+            await newPage.waitForSelector("span.badge", { timeout: 3000 });
+            newPage.close();
+
+            await click(page, "#enableAuth-btn");
+            await login("admin", "admin123");
+            await page.waitForSelector("#disableAuth-btn", { timeout: 3000 });
+        });
+
+        // it("Should clear all statistics", async () => {
+        //     await page.goto(baseURL + "/settings/monitor-history");
+        //     await click(page, "#clearAllStats-btn");
+        //     await click(page, ".btn.btn-danger");
+        //     await page.waitForFunction(() => {
+        //         const badge = document.querySelector("span.badge");
+        //         return badge && badge.innerText == "0%";
+        //     }, { timeout: 3000 });
+        // });
     });
+     */
 
     /*
      * TODO