update to 1.7.0

# Conflicts:
#	server/database.js
#	server/server.js

.dockerignore

@@ -2,8 +2,12 @@
 /dist
 /node_modules
 /data
+/out
+/test
+/kubernetes
 /.do
 **/.dockerignore
+/private
 **/.git
 **/.gitignore
 **/docker-compose*
@@ -20,6 +24,11 @@ yarn.lock
 app.json
 CODE_OF_CONDUCT.md
 CONTRIBUTING.md
+CNAME
+install.sh
+SECURITY.md
+tsconfig.json
+
 
 ### .gitignore content (commented rules are duplicated)
 

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+    root: true,
     env: {
         browser: true,
         commonjs: true,
@@ -16,6 +17,11 @@ module.exports = {
         requireConfigFile: false,
     },
     rules: {
+        "linebreak-style": ["error", "unix"],
+        "camelcase": ["warn", {
+            "properties": "never",
+            "ignoreImports": true
+        }],
         // override/add rules settings here, such as:
         // 'vue/no-unused-vars': 'error'
         "no-unused-vars": "warn",
@@ -28,11 +34,12 @@ module.exports = {
             },
         ],
         quotes: ["warn", "double"],
-        //semi: ['off', 'never'],
+        semi: "warn",
         "vue/html-indent": ["warn", 4], // default: 2
         "vue/max-attributes-per-line": "off",
         "vue/singleline-html-element-content-newline": "off",
         "vue/html-self-closing": "off",
+        "vue/attribute-hyphenation": "off",     // This change noNL to "no-n-l" unexpectedly
         "no-multi-spaces": ["error", {
             ignoreEOLComments: true,
         }],
@@ -71,5 +78,19 @@ module.exports = {
         "eol-last": ["error", "always"],
         //'prefer-template': 'error',
         "comma-dangle": ["warn", "only-multiline"],
+        "no-empty": ["error", {
+            "allowEmptyCatch": true
+        }],
+        "no-control-regex": "off",
+        "one-var": ["error", "never"],
+        "max-statements-per-line": ["error", { "max": 1 }]
     },
-}
+    "overrides": [
+        {
+            "files": [ "src/languages/*.js", "src/icon.js" ],
+            "rules": {
+                "comma-dangle": ["error", "always-multiline"],
+            }
+        }
+    ]
+};

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+#github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+#patreon: # Replace with a single Patreon username
+open_collective: uptime-kuma # Replace with a single Open Collective username
+#ko_fi: # Replace with a single Ko-fi username
+#tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+#community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+#liberapay: # Replace with a single Liberapay username
+#issuehunt: # Replace with a single IssueHunt username
+#otechie: # Replace with a single Otechie username
+#custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/ask-for-help.md

@@ -12,6 +12,7 @@ Please search in Issues without filters: https://github.com/louislam/uptime-kuma
 **Info**
 Uptime Kuma Version:
 Using Docker?: Yes/No
+Docker Version:
+Node.js Version (Without Docker only):
 OS:
 Browser:
-

.github/ISSUE_TEMPLATE/bug_report.md

@@ -15,6 +15,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -23,12 +24,13 @@ Steps to reproduce the behavior:
 **Expected behavior**
 A clear and concise description of what you expected to happen.
 
-
 **Info**
-- Uptime Kuma Version:
-- Using Docker?: Yes/No
-- OS: 
-- Browser:
+Uptime Kuma Version:
+Using Docker?: Yes/No
+Docker Version:
+Node.js Version (Without Docker only):
+OS:
+Browser:
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
@@ -36,3 +38,5 @@ If applicable, add screenshots to help explain your problem.
 **Error Log**
 It is easier for us to find out the problem.
 
+Docker: `docker logs <container id>`
+PM2: `~/.pm2/logs/` (e.g. `/home/ubuntu/.pm2/logs`)

.gitignore

@@ -7,4 +7,7 @@ dist-ssr
 
 /data
 !/data/.gitkeep
-.vscode
+.vscode
+
+/private
+/out

.stylelintrc

@@ -1,3 +1,9 @@
 {
-  "extends": "stylelint-config-recommended"
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4,
+        "no-descending-specificity": null,
+        "selector-list-comma-newline-after": null,
+        "declaration-empty-line-before": null
+    }
 }

CNAME

@@ -0,0 +1 @@
+git.kuma.pet

CODE_OF_CONDUCT.md

@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

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

README.md

@@ -10,23 +10,26 @@ It is a self-hosted monitoring tool like "Uptime Robot".
 
 <img src="https://louislam.net/uptimekuma/1.jpg" width="512" alt="" />
 
+## 🥔 Live Demo
+
+Try it!
+
+https://demo.uptime.kuma.pet
+
+It is a 5 minutes live demo, all data will be deleted after that. The server is located at Tokyo, if you live far away from here, it may affact your experience. I suggest that you should install to try it.
+
+VPS is sponsored by Uptime Kuma sponsors on [Open Collective](https://opencollective.com/uptime-kuma)! Thank you so much!
+
 ## ⭐ Features
 
-* Monitoring uptime for HTTP(s) / TCP / Ping.
+* Monitoring uptime for HTTP(s) / TCP / Ping / DNS Record.
 * Fancy, Reactive, Fast UI/UX.
-* Notifications via Webhook, Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP) and more by Apprise.
+* Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and [70+ notification services, click here for the full list](https://github.com/louislam/uptime-kuma/issues/284).
 * 20 seconds interval.
+* [Multi Languages](https://github.com/louislam/uptime-kuma/tree/master/src/languages)
 
 ## 🔧 How to Install
 
-### 🚀 Installer via cli
-
-Interactive cli installer, supports Docker or without Docker. 
-
-```bash
-curl -o kuma_install.sh https://raw.githubusercontent.com/louislam/uptime-kuma/master/install.sh && sudo bash kuma_install.sh
-```
-
 ### 🐳 Docker
 
 ```bash
@@ -36,14 +39,31 @@ docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name upti
 
 Browse to http://localhost:3001 after started.
 
+### 💪🏻 Without Docker
+
+Required Tools: Node.js >= 14, git and pm2.
+
+```bash
+git clone https://github.com/louislam/uptime-kuma.git
+cd uptime-kuma
+npm run setup
+
+# Option 1. Try it
+node server/server.js
+
+# (Recommended) Option 2. Run in background using PM2
+# Install PM2 if you don't have: npm install pm2 -g
+pm2 start server/server.js --name uptime-kuma
+```
+
+Browse to http://localhost:3001 after started.
+
 ### Advanced Installation
 
 If you need more options or need to browse via a reserve proxy, please read:
 
 https://github.com/louislam/uptime-kuma/wiki/%F0%9F%94%A7-How-to-Install
 
-
-
 ## 🆙 How to Update
 
 Please read:
@@ -56,6 +76,10 @@ I will mark requests/issues to the next milestone.
 
 https://github.com/louislam/uptime-kuma/milestones
 
+Project Plan:
+
+https://github.com/louislam/uptime-kuma/projects/1
+
 ## 🖼 More Screenshots
 
 Dark Mode:
@@ -72,7 +96,7 @@ Telegram Notification Sample:
 
 ## Motivation
 
-* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one. One of the close one is statping. Unfortunately, it is not stable and unmaintained.
+* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one. One of the close ones is statping. Unfortunately, it is not stable and unmaintained.
 * Want to build a fancy UI.
 * Learn Vue 3 and vite.js.
 * Show the power of Bootstrap 5.
@@ -81,10 +105,22 @@ Telegram Notification Sample:
 
 If you love this project, please consider giving me a ⭐.
 
+## 🗣️ Discussion
+
+### Issues Page
+You can discuss or ask for help in [Issues](https://github.com/louislam/uptime-kuma/issues).
+
+### Subreddit
+My Reddit account: louislamlam
+You can mention me if you ask question on Reddit.
+https://www.reddit.com/r/UptimeKuma/
+
 ## Contribute
 
-If you want to report a bug or request a new feature. Free feel to open a new issue.
+If you want to report a bug or request a new feature. Free feel to open a [new issue](https://github.com/louislam/uptime-kuma/issues).
 
-If you want to modify Uptime Kuma, this guideline maybe useful for you: https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md
+If you want to translate Uptime Kuma into your langauge, please read: https://github.com/louislam/uptime-kuma/tree/master/src/languages
 
-English proofreading is needed too, because my grammar is not that great sadly. Feel free to correct my grammar in this Readme, source code or wiki.
+If you want to modify Uptime Kuma, this guideline may be useful for you: https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md
+
+English proofreading is needed too because my grammar is not that great sadly. Feel free to correct my grammar in this readme, source code, or wiki.

SECURITY.md

@@ -10,5 +10,6 @@ currently being supported with security updates.
 | 1.x.x  | :white_check_mark: |
 
 ## Reporting a Vulnerability
+Please report security issues to uptime@kuma.pet.
 
-https://github.com/louislam/uptime-kuma/issues
+Do not use the issue tracker or discuss it in the public as it will cause more damage.

db/patch-2fa.sql

@@ -0,0 +1,10 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE user
+    ADD twofa_secret VARCHAR(64);
+
+ALTER TABLE user
+    ADD twofa_status BOOLEAN default 0 NOT NULL;
+
+COMMIT;

db/patch-add-retry-interval-monitor.sql

@@ -0,0 +1,7 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE monitor
+    ADD retry_interval INTEGER default 0 not null;
+
+COMMIT;

db/patch-group-table.sql

@@ -0,0 +1,30 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+create table `group`
+(
+    id           INTEGER      not null
+        constraint group_pk
+            primary key autoincrement,
+    name         VARCHAR(255) not null,
+    created_date DATETIME              default (DATETIME('now')) not null,
+    public       BOOLEAN               default 0 not null,
+    active       BOOLEAN               default 1 not null,
+    weight       BOOLEAN      NOT NULL DEFAULT 1000
+);
+
+CREATE TABLE [monitor_group]
+(
+    [id]         INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+    [monitor_id] INTEGER                           NOT NULL REFERENCES [monitor] ([id]) ON DELETE CASCADE ON UPDATE CASCADE,
+    [group_id]   INTEGER                           NOT NULL REFERENCES [group] ([id]) ON DELETE CASCADE ON UPDATE CASCADE,
+    weight BOOLEAN NOT NULL DEFAULT 1000
+);
+
+CREATE INDEX [fk]
+    ON [monitor_group] (
+                        [monitor_id],
+                        [group_id]);
+
+
+COMMIT;

db/patch-improve-performance.sql

@@ -0,0 +1,10 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+-- For sendHeartbeatList
+CREATE INDEX monitor_time_index ON heartbeat (monitor_id, time);
+
+-- For sendImportantHeartbeatList
+CREATE INDEX monitor_important_time_index ON heartbeat (monitor_id, important,time);
+
+COMMIT;

db/patch-incident-table.sql

@@ -0,0 +1,18 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+create table incident
+(
+    id INTEGER not null
+        constraint incident_pk
+            primary key autoincrement,
+    title VARCHAR(255) not null,
+    content TEXT not null,
+    style VARCHAR(30) default 'warning' not null,
+    created_date DATETIME default (DATETIME('now')) not null,
+    last_updated_date DATETIME,
+    pin BOOLEAN default 1 not null,
+    active BOOLEAN default 1 not null
+);
+
+COMMIT;

db/patch-setting-value-type.sql

@@ -0,0 +1,22 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+-- Generated by Intellij IDEA
+create table setting_dg_tmp
+(
+    id INTEGER
+        primary key autoincrement,
+    key VARCHAR(200) not null
+        unique,
+    value TEXT,
+    type VARCHAR(20)
+);
+
+insert into setting_dg_tmp(id, key, value, type) select id, key, value, type from setting;
+
+drop table setting;
+
+alter table setting_dg_tmp rename to setting;
+
+
+COMMIT;

db/patch10.sql

@@ -0,0 +1,19 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+CREATE TABLE tag (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+	name VARCHAR(255) NOT NULL,
+    color VARCHAR(255) NOT NULL,
+	created_date DATETIME DEFAULT (DATETIME('now')) NOT NULL
+);
+
+CREATE TABLE monitor_tag (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+	monitor_id INTEGER NOT NULL,
+	tag_id INTEGER NOT NULL,
+	value TEXT,
+	CONSTRAINT FK_tag FOREIGN KEY (tag_id) REFERENCES tag(id) ON DELETE CASCADE ON UPDATE CASCADE,
+	CONSTRAINT FK_monitor FOREIGN KEY (monitor_id) REFERENCES monitor(id) ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+CREATE INDEX monitor_tag_monitor_id_index ON monitor_tag (monitor_id);
+CREATE INDEX monitor_tag_tag_id_index ON monitor_tag (tag_id);

db/patch7.sql

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

db/patch8.sql

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

db/patch9.sql

@@ -0,0 +1,7 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE notification
+    ADD is_default BOOLEAN default 0 NOT NULL;
+
+COMMIT;

dockerfile

@@ -1,28 +1,33 @@
-# DON'T UPDATE TO alpine3.13, 1.14, see #41.
-FROM node:14-alpine3.12 AS release
+# DON'T UPDATE TO node:14-bullseye-slim, see #372.
+# If the image changed, the second stage image should be changed too
+FROM node:14-buster-slim AS build
 WORKDIR /app
 
-# split the sqlite install here, so that it can caches the arm prebuilt
-RUN apk add --no-cache --virtual .build-deps make g++ python3 python3-dev && \
-            ln -s /usr/bin/python3 /usr/bin/python && \
-            npm install @louislam/sqlite3@5.0.3 bcrypt@5.0.1 && \
-            apk del .build-deps && \
-            rm -f /usr/bin/python
-
-# Touching above code may causes sqlite3 re-compile again, painful slow.
-
-# Install apprise
-RUN apk add --no-cache python3 py3-cryptography py3-pip py3-six py3-yaml py3-click py3-markdown py3-requests py3-requests-oauthlib
-RUN pip3 --no-cache-dir install apprise && \
-            rm -rf /root/.cache
-
 COPY . .
-RUN npm install && npm run build && npm prune
+RUN npm install --legacy-peer-deps && \
+    npm run build && \
+    npm prune --production && \
+    chmod +x /app/extra/entrypoint.sh
+
+
+FROM node:14-buster-slim AS release
+WORKDIR /app
+
+# Install Apprise, add sqlite3 cli for debugging in the future, iputils-ping for ping, util-linux for setpriv
+RUN apt update && \
+    apt --yes install python3 python3-pip python3-cryptography python3-six python3-yaml python3-click python3-markdown python3-requests python3-requests-oauthlib \
+        sqlite3 iputils-ping util-linux && \
+    pip3 --no-cache-dir install apprise && \
+    rm -rf /var/lib/apt/lists/*
+
+# Copy app files from build layer
+COPY --from=build /app /app
 
 EXPOSE 3001
 VOLUME ["/app/data"]
-HEALTHCHECK --interval=60s --timeout=30s --start-period=300s CMD node extra/healthcheck.js
-CMD ["npm", "run", "start-server"]
+HEALTHCHECK --interval=60s --timeout=30s --start-period=180s --retries=5 CMD node extra/healthcheck.js
+ENTRYPOINT ["extra/entrypoint.sh"]
+CMD ["node", "server/server.js"]
 
 FROM release AS nightly
 RUN npm run mark-as-nightly

dockerfile-alpine

@@ -0,0 +1,30 @@
+# DON'T UPDATE TO alpine3.13, 1.14, see #41.
+FROM node:14-alpine3.12 AS build
+WORKDIR /app
+
+COPY . .
+RUN npm install --legacy-peer-deps && \
+    npm run build && \
+    npm prune --production && \
+    chmod +x /app/extra/entrypoint.sh
+
+
+FROM node:14-alpine3.12 AS release
+WORKDIR /app
+
+# Install apprise, iputils for non-root ping, setpriv
+RUN apk add --no-cache iputils setpriv python3 py3-cryptography py3-pip py3-six py3-yaml py3-click py3-markdown py3-requests py3-requests-oauthlib && \
+    pip3 --no-cache-dir install apprise && \
+    rm -rf /root/.cache
+
+# Copy app files from build layer
+COPY --from=build /app /app
+
+EXPOSE 3001
+VOLUME ["/app/data"]
+HEALTHCHECK --interval=60s --timeout=30s --start-period=180s --retries=5 CMD node extra/healthcheck.js
+ENTRYPOINT ["extra/entrypoint.sh"]
+CMD ["node", "server/server.js"]
+
+FROM release AS nightly
+RUN npm run mark-as-nightly

extra/entrypoint.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env sh
+
+# set -e Exit the script if an error happens
+set -e
+PUID=${PUID=1000}
+PGID=${PGID=1000}
+
+files_ownership () {
+    # -h Changes the ownership of an encountered symbolic link and not that of the file or directory pointed to by the symbolic link.
+    # -R Recursively descends the specified directories
+    # -c Like verbose but report only when a change is made
+    chown -hRc "$PUID":"$PGID" /app/data
+}
+
+echo "==> Performing startup jobs and maintenance tasks"
+files_ownership
+
+echo "==> Starting application with user $PUID group $PGID"
+
+# --clear-groups Clear supplementary groups.
+exec setpriv --reuid "$PUID" --regid "$PGID" --clear-groups "$@"

extra/healthcheck.js

@@ -1,19 +1,34 @@
-let http = require("http");
+/*
+ * This script should be run after a period of time (180s), because the server may need some time to prepare.
+ */
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+
+let client;
+
+if (process.env.SSL_KEY && process.env.SSL_CERT) {
+    client = require("https");
+} else {
+    client = require("http");
+}
+
 let options = {
-    host: "localhost",
-    port: "3001",
-    timeout: 2000,
+    host: process.env.HOST || "127.0.0.1",
+    port: parseInt(process.env.PORT) || 3001,
+    timeout: 28 * 1000,
 };
-let request = http.request(options, (res) => {
-    console.log(`STATUS: ${res.statusCode}`);
-    if (res.statusCode == 200) {
+
+let request = client.request(options, (res) => {
+    console.log(`Health Check OK [Res Code: ${res.statusCode}]`);
+    if (res.statusCode === 200) {
         process.exit(0);
     } else {
         process.exit(1);
     }
 });
+
 request.on("error", function (err) {
-    console.log("ERROR");
+    console.error("Health Check ERROR");
     process.exit(1);
 });
+
 request.end();

extra/install.batsh

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

extra/reset-password.js

@@ -6,12 +6,14 @@ const Database = require("../server/database");
 const { R } = require("redbean-node");
 const readline = require("readline");
 const { initJWTSecret } = require("../server/util-server");
+const args = require("args-parser")(process.argv);
 const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout
 });
 
 (async () => {
+    Database.init(args);
     await Database.connect();
 
     try {

extra/simple-dns-server.js

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

extra/update-language-files/.gitignore

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

extra/update-language-files/index.js

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

extra/update-language-files/package.json

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

extra/update-version.js

@@ -23,11 +23,10 @@ if (! exists) {
     pkg.version = newVersion;
     pkg.scripts.setup = pkg.scripts.setup.replaceAll(oldVersion, newVersion);
     pkg.scripts["build-docker"] = pkg.scripts["build-docker"].replaceAll(oldVersion, newVersion);
+    pkg.scripts["build-docker-alpine"] = pkg.scripts["build-docker-alpine"].replaceAll(oldVersion, newVersion);
+    pkg.scripts["build-docker-debian"] = pkg.scripts["build-docker-debian"].replaceAll(oldVersion, newVersion);
     fs.writeFileSync("package.json", JSON.stringify(pkg, null, 4) + "\n");
 
-    // Process README.md
-    fs.writeFileSync("README.md", fs.readFileSync("README.md", "utf8").replaceAll(oldVersion, newVersion));
-
     commit(newVersion);
     tag(newVersion);
 } else {

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="manifest" href="manifest.json" />
     <meta name="theme-color" id="theme-color" content="" />
     <meta name="description" content="Uptime Kuma monitoring tool" />
     <title>Uptime Kuma</title>

install.sh

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

kubernetes/README.md

@@ -0,0 +1,32 @@
+# Uptime-Kuma K8s Deployment
+
+⚠ Warning: K8s deployment is provided by contributors. I have no experience with K8s and I can't fix error in the future. I only test Docker and Node.js. Use at your own risk.
+
+## How does it work?
+
+Kustomize is a tool which builds a complete deployment file for all config elements.
+You can edit the files in the ```uptime-kuma``` folder except the ```kustomization.yml``` until you know what you're doing.
+If you want to choose another namespace you can edit the ```kustomization.yml``` in the ```kubernetes```-Folder and change the ```namespace: uptime-kuma``` to something you like.
+
+It creates a certificate with the specified Issuer and creates the Ingress for the Uptime-Kuma ClusterIP-Service.
+
+## What do I have to edit?
+
+You have to edit the ```ingressroute.yml``` to your needs.
+This ingressroute.yml is for the [nginx-ingress-controller](https://kubernetes.github.io/ingress-nginx/) in combination with the [cert-manager](https://cert-manager.io/).
+
+- Host
+- Secrets and secret names
+- (Cluster)Issuer (optional)
+- The Version in the Deployment-File
+  - Update:
+    - Change to newer version and run the above commands, it will update the pods one after another
+
+## How To use
+
+- Install [kustomize](https://kubectl.docs.kubernetes.io/installation/kustomize/)
+- Edit files mentioned above to your needs
+- Run ```kustomize build > apply.yml```
+- Run ```kubectl apply -f apply.yml```
+
+Now you should see some k8s magic and Uptime-Kuma should be available at the specified address.

kubernetes/kustomization.yml

@@ -0,0 +1,10 @@
+namespace: uptime-kuma
+namePrefix: uptime-kuma-
+
+commonLabels:
+  app: uptime-kuma
+
+bases:
+   - uptime-kuma
+
+

kubernetes/uptime-kuma/deployment.yml

@@ -0,0 +1,45 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    component: uptime-kuma
+  name: deployment
+spec:
+  selector:
+    matchLabels:
+      component: uptime-kuma
+  replicas: 1
+  strategy:
+    type: Recreate
+
+  template:
+    metadata:
+      labels:
+        component: uptime-kuma
+    spec:
+      containers:
+        - name: app
+          image: louislam/uptime-kuma:1
+          ports:
+            - containerPort: 3001
+          volumeMounts:
+            - mountPath: /app/data
+              name: storage
+          livenessProbe:
+            exec:
+              command:
+                - node
+                - extra/healthcheck.js
+            initialDelaySeconds: 180
+            periodSeconds: 60
+            timeoutSeconds: 30
+          readinessProbe:
+            httpGet:
+              path: /
+              port: 3001
+              scheme: HTTP
+
+      volumes:
+        - name: storage
+          persistentVolumeClaim:
+            claimName: pvc

kubernetes/uptime-kuma/ingressroute.yml

@@ -0,0 +1,39 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  annotations:
+    kubernetes.io/ingress.class: nginx
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
+    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
+    nginx.ingress.kubernetes.io/server-snippets: |
+      location / {
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-Host $http_host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header Host $host;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   Upgrade $http_upgrade;
+        proxy_cache_bypass $http_upgrade;
+        }
+  name: ingress
+spec:
+  tls:
+  - hosts:
+    - example.com
+    secretName: example-com-tls
+  rules:
+  - host: example.com
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: service
+            port:
+              number: 3001

kubernetes/uptime-kuma/kustomization.yml

@@ -0,0 +1,5 @@
+resources:
+  - deployment.yml
+  - service.yml
+  - ingressroute.yml
+  - pvc.yml

kubernetes/uptime-kuma/pvc.yml

@@ -0,0 +1,10 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 4Gi

kubernetes/uptime-kuma/service.yml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: Service
+metadata:  
+  name: service
+spec:
+  selector:    
+    component: uptime-kuma
+  type: ClusterIP
+  ports:  
+  - name: http
+    port: 3001
+    targetPort: 3001
+    protocol: TCP

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.3.0",
+    "version": "1.7.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -10,17 +10,25 @@
         "node": "14.*"
     },
     "scripts": {
+        "install-legacy": "npm install --legacy-peer-deps",
+        "update-legacy": "npm update --legacy-peer-deps",
+        "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
+        "lint:style": "stylelint \"**/*.{vue,css,scss}\" --ignore-path .gitignore",
+        "lint": "npm run lint:js && npm run lint:style",
         "dev": "vite --host",
         "start": "npm run start-server",
         "start-server": "node server/server.js",
-        "start-demo-server": "set NODE_ENV=demo && node server/server.js",
-        "update": "",
+        "start-server-dev": "cross-env NODE_ENV=development node server/server.js",
         "build": "vite build",
+        "tsc": "tsc",
         "vite-preview-dist": "vite preview --host",
-        "build-docker": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.3.0 --target release . --push",
+        "build-docker": "npm run build-docker-debian && npm run build-docker-alpine",
+        "build-docker-alpine": "docker buildx build -f dockerfile-alpine --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:alpine -t louislam/uptime-kuma:1-alpine -t louislam/uptime-kuma:1.7.0-alpine --target release . --push",
+        "build-docker-debian": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.7.0 -t louislam/uptime-kuma:debian -t louislam/uptime-kuma:1-debian -t louislam/uptime-kuma:1.7.0-debian --target release . --push",
         "build-docker-nightly": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly --target nightly . --push",
-        "build-docker-nightly-amd64": "docker buildx build --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push",
-        "setup": "git checkout 1.3.0 && npm install && npm run build",
+        "build-docker-nightly-alpine": "docker buildx build -f dockerfile-alpine --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly-alpine --target nightly . --push",
+        "build-docker-nightly-amd64": "docker buildx build --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push --progress plain",
+        "setup": "git checkout 1.7.0 && npm install --legacy-peer-deps && node node_modules/esbuild/install.js && npm run build && npm prune",
         "update-version": "node extra/update-version.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
@@ -29,58 +37,72 @@
         "test-install-script-alpine3": "npm run compile-install-script && docker build --progress plain -f test/test_install_script/alpine3.dockerfile .",
         "test-install-script-ubuntu": "npm run compile-install-script && docker build --progress plain -f test/test_install_script/ubuntu.dockerfile .",
         "test-install-script-ubuntu1604": "npm run compile-install-script && docker build --progress plain -f test/test_install_script/ubuntu1604.dockerfile .",
-        "test-install-script-debian": "npm run compile-install-script && docker build --progress plain -f test/test_install_script/debian.dockerfile ."
+        "test-nodejs16": "docker build --progress plain -f test/ubuntu-nodejs16.dockerfile .",
+        "simple-dns-server": "node extra/simple-dns-server.js",
+        "update-language-files-with-base-lang": "cd extra/update-language-files && node index.js %npm_config_base_lang% && eslint ../../src/languages/**.js --fix",
+        "update-language-files": "cd extra/update-language-files && node index.js && eslint ../../src/languages/**.js --fix"
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
         "@fortawesome/free-regular-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
-        "@louislam/sqlite3": "^5.0.3",
-        "@popperjs/core": "^2.9.3",
+        "@louislam/sqlite3": "^5.0.6",
+        "@popperjs/core": "^2.10.1",
         "args-parser": "^1.3.0",
-        "axios": "^0.21.1",
-        "bcrypt": "^5.0.1",
-        "bootstrap": "^5.1.0",
-        "chart.js": "^3.5.0",
+        "axios": "^0.21.4",
+        "bcryptjs": "^2.4.3",
+        "bootstrap": "^5.1.1",
+        "chart.js": "^3.5.1",
         "chartjs-adapter-dayjs": "^1.0.0",
         "command-exists": "^1.2.9",
-        "dayjs": "^1.10.6",
+        "compare-versions": "^3.6.0",
+        "dayjs": "^1.10.7",
         "express": "^4.17.1",
         "express-basic-auth": "^1.2.0",
         "form-data": "^4.0.0",
-        "http-graceful-shutdown": "^3.1.3",
+        "http-graceful-shutdown": "^3.1.4",
         "jsonwebtoken": "^8.5.1",
-        "nodemailer": "^6.6.3",
+        "nodemailer": "^6.6.5",
+        "notp": "^2.0.3",
         "password-hash": "^1.2.2",
         "prom-client": "^13.2.0",
         "prometheus-api-metrics": "^3.2.0",
-        "redbean-node": "0.0.21",
-        "socket.io": "^4.1.3",
-        "socket.io-client": "^4.1.3",
+        "qrcode": "^1.4.4",
+        "redbean-node": "0.1.2",
+        "socket.io": "^4.2.0",
+        "socket.io-client": "^4.2.0",
         "tcp-ping": "^0.1.1",
+        "thirty-two": "^1.0.2",
+        "timezones-list": "^3.0.1",
         "v-pagination-3": "^0.1.6",
-        "vue": "^3.2.2",
-        "vue-chart-3": "^0.5.7",
+        "vue": "next",
+        "vue-chart-3": "^0.5.8",
         "vue-confirm-dialog": "^1.0.2",
+        "vue-contenteditable": "^3.0.4",
+        "vue-i18n": "^9.1.7",
+        "vue-image-crop-upload": "^3.0.3",
         "vue-multiselect": "^3.0.0-alpha.2",
+        "vue-qrcode": "^1.0.0",
         "vue-router": "^4.0.11",
-        "vue-toastification": "^2.0.0-rc.1"
+        "vue-toastification": "^2.0.0-rc.1",
+        "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.15.0",
-        "@types/bootstrap": "^5.1.1",
-        "@vitejs/plugin-legacy": "^1.5.1",
-        "@vitejs/plugin-vue": "^1.4.0",
-        "@vue/compiler-sfc": "^3.2.2",
-        "core-js": "^3.16.1",
+        "@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",
+        "cross-env": "^7.0.3",
+        "dns2": "^2.0.1",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^7.16.0",
-        "sass": "^1.37.5",
+        "eslint-plugin-vue": "^7.18.0",
+        "sass": "^1.42.1",
         "stylelint": "^13.13.1",
-        "stylelint-config-recommended": "^5.0.0",
         "stylelint-config-standard": "^22.0.0",
-        "typescript": "^4.3.5",
-        "vite": "^2.4.4"
+        "typescript": "^4.4.3",
+        "vite": "^2.5.10"
     }
 }

public/manifest.json

@@ -0,0 +1,19 @@
+{
+    "name": "Uptime Kuma",
+    "short_name": "Uptime Kuma",
+    "start_url": "/",
+    "background_color": "#fff",
+    "display": "standalone",
+    "icons": [
+        {
+            "src": "icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

server/check-version.js

@@ -0,0 +1,44 @@
+const { setSetting } = require("./util-server");
+const axios = require("axios");
+const { isDev } = require("../src/util");
+
+exports.version = require("../package.json").version;
+exports.latestVersion = null;
+
+let interval;
+
+exports.startInterval = () => {
+    let check = async () => {
+        try {
+            const res = await axios.get("https://raw.githubusercontent.com/louislam/uptime-kuma/master/package.json");
+
+            if (typeof res.data === "string") {
+                res.data = JSON.parse(res.data);
+            }
+
+            // For debug
+            if (process.env.TEST_CHECK_VERSION === "1") {
+                res.data.version = "1000.0.0";
+            }
+
+            exports.latestVersion = res.data.version;
+            console.log("Latest Version: " + exports.latestVersion);
+        } catch (_) { }
+
+    };
+
+    check();
+    interval = setInterval(check, 3600 * 1000 * 48);
+};
+
+exports.enableCheckUpdate = async (value) => {
+    await setSetting("checkUpdate", value);
+
+    clearInterval(interval);
+
+    if (value) {
+        exports.startInterval();
+    }
+};
+
+exports.socket = null;

server/client.js

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

server/database.js

@@ -1,40 +1,100 @@
 const fs = require("fs");
-const { sleep } = require("../src/util");
 const { R } = require("redbean-node");
 const { setSetting, setting } = require("./util-server");
+const { debug, sleep } = require("../src/util");
+const dayjs = require("dayjs");
 const knex = require("knex");
-const sqlite3 = require("@louislam/sqlite3");
 
+/**
+ * Database & App Data Folder
+ */
 class Database {
 
-    static templatePath = "./db/kuma.db"
-    static path = "./data/kuma.db";
-    static latestVersion = 6;
+    static templatePath = "./db/kuma.db";
+
+    /**
+     * Data Dir (Default: ./data)
+     */
+    static dataDir;
+
+    /**
+     * User Upload Dir (Default: ./data/upload)
+     */
+    static uploadDir;
+
+    static path;
+
+    /**
+     * @type {boolean}
+     */
+    static patched = false;
+
+    /**
+     * For Backup only
+     */
+    static backupPath = null;
+
+    /**
+     * Add patch filename in key
+     * Values:
+     *      true: Add it regardless of order
+     *      false: Do nothing
+     *      { parents: []}: Need parents before add it
+     */
+    static patchList = {
+        "patch-setting-value-type.sql": true,
+        "patch-improve-performance.sql": true,
+        "patch-2fa.sql": true,
+        "patch-add-retry-interval-monitor.sql": true,
+        "patch-incident-table.sql": true,
+        "patch-group-table.sql": true,
+    }
+
+    /**
+     * The finally version should be 10 after merged tag feature
+     * @deprecated Use patchList for any new feature
+     */
+    static latestVersion = 10;
+
     static noReject = true;
-    static sqliteInstance = null;
+
+    static init(args) {
+        // Data Directory (must be end with "/")
+        Database.dataDir = process.env.DATA_DIR || args["data-dir"] || "./data/";
+        Database.path = Database.dataDir + "kuma.db";
+        if (! fs.existsSync(Database.dataDir)) {
+            fs.mkdirSync(Database.dataDir, { recursive: true });
+        }
+
+        Database.uploadDir = Database.dataDir + "upload/";
+
+        if (! fs.existsSync(Database.uploadDir)) {
+            fs.mkdirSync(Database.uploadDir, { recursive: true });
+        }
+
+        console.log(`Data Dir: ${Database.dataDir}`);
+    }
 
     static async connect() {
-
-        if (! this.sqliteInstance) {
-            this.sqliteInstance = new sqlite3.Database(Database.path);
-            this.sqliteInstance.run("PRAGMA journal_mode = WAL");
-        }
+        const acquireConnectionTimeout = 120 * 1000;
 
         const Dialect = require("knex/lib/dialects/sqlite3/index.js");
-        Dialect.prototype._driver = () => sqlite3;
-
-        // Disable Pool by overriding acquireConnection()
-        Dialect.prototype.acquireConnection = async () => {
-            return this.sqliteInstance;
-        }
-        Dialect.prototype.releaseConnection = async () => { }
+        Dialect.prototype._driver = () => require("@louislam/sqlite3");
 
         const knexInstance = knex({
             client: Dialect,
             connection: {
                 filename: Database.path,
+                acquireConnectionTimeout: acquireConnectionTimeout,
             },
             useNullAsDefault: true,
+            pool: {
+                min: 1,
+                max: 1,
+                idleTimeoutMillis: 120 * 1000,
+                propagateCreateError: false,
+                acquireTimeoutMillis: acquireConnectionTimeout,
+            }
         });
 
         R.setup(knexInstance);
@@ -44,8 +104,17 @@ class Database {
         }
 
         // Auto map the model to a bean object
-        R.freeze(true)
+        R.freeze(true);
         await R.autoloadModels("./server/model");
+
+        // Change to WAL
+        await R.exec("PRAGMA journal_mode = WAL");
+        await R.exec("PRAGMA cache_size = -12000");
+
+        console.log("SQLite config:");
+        console.log(await R.getAll("PRAGMA journal_mode"));
+        console.log(await R.getAll("PRAGMA cache_size"));
+        console.log("SQLite Version: " + await R.getCell("SELECT sqlite_version()"));
     }
 
     static async patch() {
@@ -63,21 +132,9 @@ class Database {
         } else if (version > this.latestVersion) {
             console.info("Warning: Database version is newer than expected");
         } else {
-            console.info("Database patch is needed")
+            console.info("Database patch is needed");
 
-            console.info("Backup the db")
-            const backupPath = "./data/kuma.db.bak" + version;
-            fs.copyFileSync(Database.path, backupPath);
-
-            const shmPath = Database.path + "-shm";
-            if (fs.existsSync(shmPath)) {
-                fs.copyFileSync(shmPath, shmPath + ".bak" + version);
-            }
-
-            const walPath = Database.path + "-wal";
-            if (fs.existsSync(walPath)) {
-                fs.copyFileSync(walPath, walPath + ".bak" + version);
-            }
+            this.backup(version);
 
             // Try catch anything here, if gone wrong, restore the backup
             try {
@@ -88,18 +145,95 @@ class Database {
                     console.info(`Patched ${sqlFile}`);
                     await setSetting("database_version", i);
                 }
-                console.log("Database Patched Successfully");
             } catch (ex) {
                 await Database.close();
-                console.error("Patch db failed!!! Restoring the backup")
-                fs.copyFileSync(backupPath, Database.path);
-                console.error(ex)
 
-                console.error("Start Uptime-Kuma failed due to patch db failed")
-                console.error("Please submit the bug report if you still encounter the problem after restart: https://github.com/louislam/uptime-kuma/issues")
+                console.error(ex);
+                console.error("Start Uptime-Kuma failed due to patch db failed");
+                console.error("Please submit the bug report if you still encounter the problem after restart: https://github.com/louislam/uptime-kuma/issues");
+
+                this.restore();
                 process.exit(1);
             }
         }
+
+        await this.patch2();
+    }
+
+    /**
+     * Call it from patch() only
+     * @returns {Promise<void>}
+     */
+    static async patch2() {
+        console.log("Database Patch 2.0 Process");
+        let databasePatchedFiles = await setting("databasePatchedFiles");
+
+        if (! databasePatchedFiles) {
+            databasePatchedFiles = {};
+        }
+
+        debug("Patched files:");
+        debug(databasePatchedFiles);
+
+        try {
+            for (let sqlFilename in this.patchList) {
+                await this.patch2Recursion(sqlFilename, databasePatchedFiles);
+            }
+
+            if (this.patched) {
+                console.log("Database Patched Successfully");
+            }
+
+        } catch (ex) {
+            await Database.close();
+
+            console.error(ex);
+            console.error("Start Uptime-Kuma failed due to patch db failed");
+            console.error("Please submit the bug report if you still encounter the problem after restart: https://github.com/louislam/uptime-kuma/issues");
+
+            this.restore();
+
+            process.exit(1);
+        }
+
+        await setSetting("databasePatchedFiles", databasePatchedFiles);
+    }
+
+    /**
+     * Used it patch2() only
+     * @param sqlFilename
+     * @param databasePatchedFiles
+     */
+    static async patch2Recursion(sqlFilename, databasePatchedFiles) {
+        let value = this.patchList[sqlFilename];
+
+        if (! value) {
+            console.log(sqlFilename + " skip");
+            return;
+        }
+
+        // Check if patched
+        if (! databasePatchedFiles[sqlFilename]) {
+            console.log(sqlFilename + " is not patched");
+
+            if (value.parents) {
+                console.log(sqlFilename + " need parents");
+                for (let parentSQLFilename of value.parents) {
+                    await this.patch2Recursion(parentSQLFilename, databasePatchedFiles);
+                }
+            }
+
+            this.backup(dayjs().format("YYYYMMDDHHmmss"));
+
+            console.log(sqlFilename + " is patching");
+            this.patched = true;
+            await this.importSQLFile("./db/" + sqlFilename);
+            databasePatchedFiles[sqlFilename] = true;
+            console.log(sqlFilename + " is patched successfully");
+
+        } else {
+            debug(sqlFilename + " is already patched, skip");
+        }
     }
 
     /**
@@ -116,12 +250,12 @@ class Database {
         // Remove all comments (--)
         let lines = text.split("\n");
         lines = lines.filter((line) => {
-            return ! line.startsWith("--")
+            return ! line.startsWith("--");
         });
 
         // Split statements by semicolon
         // Filter out empty line
-        text = lines.join("\n")
+        text = lines.join("\n");
 
         let statements = text.split(";")
             .map((statement) => {
@@ -129,22 +263,112 @@ class Database {
             })
             .filter((statement) => {
                 return statement !== "";
-            })
+            });
 
         for (let statement of statements) {
             await R.exec(statement);
         }
     }
 
+    static getBetterSQLite3Database() {
+        return R.knex.client.acquireConnection();
+    }
+
     /**
      * Special handle, because tarn.js throw a promise reject that cannot be caught
      * @returns {Promise<void>}
      */
     static async close() {
-        if (this.sqliteInstance) {
-            this.sqliteInstance.close();
+        const listener = (reason, p) => {
+            Database.noReject = false;
+        };
+        process.addListener("unhandledRejection", listener);
+
+        console.log("Closing DB");
+
+        while (true) {
+            Database.noReject = true;
+            await R.close();
+            await sleep(2000);
+
+            if (Database.noReject) {
+                break;
+            } else {
+                console.log("Waiting to close the db");
+            }
+        }
+        console.log("SQLite closed");
+
+        process.removeListener("unhandledRejection", listener);
+    }
+
+    /**
+     * One backup one time in this process.
+     * Reset this.backupPath if you want to backup again
+     * @param version
+     */
+    static backup(version) {
+        if (! this.backupPath) {
+            console.info("Backup the db");
+            this.backupPath = this.dataDir + "kuma.db.bak" + version;
+            fs.copyFileSync(Database.path, this.backupPath);
+
+            const shmPath = Database.path + "-shm";
+            if (fs.existsSync(shmPath)) {
+                this.backupShmPath = shmPath + ".bak" + version;
+                fs.copyFileSync(shmPath, this.backupShmPath);
+            }
+
+            const walPath = Database.path + "-wal";
+            if (fs.existsSync(walPath)) {
+                this.backupWalPath = walPath + ".bak" + version;
+                fs.copyFileSync(walPath, this.backupWalPath);
+            }
+        }
+    }
+
+    /**
+     *
+     */
+    static restore() {
+        if (this.backupPath) {
+            console.error("Patch db failed!!! Restoring the backup");
+
+            const shmPath = Database.path + "-shm";
+            const walPath = Database.path + "-wal";
+
+            // Delete patch failed db
+            try {
+                if (fs.existsSync(Database.path)) {
+                    fs.unlinkSync(Database.path);
+                }
+
+                if (fs.existsSync(shmPath)) {
+                    fs.unlinkSync(shmPath);
+                }
+
+                if (fs.existsSync(walPath)) {
+                    fs.unlinkSync(walPath);
+                }
+            } catch (e) {
+                console.log("Restore failed, you may need to restore the backup manually");
+                process.exit(1);
+            }
+
+            // Restore backup
+            fs.copyFileSync(this.backupPath, Database.path);
+
+            if (this.backupShmPath) {
+                fs.copyFileSync(this.backupShmPath, shmPath);
+            }
+
+            if (this.backupWalPath) {
+                fs.copyFileSync(this.backupWalPath, walPath);
+            }
+
+        } else {
+            console.log("Nothing to restore");
         }
-        console.log("Stopped database");
     }
 }
 

server/image-data-uri.js

@@ -0,0 +1,57 @@
+/*
+    From https://github.com/DiegoZoracKy/image-data-uri/blob/master/lib/image-data-uri.js
+    Modified with 0 dependencies
+ */
+let fs = require("fs");
+
+let ImageDataURI = (() => {
+
+    function decode(dataURI) {
+        if (!/data:image\//.test(dataURI)) {
+            console.log("ImageDataURI :: Error :: It seems that it is not an Image Data URI. Couldn't match \"data:image/\"");
+            return null;
+        }
+
+        let regExMatches = dataURI.match("data:(image/.*);base64,(.*)");
+        return {
+            imageType: regExMatches[1],
+            dataBase64: regExMatches[2],
+            dataBuffer: new Buffer(regExMatches[2], "base64")
+        };
+    }
+
+    function encode(data, mediaType) {
+        if (!data || !mediaType) {
+            console.log("ImageDataURI :: Error :: Missing some of the required params: data, mediaType ");
+            return null;
+        }
+
+        mediaType = (/\//.test(mediaType)) ? mediaType : "image/" + mediaType;
+        let dataBase64 = (Buffer.isBuffer(data)) ? data.toString("base64") : new Buffer(data).toString("base64");
+        let dataImgBase64 = "data:" + mediaType + ";base64," + dataBase64;
+
+        return dataImgBase64;
+    }
+
+    function outputFile(dataURI, filePath) {
+        filePath = filePath || "./";
+        return new Promise((resolve, reject) => {
+            let imageDecoded = decode(dataURI);
+
+            fs.writeFile(filePath, imageDecoded.dataBuffer, err => {
+                if (err) {
+                    return reject("ImageDataURI :: Error :: " + JSON.stringify(err, null, 4));
+                }
+                resolve(filePath);
+            });
+        });
+    }
+
+    return {
+        decode: decode,
+        encode: encode,
+        outputFile: outputFile,
+    };
+})();
+
+module.exports = ImageDataURI;

server/model/group.js

@@ -0,0 +1,34 @@
+const { BeanModel } = require("redbean-node/dist/bean-model");
+const { R } = require("redbean-node");
+
+class Group extends BeanModel {
+
+    async toPublicJSON() {
+        let monitorBeanList = await this.getMonitorList();
+        let monitorList = [];
+
+        for (let bean of monitorBeanList) {
+            monitorList.push(await bean.toPublicJSON());
+        }
+
+        return {
+            id: this.id,
+            name: this.name,
+            weight: this.weight,
+            monitorList,
+        };
+    }
+
+    async getMonitorList() {
+        return R.convertToBeans("monitor", await R.getAll(`
+            SELECT monitor.* FROM monitor, monitor_group
+            WHERE monitor.id = monitor_group.monitor_id
+            AND group_id = ?
+            ORDER BY monitor_group.weight
+        `, [
+            this.id,
+        ]));
+    }
+}
+
+module.exports = Group;

server/model/heartbeat.js

@@ -1,8 +1,8 @@
 const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc")
-let timezone = require("dayjs/plugin/timezone")
-dayjs.extend(utc)
-dayjs.extend(timezone)
+const utc = require("dayjs/plugin/utc");
+let timezone = require("dayjs/plugin/timezone");
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const { BeanModel } = require("redbean-node/dist/bean-model");
 
 /**
@@ -13,6 +13,15 @@ const { BeanModel } = require("redbean-node/dist/bean-model");
  */
 class Heartbeat extends BeanModel {
 
+    toPublicJSON() {
+        return {
+            status: this.status,
+            time: this.time,
+            msg: "",        // Hide for public
+            ping: this.ping,
+        };
+    }
+
     toJSON() {
         return {
             monitorID: this.monitor_id,

server/model/incident.js

@@ -0,0 +1,18 @@
+const { BeanModel } = require("redbean-node/dist/bean-model");
+
+class Incident extends BeanModel {
+
+    toPublicJSON() {
+        return {
+            id: this.id,
+            style: this.style,
+            title: this.title,
+            content: this.content,
+            pin: this.pin,
+            createdDate: this.createdDate,
+            lastUpdatedDate: this.lastUpdatedDate,
+        };
+    }
+}
+
+module.exports = Incident;

server/model/monitor.js

@@ -1,16 +1,16 @@
 const https = require("https");
 const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc")
-let timezone = require("dayjs/plugin/timezone")
-dayjs.extend(utc)
-dayjs.extend(timezone)
+const utc = require("dayjs/plugin/utc");
+let timezone = require("dayjs/plugin/timezone");
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const axios = require("axios");
 const { Prometheus } = require("../prometheus");
 const { debug, UP, DOWN, PENDING, flipStatus, TimeLogger } = require("../../src/util");
-const { tcping, ping, checkCertificate, checkStatusCode } = require("../util-server");
+const { tcping, ping, dnsResolve, checkCertificate, checkStatusCode, getTotalClientInRoom } = require("../util-server");
 const { R } = require("redbean-node");
 const { BeanModel } = require("redbean-node/dist/bean-model");
-const { Notification } = require("../notification")
+const { Notification } = require("../notification");
 const version = require("../../package.json").version;
 
 /**
@@ -20,18 +20,35 @@ const version = require("../../package.json").version;
  *      2 = PENDING
  */
 class Monitor extends BeanModel {
+
+    /**
+     * Return a object that ready to parse to JSON for public
+     * Only show necessary data to public
+     */
+    async toPublicJSON() {
+        return {
+            id: this.id,
+            name: this.name,
+        };
+    }
+
+    /**
+     * Return a object that ready to parse to JSON
+     */
     async toJSON() {
 
         let notificationIDList = {};
 
         let list = await R.find("monitor_notification", " monitor_id = ? ", [
             this.id,
-        ])
+        ]);
 
         for (let bean of list) {
             notificationIDList[bean.notification_id] = true;
         }
 
+        const tags = await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
+
         return {
             id: this.id,
             name: this.name,
@@ -43,12 +60,17 @@ class Monitor extends BeanModel {
             active: this.active,
             type: this.type,
             interval: this.interval,
+            retryInterval: this.retryInterval,
             keyword: this.keyword,
             ignoreTls: this.getIgnoreTls(),
             upsideDown: this.isUpsideDown(),
             maxredirects: this.maxredirects,
             accepted_statuscodes: this.getAcceptedStatuscodes(),
+            dns_resolve_type: this.dns_resolve_type,
+            dns_resolve_server: this.dns_resolve_server,
+            dns_last_result: this.dns_last_result,
             notificationIDList,
+            tags: tags,
         };
     }
 
@@ -57,7 +79,7 @@ class Monitor extends BeanModel {
      * @returns {boolean}
      */
     getIgnoreTls() {
-        return Boolean(this.ignoreTls)
+        return Boolean(this.ignoreTls);
     }
 
     /**
@@ -87,12 +109,12 @@ class Monitor extends BeanModel {
             if (! previousBeat) {
                 previousBeat = await R.findOne("heartbeat", " monitor_id = ? ORDER BY time DESC", [
                     this.id,
-                ])
+                ]);
             }
 
             const isFirstBeat = !previousBeat;
 
-            let bean = R.dispense("heartbeat")
+            let bean = R.dispense("heartbeat");
             bean.monitor_id = this.id;
             bean.time = R.isoDateTime(dayjs.utc());
             bean.status = DOWN;
@@ -110,10 +132,9 @@ class Monitor extends BeanModel {
 
             try {
                 if (this.type === "http" || this.type === "keyword") {
+                    // Do not do any queries/high loading things before the "bean.ping"
                     let startTime = dayjs().valueOf();
 
-                    // Use Custom agent to disable session reuse
-                    // https://github.com/nodejs/node/issues/3940
                     let res = await axios.get(this.url, {
                         timeout: this.interval * 1000 * 0.8,
                         headers: {
@@ -121,7 +142,7 @@ class Monitor extends BeanModel {
                             "User-Agent": "Uptime-Kuma/" + version,
                         },
                         httpsAgent: new https.Agent({
-                            maxCachedSessions: 0,
+                            maxCachedSessions: 0,      // Use Custom agent to disable session reuse (https://github.com/nodejs/node/issues/3940)
                             rejectUnauthorized: ! this.getIgnoreTls(),
                         }),
                         maxRedirects: this.maxredirects,
@@ -129,7 +150,7 @@ class Monitor extends BeanModel {
                             return checkStatusCode(status, this.getAcceptedStatuscodes());
                         },
                     });
-                    bean.msg = `${res.status} - ${res.statusText}`
+                    bean.msg = `${res.status} - ${res.statusText}`;
                     bean.ping = dayjs().valueOf() - startTime;
 
                     // Check certificate if https is used
@@ -139,12 +160,12 @@ class Monitor extends BeanModel {
                             tlsInfo = await this.updateTlsInfo(checkCertificate(res));
                         } catch (e) {
                             if (e.message !== "No TLS certificate in response") {
-                                console.error(e.message)
+                                console.error(e.message);
                             }
                         }
                     }
 
-                    debug("Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms")
+                    debug("Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms");
 
                     if (this.type === "http") {
                         bean.status = UP;
@@ -154,26 +175,66 @@ class Monitor extends BeanModel {
 
                         // Convert to string for object/array
                         if (typeof data !== "string") {
-                            data = JSON.stringify(data)
+                            data = JSON.stringify(data);
                         }
 
                         if (data.includes(this.keyword)) {
-                            bean.msg += ", keyword is found"
+                            bean.msg += ", keyword is found";
                             bean.status = UP;
                         } else {
-                            throw new Error(bean.msg + ", but keyword is not found")
+                            throw new Error(bean.msg + ", but keyword is not found");
                         }
 
                     }
 
                 } else if (this.type === "port") {
                     bean.ping = await tcping(this.hostname, this.port);
-                    bean.msg = ""
+                    bean.msg = "";
                     bean.status = UP;
 
                 } else if (this.type === "ping") {
                     bean.ping = await ping(this.hostname);
-                    bean.msg = ""
+                    bean.msg = "";
+                    bean.status = UP;
+                } else if (this.type === "dns") {
+                    let startTime = dayjs().valueOf();
+                    let dnsMessage = "";
+
+                    let dnsRes = await dnsResolve(this.hostname, this.dns_resolve_server, this.dns_resolve_type);
+                    bean.ping = dayjs().valueOf() - startTime;
+
+                    if (this.dns_resolve_type == "A" || this.dns_resolve_type == "AAAA" || this.dns_resolve_type == "TXT") {
+                        dnsMessage += "Records: ";
+                        dnsMessage += dnsRes.join(" | ");
+                    } else if (this.dns_resolve_type == "CNAME" || this.dns_resolve_type == "PTR") {
+                        dnsMessage = dnsRes[0];
+                    } else if (this.dns_resolve_type == "CAA") {
+                        dnsMessage = dnsRes[0].issue;
+                    } else if (this.dns_resolve_type == "MX") {
+                        dnsRes.forEach(record => {
+                            dnsMessage += `Hostname: ${record.exchange} - Priority: ${record.priority} | `;
+                        });
+                        dnsMessage = dnsMessage.slice(0, -2);
+                    } else if (this.dns_resolve_type == "NS") {
+                        dnsMessage += "Servers: ";
+                        dnsMessage += dnsRes.join(" | ");
+                    } else if (this.dns_resolve_type == "SOA") {
+                        dnsMessage += `NS-Name: ${dnsRes.nsname} | Hostmaster: ${dnsRes.hostmaster} | Serial: ${dnsRes.serial} | Refresh: ${dnsRes.refresh} | Retry: ${dnsRes.retry} | Expire: ${dnsRes.expire} | MinTTL: ${dnsRes.minttl}`;
+                    } else if (this.dns_resolve_type == "SRV") {
+                        dnsRes.forEach(record => {
+                            dnsMessage += `Name: ${record.name} | Port: ${record.port} | Priority: ${record.priority} | Weight: ${record.weight} | `;
+                        });
+                        dnsMessage = dnsMessage.slice(0, -2);
+                    }
+
+                    if (this.dnsLastResult !== dnsMessage) {
+                        R.exec("UPDATE `monitor` SET dns_last_result = ? WHERE id = ? ", [
+                            dnsMessage,
+                            this.id
+                        ]);
+                    }
+
+                    bean.msg = dnsMessage;
                     bean.status = UP;
                 }
 
@@ -226,22 +287,23 @@ class Monitor extends BeanModel {
                 if (!isFirstBeat || bean.status === DOWN) {
                     let notificationList = await R.getAll("SELECT notification.* FROM notification, monitor_notification WHERE monitor_id = ? AND monitor_notification.notification_id = notification.id ", [
                         this.id,
-                    ])
+                    ]);
 
                     let text;
                     if (bean.status === UP) {
-                        text = "✅ Up"
+                        text = "✅ Up";
                     } else {
-                        text = "🔴 Down"
+                        text = "🔴 Down";
                     }
 
                     let msg = `[${this.name}] [${text}] ${bean.msg}`;
 
                     for (let notification of notificationList) {
                         try {
-                            await Notification.send(JSON.parse(notification.config), msg, await this.toJSON(), bean.toJSON())
+                            await Notification.send(JSON.parse(notification.config), msg, await this.toJSON(), bean.toJSON());
                         } catch (e) {
-                            console.error("Cannot send notification to " + notification.name)
+                            console.error("Cannot send notification to " + notification.name);
+                            console.log(e);
                         }
                     }
                 }
@@ -250,30 +312,39 @@ class Monitor extends BeanModel {
                 bean.important = false;
             }
 
+            let beatInterval = this.interval;
+
             if (bean.status === UP) {
-                console.info(`Monitor #${this.id} '${this.name}': Successful Response: ${bean.ping} ms | Interval: ${this.interval} seconds | Type: ${this.type}`)
+                console.info(`Monitor #${this.id} '${this.name}': Successful Response: ${bean.ping} ms | Interval: ${beatInterval} seconds | Type: ${this.type}`);
             } else if (bean.status === PENDING) {
-                console.warn(`Monitor #${this.id} '${this.name}': Pending: ${bean.msg} | Max retries: ${this.maxretries} | Type: ${this.type}`)
+                if (this.retryInterval !== this.interval) {
+                    beatInterval = this.retryInterval;
+                }
+                console.warn(`Monitor #${this.id} '${this.name}': Pending: ${bean.msg} | Max retries: ${this.maxretries} | Retry: ${retries} | Retry Interval: ${beatInterval} seconds | Type: ${this.type}`);
             } else {
-                console.warn(`Monitor #${this.id} '${this.name}': Failing: ${bean.msg} | Type: ${this.type}`)
+                console.warn(`Monitor #${this.id} '${this.name}': Failing: ${bean.msg} | Interval: ${beatInterval} seconds | Type: ${this.type}`);
             }
 
-            prometheus.update(bean, tlsInfo)
-
             io.to(this.user_id).emit("heartbeat", bean.toJSON());
+            Monitor.sendStats(io, this.id, this.user_id);
 
-            await R.store(bean)
-            Monitor.sendStats(io, this.id, this.user_id)
+            await R.store(bean);
+            prometheus.update(bean, tlsInfo);
 
             previousBeat = bean;
-        }
+
+            if (! this.isStop) {
+                this.heartbeatInterval = setTimeout(beat, beatInterval * 1000);
+            }
+
+        };
 
         beat();
-        this.heartbeatInterval = setInterval(beat, this.interval * 1000);
     }
 
     stop() {
-        clearInterval(this.heartbeatInterval)
+        clearTimeout(this.heartbeatInterval);
+        this.isStop = true;
     }
 
     /**
@@ -310,10 +381,16 @@ class Monitor extends BeanModel {
     }
 
     static async sendStats(io, monitorID, userID) {
-        await Monitor.sendAvgPing(24, io, monitorID, userID);
-        await Monitor.sendUptime(24, io, monitorID, userID);
-        await Monitor.sendUptime(24 * 30, io, monitorID, userID);
-        await Monitor.sendCertInfo(io, monitorID, userID);
+        const hasClients = getTotalClientInRoom(io, userID) > 0;
+
+        if (hasClients) {
+            await Monitor.sendAvgPing(24, io, monitorID, userID);
+            await Monitor.sendUptime(24, io, monitorID, userID);
+            await Monitor.sendUptime(24 * 30, io, monitorID, userID);
+            await Monitor.sendCertInfo(io, monitorID, userID);
+        } else {
+            debug("No clients in the room, no need to send stats");
+        }
     }
 
     /**
@@ -353,64 +430,74 @@ class Monitor extends BeanModel {
      * https://www.uptrends.com/support/kb/reporting/calculation-of-uptime-and-downtime
      * @param duration : int Hours
      */
-    static async sendUptime(duration, io, monitorID, userID) {
+    static async calcUptime(duration, monitorID) {
         const timeLogger = new TimeLogger();
 
-        let sec = duration * 3600;
+        const startTime = R.isoDateTime(dayjs.utc().subtract(duration, "hour"));
 
-        let heartbeatList = await R.getAll(`
-            SELECT duration, time, status
+        // Handle if heartbeat duration longer than the target duration
+        // e.g. If the last beat's duration is bigger that the 24hrs window, it will use the duration between the (beat time - window margin) (THEN case in SQL)
+        let result = await R.getRow(`
+            SELECT
+               -- SUM all duration, also trim off the beat out of time window
+                SUM(
+                    CASE
+                        WHEN (JULIANDAY(\`time\`) - JULIANDAY(?)) * 86400 < duration
+                        THEN (JULIANDAY(\`time\`) - JULIANDAY(?)) * 86400
+                        ELSE duration
+                    END
+                ) AS total_duration,
+
+               -- SUM all uptime duration, also trim off the beat out of time window
+                SUM(
+                    CASE
+                        WHEN (status = 1)
+                        THEN
+                            CASE
+                                WHEN (JULIANDAY(\`time\`) - JULIANDAY(?)) * 86400 < duration
+                                    THEN (JULIANDAY(\`time\`) - JULIANDAY(?)) * 86400
+                                ELSE duration
+                            END
+                        END
+                ) AS uptime_duration
             FROM heartbeat
-            WHERE time > DATETIME('now', ? || ' hours')
-            AND monitor_id = ? `, [
-            -duration,
+            WHERE time > ?
+            AND monitor_id = ?
+        `, [
+            startTime, startTime, startTime, startTime, startTime,
             monitorID,
         ]);
 
         timeLogger.print(`[Monitor: ${monitorID}][${duration}] sendUptime`);
 
-        let downtime = 0;
-        let total = 0;
-        let uptime;
+        let totalDuration = result.total_duration;
+        let uptimeDuration = result.uptime_duration;
+        let uptime = 0;
 
-        // Special handle for the first heartbeat only
-        if (heartbeatList.length === 1) {
-
-            if (heartbeatList[0].status === 1) {
-                uptime = 1;
-            } else {
+        if (totalDuration > 0) {
+            uptime = uptimeDuration / totalDuration;
+            if (uptime < 0) {
                 uptime = 0;
             }
 
         } else {
-            for (let row of heartbeatList) {
-                let value = parseInt(row.duration)
-                let time = row.time
+            // Handle new monitor with only one beat, because the beat's duration = 0
+            let status = parseInt(await R.getCell("SELECT `status` FROM heartbeat WHERE monitor_id = ?", [ monitorID ]));
 
-                // Handle if heartbeat duration longer than the target duration
-                // e.g.   Heartbeat duration = 28hrs, but target duration = 24hrs
-                if (value > sec) {
-                    let trim = dayjs.utc().diff(dayjs(time), "second");
-                    value = sec - trim;
-
-                    if (value < 0) {
-                        value = 0;
-                    }
-                }
-
-                total += value;
-                if (row.status === 0 || row.status === 2) {
-                    downtime += value;
-                }
-            }
-
-            uptime = (total - downtime) / total;
-
-            if (uptime < 0) {
-                uptime = 0;
+            if (status === UP) {
+                uptime = 1;
             }
         }
 
+        return uptime;
+    }
+
+    /**
+     * Send Uptime
+     * @param duration : int Hours
+     */
+    static async sendUptime(duration, io, monitorID, userID) {
+        const uptime = await this.calcUptime(duration, monitorID);
         io.to(userID).emit("uptime", monitorID, duration, uptime);
     }
 }

server/model/tag.js

@@ -0,0 +1,13 @@
+const { BeanModel } = require("redbean-node/dist/bean-model");
+
+class Tag extends BeanModel {
+    toJSON() {
+        return {
+            id: this._id,
+            name: this._name,
+            color: this._color,
+        };
+    }
+}
+
+module.exports = Tag;

server/modules/apicache/apicache.js

@@ -0,0 +1,749 @@
+let url = require("url");
+let MemoryCache = require("./memory-cache");
+
+let t = {
+    ms: 1,
+    second: 1000,
+    minute: 60000,
+    hour: 3600000,
+    day: 3600000 * 24,
+    week: 3600000 * 24 * 7,
+    month: 3600000 * 24 * 30,
+};
+
+let instances = [];
+
+let matches = function (a) {
+    return function (b) {
+        return a === b;
+    };
+};
+
+let doesntMatch = function (a) {
+    return function (b) {
+        return !matches(a)(b);
+    };
+};
+
+let logDuration = function (d, prefix) {
+    let str = d > 1000 ? (d / 1000).toFixed(2) + "sec" : d + "ms";
+    return "\x1b[33m- " + (prefix ? prefix + " " : "") + str + "\x1b[0m";
+};
+
+function getSafeHeaders(res) {
+    return res.getHeaders ? res.getHeaders() : res._headers;
+}
+
+function ApiCache() {
+    let memCache = new MemoryCache();
+
+    let globalOptions = {
+        debug: false,
+        defaultDuration: 3600000,
+        enabled: true,
+        appendKey: [],
+        jsonp: false,
+        redisClient: false,
+        headerBlacklist: [],
+        statusCodes: {
+            include: [],
+            exclude: [],
+        },
+        events: {
+            expire: undefined,
+        },
+        headers: {
+            // 'cache-control':  'no-cache' // example of header overwrite
+        },
+        trackPerformance: false,
+        respectCacheControl: false,
+    };
+
+    let middlewareOptions = [];
+    let instance = this;
+    let index = null;
+    let timers = {};
+    let performanceArray = []; // for tracking cache hit rate
+
+    instances.push(this);
+    this.id = instances.length;
+
+    function debug(a, b, c, d) {
+        let arr = ["\x1b[36m[apicache]\x1b[0m", a, b, c, d].filter(function (arg) {
+            return arg !== undefined;
+        });
+        let debugEnv = process.env.DEBUG && process.env.DEBUG.split(",").indexOf("apicache") !== -1;
+
+        return (globalOptions.debug || debugEnv) && console.log.apply(null, arr);
+    }
+
+    function shouldCacheResponse(request, response, toggle) {
+        let opt = globalOptions;
+        let codes = opt.statusCodes;
+
+        if (!response) {
+            return false;
+        }
+
+        if (toggle && !toggle(request, response)) {
+            return false;
+        }
+
+        if (codes.exclude && codes.exclude.length && codes.exclude.indexOf(response.statusCode) !== -1) {
+            return false;
+        }
+        if (codes.include && codes.include.length && codes.include.indexOf(response.statusCode) === -1) {
+            return false;
+        }
+
+        return true;
+    }
+
+    function addIndexEntries(key, req) {
+        let groupName = req.apicacheGroup;
+
+        if (groupName) {
+            debug("group detected \"" + groupName + "\"");
+            let group = (index.groups[groupName] = index.groups[groupName] || []);
+            group.unshift(key);
+        }
+
+        index.all.unshift(key);
+    }
+
+    function filterBlacklistedHeaders(headers) {
+        return Object.keys(headers)
+            .filter(function (key) {
+                return globalOptions.headerBlacklist.indexOf(key) === -1;
+            })
+            .reduce(function (acc, header) {
+                acc[header] = headers[header];
+                return acc;
+            }, {});
+    }
+
+    function createCacheObject(status, headers, data, encoding) {
+        return {
+            status: status,
+            headers: filterBlacklistedHeaders(headers),
+            data: data,
+            encoding: encoding,
+            timestamp: new Date().getTime() / 1000, // seconds since epoch.  This is used to properly decrement max-age headers in cached responses.
+        };
+    }
+
+    function cacheResponse(key, value, duration) {
+        let redis = globalOptions.redisClient;
+        let expireCallback = globalOptions.events.expire;
+
+        if (redis && redis.connected) {
+            try {
+                redis.hset(key, "response", JSON.stringify(value));
+                redis.hset(key, "duration", duration);
+                redis.expire(key, duration / 1000, expireCallback || function () {});
+            } catch (err) {
+                debug("[apicache] error in redis.hset()");
+            }
+        } else {
+            memCache.add(key, value, duration, expireCallback);
+        }
+
+        // add automatic cache clearing from duration, includes max limit on setTimeout
+        timers[key] = setTimeout(function () {
+            instance.clear(key, true);
+        }, Math.min(duration, 2147483647));
+    }
+
+    function accumulateContent(res, content) {
+        if (content) {
+            if (typeof content == "string") {
+                res._apicache.content = (res._apicache.content || "") + content;
+            } else if (Buffer.isBuffer(content)) {
+                let oldContent = res._apicache.content;
+
+                if (typeof oldContent === "string") {
+                    oldContent = !Buffer.from ? new Buffer(oldContent) : Buffer.from(oldContent);
+                }
+
+                if (!oldContent) {
+                    oldContent = !Buffer.alloc ? new Buffer(0) : Buffer.alloc(0);
+                }
+
+                res._apicache.content = Buffer.concat(
+                    [oldContent, content],
+                    oldContent.length + content.length
+                );
+            } else {
+                res._apicache.content = content;
+            }
+        }
+    }
+
+    function makeResponseCacheable(req, res, next, key, duration, strDuration, toggle) {
+    // monkeypatch res.end to create cache object
+        res._apicache = {
+            write: res.write,
+            writeHead: res.writeHead,
+            end: res.end,
+            cacheable: true,
+            content: undefined,
+        };
+
+        // append header overwrites if applicable
+        Object.keys(globalOptions.headers).forEach(function (name) {
+            res.setHeader(name, globalOptions.headers[name]);
+        });
+
+        res.writeHead = function () {
+            // add cache control headers
+            if (!globalOptions.headers["cache-control"]) {
+                if (shouldCacheResponse(req, res, toggle)) {
+                    res.setHeader("cache-control", "max-age=" + (duration / 1000).toFixed(0));
+                } else {
+                    res.setHeader("cache-control", "no-cache, no-store, must-revalidate");
+                }
+            }
+
+            res._apicache.headers = Object.assign({}, getSafeHeaders(res));
+            return res._apicache.writeHead.apply(this, arguments);
+        };
+
+        // patch res.write
+        res.write = function (content) {
+            accumulateContent(res, content);
+            return res._apicache.write.apply(this, arguments);
+        };
+
+        // patch res.end
+        res.end = function (content, encoding) {
+            if (shouldCacheResponse(req, res, toggle)) {
+                accumulateContent(res, content);
+
+                if (res._apicache.cacheable && res._apicache.content) {
+                    addIndexEntries(key, req);
+                    let headers = res._apicache.headers || getSafeHeaders(res);
+                    let cacheObject = createCacheObject(
+                        res.statusCode,
+                        headers,
+                        res._apicache.content,
+                        encoding
+                    );
+                    cacheResponse(key, cacheObject, duration);
+
+                    // display log entry
+                    let elapsed = new Date() - req.apicacheTimer;
+                    debug("adding cache entry for \"" + key + "\" @ " + strDuration, logDuration(elapsed));
+                    debug("_apicache.headers: ", res._apicache.headers);
+                    debug("res.getHeaders(): ", getSafeHeaders(res));
+                    debug("cacheObject: ", cacheObject);
+                }
+            }
+
+            return res._apicache.end.apply(this, arguments);
+        };
+
+        next();
+    }
+
+    function sendCachedResponse(request, response, cacheObject, toggle, next, duration) {
+        if (toggle && !toggle(request, response)) {
+            return next();
+        }
+
+        let headers = getSafeHeaders(response);
+
+        // Modified by @louislam, removed Cache-control, since I don't need client side cache!
+        // Original Source: https://github.com/kwhitley/apicache/blob/0d5686cc21fad353c6dddee646288c2fca3e4f50/src/apicache.js#L254
+        Object.assign(headers, filterBlacklistedHeaders(cacheObject.headers || {}));
+
+        // only embed apicache headers when not in production environment
+        if (process.env.NODE_ENV !== "production") {
+            Object.assign(headers, {
+                "apicache-store": globalOptions.redisClient ? "redis" : "memory",
+                "apicache-version": "1.6.2-modified",
+            });
+        }
+
+        // unstringify buffers
+        let data = cacheObject.data;
+        if (data && data.type === "Buffer") {
+            data =
+        typeof data.data === "number" ? new Buffer.alloc(data.data) : new Buffer.from(data.data);
+        }
+
+        // test Etag against If-None-Match for 304
+        let cachedEtag = cacheObject.headers.etag;
+        let requestEtag = request.headers["if-none-match"];
+
+        if (requestEtag && cachedEtag === requestEtag) {
+            response.writeHead(304, headers);
+            return response.end();
+        }
+
+        response.writeHead(cacheObject.status || 200, headers);
+
+        return response.end(data, cacheObject.encoding);
+    }
+
+    function syncOptions() {
+        for (let i in middlewareOptions) {
+            Object.assign(middlewareOptions[i].options, globalOptions, middlewareOptions[i].localOptions);
+        }
+    }
+
+    this.clear = function (target, isAutomatic) {
+        let group = index.groups[target];
+        let redis = globalOptions.redisClient;
+
+        if (group) {
+            debug("clearing group \"" + target + "\"");
+
+            group.forEach(function (key) {
+                debug("clearing cached entry for \"" + key + "\"");
+                clearTimeout(timers[key]);
+                delete timers[key];
+                if (!globalOptions.redisClient) {
+                    memCache.delete(key);
+                } else {
+                    try {
+                        redis.del(key);
+                    } catch (err) {
+                        console.log("[apicache] error in redis.del(\"" + key + "\")");
+                    }
+                }
+                index.all = index.all.filter(doesntMatch(key));
+            });
+
+            delete index.groups[target];
+        } else if (target) {
+            debug("clearing " + (isAutomatic ? "expired" : "cached") + " entry for \"" + target + "\"");
+            clearTimeout(timers[target]);
+            delete timers[target];
+            // clear actual cached entry
+            if (!redis) {
+                memCache.delete(target);
+            } else {
+                try {
+                    redis.del(target);
+                } catch (err) {
+                    console.log("[apicache] error in redis.del(\"" + target + "\")");
+                }
+            }
+
+            // remove from global index
+            index.all = index.all.filter(doesntMatch(target));
+
+            // remove target from each group that it may exist in
+            Object.keys(index.groups).forEach(function (groupName) {
+                index.groups[groupName] = index.groups[groupName].filter(doesntMatch(target));
+
+                // delete group if now empty
+                if (!index.groups[groupName].length) {
+                    delete index.groups[groupName];
+                }
+            });
+        } else {
+            debug("clearing entire index");
+
+            if (!redis) {
+                memCache.clear();
+            } else {
+                // clear redis keys one by one from internal index to prevent clearing non-apicache entries
+                index.all.forEach(function (key) {
+                    clearTimeout(timers[key]);
+                    delete timers[key];
+                    try {
+                        redis.del(key);
+                    } catch (err) {
+                        console.log("[apicache] error in redis.del(\"" + key + "\")");
+                    }
+                });
+            }
+            this.resetIndex();
+        }
+
+        return this.getIndex();
+    };
+
+    function parseDuration(duration, defaultDuration) {
+        if (typeof duration === "number") {
+            return duration;
+        }
+
+        if (typeof duration === "string") {
+            let split = duration.match(/^([\d\.,]+)\s?(\w+)$/);
+
+            if (split.length === 3) {
+                let len = parseFloat(split[1]);
+                let unit = split[2].replace(/s$/i, "").toLowerCase();
+                if (unit === "m") {
+                    unit = "ms";
+                }
+
+                return (len || 1) * (t[unit] || 0);
+            }
+        }
+
+        return defaultDuration;
+    }
+
+    this.getDuration = function (duration) {
+        return parseDuration(duration, globalOptions.defaultDuration);
+    };
+
+    /**
+   * Return cache performance statistics (hit rate).  Suitable for putting into a route:
+   * <code>
+   * app.get('/api/cache/performance', (req, res) => {
+   *    res.json(apicache.getPerformance())
+   * })
+   * </code>
+   */
+    this.getPerformance = function () {
+        return performanceArray.map(function (p) {
+            return p.report();
+        });
+    };
+
+    this.getIndex = function (group) {
+        if (group) {
+            return index.groups[group];
+        } else {
+            return index;
+        }
+    };
+
+    this.middleware = function cache(strDuration, middlewareToggle, localOptions) {
+        let duration = instance.getDuration(strDuration);
+        let opt = {};
+
+        middlewareOptions.push({
+            options: opt,
+        });
+
+        let options = function (localOptions) {
+            if (localOptions) {
+                middlewareOptions.find(function (middleware) {
+                    return middleware.options === opt;
+                }).localOptions = localOptions;
+            }
+
+            syncOptions();
+
+            return opt;
+        };
+
+        options(localOptions);
+
+        /**
+     * A Function for non tracking performance
+     */
+        function NOOPCachePerformance() {
+            this.report = this.hit = this.miss = function () {}; // noop;
+        }
+
+        /**
+     * A function for tracking and reporting hit rate.  These statistics are returned by the getPerformance() call above.
+     */
+        function CachePerformance() {
+            /**
+       * Tracks the hit rate for the last 100 requests.
+       * If there have been fewer than 100 requests, the hit rate just considers the requests that have happened.
+       */
+            this.hitsLast100 = new Uint8Array(100 / 4); // each hit is 2 bits
+
+            /**
+       * Tracks the hit rate for the last 1000 requests.
+       * If there have been fewer than 1000 requests, the hit rate just considers the requests that have happened.
+       */
+            this.hitsLast1000 = new Uint8Array(1000 / 4); // each hit is 2 bits
+
+            /**
+       * Tracks the hit rate for the last 10000 requests.
+       * If there have been fewer than 10000 requests, the hit rate just considers the requests that have happened.
+       */
+            this.hitsLast10000 = new Uint8Array(10000 / 4); // each hit is 2 bits
+
+            /**
+       * Tracks the hit rate for the last 100000 requests.
+       * If there have been fewer than 100000 requests, the hit rate just considers the requests that have happened.
+       */
+            this.hitsLast100000 = new Uint8Array(100000 / 4); // each hit is 2 bits
+
+            /**
+       * The number of calls that have passed through the middleware since the server started.
+       */
+            this.callCount = 0;
+
+            /**
+       * The total number of hits since the server started
+       */
+            this.hitCount = 0;
+
+            /**
+       * The key from the last cache hit.  This is useful in identifying which route these statistics apply to.
+       */
+            this.lastCacheHit = null;
+
+            /**
+       * The key from the last cache miss.  This is useful in identifying which route these statistics apply to.
+       */
+            this.lastCacheMiss = null;
+
+            /**
+       * Return performance statistics
+       */
+            this.report = function () {
+                return {
+                    lastCacheHit: this.lastCacheHit,
+                    lastCacheMiss: this.lastCacheMiss,
+                    callCount: this.callCount,
+                    hitCount: this.hitCount,
+                    missCount: this.callCount - this.hitCount,
+                    hitRate: this.callCount == 0 ? null : this.hitCount / this.callCount,
+                    hitRateLast100: this.hitRate(this.hitsLast100),
+                    hitRateLast1000: this.hitRate(this.hitsLast1000),
+                    hitRateLast10000: this.hitRate(this.hitsLast10000),
+                    hitRateLast100000: this.hitRate(this.hitsLast100000),
+                };
+            };
+
+            /**
+       * Computes a cache hit rate from an array of hits and misses.
+       * @param {Uint8Array} array An array representing hits and misses.
+       * @returns a number between 0 and 1, or null if the array has no hits or misses
+       */
+            this.hitRate = function (array) {
+                let hits = 0;
+                let misses = 0;
+                for (let i = 0; i < array.length; i++) {
+                    let n8 = array[i];
+                    for (let j = 0; j < 4; j++) {
+                        switch (n8 & 3) {
+                            case 1:
+                                hits++;
+                                break;
+                            case 2:
+                                misses++;
+                                break;
+                        }
+                        n8 >>= 2;
+                    }
+                }
+                let total = hits + misses;
+                if (total == 0) {
+                    return null;
+                }
+                return hits / total;
+            };
+
+            /**
+       * Record a hit or miss in the given array.  It will be recorded at a position determined
+       * by the current value of the callCount variable.
+       * @param {Uint8Array} array An array representing hits and misses.
+       * @param {boolean} hit true for a hit, false for a miss
+       * Each element in the array is 8 bits, and encodes 4 hit/miss records.
+       * Each hit or miss is encoded as to bits as follows:
+       * 00 means no hit or miss has been recorded in these bits
+       * 01 encodes a hit
+       * 10 encodes a miss
+       */
+            this.recordHitInArray = function (array, hit) {
+                let arrayIndex = ~~(this.callCount / 4) % array.length;
+                let bitOffset = (this.callCount % 4) * 2; // 2 bits per record, 4 records per uint8 array element
+                let clearMask = ~(3 << bitOffset);
+                let record = (hit ? 1 : 2) << bitOffset;
+                array[arrayIndex] = (array[arrayIndex] & clearMask) | record;
+            };
+
+            /**
+       * Records the hit or miss in the tracking arrays and increments the call count.
+       * @param {boolean} hit true records a hit, false records a miss
+       */
+            this.recordHit = function (hit) {
+                this.recordHitInArray(this.hitsLast100, hit);
+                this.recordHitInArray(this.hitsLast1000, hit);
+                this.recordHitInArray(this.hitsLast10000, hit);
+                this.recordHitInArray(this.hitsLast100000, hit);
+                if (hit) {
+                    this.hitCount++;
+                }
+                this.callCount++;
+            };
+
+            /**
+       * Records a hit event, setting lastCacheMiss to the given key
+       * @param {string} key The key that had the cache hit
+       */
+            this.hit = function (key) {
+                this.recordHit(true);
+                this.lastCacheHit = key;
+            };
+
+            /**
+       * Records a miss event, setting lastCacheMiss to the given key
+       * @param {string} key The key that had the cache miss
+       */
+            this.miss = function (key) {
+                this.recordHit(false);
+                this.lastCacheMiss = key;
+            };
+        }
+
+        let perf = globalOptions.trackPerformance ? new CachePerformance() : new NOOPCachePerformance();
+
+        performanceArray.push(perf);
+
+        let cache = function (req, res, next) {
+            function bypass() {
+                debug("bypass detected, skipping cache.");
+                return next();
+            }
+
+            // initial bypass chances
+            if (!opt.enabled) {
+                return bypass();
+            }
+            if (
+                req.headers["x-apicache-bypass"] ||
+        req.headers["x-apicache-force-fetch"] ||
+        (opt.respectCacheControl && req.headers["cache-control"] == "no-cache")
+            ) {
+                return bypass();
+            }
+
+            // REMOVED IN 0.11.1 TO CORRECT MIDDLEWARE TOGGLE EXECUTE ORDER
+            // if (typeof middlewareToggle === 'function') {
+            //   if (!middlewareToggle(req, res)) return bypass()
+            // } else if (middlewareToggle !== undefined && !middlewareToggle) {
+            //   return bypass()
+            // }
+
+            // embed timer
+            req.apicacheTimer = new Date();
+
+            // In Express 4.x the url is ambigious based on where a router is mounted.  originalUrl will give the full Url
+            let key = req.originalUrl || req.url;
+
+            // Remove querystring from key if jsonp option is enabled
+            if (opt.jsonp) {
+                key = url.parse(key).pathname;
+            }
+
+            // add appendKey (either custom function or response path)
+            if (typeof opt.appendKey === "function") {
+                key += "$$appendKey=" + opt.appendKey(req, res);
+            } else if (opt.appendKey.length > 0) {
+                let appendKey = req;
+
+                for (let i = 0; i < opt.appendKey.length; i++) {
+                    appendKey = appendKey[opt.appendKey[i]];
+                }
+                key += "$$appendKey=" + appendKey;
+            }
+
+            // attempt cache hit
+            let redis = opt.redisClient;
+            let cached = !redis ? memCache.getValue(key) : null;
+
+            // send if cache hit from memory-cache
+            if (cached) {
+                let elapsed = new Date() - req.apicacheTimer;
+                debug("sending cached (memory-cache) version of", key, logDuration(elapsed));
+
+                perf.hit(key);
+                return sendCachedResponse(req, res, cached, middlewareToggle, next, duration);
+            }
+
+            // send if cache hit from redis
+            if (redis && redis.connected) {
+                try {
+                    redis.hgetall(key, function (err, obj) {
+                        if (!err && obj && obj.response) {
+                            let elapsed = new Date() - req.apicacheTimer;
+                            debug("sending cached (redis) version of", key, logDuration(elapsed));
+
+                            perf.hit(key);
+                            return sendCachedResponse(
+                                req,
+                                res,
+                                JSON.parse(obj.response),
+                                middlewareToggle,
+                                next,
+                                duration
+                            );
+                        } else {
+                            perf.miss(key);
+                            return makeResponseCacheable(
+                                req,
+                                res,
+                                next,
+                                key,
+                                duration,
+                                strDuration,
+                                middlewareToggle
+                            );
+                        }
+                    });
+                } catch (err) {
+                    // bypass redis on error
+                    perf.miss(key);
+                    return makeResponseCacheable(req, res, next, key, duration, strDuration, middlewareToggle);
+                }
+            } else {
+                perf.miss(key);
+                return makeResponseCacheable(req, res, next, key, duration, strDuration, middlewareToggle);
+            }
+        };
+
+        cache.options = options;
+
+        return cache;
+    };
+
+    this.options = function (options) {
+        if (options) {
+            Object.assign(globalOptions, options);
+            syncOptions();
+
+            if ("defaultDuration" in options) {
+                // Convert the default duration to a number in milliseconds (if needed)
+                globalOptions.defaultDuration = parseDuration(globalOptions.defaultDuration, 3600000);
+            }
+
+            if (globalOptions.trackPerformance) {
+                debug("WARNING: using trackPerformance flag can cause high memory usage!");
+            }
+
+            return this;
+        } else {
+            return globalOptions;
+        }
+    };
+
+    this.resetIndex = function () {
+        index = {
+            all: [],
+            groups: {},
+        };
+    };
+
+    this.newInstance = function (config) {
+        let instance = new ApiCache();
+
+        if (config) {
+            instance.options(config);
+        }
+
+        return instance;
+    };
+
+    this.clone = function () {
+        return this.newInstance(this.options());
+    };
+
+    // initialize index
+    this.resetIndex();
+}
+
+module.exports = new ApiCache();

server/modules/apicache/index.js

@@ -0,0 +1,14 @@
+const apicache = require("./apicache");
+
+apicache.options({
+    headerBlacklist: [
+        "cache-control"
+    ],
+    headers: {
+        // Disable client side cache, only server side cache.
+        // BUG! Not working for the second request
+        "cache-control": "no-cache",
+    },
+});
+
+module.exports = apicache;

server/modules/apicache/memory-cache.js

@@ -0,0 +1,59 @@
+function MemoryCache() {
+    this.cache = {};
+    this.size = 0;
+}
+
+MemoryCache.prototype.add = function (key, value, time, timeoutCallback) {
+    let old = this.cache[key];
+    let instance = this;
+
+    let entry = {
+        value: value,
+        expire: time + Date.now(),
+        timeout: setTimeout(function () {
+            instance.delete(key);
+            return timeoutCallback && typeof timeoutCallback === "function" && timeoutCallback(value, key);
+        }, time)
+    };
+
+    this.cache[key] = entry;
+    this.size = Object.keys(this.cache).length;
+
+    return entry;
+};
+
+MemoryCache.prototype.delete = function (key) {
+    let entry = this.cache[key];
+
+    if (entry) {
+        clearTimeout(entry.timeout);
+    }
+
+    delete this.cache[key];
+
+    this.size = Object.keys(this.cache).length;
+
+    return null;
+};
+
+MemoryCache.prototype.get = function (key) {
+    let entry = this.cache[key];
+
+    return entry;
+};
+
+MemoryCache.prototype.getValue = function (key) {
+    let entry = this.get(key);
+
+    return entry && entry.value;
+};
+
+MemoryCache.prototype.clear = function () {
+    Object.keys(this.cache).forEach(function (key) {
+        this.delete(key);
+    }, this);
+
+    return true;
+};
+
+module.exports = MemoryCache;

server/notification-providers/apprise.js

@@ -0,0 +1,26 @@
+const NotificationProvider = require("./notification-provider");
+const child_process = require("child_process");
+
+class Apprise extends NotificationProvider {
+
+    name = "apprise";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let s = child_process.spawnSync("apprise", [ "-vv", "-b", msg, notification.appriseURL])
+
+        let output = (s.stdout) ? s.stdout.toString() : "ERROR: maybe apprise not found";
+
+        if (output) {
+
+            if (! output.includes("ERROR")) {
+                return "Sent Successfully";
+            }
+
+            throw new Error(output)
+        } else {
+            return "No output from apprise";
+        }
+    }
+}
+
+module.exports = Apprise;

server/notification-providers/discord.js

@@ -0,0 +1,115 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const { DOWN, UP } = require("../../src/util");
+
+class Discord extends NotificationProvider {
+
+    name = "discord";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            const discordDisplayName = notification.discordUsername || "Uptime Kuma";
+
+            // If heartbeatJSON is null, assume we're testing.
+            if (heartbeatJSON == null) {
+                let discordtestdata = {
+                    username: discordDisplayName,
+                    content: msg,
+                }
+                await axios.post(notification.discordWebhookUrl, discordtestdata)
+                return okMsg;
+            }
+
+            let url;
+
+            if (monitorJSON["type"] === "port") {
+                url = monitorJSON["hostname"];
+                if (monitorJSON["port"]) {
+                    url += ":" + monitorJSON["port"];
+                }
+
+            } else {
+                url = monitorJSON["url"];
+            }
+
+            // If heartbeatJSON is not null, we go into the normal alerting loop.
+            if (heartbeatJSON["status"] == DOWN) {
+                let discorddowndata = {
+                    username: discordDisplayName,
+                    embeds: [{
+                        title: "❌ Your service " + monitorJSON["name"] + " went down. ❌",
+                        color: 16711680,
+                        timestamp: heartbeatJSON["time"],
+                        fields: [
+                            {
+                                name: "Service Name",
+                                value: monitorJSON["name"],
+                            },
+                            {
+                                name: "Service URL",
+                                value: url,
+                            },
+                            {
+                                name: "Time (UTC)",
+                                value: heartbeatJSON["time"],
+                            },
+                            {
+                                name: "Error",
+                                value: heartbeatJSON["msg"],
+                            },
+                        ],
+                    }],
+                }
+
+                if (notification.discordPrefixMessage) {
+                    discorddowndata.content = notification.discordPrefixMessage;
+                }
+
+                await axios.post(notification.discordWebhookUrl, discorddowndata)
+                return okMsg;
+
+            } else if (heartbeatJSON["status"] == UP) {
+                let discordupdata = {
+                    username: discordDisplayName,
+                    embeds: [{
+                        title: "✅ Your service " + monitorJSON["name"] + " is up! ✅",
+                        color: 65280,
+                        timestamp: heartbeatJSON["time"],
+                        fields: [
+                            {
+                                name: "Service Name",
+                                value: monitorJSON["name"],
+                            },
+                            {
+                                name: "Service URL",
+                                value: url.startsWith("http") ? "[Visit Service](" + url + ")" : url,
+                            },
+                            {
+                                name: "Time (UTC)",
+                                value: heartbeatJSON["time"],
+                            },
+                            {
+                                name: "Ping",
+                                value: heartbeatJSON["ping"] + "ms",
+                            },
+                        ],
+                    }],
+                }
+
+                if (notification.discordPrefixMessage) {
+                    discordupdata.content = notification.discordPrefixMessage;
+                }
+
+                await axios.post(notification.discordWebhookUrl, discordupdata)
+                return okMsg;
+            }
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+    }
+
+}
+
+module.exports = Discord;

server/notification-providers/gotify.js

@@ -0,0 +1,28 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Gotify extends NotificationProvider {
+
+    name = "gotify";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        try {
+            if (notification.gotifyserverurl && notification.gotifyserverurl.endsWith("/")) {
+                notification.gotifyserverurl = notification.gotifyserverurl.slice(0, -1);
+            }
+            await axios.post(`${notification.gotifyserverurl}/message?token=${notification.gotifyapplicationToken}`, {
+                "message": msg,
+                "priority": notification.gotifyPriority || 8,
+                "title": "Uptime-Kuma",
+            })
+
+            return okMsg;
+
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = Gotify;

server/notification-providers/line.js

@@ -0,0 +1,60 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const { DOWN, UP } = require("../../src/util");
+
+class Line extends NotificationProvider {
+
+    name = "line";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        try {
+            let lineAPIUrl = "https://api.line.me/v2/bot/message/push";
+            let config = {
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": "Bearer " + notification.lineChannelAccessToken
+                }
+            };
+            if (heartbeatJSON == null) {
+                let testMessage = {
+                    "to": notification.lineUserID,
+                    "messages": [
+                        {
+                            "type": "text",
+                            "text": "Test Successful!"
+                        }
+                    ]
+                }
+                await axios.post(lineAPIUrl, testMessage, config)
+            } else if (heartbeatJSON["status"] == DOWN) {
+                let downMessage = {
+                    "to": notification.lineUserID,
+                    "messages": [
+                        {
+                            "type": "text",
+                            "text": "UptimeKuma Alert: [🔴 Down]\n" + "Name: " + monitorJSON["name"] + " \n" + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"]
+                        }
+                    ]
+                }
+                await axios.post(lineAPIUrl, downMessage, config)
+            } else if (heartbeatJSON["status"] == UP) {
+                let upMessage = {
+                    "to": notification.lineUserID,
+                    "messages": [
+                        {
+                            "type": "text",
+                            "text": "UptimeKuma Alert: [✅ Up]\n" + "Name: " + monitorJSON["name"] + " \n" + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"]
+                        }
+                    ]
+                }
+                await axios.post(lineAPIUrl, upMessage, config)
+            }
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+    }
+}
+
+module.exports = Line;

server/notification-providers/lunasea.js

@@ -0,0 +1,48 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const { DOWN, UP } = require("../../src/util");
+
+class LunaSea extends NotificationProvider {
+
+    name = "lunasea";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        let lunaseadevice = "https://notify.lunasea.app/v1/custom/device/" + notification.lunaseaDevice
+
+        try {
+            if (heartbeatJSON == null) {
+                let testdata = {
+                    "title": "Uptime Kuma Alert",
+                    "body": "Testing Successful.",
+                }
+                await axios.post(lunaseadevice, testdata)
+                return okMsg;
+            }
+
+            if (heartbeatJSON["status"] == DOWN) {
+                let downdata = {
+                    "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                    "body": "[🔴 Down] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
+                }
+                await axios.post(lunaseadevice, downdata)
+                return okMsg;
+            }
+
+            if (heartbeatJSON["status"] == UP) {
+                let updata = {
+                    "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                    "body": "[✅ Up] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
+                }
+                await axios.post(lunaseadevice, updata)
+                return okMsg;
+            }
+
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+
+    }
+}
+
+module.exports = LunaSea;

server/notification-providers/mattermost.js

@@ -0,0 +1,123 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const { DOWN, UP } = require("../../src/util");
+
+class Mattermost extends NotificationProvider {
+
+    name = "mattermost";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        try {
+            const mattermostUserName = notification.mattermostusername || "Uptime Kuma";
+            // If heartbeatJSON is null, assume we're testing.
+            if (heartbeatJSON == null) {
+                let mattermostTestData = {
+                    username: mattermostUserName,
+                    text: msg,
+                }
+                await axios.post(notification.mattermostWebhookUrl, mattermostTestData)
+                return okMsg;
+            }
+
+            const mattermostChannel = notification.mattermostchannel;
+            const mattermostIconEmoji = notification.mattermosticonemo;
+            const mattermostIconUrl = notification.mattermosticonurl;
+
+            if (heartbeatJSON["status"] == DOWN) {
+                let mattermostdowndata = {
+                    username: mattermostUserName,
+                    text: "Uptime Kuma Alert",
+                    channel: mattermostChannel,
+                    icon_emoji: mattermostIconEmoji,
+                    icon_url: mattermostIconUrl,
+                    attachments: [
+                        {
+                            fallback:
+                                "Your " +
+                                monitorJSON["name"] +
+                                " service went down.",
+                            color: "#FF0000",
+                            title:
+                                "❌ " +
+                                monitorJSON["name"] +
+                                " service went down. ❌",
+                            title_link: monitorJSON["url"],
+                            fields: [
+                                {
+                                    short: true,
+                                    title: "Service Name",
+                                    value: monitorJSON["name"],
+                                },
+                                {
+                                    short: true,
+                                    title: "Time (UTC)",
+                                    value: heartbeatJSON["time"],
+                                },
+                                {
+                                    short: false,
+                                    title: "Error",
+                                    value: heartbeatJSON["msg"],
+                                },
+                            ],
+                        },
+                    ],
+                };
+                await axios.post(
+                    notification.mattermostWebhookUrl,
+                    mattermostdowndata
+                );
+                return okMsg;
+            } else if (heartbeatJSON["status"] == UP) {
+                let mattermostupdata = {
+                    username: mattermostUserName,
+                    text: "Uptime Kuma Alert",
+                    channel: mattermostChannel,
+                    icon_emoji: mattermostIconEmoji,
+                    icon_url: mattermostIconUrl,
+                    attachments: [
+                        {
+                            fallback:
+                                "Your " +
+                                monitorJSON["name"] +
+                                " service went up!",
+                            color: "#32CD32",
+                            title:
+                                "✅ " +
+                                monitorJSON["name"] +
+                                " service went up! ✅",
+                            title_link: monitorJSON["url"],
+                            fields: [
+                                {
+                                    short: true,
+                                    title: "Service Name",
+                                    value: monitorJSON["name"],
+                                },
+                                {
+                                    short: true,
+                                    title: "Time (UTC)",
+                                    value: heartbeatJSON["time"],
+                                },
+                                {
+                                    short: false,
+                                    title: "Ping",
+                                    value: heartbeatJSON["ping"] + "ms",
+                                },
+                            ],
+                        },
+                    ],
+                };
+                await axios.post(
+                    notification.mattermostWebhookUrl,
+                    mattermostupdata
+                );
+                return okMsg;
+            }
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+
+    }
+}
+
+module.exports = Mattermost;

server/notification-providers/notification-provider.js

@@ -0,0 +1,36 @@
+class NotificationProvider {
+
+    /**
+     * Notification Provider Name
+     * @type string
+     */
+    name = undefined;
+
+    /**
+     * @param notification : BeanModel
+     * @param msg : string General Message
+     * @param monitorJSON : object Monitor details (For Up/Down only)
+     * @param heartbeatJSON : object Heartbeat details (For Up/Down only)
+     * @returns {Promise<string>} Return Successful Message
+     * Throw Error with fail msg
+     */
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        throw new Error("Have to override Notification.send(...)");
+    }
+
+    throwGeneralAxiosError(error) {
+        let msg = "Error: " + error + " ";
+
+        if (error.response && error.response.data) {
+            if (typeof error.response.data === "string") {
+                msg += error.response.data;
+            } else {
+                msg += JSON.stringify(error.response.data)
+            }
+        }
+
+        throw new Error(msg)
+    }
+}
+
+module.exports = NotificationProvider;

server/notification-providers/octopush.js

@@ -0,0 +1,40 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Octopush extends NotificationProvider {
+
+    name = "octopush";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            let config = {
+                headers: {
+                    "api-key": notification.octopushAPIKey,
+                    "api-login": notification.octopushLogin,
+                    "cache-control": "no-cache"
+                }
+            };
+            let data = {
+                "recipients": [
+                    {
+                        "phone_number": notification.octopushPhoneNumber
+                    }
+                ],
+                //octopush not supporting non ascii char
+                "text": msg.replace(/[^\x00-\x7F]/g, ""),
+                "type": notification.octopushSMSType,
+                "purpose": "alert",
+                "sender": notification.octopushSenderName
+            };
+
+            await axios.post("https://api.octopush.com/v1/public/sms-campaign/send", data, config)
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = Octopush;

server/notification-providers/pushbullet.js

@@ -0,0 +1,50 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+const { DOWN, UP } = require("../../src/util");
+
+class Pushbullet extends NotificationProvider {
+
+    name = "pushbullet";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            let pushbulletUrl = "https://api.pushbullet.com/v2/pushes";
+            let config = {
+                headers: {
+                    "Access-Token": notification.pushbulletAccessToken,
+                    "Content-Type": "application/json"
+                }
+            };
+            if (heartbeatJSON == null) {
+                let testdata = {
+                    "type": "note",
+                    "title": "Uptime Kuma Alert",
+                    "body": "Testing Successful.",
+                }
+                await axios.post(pushbulletUrl, testdata, config)
+            } else if (heartbeatJSON["status"] == DOWN) {
+                let downdata = {
+                    "type": "note",
+                    "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                    "body": "[🔴 Down] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
+                }
+                await axios.post(pushbulletUrl, downdata, config)
+            } else if (heartbeatJSON["status"] == UP) {
+                let updata = {
+                    "type": "note",
+                    "title": "UptimeKuma Alert: " + monitorJSON["name"],
+                    "body": "[✅ Up] " + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"],
+                }
+                await axios.post(pushbulletUrl, updata, config)
+            }
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+    }
+}
+
+module.exports = Pushbullet;

server/notification-providers/pushover.js

@@ -0,0 +1,49 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Pushover extends NotificationProvider {
+
+    name = "pushover";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        let pushoverlink = "https://api.pushover.net/1/messages.json"
+
+        try {
+            if (heartbeatJSON == null) {
+                let data = {
+                    "message": "<b>Uptime Kuma Pushover testing successful.</b>",
+                    "user": notification.pushoveruserkey,
+                    "token": notification.pushoverapptoken,
+                    "sound": notification.pushoversounds,
+                    "priority": notification.pushoverpriority,
+                    "title": notification.pushovertitle,
+                    "retry": "30",
+                    "expire": "3600",
+                    "html": 1,
+                }
+                await axios.post(pushoverlink, data)
+                return okMsg;
+            }
+
+            let data = {
+                "message": "<b>Uptime Kuma Alert</b>\n\n<b>Message</b>:" + msg + "\n<b>Time (UTC)</b>:" + heartbeatJSON["time"],
+                "user": notification.pushoveruserkey,
+                "token": notification.pushoverapptoken,
+                "sound": notification.pushoversounds,
+                "priority": notification.pushoverpriority,
+                "title": notification.pushovertitle,
+                "retry": "30",
+                "expire": "3600",
+                "html": 1,
+            }
+            await axios.post(pushoverlink, data)
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+
+    }
+}
+
+module.exports = Pushover;

server/notification-providers/pushy.js

@@ -0,0 +1,30 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Pushy extends NotificationProvider {
+
+    name = "pushy";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            await axios.post(`https://api.pushy.me/push?api_key=${notification.pushyAPIKey}`, {
+                "to": notification.pushyToken,
+                "data": {
+                    "message": "Uptime-Kuma"
+                },
+                "notification": {
+                    "body": msg,
+                    "badge": 1,
+                    "sound": "ping.aiff"
+                }
+            })
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+    }
+}
+
+module.exports = Pushy;

server/notification-providers/rocket-chat.js

@@ -0,0 +1,46 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class RocketChat extends NotificationProvider {
+
+    name = "rocket.chat";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        try {
+            if (heartbeatJSON == null) {
+                let data = {
+                    "text": "Uptime Kuma Rocket.chat testing successful.",
+                    "channel": notification.rocketchannel,
+                    "username": notification.rocketusername,
+                    "icon_emoji": notification.rocketiconemo,
+                }
+                await axios.post(notification.rocketwebhookURL, data)
+                return okMsg;
+            }
+
+            const time = heartbeatJSON["time"];
+            let data = {
+                "text": "Uptime Kuma Alert",
+                "channel": notification.rocketchannel,
+                "username": notification.rocketusername,
+                "icon_emoji": notification.rocketiconemo,
+                "attachments": [
+                    {
+                        "title": "Uptime Kuma Alert *Time (UTC)*\n" + time,
+                        "title_link": notification.rocketbutton,
+                        "text": "*Message*\n" + msg,
+                        "color": "#32cd32"
+                    }
+                ]
+            }
+            await axios.post(notification.rocketwebhookURL, data)
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+
+    }
+}
+
+module.exports = RocketChat;

server/notification-providers/signal.js

@@ -0,0 +1,27 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Signal extends NotificationProvider {
+
+    name = "signal";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            let data = {
+                "message": msg,
+                "number": notification.signalNumber,
+                "recipients": notification.signalRecipients.replace(/\s/g, "").split(","),
+            };
+            let config = {};
+
+            await axios.post(notification.signalURL, data, config)
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+    }
+}
+
+module.exports = Signal;

server/notification-providers/slack.js

@@ -0,0 +1,70 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Slack extends NotificationProvider {
+
+    name = "slack";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+        try {
+            if (heartbeatJSON == null) {
+                let data = {
+                    "text": "Uptime Kuma Slack testing successful.",
+                    "channel": notification.slackchannel,
+                    "username": notification.slackusername,
+                    "icon_emoji": notification.slackiconemo,
+                }
+                await axios.post(notification.slackwebhookURL, data)
+                return okMsg;
+            }
+
+            const time = heartbeatJSON["time"];
+            let data = {
+                "text": "Uptime Kuma Alert",
+                "channel": notification.slackchannel,
+                "username": notification.slackusername,
+                "icon_emoji": notification.slackiconemo,
+                "blocks": [{
+                    "type": "header",
+                    "text": {
+                        "type": "plain_text",
+                        "text": "Uptime Kuma Alert",
+                    },
+                },
+                {
+                    "type": "section",
+                    "fields": [{
+                        "type": "mrkdwn",
+                        "text": "*Message*\n" + msg,
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": "*Time (UTC)*\n" + time,
+                    }],
+                },
+                {
+                    "type": "actions",
+                    "elements": [
+                        {
+                            "type": "button",
+                            "text": {
+                                "type": "plain_text",
+                                "text": "Visit Uptime Kuma",
+                            },
+                            "value": "Uptime-Kuma",
+                            "url": notification.slackbutton || "https://github.com/louislam/uptime-kuma",
+                        },
+                    ],
+                }],
+            }
+            await axios.post(notification.slackwebhookURL, data)
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+
+    }
+}
+
+module.exports = Slack;

server/notification-providers/smtp.js

@@ -0,0 +1,48 @@
+const nodemailer = require("nodemailer");
+const NotificationProvider = require("./notification-provider");
+
+class SMTP extends NotificationProvider {
+
+    name = "smtp";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+
+        const config = {
+            host: notification.smtpHost,
+            port: notification.smtpPort,
+            secure: notification.smtpSecure,
+        };
+
+        // Should fix the issue in https://github.com/louislam/uptime-kuma/issues/26#issuecomment-896373904
+        if (notification.smtpUsername || notification.smtpPassword) {
+            config.auth = {
+                user: notification.smtpUsername,
+                pass: notification.smtpPassword,
+            };
+        }
+
+        let transporter = nodemailer.createTransport(config);
+
+        let bodyTextContent = msg;
+        if (heartbeatJSON) {
+            bodyTextContent = `${msg}\nTime (UTC): ${heartbeatJSON["time"]}`;
+        }
+
+        // send mail with defined transport object
+        await transporter.sendMail({
+            from: notification.smtpFrom,
+            cc: notification.smtpCC,
+            bcc: notification.smtpBCC,
+            to: notification.smtpTo,
+            subject: msg,
+            text: bodyTextContent,
+            tls: {
+                rejectUnauthorized: notification.smtpIgnoreTLSError || false,
+            },
+        });
+
+        return "Sent Successfully.";
+    }
+}
+
+module.exports = SMTP;

server/notification-providers/teams.js

@@ -0,0 +1,124 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const { DOWN, UP } = require("../../src/util");
+
+class Teams extends NotificationProvider {
+    name = "teams";
+
+    _statusMessageFactory = (status, monitorName) => {
+        if (status === DOWN) {
+            return `🔴 Application [${monitorName}] went down`;
+        } else if (status === UP) {
+            return `✅ Application [${monitorName}] is back online`;
+        }
+        return "Notification";
+    };
+
+    _getThemeColor = (status) => {
+        if (status === DOWN) {
+            return "ff0000";
+        }
+        if (status === UP) {
+            return "00e804";
+        }
+        return "008cff";
+    };
+
+    _notificationPayloadFactory = ({
+        status,
+        monitorMessage,
+        monitorName,
+        monitorUrl,
+    }) => {
+        const notificationMessage = this._statusMessageFactory(
+            status,
+            monitorName
+        );
+
+        const facts = [];
+
+        if (monitorName) {
+            facts.push({
+                name: "Monitor",
+                value: monitorName,
+            });
+        }
+
+        if (monitorUrl) {
+            facts.push({
+                name: "URL",
+                value: monitorUrl,
+            });
+        }
+
+        return {
+            "@context": "https://schema.org/extensions",
+            "@type": "MessageCard",
+            themeColor: this._getThemeColor(status),
+            summary: notificationMessage,
+            sections: [
+                {
+                    activityImage:
+                        "https://raw.githubusercontent.com/louislam/uptime-kuma/master/public/icon.png",
+                    activityTitle: "**Uptime Kuma**",
+                },
+                {
+                    activityTitle: notificationMessage,
+                },
+                {
+                    activityTitle: "**Description**",
+                    text: monitorMessage,
+                    facts,
+                },
+            ],
+        };
+    };
+
+    _sendNotification = async (webhookUrl, payload) => {
+        await axios.post(webhookUrl, payload);
+    };
+
+    _handleGeneralNotification = (webhookUrl, msg) => {
+        const payload = this._notificationPayloadFactory({
+            monitorMessage: msg
+        });
+
+        return this._sendNotification(webhookUrl, payload);
+    };
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            if (heartbeatJSON == null) {
+                await this._handleGeneralNotification(notification.webhookUrl, msg);
+                return okMsg;
+            }
+
+            let url;
+
+            if (monitorJSON["type"] === "port") {
+                url = monitorJSON["hostname"];
+                if (monitorJSON["port"]) {
+                    url += ":" + monitorJSON["port"];
+                }
+            } else {
+                url = monitorJSON["url"];
+            }
+
+            const payload = this._notificationPayloadFactory({
+                monitorMessage: heartbeatJSON.msg,
+                monitorName: monitorJSON.name,
+                monitorUrl: url,
+                status: heartbeatJSON.status,
+            });
+
+            await this._sendNotification(notification.webhookUrl, payload);
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = Teams;

server/notification-providers/telegram.js

@@ -0,0 +1,27 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class Telegram extends NotificationProvider {
+
+    name = "telegram";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            await axios.get(`https://api.telegram.org/bot${notification.telegramBotToken}/sendMessage`, {
+                params: {
+                    chat_id: notification.telegramChatID,
+                    text: msg,
+                },
+            })
+            return okMsg;
+
+        } catch (error) {
+            let msg = (error.response.data.description) ? error.response.data.description : "Error without description"
+            throw new Error(msg)
+        }
+    }
+}
+
+module.exports = Telegram;

server/notification-providers/webhook.js

@@ -0,0 +1,44 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const FormData = require("form-data");
+
+class Webhook extends NotificationProvider {
+
+    name = "webhook";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully. ";
+
+        try {
+            let data = {
+                heartbeat: heartbeatJSON,
+                monitor: monitorJSON,
+                msg,
+            };
+            let finalData;
+            let config = {};
+
+            if (notification.webhookContentType === "form-data") {
+                finalData = new FormData();
+                finalData.append("data", JSON.stringify(data));
+
+                config = {
+                    headers: finalData.getHeaders(),
+                }
+
+            } else {
+                finalData = data;
+            }
+
+            await axios.post(notification.webhookURL, finalData, config)
+            return okMsg;
+
+        } catch (error) {
+            this.throwGeneralAxiosError(error)
+        }
+
+    }
+
+}
+
+module.exports = Webhook;

server/notification.js

@@ -1,443 +1,77 @@
-const axios = require("axios");
 const { R } = require("redbean-node");
-const FormData = require("form-data");
-const nodemailer = require("nodemailer");
-const child_process = require("child_process");
+const Apprise = require("./notification-providers/apprise");
+const Discord = require("./notification-providers/discord");
+const Gotify = require("./notification-providers/gotify");
+const Line = require("./notification-providers/line");
+const LunaSea = require("./notification-providers/lunasea");
+const Mattermost = require("./notification-providers/mattermost");
+const Octopush = require("./notification-providers/octopush");
+const Pushbullet = require("./notification-providers/pushbullet");
+const Pushover = require("./notification-providers/pushover");
+const Pushy = require("./notification-providers/pushy");
+const RocketChat = require("./notification-providers/rocket-chat");
+const Signal = require("./notification-providers/signal");
+const Slack = require("./notification-providers/slack");
+const SMTP = require("./notification-providers/smtp");
+const Teams = require("./notification-providers/teams");
+const Telegram = require("./notification-providers/telegram");
+const Webhook = require("./notification-providers/webhook");
 
 class Notification {
 
+    providerList = {};
+
+    static init() {
+        console.log("Prepare Notification Providers");
+
+        this.providerList = {};
+
+        const list = [
+            new Apprise(),
+            new Discord(),
+            new Teams(),
+            new Gotify(),
+            new Line(),
+            new LunaSea(),
+            new Mattermost(),
+            new Octopush(),
+            new Pushbullet(),
+            new Pushover(),
+            new Pushy(),
+            new RocketChat(),
+            new Signal(),
+            new Slack(),
+            new SMTP(),
+            new Telegram(),
+            new Webhook(),
+        ];
+
+        for (let item of list) {
+            if (! item.name) {
+                throw new Error("Notification provider without name");
+            }
+
+            if (this.providerList[item.name]) {
+                throw new Error("Duplicate notification provider name");
+            }
+            this.providerList[item.name] = item;
+        }
+    }
+
     /**
      *
-     * @param notification
-     * @param msg
-     * @param monitorJSON
-     * @param heartbeatJSON
+     * @param notification : BeanModel
+     * @param msg : string General Message
+     * @param monitorJSON : object Monitor details (For Up/Down only)
+     * @param heartbeatJSON : object Heartbeat details (For Up/Down only)
      * @returns {Promise<string>} Successful msg
      * Throw Error with fail msg
      */
     static async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
-
-        if (notification.type === "telegram") {
-            try {
-                await axios.get(`https://api.telegram.org/bot${notification.telegramBotToken}/sendMessage`, {
-                    params: {
-                        chat_id: notification.telegramChatID,
-                        text: msg,
-                    },
-                })
-                return okMsg;
-
-            } catch (error) {
-                let msg = (error.response.data.description) ? error.response.data.description : "Error without description"
-                throw new Error(msg)
-            }
-
-        } else if (notification.type === "gotify") {
-            try {
-                if (notification.gotifyserverurl && notification.gotifyserverurl.endsWith("/")) {
-                    notification.gotifyserverurl = notification.gotifyserverurl.slice(0, -1);
-                }
-                await axios.post(`${notification.gotifyserverurl}/message?token=${notification.gotifyapplicationToken}`, {
-                    "message": msg,
-                    "priority": notification.gotifyPriority || 8,
-                    "title": "Uptime-Kuma",
-                })
-
-                return okMsg;
-
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "webhook") {
-            try {
-                let data = {
-                    heartbeat: heartbeatJSON,
-                    monitor: monitorJSON,
-                    msg,
-                };
-                let finalData;
-                let config = {};
-
-                if (notification.webhookContentType === "form-data") {
-                    finalData = new FormData();
-                    finalData.append("data", JSON.stringify(data));
-
-                    config = {
-                        headers: finalData.getHeaders(),
-                    }
-
-                } else {
-                    finalData = data;
-                }
-
-                await axios.post(notification.webhookURL, finalData, config)
-                return okMsg;
-
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "smtp") {
-            return await Notification.smtp(notification, msg)
-
-        } else if (notification.type === "discord") {
-            try {
-                const discordDisplayName = notification.discordUsername || "Uptime Kuma";
-
-                // If heartbeatJSON is null, assume we're testing.
-                if (heartbeatJSON == null) {
-                    let discordtestdata = {
-                        username: discordDisplayName,
-                        content: msg,
-                    }
-                    await axios.post(notification.discordWebhookUrl, discordtestdata)
-                    return okMsg;
-                }
-                // If heartbeatJSON is not null, we go into the normal alerting loop.
-                if (heartbeatJSON["status"] == 0) {
-                    let discorddowndata = {
-                        username: discordDisplayName,
-                        embeds: [{
-                            title: "❌ One of your services went down. ❌",
-                            color: 16711680,
-                            timestamp: heartbeatJSON["time"],
-                            fields: [
-                                {
-                                    name: "Service Name",
-                                    value: monitorJSON["name"],
-                                },
-                                {
-                                    name: "Service URL",
-                                    value: monitorJSON["url"],
-                                },
-                                {
-                                    name: "Time (UTC)",
-                                    value: heartbeatJSON["time"],
-                                },
-                                {
-                                    name: "Error",
-                                    value: heartbeatJSON["msg"],
-                                },
-                            ],
-                        }],
-                    }
-                    await axios.post(notification.discordWebhookUrl, discorddowndata)
-                    return okMsg;
-
-                } else if (heartbeatJSON["status"] == 1) {
-                    let discordupdata = {
-                        username: discordDisplayName,
-                        embeds: [{
-                            title: "✅ Your service " + monitorJSON["name"] + " is up! ✅",
-                            color: 65280,
-                            timestamp: heartbeatJSON["time"],
-                            fields: [
-                                {
-                                    name: "Service Name",
-                                    value: monitorJSON["name"],
-                                },
-                                {
-                                    name: "Service URL",
-                                    value: "[Visit Service](" + monitorJSON["url"] + ")",
-                                },
-                                {
-                                    name: "Time (UTC)",
-                                    value: heartbeatJSON["time"],
-                                },
-                                {
-                                    name: "Ping",
-                                    value: heartbeatJSON["ping"] + "ms",
-                                },
-                            ],
-                        }],
-                    }
-                    await axios.post(notification.discordWebhookUrl, discordupdata)
-                    return okMsg;
-                }
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "signal") {
-            try {
-                let data = {
-                    "message": msg,
-                    "number": notification.signalNumber,
-                    "recipients": notification.signalRecipients.replace(/\s/g, "").split(","),
-                };
-                let config = {};
-
-                await axios.post(notification.signalURL, data, config)
-                return okMsg;
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "pushy") {
-            try {
-                await axios.post(`https://api.pushy.me/push?api_key=${notification.pushyAPIKey}`, {
-                    "to": notification.pushyToken,
-                    "data": {
-                        "message": "Uptime-Kuma"
-                    },
-                    "notification": {
-                        "body": msg,
-                        "badge": 1,
-                        "sound": "ping.aiff"
-                    }
-                })
-                return true;
-            } catch (error) {
-                console.log(error)
-                return false;
-            }
-        } else if (notification.type === "octopush") {
-            try {
-                let config = {
-                    headers: {
-                        "api-key": notification.octopushAPIKey,
-                        "api-login": notification.octopushLogin,
-                        "cache-control": "no-cache"
-                    }
-                };
-                let data = {
-                    "recipients": [
-                        {
-                            "phone_number": notification.octopushPhoneNumber
-                        }
-                    ],
-                    //octopush not supporting non ascii char
-                    "text": msg.replace(/[^\x00-\x7F]/g, ""),
-                    "type": notification.octopushSMSType,
-                    "purpose": "alert",
-                    "sender": notification.octopushSenderName
-                };
-
-                await axios.post("https://api.octopush.com/v1/public/sms-campaign/send", data, config)
-                return true;
-            } catch (error) {
-                console.log(error)
-                return false;
-            }
-        } else if (notification.type === "slack") {
-            try {
-                if (heartbeatJSON == null) {
-                    let data = {
-                        "text": "Uptime Kuma Slack testing successful.",
-                        "channel": notification.slackchannel,
-                        "username": notification.slackusername,
-                        "icon_emoji": notification.slackiconemo,
-                    }
-                    await axios.post(notification.slackwebhookURL, data)
-                    return okMsg;
-                }
-
-                const time = heartbeatJSON["time"];
-                let data = {
-                    "text": "Uptime Kuma Alert",
-                    "channel": notification.slackchannel,
-                    "username": notification.slackusername,
-                    "icon_emoji": notification.slackiconemo,
-                    "blocks": [{
-                        "type": "header",
-                        "text": {
-                            "type": "plain_text",
-                            "text": "Uptime Kuma Alert",
-                        },
-                    },
-                    {
-                        "type": "section",
-                        "fields": [{
-                            "type": "mrkdwn",
-                            "text": "*Message*\n" + msg,
-                        },
-                        {
-                            "type": "mrkdwn",
-                            "text": "*Time (UTC)*\n" + time,
-                        }],
-                    },
-                    {
-                        "type": "actions",
-                        "elements": [
-                            {
-                                "type": "button",
-                                "text": {
-                                    "type": "plain_text",
-                                    "text": "Visit Uptime Kuma",
-                                },
-                                "value": "Uptime-Kuma",
-                                "url": notification.slackbutton || "https://github.com/louislam/uptime-kuma",
-                            },
-                        ],
-                    }],
-                }
-                await axios.post(notification.slackwebhookURL, data)
-                return okMsg;
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "pushover") {
-            let pushoverlink = "https://api.pushover.net/1/messages.json"
-            try {
-                if (heartbeatJSON == null) {
-                    let data = {
-                        "message": "<b>Uptime Kuma Pushover testing successful.</b>",
-                        "user": notification.pushoveruserkey,
-                        "token": notification.pushoverapptoken,
-                        "sound": notification.pushoversounds,
-                        "priority": notification.pushoverpriority,
-                        "title": notification.pushovertitle,
-                        "retry": "30",
-                        "expire": "3600",
-                        "html": 1,
-                    }
-                    await axios.post(pushoverlink, data)
-                    return okMsg;
-                }
-
-                let data = {
-                    "message": "<b>Uptime Kuma Alert</b>\n\n<b>Message</b>:" + msg + "\n<b>Time (UTC)</b>:" + heartbeatJSON["time"],
-                    "user": notification.pushoveruserkey,
-                    "token": notification.pushoverapptoken,
-                    "sound": notification.pushoversounds,
-                    "priority": notification.pushoverpriority,
-                    "title": notification.pushovertitle,
-                    "retry": "30",
-                    "expire": "3600",
-                    "html": 1,
-                }
-                await axios.post(pushoverlink, data)
-                return okMsg;
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "apprise") {
-
-            return Notification.apprise(notification, msg)
-
-        } else if (notification.type === "lunasea") {
-            let lunaseadevice = "https://notify.lunasea.app/v1/custom/device/" + notification.lunaseaDevice
-
-            try {
-                if (heartbeatJSON == null) {
-                    let testdata = {
-                        "title": "Uptime Kuma Alert",
-                        "body": "Testing Successful.",
-                    }
-                    await axios.post(lunaseadevice, testdata)
-                    return okMsg;
-                }
-
-                if (heartbeatJSON["status"] == 0) {
-                    let downdata = {
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
-                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
-                    }
-                    await axios.post(lunaseadevice, downdata)
-                    return okMsg;
-                }
-
-                if (heartbeatJSON["status"] == 1) {
-                    let updata = {
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
-                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
-                    }
-                    await axios.post(lunaseadevice, updata)
-                    return okMsg;
-                }
-
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-
-        } else if (notification.type === "pushbullet") {
-            try {
-                let pushbulletUrl = "https://api.pushbullet.com/v2/pushes";
-                let config = {
-                    headers: {
-                        "Access-Token": notification.pushbulletAccessToken,
-                        "Content-Type": "application/json"
-                    }
-                };
-                if (heartbeatJSON == null) {
-                    let testdata = {
-                        "type": "note",
-                        "title": "Uptime Kuma Alert",
-                        "body": "Testing Successful.",
-                    }
-                    await axios.post(pushbulletUrl, testdata, config)
-                } else if (heartbeatJSON["status"] == 0) {
-                    let downdata = {
-                        "type": "note",
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
-                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
-                    }
-                    await axios.post(pushbulletUrl, downdata, config)
-                } else if (heartbeatJSON["status"] == 1) {
-                    let updata = {
-                        "type": "note",
-                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
-                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
-                    }
-                    await axios.post(pushbulletUrl, updata, config)
-                }
-                return okMsg;
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
-        } else if (notification.type === "line") {
-            try {
-                let lineAPIUrl = "https://api.line.me/v2/bot/message/push";
-                let config = {
-                    headers: {
-                        "Content-Type": "application/json",
-                        "Authorization": "Bearer " + notification.lineChannelAccessToken
-                    }
-                };
-                if (heartbeatJSON == null) {
-                    let testMessage = {
-                        "to": notification.lineUserID,
-                        "messages": [
-                            {
-                                "type": "text",
-                                "text":"Test Successful!"
-                            }
-                        ]
-                    }
-                    await axios.post(lineAPIUrl, testMessage, config)
-                } else if (heartbeatJSON["status"] == 0) {
-                    let downMessage = {
-                        "to": notification.lineUserID,
-                        "messages": [
-                            {
-                                "type": "text",
-                                "text":"UptimeKuma Alert: [🔴 Down]\n" + "Name: " + monitorJSON["name"] + " \n" + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"]
-                            }
-                        ]
-                    }
-                    await axios.post(lineAPIUrl, downMessage, config)
-                } else if (heartbeatJSON["status"] == 1) {
-                    let upMessage = {
-                        "to": notification.lineUserID,
-                        "messages": [
-                            {
-                                "type": "text",
-                                "text":"UptimeKuma Alert: [✅ Up]\n"  + "Name: " +  monitorJSON["name"] + " \n" + heartbeatJSON["msg"] + "\nTime (UTC): " + heartbeatJSON["time"]
-                            }
-                        ]
-                    }
-                    await axios.post(lineAPIUrl, upMessage, config)
-                }
-                return okMsg;
-            } catch (error) {
-                throwGeneralAxiosError(error)
-            }
+        if (this.providerList[notification.type]) {
+            return this.providerList[notification.type].send(notification, msg, monitorJSON, heartbeatJSON);
         } else {
-            throw new Error("Notification type is not supported")
+            throw new Error("Notification type is not supported");
         }
     }
 
@@ -460,8 +94,15 @@ class Notification {
 
         bean.name = notification.name;
         bean.user_id = userID;
-        bean.config = JSON.stringify(notification)
+        bean.config = JSON.stringify(notification);
+        bean.is_default = notification.isDefault || false;
         await R.store(bean)
+
+        if (notification.applyExisting) {
+            await applyNotificationEveryMonitor(bean.id, userID);
+        }
+
+        return bean;
     }
 
     static async delete(notificationID, userID) {
@@ -477,52 +118,6 @@ class Notification {
         await R.trash(bean)
     }
 
-    static async smtp(notification, msg) {
-
-        const config = {
-            host: notification.smtpHost,
-            port: notification.smtpPort,
-            secure: notification.smtpSecure,
-        };
-
-        // Should fix the issue in https://github.com/louislam/uptime-kuma/issues/26#issuecomment-896373904
-        if (notification.smtpUsername || notification.smtpPassword) {
-            config.auth = {
-                user: notification.smtpUsername,
-                pass: notification.smtpPassword,
-            };
-        }
-
-        let transporter = nodemailer.createTransport(config);
-
-        // send mail with defined transport object
-        await transporter.sendMail({
-            from: `"Uptime Kuma" <${notification.smtpFrom}>`,
-            to: notification.smtpTo,
-            subject: msg,
-            text: msg,
-        });
-
-        return "Sent Successfully.";
-    }
-
-    static async apprise(notification, msg) {
-        let s = child_process.spawnSync("apprise", [ "-vv", "-b", msg, notification.appriseURL])
-
-        let output = (s.stdout) ? s.stdout.toString() : "ERROR: maybe apprise not found";
-
-        if (output) {
-
-            if (! output.includes("ERROR")) {
-                return "Sent Successfully";
-            }
-
-            throw new Error(output)
-        } else {
-            return ""
-        }
-    }
-
     static checkApprise() {
         let commandExistsSync = require("command-exists").sync;
         let exists = commandExistsSync("apprise");
@@ -531,18 +126,24 @@ class Notification {
 
 }
 
-function throwGeneralAxiosError(error) {
-    let msg = "Error: " + error + " ";
+async function applyNotificationEveryMonitor(notificationID, userID) {
+    let monitors = await R.getAll("SELECT id FROM monitor WHERE user_id = ?", [
+        userID
+    ]);
 
-    if (error.response && error.response.data) {
-        if (typeof error.response.data === "string") {
-            msg += error.response.data;
-        } else {
-            msg += JSON.stringify(error.response.data)
+    for (let i = 0; i < monitors.length; i++) {
+        let checkNotification = await R.findOne("monitor_notification", " monitor_id = ? AND notification_id = ? ", [
+            monitors[i].id,
+            notificationID,
+        ])
+
+        if (! checkNotification) {
+            let relation = R.dispense("monitor_notification");
+            relation.monitor_id = monitors[i].id;
+            relation.notification_id = notificationID;
+            await R.store(relation)
         }
     }
-
-    throw new Error(msg)
 }
 
 module.exports = {

server/password-hash.js

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

server/ping-lite.js

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

server/routers/api-router.js

@@ -0,0 +1,151 @@
+let express = require("express");
+const { allowDevAllOrigin, getSettings, setting } = require("../util-server");
+const { R } = require("redbean-node");
+const server = require("../server");
+const apicache = require("../modules/apicache");
+const Monitor = require("../model/monitor");
+let router = express.Router();
+
+let cache = apicache.middleware;
+
+router.get("/api/entry-page", async (_, response) => {
+    allowDevAllOrigin(response);
+    response.json(server.entryPage);
+});
+
+// Status Page Config
+router.get("/api/status-page/config", async (_request, response) => {
+    allowDevAllOrigin(response);
+
+    let config = await getSettings("statusPage");
+
+    if (! config.statusPageTheme) {
+        config.statusPageTheme = "light";
+    }
+
+    if (! config.statusPagePublished) {
+        config.statusPagePublished = true;
+    }
+
+    if (! config.title) {
+        config.title = "Uptime Kuma";
+    }
+
+    response.json(config);
+});
+
+// Status Page - Get the current Incident
+// Can fetch only if published
+router.get("/api/status-page/incident", async (_, response) => {
+    allowDevAllOrigin(response);
+
+    try {
+        await checkPublished();
+
+        let incident = await R.findOne("incident", " pin = 1 AND active = 1");
+
+        if (incident) {
+            incident = incident.toPublicJSON();
+        }
+
+        response.json({
+            ok: true,
+            incident,
+        });
+
+    } catch (error) {
+        send403(response, error.message);
+    }
+});
+
+// Status Page - Monitor List
+// Can fetch only if published
+router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, response) => {
+    allowDevAllOrigin(response);
+
+    try {
+        await checkPublished();
+        const publicGroupList = [];
+        let list = await R.find("group", " public = 1 ORDER BY weight ");
+
+        for (let groupBean of list) {
+            publicGroupList.push(await groupBean.toPublicJSON());
+        }
+
+        response.json(publicGroupList);
+
+    } catch (error) {
+        send403(response, error.message);
+    }
+});
+
+// Status Page Polling Data
+// Can fetch only if published
+router.get("/api/status-page/heartbeat", cache("5 minutes"), async (_request, response) => {
+    allowDevAllOrigin(response);
+
+    try {
+        await checkPublished();
+
+        let heartbeatList = {};
+        let uptimeList = {};
+
+        let monitorIDList = await R.getCol(`
+            SELECT monitor_group.monitor_id FROM monitor_group, \`group\`
+            WHERE monitor_group.group_id = \`group\`.id
+            AND public = 1
+        `);
+
+        for (let monitorID of monitorIDList) {
+            let list = await R.getAll(`
+                    SELECT * FROM heartbeat
+                    WHERE monitor_id = ?
+                    ORDER BY time DESC
+                    LIMIT 50
+            `, [
+                monitorID,
+            ]);
+
+            list = R.convertToBeans("heartbeat", list);
+            heartbeatList[monitorID] = list.reverse().map(row => row.toPublicJSON());
+
+            const type = 24;
+            uptimeList[`${monitorID}_${type}`] = await Monitor.calcUptime(type, monitorID);
+        }
+
+        response.json({
+            heartbeatList,
+            uptimeList
+        });
+
+    } catch (error) {
+        send403(response, error.message);
+    }
+});
+
+async function checkPublished() {
+    if (! await isPublished()) {
+        throw new Error("The status page is not published");
+    }
+}
+
+/**
+ * Default is published
+ * @returns {Promise<boolean>}
+ */
+async function isPublished() {
+    const value = await setting("statusPagePublished");
+    if (value === null) {
+        return true;
+    }
+    return value;
+}
+
+function send403(res, msg = "") {
+    res.status(403).json({
+        "status": "fail",
+        "msg": msg,
+    });
+}
+
+module.exports = router;

server/socket-handlers/status-page-socket-handler.js

@@ -0,0 +1,161 @@
+const { R } = require("redbean-node");
+const { checkLogin, setSettings } = require("../util-server");
+const dayjs = require("dayjs");
+const { debug } = require("../../src/util");
+const ImageDataURI = require("../image-data-uri");
+const Database = require("../database");
+const apicache = require("../modules/apicache");
+
+module.exports.statusPageSocketHandler = (socket) => {
+
+    // Post or edit incident
+    socket.on("postIncident", async (incident, callback) => {
+        try {
+            checkLogin(socket);
+
+            await R.exec("UPDATE incident SET pin = 0 ");
+
+            let incidentBean;
+
+            if (incident.id) {
+                incidentBean = await R.findOne("incident", " id = ?", [
+                    incident.id
+                ]);
+            }
+
+            if (incidentBean == null) {
+                incidentBean = R.dispense("incident");
+            }
+
+            incidentBean.title = incident.title;
+            incidentBean.content = incident.content;
+            incidentBean.style = incident.style;
+            incidentBean.pin = true;
+
+            if (incident.id) {
+                incidentBean.lastUpdatedDate = R.isoDateTime(dayjs.utc());
+            } else {
+                incidentBean.createdDate = R.isoDateTime(dayjs.utc());
+            }
+
+            await R.store(incidentBean);
+
+            callback({
+                ok: true,
+                incident: incidentBean.toPublicJSON(),
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+    socket.on("unpinIncident", async (callback) => {
+        try {
+            checkLogin(socket);
+
+            await R.exec("UPDATE incident SET pin = 0 WHERE pin = 1");
+
+            callback({
+                ok: true,
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+    // Save Status Page
+    // imgDataUrl Only Accept PNG!
+    socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => {
+
+        try {
+            checkLogin(socket);
+
+            apicache.clear();
+
+            const header = "data:image/png;base64,";
+
+            // Check logo format
+            // If is image data url, convert to png file
+            // Else assume it is a url, nothing to do
+            if (imgDataUrl.startsWith("data:")) {
+                if (! imgDataUrl.startsWith(header)) {
+                    throw new Error("Only allowed PNG logo.");
+                }
+
+                // Convert to file
+                await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + "logo.png");
+                config.logo = "/upload/logo.png?t=" + Date.now();
+
+            } else {
+                config.icon = imgDataUrl;
+            }
+
+            // Save Config
+            await setSettings("statusPage", config);
+
+            // Save Public Group List
+            const groupIDList = [];
+            let groupOrder = 1;
+
+            for (let group of publicGroupList) {
+                let groupBean;
+                if (group.id) {
+                    groupBean = await R.findOne("group", " id = ? AND public = 1 ", [
+                        group.id
+                    ]);
+                } else {
+                    groupBean = R.dispense("group");
+                }
+
+                groupBean.name = group.name;
+                groupBean.public = true;
+                groupBean.weight = groupOrder++;
+
+                await R.store(groupBean);
+
+                await R.exec("DELETE FROM monitor_group WHERE group_id = ? ", [
+                    groupBean.id
+                ]);
+
+                let monitorOrder = 1;
+                console.log(group.monitorList);
+
+                for (let monitor of group.monitorList) {
+                    let relationBean = R.dispense("monitor_group");
+                    relationBean.weight = monitorOrder++;
+                    relationBean.group_id = groupBean.id;
+                    relationBean.monitor_id = monitor.id;
+                    await R.store(relationBean);
+                }
+
+                groupIDList.push(groupBean.id);
+                group.id = groupBean.id;
+            }
+
+            // Delete groups that not in the list
+            debug("Delete groups that not in the list");
+            const slots = groupIDList.map(() => "?").join(",");
+            await R.exec(`DELETE FROM \`group\` WHERE id NOT IN (${slots})`, groupIDList);
+
+            callback({
+                ok: true,
+                publicGroupList,
+            });
+
+        } catch (error) {
+            console.log(error);
+
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+};

server/util-server.js

@@ -4,6 +4,7 @@ const { R } = require("redbean-node");
 const { debug } = require("../src/util");
 const passwordHash = require("./password-hash");
 const dayjs = require("dayjs");
+const { Resolver } = require("dns");
 
 /**
  * Init or reset JWT secret
@@ -22,7 +23,7 @@ exports.initJWTSecret = async () => {
     jwtSecretBean.value = passwordHash.generate(dayjs() + "");
     await R.store(jwtSecretBean);
     return jwtSecretBean;
-}
+};
 
 exports.tcping = function (hostname, port) {
     return new Promise((resolve, reject) => {
@@ -43,7 +44,7 @@ exports.tcping = function (hostname, port) {
             resolve(Math.round(data.max));
         });
     });
-}
+};
 
 exports.ping = async (hostname) => {
     try {
@@ -56,7 +57,7 @@ exports.ping = async (hostname) => {
             throw e;
         }
     }
-}
+};
 
 exports.pingAsync = function (hostname, ipv6 = false) {
     return new Promise((resolve, reject) => {
@@ -68,13 +69,37 @@ exports.pingAsync = function (hostname, ipv6 = false) {
             if (err) {
                 reject(err);
             } else if (ms === null) {
-                reject(new Error(stdout))
+                reject(new Error(stdout));
             } else {
-                resolve(Math.round(ms))
+                resolve(Math.round(ms));
             }
         });
     });
-}
+};
+
+exports.dnsResolve = function (hostname, resolver_server, rrtype) {
+    const resolver = new Resolver();
+    resolver.setServers([resolver_server]);
+    return new Promise((resolve, reject) => {
+        if (rrtype == "PTR") {
+            resolver.reverse(hostname, (err, records) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(records);
+                }
+            });
+        } else {
+            resolver.resolve(hostname, rrtype, (err, records) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(records);
+                }
+            });
+        }
+    });
+};
 
 exports.setting = async function (key) {
     let value = await R.getCell("SELECT `value` FROM setting WHERE `key` = ? ", [
@@ -83,29 +108,29 @@ exports.setting = async function (key) {
 
     try {
         const v = JSON.parse(value);
-        debug(`Get Setting: ${key}: ${v}`)
+        debug(`Get Setting: ${key}: ${v}`);
         return v;
     } catch (e) {
         return value;
     }
-}
+};
 
 exports.setSetting = async function (key, value) {
     let bean = await R.findOne("setting", " `key` = ? ", [
         key,
-    ])
+    ]);
     if (!bean) {
-        bean = R.dispense("setting")
+        bean = R.dispense("setting");
         bean.key = key;
     }
     bean.value = JSON.stringify(value);
-    await R.store(bean)
-}
+    await R.store(bean);
+};
 
 exports.getSettings = async function (type) {
     let list = await R.getAll("SELECT `key`, `value` FROM setting WHERE `type` = ? ", [
         type,
-    ])
+    ]);
 
     let result = {};
 
@@ -118,7 +143,7 @@ exports.getSettings = async function (type) {
     }
 
     return result;
-}
+};
 
 exports.setSettings = async function (type, data) {
     let keyList = Object.keys(data);
@@ -138,12 +163,12 @@ exports.setSettings = async function (type, data) {
 
         if (bean.type === type) {
             bean.value = JSON.stringify(data[key]);
-            promiseList.push(R.store(bean))
+            promiseList.push(R.store(bean));
         }
     }
 
     await Promise.all(promiseList);
-}
+};
 
 // ssl-checker by @dyaa
 // param: res - response object from axios
@@ -193,7 +218,7 @@ exports.checkCertificate = function (res) {
         issuer,
         fingerprint,
     };
-}
+};
 
 // Check if the provided status code is within the accepted ranges
 // Param: status - the status code to check
@@ -222,4 +247,54 @@ exports.checkStatusCode = function (status, accepted_codes) {
     }
 
     return false;
-}
+};
+
+exports.getTotalClientInRoom = (io, roomName) => {
+
+    const sockets = io.sockets;
+
+    if (! sockets) {
+        return 0;
+    }
+
+    const adapter = sockets.adapter;
+
+    if (! adapter) {
+        return 0;
+    }
+
+    const room = adapter.rooms.get(roomName);
+
+    if (room) {
+        return room.size;
+    } else {
+        return 0;
+    }
+};
+
+exports.genSecret = () => {
+    let secret = "";
+    let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let charsLength = chars.length;
+    for ( let i = 0; i < 64; i++ ) {
+        secret += chars.charAt(Math.floor(Math.random() * charsLength));
+    }
+    return secret;
+};
+
+exports.allowDevAllOrigin = (res) => {
+    if (process.env.NODE_ENV === "development") {
+        exports.allowAllOrigin(res);
+    }
+};
+
+exports.allowAllOrigin = (res) => {
+    res.header("Access-Control-Allow-Origin", "*");
+    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+};
+
+exports.checkLogin = (socket) => {
+    if (! socket.userID) {
+        throw new Error("You are not logged in.");
+    }
+};

src/assets/app.scss

@@ -2,7 +2,7 @@
 @import "node_modules/bootstrap/scss/bootstrap";
 
 #app {
-    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
 }
 
 h1 {
@@ -18,7 +18,7 @@ h2 {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #CCC;
+    background: #ccc;
     border-radius: 20px;
 }
 
@@ -28,7 +28,7 @@ h2 {
 
 .modal-content {
     border-radius: 1rem;
-    box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
 
     .dark & {
         box-shadow: 0 15px 70px rgb(0 0 0);
@@ -41,10 +41,9 @@ h2 {
     text-align: center;
 }
 
-
 .shadow-box {
     //overflow: hidden;   // Forget why add this, but multiple select hide by this
-    box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
     padding: 10px;
     border-radius: 10px;
 
@@ -72,19 +71,82 @@ h2 {
     }
 }
 
+.btn-warning {
+    color: white;
 
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
+}
+
+.btn-info {
+    color: white;
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
+}
+
+@media (max-width: 550px) {
+    .table-shadow-box {
+        padding: 10px !important;
+
+        thead {
+            display: none;
+        }
+
+        tbody {
+            .shadow-box {
+                background-color: white;
+            }
+        }
+
+        tr {
+            margin-top: 0 !important;
+            padding: 4px 10px !important;
+            display: block;
+            margin-bottom: 6px;
+
+            td:first-child {
+                font-weight: bold;
+            }
+
+            td:nth-child(-n+3) {
+                text-align: center;
+            }
+
+            td:last-child {
+                text-align: left;
+            }
+
+            td {
+                border-bottom: 1px solid $dark-font-color;
+                display: block;
+                padding: 4px;
+
+                .badge {
+                    margin: auto;
+                    display: block;
+                    width: 30%;
+                }
+            }
+        }
+    }
+}
 
 // Dark Theme override here
 .dark {
-    background-color: #090C10;
+    background-color: #090c10;
     color: $dark-font-color;
 
-    &::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
         background: $dark-border-color;
     }
 
     .shadow-box {
-        background-color: $dark-bg;
+        &:not(.alert) {
+            background-color: $dark-bg;
+        }
     }
 
     .form-check-input {
@@ -92,13 +154,17 @@ h2 {
     }
 
     .form-switch .form-check-input {
-        background-color: #131a21;
+        background-color: #232f3b;
     }
 
     a,
     .table,
     .nav-link {
         color: $dark-font-color;
+
+        &.btn-info {
+            color: white;
+        }
     }
 
     .form-control,
@@ -114,7 +180,7 @@ h2 {
     }
 
     .table-hover > tbody > tr:hover {
-        --bs-table-accent-bg: #070A10;
+        --bs-table-accent-bg: #070a10;
         color: $dark-font-color;
     }
 
@@ -130,6 +196,14 @@ h2 {
         color: white;
     }
 
+    .btn-warning {
+        color: $dark-font-color2;
+
+        &:hover, &:active, &:focus, &.active {
+            color: $dark-font-color2;
+        }
+    }
+
     .btn-close {
         box-shadow: none;
         filter: invert(1);
@@ -182,6 +256,42 @@ h2 {
     .multiselect__option--selected {
         background-color: $dark-bg;
     }
+
+    .monitor-list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+
+    @media (max-width: 550px) {
+        .table-shadow-box {
+            tbody {
+                .shadow-box {
+                    background-color: $dark-bg2;
+
+                    td {
+                        border-bottom: 1px solid $dark-border-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .alert {
+        &.bg-info,
+        &.bg-warning,
+        &.bg-danger,
+        &.bg-light {
+            color: $dark-font-color2;
+        }
+    }
+
 }
 
 /*
@@ -190,13 +300,131 @@ h2 {
 
 // page-change
 .slide-fade-enter-active {
-    transition: all 0.20s $easing-in;
+    transition: all 0.2s $easing-in;
 }
+
 .slide-fade-leave-active {
-    transition: all 0.20s $easing-in;
+    transition: all 0.2s $easing-in;
 }
+
 .slide-fade-enter-from,
 .slide-fade-leave-to {
     transform: translateY(50px);
     opacity: 0;
 }
+
+.slide-fade-right-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-enter-from,
+.slide-fade-right-leave-to {
+    transform: translateX(50px);
+    opacity: 0;
+}
+
+.monitor-list {
+    &.scrollbar {
+        min-height: calc(100vh - 240px);
+        max-height: calc(100vh - 30px);
+        overflow-y: auto;
+        position: sticky;
+        top: 10px;
+    }
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 13px 15px 10px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &.disabled {
+            opacity: 0.3;
+        }
+
+        .info {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+    }
+}
+
+.alert-success {
+    color: #122f21;
+    background-color: $primary;
+    border-color: $primary;
+}
+
+.alert-info {
+    color: #055160;
+    background-color: #cff4fc;
+    border-color: #cff4fc;
+}
+
+.alert-danger {
+    color: #842029;
+    background-color: #f8d7da;
+    border-color: #f8d7da;
+}
+
+.btn-success {
+    color: #fff;
+    background-color: #4caf50;
+    border-color: #4caf50;
+}
+
+[contenteditable=true] {
+    transition: all $easing-in 0.2s;
+    background-color: rgba(239, 239, 239, 0.7);
+    border-radius: 8px;
+
+    &:focus {
+        outline: 0 solid #eee;
+        background-color: rgba(245, 245, 245, 0.9);
+    }
+
+    &:hover {
+        background-color: rgba(239, 239, 239, 0.8);
+    }
+
+    .dark & {
+        background-color: rgba(239, 239, 239, 0.2);
+    }
+
+    /*
+    &::after {
+        margin-left: 5px;
+        content: "🖊️";
+        font-size: 13px;
+        color: #eee;
+    }
+    */
+
+}
+
+.action {
+    transition: all $easing-in 0.2s;
+
+    &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+    }
+}
+
+.vue-image-crop-upload .vicp-wrap {
+    border-radius: 10px !important;
+}

src/assets/vars.scss

@@ -1,5 +1,5 @@
-$primary: #5CDD8B;
-$danger: #DC3545;
+$primary: #5cdd8b;
+$danger: #dc3545;
 $warning: #f8a306;
 $link-color: #111;
 $border-radius: 50rem;
@@ -9,10 +9,12 @@ $highlight-white: #e7faec;
 
 $dark-font-color: #b1b8c0;
 $dark-font-color2: #020b05;
-$dark-bg: #0D1117;
-$dark-bg2: #070A10;
+$dark-bg: #0d1117;
+$dark-bg2: #070a10;
 $dark-border-color: #1d2634;
 
-$easing-in: cubic-bezier(0.54,0.78,0.55,0.97);
+$easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
 $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+
+$dropdown-border-radius: 0.5rem;

src/components/Confirm.vue

@@ -4,7 +4,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 id="exampleModalLabel" class="modal-title">
-                        Confirm
+                        {{ $t("Confirm") }}
                     </h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
                 </div>
@@ -35,7 +35,7 @@ export default {
         },
         yesText: {
             type: String,
-            default: "Yes",
+            default: "Yes",     // TODO: No idea what to translate this
         },
         noText: {
             type: String,

src/components/HeartbeatBar.vue

@@ -25,21 +25,32 @@ export default {
             type: Number,
             required: true,
         },
+        heartbeatList: {
+            type: Array,
+            default: null,
+        }
     },
     data() {
         return {
             beatWidth: 10,
             beatHeight: 30,
             hoverScale: 1.5,
-            beatMargin: 3,      // Odd number only, even = blurry
+            beatMargin: 4,
             move: false,
             maxBeat: -1,
         }
     },
     computed: {
 
+        /**
+         * If heartbeatList is null, get it from $root.heartbeatList
+         */
         beatList() {
-            return this.$root.heartbeatList[this.monitorId]
+            if (this.heartbeatList === null) {
+                return this.$root.heartbeatList[this.monitorId];
+            } else {
+                return this.heartbeatList;
+            }
         },
 
         shortBeatList() {
@@ -118,15 +129,31 @@ export default {
         window.removeEventListener("resize", this.resize);
     },
     beforeMount() {
-        if (! (this.monitorId in this.$root.heartbeatList)) {
-            this.$root.heartbeatList[this.monitorId] = [];
+        if (this.heartbeatList === null) {
+            if (! (this.monitorId in this.$root.heartbeatList)) {
+                this.$root.heartbeatList[this.monitorId] = [];
+            }
         }
     },
+
     mounted() {
         if (this.size === "small") {
-            this.beatWidth = 5.6;
-            this.beatMargin = 2.4;
-            this.beatHeight = 16
+            this.beatWidth = 5;
+            this.beatHeight = 16;
+            this.beatMargin = 2;
+        }
+
+        // Suddenly, have an idea how to handle it universally.
+        // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
+        const actualWidth = this.beatWidth * window.devicePixelRatio;
+        const actualMargin = this.beatMargin * window.devicePixelRatio;
+
+        if (! Number.isInteger(actualWidth)) {
+            this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
+        }
+
+        if (! Number.isInteger(actualMargin)) {
+            this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
         }
 
         window.addEventListener("resize", this.resize);
@@ -163,10 +190,6 @@ export default {
 
         &.empty {
             background-color: aliceblue;
-
-            .dark & {
-                background-color: #d0d3d5;
-            }
         }
 
         &.down {
@@ -186,7 +209,7 @@ export default {
 }
 
 .dark {
-    .hp-bar-big .beat.empty{
+    .hp-bar-big .beat.empty {
         background-color: #848484;
     }
 }

src/components/HiddenInput.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="input-group mb-3">
+        <input
+            ref="input"
+            v-model="model"
+            :type="visibility"
+            class="form-control"
+            :placeholder="placeholder"
+            :maxlength="maxlength"
+            :autocomplete="autocomplete"
+            :required="required"
+            :readonly="readonly"
+        >
+
+        <a v-if="visibility == 'password'" class="btn btn-outline-primary" @click="showInput()">
+            <font-awesome-icon icon="eye" />
+        </a>
+        <a v-if="visibility == 'text'" class="btn btn-outline-primary" @click="hideInput()">
+            <font-awesome-icon icon="eye-slash" />
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        placeholder: {
+            type: String,
+            default: ""
+        },
+        maxlength: {
+            type: Number,
+            default: 255
+        },
+        autocomplete: {
+            type: String,
+            default: undefined,
+        },
+        required: {
+            type: Boolean
+        },
+        readonly: {
+            type: String,
+            default: undefined,
+        },
+    },
+    data() {
+        return {
+            visibility: "password",
+        }
+    },
+    computed: {
+        model: {
+            get() {
+                return this.modelValue
+            },
+            set(value) {
+                this.$emit("update:modelValue", value)
+            }
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        showInput() {
+            this.visibility = "text";
+        },
+        hideInput() {
+            this.visibility = "password";
+        },
+    }
+}
+</script>

src/components/Login.vue

@@ -4,14 +4,21 @@
             <form @submit.prevent="submit">
                 <h1 class="h3 mb-3 fw-normal" />
 
-                <div class="form-floating">
+                <div v-if="!tokenRequired" class="form-floating">
                     <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username">
-                    <label for="floatingInput">Username</label>
+                    <label for="floatingInput">{{ $t("Username") }}</label>
                 </div>
 
-                <div class="form-floating mt-3">
+                <div v-if="!tokenRequired" class="form-floating mt-3">
                     <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password">
-                    <label for="floatingPassword">Password</label>
+                    <label for="floatingPassword">{{ $t("Password") }}</label>
+                </div>
+
+                <div v-if="tokenRequired">
+                    <div class="form-floating mt-3">
+                        <input id="floatingToken" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
+                        <label for="floatingToken">{{ $t("Token") }}</label>
+                    </div>
                 </div>
 
                 <div class="form-check mb-3 mt-3 d-flex justify-content-center pe-4">
@@ -19,12 +26,12 @@
                         <input id="remember" v-model="$root.remember" type="checkbox" value="remember-me" class="form-check-input">
 
                         <label class="form-check-label" for="remember">
-                            Remember me
+                            {{ $t("Remember me") }}
                         </label>
                     </div>
                 </div>
                 <button class="w-100 btn btn-primary" type="submit" :disabled="processing">
-                    Login
+                    {{ $t("Login") }}
                 </button>
 
                 <div v-if="res && !res.ok" class="alert alert-danger mt-3" role="alert">
@@ -42,16 +49,24 @@ export default {
             processing: false,
             username: "",
             password: "",
-
+            token: "",
             res: null,
+            tokenRequired: false,
         }
     },
     methods: {
         submit() {
             this.processing = true;
-            this.$root.login(this.username, this.password, (res) => {
+
+            this.$root.login(this.username, this.password, this.token, (res) => {
                 this.processing = false;
-                this.res = res;
+                console.log(res)
+
+                if (res.tokenRequired) {
+                    this.tokenRequired = true;
+                } else {
+                    this.res = res;
+                }
             })
         },
     },

src/components/MonitorList.vue

@@ -1,38 +1,68 @@
 <template>
-    <div class="shadow-box list mb-4">
-        <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
-            No Monitors, please <router-link to="/add">add one</router-link>.
+    <div class="shadow-box mb-3">
+        <div class="list-header">
+            <div class="placeholder"></div>
+            <div class="search-wrapper">
+                <a v-if="searchText == ''" class="search-icon">
+                    <font-awesome-icon icon="search" />
+                </a>
+                <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...')" />
+            </div>
         </div>
+        <div class="monitor-list" :class="{ scrollbar: scrollbar }">
+            <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
+                {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
+            </div>
 
-        <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="info">
-                        <Uptime :monitor="item" type="24" :pill="true" />
-                        {{ item.name }}
+            <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="info">
+                            <Uptime :monitor="item" type="24" :pill="true" />
+                            {{ item.name }}
+                        </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">
+                        <HeartbeatBar size="small" :monitor-id="item.id" />
                     </div>
                 </div>
-                <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4">
-                    <HeartbeatBar size="small" :monitor-id="item.id" />
-                </div>
-            </div>
 
-            <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
-                <div class="col-12">
-                    <HeartbeatBar size="small" :monitor-id="item.id" />
+                <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
+                    <div class="col-12">
+                        <HeartbeatBar size="small" :monitor-id="item.id" />
+                    </div>
                 </div>
-            </div>
-        </router-link>
+            </router-link>
+        </div>
     </div>
 </template>
 
 <script>
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Uptime from "../components/Uptime.vue";
+import Tag from "../components/Tag.vue";
+
 export default {
     components: {
         Uptime,
         HeartbeatBar,
+        Tag,
+    },
+    props: {
+        scrollbar: {
+            type: Boolean,
+        },
+    },
+    data() {
+        return {
+            searchText: "",
+        }
     },
     computed: {
         sortedMonitorList() {
@@ -63,6 +93,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 != "") {
+                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))
+                })
+            }
+
             return result;
         },
     },
@@ -70,6 +111,9 @@ export default {
         monitorURL(id) {
             return "/dashboard/" + id;
         },
+        clearSearchText() {
+            this.searchText = "";
+        }
     },
 }
 </script>
@@ -82,52 +126,51 @@ export default {
     padding-right: 5px !important;
 }
 
-.list {
-    height: auto;
-    min-height: calc(100vh - 240px);
+.list-header {
+    border-bottom: 1px solid #dee2e6;
+    border-radius: 10px 10px 0 0;
+    margin: -10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
 
-    .item {
-        display: block;
-        text-decoration: none;
-        padding: 13px 15px 10px 15px;
-        border-radius: 10px;
-        transition: all ease-in-out 0.15s;
-
-        &.disabled {
-            opacity: 0.3;
-        }
-
-        .info {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        &:hover {
-            background-color: $highlight-white;
-        }
-
-        &.active {
-            background-color: #cdf8f4;
-        }
+    .dark & {
+        background-color: #161b22;
+        border-bottom: 0;
     }
 }
 
-.dark {
-    .list {
-        .item {
-            &:hover {
-                background-color: $dark-bg2;
-            }
-
-            &.active {
-                background-color: $dark-bg2;
-            }
-        }
+@media (max-width: 770px) {
+    .list-header {
+        margin: -20px;
+        margin-bottom: 10px;
+        padding: 5px;
     }
 }
 
+.search-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    padding: 10px;
+    color: #c0c0c0;
+}
+
+.search-input {
+    max-width: 15em;
+}
+
 .monitorItem {
     width: 100%;
 }
+
+.tags {
+    padding-left: 62px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+}
 </style>

src/components/NotificationDialog.vue

@@ -5,21 +5,23 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 id="exampleModalLabel" class="modal-title">
-                            Setup Notification
+                            {{ $t("Setup Notification") }}
                         </h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
                     </div>
                     <div class="modal-body">
                         <div class="mb-3">
-                            <label for="type" class="form-label">Notification Type</label>
-                            <select id="type" v-model="notification.type" class="form-select">
+                            <label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
+                            <select id="notification-type" v-model="notification.type" class="form-select">
                                 <option value="telegram">Telegram</option>
                                 <option value="webhook">Webhook</option>
-                                <option value="smtp">Email (SMTP)</option>
+                                <option value="smtp">{{ $t("Email") }} (SMTP)</option>
                                 <option value="discord">Discord</option>
+                                <option value="teams">Microsoft Teams</option>
                                 <option value="signal">Signal</option>
                                 <option value="gotify">Gotify</option>
                                 <option value="slack">Slack</option>
+                                <option value="rocket.chat">Rocket.chat</option>
                                 <option value="pushover">Pushover</option>
                                 <option value="pushy">Pushy</option>
                                 <option value="octopush">Octopush</option>
@@ -27,52 +29,18 @@
                                 <option value="apprise">Apprise (Support 50+ Notification services)</option>
                                 <option value="pushbullet">Pushbullet</option>
                                 <option value="line">Line Messenger</option>
+                                <option value="mattermost">Mattermost</option>
                             </select>
                         </div>
 
                         <div class="mb-3">
-                            <label for="name" class="form-label">Friendly Name</label>
-                            <input id="name" v-model="notification.name" type="text" class="form-control" required>
+                            <label for="notification-name" class="form-label">{{ $t("Friendly Name") }}</label>
+                            <input id="notification-name" v-model="notification.name" type="text" class="form-control" required>
                         </div>
 
-                        <template v-if="notification.type === 'telegram'">
-                            <div class="mb-3">
-                                <label for="telegram-bot-token" class="form-label">Bot Token</label>
-                                <input id="telegram-bot-token" v-model="notification.telegramBotToken" type="text" class="form-control" required>
-                                <div class="form-text">
-                                    You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
-                                </div>
-                            </div>
+                        <Telegram v-if="notification.type === 'telegram'" />
 
-                            <div class="mb-3">
-                                <label for="telegram-chat-id" class="form-label">Chat ID</label>
-
-                                <div class="input-group mb-3">
-                                    <input id="telegram-chat-id" v-model="notification.telegramChatID" type="text" class="form-control" required>
-                                    <button v-if="notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
-                                        Auto Get
-                                    </button>
-                                </div>
-
-                                <div class="form-text">
-                                    Support Direct Chat / Group / Channel's Chat ID
-
-                                    <p style="margin-top: 8px;">
-                                        You can get your chat id by sending message to the bot and go to this url to view the chat_id:
-                                    </p>
-
-                                    <p style="margin-top: 8px;">
-                                        <template v-if="notification.telegramBotToken">
-                                            <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
-                                        </template>
-
-                                        <template v-else>
-                                            {{ telegramGetUpdatesURL }}
-                                        </template>
-                                    </p>
-                                </div>
-                            </div>
-                        </template>
+                        <!-- TODO: Convert all into vue components, but not an easy task.  -->
 
                         <template v-if="notification.type === 'webhook'">
                             <div class="mb-3">
@@ -98,49 +66,7 @@
                             </div>
                         </template>
 
-                        <template v-if="notification.type === 'smtp'">
-                            <div class="mb-3">
-                                <label for="hostname" class="form-label">Hostname</label>
-                                <input id="hostname" v-model="notification.smtpHost" type="text" class="form-control" required>
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="port" class="form-label">Port</label>
-                                <input id="port" v-model="notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
-                            </div>
-
-                            <div class="mb-3">
-                                <div class="form-check">
-                                    <input id="secure" v-model="notification.smtpSecure" class="form-check-input" type="checkbox" value="">
-                                    <label class="form-check-label" for="secure">
-                                        Secure
-                                    </label>
-                                </div>
-                                <div class="form-text">
-                                    Generally, true for 465, false for other ports.
-                                </div>
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="username" class="form-label">Username</label>
-                                <input id="username" v-model="notification.smtpUsername" type="text" class="form-control" autocomplete="false">
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="password" class="form-label">Password</label>
-                                <input id="password" v-model="notification.smtpPassword" type="password" class="form-control" autocomplete="false">
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="from-email" class="form-label">From Email</label>
-                                <input id="from-email" v-model="notification.smtpFrom" type="email" class="form-control" required autocomplete="false">
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="to-email" class="form-label">To Email</label>
-                                <input id="to-email" v-model="notification.smtpTo" type="email" class="form-control" required autocomplete="false">
-                            </div>
-                        </template>
+                        <SMTP v-if="notification.type === 'smtp'" />
 
                         <template v-if="notification.type === 'discord'">
                             <div class="mb-3">
@@ -155,6 +81,11 @@
                                 <label for="discord-username" class="form-label">Bot Display Name</label>
                                 <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName">
                             </div>
+
+                            <div class="mb-3">
+                                <label for="discord-prefix-message" class="form-label">Prefix Custom Message</label>
+                                <input id="discord-prefix-message" v-model="notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" placeholder="Hello @everyone is...">
+                            </div>
                         </template>
 
                         <template v-if="notification.type === 'signal'">
@@ -193,7 +124,7 @@
                         <template v-if="notification.type === 'gotify'">
                             <div class="mb-3">
                                 <label for="gotify-application-token" class="form-label">Application Token</label>
-                                <input id="gotify-application-token" v-model="notification.gotifyapplicationToken" type="text" class="form-control" required>
+                                <HiddenInput id="gotify-application-token" v-model="notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput>
                             </div>
                             <div class="mb-3">
                                 <label for="gotify-server-url" class="form-label">Server URL</label>
@@ -210,7 +141,7 @@
 
                         <template v-if="notification.type === 'slack'">
                             <div class="mb-3">
-                                <label for="slack-webhook-url" class="form-label">Webhook URL<span style="color:red;"><sup>*</sup></span></label>
+                                <label for="slack-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
                                 <input id="slack-webhook-url" v-model="notification.slackwebhookURL" type="text" class="form-control" required>
                                 <label for="slack-username" class="form-label">Username</label>
                                 <input id="slack-username" v-model="notification.slackusername" type="text" class="form-control">
@@ -221,7 +152,7 @@
                                 <label for="slack-button-url" class="form-label">Uptime Kuma URL</label>
                                 <input id="slack-button" v-model="notification.slackbutton" type="text" class="form-control">
                                 <div class="form-text">
-                                    <span style="color:red;"><sup>*</sup></span>Required
+                                    <span style="color: red;"><sup>*</sup></span>Required
                                     <p style="margin-top: 8px;">
                                         More info about webhooks on: <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a>
                                     </p>
@@ -238,16 +169,79 @@
                             </div>
                         </template>
 
+                        <template v-if="notification.type === 'rocket.chat'">
+                            <div class="mb-3">
+                                <label for="rocket-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
+                                <input id="rocket-webhook-url" v-model="notification.rocketwebhookURL" type="text" class="form-control" required>
+                                <label for="rocket-username" class="form-label">Username</label>
+                                <input id="rocket-username" v-model="notification.rocketusername" type="text" class="form-control">
+                                <label for="rocket-iconemo" class="form-label">Icon Emoji</label>
+                                <input id="rocket-iconemo" v-model="notification.rocketiconemo" type="text" class="form-control">
+                                <label for="rocket-channel" class="form-label">Channel Name</label>
+                                <input id="rocket-channel-name" v-model="notification.rocketchannel" type="text" class="form-control">
+                                <label for="rocket-button-url" class="form-label">Uptime Kuma URL</label>
+                                <input id="rocket-button" v-model="notification.rocketbutton" type="text" class="form-control">
+                                <div class="form-text">
+                                    <span style="color: red;"><sup>*</sup></span>Required
+                                    <p style="margin-top: 8px;">
+                                        More info about webhooks on: <a href="https://docs.rocket.chat/guides/administration/administration/integrations" target="_blank">https://api.slack.com/messaging/webhooks</a>
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        Enter the channel name on Rocket.chat Channel Name field if you want to bypass the webhook channel. Ex: #other-channel
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </template>
+
+                        <template v-if="notification.type === 'mattermost'">
+                            <div class="mb-3">
+                                <label for="mattermost-webhook-url" class="form-label">Webhook URL<span style="color:red;"><sup>*</sup></span></label>
+                                <input id="mattermost-webhook-url" v-model="notification.mattermostWebhookUrl" type="text" class="form-control" required>
+                                <label for="mattermost-username" class="form-label">Username</label>
+                                <input id="mattermost-username" v-model="notification.mattermostusername" type="text" class="form-control">
+                                <label for="mattermost-iconurl" class="form-label">Icon URL</label>
+                                <input id="mattermost-iconurl" v-model="notification.mattermosticonurl" type="text" class="form-control">
+                                <label for="mattermost-iconemo" class="form-label">Icon Emoji</label>
+                                <input id="mattermost-iconemo" v-model="notification.mattermosticonemo" type="text" class="form-control">
+                                <label for="mattermost-channel" class="form-label">Channel Name</label>
+                                <input id="mattermost-channel-name" v-model="notification.mattermostchannel" type="text" class="form-control">
+                                <div class="form-text">
+                                    <span style="color:red;"><sup>*</sup></span>Required
+                                    <p style="margin-top: 8px;">
+                                        More info about webhooks on: <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        You can override the default channel that webhook posts to by entering the channel name into "Channel Name" field. This needs to be enabled in Mattermost webhook settings. Ex: #other-channel
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        You can provide a link to a picture in "Icon URL" to override the default profile picture. Will not be used if Icon Emoji is set.
+                                    </p>
+                                    <p style="margin-top: 8px;">
+                                        Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a> Note: emoji takes preference over Icon URL.
+                                    </p>
+                                </div>
+                            </div>
+                        </template>
+
                         <template v-if="notification.type === 'pushy'">
                             <div class="mb-3">
                                 <label for="pushy-app-token" class="form-label">API_KEY</label>
-                                <input id="pushy-app-token" v-model="notification.pushyAPIKey" type="text" class="form-control" required>
+                                <HiddenInput id="pushy-app-token" v-model="notification.pushyAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
                             </div>
 
                             <div class="mb-3">
                                 <label for="pushy-user-key" class="form-label">USER_TOKEN</label>
                                 <div class="input-group mb-3">
-                                    <input id="pushy-user-key" v-model="notification.pushyToken" type="text" class="form-control" required>
+                                    <HiddenInput id="pushy-user-key" v-model="notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
                                 </div>
                             </div>
                             <p style="margin-top: 8px;">
@@ -258,7 +252,7 @@
                         <template v-if="notification.type === 'octopush'">
                             <div class="mb-3">
                                 <label for="octopush-key" class="form-label">API KEY</label>
-                                <input id="octopush-key" v-model="notification.octopushAPIKey" type="text" class="form-control" required>
+                                <HiddenInput id="octopush-key" v-model="notification.octopushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
                                 <label for="octopush-login" class="form-label">API LOGIN</label>
                                 <input id="octopush-login" v-model="notification.octopushLogin" type="text" class="form-control" required>
                             </div>
@@ -288,10 +282,10 @@
 
                         <template v-if="notification.type === 'pushover'">
                             <div class="mb-3">
-                                <label for="pushover-user" class="form-label">User Key<span style="color:red;"><sup>*</sup></span></label>
-                                <input id="pushover-user" v-model="notification.pushoveruserkey" type="text" class="form-control" required>
-                                <label for="pushover-app-token" class="form-label">Application Token<span style="color:red;"><sup>*</sup></span></label>
-                                <input id="pushover-app-token" v-model="notification.pushoverapptoken" type="text" class="form-control" required>
+                                <label for="pushover-user" class="form-label">User Key<span style="color: red;"><sup>*</sup></span></label>
+                                <HiddenInput id="pushover-user" v-model="notification.pushoveruserkey" :required="true" autocomplete="one-time-code"></HiddenInput>
+                                <label for="pushover-app-token" class="form-label">Application Token<span style="color: red;"><sup>*</sup></span></label>
+                                <HiddenInput id="pushover-app-token" v-model="notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput>
                                 <label for="pushover-device" class="form-label">Device</label>
                                 <input id="pushover-device" v-model="notification.pushoverdevice" type="text" class="form-control">
                                 <label for="pushover-device" class="form-label">Message Title</label>
@@ -330,7 +324,7 @@
                                     <option>none</option>
                                 </select>
                                 <div class="form-text">
-                                    <span style="color:red;"><sup>*</sup></span>Required
+                                    <span style="color: red;"><sup>*</sup></span>Required
                                     <p style="margin-top: 8px;">
                                         More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
                                     </p>
@@ -366,10 +360,10 @@
 
                         <template v-if="notification.type === 'lunasea'">
                             <div class="mb-3">
-                                <label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color:red;"><sup>*</sup></span></label>
+                                <label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color: red;"><sup>*</sup></span></label>
                                 <input id="lunasea-device" v-model="notification.lunaseaDevice" type="text" class="form-control" required>
                                 <div class="form-text">
-                                    <p><span style="color:red;"><sup>*</sup></span>Required</p>
+                                    <p><span style="color: red;"><sup>*</sup></span>Required</p>
                                 </div>
                             </div>
                         </template>
@@ -377,7 +371,7 @@
                         <template v-if="notification.type === 'pushbullet'">
                             <div class="mb-3">
                                 <label for="pushbullet-access-token" class="form-label">Access Token</label>
-                                <input id="pushbullet-access-token" v-model="notification.pushbulletAccessToken" type="text" class="form-control" required>
+                                <HiddenInput id="pushbullet-access-token" v-model="notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
                             </div>
 
                             <p style="margin-top: 8px;">
@@ -388,7 +382,7 @@
                         <template v-if="notification.type === 'line'">
                             <div class="mb-3">
                                 <label for="line-channel-access-token" class="form-label">Channel access token</label>
-                                <input id="line-channel-access-token" v-model="notification.lineChannelAccessToken" type="text" class="form-control" required>
+                                <HiddenInput id="line-channel-access-token" v-model="notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
                             </div>
                             <div class="form-text">
                                 Line Developers Console - <b>Basic Settings</b>
@@ -404,16 +398,41 @@
                                 First access the <a href="https://developers.line.biz/console/" target="_blank">Line Developers Console</a>, create a provider and channel (Messaging API), then you can get the channel access token and user id from the above mentioned menu items.
                             </div>
                         </template>
+
+                        <!-- DEPRECATED! Please create vue component in "./src/components/notifications/{notification name}.vue" -->
+
+                        <Teams v-if="notification.type === 'teams'" />
+
+                        <div class="mb-3 mt-4">
+                            <hr class="dropdown-divider mb-4">
+
+                            <div class="form-check form-switch">
+                                <input v-model="notification.isDefault" class="form-check-input" type="checkbox">
+                                <label class="form-check-label">{{ $t("Default enabled") }}</label>
+                            </div>
+                            <div class="form-text">
+                                {{ $t("enableDefaultNotificationDescription") }}
+                            </div>
+
+                            <br>
+
+                            <div class="form-check form-switch">
+                                <input v-model="notification.applyExisting" class="form-check-input" type="checkbox">
+                                <label class="form-check-label">{{ $t("Apply on all existing monitors") }}</label>
+                            </div>
+                        </div>
                     </div>
+
                     <div class="modal-footer">
                         <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
-                            Delete
+                            {{ $t("Delete") }}
                         </button>
                         <button type="button" class="btn btn-warning" :disabled="processing" @click="test">
-                            Test
+                            {{ $t("Test") }}
                         </button>
                         <button type="submit" class="btn btn-primary" :disabled="processing">
-                            Save
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
                         </button>
                     </div>
                 </div>
@@ -421,24 +440,31 @@
         </div>
     </form>
 
-    <Confirm ref="confirmDelete" btn-style="btn-danger" @yes="deleteNotification">
-        Are you sure want to delete this notification for all monitors?
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteNotification">
+        {{ $t("deleteNotificationMsg") }}
     </Confirm>
 </template>
 
 <script lang="ts">
 import { Modal } from "bootstrap"
 import { ucfirst } from "../util.ts"
-import axios from "axios";
-import { useToast } from "vue-toastification"
+
 import Confirm from "./Confirm.vue";
-const toast = useToast()
+import HiddenInput from "./HiddenInput.vue";
+import Telegram from "./notifications/Telegram.vue";
+import Teams from "./notifications/Teams.vue";
+import SMTP from "./notifications/SMTP.vue";
 
 export default {
     components: {
         Confirm,
+        HiddenInput,
+        Telegram,
+        Teams,
+        SMTP,
     },
     props: {},
+    emits: ["added"],
     data() {
         return {
             model: null,
@@ -447,22 +473,13 @@ export default {
             notification: {
                 name: "",
                 type: null,
-                gotifyPriority: 8,
+                isDefault: false,
+                // Do not set default value here, please scroll to show()
             },
             appriseInstalled: false,
         }
     },
-    computed: {
-        telegramGetUpdatesURL() {
-            let token = "<YOUR BOT TOKEN HERE>"
 
-            if (this.notification.telegramBotToken) {
-                token = this.notification.telegramBotToken;
-            }
-
-            return `https://api.telegram.org/bot${token}/getUpdates`;
-        },
-    },
     watch: {
         "notification.type"(to, from) {
             let oldName;
@@ -507,11 +524,13 @@ export default {
                 this.notification = {
                     name: "",
                     type: null,
+                    isDefault: false,
                 }
 
-                // Default set to Telegram
-                this.notification.type = "telegram"
-                this.notification.gotifyPriority = 8
+                // Set Default value here
+                this.notification.type = "telegram";
+                this.notification.gotifyPriority = 8;
+                this.notification.smtpSecure = false;
             }
 
             this.modal.show()
@@ -524,7 +543,13 @@ export default {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.modal.hide()
+                    this.modal.hide();
+
+                    // Emit added event, doesn't emit edit.
+                    if (! this.id) {
+                        this.$emit("added", res.id);
+                    }
+
                 }
             })
         },
@@ -548,32 +573,6 @@ export default {
                 }
             })
         },
-
-        async autoGetTelegramChatID() {
-            try {
-                let res = await axios.get(this.telegramGetUpdatesURL)
-
-                if (res.data.result.length >= 1) {
-                    let update = res.data.result[res.data.result.length - 1]
-
-                    if (update.channel_post) {
-                        this.notification.telegramChatID = update.channel_post.chat.id;
-                    } else if (update.message) {
-                        this.notification.telegramChatID = update.message.chat.id;
-                    } else {
-                        throw new Error("Chat ID is not found, please send a message to this bot first")
-                    }
-
-                } else {
-                    throw new Error("Chat ID is not found, please send a message to this bot first")
-                }
-
-            } catch (error) {
-                toast.error(error.message)
-            }
-
-        },
-
     },
 }
 </script>

src/components/PingChart.vue

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

src/components/PublicGroupList.vue

@@ -0,0 +1,144 @@
+<template>
+    <!-- Group List -->
+    <Draggable
+        v-model="$root.publicGroupList"
+        :disabled="!editMode"
+        item-key="id"
+        :animation="100"
+    >
+        <template #item="group">
+            <div class="mb-5 ">
+                <!-- Group Title -->
+                <h2 class="group-title">
+                    <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
+                    <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
+                    <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" />
+                </h2>
+
+                <div class="shadow-box monitor-list mt-4 position-relative">
+                    <div v-if="group.element.monitorList.length === 0" class="text-center no-monitor-msg">
+                        {{ $t("No Monitors") }}
+                    </div>
+
+                    <!-- Monitor List -->
+                    <!-- animation is not working, no idea why -->
+                    <Draggable
+                        v-model="group.element.monitorList"
+                        class="monitor-list"
+                        group="same-group"
+                        :disabled="!editMode"
+                        :animation="100"
+                        item-key="id"
+                    >
+                        <template #item="monitor">
+                            <div class="item">
+                                <div class="row">
+                                    <div class="col-9 col-md-8 small-padding">
+                                        <div class="info">
+                                            <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
+                                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
+
+                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            {{ monitor.element.name }}
+                                        </div>
+                                    </div>
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                        <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </Draggable>
+                </div>
+            </div>
+        </template>
+    </Draggable>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import HeartbeatBar from "./HeartbeatBar.vue";
+import Uptime from "./Uptime.vue";
+
+export default {
+    components: {
+        Draggable,
+        HeartbeatBar,
+        Uptime,
+    },
+    props: {
+        editMode: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        showGroupDrag() {
+            return (this.$root.publicGroupList.length >= 2);
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        removeGroup(index) {
+            this.$root.publicGroupList.splice(index, 1);
+        },
+
+        removeMonitor(groupIndex, index) {
+            this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars";
+
+.no-monitor-msg {
+    position: absolute;
+    width: 100%;
+    top: 20px;
+    left: 0;
+}
+
+.monitor-list {
+    min-height: 46px;
+}
+
+.flip-list-move {
+    transition: transform 0.5s;
+}
+
+.no-move {
+    transition: transform 0s;
+}
+
+.drag {
+    color: #bbb;
+    cursor: grab;
+}
+
+.remove {
+    color: $danger;
+}
+
+.group-title {
+    span {
+        display: inline-block;
+        min-width: 15px;
+    }
+}
+
+.mobile {
+    .item {
+        padding: 13px 0 10px 0;
+    }
+}
+
+</style>

src/components/Status.vue

@@ -27,18 +27,18 @@ export default {
 
         text() {
             if (this.status === 0) {
-                return "Down"
+                return this.$t("Down");
             }
 
             if (this.status === 1) {
-                return "Up"
+                return this.$t("Up");
             }
 
             if (this.status === 2) {
-                return "Pending"
+                return this.$t("Pending");
             }
 
-            return "Unknown"
+            return this.$t("Unknown");
         },
     },
 }

src/components/Tag.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="tag-wrapper rounded d-inline-flex"
+         :class="{ 'px-3': size == 'normal',
+                   'py-1': size == 'normal',
+                   'm-2': size == 'normal',
+                   'px-2': size == 'sm',
+                   'py-0': size == 'sm',
+                   'm-1': size == 'sm',
+         }"
+         :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
+    >
+        <span class="tag-text">{{ displayText }}</span>
+        <span v-if="remove != null" class="ps-1 btn-remove" @click="remove(item)">
+            <font-awesome-icon icon="times" />
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        item: {
+            type: Object,
+            required: true,
+        },
+        remove: {
+            type: Function,
+            default: null,
+        },
+        size: {
+            type: String,
+            default: "normal",
+        }
+    },
+    computed: {
+        displayText() {
+            if (this.item.value == "") {
+                return this.item.name;
+            } else {
+                return `${this.item.name}: ${this.item.value}`;
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag-wrapper {
+    color: white;
+    opacity: 0.85;
+
+    .dark & {
+        opacity: 1;
+    }
+}
+
+.tag-text {
+    padding-bottom: 1px !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.btn-remove {
+    font-size: 0.9em;
+    line-height: 24px;
+    opacity: 0.3;
+}
+
+.btn-remove:hover {
+    opacity: 1;
+}
+</style>

src/components/TagsManager.vue

@@ -0,0 +1,405 @@
+<template>
+    <div>
+        <h4 class="mb-3">{{ $t("Tags") }}</h4>
+        <div class="mb-3 p-1">
+            <tag
+                v-for="item in selectedTags"
+                :key="item.id"
+                :item="item"
+                :remove="deleteTag"
+            />
+        </div>
+        <div class="p-1">
+            <button
+                type="button"
+                class="btn btn-outline-secondary btn-add"
+                :disabled="processing"
+                @click.stop="showAddDialog"
+            >
+                <font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }}
+            </button>
+        </div>
+        <div ref="modal" class="modal fade" tabindex="-1">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <vue-multiselect
+                            v-model="newDraftTag.select"
+                            class="mb-2"
+                            :options="tagOptions"
+                            :multiple="false"
+                            :searchable="true"
+                            :placeholder="$t('Add New below or Select...')"
+                            track-by="id"
+                            label="name"
+                        >
+                            <template #option="{ option }">
+                                <div class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                     style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
+                                     :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
+                                >
+                                    <span>
+                                        {{ option.name }}</span>
+                                </div>
+                            </template>
+                            <template #singleLabel="{ option }">
+                                <div class="py-1 px-3 rounded d-inline-flex"
+                                     style="height: 24px;"
+                                     :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
+                                >
+                                    <span>{{ option.name }}</span>
+                                </div>
+                            </template>
+                        </vue-multiselect>
+                        <div v-if="newDraftTag.select?.name == null" class="d-flex mb-2">
+                            <div class="w-50 pe-2">
+                                <input v-model="newDraftTag.name" class="form-control"
+                                       :class="{'is-invalid': validateDraftTag.nameInvalid}"
+                                       :placeholder="$t('Name')"
+                                       @keydown.enter.prevent="onEnter"
+                                />
+                                <div class="invalid-feedback">
+                                    {{ $t("Tag with this name already exist.") }}
+                                </div>
+                            </div>
+                            <div class="w-50 ps-2">
+                                <vue-multiselect
+                                    v-model="newDraftTag.color"
+                                    :options="colorOptions"
+                                    :multiple="false"
+                                    :searchable="true"
+                                    :placeholder="$t('color')"
+                                    track-by="color"
+                                    label="name"
+                                    select-label=""
+                                    deselect-label=""
+                                >
+                                    <template #option="{ option }">
+                                        <div class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                             style="height: 24px; color: white;"
+                                             :style="{ backgroundColor: option.color + ' !important' }"
+                                        >
+                                            <span>{{ option.name }}</span>
+                                        </div>
+                                    </template>
+                                    <template #singleLabel="{ option }">
+                                        <div class="py-1 px-3 rounded d-inline-flex"
+                                             style="height: 24px; color: white;"
+                                             :style="{ backgroundColor: option.color + ' !important' }"
+                                        >
+                                            <span>{{ option.name }}</span>
+                                        </div>
+                                    </template>
+                                </vue-multiselect>
+                            </div>
+                        </div>
+                        <div class="mb-2">
+                            <input v-model="newDraftTag.value" class="form-control"
+                                   :class="{'is-invalid': validateDraftTag.valueInvalid}"
+                                   :placeholder="$t('value (optional)')"
+                                   @keydown.enter.prevent="onEnter"
+                            />
+                            <div class="invalid-feedback">
+                                {{ $t("Tag with this value already exist.") }}
+                            </div>
+                        </div>
+                        <div class="mb-2">
+                            <button
+                                type="button"
+                                class="btn btn-secondary float-end"
+                                :disabled="processing || validateDraftTag.invalid"
+                                @click.stop="addDraftTag"
+                            >
+                                {{ $t("Add") }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+import VueMultiselect from "vue-multiselect";
+import Tag from "../components/Tag.vue";
+import { useToast } from "vue-toastification"
+const toast = useToast()
+
+export default {
+    components: {
+        Tag,
+        VueMultiselect,
+    },
+    props: {
+        preSelectedTags: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            modal: null,
+            existingTags: [],
+            processing: false,
+            newTags: [],
+            deleteTags: [],
+            newDraftTag: {
+                name: null,
+                select: null,
+                color: null,
+                value: "",
+                invalid: true,
+                nameInvalid: false,
+            },
+        };
+    },
+    computed: {
+        tagOptions() {
+            const tagOptions = this.existingTags;
+            for (const tag of this.newTags) {
+                if (!tagOptions.find(t => t.name == tag.name && t.color == tag.color)) {
+                    tagOptions.push(tag);
+                }
+            }
+            return tagOptions;
+        },
+        selectedTags() {
+            return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id == tag.id));
+        },
+        colorOptions() {
+            return [
+                { name: this.$t("Gray"),
+                    color: "#4B5563" },
+                { name: this.$t("Red"),
+                    color: "#DC2626" },
+                { name: this.$t("Orange"),
+                    color: "#D97706" },
+                { name: this.$t("Green"),
+                    color: "#059669" },
+                { name: this.$t("Blue"),
+                    color: "#2563EB" },
+                { name: this.$t("Indigo"),
+                    color: "#4F46E5" },
+                { name: this.$t("Purple"),
+                    color: "#7C3AED" },
+                { name: this.$t("Pink"),
+                    color: "#DB2777" },
+            ]
+        },
+        validateDraftTag() {
+            let nameInvalid = false;
+            let valueInvalid = false;
+            let invalid = true;
+            if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value)) {
+                // Undo removing a Tag
+                nameInvalid = false;
+                valueInvalid = false;
+                invalid = false;
+            } else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0) {
+                // Try to create new tag with existing name
+                nameInvalid = true;
+                invalid = true;
+            } else if (this.newTags.concat(this.preSelectedTags).filter(tag => (
+                tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value
+            ) || (
+                tag.name == this.newDraftTag.name && tag.value == this.newDraftTag.value
+            )).length > 0) {
+                // Try to add a tag with existing name and value
+                valueInvalid = true;
+                invalid = true;
+            } else if (this.newDraftTag.select != null) {
+                // Select an existing tag, no need to validate
+                invalid = false;
+                valueInvalid = false;
+            } else if (this.newDraftTag.color == null || this.newDraftTag.name === "") {
+                // Missing form inputs
+                nameInvalid = false;
+                invalid = true;
+            } else {
+                // Looks valid
+                invalid = false;
+                nameInvalid = false;
+                valueInvalid = false;
+            }
+            return {
+                invalid,
+                nameInvalid,
+                valueInvalid,
+            }
+        },
+    },
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+        this.getExistingTags();
+    },
+    methods: {
+        showAddDialog() {
+            this.modal.show();
+        },
+        getExistingTags() {
+            this.$root.getSocket().emit("getTags", (res) => {
+                if (res.ok) {
+                    this.existingTags = res.tags;
+                } else {
+                    toast.error(res.msg)
+                }
+            });
+        },
+        deleteTag(item) {
+            if (item.new) {
+                // Undo Adding a new Tag
+                this.newTags = this.newTags.filter(tag => !(tag.name == item.name && tag.value == item.value));
+            } else {
+                // Remove an Existing Tag
+                this.deleteTags.push(item);
+            }
+        },
+        textColor(option) {
+            if (option.color) {
+                return "white";
+            } else {
+                return this.$root.theme === "light" ? "var(--bs-body-color)" : "inherit";
+            }
+        },
+        addDraftTag() {
+            console.log("Adding Draft Tag: ", this.newDraftTag);
+            if (this.newDraftTag.select != null) {
+                if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value)) {
+                    // Undo removing a tag
+                    this.deleteTags = this.deleteTags.filter(tag => !(tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value));
+                } else {
+                    // Add an existing Tag
+                    this.newTags.push({
+                        id: this.newDraftTag.select.id,
+                        color: this.newDraftTag.select.color,
+                        name: this.newDraftTag.select.name,
+                        value: this.newDraftTag.value,
+                        new: true,
+                    })
+                }
+            } else {
+                // Add new Tag
+                this.newTags.push({
+                    color: this.newDraftTag.color.color,
+                    name: this.newDraftTag.name.trim(),
+                    value: this.newDraftTag.value,
+                    new: true,
+                })
+            }
+            this.clearDraftTag();
+        },
+        clearDraftTag() {
+            this.newDraftTag = {
+                name: null,
+                select: null,
+                color: null,
+                value: "",
+                invalid: true,
+                nameInvalid: false,
+            };
+            this.modal.hide();
+        },
+        addTagAsync(newTag) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("addTag", newTag, resolve);
+            });
+        },
+        addMonitorTagAsync(tagId, monitorId, value) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
+            });
+        },
+        deleteMonitorTagAsync(tagId, monitorId, value) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
+            });
+        },
+        onEnter() {
+            if (!this.validateDraftTag.invalid) {
+                this.addDraftTag();
+            }
+        },
+        async submit(monitorId) {
+            console.log(`Submitting tag changes for monitor ${monitorId}...`);
+            this.processing = true;
+
+            for (const newTag of this.newTags) {
+                let tagId;
+                if (newTag.id == null) {
+                    // Create a New Tag
+                    let newTagResult;
+                    await this.addTagAsync(newTag).then((res) => {
+                        if (!res.ok) {
+                            toast.error(res.msg);
+                            newTagResult = false;
+                        }
+                        newTagResult = res.tag;
+                    });
+                    if (!newTagResult) {
+                        // abort
+                        this.processing = false;
+                        return;
+                    }
+                    tagId = newTagResult.id;
+                    // Assign the new ID to the tags of the same name & color
+                    this.newTags.map(tag => {
+                        if (tag.name == newTag.name && tag.color == newTag.color) {
+                            tag.id = newTagResult.id;
+                        }
+                    })
+                } else {
+                    tagId = newTag.id;
+                }
+
+                let newMonitorTagResult;
+                // Assign tag to monitor
+                await this.addMonitorTagAsync(tagId, monitorId, newTag.value).then((res) => {
+                    if (!res.ok) {
+                        toast.error(res.msg);
+                        newMonitorTagResult = false;
+                    }
+                    newMonitorTagResult = true;
+                });
+                if (!newMonitorTagResult) {
+                    // abort
+                    this.processing = false;
+                    return;
+                }
+            }
+
+            for (const deleteTag of this.deleteTags) {
+                let deleteMonitorTagResult;
+                await this.deleteMonitorTagAsync(deleteTag.tag_id, deleteTag.monitor_id, deleteTag.value).then((res) => {
+                    if (!res.ok) {
+                        toast.error(res.msg);
+                        deleteMonitorTagResult = false;
+                    }
+                    deleteMonitorTagResult = true;
+                });
+                if (!deleteMonitorTagResult) {
+                    // abort
+                    this.processing = false;
+                    return;
+                }
+            }
+
+            this.getExistingTags();
+            this.newTags = [];
+            this.deleteTags = [];
+            this.processing = false;
+        }
+    },
+};
+</script>
+
+<style scoped>
+.btn-add {
+    width: 100%;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+</style>

src/components/TwoFADialog.vue

@@ -0,0 +1,178 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            {{ $t("Setup 2FA") }}
+                            <span v-if="twoFAStatus == true" class="badge bg-primary">{{ $t("Active") }}</span>
+                            <span v-if="twoFAStatus == false" class="badge bg-primary">{{ $t("Inactive") }}</span>
+                        </h5>
+                        <button :disabled="processing" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <div v-if="uri && twoFAStatus == false" class="mx-auto text-center" style="width: 210px;">
+                                <vue-qrcode :key="uri" :value="uri" type="image/png" :quality="1" :color="{ light: '#ffffffff' }" />
+                                <button v-show="!showURI" type="button" class="btn btn-outline-primary btn-sm mt-2" @click="showURI = true">{{ $t("Show URI") }}</button>
+                            </div>
+                            <p v-if="showURI && twoFAStatus == false" class="text-break mt-2">{{ uri }}</p>
+
+                            <button v-if="uri == null && twoFAStatus == false" class="btn btn-primary" type="button" @click="prepare2FA()">
+                                {{ $t("Enable 2FA") }}
+                            </button>
+
+                            <button v-if="twoFAStatus == true" class="btn btn-danger" type="button" :disabled="processing" @click="confirmDisableTwoFA()">
+                                {{ $t("Disable 2FA") }}
+                            </button>
+
+                            <div v-if="uri && twoFAStatus == false" class="mt-3">
+                                <label for="basic-url" class="form-label">{{ $t("twoFAVerifyLabel") }}</label>
+                                <div class="input-group">
+                                    <input v-model="token" type="text" maxlength="6" class="form-control">
+                                    <button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
+                                </div>
+                                <p v-show="tokenValid" class="mt-2" style="color: green">{{ $t("tokenValidSettingsMsg") }}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="uri && twoFAStatus == false" class="modal-footer">
+                        <button type="submit" class="btn btn-primary" :disabled="processing || tokenValid == false" @click="confirmEnableTwoFA()">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmEnableTwoFA" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="save2FA">
+        {{ $t("confirmEnableTwoFAMsg") }}
+    </Confirm>
+
+    <Confirm ref="confirmDisableTwoFA" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="disable2FA">
+        {{ $t("confirmDisableTwoFAMsg") }}
+    </Confirm>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap"
+import Confirm from "./Confirm.vue";
+import VueQrcode from "vue-qrcode"
+import { useToast } from "vue-toastification"
+const toast = useToast()
+
+export default {
+    components: {
+        Confirm,
+        VueQrcode,
+    },
+    props: {},
+    data() {
+        return {
+            processing: false,
+            uri: null,
+            tokenValid: false,
+            twoFAStatus: null,
+            token: null,
+            showURI: false,
+        }
+    },
+    mounted() {
+        this.modal = new Modal(this.$refs.modal)
+        this.getStatus();
+    },
+    methods: {
+        show() {
+            this.modal.show()
+        },
+
+        confirmEnableTwoFA() {
+            this.$refs.confirmEnableTwoFA.show()
+        },
+
+        confirmDisableTwoFA() {
+            this.$refs.confirmDisableTwoFA.show()
+        },
+
+        prepare2FA() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("prepare2FA", (res) => {
+                this.processing = false;
+
+                if (res.ok) {
+                    this.uri = res.uri;
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        save2FA() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("save2FA", (res) => {
+                this.processing = false;
+
+                if (res.ok) {
+                    this.$root.toastRes(res)
+                    this.getStatus();
+                    this.modal.hide();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        disable2FA() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("disable2FA", (res) => {
+                this.processing = false;
+
+                if (res.ok) {
+                    this.$root.toastRes(res)
+                    this.getStatus();
+                    this.modal.hide();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        verifyToken() {
+            this.$root.getSocket().emit("verifyToken", this.token, (res) => {
+                if (res.ok) {
+                    this.tokenValid = res.valid;
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        getStatus() {
+            this.$root.getSocket().emit("twoFAStatus", (res) => {
+                if (res.ok) {
+                    this.twoFAStatus = res.status;
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/Uptime.vue

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

src/components/notifications/SMTP.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="mb-3">
+        <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
+        <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="port" class="form-label">{{ $t("Port") }}</label>
+        <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
+    </div>
+
+    <div class="mb-3">
+        <label for="secure" class="form-label">Secure</label>
+        <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
+            <option :value="false">None / STARTTLS (25, 587)</option>
+            <option :value="true">TLS (465)</option>
+        </select>
+    </div>
+
+    <div class="mb-3">
+        <div class="form-check">
+            <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
+            <label class="form-check-label" for="ignore-tls-error">
+                Ignore TLS Error
+            </label>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="username" class="form-label">{{ $t("Username") }}</label>
+        <input id="username" v-model="$parent.notification.smtpUsername" type="text" class="form-control" autocomplete="false">
+    </div>
+
+    <div class="mb-3">
+        <label for="password" class="form-label">{{ $t("Password") }}</label>
+        <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="one-time-code"></HiddenInput>
+    </div>
+
+    <div class="mb-3">
+        <label for="from-email" class="form-label">From Email</label>
+        <input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;">
+        <div class="form-text">
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="to-email" class="form-label">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">
+    </div>
+
+    <div class="mb-3">
+        <label for="to-cc" class="form-label">CC</label>
+        <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false">
+    </div>
+
+    <div class="mb-3">
+        <label for="to-bcc" class="form-label">BCC</label>
+        <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false">
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+    data() {
+        return {
+            name: "smtp",
+        }
+    },
+}
+</script>