Merge branch 'master' into notification_form_i18n

# Conflicts: # src/components/notifications/SMTP.vue # src/languages/en.js
2021-10-06 16:48:14 +08:00 · 2021-10-06 16:48:14 +08:00 · c8706b9aa1
parent 51acd107e3 fef26f3d5e
commit c8706b9aa1
51 changed files with 8088 additions and 1040 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -91,6 +91,23 @@ module.exports = {
            "rules": {
                "comma-dangle": ["error", "always-multiline"],
            }
+        },
+
+        // Override for jest puppeteer
+        {
+            "files": [
+                "**/*.spec.js",
+                "**/*.spec.jsx"
+            ],
+            env: {
+                jest: true,
+            },
+            globals: {
+                page: true,
+                browser: true,
+                context: true,
+                jestPuppeteer: true,
+            },
        }
    ]
 };
--- a/.github/workflows/auto-test.yml
+++ b/.github/workflows/auto-test.yml
@ -0,0 +1,34 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Auto Test
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 15.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build
+    - run: npm test
+      env:
+        HEADLESS_TEST: 1
+        JUST_FOR_TEST: ${{ secrets.JUST_FOR_TEST }}
--- a/.gitignore
+++ b/.gitignore
@ -11,3 +11,4 @@ dist-ssr

 /private
 /out
+/tmp
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -4,11 +4,30 @@ First of all, thank you everyone who made pull requests for Uptime Kuma, I never

 The project was created with vite.js (vue3). Then I created a sub-directory called "server" for server part. Both frontend and backend share the same package.json.

-The frontend code build into "dist" directory. The server uses "dist" as root. This is how production is working.
+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.
+
+# Key Technical Skills
+
+- Node.js (You should know what are promise, async/await and arrow function etc.)
+- Socket.io
+- SCSS
+- Vue.js
+- Bootstrap
+- SQLite
+
+# Directories
+
+- data (App data)
+- dist (Frontend build)
+- extra (Extra useful scripts)
+- public (Frontend resources for dev only)
+- server (Server source code)
+- src (Frontend source code)
+- test (unit test)

 # Can I create a pull request for Uptime Kuma?

-Generally, if the pull request is working fine and it do not affect any existing logic, workflow and perfomance, I will merge to the master branch once it is tested.
+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.

 If you are not sure, feel free to create an empty pull request draft first.

@ -43,15 +62,14 @@ It changed my current workflow and require further studies.

 I personally do not like something need to learn so much and need to config so much before you can finally start the app.

-For example, recently, because I am not a python expert, I spent a 2 hours to resolve all problems in order to install and use the Apprise cli. Apprise requires so many hidden requirements, I have to figure out myself how to solve the problems by Google search for my OS. That is painful. I do not want Uptime Kuma to be like this way, so:
-
 - Easy to install for non-Docker users, no native build dependency is needed (at least for x86_64), no extra config, no extra effort to get it run
 - Single container for Docker users, no very complex docker-composer file. Just map the volume and expose the port, then good to go
- All settings in frontend.
+- Settings should be configurable in the frontend. Env var is not encouraged.
 - Easy to use

 # Coding Styles

+- 4 spaces indentation
 - Follow `.editorconfig`
 - Follow ESLint

@ -65,22 +83,16 @@ For example, recently, because I am not a python expert, I spent a 2 hours to re

 - Node.js >= 14
 - Git
- IDE that supports EditorConfig and ESLint (I am using Intellji Idea)
- A SQLite tool (I am using SQLite Expert Personal)
+- IDE that supports ESLint and EditorConfig (I am using Intellji Idea)
+- A SQLite tool (SQLite Expert Personal is suggested)

 # Install dependencies

 ```bash
-npm install --dev
+npm ci
 ```

-For npm@7, you need --legacy-peer-deps
-
-```bash
-npm install --legacy-peer-deps --dev
-```
-
-# Backend Dev
+# How to start the Backend Dev Server

 (2021-09-23 Update)

@ -96,28 +108,24 @@ It is mainly a socket.io app + express.js.

 express.js is just used for serving the frontend built files (index.html, .js and .css etc.)

-# Frontend Dev
+- model/ (Object model, auto mapping to the database table name)
+- modules/ (Modified 3rd-party modules)
+- notification-providers/ (indivdual notification logic)
+- routers/ (Express Routers)
+- scoket-handler (Socket.io Handlers)
+- server.js (Server main logic)

-Start frontend dev server. Hot-reload enabled in this way. It binds to `0.0.0.0:3000` by default.
+# How to start the Frontend Dev Server

-```bash
-npm run dev
-```
-
-PS: You can ignore those scss warnings, those warnings are from Bootstrap that I cannot fix.
+1. Set the env var `NODE_ENV` to "development".
+2. Start the frontend dev server by the following command.
+   ```bash
+   npm run dev
+   ```
+   It binds to `0.0.0.0:3000` by default.

 You can use Vue.js devtools Chrome extension for debugging.

-After the frontend server started. It cannot connect to the websocket server even you have started the server. You need to tell the frontend that is a dev env by running this in DevTool console and refresh:
-
-```javascript
-localStorage.dev = "dev";
-```
-
-So that the frontend will try to connect websocket server in 3001.
-
-Alternately, you can specific `NODE_ENV` to "development".
-
 ## Build the frontend

 ```bash
@ -134,11 +142,33 @@ As you can see, most data in frontend is stored in root level, even though you c

 The data and socket logic are in `src/mixins/socket.js`.

+
 # Database Migration

-1. Create `patch{num}.sql` in `./db/`
-2. Update `latestVersion` in `./server/database.js`
+1. Create `patch-{name}.sql` in `./db/`
+2. Add your patch filename in the `patchList` list in `./server/database.js`

 # Unit Test

-Yes, no unit test for now. I know it is very important, but at the same time my spare time is very limited. I want to implement my ideas first. I will go back to this in some points.
+It is an end-to-end testing. It is using Jest and Puppeteer.
+
+```
+npm run build
+npm test
+```
+
+By default, the Chromium window will be shown up during the test. Specifying `HEADLESS_TEST=1` for terminal environments.
+
+# Update Dependencies
+
+Install `ncu`
+https://github.com/raineorshine/npm-check-updates
+
+```bash
+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. 
+
+Patch release = the third digit
--- a/extra/update-version.js
+++ b/extra/update-version.js
@ -19,6 +19,7 @@ if (! newVersion) {
 const exists = tagExists(newVersion);

 if (! exists) {
+
    // Process package.json
    pkg.version = newVersion;
    pkg.scripts.setup = pkg.scripts.setup.replaceAll(oldVersion, newVersion);
@ -29,8 +30,11 @@ if (! exists) {

    commit(newVersion);
    tag(newVersion);
+
+    updateWiki(oldVersion, newVersion);
+
 } else {
-    console.log("version exists")
+    console.log("version exists");
 }

 function commit(version) {
@ -38,16 +42,16 @@ function commit(version) {

    let res = child_process.spawnSync("git", ["commit", "-m", msg, "-a"]);
    let stdout = res.stdout.toString().trim();
-    console.log(stdout)
+    console.log(stdout);

    if (stdout.includes("no changes added to commit")) {
-        throw new Error("commit error")
+        throw new Error("commit error");
    }
 }

 function tag(version) {
    let res = child_process.spawnSync("git", ["tag", version]);
-    console.log(res.stdout.toString().trim())
+    console.log(res.stdout.toString().trim());
 }

 function tagExists(version) {
@ -59,3 +63,38 @@ function tagExists(version) {

    return res.stdout.toString().trim() === version;
 }
+
+function updateWiki(oldVersion, newVersion) {
+    const wikiDir = "./tmp/wiki";
+    const howToUpdateFilename = "./tmp/wiki/🆙-How-to-Update.md";
+
+    safeDelete(wikiDir);
+
+    child_process.spawnSync("git", ["clone", "https://github.com/louislam/uptime-kuma.wiki.git", wikiDir]);
+    let content = fs.readFileSync(howToUpdateFilename).toString();
+    content = content.replaceAll(`git checkout ${oldVersion}`, `git checkout ${newVersion}`);
+    fs.writeFileSync(howToUpdateFilename, content);
+
+    child_process.spawnSync("git", ["add", "-A"], {
+        cwd: wikiDir,
+    });
+
+    child_process.spawnSync("git", ["commit", "-m", `Update to ${newVersion} from ${oldVersion}`], {
+        cwd: wikiDir,
+    });
+
+    console.log("Pushing to Github");
+    child_process.spawnSync("git", ["push"], {
+        cwd: wikiDir,
+    });
+
+    safeDelete(wikiDir);
+}
+
+function safeDelete(dir) {
+    if (fs.existsSync(dir)) {
+        fs.rmdirSync(dir, {
+            recursive: true,
+        });
+    }
+}
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@ -0,0 +1,6 @@
+module.exports = {
+    "launch": {
+        "headless": process.env.HEADLESS_TEST || false,
+        "userDataDir": "./data/test-chrome-profile",
+    }
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -20,6 +20,8 @@
        "start-server": "node server/server.js",
        "start-server-dev": "cross-env NODE_ENV=development node server/server.js",
        "build": "vite build",
+        "test": "node test/prepare-test-server.js && node server/server.js --port=3002 --data-dir=./data/test/ --test",
+        "jest": "node test/prepare-jest.js && jest",
        "tsc": "tsc",
        "vite-preview-dist": "vite preview --host",
        "build-docker": "npm run build-docker-debian && npm run build-docker-alpine",
@ -51,7 +53,7 @@
        "@fortawesome/free-solid-svg-icons": "~5.15.4",
        "@fortawesome/vue-fontawesome": "~3.0.0-4",
        "@louislam/sqlite3": "~5.0.6",
-        "@popperjs/core": "~2.10.1",
+        "@popperjs/core": "~2.10.2",
        "args-parser": "~1.3.0",
        "axios": "~0.21.4",
        "bcryptjs": "~2.4.3",
@ -70,7 +72,7 @@
        "notp": "~2.0.3",
        "password-hash": "~1.2.2",
        "postcss-rtlcss": "~3.4.1",
-        "postcss-scss": "~4.0.0",
+        "postcss-scss": "~4.0.1",
        "prom-client": "~13.2.0",
        "prometheus-api-metrics": "~3.2.0",
        "qrcode": "~1.4.4",
@ -85,7 +87,7 @@
        "vue-chart-3": "~0.5.8",
        "vue-confirm-dialog": "~1.0.2",
        "vue-contenteditable": "~3.0.4",
-        "vue-i18n": "~9.1.7",
+        "vue-i18n": "~9.1.8",
        "vue-image-crop-upload": "~3.0.3",
        "vue-multiselect": "~3.0.0-alpha.2",
        "vue-qrcode": "~1.0.0",
@ -97,17 +99,30 @@
        "@babel/eslint-parser": "~7.15.7",
        "@types/bootstrap": "~5.1.6",
        "@vitejs/plugin-legacy": "~1.5.3",
-        "@vitejs/plugin-vue": "~1.9.1",
-        "@vue/compiler-sfc": "~3.2.16",
-        "core-js": "~3.18.0",
+        "@vitejs/plugin-vue": "~1.9.2",
+        "@vue/compiler-sfc": "~3.2.19",
+        "core-js": "~3.18.1",
        "cross-env": "~7.0.3",
        "dns2": "~2.0.1",
        "eslint": "~7.32.0",
        "eslint-plugin-vue": "~7.18.0",
+        "jest": "~27.2.4",
+        "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.5.10"
+    },
+    "jest": {
+        "verbose": true,
+        "preset": "jest-puppeteer",
+        "globals": {
+            "__DEV__": true
+        },
+        "testRegex": "./test/*.spec.js",
+        "rootDir": ".",
+        "testTimeout": 30000
    }
 }
--- a/server/check-version.js
+++ b/server/check-version.js
@ -22,7 +22,6 @@ exports.startInterval = () => {
            }

            exports.latestVersion = res.data.version;
-            console.log("Latest Version: " + exports.latestVersion);
        } catch (_) { }

    };
--- a/server/prometheus.js
+++ b/server/prometheus.js
@ -59,7 +59,7 @@ class Prometheus {
            }

            try {
-                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.daysRemaining)
+                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.certInfo.daysRemaining)
            } catch (e) {
                console.error(e)
            }
--- a/server/server.js
+++ b/server/server.js
@ -37,7 +37,7 @@ console.log("Importing this project modules");
 debug("Importing Monitor");
 const Monitor = require("./model/monitor");
 debug("Importing Settings");
-const { getSettings, setSettings, setting, initJWTSecret, checkLogin } = require("./util-server");
+const { getSettings, setSettings, setting, initJWTSecret, checkLogin, startUnitTest } = require("./util-server");

 debug("Importing Notification");
 const { Notification } = require("./notification");
@ -64,12 +64,11 @@ const port = parseInt(process.env.PORT || args.port || 3001);
 const sslKey = process.env.SSL_KEY || args["ssl-key"] || undefined;
 const sslCert = process.env.SSL_CERT || args["ssl-cert"] || undefined;

-// Demo Mode?
-const demoMode = args["demo"] || false;
-
-if (demoMode) {
-    console.log("==== Demo Mode ====");
-}
+/**
+ * Run unit test after the server is ready
+ * @type {boolean}
+ */
+const testMode = !!args["test"] || false;

 console.log("Creating express and socket.io instance");
 const app = express();
@ -1223,6 +1222,10 @@ exports.entryPage = "dashboard";
        }
        startMonitors();
        checkVersion.startInterval();
+
+        if (testMode) {
+            startUnitTest();
+        }
    });

 })();
--- a/server/util-server.js
+++ b/server/util-server.js
@ -5,6 +5,7 @@ const { debug } = require("../src/util");
 const passwordHash = require("./password-hash");
 const dayjs = require("dayjs");
 const { Resolver } = require("dns");
+const child_process = require("child_process");

 /**
 * Init or reset JWT secret
@ -185,38 +186,42 @@ const getDaysRemaining = (validFrom, validTo) => {
    return daysRemaining;
 };

-exports.checkCertificate = function (res) {
-    const {
-        valid_from,
-        valid_to,
-        subjectaltname,
-        issuer,
-        fingerprint,
-    } = res.request.res.socket.getPeerCertificate(false);
+// Fix certificate Info for display
+// param: info -  the chain obtained from getPeerCertificate()
+const parseCertificateInfo = function (info) {
+    let link = info;

-    if (!valid_from || !valid_to || !subjectaltname) {
-        throw {
-            message: "No TLS certificate in response",
-        };
+    while (link) {
+        if (!link.valid_from || !link.valid_to) {
+            break;
+        }
+        link.validTo = new Date(link.valid_to);
+        link.validFor = link.subjectaltname?.replace(/DNS:|IP Address:/g, "").split(", ");
+        link.daysRemaining = getDaysRemaining(new Date(), link.validTo);
+
+        // Move up the chain until loop is encountered
+        if (link.issuerCertificate == null) {
+            break;
+        } else if (link.fingerprint == link.issuerCertificate.fingerprint) {
+            link.issuerCertificate = null;
+            break;
+        } else {
+            link = link.issuerCertificate;
+        }
    }

+    return info;
+};
+
+exports.checkCertificate = function (res) {
+    const info = res.request.res.socket.getPeerCertificate(true);
    const valid = res.request.res.socket.authorized || false;

-    const validTo = new Date(valid_to);
-
-    const validFor = subjectaltname
-        .replace(/DNS:|IP Address:/g, "")
-        .split(", ");
-
-    const daysRemaining = getDaysRemaining(new Date(), validTo);
+    const parsedInfo = parseCertificateInfo(info);

    return {
-        valid,
-        validFor,
-        validTo,
-        daysRemaining,
-        issuer,
-        fingerprint,
+        valid: valid,
+        certInfo: parsedInfo
    };
 };

@ -288,3 +293,22 @@ exports.checkLogin = (socket) => {
        throw new Error("You are not logged in.");
    }
 };
+
+exports.startUnitTest = async () => {
+    console.log("Starting unit test...");
+    const npm = /^win/.test(process.platform) ? "npm.cmd" : "npm";
+    const child = child_process.spawn(npm, ["run", "jest"]);
+
+    child.stdout.on("data", (data) => {
+        console.log(data.toString());
+    });
+
+    child.stderr.on("data", (data) => {
+        console.log(data.toString());
+    });
+
+    child.on("close", function (code) {
+        console.log("Jest exit code: " + code);
+        process.exit(code);
+    });
+};
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@ -321,7 +321,7 @@ h2 {
    .item {
        display: block;
        text-decoration: none;
-        padding: 13px 15px 10px 15px;
+        padding: 14px 15px;
        border-radius: 10px;
        transition: all ease-in-out 0.15s;

@ -413,4 +413,4 @@ h2 {

 // Localization

-@import "localization.scss";
+@import "localization.scss";
--- a/src/components/CertificateInfo.vue
+++ b/src/components/CertificateInfo.vue
@ -0,0 +1,52 @@
+<template>
+    <div>
+        <h4>{{ $t("Certificate Info") }}</h4>
+        {{ $t("Certificate Chain") }}:
+        <div
+            v-if="valid"
+            class="rounded d-inline-flex ms-2 text-white tag-valid"
+        >
+            {{ $t("Valid") }}
+        </div>
+        <div
+            v-if="!valid"
+            class="rounded d-inline-flex ms-2 text-white tag-invalid"
+        >
+            {{ $t("Invalid") }}
+        </div>
+        <certificate-info-row :cert="certInfo" />
+    </div>
+</template>
+
+<script>
+import CertificateInfoRow from "./CertificateInfoRow.vue";
+export default {
+    components: {
+        CertificateInfoRow,
+    },
+    props: {
+        certInfo: {
+            type: Object,
+            required: true,
+        },
+        valid: {
+            type: Boolean,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.tag-valid {
+    padding: 2px 25px;
+    background-color: $primary;
+}
+
+.tag-invalid {
+    padding: 2px 25px;
+    background-color: $danger;
+}
+</style>
--- a/src/components/CertificateInfoRow.vue
+++ b/src/components/CertificateInfoRow.vue
@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div class="d-flex flex-row align-items-center p-1 overflow-hidden">
+            <div class="m-3 ps-3">
+                <div class="cert-icon">
+                    <font-awesome-icon icon="file" />
+                    <font-awesome-icon class="award-icon" icon="award" />
+                </div>
+            </div>
+            <div class="m-3">
+                <table class="text-start">
+                    <tbody>
+                        <tr class="my-3">
+                            <td class="px-3">Subject:</td>
+                            <td>{{ formatSubject(cert.subject) }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Valid To:</td>
+                            <td><Datetime :value="cert.validTo" /></td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Days Remaining:</td>
+                            <td>{{ cert.daysRemaining }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Issuer:</td>
+                            <td>{{ formatSubject(cert.issuer) }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Fingerprint:</td>
+                            <td>{{ cert.fingerprint }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="d-flex">
+            <font-awesome-icon
+                v-if="cert.issuerCertificate"
+                class="m-2 ps-6 link-icon"
+                icon="link"
+            />
+        </div>
+        <certificate-info-row
+            v-if="cert.issuerCertificate"
+            :cert="cert.issuerCertificate"
+        />
+    </div>
+</template>
+
+<script>
+import Datetime from "../components/Datetime.vue";
+export default {
+    name: "CertificateInfoRow",
+    components: {
+        Datetime,
+    },
+    props: {
+        cert: {
+            type: Object,
+            required: true,
+        },
+    },
+    methods: {
+        formatSubject(subject) {
+            if (subject.O && subject.CN && subject.C) {
+                return `${subject.CN} - ${subject.O} (${subject.C})`;
+            } else if (subject.O && subject.CN) {
+                return `${subject.CN} - ${subject.O}`;
+            } else if (subject.CN) {
+                return subject.CN;
+            } else {
+                return "no info";
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+table {
+    overflow: hidden;
+}
+
+.cert-icon {
+    position: relative;
+    font-size: 70px;
+    color: $link-color;
+    opacity: 0.5;
+
+    .dark & {
+        color: $dark-font-color;
+        opacity: 0.3;
+    }
+}
+
+.award-icon {
+    position: absolute;
+    font-size: 0.5em;
+    bottom: 20%;
+    left: 12%;
+    color: white;
+
+    .dark & {
+        color: $dark-bg;
+    }
+}
+
+.link-icon {
+    font-size: 20px;
+    margin-left: 50px !important;
+    color: $link-color;
+    opacity: 0.5;
+
+    .dark & {
+        color: $dark-font-color;
+        opacity: 0.3;
+    }
+}
+</style>
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@ -38,7 +38,7 @@ export default {
            beatMargin: 4,
            move: false,
            maxBeat: -1,
-        }
+        };
    },
    computed: {

@ -69,12 +69,12 @@ export default {
            if (start < 0) {
                // Add empty placeholder
                for (let i = start; i < 0; i++) {
-                    placeholders.push(0)
+                    placeholders.push(0);
                }
                start = 0;
            }

-            return placeholders.concat(this.beatList.slice(start))
+            return placeholders.concat(this.beatList.slice(start));
        },

        wrapStyle() {
@ -84,7 +84,7 @@ export default {
            return {
                padding: `${topBottom}px ${leftRight}px`,
                width: "100%",
-            }
+            };
        },

        barStyle() {
@ -94,12 +94,12 @@ export default {
                return {
                    transition: "all ease-in-out 0.25s",
                    transform: `translateX(${width}px)`,
-                }
+                };

            }
            return {
                transform: "translateX(0)",
-            }
+            };

        },

@ -109,7 +109,7 @@ export default {
                height: this.beatHeight + "px",
                margin: this.beatMargin + "px",
                "--hover-scale": this.hoverScale,
-            }
+            };
        },

    },
@ -120,7 +120,7 @@ export default {

                setTimeout(() => {
                    this.move = false;
-                }, 300)
+                }, 300);
            },
            deep: true,
        },
@ -162,7 +162,7 @@ export default {
    methods: {
        resize() {
            if (this.$refs.wrap) {
-                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
+                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
            }
        },

@ -170,7 +170,7 @@ export default {
            return `${this.$root.datetime(beat.time)} - ${beat.msg}`;
        }
    },
-}
+};
 </script>

 <style lang="scss" scoped>
@ -183,6 +183,9 @@ export default {
 }

 .hp-bar-big {
+    display: flex;
+    justify-content: flex-end;
+
    .beat {
        display: inline-block;
        background-color: $primary;
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@ -60,7 +60,6 @@ export default {

            this.$root.login(this.username, this.password, this.token, (res) => {
                this.processing = false;
-                console.log(res);

                if (res.tokenRequired) {
                    this.tokenRequired = true;
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@ -3,10 +3,10 @@
        <div class="list-header">
            <div class="placeholder"></div>
            <div class="search-wrapper">
-                <a v-if="searchText == ''" class="search-icon">
+                <a v-if="!searchText" class="search-icon">
                    <font-awesome-icon icon="search" />
                </a>
-                <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
+                <a v-if="searchText" class="search-icon" @click="clearSearchText">
                    <font-awesome-icon icon="times" />
                </a>
                <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
@ -19,21 +19,21 @@

            <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
                <div class="row">
-                    <div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                    <div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar === 'bottom' || $root.userHeartbeatBar === 'none' }">
                        <div class="info">
                            <Uptime :monitor="item" type="24" :pill="true" />
-                            {{ item.name }}
+                            <span class="ms-1">{{ item.name }}</span>
                        </div>
                        <div class="tags">
                            <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
                        </div>
                    </div>
-                    <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4">
+                    <div v-show="$root.userHeartbeatBar === 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4 small-padding">
                        <HeartbeatBar size="small" :monitor-id="item.id" />
                    </div>
                </div>

-                <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
+                <div v-if="$root.userHeartbeatBar === 'bottom'" class="row">
                    <div class="col-12">
                        <HeartbeatBar size="small" :monitor-id="item.id" />
                    </div>
@ -62,7 +62,7 @@ export default {
    data() {
        return {
            searchText: "",
-        }
+        };
    },
    computed: {
        sortedMonitorList() {
@ -91,17 +91,17 @@ export default {
                }

                return m1.name.localeCompare(m2.name);
-            })
+            });

            // Simple filter by search text
            // finds monitor name, tag name or tag value
-            if (this.searchText != "") {
+            if (this.searchText) {
                const loweredSearchText = this.searchText.toLowerCase();
                result = result.filter(monitor => {
                    return monitor.name.toLowerCase().includes(loweredSearchText)
                    || monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
-                    || tag.value?.toLowerCase().includes(loweredSearchText))
-                })
+                    || tag.value?.toLowerCase().includes(loweredSearchText));
+                });
            }

            return result;
@ -115,7 +115,7 @@ export default {
            this.searchText = "";
        }
    },
-}
+};
 </script>

 <style lang="scss" scoped>
--- a/src/components/Uptime.vue
+++ b/src/components/Uptime.vue
@ -22,33 +22,33 @@ export default {
                return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
            }

-            return this.$t("notAvailableShort")
+            return this.$t("notAvailableShort");
        },

        color() {
            if (this.lastHeartBeat.status === 0) {
-                return "danger"
+                return "danger";
            }

            if (this.lastHeartBeat.status === 1) {
-                return "primary"
+                return "primary";
            }

            if (this.lastHeartBeat.status === 2) {
-                return "warning"
+                return "warning";
            }

-            return "secondary"
+            return "secondary";
        },

        lastHeartBeat() {
            if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
-                return this.$root.lastHeartbeatList[this.monitor.id]
+                return this.$root.lastHeartbeatList[this.monitor.id];
            }

            return {
                status: -1,
-            }
+            };
        },

        className() {
@ -59,7 +59,7 @@ export default {
            return "";
        },
    },
-}
+};
 </script>

 <style>
--- a/src/components/notifications/SMTP.vue
+++ b/src/components/notifications/SMTP.vue
@ -45,17 +45,17 @@

    <div class="mb-3">
        <label for="to-email" class="form-label">{{ $t("To Email") }}</label>
-        <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" required autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet">
+        <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient">
    </div>

    <div class="mb-3">
        <label for="to-cc" class="form-label">{{ $t("smtpCC") }}</label>
-        <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false">
+        <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
    </div>

    <div class="mb-3">
        <label for="to-bcc" class="form-label">{{ $t("smtpBCC") }}</label>
-        <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false">
+        <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
    </div>
 </template>

@ -66,10 +66,19 @@ export default {
    components: {
        HiddenInput,
    },
+    computed: {
+        hasRecipient() {
+            if (this.$parent.notification.smtpTo || this.$parent.notification.smtpCC || this.$parent.notification.smtpBCC) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    },
    mounted() {
        if (typeof this.$parent.notification.smtpSecure === "undefined") {
            this.$parent.notification.smtpSecure = false;
        }
-    },
-}
+    }
+};
 </script>
--- a/src/i18n.js
+++ b/src/i18n.js
@ -3,21 +3,22 @@ import bgBG from "./languages/bg-BG";
 import daDK from "./languages/da-DK";
 import deDE from "./languages/de-DE";
 import en from "./languages/en";
-import fa from "./languages/fa";
 import esEs from "./languages/es-ES";
-import ptBR from "./languages/pt-BR";
 import etEE from "./languages/et-EE";
+import fa from "./languages/fa";
 import frFR from "./languages/fr-FR";
+import hu from "./languages/hu";
 import itIT from "./languages/it-IT";
 import ja from "./languages/ja";
 import koKR from "./languages/ko-KR";
 import nlNL from "./languages/nl-NL";
 import pl from "./languages/pl";
+import ptBR from "./languages/pt-BR";
 import ruRU from "./languages/ru-RU";
 import sr from "./languages/sr";
 import srLatn from "./languages/sr-latn";
-import trTR from "./languages/tr-TR";
 import svSE from "./languages/sv-SE";
+import trTR from "./languages/tr-TR";
 import zhCN from "./languages/zh-CN";
 import zhHK from "./languages/zh-HK";

@ -31,6 +32,7 @@ const languageList = {
    "fa": fa,
    "pt-BR": ptBR,
    "fr-FR": frFR,
+    "hu": hu,
    "it-IT": itIT,
    "ja": ja,
    "da-DK": daDK,
@ -46,12 +48,13 @@ const languageList = {
 };

 const rtlLangs = ["fa"];
-    
+
 export const currentLocale = () => localStorage.locale || "en";

 export const localeDirection = () => {
-    return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr"
-}
+    return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr";
+};
+
 export const i18n = createI18n({
    locale: currentLocale(),
    fallbackLocale: "en",
--- a/src/icon.js
+++ b/src/icon.js
@ -30,6 +30,9 @@ import {
    faUpload,
    faCopy,
    faCheck,
+    faFile,
+    faAward,
+    faLink,
 } from "@fortawesome/free-solid-svg-icons";

 library.add(
@ -59,6 +62,9 @@ library.add(
    faUpload,
    faCopy,
    faCheck,
+    faFile,
+    faAward,
+    faLink,
 );

 export { FontAwesomeIcon };
--- a/src/languages/bg-BG.js
+++ b/src/languages/bg-BG.js
@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Добави монитор",
    "Edit Status Page": "Редактирай статус страница",
    "Go to Dashboard": "Към Таблото",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
+    "Status Page": "Status Page",
 };
--- a/src/languages/da-DK.js
+++ b/src/languages/da-DK.js
@ -170,7 +170,7 @@ export default {
    "Avg. Ping": "Gns. Ping",
    "Avg. Response": "Gns. Respons",
    "Entry Page": "Entry Side",
-    "statusPageNothing": "Intet her, tilføj venligst en Gruppe eller en Overvåger.",
+    statusPageNothing: "Intet her, tilføj venligst en Gruppe eller en Overvåger.",
    "No Services": "Ingen Tjenester",
    "All Systems Operational": "Alle Systemer i Drift",
    "Partially Degraded Service": "Delvist Forringet Service",
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Tilføj en Overvåger",
    "Edit Status Page": "Rediger Statusside",
    "Go to Dashboard": "Gå til Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Monitor hinzufügen",
    "Edit Status Page": "Bearbeite Statusseite",
    "Go to Dashboard": "Gehe zum Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/en.js
+++ b/src/languages/en.js
@ -178,6 +178,7 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
    // Start notification form
    defaultNotificationName: "My {notification} Alert ({number})",
    here: "here",
@ -231,45 +232,13 @@ export default {
    aboutKumaURL: "If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.",
    emojiCheatSheet: "Emoji cheat sheet: {0}",
    "rocket.chat": "Rocket.chat",
-    "pushover": "Pushover",
-    "User Key": "User Key",
-    "Device": "Device",
-    "Message Title": "Message Title",
-    "Notification Sound": "Notification Sound",
-    "More info on:": "More info on: {0}",
-    pushoverDesc1: "Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour.",
-    pushoverDesc2: "If you want to send notifications to different devices, fill out Device field.",
-    "pushy": "Pushy",
-    "octopush": "Octopush",
-    "SMS Type": "SMS Type",
-    octopushTypePremium: "Premium (Fast - recommended for alerting)",
-    octopushTypeLowCost: "Low Cost (Slow, sometimes blocked by operator)",
-    "Check octopush prices": "Check octopush prices {0}.",
-    octopushPhoneNumber: "Phone number (intl format, eg : +33612345678) ",
-    octopushSMSSender: "SMS Sender Name : 3-11 alphanumeric characters and space (a-zA-Z0-9)",
-    "lunasea": "LunaSea",
-    "LunaSea Device ID": "LunaSea Device ID",
-    "apprise": "Apprise (Support 50+ Notification services)",
-    "Apprise URL": "Apprise URL",
-    "Example:": "Example: {0}",
-    "Read more:": "Read more: {0}",
-    "Status:": "Status: {0}",
-    "Read more": "Read more",
-    appriseInstalled: "Apprise is installed.",
-    appriseNotInstalled: "Apprise is not installed. {0}",
-    "pushbullet": "Pushbullet",
-    "Access Token": "Access Token",
-    "line": "Line Messenger",
-    "Channel access token": "Channel access token",
-    "Line Developers Console": "Line Developers Console",
-    lineDevConsoleTo: "Line Developers Console - {0}",
-    "Basic Settings": "Basic Settings",
-    "User ID": "User ID",
-    "Messaging API": "Messaging API",
-    wayToGetLineChannelToken: "First access the {0}, create a provider and channel (Messaging API), then you can get the channel access token and user id from the above mentioned menu items.",
-    "mattermost": "Mattermost",
-    "Icon URL": "Icon URL",
-    aboutIconURL: "You can provide a link to a picture in \"Icon URL\" to override the default profile picture. Will not be used if Icon Emoji is set.",
-    aboutMattermostChannelName: "You can override the default channel that webhook posts to by entering the channel name into \"Channel Name\" field. This needs to be enabled in Mattermost webhook settings. Ex: #other-channel",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
    // End notification form
 };
--- a/src/languages/es-ES.js
+++ b/src/languages/es-ES.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/et-EE.js
+++ b/src/languages/et-EE.js
@ -1,21 +1,22 @@
 export default {
    languageName: "eesti",
-    checkEverySecond: "Kontrolli {0} sekundilise vahega.",
+    retryCheckEverySecond: "Kontrolli {0} sekundilise vahega.",
    retriesDescription: "Mitu korda tuleb kontrollida, mille järel märkida 'maas' ja saata välja teavitus.",
    ignoreTLSError: "Eira TLS/SSL viga HTTPS veebisaitidel.",
    upsideDownModeDescription: "Käitle teenuse saadavust rikkena, teenuse kättesaamatust töötavaks.",
    maxRedirectDescription: "Suurim arv ümbersuunamisi, millele järgida. 0 ei luba ühtegi ",
    acceptedStatusCodesDescription: "Vali välja HTTP koodid, mida arvestada kõlblikuks.",
    passwordNotMatchMsg: "Salasõnad ei kattu.",
-    notificationDescription: "Teavitusmeetodi kasutamiseks seo see seirega.",
+    notificationDescription: "Teavitusteenuse kasutamiseks seo see seirega.",
    keywordDescription: "Jälgi võtmesõna HTML või JSON vastustes. (tõstutundlik)",
-    pauseDashboardHome: "Seismas",
+    pauseDashboardHome: "Seisatud",
    deleteMonitorMsg: "Kas soovid eemaldada seire?",
-    deleteNotificationMsg: "Kas soovid eemaldada selle teavitusmeetodi kõikidelt seiretelt?",
+    deleteNotificationMsg: "Kas soovid eemaldada selle teavitusteenuse kõikidelt seiretelt?",
    resoverserverDescription: "Cloudflare on vaikimisi pöördserver.",
    rrtypeDescription: "Vali kirje tüüp, mida soovid jälgida.",
    pauseMonitorMsg: "Kas soovid peatada seire?",
    Settings: "Seaded",
+    "Status Page": "Ülevaade",
    Dashboard: "Töölaud",
    "New Update": "Uuem tarkvara versioon on saadaval.",
    Language: "Keel",
@ -26,20 +27,21 @@ export default {
    "Check Update On GitHub": "Otsi uuendusi GitHub'ist",
    List: "Nimekiri",
    Add: "Lisa",
-    "Add New Monitor": "Seire lisamine",
+    "Add New Monitor": "Lisa seire",
+    "Add a monitor": "Lisa seire",
    "Quick Stats": "Ülevaade",
    Up: "Töökorras",
    Down: "Rikkis",
    Pending: "Määramisel",
-    Unknown: "Teadmata",
-    Pause: "Seiskamine",
+    Unknown: "Kahtlast",
+    Pause: "Seiska",
    Name: "Nimi",
    Status: "Olek",
    DateTime: "Kuupäev",
    Message: "Tulemus",
    "No important events": "Märkimisväärsed juhtumid puuduvad.",
    Resume: "Taasta",
-    Edit: "Muutmine",
+    Edit: "Muuda",
    Delete: "Eemalda",
    Current: "Hetkeseisund",
    Uptime: "Eluiga",
@ -49,7 +51,7 @@ export default {
    "-day": "-päev",
    hour: "tund",
    "-hour": "-tund",
-    Response: "Vastus",
+    Response: "Reaktsiooniaeg",
    Ping: "Ping",
    "Monitor Type": "Seire tüüp",
    Keyword: "Võtmesõna",
@ -108,14 +110,14 @@ export default {
    "Repeat Password": "korda salasõna",
    respTime: "Reageerimisaeg (ms)",
    notAvailableShort: "N/A",
-    enableDefaultNotificationDescription: "Kõik järgnevalt lisatud seired kasutavad seda teavitusmeetodit. Seiretelt võib teavitusmeetodi ühekaupa eemaldada.",
+    enableDefaultNotificationDescription: "Kõik järgnevalt lisatud seired kasutavad seda teavitusteenuset. Seiretelt võib teavitusteenuse ühekaupa eemaldada.",
    clearEventsMsg: "Kas soovid seire kõik sündmused kustutada?",
    clearHeartbeatsMsg: "Kas soovid seire kõik tuksed kustutada?",
-    confirmClearStatisticsMsg: "Kas soovid KÕIK statistika kustutada?",
+    confirmClearStatisticsMsg: "Kas soovid TERVE ajaloo kustutada?",
    Export: "Eksport",
    Import: "Import",
    "Default enabled": "Kasuta vaikimisi",
-    "Also apply to existing monitors": "Aktiveeri teavitusmeetod olemasolevatel seiretel",
+    "Apply on all existing monitors": "Kõik praegused seired hakkavad kasutama seda teavitusteenust",
    Create: "Loo konto",
    "Clear Data": "Eemalda andmed",
    Events: "Sündmused",
@ -123,60 +125,75 @@ export default {
    "Auto Get": "Hangi automaatselt",
    backupDescription: "Varunda kõik seired ja teavitused JSON faili.",
    backupDescription2: "PS: Varukoopia EI sisalda seirete ajalugu ja sündmustikku.",
-    backupDescription3: "Varukoopiad sisaldavad teavitusmeetodite pääsuvõtmeid.",
+    backupDescription3: "Varukoopiad sisaldavad teavitusteenusete pääsuvõtmeid.",
    alertNoFile: "Palun lisa fail, mida importida.",
    alertWrongFileType: "Palun lisa JSON-formaadis fail.",
-    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",
-    Active: "Active",
-    Inactive: "Inactive",
-    Token: "Token",
-    "Show URI": "Show URI",
-    "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)",
-    Gray: "Gray",
-    Red: "Red",
-    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
-    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.",
-    "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",
+    twoFAVerifyLabel: "2FA kinnitamiseks sisesta pääsukood",
+    tokenValidSettingsMsg: "Kood õige. Akna võib sulgeda.",
+    confirmEnableTwoFAMsg: "Kas soovid 2FA sisse lülitada?",
+    confirmDisableTwoFAMsg: "Kas soovid 2FA välja lülitada?",
+    "Verify Token": "Kontrolli",
+    "Setup 2FA": "Kaksikautentimise seadistamine",
+    "Enable 2FA": "Seadista 2FA",
+    "Disable 2FA": "Lülita 2FA välja",
+    "2FA Settings": "2FA seaded",
+    "Two Factor Authentication": "Kaksikautentimine",
+    Active: "kasutusel",
+    Inactive: "seadistamata",
+    Token: "kaksikautentimise kood",
+    "Show URI": "Näita URId",
+    "Clear all statistics": "Tühjenda ajalugu",
+    importHandleDescription: "'kombineeri' täiendab varukoopiast ja kirjutab üle samanimelised seireid ja teavitusteenused; 'lisa praegustele' jätab olemasolevad puutumata; 'asenda' kustutab ja asendab kõik seired ja teavitusteenused.",
+    confirmImportMsg: "Käkerdistest hoidumiseks lae enne taastamist alla uus varukoopia. Kas soovid taastada üles laetud?",
+    "Heartbeat Retry Interval": "Korduskatsete intervall",
+    "Import Backup": "Varukoopia importimine",
+    "Export Backup": "Varukoopia eksportimine",
+    "Skip existing": "lisa praegustele",
+    Overwrite: "asenda",
+    Options: "Mestimisviis",
+    "Keep both": "kombineeri",
+    Tags: "Sildid",
+    "Add New below or Select...": "Leia või lisa all uus…",
+    "Tag with this name already exist.": "Selle nimega silt on juba olemas.",
+    "Tag with this value already exist.": "Selle väärtusega silt on juba olemas.",
+    color: "värvus",
+    "value (optional)": "väärtus (fakultatiivne)",
+    Gray: "hall",
+    Red: "punane",
+    Orange: "oranž",
+    Green: "roheline",
+    Blue: "sinine",
+    Indigo: "indigo",
+    Purple: "lilla",
+    Pink: "roosa",
+    "Search...": "Otsi…",
+    "Avg. Ping": "Keskmine ping",
+    "Avg. Response": "Keskmine reaktsiooniaeg",
+    "Entry Page": "Avaleht",
+    statusPageNothing: "Kippu ega kõppu; siia saab lisada seireid või -gruppe.",
+    "No Services": "Teenused puuduvad.",
+    "All Systems Operational": "Kõik töökorras",
+    "Partially Degraded Service": "Teenuse töö osaliselt häiritud",
+    "Degraded Service": "Teenuse töö häiritud",
+    "Add Group": "Lisa grupp",
+    "Edit Status Page": "Muuda lehte",
+    "Go to Dashboard": "Töölauale",
+    checkEverySecond: "Check every {0} seconds.",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/fa.js
+++ b/src/languages/fa.js
@ -187,4 +187,21 @@ export default {
    Last: "آخرین",
    Info: "اطلاعات",
    "Powered By": "نیرو گرفته از",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/fr-FR.js
+++ b/src/languages/fr-FR.js
@ -170,7 +170,7 @@ export default {
    "Avg. Ping": "Ping moyen",
    "Avg. Response": "Réponse moyenne",
    "Entry Page": "Page d'accueil",
-    "statusPageNothing": "Rien ici, veuillez ajouter un groupe ou une sonde.",
+    statusPageNothing: "Rien ici, veuillez ajouter un groupe ou une sonde.",
    "No Services": "Aucun service",
    "All Systems Operational": "Tous les systèmes sont opérationnels",
    "Partially Degraded Service": "Service partiellement dégradé",
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Ajouter une sonde",
    "Edit Status Page": "Modifier la page de statut",
    "Go to Dashboard": "Accéder au tableau de bord",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/hu.js
+++ b/src/languages/hu.js
@ -0,0 +1,199 @@
+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",
+    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)",
+    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",
+    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?",
+    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.",
+    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?",
+    confirmDisableTwoFAMsg: "Biztosan letiltja a 2FA-t?",
+    Settings: "Beállítások",
+    Dashboard: "Irányítópult",
+    "New Update": "Új frissítés",
+    Language: "Nyelv",
+    Appearance: "Megjelenés",
+    Theme: "Téma",
+    General: "Általános",
+    Version: "Verzió",
+    "Check Update On GitHub": "Frissítések keresése a GitHub-on",
+    List: "Lista",
+    Add: "Hozzáadás",
+    "Add New Monitor": "Új figyelő hozzáadása",
+    "Quick Stats": "Gyors statisztikák",
+    Up: "Működik",
+    Down: "Leállt",
+    Pending: "Függőben",
+    Unknown: "Ismeretlen",
+    Pause: "Szünet",
+    Name: "Név",
+    Status: "Állapot",
+    DateTime: "Időpont",
+    Message: "Üzenet",
+    "No important events": "Nincs fontos esemény",
+    Resume: "Folytatás",
+    Edit: "Szerkesztés",
+    Delete: "Törlés",
+    Current: "Aktuális",
+    Uptime: "Uptime",
+    "Cert Exp.": "Tanúsítvány lejár",
+    days: "napok",
+    day: "nap",
+    "-day": "-nap",
+    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",
+    Port: "Port",
+    "Heartbeat Interval": "Heartbeat időköz",
+    Retries: "Újrapróbálkozás",
+    "Heartbeat Retry Interval": "Heartbeat újrapróbálkozások időköze",
+    Advanced: "Haladó",
+    "Upside Down Mode": "Fordított mód",
+    "Max. Redirects": "Max. átirányítás",
+    "Accepted Status Codes": "Elfogadott állapot kódok",
+    Save: "Mentés",
+    Notifications: "Értesítések",
+    "Not available, please setup.": "Nem elérhető, állítsa be.",
+    "Setup Notification": "Értesítés beállítása",
+    Light: "Világos",
+    Dark: "Sötét",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Téma - Heartbeat Bar",
+    Normal: "Normal",
+    Bottom: "Nyomógomb",
+    None: "Nincs",
+    Timezone: "Időzóna",
+    "Search Engine Visibility": "Látható a keresőmotoroknak",
+    "Allow indexing": "Indexelés engedélyezése",
+    "Discourage search engines from indexing site": "Keresőmotorok elriasztása az oldal indexelésétől",
+    "Change Password": "Jelszó változtatása",
+    "Current Password": "Jelenlegi jelszó",
+    "New Password": "Új jelszó",
+    "Repeat New Password": "Ismételje meg az új jelszót",
+    "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",
+    Leave: "Elhagy",
+    "I understand, please disable": "Megértettem, kérem tilsa le",
+    Confirm: "Megerősítés",
+    Yes: "Igen",
+    No: "Nem",
+    Username: "Felhasználónév",
+    Password: "Jelszó",
+    "Remember me": "Emlékezzen rám",
+    Login: "Bejelentkezés",
+    "No Monitors, please": "Nincs figyelő, kérem",
+    "add one": "adjon hozzá egyet",
+    "Notification Type": "Értesítés típusa",
+    Email: "Email",
+    Test: "Teszt",
+    "Certificate Info": "Tanúsítvány információk",
+    "Resolver Server": "Resolver 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",
+    "Repeat Password": "Jelszó ismétlése",
+    "Import Backup": "Mentés importálása",
+    "Export Backup": "Mentés exportálása",
+    Export: "Exportálás",
+    Import: "Importálás",
+    respTime: "Válaszidő (ms)",
+    notAvailableShort: "N/A",
+    "Default enabled": "Alapértelmezetten engedélyezett",
+    "Apply on all existing monitors": "Alkalmazza az összes figyelőre",
+    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!",
+    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",
+    "Skip existing": "Meglévő kihagyása",
+    Overwrite: "Felülírás",
+    Options: "Opciók",
+    "Keep both": "Mindegyiket tartsa meg",
+    "Verify Token": "Token ellenőrzése",
+    "Setup 2FA": "2FA beállítása",
+    "Enable 2FA": "2FA engedélyezése",
+    "Disable 2FA": "2FA toltása",
+    "2FA Settings": "2FA beállítások",
+    "Two Factor Authentication": "Two Factor Authentication",
+    Active: "Aktív",
+    Inactive: "Inaktív",
+    Token: "Token",
+    "Show URI": "URI megmutatása",
+    Tags: "Cimké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.",
+    color: "szín",
+    "value (optional)": "érték (opcionális)",
+    Gray: "Szürke",
+    Red: "Piros",
+    Orange: "Narancs",
+    Green: "Zöld",
+    Blue: "Kék",
+    Indigo: "Indigó",
+    Purple: "Lila",
+    Pink: "Rózsaszín",
+    "Search...": "Keres...",
+    "Avg. Ping": "Átl. ping",
+    "Avg. Response": "Átl. válasz",
+    "Entry Page": "Nyitólap",
+    statusPageNothing: "Semmi nincs itt, kérem, adjon hozzá egy 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",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
+    "Status Page": "Status Page",
+};
--- a/src/languages/it-IT.js
+++ b/src/languages/it-IT.js
@ -169,7 +169,7 @@ export default {
    "Avg. Ping": "Ping medio",
    "Avg. Response": "Risposta media",
    "Entry Page": "Entry Page",
-    "statusPageNothing": "Non c'è nulla qui, aggiungere un gruppo oppure un monitoraggio.",
+    statusPageNothing: "Non c'è nulla qui, aggiungere un gruppo oppure un monitoraggio.",
    "No Services": "Nessun Servizio",
    "All Systems Operational": "Tutti i sistemi sono operativi",
    "Partially Degraded Service": "Servizio parzialmente degradato",
@ -178,4 +178,22 @@ export default {
    "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",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/ja.js
+++ b/src/languages/ja.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/ko-KR.js
+++ b/src/languages/ko-KR.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/nl-NL.js
+++ b/src/languages/nl-NL.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/pl.js
+++ b/src/languages/pl.js
@ -169,14 +169,32 @@ export default {
    "Search...": "Szukaj...",
    "Avg. Ping": "Średni ping",
    "Avg. Response": "Średnia odpowiedź",
-    "Entry Page": "Wejdź na stronę",
-    "statusPageNothing": "Nic tu nie ma, dodaj monitor lub grupę.",
+    "Entry Page": "Strona główna",
+    statusPageNothing: "Nic tu nie ma, dodaj grupę lub monitor.",
    "No Services": "Brak usług",
    "All Systems Operational": "Wszystkie systemy działają",
    "Partially Degraded Service": "Częściowy błąd usługi",
    "Degraded Service": "Błąd usługi",
    "Add Group": "Dodaj grupę",
-    "Add a monitor": "Dodaj monitoe",
+    "Add a monitor": "Dodaj monitor",
    "Edit Status Page": "Edytuj stronę statusu",
    "Go to Dashboard": "Idź do panelu",
+    "Status Page": "Strona statusu",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (obsługuje 50+ usług powiadamiania)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/pt-BR.js
+++ b/src/languages/pt-BR.js
@ -179,4 +179,21 @@ export default {
    "Add a monitor": "Adicionar um monitor",
    "Edit Status Page": "Editar Página de Status",
    "Go to Dashboard": "Ir para a dashboard",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/ru-RU.js
+++ b/src/languages/ru-RU.js
@ -43,7 +43,7 @@ export default {
    Delete: "Удалить",
    Current: "Текущий",
    Uptime: "Аптайм",
-    "Cert Exp.": "Сертификат просрочен",
+    "Cert Exp.": "Сертификат истекает",
    days: "дней",
    day: "день",
    "-day": " дней",
@ -180,8 +180,25 @@ export default {
    "Edit Status Page": "Редактировать",
    "Go to Dashboard": "Панель мониторов",
    "Status Page": "Статус сервисов",
-    "Discard": "Отмена",
+    Discard: "Отмена",
    "Create Incident": "Создать инцидент",
    "Switch to Dark Theme": "Тёмная тема",
    "Switch to Light Theme": "Светлая тема",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/sr-latn.js
+++ b/src/languages/sr-latn.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/sr.js
+++ b/src/languages/sr.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/sv-SE.js
+++ b/src/languages/sv-SE.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/tr-TR.js
+++ b/src/languages/tr-TR.js
@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/zh-CN.js
+++ b/src/languages/zh-CN.js
@ -170,7 +170,7 @@ export default {
    "Avg. Ping": "平均Ping",
    "Avg. Response": "平均响应",
    "Entry Page": "入口页面",
-    "statusPageNothing": "这里什么也没有，请添加一个分组或一个监控项。",
+    statusPageNothing: "这里什么也没有，请添加一个分组或一个监控项。",
    "No Services": "无服务",
    "All Systems Operational": "所有服务运行正常",
    "Partially Degraded Service": "部分服务出现故障",
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "添加监控项",
    "Edit Status Page": "编辑状态页",
    "Go to Dashboard": "前往仪表盘",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/zh-HK.js
+++ b/src/languages/zh-HK.js
@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/main.js
+++ b/src/main.js
@ -1,7 +1,7 @@
 import "bootstrap";
 import { createApp, h } from "vue";
+import contenteditable from "vue-contenteditable";
 import Toast from "vue-toastification";
-import contenteditable from "vue-contenteditable"
 import "vue-toastification/dist/index.css";
 import App from "./App.vue";
 import "./assets/app.scss";
@ -9,10 +9,9 @@ import { i18n } from "./i18n";
 import { FontAwesomeIcon } from "./icon.js";
 import datetime from "./mixins/datetime";
 import mobile from "./mixins/mobile";
+import publicMixin from "./mixins/public";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
-import publicMixin from "./mixins/public";
-
 import { router } from "./router";
 import { appName } from "./util.ts";

@ -27,10 +26,10 @@ const app = createApp({
    data() {
        return {
            appName: appName
-        }
+        };
    },
    render: () => h(App),
-})
+});

 app.use(router);
 app.use(i18n);
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@ -30,7 +30,7 @@ export default {
            importantHeartbeatList: { },
            avgPingList: { },
            uptimeList: { },
-            certInfoList: {},
+            tlsInfoList: {},
            notificationList: [],
            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
        };
@ -154,7 +154,7 @@ export default {
            });

            socket.on("certInfo", (monitorID, data) => {
-                this.certInfoList[monitorID] = JSON.parse(data);
+                this.tlsInfoList[monitorID] = JSON.parse(data);
            });

            socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
@ -179,7 +179,7 @@ export default {
            });

            socket.on("connect", () => {
-                console.log("connect");
+                console.log("Connected to the socket server");
                this.socket.connectCount++;
                this.socket.connected = true;

--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@ -73,11 +73,11 @@
                        <span class="num"><Uptime :monitor="monitor" type="720" /></span>
                    </div>

-                    <div v-if="certInfo" class="col">
+                    <div v-if="tlsInfo" class="col">
                        <h4>{{ $t("Cert Exp.") }}</h4>
-                        <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
+                        <p>(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
                        <span class="num">
-                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ certInfo.daysRemaining }} {{ $t("days") }}</a>
+                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $t("days") }}</a>
                        </span>
                    </div>
                </div>
@ -87,41 +87,7 @@
                <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
                    <div class="row">
                        <div class="col">
-                            <h4>{{ $t("Certificate Info") }}</h4>
-                            <table class="text-start">
-                                <tbody>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Valid:
-                                        </td>
-                                        <td>{{ certInfo.valid }}</td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Valid To:
-                                        </td>
-                                        <td><Datetime :value="certInfo.validTo" /></td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Days Remaining:
-                                        </td>
-                                        <td>{{ certInfo.daysRemaining }}</td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Issuer:
-                                        </td>
-                                        <td>{{ certInfo.issuer }}</td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Fingerprint:
-                                        </td>
-                                        <td>{{ certInfo.fingerprint }}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                            <certificate-info :certInfo="tlsInfo.certInfo" :valid="tlsInfo.valid" />
                        </div>
                    </div>
                </div>
@ -207,8 +173,8 @@

 <script>
 import { defineAsyncComponent } from "vue";
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();
 import Confirm from "../components/Confirm.vue";
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Status from "../components/Status.vue";
@ -218,6 +184,7 @@ import Uptime from "../components/Uptime.vue";
 import Pagination from "v-pagination-3";
 const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
 import Tag from "../components/Tag.vue";
+import CertificateInfo from "../components/CertificateInfo.vue";

 export default {
    components: {
@ -230,6 +197,7 @@ export default {
        Pagination,
        PingChart,
        Tag,
+        CertificateInfo,
    },
    data() {
        return {
@ -239,32 +207,32 @@ export default {
            toggleCertInfoBox: false,
            showPingChartBox: true,
            paginationConfig: {
-                texts:{
-                    count:`${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
-                    first:this.$t("First"),
-                    last:this.$t("Last"),
-                    nextPage:'>',
-                    nextChunk:'>>',
-                    prevPage:'<',
-                    prevChunk:'<<'
+                texts: {
+                    count: `${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
+                    first: this.$t("First"),
+                    last: this.$t("Last"),
+                    nextPage: ">",
+                    nextChunk: ">>",
+                    prevPage: "<",
+                    prevChunk: "<<"
                }
            }
-        }
+        };
    },
    computed: {
        monitor() {
-            let id = this.$route.params.id
+            let id = this.$route.params.id;
            return this.$root.monitorList[id];
        },

        lastHeartBeat() {
            if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
-                return this.$root.lastHeartbeatList[this.monitor.id]
+                return this.$root.lastHeartbeatList[this.monitor.id];
            }

            return {
                status: -1,
-            }
+            };
        },

        ping() {
@ -272,7 +240,7 @@ export default {
                return this.lastHeartBeat.ping;
            }

-            return this.$t("notAvailableShort")
+            return this.$t("notAvailableShort");
        },

        avgPing() {
@ -280,14 +248,14 @@ export default {
                return this.$root.avgPingList[this.monitor.id];
            }

-            return this.$t("notAvailableShort")
+            return this.$t("notAvailableShort");
        },

        importantHeartBeatList() {
            if (this.$root.importantHeartbeatList[this.monitor.id]) {
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
-                return this.$root.importantHeartbeatList[this.monitor.id]
+                return this.$root.importantHeartbeatList[this.monitor.id];
            }

            return [];
@ -295,22 +263,22 @@ export default {

        status() {
            if (this.$root.statusList[this.monitor.id]) {
-                return this.$root.statusList[this.monitor.id]
+                return this.$root.statusList[this.monitor.id];
            }

-            return { }
+            return { };
        },

-        certInfo() {
-            if (this.$root.certInfoList[this.monitor.id]) {
-                return this.$root.certInfoList[this.monitor.id]
+        tlsInfo() {
+            if (this.$root.tlsInfoList[this.monitor.id]) {
+                return this.$root.tlsInfoList[this.monitor.id];
            }

-            return null
+            return null;
        },

        showCertInfoBox() {
-            return this.certInfo != null && this.toggleCertInfoBox;
+            return this.tlsInfo != null && this.toggleCertInfoBox;
        },

        displayedRecords() {
@ -324,8 +292,8 @@ export default {
    },
    methods: {
        testNotification() {
-            this.$root.getSocket().emit("testNotification", this.monitor.id)
-            toast.success("Test notification is requested.")
+            this.$root.getSocket().emit("testNotification", this.monitor.id);
+            toast.success("Test notification is requested.");
        },

        pauseDialog() {
@ -334,14 +302,14 @@ export default {

        resumeMonitor() {
            this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
-                this.$root.toastRes(res)
-            })
+                this.$root.toastRes(res);
+            });
        },

        pauseMonitor() {
            this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
-                this.$root.toastRes(res)
-            })
+                this.$root.toastRes(res);
+            });
        },

        deleteDialog() {
@ -360,11 +328,11 @@ export default {
            this.$root.deleteMonitor(this.monitor.id, (res) => {
                if (res.ok) {
                    toast.success(res.msg);
-                    this.$router.push("/dashboard")
+                    this.$router.push("/dashboard");
                } else {
                    toast.error(res.msg);
                }
-            })
+            });
        },

        clearEvents() {
@ -372,7 +340,7 @@ export default {
                if (! res.ok) {
                    toast.error(res.msg);
                }
-            })
+            });
        },

        clearHeartbeats() {
@ -380,13 +348,13 @@ export default {
                if (! res.ok) {
                    toast.error(res.msg);
                }
-            })
+            });
        },

        pingTitle(average = false) {
-            let translationPrefix = ""
+            let translationPrefix = "";
            if (average) {
-                translationPrefix = "Avg. "
+                translationPrefix = "Avg. ";
            }

            if (this.monitor.type === "http") {
@ -396,7 +364,7 @@ export default {
            return this.$t(translationPrefix + "Ping");
        },
    },
-}
+};
 </script>

 <style lang="scss" scoped>
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@ -328,6 +328,12 @@
                    <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>
+
                <!-- English (en) -->
                <template v-else>
                    <p>Are you sure want to <strong>disable auth</strong>?</p>
--- a/test/prepare-jest.js
+++ b/test/prepare-jest.js
@ -0,0 +1,9 @@
+const fs = require("fs");
+
+const path = "./data/test-chrome-profile";
+
+if (fs.existsSync(path)) {
+    fs.rmdirSync(path, {
+        recursive: true,
+    });
+}
--- a/test/prepare-test-server.js
+++ b/test/prepare-test-server.js
@ -0,0 +1,9 @@
+const fs = require("fs");
+
+const path = "./data/test";
+
+if (fs.existsSync(path)) {
+    fs.rmdirSync(path, {
+        recursive: true,
+    });
+}
--- a/test/test.spec.js
+++ b/test/test.spec.js
@ -0,0 +1,236 @@
+// eslint-disable-next-line no-unused-vars
+const { Page, Browser } = require("puppeteer");
+const { sleep } = require("../src/util");
+const axios = require("axios");
+
+/**
+ * Set back the correct data type for page object
+ * @type {Page}
+ */
+page;
+
+/**
+ * @type {Browser}
+ */
+browser;
+
+beforeAll(async () => {
+    await page.setViewport({
+        width: 1280,
+        height: 720,
+        deviceScaleFactor: 1,
+    });
+});
+
+afterAll(() => {
+
+});
+
+const baseURL = "http://127.0.0.1:3002";
+
+describe("Init", () => {
+    const title = "Uptime Kuma";
+
+    beforeAll(async () => {
+        await page.goto(baseURL);
+    });
+
+    it(`should be titled "${title}"`, async () => {
+        await expect(page.title()).resolves.toMatch(title);
+    });
+
+    // Setup Page
+    it("Setup", async () => {
+        // Create an Admin
+        await page.waitForSelector("#floatingInput");
+        await page.waitForSelector("#repeat");
+        await page.click("#floatingInput");
+        await page.type("#floatingInput", "admin");
+        await page.type("#floatingPassword", "admin123");
+        await page.type("#repeat", "admin123");
+        await page.click(".btn-primary[type=submit]");
+        await sleep(3000);
+
+        // Go to /setup again
+        await page.goto(baseURL + "/setup");
+        await sleep(3000);
+        let pathname = await page.evaluate(() => location.pathname);
+        expect(pathname).toEqual("/dashboard");
+
+        // Go to /
+        await page.goto(baseURL);
+        await sleep(3000);
+        pathname = await page.evaluate(() => location.pathname);
+        expect(pathname).toEqual("/dashboard");
+    });
+
+    // Settings Page
+    describe("Settings", () => {
+        beforeAll(async () => {
+            await page.goto(baseURL + "/settings");
+        });
+
+        it("Change Language", async () => {
+            await page.waitForSelector("#language");
+
+            await page.select("#language", "zh-HK");
+            let languageTitle = await page.evaluate(() => document.querySelector("[for=language]").innerText);
+            expect(languageTitle).toMatch("語言");
+
+            await page.select("#language", "en");
+            languageTitle = await page.evaluate(() => document.querySelector("[for=language]").innerText);
+            expect(languageTitle).toMatch("Language");
+        });
+
+        it("Change Theme", async () => {
+            await sleep(1000);
+
+            // Dark
+            await click(page, ".btn[for=btncheck2]");
+            await page.waitForSelector("div.dark");
+
+            await sleep(1000);
+
+            // Light
+            await click(page, ".btn[for=btncheck1]");
+            await page.waitForSelector("div.light");
+        });
+
+        // TODO: Heartbeat Bar Style
+
+        // TODO: Timezone
+
+        it("Search Engine Visibility", async () => {
+            // Default
+            let res = await axios.get(baseURL + "/robots.txt");
+            expect(res.data).toMatch("Disallow: /");
+
+            // Yes
+            await click(page, "#searchEngineIndexYes");
+            await click(page, "form > div > .btn[type=submit]");
+            await sleep(2000);
+            res = await axios.get(baseURL + "/robots.txt");
+            expect(res.data).not.toMatch("Disallow: /");
+
+            // No
+            await click(page, "#searchEngineIndexNo");
+            await click(page, "form > div > .btn[type=submit]");
+            await sleep(2000);
+            res = await axios.get(baseURL + "/robots.txt");
+            expect(res.data).toMatch("Disallow: /");
+        });
+
+        it("Entry Page", async () => {
+            const newPage = await browser.newPage();
+
+            // Default
+            await newPage.goto(baseURL);
+            await sleep(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(2000);
+            await newPage.goto(baseURL);
+            await sleep(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(2000);
+            await newPage.goto(baseURL);
+            await sleep(3000);
+            pathname = await newPage.evaluate(() => location.pathname);
+            expect(pathname).toEqual("/dashboard");
+
+            await newPage.close();
+        });
+
+        it("Change Password (wrong current password)", async () => {
+            await page.type("#current-password", "wrong_passw$$d");
+            await page.type("#new-password", "new_password123");
+            await page.type("#repeat-new-password", "new_password123");
+            await click(page, "form > div > .btn[type=submit]", 1);
+            await sleep(3000);
+            await click(page, ".btn-danger.btn.me-1");
+            await sleep(2000);
+            await login("admin", "new_password123");
+            await sleep(2000);
+            let elementCount = await page.evaluate(() => document.querySelectorAll("#floatingPassword").length);
+            expect(elementCount).toEqual(1);
+
+            await login("admin", "admin123");
+            await sleep(3000);
+        });
+
+        it("Change Password (wrong repeat)", async () => {
+            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(3000);
+            await click(page, ".btn-danger.btn.me-1");
+            await sleep(2000);
+            await login("admin", "new_password123");
+            await sleep(2000);
+            let elementCount = await page.evaluate(() => document.querySelectorAll("#floatingPassword").length);
+            expect(elementCount).toEqual(1);
+
+            await login("admin", "admin123");
+            await sleep(3000);
+        });
+
+        // TODO: 2FA
+
+        // TODO: Export Backup
+
+        // TODO: Import Backup
+
+        // TODO: Disable Auth
+
+        // TODO: Clear Stats
+    });
+
+    /*
+     * TODO
+     * Create Monitor - All type
+     * Edit Monitor
+     * Delete Monitor
+     *
+     * Create Notification (token problem, maybe hard to test)
+     *
+     */
+
+    describe("Status Page", () => {
+        const title = "Uptime Kuma";
+        beforeAll(async () => {
+            await page.goto(baseURL + "/status");
+        });
+        it(`should be titled "${title}"`, async () => {
+            await expect(page.title()).resolves.toMatch(title);
+        });
+    });
+});
+
+async function login(username, password) {
+    await input(page, "#floatingInput", username);
+    await input(page, "#floatingPassword", password);
+    await page.click(".btn-primary[type=submit]");
+}
+
+async function click(page, selector, elementIndex = 0) {
+    return await page.evaluate((s, i) => {
+        return document.querySelectorAll(s)[i].click();
+    }, selector, elementIndex);
+}
+
+async function input(page, selector, text) {
+    const element = await page.$(selector);
+    await element.click({ clickCount: 3 });
+    await page.keyboard.press("Backspace");
+    await page.type(selector, text);
+}