update to 1.8.0

# Conflicts:
#	.dockerignore
#	.gitignore

.dockerignore

@@ -2,8 +2,12 @@
 /dist
 /node_modules
 /data
+/out
+/test
+/kubernetes
 /.do
 **/.dockerignore
+/private
 **/.git
 **/.gitignore
 **/docker-compose*
@@ -15,7 +19,6 @@ README.md
 .eslint*
 .stylelint*
 /.github
-package-lock.json
 yarn.lock
 app.json
 CODE_OF_CONDUCT.md
@@ -24,7 +27,8 @@ CNAME
 install.sh
 SECURITY.md
 tsconfig.json
-
+.env
+/tmp
 
 ### .gitignore content (commented rules are duplicated)
 

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+    root: true,
     env: {
         browser: true,
         commonjs: true,
@@ -16,6 +17,7 @@ module.exports = {
         requireConfigFile: false,
     },
     rules: {
+        "linebreak-style": ["error", "unix"],
         "camelcase": ["warn", {
             "properties": "never",
             "ignoreImports": true
@@ -32,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,
         }],
@@ -82,4 +85,29 @@ module.exports = {
         "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"],
+            }
+        },
+
+        // Override for jest puppeteer
+        {
+            "files": [
+                "**/*.spec.js",
+                "**/*.spec.jsx"
+            ],
+            env: {
+                jest: true,
+            },
+            globals: {
+                page: true,
+                browser: true,
+                context: true,
+                jestPuppeteer: true,
+            },
+        }
+    ]
+};

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-#github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: louislam # 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

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

@@ -9,9 +9,14 @@ assignees: ''
 **Is it a duplicate question?**
 Please search in Issues without filters: https://github.com/louislam/uptime-kuma/issues?q=
 
+
+**Describe your problem**
+
+
 **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`)

.github/workflows/auto-test.yml

@@ -0,0 +1,35 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Auto Test
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  auto-test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+        node-version: [14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm run install-legacy
+    - run: npm run build
+    - run: npm test
+      env:
+        HEADLESS_TEST: 1
+        JUST_FOR_TEST: ${{ secrets.JUST_FOR_TEST }}

.gitignore

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

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,13 +2,32 @@
 
 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.
+The frontend code build into "dist" directory. The server (express.js) exposes the "dist" directory as root of the endpoint. This is how production is working.
+
+# Key Technical Skills
+
+- Node.js (You should know what are promise, async/await and arrow function etc.)
+- Socket.io
+- SCSS
+- Vue.js
+- Bootstrap
+- SQLite
+
+# Directories
+
+- data (App data)
+- dist (Frontend build)
+- extra (Extra useful scripts)
+- public (Frontend resources for dev only)
+- server (Server source code)
+- src (Frontend source code)
+- test (unit test)
 
 # Can I create a pull request for Uptime Kuma?
 
-Generally, if the pull request is working fine and it do not affect any existing logic, workflow and perfomance, I will merge to the master branch once it is tested.
+Generally, if the pull request is working fine and it do not affect any existing logic, workflow and perfomance, I will merge into the master branch once it is tested.
 
 If you are not sure, feel free to create an empty pull request draft first.
 
@@ -19,14 +38,15 @@ If you are not sure, feel free to create an empty pull request draft first.
 - Add a new notification
 - Add a chart
 - Fix a bug
+- Translations
 
-### *️⃣ Requires one more reviewer 
+### *️⃣ Requires one more reviewer
 
 I do not have such knowledge to test it.
 
-- Add k8s supports 
+- Add k8s supports
 
-### *️⃣ Low Priority 
+### *️⃣ Low Priority
 
 It changed my current workflow and require further studies.
 
@@ -41,19 +61,18 @@ It changed my current workflow and require further studies.
 
 # Project Styles
 
-I personally do not like something need to learn so much and need to config so much before you can finally start the app. 
-
-For example, recently, because I am not a python expert, I spent a 2 hours to resolve all problems in order to install and use the Apprise cli. Apprise requires so many hidden requirements, I have to figure out myself how to solve the problems by Google search for my OS. That is painful. I do not want Uptime Kuma to be like this way, so:  
+I personally do not like something need to learn so much and need to config so much before you can finally start the app.
 
 - Easy to install for non-Docker users, no native build dependency is needed (at least for x86_64), no extra config, no extra effort to get it run
 - Single container for Docker users, no very complex docker-composer file. Just map the volume and expose the port, then good to go
-- All settings in frontend.
+- Settings should be configurable in the frontend. Env var is not encouraged.
 - Easy to use
 
 # Coding Styles
 
-- Follow .editorconfig
-- Follow eslint
+- 4 spaces indentation
+- Follow `.editorconfig`
+- Follow ESLint
 
 ## Name convention
 
@@ -62,64 +81,51 @@ For example, recently, because I am not a python expert, I spent a 2 hours to re
 - CSS/SCSS: dash-type
 
 # Tools
+
 - Node.js >= 14
 - Git
-- IDE that supports .editorconfig and eslint (I am using Intellji Idea)
-- A SQLite tool (I am using SQLite Expert Personal)
+- IDE that supports ESLint and EditorConfig (I am using Intellji Idea)
+- A SQLite tool (SQLite Expert Personal is suggested)
 
-# Install dependencies 
+# Install dependencies
 
 ```bash
-npm install --dev
+npm ci
 ```
 
-For npm@7, you need --legacy-peer-deps
+# How to start the Backend Dev Server
 
-```
-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
+- model/ (Object model, auto mapping to the database table name)
+- modules/ (Modified 3rd-party modules)
+- notification-providers/ (indivdual notification logic)
+- routers/ (Express Routers)
+- scoket-handler (Socket.io Handlers)
+- server.js (Server main logic)
 
-Start frontend dev server. Hot-reload enabled in this way. It binds to 0.0.0.0:3000.
+# How to start the Frontend Dev Server
 
-```bash
-npm run dev
-```
-
-PS: You can ignore those scss warnings, those warnings are from Bootstrap that I cannot fix.
-
-You can use Vue Devtool Chrome extension for debugging.
-
-After the frontend server started. It cannot connect to the websocket server even you have started the server. You need to tell the frontend that is a dev env by running this in DevTool console and refresh:
-
-```javascript
-localStorage.dev = "dev";
-```
-
-So that the frontend will try to connect websocket server in 3001.
-
-Alternately, you can specific NODE_ENV to "development".
+1. Set the env var `NODE_ENV` to "development".
+2. Start the frontend dev server by the following command.
+   ```bash
+   npm run dev
+   ```
+   It binds to `0.0.0.0:3000` by default.
 
+You can use Vue.js devtools Chrome extension for debugging.
 
 ## Build the frontend
 
@@ -131,22 +137,43 @@ 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
 
-1. create `patch{num}.sql` in `./db/`
-1. update `latestVersion` in `./server/database.js`
+1. Create `patch-{name}.sql` in `./db/`
+2. Add your patch filename in the `patchList` list in `./server/database.js`
 
 # Unit Test
 
-Yes, no unit test for now. I know it is very important, but at the same time my spare time is very limited. I want to implement my ideas first. I will go back to this in some points.
+It is an end-to-end testing. It is using Jest and Puppeteer.
 
+```
+npm run build
+npm test
+```
 
+By default, the Chromium window will be shown up during the test. Specifying `HEADLESS_TEST=1` for terminal environments.
 
-  
+# Update Dependencies
 
+Install `ncu`
+https://github.com/raineorshine/npm-check-updates
+
+```bash
+ncu -u -t patch
+npm install
+```
+
+Since previously updating vite 2.5.10 to 2.6.0 broke the application completely, from now on, it should update patch release version only. 
+
+Patch release = the third digit
+
+# Translations
+
+Please read: https://github.com/louislam/uptime-kuma/tree/master/src/languages

README.md

@@ -1,6 +1,7 @@
 # Uptime Kuma
 
-<a target="_blank" href="https://github.com/louislam/uptime-kuma"><img src="https://img.shields.io/github/stars/louislam/uptime-kuma" /></a> <a target="_blank" href="https://hub.docker.com/r/louislam/uptime-kuma"><img src="https://img.shields.io/docker/pulls/louislam/uptime-kuma" /></a> <a target="_blank" href="https://hub.docker.com/r/louislam/uptime-kuma"><img src="https://img.shields.io/docker/v/louislam/uptime-kuma/latest?label=docker%20image%20ver." /></a> <a target="_blank" href="https://github.com/louislam/uptime-kuma"><img src="https://img.shields.io/github/last-commit/louislam/uptime-kuma" /></a>
+<a target="_blank" href="https://github.com/louislam/uptime-kuma"><img src="https://img.shields.io/github/stars/louislam/uptime-kuma" /></a> <a target="_blank" href="https://hub.docker.com/r/louislam/uptime-kuma"><img src="https://img.shields.io/docker/pulls/louislam/uptime-kuma" /></a> <a target="_blank" href="https://hub.docker.com/r/louislam/uptime-kuma"><img src="https://img.shields.io/docker/v/louislam/uptime-kuma/latest?label=docker%20image%20ver." /></a> <a target="_blank" href="https://github.com/louislam/uptime-kuma"><img src="https://img.shields.io/github/last-commit/louislam/uptime-kuma" /></a>  <a target="_blank" href="https://opencollective.com/uptime-kuma"><img src="https://opencollective.com/uptime-kuma/total/badge.svg?label=Backers&color=brightgreen" /></a>
+
 
 <div align="center" width="100%">
     <img src="./public/icon.svg" width="128" alt="" />
@@ -8,7 +9,7 @@
 
 It is a self-hosted monitoring tool like "Uptime Robot".
 
-<img src="https://louislam.net/uptimekuma/1.jpg" width="512" alt="" />
+<img src="https://uptime.kuma.pet/img/dark.jpg" width="700" alt="" />
 
 ## 🥔 Live Demo
 
@@ -20,12 +21,11 @@ It is a 5 minutes live demo, all data will be deleted after that. The server is
 
 VPS is sponsored by Uptime Kuma sponsors on [Open Collective](https://opencollective.com/uptime-kuma)! Thank you so much!
 
-
 ## ⭐ Features
 
 * Monitoring uptime for HTTP(s) / TCP / Ping / DNS Record.
 * Fancy, Reactive, Fast UI/UX.
-* Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and [70+ notification services, click here for the full list](https://github.com/louislam/uptime-kuma/issues/284). 
+* 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)
 
@@ -45,6 +45,9 @@ Browse to http://localhost:3001 after started.
 Required Tools: Node.js >= 14, git and pm2.
 
 ```bash
+# Update your npm to the latest version
+npm install npm -g
+
 git clone https://github.com/louislam/uptime-kuma.git
 cd uptime-kuma
 npm run setup
@@ -65,7 +68,6 @@ 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:
@@ -84,9 +86,13 @@ https://github.com/louislam/uptime-kuma/projects/1
 
 ## 🖼 More Screenshots
 
-Dark Mode:
+Light Mode:
 
-<img src="https://user-images.githubusercontent.com/1336778/128710166-908f8d88-9256-43f3-9c49-bfc2c56011d2.png" width="400" alt="" />
+<img src="https://uptime.kuma.pet/img/light.jpg" width="512" alt="" />
+
+Status Page:
+
+<img src="https://user-images.githubusercontent.com/1336778/134628766-a3fe0981-0926-4285-ab46-891a21c3e4cb.png" width="512" alt="" />
 
 Settings Page:
 
@@ -107,15 +113,15 @@ Telegram Notification Sample:
 
 If you love this project, please consider giving me a ⭐.
 
-
 ## 🗣️ Discussion
 
-You can also discuss or ask for help in [Issues](https://github.com/louislam/uptime-kuma/issues).
-
-Alternatively, you can discuss in my original post on reddit: https://www.reddit.com/r/selfhosted/comments/oi7dc7/uptime_kuma_a_fancy_selfhosted_monitoring_tool_an/
-
-I think the real "Discussion" tab is hard to use, as it is reddit-like flow, I always missed new comments. 
+### 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
 
@@ -126,4 +132,3 @@ If you want to translate Uptime Kuma into your langauge, please read: https://gi
 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

@@ -5,10 +5,24 @@
 Use this section to tell people about which versions of your project are
 currently being supported with security updates.
 
+#### Uptime Kuma Versions:
 | Version | Supported          |
 | ------- | ------------------ |
-| 1.x.x  | :white_check_mark: |
+| 1.7.X  | :white_check_mark: |
+| < 1.7  | ❌ |
+
+#### Upgradable Docker Tags:
+| Tag | Supported          |
+| ------- | ------------------ |
+| 1 | :white_check_mark: |
+| 1-debian | :white_check_mark: |
+| 1-alpine | :white_check_mark: |
+| latest | :white_check_mark: |
+| debian | :white_check_mark: |
+| alpine | :white_check_mark: |
+| All other tags  | ❌ |
 
 ## 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.

babel.config.js

@@ -0,0 +1,7 @@
+const config = {};
+
+if (process.env.TEST_FRONTEND) {
+    config.presets = ["@babel/preset-env"];
+}
+
+module.exports = config;

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-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-monitor-push_token.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 push_token VARCHAR(20) DEFAULT NULL;
+
+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);

docker/alpine-base.dockerfile

@@ -0,0 +1,8 @@
+# DON'T UPDATE TO alpine3.13, 1.14, see #41.
+FROM node:14-alpine3.12
+WORKDIR /app
+
+# Install apprise, iputils for non-root ping, setpriv
+RUN apk add --no-cache iputils setpriv dumb-init python3 py3-cryptography py3-pip py3-six py3-yaml py3-click py3-markdown py3-requests py3-requests-oauthlib && \
+    pip3 --no-cache-dir install apprise && \
+    rm -rf /root/.cache

docker/debian-base.dockerfile

@@ -0,0 +1,12 @@
+# 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
+WORKDIR /app
+
+# Install Apprise, add sqlite3 cli for debugging in the future, iputils-ping for ping, util-linux for setpriv
+# Stupid python3 and python3-pip actually install a lot of useless things into Debian, specific --no-install-recommends to skip them, make the base even smaller than alpine!
+RUN apt update && \
+    apt --yes --no-install-recommends install python3 python3-pip python3-cryptography python3-six python3-yaml python3-click python3-markdown python3-requests python3-requests-oauthlib \
+        sqlite3 iputils-ping util-linux dumb-init && \
+    pip3 --no-cache-dir install apprise && \
+    rm -rf /var/lib/apt/lists/*

dockerfile

@@ -1,37 +1,51 @@
-# DON'T UPDATE TO node:14-bullseye-slim, see #372.
-FROM node:14-buster-slim AS build
+FROM louislam/uptime-kuma:base-debian AS build
 WORKDIR /app
 
-# split the sqlite install here, so that it can caches the arm prebuilt
-# do not modify it, since we don't want to re-compile the arm prebuilt again
-RUN apt update && \
-            apt --yes install python3 python3-pip python3-dev git g++ make && \
-            ln -s /usr/bin/python3 /usr/bin/python && \
-            npm install mapbox/node-sqlite3#593c9d  --build-from-source
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
 
 COPY . .
-RUN npm install --legacy-peer-deps && npm run build && npm prune --production
+RUN npm ci && \
+    npm run build && \
+    npm prune --production && \
+    chmod +x /app/extra/entrypoint.sh
 
-FROM node:14-bullseye-slim AS release
+
+FROM louislam/uptime-kuma:base-debian AS release
 WORKDIR /app
 
-# Install Apprise,
-# add sqlite3 cli for debugging in the future
-# iputils-ping for ping
-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 && \
-            pip3 --no-cache-dir install apprise && \
-            rm -rf /var/lib/apt/lists/*
-
 # Copy app files from build layer
-COPY  --from=build /app /app
+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 ["/usr/bin/dumb-init", "--", "extra/entrypoint.sh"]
 CMD ["node", "server/server.js"]
 
 FROM release AS nightly
 RUN npm run mark-as-nightly
+
+# Upload the artifact to Github
+FROM louislam/uptime-kuma:base-debian AS upload-artifact
+WORKDIR /
+RUN apt update && \
+    apt --yes install curl file
+
+ARG GITHUB_TOKEN
+ARG TARGETARCH
+ARG PLATFORM=debian
+ARG VERSION
+ARG FILE=$PLATFORM-$TARGETARCH-$VERSION.tar.gz
+ARG DIST=dist.tar.gz
+
+COPY --from=build /app /app
+RUN chmod +x /app/extra/upload-github-release-asset.sh
+
+# Full Build
+# RUN tar -zcvf $FILE app
+# RUN /app/extra/upload-github-release-asset.sh github_api_token=$GITHUB_TOKEN owner=louislam repo=uptime-kuma tag=$VERSION filename=$FILE
+
+# Dist only
+RUN cd /app && tar -zcvf $DIST dist
+RUN /app/extra/upload-github-release-asset.sh github_api_token=$GITHUB_TOKEN owner=louislam repo=uptime-kuma tag=$VERSION filename=$DIST
+

dockerfile-alpine

@@ -1,32 +1,25 @@
-# DON'T UPDATE TO alpine3.13, 1.14, see #41.
-FROM node:14-alpine3.12 AS build
+FROM louislam/uptime-kuma:base-alpine 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 git && \
-            ln -s /usr/bin/python3 /usr/bin/python && \
-            npm install mapbox/node-sqlite3#593c9d && \
-            apk del .build-deps && \
-            rm -f /usr/bin/python
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
 
 COPY . .
-RUN npm install --legacy-peer-deps && npm run build && npm prune --production
+RUN npm ci && \
+    npm run build && \
+    npm prune --production && \
+    chmod +x /app/extra/entrypoint.sh
 
 
-FROM node:14-alpine3.12 AS release
+FROM louislam/uptime-kuma:base-alpine AS release
 WORKDIR /app
 
-# 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 && \
-            pip3 --no-cache-dir install apprise && \
-            rm -rf /root/.cache
-
 # Copy app files from build layer
-COPY  --from=build /app /app
+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 ["/usr/bin/dumb-init", "--", "extra/entrypoint.sh"]
 CMD ["node", "server/server.js"]
 
 FROM release AS nightly

extra/download-dist.js

@@ -0,0 +1,57 @@
+console.log("Downloading dist");
+const https = require("https");
+const tar = require("tar");
+
+const packageJSON = require("../package.json");
+const fs = require("fs");
+const version = packageJSON.version;
+
+const filename = "dist.tar.gz";
+
+const url = `https://github.com/louislam/uptime-kuma/releases/download/${version}/${filename}`;
+download(url);
+
+function download(url) {
+    console.log(url);
+
+    https.get(url, (response) => {
+        if (response.statusCode === 200) {
+            console.log("Extracting dist...");
+
+            if (fs.existsSync("./dist")) {
+
+                if (fs.existsSync("./dist-backup")) {
+                    fs.rmdirSync("./dist-backup", {
+                        recursive: true
+                    });
+                }
+
+                fs.renameSync("./dist", "./dist-backup");
+            }
+
+            const tarStream = tar.x({
+                cwd: "./",
+            });
+
+            tarStream.on("close", () => {
+                fs.rmdirSync("./dist-backup", {
+                    recursive: true
+                });
+                console.log("Done");
+            });
+
+            tarStream.on("error", () => {
+                if (fs.existsSync("./dist-backup")) {
+                    fs.renameSync("./dist-backup", "./dist");
+                }
+                console.log("Done");
+            });
+
+            response.pipe(tarStream);
+        } else if (response.statusCode === 302) {
+            download(response.headers.location);
+        } else {
+            console.log("dist not found");
+        }
+    });
+}

extra/entrypoint.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env sh
+
+# set -e Exit the script if an error happens
+set -e
+PUID=${PUID=0}
+PGID=${PGID=0}
+
+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/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/update-language-files/index.js

@@ -1,4 +1,4 @@
-// Need to use es6 to read language files
+// Need to use ES6 to read language files
 
 import fs from "fs";
 import path from "path";
@@ -14,6 +14,7 @@ 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) {
@@ -24,8 +25,9 @@ const copyRecursiveSync = function (src, dest) {
         fs.copyFileSync(src, dest);
     }
 };
-console.log(process.argv)
-const baseLangCode = process.argv[2] || "zh-HK";
+
+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");
@@ -33,46 +35,50 @@ 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);
+console.log("Files:", files);
+
 for (const file of files) {
-    if (file.endsWith(".js")) {
-        console.log("Processing " + file);
-        const lang = await import("./languages/" + file);
+    if (!file.endsWith(".js")) {
+        console.log("Skipping " + file)
+        continue;
+    }
 
-        let obj;
+    console.log("Processing " + file);
+    const lang = await import("./languages/" + file);
 
-        if (lang.default) {
-            console.log("is js module");
-            obj = lang.default;
-        } else {
-            console.log("empty file");
-            obj = {
-                languageName: "<Your Language name in your language (not in English)>"
-            };
-        }
-
-        // En first
-        for (const key in en) {
-            if (! obj[key]) {
-                obj[key] = en[key];
-            }
+    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);
-
     }
+
+    const code = "export default " + util.inspect(obj, {
+        depth: null,
+    });
+
+    fs.writeFileSync(`../../src/languages/${file}`, code);
 }
 
 fs.rmdirSync("./languages", { recursive: true });
-console.log("Done, fix the format by eslint now");
+console.log("Done. Fixing formatting by ESLint...");

extra/update-version.js

@@ -19,6 +19,7 @@ if (! newVersion) {
 const exists = tagExists(newVersion);
 
 if (! exists) {
+
     // Process package.json
     pkg.version = newVersion;
     pkg.scripts.setup = pkg.scripts.setup.replaceAll(oldVersion, newVersion);
@@ -29,8 +30,11 @@ if (! exists) {
 
     commit(newVersion);
     tag(newVersion);
+
+    updateWiki(oldVersion, newVersion);
+
 } else {
-    console.log("version exists")
+    console.log("version exists");
 }
 
 function commit(version) {
@@ -38,16 +42,16 @@ function commit(version) {
 
     let res = child_process.spawnSync("git", ["commit", "-m", msg, "-a"]);
     let stdout = res.stdout.toString().trim();
-    console.log(stdout)
+    console.log(stdout);
 
     if (stdout.includes("no changes added to commit")) {
-        throw new Error("commit error")
+        throw new Error("commit error");
     }
 }
 
 function tag(version) {
     let res = child_process.spawnSync("git", ["tag", version]);
-    console.log(res.stdout.toString().trim())
+    console.log(res.stdout.toString().trim());
 }
 
 function tagExists(version) {
@@ -59,3 +63,38 @@ function tagExists(version) {
 
     return res.stdout.toString().trim() === version;
 }
+
+function updateWiki(oldVersion, newVersion) {
+    const wikiDir = "./tmp/wiki";
+    const howToUpdateFilename = "./tmp/wiki/🆙-How-to-Update.md";
+
+    safeDelete(wikiDir);
+
+    child_process.spawnSync("git", ["clone", "https://github.com/louislam/uptime-kuma.wiki.git", wikiDir]);
+    let content = fs.readFileSync(howToUpdateFilename).toString();
+    content = content.replaceAll(`git checkout ${oldVersion}`, `git checkout ${newVersion}`);
+    fs.writeFileSync(howToUpdateFilename, content);
+
+    child_process.spawnSync("git", ["add", "-A"], {
+        cwd: wikiDir,
+    });
+
+    child_process.spawnSync("git", ["commit", "-m", `Update to ${newVersion} from ${oldVersion}`], {
+        cwd: wikiDir,
+    });
+
+    console.log("Pushing to Github");
+    child_process.spawnSync("git", ["push"], {
+        cwd: wikiDir,
+    });
+
+    safeDelete(wikiDir);
+}
+
+function safeDelete(dir) {
+    if (fs.existsSync(dir)) {
+        fs.rmdirSync(dir, {
+            recursive: true,
+        });
+    }
+}

extra/upload-github-release-asset.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+#
+# Author: Stefan Buck
+# License: MIT
+# https://gist.github.com/stefanbuck/ce788fee19ab6eb0b4447a85fc99f447
+#
+#
+# This script accepts the following parameters:
+#
+# * owner
+# * repo
+# * tag
+# * filename
+# * github_api_token
+#
+# Script to upload a release asset using the GitHub API v3.
+#
+# Example:
+#
+# upload-github-release-asset.sh github_api_token=TOKEN owner=stefanbuck repo=playground tag=v0.1.0 filename=./build.zip
+#
+
+# Check dependencies.
+set -e
+xargs=$(which gxargs || which xargs)
+
+# Validate settings.
+[ "$TRACE" ] && set -x
+
+CONFIG=$@
+
+for line in $CONFIG; do
+  eval "$line"
+done
+
+# Define variables.
+GH_API="https://api.github.com"
+GH_REPO="$GH_API/repos/$owner/$repo"
+GH_TAGS="$GH_REPO/releases/tags/$tag"
+AUTH="Authorization: token $github_api_token"
+WGET_ARGS="--content-disposition --auth-no-challenge --no-cookie"
+CURL_ARGS="-LJO#"
+
+if [[ "$tag" == 'LATEST' ]]; then
+  GH_TAGS="$GH_REPO/releases/latest"
+fi
+
+# Validate token.
+curl -o /dev/null -sH "$AUTH" $GH_REPO || { echo "Error: Invalid repo, token or network issue!";  exit 1; }
+
+# Read asset tags.
+response=$(curl -sH "$AUTH" $GH_TAGS)
+
+# Get ID of the asset based on given filename.
+eval $(echo "$response" | grep -m 1 "id.:" | grep -w id | tr : = | tr -cd '[[:alnum:]]=')
+[ "$id" ] || { echo "Error: Failed to get release id for tag: $tag"; echo "$response" | awk 'length($0)<100' >&2; exit 1; }
+
+# Upload asset
+echo "Uploading asset... "
+
+# Construct url
+GH_ASSET="https://uploads.github.com/repos/$owner/$repo/releases/$id/assets?name=$(basename $filename)"
+
+curl "$GITHUB_OAUTH_BASIC" --data-binary @"$filename" -H "Authorization: token $github_api_token" -H "Content-Type: application/octet-stream" $GH_ASSET

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>

jest-frontend.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    "rootDir": ".",
+    "testRegex": "./test/frontend.spec.js",
+};
+

jest-puppeteer.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "launch": {
+        "headless": process.env.HEADLESS_TEST || false,
+        "userDataDir": "./data/test-chrome-profile",
+    }
+};

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    "verbose": true,
+    "preset": "jest-puppeteer",
+    "globals": {
+        "__DEV__": true
+    },
+    "testRegex": "./test/e2e.spec.js",
+    "rootDir": ".",
+    "testTimeout": 30000,
+};
+

kubernetes/README.md

@@ -1,28 +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
+It creates a certificate with the specified Issuer and creates the Ingress for the Uptime-Kuma ClusterIP-Service.
+
+## What do I have to edit?
 
-## 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
+- 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
+- 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:
+## How To use
 
-- install [kustomize](https://kubectl.docs.kubernetes.io/installation/kustomize/)
+- 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```
+- 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.
+Now you should see some k8s magic and Uptime-Kuma should be available at the specified address.

kubernetes/uptime-kuma/deployment.yml

@@ -30,6 +30,9 @@ spec:
               command:
                 - node
                 - extra/healthcheck.js
+            initialDelaySeconds: 180
+            periodSeconds: 60
+            timeoutSeconds: 30
           readinessProbe:
             httpGet:
               path: /

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.6.1",
+    "version": "1.8.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -10,20 +10,33 @@
         "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-server-dev": "cross-env NODE_ENV=development node server/server.js",
         "build": "vite build",
+        "test": "node test/prepare-test-server.js && node server/server.js --port=3002 --data-dir=./data/test/ --test",
+        "test-with-build": "npm run build && npm test",
+        "jest": "node test/prepare-jest.js && npm run jest-frontend && jest ",
+        "jest-frontend": "cross-env TEST_FRONTEND=1 jest --config=./jest-frontend.config.js",
+        "tsc": "tsc",
         "vite-preview-dist": "vite preview --host",
         "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.6.1-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.6.1 -t louislam/uptime-kuma:debian -t louislam/uptime-kuma:1-debian -t louislam/uptime-kuma:1.6.1-debian --target release . --push",
+        "build-docker-alpine-base": "docker buildx build -f docker/alpine-base.dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:base-alpine . --push",
+        "build-docker-debian-base": "docker buildx build -f docker/debian-base.dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:base-debian . --push",
+        "build-docker-alpine": "docker buildx build -f 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.8.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.8.0 -t louislam/uptime-kuma:debian -t louislam/uptime-kuma:1-debian -t louislam/uptime-kuma:1.8.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-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.6.1 && npm install --legacy-peer-deps && node node_modules/esbuild/install.js && npm run build && npm prune",
+        "upload-artifacts": "docker buildx build --platform linux/amd64 -t louislam/uptime-kuma:upload-artifact --build-arg GITHUB_TOKEN --target upload-artifact . --progress plain",
+        "setup": "git checkout 1.8.0 && npm ci --production && npm run download-dist",
+        "download-dist": "node extra/download-dist.js",
         "update-version": "node extra/update-version.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
@@ -32,61 +45,79 @@
         "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-nodejs16": "docker build --progress plain -f test/ubuntu-nodejs16.dockerfile .",
         "simple-dns-server": "node extra/simple-dns-server.js",
-        "update-language-files": "cd extra/update-language-files && node index.js %npm_config_base_lang% && eslint ../../src/languages/**.js --fix"
+        "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",
-        "@popperjs/core": "^2.9.3",
-        "args-parser": "^1.3.0",
-        "axios": "^0.21.1",
-        "bcryptjs": "^2.4.3",
-        "bootstrap": "^5.1.0",
-        "chart.js": "^3.5.1",
-        "chartjs-adapter-dayjs": "^1.0.0",
-        "command-exists": "^1.2.9",
-        "compare-versions": "^3.6.0",
-        "dayjs": "^1.10.6",
-        "express": "^4.17.1",
-        "express-basic-auth": "^1.2.0",
-        "form-data": "^4.0.0",
-        "http-graceful-shutdown": "^3.1.4",
-        "jsonwebtoken": "^8.5.1",
-        "nodemailer": "^6.6.3",
-        "password-hash": "^1.2.2",
-        "prom-client": "^13.2.0",
-        "prometheus-api-metrics": "^3.2.0",
+        "@fortawesome/fontawesome-svg-core": "~1.2.36",
+        "@fortawesome/free-regular-svg-icons": "~5.15.4",
+        "@fortawesome/free-solid-svg-icons": "~5.15.4",
+        "@fortawesome/vue-fontawesome": "~3.0.0-4",
+        "@louislam/sqlite3": "~6.0.0",
+        "@popperjs/core": "~2.10.2",
+        "args-parser": "~1.3.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",
+        "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.4",
+        "jsonwebtoken": "~8.5.1",
+        "nodemailer": "~6.6.5",
+        "notp": "~2.0.3",
+        "password-hash": "~1.2.2",
+        "postcss-rtlcss": "~3.4.1",
+        "postcss-scss": "~4.0.1",
+        "prom-client": "~13.2.0",
+        "prometheus-api-metrics": "~3.2.0",
+        "qrcode": "~1.4.4",
         "redbean-node": "0.1.2",
-        "socket.io": "^4.2.0",
-        "socket.io-client": "^4.2.0",
-        "sqlite3": "github:mapbox/node-sqlite3#593c9d",
-        "tcp-ping": "^0.1.1",
-        "v-pagination-3": "^0.1.6",
-        "vue": "^3.2.8",
-        "vue-chart-3": "^0.5.7",
-        "vue-confirm-dialog": "^1.0.2",
-        "vue-i18n": "^9.1.7",
-        "vue-multiselect": "^3.0.0-alpha.2",
-        "vue-router": "^4.0.11",
-        "vue-toastification": "^2.0.0-rc.1"
+        "socket.io": "~4.2.0",
+        "socket.io-client": "~4.2.0",
+        "tar": "^6.1.11",
+        "tcp-ping": "~0.1.1",
+        "thirty-two": "~1.0.2",
+        "timezones-list": "~3.0.1",
+        "v-pagination-3": "~0.1.6",
+        "vue": "next",
+        "vue-chart-3": "~0.5.8",
+        "vue-confirm-dialog": "~1.0.2",
+        "vue-contenteditable": "~3.0.4",
+        "vue-i18n": "~9.1.9",
+        "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",
+        "vuedraggable": "~4.1.0"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.15.0",
-        "@types/bootstrap": "^5.1.2",
-        "@vitejs/plugin-legacy": "^1.5.2",
-        "@vitejs/plugin-vue": "^1.6.0",
-        "@vue/compiler-sfc": "^3.2.6",
-        "core-js": "^3.17.0",
-        "dns2": "^2.0.1",
-        "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^7.17.0",
-        "sass": "^1.38.2",
-        "stylelint": "^13.13.1",
-        "stylelint-config-standard": "^22.0.0",
-        "typescript": "^4.4.2",
-        "vite": "^2.5.3"
+        "@babel/eslint-parser": "~7.15.7",
+        "@babel/preset-env": "^7.15.8",
+        "@types/bootstrap": "~5.1.6",
+        "@vitejs/plugin-legacy": "~1.6.1",
+        "@vitejs/plugin-vue": "~1.9.2",
+        "@vue/compiler-sfc": "~3.2.19",
+        "core-js": "~3.18.1",
+        "cross-env": "~7.0.3",
+        "dns2": "~2.0.1",
+        "eslint": "~7.32.0",
+        "eslint-plugin-vue": "~7.18.0",
+        "jest": "~27.2.4",
+        "jest-puppeteer": "~6.0.0",
+        "puppeteer": "~10.4.0",
+        "sass": "~1.42.1",
+        "stylelint": "~13.13.1",
+        "stylelint-config-standard": "~22.0.0",
+        "typescript": "~4.4.3",
+        "vite": "~2.6.4"
     }
 }

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

@@ -1,6 +1,5 @@
 const { setSetting } = require("./util-server");
 const axios = require("axios");
-const { isDev } = require("../src/util");
 
 exports.version = require("../package.json").version;
 exports.latestVersion = null;
@@ -18,11 +17,10 @@ exports.startInterval = () => {
 
             // For debug
             if (process.env.TEST_CHECK_VERSION === "1") {
-                res.data.version = "1000.0.0"
+                res.data.version = "1000.0.0";
             }
 
             exports.latestVersion = res.data.version;
-            console.log("Latest Version: " + exports.latestVersion);
         } catch (_) { }
 
     };

server/client.js

@@ -4,6 +4,8 @@
 const { TimeLogger } = require("../src/util");
 const { R } = require("redbean-node");
 const { io } = require("./server");
+const { setting } = require("./util-server");
+const checkVersion = require("./check-version");
 
 async function sendNotificationList(socket) {
     const timeLogger = new TimeLogger();
@@ -14,10 +16,10 @@ async function sendNotificationList(socket) {
     ]);
 
     for (let bean of list) {
-        result.push(bean.export())
+        result.push(bean.export());
     }
 
-    io.to(socket.userID).emit("notificationList", result)
+    io.to(socket.userID).emit("notificationList", result);
 
     timeLogger.print("Send Notification List");
 
@@ -39,7 +41,7 @@ async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite =
         LIMIT 100
     `, [
         monitorID,
-    ])
+    ]);
 
     let result = list.reverse();
 
@@ -69,7 +71,7 @@ async function sendImportantHeartbeatList(socket, monitorID, toUser = false, ove
         LIMIT 500
     `, [
         monitorID,
-    ])
+    ]);
 
     timeLogger.print(`[Monitor: ${monitorID}] sendImportantHeartbeatList`);
 
@@ -81,8 +83,18 @@ async function sendImportantHeartbeatList(socket, monitorID, toUser = false, ove
 
 }
 
+async function sendInfo(socket) {
+    socket.emit("info", {
+        version: checkVersion.version,
+        latestVersion: checkVersion.latestVersion,
+        primaryBaseURL: await setting("primaryBaseURL")
+    });
+}
+
 module.exports = {
     sendNotificationList,
     sendImportantHeartbeatList,
     sendHeartbeatList,
-}
+    sendInfo
+};
+

server/database.js

@@ -3,11 +3,25 @@ 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");
 
+/**
+ * Database & App Data Folder
+ */
 class Database {
 
     static templatePath = "./db/kuma.db";
+
+    /**
+     * Data Dir (Default: ./data)
+     */
     static dataDir;
+
+    /**
+     * User Upload Dir (Default: ./data/upload)
+     */
+    static uploadDir;
+
     static path;
 
     /**
@@ -30,39 +44,71 @@ class Database {
     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,
+        "patch-monitor-push_token.sql": true,
     }
 
     /**
      * The finally version should be 10 after merged tag feature
      * @deprecated Use patchList for any new feature
      */
-    static latestVersion = 9;
+    static latestVersion = 10;
 
     static noReject = true;
 
+    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() {
         const acquireConnectionTimeout = 120 * 1000;
 
-        R.setup("sqlite", {
-            filename: Database.path,
+        const Dialect = require("knex/lib/dialects/sqlite3/index.js");
+        Dialect.prototype._driver = () => require("@louislam/sqlite3");
+
+        const knexInstance = knex({
+            client: Dialect,
+            connection: {
+                filename: Database.path,
+                acquireConnectionTimeout: acquireConnectionTimeout,
+            },
             useNullAsDefault: true,
-            acquireConnectionTimeout: acquireConnectionTimeout,
-        }, {
-            min: 1,
-            max: 1,
-            idleTimeoutMillis: 120 * 1000,
-            propagateCreateError: false,
-            acquireTimeoutMillis: acquireConnectionTimeout,
+            pool: {
+                min: 1,
+                max: 1,
+                idleTimeoutMillis: 120 * 1000,
+                propagateCreateError: false,
+                acquireTimeoutMillis: acquireConnectionTimeout,
+            }
         });
 
+        R.setup(knexInstance);
+
         if (process.env.SQL_LOG === "1") {
             R.debug(true);
         }
 
         // Auto map the model to a bean object
-        R.freeze(true)
+        R.freeze(true);
         await R.autoloadModels("./server/model");
 
+        await R.exec("PRAGMA foreign_keys = ON");
         // Change to WAL
         await R.exec("PRAGMA journal_mode = WAL");
         await R.exec("PRAGMA cache_size = -12000");
@@ -70,6 +116,7 @@ class Database {
         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() {
@@ -87,7 +134,7 @@ 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");
 
             this.backup(version);
 
@@ -102,11 +149,12 @@ class Database {
                 }
             } catch (ex) {
                 await Database.close();
-                this.restore();
 
-                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);
             }
         }
@@ -131,7 +179,7 @@ class Database {
 
         try {
             for (let sqlFilename in this.patchList) {
-                await this.patch2Recursion(sqlFilename, databasePatchedFiles)
+                await this.patch2Recursion(sqlFilename, databasePatchedFiles);
             }
 
             if (this.patched) {
@@ -140,11 +188,13 @@ class Database {
 
         } catch (ex) {
             await Database.close();
-            this.restore();
 
-            console.error(ex)
+            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);
         }
 
@@ -184,7 +234,7 @@ class Database {
             console.log(sqlFilename + " is patched successfully");
 
         } else {
-            console.log(sqlFilename + " is already patched, skip");
+            debug(sqlFilename + " is already patched, skip");
         }
     }
 
@@ -202,12 +252,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) => {
@@ -215,7 +265,7 @@ class Database {
             })
             .filter((statement) => {
                 return statement !== "";
-            })
+            });
 
         for (let statement of statements) {
             await R.exec(statement);
@@ -261,7 +311,7 @@ class Database {
      */
     static backup(version) {
         if (! this.backupPath) {
-            console.info("Backup the db")
+            console.info("Backup the db");
             this.backupPath = this.dataDir + "kuma.db.bak" + version;
             fs.copyFileSync(Database.path, this.backupPath);
 

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,17 +1,19 @@
 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, 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 { demoMode } = require("../server");
 const version = require("../../package.json").version;
+const apicache = require("../modules/apicache");
 
 /**
  * status:
@@ -20,18 +22,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,6 +62,7 @@ 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(),
@@ -51,7 +71,9 @@ class Monitor extends BeanModel {
             dns_resolve_type: this.dns_resolve_type,
             dns_resolve_server: this.dns_resolve_server,
             dns_last_result: this.dns_last_result,
+            pushToken: this.pushToken,
             notificationIDList,
+            tags: tags,
         };
     }
 
@@ -60,7 +82,7 @@ class Monitor extends BeanModel {
      * @returns {boolean}
      */
     getIgnoreTls() {
-        return Boolean(this.ignoreTls)
+        return Boolean(this.ignoreTls);
     }
 
     /**
@@ -90,12 +112,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;
@@ -131,7 +153,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
@@ -141,12 +163,14 @@ 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")
+                    if (process.env.TIMELOGGER === "1") {
+                        debug("Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms");
+                    }
 
                     if (this.type === "http") {
                         bean.status = UP;
@@ -156,26 +180,26 @@ 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();
@@ -195,7 +219,7 @@ class Monitor extends BeanModel {
                         dnsRes.forEach(record => {
                             dnsMessage += `Hostname: ${record.exchange} - Priority: ${record.priority} | `;
                         });
-                        dnsMessage = dnsMessage.slice(0, -2)
+                        dnsMessage = dnsMessage.slice(0, -2);
                     } else if (this.dns_resolve_type == "NS") {
                         dnsMessage += "Servers: ";
                         dnsMessage += dnsRes.join(" | ");
@@ -205,7 +229,7 @@ class Monitor extends BeanModel {
                         dnsRes.forEach(record => {
                             dnsMessage += `Name: ${record.name} | Port: ${record.port} | Priority: ${record.priority} | Weight: ${record.weight} | `;
                         });
-                        dnsMessage = dnsMessage.slice(0, -2)
+                        dnsMessage = dnsMessage.slice(0, -2);
                     }
 
                     if (this.dnsLastResult !== dnsMessage) {
@@ -217,6 +241,28 @@ class Monitor extends BeanModel {
 
                     bean.msg = dnsMessage;
                     bean.status = UP;
+                } else if (this.type === "push") {      // Type: Push
+                    const time = R.isoDateTime(dayjs.utc().subtract(this.interval, "second"));
+
+                    let heartbeatCount = await R.count("heartbeat", " monitor_id = ? AND time > ? ", [
+                        this.id,
+                        time
+                    ]);
+
+                    debug("heartbeatCount" + heartbeatCount + " " + time);
+
+                    if (heartbeatCount <= 0) {
+                        throw new Error("No heartbeat in the time window");
+                    } else {
+                        // No need to insert successful heartbeat for push type, so end here
+                        retries = 0;
+                        this.heartbeatInterval = setTimeout(beat, this.interval * 1000);
+                        return;
+                    }
+
+                } else {
+                    bean.msg = "Unknown Monitor Type";
+                    bean.status = PENDING;
                 }
 
                 if (this.isUpsideDown()) {
@@ -244,6 +290,8 @@ class Monitor extends BeanModel {
                 }
             }
 
+            let beatInterval = this.interval;
+
             // * ? -> ANY STATUS = important [isFirstBeat]
             // UP -> PENDING = not important
             // * UP -> DOWN = important
@@ -268,25 +316,28 @@ 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.log(e);
                         }
                     }
+
+                    // Clear Status Page Cache
+                    apicache.clear();
                 }
 
             } else {
@@ -294,15 +345,18 @@ class Monitor extends BeanModel {
             }
 
             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 > 0) {
+                    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}`);
             }
 
             io.to(this.user_id).emit("heartbeat", bean.toJSON());
-            Monitor.sendStats(io, this.id, this.user_id)
+            Monitor.sendStats(io, this.id, this.user_id);
 
             await R.store(bean);
             prometheus.update(bean, tlsInfo);
@@ -310,12 +364,27 @@ class Monitor extends BeanModel {
             previousBeat = bean;
 
             if (! this.isStop) {
-                this.heartbeatInterval = setTimeout(beat, this.interval * 1000);
+
+                if (demoMode) {
+                    if (beatInterval < 20) {
+                        console.log("beat interval too low, reset to 20s");
+                        beatInterval = 20;
+                    }
+                }
+
+                this.heartbeatInterval = setTimeout(beat, beatInterval * 1000);
             }
 
-        }
+        };
 
-        beat();
+        // Delay Push Type
+        if (this.type === "push") {
+            setTimeout(() => {
+                beat();
+            }, this.interval * 1000);
+        } else {
+            beat();
+        }
     }
 
     stop() {
@@ -406,7 +475,7 @@ 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();
 
         const startTime = R.isoDateTime(dayjs.utc().subtract(duration, "hour"));
@@ -459,14 +528,24 @@ class Monitor extends BeanModel {
         } else {
             // 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 ]));
-            console.log("here???" + status);
+
             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);
     }
+
 }
 
 module.exports = Monitor;

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

@@ -7,7 +7,7 @@ class Discord extends NotificationProvider {
     name = "discord";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
 
         try {
             const discordDisplayName = notification.discordUsername || "Uptime Kuma";
@@ -62,6 +62,11 @@ class Discord extends NotificationProvider {
                         ],
                     }],
                 }
+
+                if (notification.discordPrefixMessage) {
+                    discorddowndata.content = notification.discordPrefixMessage;
+                }
+
                 await axios.post(notification.discordWebhookUrl, discorddowndata)
                 return okMsg;
 
@@ -92,6 +97,11 @@ class Discord extends NotificationProvider {
                         ],
                     }],
                 }
+
+                if (notification.discordPrefixMessage) {
+                    discordupdata.content = notification.discordPrefixMessage;
+                }
+
                 await axios.post(notification.discordWebhookUrl, discordupdata)
                 return okMsg;
             }

server/notification-providers/gotify.js

@@ -6,7 +6,7 @@ class Gotify extends NotificationProvider {
     name = "gotify";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         try {
             if (notification.gotifyserverurl && notification.gotifyserverurl.endsWith("/")) {
                 notification.gotifyserverurl = notification.gotifyserverurl.slice(0, -1);

server/notification-providers/line.js

@@ -7,7 +7,7 @@ class Line extends NotificationProvider {
     name = "line";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         try {
             let lineAPIUrl = "https://api.line.me/v2/bot/message/push";
             let config = {

server/notification-providers/lunasea.js

@@ -7,7 +7,7 @@ class LunaSea extends NotificationProvider {
     name = "lunasea";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         let lunaseadevice = "https://notify.lunasea.app/v1/custom/device/" + notification.lunaseaDevice
 
         try {

server/notification-providers/matrix.js

@@ -0,0 +1,45 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+const Crypto = require("crypto");
+const { debug } = require("../../src/util");
+
+class Matrix extends NotificationProvider {
+    name = "matrix";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully.";
+
+        const size = 20;
+        const randomString = encodeURIComponent(
+            Crypto
+                .randomBytes(size)
+                .toString("base64")
+                .slice(0, size)
+        );
+
+        debug("Random String: " + randomString);
+
+        const roomId = encodeURIComponent(notification.internalRoomId);
+
+        debug("Matrix Room ID: " + roomId);
+
+        try {
+            let config = {
+                headers: {
+                    "Authorization": `Bearer ${notification.accessToken}`,
+                }
+            };
+            let data = {
+                "msgtype": "m.text",
+                "body": msg
+            };
+
+            await axios.put(`${notification.homeserverUrl}/_matrix/client/r0/rooms/${roomId}/send/m.room.message/${randomString}`, data, config);
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = Matrix;

server/notification-providers/mattermost.js

@@ -7,7 +7,7 @@ class Mattermost extends NotificationProvider {
     name = "mattermost";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         try {
             const mattermostUserName = notification.mattermostusername || "Uptime Kuma";
             // If heartbeatJSON is null, assume we're testing.

server/notification-providers/octopush.js

@@ -6,30 +6,54 @@ class Octopush extends NotificationProvider {
     name = "octopush";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        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
+        // Default - V2
+            if (notification.octopushVersion == 2 || !notification.octopushVersion) {
+                let config = {
+                    headers: {
+                        "api-key": notification.octopushAPIKey,
+                        "api-login": notification.octopushLogin,
+                        "cache-control": "no-cache"
                     }
-                ],
-                //octopush not supporting non ascii char
-                "text": msg.replace(/[^\x00-\x7F]/g, ""),
-                "type": notification.octopushSMSType,
-                "purpose": "alert",
-                "sender": notification.octopushSenderName
-            };
+                };
+                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)
+            } else if (notification.octopushVersion == 1) {
+                let data = {
+                    "user_login": notification.octopushDMLogin,
+                    "api_key": notification.octopushDMAPIKey,
+                    "sms_recipients": notification.octopushDMPhoneNumber,
+                    "sms_sender": notification.octopushDMSenderName,
+                    "sms_type": (notification.octopushDMSMSType == "sms_premium") ? "FR" : "XXX",
+                    "transactional": "1",
+                    //octopush not supporting non ascii char
+                    "sms_text": msg.replace(/[^\x00-\x7F]/g, ""),
+                };
+
+                let config = {
+                    headers: {
+                        "cache-control": "no-cache"
+                    },
+                    params: data
+                };
+                await axios.post("https://www.octopush-dm.com/api/sms/json", {}, config)
+            } else {
+                throw new Error("Unknown Octopush version!");
+            }
 
-            await axios.post("https://api.octopush.com/v1/public/sms-campaign/send", data, config)
             return okMsg;
         } catch (error) {
             this.throwGeneralAxiosError(error);

server/notification-providers/promosms.js

@@ -0,0 +1,41 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class PromoSMS extends NotificationProvider {
+
+    name = "promosms";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully.";
+
+        try {
+            let config = {
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": "Basic " + Buffer.from(notification.promosmsLogin + ":" + notification.promosmsPassword).toString('base64'),
+                    "Accept": "text/json",
+                }
+            };
+            let data = {
+                "recipients": [ notification.promosmsPhoneNumber ],
+                //Lets remove non ascii char
+                "text": msg.replace(/[^\x00-\x7F]/g, ""),
+                "type": Number(notification.promosmsSMSType),
+                "sender": notification.promosmsSenderName
+            };
+
+            let resp = await axios.post("https://promosms.com/api/rest/v3_2/sms", data, config);
+
+            if (resp.data.response.status !== 0) {
+                let error = "Something gone wrong. Api returned " + resp.data.response.status + ".";
+                this.throwGeneralAxiosError(error);
+            }
+            
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = PromoSMS;

server/notification-providers/pushbullet.js

@@ -8,7 +8,7 @@ class Pushbullet extends NotificationProvider {
     name = "pushbullet";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
 
         try {
             let pushbulletUrl = "https://api.pushbullet.com/v2/pushes";

server/notification-providers/pushover.js

@@ -6,7 +6,7 @@ class Pushover extends NotificationProvider {
     name = "pushover";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         let pushoverlink = "https://api.pushover.net/1/messages.json"
 
         try {

server/notification-providers/pushy.js

@@ -6,7 +6,7 @@ class Pushy extends NotificationProvider {
     name = "pushy";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
 
         try {
             await axios.post(`https://api.pushy.me/push?api_key=${notification.pushyAPIKey}`, {

server/notification-providers/rocket-chat.js

@@ -1,25 +1,29 @@
 const NotificationProvider = require("./notification-provider");
 const axios = require("axios");
+const Slack = require("./slack");
+const { setting } = require("../util-server");
+const { getMonitorRelativeURL, UP, DOWN } = require("../../src/util");
 
 class RocketChat extends NotificationProvider {
 
     name = "rocket.chat";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         try {
             if (heartbeatJSON == null) {
                 let data = {
-                    "text": "Uptime Kuma Rocket.chat testing successful.",
+                    "text": msg,
                     "channel": notification.rocketchannel,
                     "username": notification.rocketusername,
                     "icon_emoji": notification.rocketiconemo,
-                }
-                await axios.post(notification.rocketwebhookURL, data)
+                };
+                await axios.post(notification.rocketwebhookURL, data);
                 return okMsg;
             }
 
             const time = heartbeatJSON["time"];
+
             let data = {
                 "text": "Uptime Kuma Alert",
                 "channel": notification.rocketchannel,
@@ -28,16 +32,32 @@ class RocketChat extends NotificationProvider {
                 "attachments": [
                     {
                         "title": "Uptime Kuma Alert *Time (UTC)*\n" + time,
-                        "title_link": notification.rocketbutton,
                         "text": "*Message*\n" + msg,
-                        "color": "#32cd32"
                     }
                 ]
+            };
+
+            // Color
+            if (heartbeatJSON.status === DOWN) {
+                data.attachments[0].color = "#ff0000";
+            } else {
+                data.attachments[0].color = "#32cd32";
             }
-            await axios.post(notification.rocketwebhookURL, data)
+
+            if (notification.rocketbutton) {
+                await Slack.deprecateURL(notification.rocketbutton);
+            }
+
+            const baseURL = await setting("primaryBaseURL");
+
+            if (baseURL) {
+                data.attachments[0].title_link = baseURL + getMonitorRelativeURL(monitorJSON.id);
+            }
+
+            await axios.post(notification.rocketwebhookURL, data);
             return okMsg;
         } catch (error) {
-            this.throwGeneralAxiosError(error)
+            this.throwGeneralAxiosError(error);
         }
 
     }

server/notification-providers/signal.js

@@ -6,7 +6,7 @@ class Signal extends NotificationProvider {
     name = "signal";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
 
         try {
             let data = {

server/notification-providers/slack.js

@@ -1,21 +1,40 @@
 const NotificationProvider = require("./notification-provider");
 const axios = require("axios");
+const { setSettings, setting } = require("../util-server");
+const { getMonitorRelativeURL } = require("../../src/util");
 
 class Slack extends NotificationProvider {
 
     name = "slack";
 
+    /**
+     * Deprecated property notification.slackbutton
+     * Set it as primary base url if this is not yet set.
+     */
+    static async deprecateURL(url) {
+        let currentPrimaryBaseURL = await setting("primaryBaseURL");
+
+        if (!currentPrimaryBaseURL) {
+            console.log("Move the url to be the primary base URL");
+            await setSettings("general", {
+                primaryBaseURL: url,
+            });
+        } else {
+            console.log("Already there, no need to move the primary base URL");
+        }
+    }
+
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
         try {
             if (heartbeatJSON == null) {
                 let data = {
-                    "text": "Uptime Kuma Slack testing successful.",
+                    "text": msg,
                     "channel": notification.slackchannel,
                     "username": notification.slackusername,
                     "icon_emoji": notification.slackiconemo,
-                }
-                await axios.post(notification.slackwebhookURL, data)
+                };
+                await axios.post(notification.slackwebhookURL, data);
                 return okMsg;
             }
 
@@ -42,26 +61,35 @@ class Slack extends NotificationProvider {
                         "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",
-                        },
-                    ],
                 }],
+            };
+
+            if (notification.slackbutton) {
+                await Slack.deprecateURL(notification.slackbutton);
             }
-            await axios.post(notification.slackwebhookURL, data)
+
+            const baseURL = await setting("primaryBaseURL");
+
+            // Button
+            if (baseURL) {
+                data.blocks.push({
+                    "type": "actions",
+                    "elements": [{
+                        "type": "button",
+                        "text": {
+                            "type": "plain_text",
+                            "text": "Visit Uptime Kuma",
+                        },
+                        "value": "Uptime-Kuma",
+                        "url": baseURL + getMonitorRelativeURL(monitorJSON.id),
+                    }],
+                });
+            }
+
+            await axios.post(notification.slackwebhookURL, data);
             return okMsg;
         } catch (error) {
-            this.throwGeneralAxiosError(error)
+            this.throwGeneralAxiosError(error);
         }
 
     }

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

@@ -6,7 +6,7 @@ class Telegram extends NotificationProvider {
     name = "telegram";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
 
         try {
             await axios.get(`https://api.telegram.org/bot${notification.telegramBotToken}/sendMessage`, {

server/notification-providers/webhook.js

@@ -7,7 +7,7 @@ class Webhook extends NotificationProvider {
     name = "webhook";
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
-        let okMsg = "Sent Successfully. ";
+        let okMsg = "Sent Successfully.";
 
         try {
             let data = {

server/notification.js

@@ -5,7 +5,9 @@ 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 Matrix = require("./notification-providers/matrix");
 const Octopush = require("./notification-providers/octopush");
+const PromoSMS = require("./notification-providers/promosms");
 const Pushbullet = require("./notification-providers/pushbullet");
 const Pushover = require("./notification-providers/pushover");
 const Pushy = require("./notification-providers/pushy");
@@ -13,6 +15,7 @@ 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");
 
@@ -28,11 +31,14 @@ class Notification {
         const list = [
             new Apprise(),
             new Discord(),
+            new Teams(),
             new Gotify(),
             new Line(),
             new LunaSea(),
             new Mattermost(),
+            new Matrix(),
             new Octopush(),
+            new PromoSMS(),
             new Pushbullet(),
             new Pushover(),
             new Pushy(),

server/prometheus.js

@@ -6,7 +6,7 @@ const commonLabels = [
     "monitor_url",
     "monitor_hostname",
     "monitor_port",
-]
+];
 
 const monitor_cert_days_remaining = new PrometheusClient.Gauge({
     name: "monitor_cert_days_remaining",
@@ -41,45 +41,46 @@ class Prometheus {
             monitor_url: monitor.url,
             monitor_hostname: monitor.hostname,
             monitor_port: monitor.port
-        }
+        };
     }
 
     update(heartbeat, tlsInfo) {
+
         if (typeof tlsInfo !== "undefined") {
             try {
-                let is_valid = 0
+                let is_valid = 0;
                 if (tlsInfo.valid == true) {
-                    is_valid = 1
+                    is_valid = 1;
                 } else {
-                    is_valid = 0
+                    is_valid = 0;
                 }
-                monitor_cert_is_valid.set(this.monitorLabelValues, is_valid)
+                monitor_cert_is_valid.set(this.monitorLabelValues, is_valid);
             } catch (e) {
-                console.error(e)
+                console.error(e);
             }
 
             try {
-                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.daysRemaining)
+                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.certInfo.daysRemaining);
             } catch (e) {
-                console.error(e)
+                console.error(e);
             }
         }
 
         try {
-            monitor_status.set(this.monitorLabelValues, heartbeat.status)
+            monitor_status.set(this.monitorLabelValues, heartbeat.status);
         } catch (e) {
-            console.error(e)
+            console.error(e);
         }
 
         try {
             if (typeof heartbeat.ping === "number") {
-                monitor_response_time.set(this.monitorLabelValues, heartbeat.ping)
+                monitor_response_time.set(this.monitorLabelValues, heartbeat.ping);
             } else {
                 // Is it good?
-                monitor_response_time.set(this.monitorLabelValues, -1)
+                monitor_response_time.set(this.monitorLabelValues, -1);
             }
         } catch (e) {
-            console.error(e)
+            console.error(e);
         }
     }
 
@@ -87,4 +88,4 @@ class Prometheus {
 
 module.exports = {
     Prometheus
-}
+};

server/routers/api-router.js

@@ -0,0 +1,191 @@
+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");
+const dayjs = require("dayjs");
+const { UP } = require("../../src/util");
+let router = express.Router();
+
+let cache = apicache.middleware;
+let io = server.io;
+
+router.get("/api/entry-page", async (_, response) => {
+    allowDevAllOrigin(response);
+    response.json(server.entryPage);
+});
+
+router.get("/api/push/:pushToken", async (request, response) => {
+    try {
+        let pushToken = request.params.pushToken;
+        let msg = request.query.msg || "OK";
+        let ping = request.query.ping;
+
+        let monitor = await R.findOne("monitor", " push_token = ? AND active = 1 ", [
+            pushToken
+        ]);
+
+        if (! monitor) {
+            throw new Error("Monitor not found or not active.");
+        }
+
+        let bean = R.dispense("heartbeat");
+        bean.monitor_id = monitor.id;
+        bean.time = R.isoDateTime(dayjs.utc());
+        bean.status = UP;
+        bean.msg = msg;
+        bean.ping = ping;
+
+        await R.store(bean);
+
+        io.to(monitor.user_id).emit("heartbeat", bean.toJSON());
+        Monitor.sendStats(io, monitor.id, monitor.user_id);
+
+        response.json({
+            ok: true,
+        });
+    } catch (e) {
+        response.json({
+            ok: false,
+            msg: e.message
+        });
+    }
+});
+
+// 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

@@ -5,6 +5,7 @@ const { debug } = require("../src/util");
 const passwordHash = require("./password-hash");
 const dayjs = require("dayjs");
 const { Resolver } = require("dns");
+const child_process = require("child_process");
 
 /**
  * Init or reset JWT secret
@@ -23,7 +24,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) => {
@@ -44,7 +45,7 @@ exports.tcping = function (hostname, port) {
             resolve(Math.round(data.max));
         });
     });
-}
+};
 
 exports.ping = async (hostname) => {
     try {
@@ -57,7 +58,7 @@ exports.ping = async (hostname) => {
             throw e;
         }
     }
-}
+};
 
 exports.pingAsync = function (hostname, ipv6 = false) {
     return new Promise((resolve, reject) => {
@@ -69,13 +70,13 @@ 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();
@@ -98,8 +99,8 @@ exports.dnsResolve = function (hostname, resolver_server, rrtype) {
                 }
             });
         }
-    })
-}
+    });
+};
 
 exports.setting = async function (key) {
     let value = await R.getCell("SELECT `value` FROM setting WHERE `key` = ? ", [
@@ -108,29 +109,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 = {};
 
@@ -143,7 +144,7 @@ exports.getSettings = async function (type) {
     }
 
     return result;
-}
+};
 
 exports.setSettings = async function (type, data) {
     let keyList = Object.keys(data);
@@ -163,12 +164,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
@@ -185,40 +186,44 @@ const getDaysRemaining = (validFrom, validTo) => {
     return daysRemaining;
 };
 
-exports.checkCertificate = function (res) {
-    const {
-        valid_from,
-        valid_to,
-        subjectaltname,
-        issuer,
-        fingerprint,
-    } = res.request.res.socket.getPeerCertificate(false);
+// Fix certificate Info for display
+// param: info -  the chain obtained from getPeerCertificate()
+const parseCertificateInfo = function (info) {
+    let link = info;
 
-    if (!valid_from || !valid_to || !subjectaltname) {
-        throw {
-            message: "No TLS certificate in response",
-        };
+    while (link) {
+        if (!link.valid_from || !link.valid_to) {
+            break;
+        }
+        link.validTo = new Date(link.valid_to);
+        link.validFor = link.subjectaltname?.replace(/DNS:|IP Address:/g, "").split(", ");
+        link.daysRemaining = getDaysRemaining(new Date(), link.validTo);
+
+        // Move up the chain until loop is encountered
+        if (link.issuerCertificate == null) {
+            break;
+        } else if (link.fingerprint == link.issuerCertificate.fingerprint) {
+            link.issuerCertificate = null;
+            break;
+        } else {
+            link = link.issuerCertificate;
+        }
     }
 
+    return info;
+};
+
+exports.checkCertificate = function (res) {
+    const info = res.request.res.socket.getPeerCertificate(true);
     const valid = res.request.res.socket.authorized || false;
 
-    const validTo = new Date(valid_to);
-
-    const validFor = subjectaltname
-        .replace(/DNS:|IP Address:/g, "")
-        .split(", ");
-
-    const daysRemaining = getDaysRemaining(new Date(), validTo);
+    const parsedInfo = parseCertificateInfo(info);
 
     return {
-        valid,
-        validFor,
-        validTo,
-        daysRemaining,
-        issuer,
-        fingerprint,
+        valid: valid,
+        certInfo: parsedInfo
     };
-}
+};
 
 // Check if the provided status code is within the accepted ranges
 // Param: status - the status code to check
@@ -247,7 +252,7 @@ exports.checkStatusCode = function (status, accepted_codes) {
     }
 
     return false;
-}
+};
 
 exports.getTotalClientInRoom = (io, roomName) => {
 
@@ -270,4 +275,40 @@ exports.getTotalClientInRoom = (io, roomName) => {
     } else {
         return 0;
     }
-}
+};
+
+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.");
+    }
+};
+
+exports.startUnitTest = async () => {
+    console.log("Starting unit test...");
+    const npm = /^win/.test(process.platform) ? "npm.cmd" : "npm";
+    const child = child_process.spawn(npm, ["run", "jest"]);
+
+    child.stdout.on("data", (data) => {
+        console.log(data.toString());
+    });
+
+    child.stderr.on("data", (data) => {
+        console.log(data.toString());
+    });
+
+    child.on("close", function (code) {
+        console.log("Jest exit code: " + code);
+        process.exit(code);
+    });
+};

src/App.vue

@@ -1,7 +1,12 @@
 <template>
-    <router-view />
+  <router-view />
 </template>
 
 <script>
-export default {}
+import { setPageLocale } from "./util-frontend";
+export default {
+  created() {
+    setPageLocale();
+  },
+};
 </script>

src/assets/app.scss

@@ -1,8 +1,9 @@
 @import "vars.scss";
+@import "multiselect.scss";
 @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: BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
 }
 
 h1 {
@@ -144,7 +145,9 @@ h2 {
     }
 
     .shadow-box {
-        background-color: $dark-bg;
+        &:not(.alert) {
+            background-color: $dark-bg;
+        }
     }
 
     .form-check-input {
@@ -177,6 +180,11 @@ h2 {
         border-color: $dark-border-color;
     }
 
+    .form-control:disabled, .form-control[readonly] {
+        background-color: #232f3b;
+        opacity: 1;
+    }
+
     .table-hover > tbody > tr:hover {
         --bs-table-accent-bg: #070a10;
         color: $dark-font-color;
@@ -231,28 +239,16 @@ h2 {
         color: $dark-font-color;
     }
 
-    // Multiselect
-    .multiselect__tags {
-        background-color: $dark-bg2;
-        border-color: $dark-border-color;
-    }
+    .monitor-list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
 
-    .multiselect__input, .multiselect__single {
-        background-color: $dark-bg2;
-        color: $dark-font-color;
-    }
-
-    .multiselect__content-wrapper {
-        background-color: $dark-bg2;
-        border-color: $dark-border-color;
-    }
-
-    .multiselect--above .multiselect__content-wrapper {
-        border-color: $dark-border-color;
-    }
-
-    .multiselect__option--selected {
-        background-color: $dark-bg;
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
     }
 
     @media (max-width: 550px) {
@@ -268,6 +264,16 @@ h2 {
             }
         }
     }
+
+    .alert {
+        &.bg-info,
+        &.bg-warning,
+        &.bg-danger,
+        &.bg-light {
+            color: $dark-font-color2;
+        }
+    }
+
 }
 
 /*
@@ -288,3 +294,123 @@ h2 {
     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;
+}
+
+// Localization
+
+@import "localization.scss";

src/assets/localization.scss

@@ -0,0 +1,5 @@
+html[lang='fa'] {
+    #app {
+        font-family: 'IRANSans', 'Iranian Sans','B Nazanin', 'Tahoma', 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;
+    }
+}

src/assets/multiselect.scss

@@ -0,0 +1,73 @@
+@import "vars.scss";
+@import "node_modules/vue-multiselect/dist/vue-multiselect";
+
+.multiselect__tags {
+    border-radius: 1.5rem;
+    border: 1px solid #ced4da;
+    min-height: 38px;
+    padding: 6px 40px 0 8px;
+}
+
+.multiselect--active .multiselect__tags {
+    border-radius: 1rem;
+}
+
+.multiselect__option--highlight {
+    background: $primary !important;
+}
+
+.multiselect__option--highlight::after {
+    background: $primary !important;
+}
+
+.multiselect__tag {
+    border-radius: 50rem;
+    margin-bottom: 0;
+    padding: 6px 26px 6px 10px;
+    background: $primary !important;
+}
+
+.multiselect__placeholder {
+    font-size: 1rem;
+    padding-left: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    opacity: 0.67;
+}
+
+.multiselect__input,
+.multiselect__single {
+    line-height: 14px;
+    margin-bottom: 0;
+}
+
+.dark {
+    .multiselect__tag {
+        color: $dark-font-color2;
+    }
+
+    .multiselect__tags {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+
+    .multiselect__content-wrapper {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect--above .multiselect__content-wrapper {
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__option--selected {
+        background-color: $dark-bg;
+    }
+}

src/components/CertificateInfo.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <h4>{{ $t("Certificate Info") }}</h4>
+        {{ $t("Certificate Chain") }}:
+        <div
+            v-if="valid"
+            class="rounded d-inline-flex ms-2 text-white tag-valid"
+        >
+            {{ $t("Valid") }}
+        </div>
+        <div
+            v-if="!valid"
+            class="rounded d-inline-flex ms-2 text-white tag-invalid"
+        >
+            {{ $t("Invalid") }}
+        </div>
+        <certificate-info-row :cert="certInfo" />
+    </div>
+</template>
+
+<script>
+import CertificateInfoRow from "./CertificateInfoRow.vue";
+export default {
+    components: {
+        CertificateInfoRow,
+    },
+    props: {
+        certInfo: {
+            type: Object,
+            required: true,
+        },
+        valid: {
+            type: Boolean,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.tag-valid {
+    padding: 2px 25px;
+    background-color: $primary;
+}
+
+.tag-invalid {
+    padding: 2px 25px;
+    background-color: $danger;
+}
+</style>

src/components/CertificateInfoRow.vue

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div class="d-flex flex-row align-items-center p-1 overflow-hidden">
+            <div class="m-3 ps-3">
+                <div class="cert-icon">
+                    <font-awesome-icon icon="file" />
+                    <font-awesome-icon class="award-icon" icon="award" />
+                </div>
+            </div>
+            <div class="m-3">
+                <table class="text-start">
+                    <tbody>
+                        <tr class="my-3">
+                            <td class="px-3">Subject:</td>
+                            <td>{{ formatSubject(cert.subject) }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Valid To:</td>
+                            <td><Datetime :value="cert.validTo" /></td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Days Remaining:</td>
+                            <td>{{ cert.daysRemaining }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Issuer:</td>
+                            <td>{{ formatSubject(cert.issuer) }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Fingerprint:</td>
+                            <td>{{ cert.fingerprint }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="d-flex">
+            <font-awesome-icon
+                v-if="cert.issuerCertificate"
+                class="m-2 ps-6 link-icon"
+                icon="link"
+            />
+        </div>
+        <certificate-info-row
+            v-if="cert.issuerCertificate"
+            :cert="cert.issuerCertificate"
+        />
+    </div>
+</template>
+
+<script>
+import Datetime from "../components/Datetime.vue";
+export default {
+    name: "CertificateInfoRow",
+    components: {
+        Datetime,
+    },
+    props: {
+        cert: {
+            type: Object,
+            required: true,
+        },
+    },
+    methods: {
+        formatSubject(subject) {
+            if (subject.O && subject.CN && subject.C) {
+                return `${subject.CN} - ${subject.O} (${subject.C})`;
+            } else if (subject.O && subject.CN) {
+                return `${subject.CN} - ${subject.O}`;
+            } else if (subject.CN) {
+                return subject.CN;
+            } else {
+                return "no info";
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+table {
+    overflow: hidden;
+}
+
+.cert-icon {
+    position: relative;
+    font-size: 70px;
+    color: $link-color;
+    opacity: 0.5;
+
+    .dark & {
+        color: $dark-font-color;
+        opacity: 0.3;
+    }
+}
+
+.award-icon {
+    position: absolute;
+    font-size: 0.5em;
+    bottom: 20%;
+    left: 12%;
+    color: white;
+
+    .dark & {
+        color: $dark-bg;
+    }
+}
+
+.link-icon {
+    font-size: 20px;
+    margin-left: 50px !important;
+    color: $link-color;
+    opacity: 0.5;
+
+    .dark & {
+        color: $dark-font-color;
+        opacity: 0.3;
+    }
+}
+</style>

src/components/CopyableInput.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="input-group">
+        <input
+            :id="id"
+            ref="input"
+            v-model="model"
+            :type="type"
+            class="form-control"
+            :placeholder="placeholder"
+            :autocomplete="autocomplete"
+            :required="required"
+            :readonly="readonly"
+            :disabled="disabled"
+        >
+
+        <a class="btn btn-outline-primary" @click="copyToClipboard(model)">
+            <font-awesome-icon :icon="icon" />
+        </a>
+    </div>
+</template>
+
+<script>
+
+let timeout;
+
+export default {
+    props: {
+        id: {
+            type: String,
+            default: ""
+        },
+        type: {
+            type: String,
+            default: "text"
+        },
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        placeholder: {
+            type: String,
+            default: ""
+        },
+        autocomplete: {
+            type: String,
+            default: undefined,
+        },
+        required: {
+            type: Boolean
+        },
+        readonly: {
+            type: String,
+            default: undefined,
+        },
+        disabled: {
+            type: String,
+            default: undefined,
+        },
+    },
+    data() {
+        return {
+            visibility: "password",
+            icon: "copy",
+        };
+    },
+    computed: {
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            }
+        }
+    },
+    created() {
+
+    },
+    methods: {
+
+        showInput() {
+            this.visibility = "text";
+        },
+
+        hideInput() {
+            this.visibility = "password";
+        },
+
+        copyToClipboard(textToCopy) {
+            this.icon = "check";
+
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                this.icon = "copy";
+            }, 3000);
+
+            // navigator clipboard api needs a secure context (https)
+            if (navigator.clipboard && window.isSecureContext) {
+                // navigator clipboard api method'
+                return navigator.clipboard.writeText(textToCopy);
+            } else {
+                // text area method
+                let textArea = document.createElement("textarea");
+                textArea.value = textToCopy;
+                // make the textarea out of viewport
+                textArea.style.position = "fixed";
+                textArea.style.left = "-999999px";
+                textArea.style.top = "-999999px";
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+                return new Promise((res, rej) => {
+                    // here the magic happens
+                    document.execCommand("copy") ? res() : rej();
+                    textArea.remove();
+                });
+            }
+        }
+
+    }
+};
+</script>

src/components/HeartbeatBar.vue

@@ -25,6 +25,10 @@ export default {
             type: Number,
             required: true,
         },
+        heartbeatList: {
+            type: Array,
+            default: null,
+        }
     },
     data() {
         return {
@@ -38,8 +42,15 @@ export default {
     },
     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,8 +129,10 @@ 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] = [];
+            }
         }
     },
 

src/components/Login.vue

@@ -4,16 +4,23 @@
             <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">{{ $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">{{ $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">
                     <div class="form-check">
                         <input id="remember" v-model="$root.remember" type="checkbox" value="remember-me" class="form-check-input">
@@ -42,24 +49,30 @@ 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;
-            })
+
+                if (res.tokenRequired) {
+                    this.tokenRequired = true;
+                } else {
+                    this.res = res;
+                }
+            });
         },
     },
-}
+};
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
 .form-container {
     display: flex;
     align-items: center;
@@ -67,8 +80,17 @@ export default {
     padding-bottom: 40px;
 }
 
-.form {
+.form-floating {
+    > label {
+        padding-left: 1.3rem;
+    }
 
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
+.form {
     width: 100%;
     max-width: 330px;
     padding: 15px;

src/components/MonitorList.vue

@@ -1,44 +1,70 @@
 <template>
-    <div class="shadow-box list mb-3" :class="{ scrollbar: scrollbar }">
-        <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
-            {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
+    <div 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-9 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-3 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";
+import { getMonitorRelativeURL } from "../util.ts";
+
 export default {
     components: {
         Uptime,
         HeartbeatBar,
+        Tag,
     },
     props: {
         scrollbar: {
             type: Boolean,
         },
     },
+    data() {
+        return {
+            searchText: "",
+        };
+    },
     computed: {
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
@@ -66,17 +92,31 @@ 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;
         },
     },
     methods: {
         monitorURL(id) {
-            return "/dashboard/" + id;
+            return getMonitorRelativeURL(id);
         },
+        clearSearchText() {
+            this.searchText = "";
+        }
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -87,57 +127,51 @@ export default {
     padding-right: 5px !important;
 }
 
-.list {
-    &.scrollbar {
-        min-height: calc(100vh - 240px);
-        max-height: calc(100vh - 30px);
-        overflow-y: auto;
-        position: sticky;
-        top: 10px;
-    }
+.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

@@ -13,22 +13,7 @@
                         <div class="mb-3">
                             <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">{{ $t("Email") }} (SMTP)</option>
-                                <option value="discord">Discord</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>
-                                <option value="lunasea">LunaSea</option>
-                                <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>
+                                <option v-for="type in notificationTypes" :key="type" :value="type">{{ $t(type) }}</option>
                             </select>
                         </div>
 
@@ -37,363 +22,8 @@
                             <input id="notification-name" v-model="notification.name" type="text" class="form-control" required>
                         </div>
 
-                        <Telegram v-if="notification.type === 'telegram'" />
-
-                        <!-- TODO: Convert all into vue components, but not an easy task.  -->
-
-                        <template v-if="notification.type === 'webhook'">
-                            <div class="mb-3">
-                                <label for="webhook-url" class="form-label">Post URL</label>
-                                <input id="webhook-url" v-model="notification.webhookURL" type="url" pattern="https?://.+" class="form-control" required>
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="webhook-content-type" class="form-label">Content Type</label>
-                                <select id="webhook-content-type" v-model="notification.webhookContentType" class="form-select" required>
-                                    <option value="json">
-                                        application/json
-                                    </option>
-                                    <option value="form-data">
-                                        multipart/form-data
-                                    </option>
-                                </select>
-
-                                <div class="form-text">
-                                    <p>"application/json" is good for any modern http servers such as express.js</p>
-                                    <p>"multipart/form-data" is good for PHP, you just need to parse the json by <strong>json_decode($_POST['data'])</strong></p>
-                                </div>
-                            </div>
-                        </template>
-
-                        <SMTP v-if="notification.type === 'smtp'" />
-
-                        <template v-if="notification.type === 'discord'">
-                            <div class="mb-3">
-                                <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
-                                <input id="discord-webhook-url" v-model="notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
-                                <div class="form-text">
-                                    You can get this by going to Server Settings -> Integrations -> Create Webhook
-                                </div>
-                            </div>
-
-                            <div class="mb-3">
-                                <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>
-                        </template>
-
-                        <template v-if="notification.type === 'signal'">
-                            <div class="mb-3">
-                                <label for="signal-url" class="form-label">Post URL</label>
-                                <input id="signal-url" v-model="notification.signalURL" type="url" pattern="https?://.+" class="form-control" required>
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="signal-number" class="form-label">Number</label>
-                                <input id="signal-number" v-model="notification.signalNumber" type="text" class="form-control" required>
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="signal-recipients" class="form-label">Recipients</label>
-                                <input id="signal-recipients" v-model="notification.signalRecipients" type="text" class="form-control" required>
-
-                                <div class="form-text">
-                                    You need to have a signal client with REST API.
-
-                                    <p style="margin-top: 8px;">
-                                        You can check this url to view how to setup one:
-                                    </p>
-
-                                    <p style="margin-top: 8px;">
-                                        <a href="https://github.com/bbernhard/signal-cli-rest-api" target="_blank">https://github.com/bbernhard/signal-cli-rest-api</a>
-                                    </p>
-
-                                    <p style="margin-top: 8px;">
-                                        IMPORTANT: You cannot mix groups and numbers in recipients!
-                                    </p>
-                                </div>
-                            </div>
-                        </template>
-
-                        <template v-if="notification.type === 'gotify'">
-                            <div class="mb-3">
-                                <label for="gotify-application-token" class="form-label">Application Token</label>
-                                <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>
-                                <div class="input-group mb-3">
-                                    <input id="gotify-server-url" v-model="notification.gotifyserverurl" type="text" class="form-control" required>
-                                </div>
-                            </div>
-
-                            <div class="mb-3">
-                                <label for="gotify-priority" class="form-label">Priority</label>
-                                <input id="gotify-priority" v-model="notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1">
-                            </div>
-                        </template>
-
-                        <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>
-                                <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">
-                                <label for="slack-iconemo" class="form-label">Icon Emoji</label>
-                                <input id="slack-iconemo" v-model="notification.slackiconemo" type="text" class="form-control">
-                                <label for="slack-channel" class="form-label">Channel Name</label>
-                                <input id="slack-channel-name" v-model="notification.slackchannel" type="text" class="form-control">
-                                <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
-                                    <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>
-                                    <p style="margin-top: 8px;">
-                                        Enter the channel name on Slack 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 === '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>
-                                <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">
-                                    <HiddenInput id="pushy-user-key" v-model="notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
-                                </div>
-                            </div>
-                            <p style="margin-top: 8px;">
-                                More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
-                            </p>
-                        </template>
-
-                        <template v-if="notification.type === 'octopush'">
-                            <div class="mb-3">
-                                <label for="octopush-key" class="form-label">API KEY</label>
-                                <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>
-                            <div class="mb-3">
-                                <label for="octopush-type-sms" class="form-label">SMS Type</label>
-                                <select id="octopush-type-sms" v-model="notification.octopushSMSType" class="form-select">
-                                    <option value="sms_premium">Premium (Fast - recommended for alerting)</option>
-                                    <option value="sms_low_cost">Low Cost (Slow, sometimes blocked by operator)</option>
-                                </select>
-                                <div class="form-text">
-                                    Check octopush prices <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>.
-                                </div>
-                            </div>
-                            <div class="mb-3">
-                                <label for="octopush-phone-number" class="form-label">Phone number (intl format, eg : +33612345678) </label>
-                                <input id="octopush-phone-number" v-model="notification.octopushPhoneNumber" type="text" class="form-control" required>
-                            </div>
-                            <div class="mb-3">
-                                <label for="octopush-sender-name" class="form-label">SMS Sender Name : 3-11 alphanumeric characters and space (a-zA-Z0-9)</label>
-                                <input id="octopush-sender-name" v-model="notification.octopushSenderName" type="text" minlength="3" maxlength="11" class="form-control">
-                            </div>
-
-                            <p style="margin-top: 8px;">
-                                More info on: <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
-                            </p>
-                        </template>
-
-                        <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>
-                                <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>
-                                <input id="pushover-title" v-model="notification.pushovertitle" type="text" class="form-control">
-                                <label for="pushover-priority" class="form-label">Priority</label>
-                                <select id="pushover-priority" v-model="notification.pushoverpriority" class="form-select">
-                                    <option>-2</option>
-                                    <option>-1</option>
-                                    <option>0</option>
-                                    <option>1</option>
-                                    <option>2</option>
-                                </select>
-                                <label for="pushover-sound" class="form-label">Notification Sound</label>
-                                <select id="pushover-sound" v-model="notification.pushoversounds" class="form-select">
-                                    <option>pushover</option>
-                                    <option>bike</option>
-                                    <option>bugle</option>
-                                    <option>cashregister</option>
-                                    <option>classical</option>
-                                    <option>cosmic</option>
-                                    <option>falling</option>
-                                    <option>gamelan</option>
-                                    <option>incoming</option>
-                                    <option>intermission</option>
-                                    <option>mechanical</option>
-                                    <option>pianobar</option>
-                                    <option>siren</option>
-                                    <option>spacealarm</option>
-                                    <option>tugboat</option>
-                                    <option>alien</option>
-                                    <option>climb</option>
-                                    <option>persistent</option>
-                                    <option>echo</option>
-                                    <option>updown</option>
-                                    <option>vibrate</option>
-                                    <option>none</option>
-                                </select>
-                                <div class="form-text">
-                                    <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>
-                                    <p style="margin-top: 8px;">
-                                        Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour.
-                                    </p>
-                                    <p style="margin-top: 8px;">
-                                        If you want to send notifications to different devices, fill out Device field.
-                                    </p>
-                                </div>
-                            </div>
-                        </template>
-
-                        <template v-if="notification.type === 'apprise'">
-                            <div class="mb-3">
-                                <label for="apprise-url" class="form-label">Apprise URL</label>
-                                <input id="apprise-url" v-model="notification.appriseURL" type="text" class="form-control" required>
-                                <div class="form-text">
-                                    <p>Example: twilio://AccountSid:AuthToken@FromPhoneNo</p>
-                                    <p>
-                                        Read more: <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a>
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="mb-3">
-                                <p>
-                                    Status:
-                                    <span v-if="appriseInstalled" class="text-primary">Apprise is installed</span>
-                                    <span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise" target="_blank">Read more</a></span>
-                                </p>
-                            </div>
-                        </template>
-
-                        <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>
-                                <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>
-                                </div>
-                            </div>
-                        </template>
-
-                        <template v-if="notification.type === 'pushbullet'">
-                            <div class="mb-3">
-                                <label for="pushbullet-access-token" class="form-label">Access Token</label>
-                                <HiddenInput id="pushbullet-access-token" v-model="notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
-                            </div>
-
-                            <p style="margin-top: 8px;">
-                                More info on: <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
-                            </p>
-                        </template>
-
-                        <template v-if="notification.type === 'line'">
-                            <div class="mb-3">
-                                <label for="line-channel-access-token" class="form-label">Channel access token</label>
-                                <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>
-                            </div>
-                            <div class="mb-3" style="margin-top: 12px;">
-                                <label for="line-user-id" class="form-label">User ID</label>
-                                <input id="line-user-id" v-model="notification.lineUserID" type="text" class="form-control" required>
-                            </div>
-                            <div class="form-text">
-                                Line Developers Console - <b>Messaging API</b>
-                            </div>
-                            <div class="form-text" style="margin-top: 8px;">
-                                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" -->
+                        <!-- form body -->
+                        <component :is="currentForm" />
 
                         <div class="mb-3 mt-4">
                             <hr class="dropdown-divider mb-4">
@@ -410,7 +40,7 @@
 
                             <div class="form-check form-switch">
                                 <input v-model="notification.applyExisting" class="form-check-input" type="checkbox">
-                                <label class="form-check-label">{{ $t("Also apply to existing monitors") }}</label>
+                                <label class="form-check-label">{{ $t("Apply on all existing monitors") }}</label>
                             </div>
                         </div>
                     </div>
@@ -438,20 +68,15 @@
 </template>
 
 <script lang="ts">
-import { Modal } from "bootstrap"
-import { ucfirst } from "../util.ts"
+import { Modal } from "bootstrap";
+import { ucfirst } from "../util.ts";
 
 import Confirm from "./Confirm.vue";
-import HiddenInput from "./HiddenInput.vue";
-import Telegram from "./notifications/Telegram.vue";
-import SMTP from "./notifications/SMTP.vue";
+import NotificationFormList from "./notifications";
 
 export default {
     components: {
         Confirm,
-        HiddenInput,
-        Telegram,
-        SMTP,
     },
     props: {},
     emits: ["added"],
@@ -460,43 +85,48 @@ export default {
             model: null,
             processing: false,
             id: null,
+            notificationTypes: Object.keys(NotificationFormList),
             notification: {
                 name: "",
+                /** @type { null | keyof NotificationFormList } */
                 type: null,
                 isDefault: false,
                 // Do not set default value here, please scroll to show()
-            },
-            appriseInstalled: false,
+            }
+        };
+    },
+
+    computed: {
+        currentForm() {
+            if (!this.notification.type) {
+                return null;
+            }
+            return NotificationFormList[this.notification.type];
         }
     },
 
     watch: {
         "notification.type"(to, from) {
             let oldName;
-
             if (from) {
-                oldName = `My ${ucfirst(from)} Alert (1)`;
+                oldName = this.getUniqueDefaultName(from);
             } else {
                 oldName = "";
             }
 
             if (! this.notification.name || this.notification.name === oldName) {
-                this.notification.name = `My ${ucfirst(to)} Alert (1)`
+                this.notification.name = this.getUniqueDefaultName(to);
             }
         },
     },
     mounted() {
-        this.modal = new Modal(this.$refs.modal)
-
-        this.$root.getSocket().emit("checkApprise", (installed) => {
-            this.appriseInstalled = installed;
-        })
+        this.modal = new Modal(this.$refs.modal);
     },
     methods: {
 
         deleteConfirm() {
             this.modal.hide();
-            this.$refs.confirmDelete.show()
+            this.$refs.confirmDelete.show();
         },
 
         show(notificationID) {
@@ -515,21 +145,19 @@ export default {
                     name: "",
                     type: null,
                     isDefault: false,
-                }
+                };
 
                 // Set Default value here
-                this.notification.type = "telegram";
-                this.notification.gotifyPriority = 8;
-                this.notification.smtpSecure = false;
+                this.notification.type = this.notificationTypes[0];
             }
 
-            this.modal.show()
+            this.modal.show();
         },
 
         submit() {
             this.processing = true;
             this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                 this.processing = false;
 
                 if (res.ok) {
@@ -541,30 +169,45 @@ export default {
                     }
 
                 }
-            })
+            });
         },
 
         test() {
             this.processing = true;
             this.$root.getSocket().emit("testNotification", this.notification, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                 this.processing = false;
-            })
+            });
         },
 
         deleteNotification() {
             this.processing = true;
             this.$root.getSocket().emit("deleteNotification", this.id, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                 this.processing = false;
 
                 if (res.ok) {
-                    this.modal.hide()
+                    this.modal.hide();
                 }
-            })
+            });
         },
+        /**
+         * @param {keyof NotificationFormList} notificationKey
+         * @return {string}
+         */
+        getUniqueDefaultName(notificationKey) {
+            let index = 1;
+            let name = "";
+            do {
+                name = this.$t("defaultNotificationName", {
+                    notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
+                    number: index++
+                });
+            } while (this.$root.notificationList.find(it => it.name === name));
+            return name;
+        }
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -11,18 +11,18 @@ export default {
     computed: {
         color() {
             if (this.status === 0) {
-                return "danger"
+                return "danger";
             }
 
             if (this.status === 1) {
-                return "primary"
+                return "primary";
             }
 
             if (this.status === 2) {
-                return "warning"
+                return "warning";
             }
 
-            return "secondary"
+            return "secondary";
         },
 
         text() {
@@ -41,11 +41,11 @@ export default {
             return this.$t("Unknown");
         },
     },
-}
+};
 </script>
 
 <style scoped>
     span {
-        width: 64px;
+        min-width: 64px;
     }
 </style>

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="mt-5 mb-3">{{ $t("Tags") }}</h4>
+        <div v-if="selectedTags.length > 0" class="mb-2 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/notifications/Apprise.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="mb-3">
+        <label for="apprise-url" class="form-label">{{ $t("Apprise URL") }}</label>
+        <input id="apprise-url" v-model="$parent.notification.appriseURL" type="text" class="form-control" required>
+        <div class="form-text">
+            <p>{{ $t("Example:", ["twilio://AccountSid:AuthToken@FromPhoneNo"]) }}</p>
+            <i18n-t tag="p" keypath="Read more:">
+                <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a>
+            </i18n-t>
+        </div>
+    </div>
+    <div class="mb-3">
+        <i18n-t tag="p" keypath="Status:">
+            <span v-if="appriseInstalled" class="text-primary">{{ $t("appriseInstalled") }}</span>
+            <i18n-t v-else tag="span" keypath="appriseNotInstalled" class="text-danger">
+                <a href="https://github.com/caronc/apprise" target="_blank">{{ $t("Read more") }}</a>
+            </i18n-t>
+        </i18n-t>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            appriseInstalled: false
+        };
+    },
+    mounted() {
+        this.$root.getSocket().emit("checkApprise", (installed) => {
+            this.appriseInstalled = installed;
+        });
+    },
+};
+</script>

src/components/notifications/Discord.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="mb-3">
+        <label for="discord-webhook-url" class="form-label">{{ $t("Discord Webhook URL") }}</label>
+        <input id="discord-webhook-url" v-model="$parent.notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
+        <div class="form-text">
+            {{ $t("wayToGetDiscordURL") }}
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="discord-username" class="form-label">{{ $t("Bot Display Name") }}</label>
+        <input id="discord-username" v-model="$parent.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">{{ $t("Prefix Custom Message") }}</label>
+        <input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" :placeholder="$t('Hello @everyone is...')">
+    </div>
+</template>

src/components/notifications/Gotify.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="mb-3">
+        <label for="gotify-application-token" class="form-label">{{ $t("Application Token") }}</label>
+        <HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="gotify-server-url" class="form-label">{{ $t("Server URL") }}</label>
+        <div class="input-group mb-3">
+            <input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="gotify-priority" class="form-label">{{ $t("Priority") }}</label>
+        <input id="gotify-priority" v-model="$parent.notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1">
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+    mounted() {
+        if (typeof this.$parent.notification.gotifyPriority === "undefined") {
+            this.$parent.notification.gotifyPriority = 8;
+        }
+    },
+}
+</script>

src/components/notifications/Line.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="mb-3">
+        <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token") }}</label>
+        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+    </div>
+    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
+        <b>{{ $t("Basic Settings") }}</b>
+    </i18n-t>
+    <div class="mb-3" style="margin-top: 12px;">
+        <label for="line-user-id" class="form-label">User ID</label>
+        <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
+    </div>
+    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
+        <b>{{ $t("Messaging API") }}</b>
+    </i18n-t>
+    <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
+        <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/LunaSea.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="mb-3">
+        <label for="lunasea-device" class="form-label">{{ $t("LunaSea Device ID") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control" required>
+        <div class="form-text">
+            <p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
+        </div>
+    </div>
+</template>

src/components/notifications/Matrix.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="mb-3">
+        <label for="homeserver-url" class="form-label">Homeserver URL (with http(s):// and optionally port)</label><span style="color: red;"><sup>*</sup></span>
+        <input id="homeserver-url" v-model="$parent.notification.homeserverUrl" type="text" class="form-control" :required="true">
+    </div>
+    <div class="mb-3">
+        <label for="internal-room-id" class="form-label">Internal Room Id</label><span style="color: red;"><sup>*</sup></span>
+        <input id="internal-room-id" v-model="$parent.notification.internalRoomId" type="text" class="form-control" required="true">
+    </div>
+    <div class="mb-3">
+        <label for="access-token" class="form-label">Access Token</label><span style="color: red;"><sup>*</sup></span>
+        <HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="one-time-code" :maxlength="500"></HiddenInput>
+    </div>
+
+    <div class="form-text">
+        <span style="color: red;"><sup>*</sup></span>Required
+        <p style="margin-top: 8px;">
+            You can find the internal room ID by looking in the advanced section of the room settings in your Matrix client. It should look like !QMdRCpUIfLwsfjxye6:home.server.
+        </p>
+        <p style="margin-top: 8px;">
+            It is highly recommended you create a new user and do not use your own Matrix user's access token as it will allow full access to your account and all the rooms you joined. Instead, create a new user and only invite it to the room that you want to receive the notification in. You can get the access token by running <code>curl -XPOST -d '{"type": "m.login.password", "identifier": {"user": "botusername", "type": "m.id.user"}, "password": "passwordforuser"}' "https://home.server/_matrix/client/r0/login"</code>.
+        </p>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+}
+</script>

src/components/notifications/Mattermost.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="mb-3">
+        <label for="mattermost-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color:red;"><sup>*</sup></span></label>
+        <input id="mattermost-webhook-url" v-model="$parent.notification.mattermostWebhookUrl" type="text" class="form-control" required>
+        <label for="mattermost-username" class="form-label">{{ $t("Username") }}</label>
+        <input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control">
+        <label for="mattermost-iconurl" class="form-label">{{ $t("Icon URL") }}</label>
+        <input id="mattermost-iconurl" v-model="$parent.notification.mattermosticonurl" type="text" class="form-control">
+        <label for="mattermost-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
+        <input id="mattermost-iconemo" v-model="$parent.notification.mattermosticonemo" type="text" class="form-control">
+        <label for="mattermost-channel" class="form-label">{{ $t("Channel Name") }}</label>
+        <input id="mattermost-channel-name" v-model="$parent.notification.mattermostchannel" type="text" class="form-control">
+        <div class="form-text">
+            <span style="color:red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+                <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
+            </i18n-t>
+            <p style="margin-top: 8px;">
+                {{ $t("aboutMattermostChannelName") }}
+            </p>
+            <p style="margin-top: 8px;">
+                {{ $t("aboutKumaURL") }}
+            </p>
+            <p style="margin-top: 8px;">
+                {{ $t("aboutIconURL") }}
+            </p>
+            <i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
+                <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+            </i18n-t>
+        </div>
+    </div>
+</template>

src/components/notifications/Octopush.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="mb-3">
+        <label for="octopush-version" class="form-label">Octopush API Version</label>
+        <select id="octopush-version" v-model="$parent.notification.octopushVersion" class="form-select">
+            <option value="2">Octopush (endpoint: api.octopush.com)</option>
+            <option value="1">Legacy Octopush-DM (endpoint: www.octopush-dm.com)</option>
+        </select>
+        <div class="form-text">
+            Do you use the legacy version of Octopush (2011-2020) or the new version?
+        </div>
+    </div>
+    <div class="mb-3">
+        <label for="octopush-key" class="form-label">API KEY</label>
+        <HiddenInput id="octopush-key" v-model="$parent.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="$parent.notification.octopushLogin" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="octopush-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
+        <select id="octopush-type-sms" v-model="$parent.notification.octopushSMSType" class="form-select">
+            <option value="sms_premium">{{ $t("octopushTypePremium") }}</option>
+            <option value="sms_low_cost">{{ $t("octopushTypeLowCost") }}</option>
+        </select>
+        <i18n-t tag="div" keypath="Check octopush prices" class="form-text">
+            <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>
+        </i18n-t>
+    </div>
+    <div class="mb-3">
+        <label for="octopush-phone-number" class="form-label">{{ $t("octopushPhoneNumber") }}</label>
+        <input id="octopush-phone-number" v-model="$parent.notification.octopushPhoneNumber" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="octopush-sender-name" class="form-label">{{ $t("octopushSMSSender") }}</label>
+        <input id="octopush-sender-name" v-model="$parent.notification.octopushSenderName" type="text" minlength="3" maxlength="11" class="form-control">
+    </div>
+
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/PromoSMS.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="mb-3">
+        <label for="promosms-login" class="form-label">API LOGIN</label>
+        <input id="promosms-login" v-model="$parent.notification.promosmsLogin" type="text" class="form-control" required>
+        <label for="promosms-key" class="form-label">API PASSWORD</label>
+        <HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="promosms-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
+        <select id="promosms-type-sms" v-model="$parent.notification.promosmsSMSType" class="form-select">
+            <option value="0">{{ $t("promosmsTypeFlash") }}</option>
+            <option value="1">{{ $t("promosmsTypeEco") }}</option>
+            <option value="2">{{ $t("promosmsTypeFull") }}</option>
+            <option value="3">{{ $t("promosmsTypeSpeed") }}</option>
+        </select>
+        <i18n-t tag="div" keypath="Check PromoSMS prices" class="form-text">
+            <a href="https://promosms.com/cennik/" target="_blank">https://promosms.com/cennik/</a>
+        </i18n-t>
+    </div>
+    <div class="mb-3">
+        <label for="promosms-phone-number" class="form-label">{{ $t("promosmsPhoneNumber") }}</label>
+        <input id="promosms-phone-number" v-model="$parent.notification.promosmsPhoneNumber" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="promosms-sender-name" class="form-label">{{ $t("promosmsSMSSender") }}</label>
+        <input id="promosms-sender-name" v-model="$parent.notification.promosmsSenderName" type="text" minlength="3" maxlength="11" class="form-control">
+    </div>
+
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>