From 0a4fb45a8cf2ea10bb13d767f5f9ec023adc2d31 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Fri, 25 Jun 2021 21:55:49 +0800
Subject: [PATCH] init

---
 data/.gitkeep               |   0
 server/model/monitor.js     |  33 ++++
 server/server.js            | 379 ++++++++++++++++++++++++++++++++++++
 server/util.js              |   3 +
 src/App.vue                 |  13 ++
 src/assets/app.scss         |  57 ++++++
 src/assets/vars.scss        |   6 +
 src/components/Confirm.vue  |  50 +++++
 src/components/Login.vue    |  77 ++++++++
 src/layouts/Layout.vue      |  69 +++++++
 src/main.js                 |  78 ++++++++
 src/mixins/socket.js        | 121 ++++++++++++
 src/pages/Dashboard.vue     | 128 ++++++++++++
 src/pages/DashboardHome.vue | 123 ++++++++++++
 src/pages/Details.vue       | 162 +++++++++++++++
 src/pages/EditMonitor.vue   | 123 ++++++++++++
 src/pages/Settings.vue      | 111 +++++++++++
 17 files changed, 1533 insertions(+)
 create mode 100644 data/.gitkeep
 create mode 100644 server/model/monitor.js
 create mode 100644 server/server.js
 create mode 100644 server/util.js
 create mode 100644 src/App.vue
 create mode 100644 src/assets/app.scss
 create mode 100644 src/assets/vars.scss
 create mode 100644 src/components/Confirm.vue
 create mode 100644 src/components/Login.vue
 create mode 100644 src/layouts/Layout.vue
 create mode 100644 src/main.js
 create mode 100644 src/mixins/socket.js
 create mode 100644 src/pages/Dashboard.vue
 create mode 100644 src/pages/DashboardHome.vue
 create mode 100644 src/pages/Details.vue
 create mode 100644 src/pages/EditMonitor.vue
 create mode 100644 src/pages/Settings.vue

diff --git a/data/.gitkeep b/data/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/server/model/monitor.js b/server/model/monitor.js
new file mode 100644
index 000000000..1b25270fb
--- /dev/null
+++ b/server/model/monitor.js
@@ -0,0 +1,33 @@
+const dayjs = require("dayjs");
+const {BeanModel} = require("redbean-node/dist/bean-model");
+
+class Monitor extends BeanModel {
+
+    toJSON() {
+        return {
+            id: this.id,
+            name: this.name,
+            url: this.url,
+            upRate: this.upRate,
+            active: this.active,
+            type: this.type,
+            interval: this.interval,
+        };
+    }
+
+    start(io) {
+        const beat = () => {
+            console.log(`Monitor ${this.id}: Heartbeat`)
+            io.to(this.user_id).emit("heartbeat", dayjs().unix());
+        }
+
+        beat();
+        this.heartbeatInterval = setInterval(beat, this.interval * 1000);
+    }
+
+    stop() {
+        clearInterval(this.heartbeatInterval)
+    }
+}
+
+module.exports = Monitor;
diff --git a/server/server.js b/server/server.js
new file mode 100644
index 000000000..a3d10dddb
--- /dev/null
+++ b/server/server.js
@@ -0,0 +1,379 @@
+const express = require('express');
+const app = express();
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require("socket.io");
+const io = new Server(server);
+const axios = require('axios');
+const dayjs = require("dayjs");
+const {R} = require("redbean-node");
+const passwordHash = require('password-hash');
+const jwt = require('jsonwebtoken');
+const Monitor = require("./model/monitor");
+const {sleep} = require("./util");
+
+
+let stop = false;
+let interval = 6000;
+let totalClient = 0;
+let jwtSecret = null;
+let loadFromDatabase = true;
+let monitorList = {};
+
+(async () => {
+
+    R.setup('sqlite', {
+        filename: '../data/kuma.db'
+    });
+    R.freeze(true)
+    await R.autoloadModels("./model");
+
+    await initDatabase();
+
+    app.use('/', express.static("public"));
+
+    io.on('connection', async (socket) => {
+        console.log('a user connected');
+        totalClient++;
+
+        socket.on('disconnect', () => {
+            console.log('user disconnected');
+            totalClient--;
+        });
+
+        // Public API
+
+        socket.on("loginByToken", async (token, callback) => {
+
+            try {
+                let decoded = jwt.verify(token, jwtSecret);
+
+                console.log("Username from JWT: " + decoded.username)
+
+                let user = await R.findOne("user", " username = ? AND active = 1 ", [
+                    decoded.username
+                ])
+
+                if (user) {
+                    await afterLogin(socket, user)
+
+                    callback({
+                        ok: true,
+                    })
+                } else {
+                    callback({
+                        ok: false,
+                        msg: "The user is inactive or deleted."
+                    })
+                }
+            } catch (error) {
+                callback({
+                    ok: false,
+                    msg: "Invalid token."
+                })
+            }
+
+        });
+
+        socket.on("login", async (data, callback) => {
+            console.log("Login")
+
+            let user = await R.findOne("user", " username = ? AND active = 1 ", [
+                data.username
+            ])
+
+            if (user && passwordHash.verify(data.password, user.password)) {
+
+                await afterLogin(socket, user)
+
+                callback({
+                    ok: true,
+                    token: jwt.sign({
+                        username: data.username
+                    }, jwtSecret)
+                })
+            } else {
+                callback({
+                    ok: false,
+                    msg: "Incorrect username or password."
+                })
+            }
+
+        });
+
+        socket.on("logout", async (callback) => {
+            socket.leave(socket.userID)
+            socket.userID = null;
+            callback();
+        });
+
+        // Auth Only API
+
+        socket.on("add", async (monitor, callback) => {
+            try {
+                checkLogin(socket)
+
+                let bean = R.dispense("monitor")
+                bean.import(monitor)
+                bean.user_id = socket.userID
+                await R.store(bean)
+
+                callback({
+                    ok: true,
+                    msg: "Added Successfully.",
+                    monitorID: bean.id
+                });
+
+                await sendMonitorList(socket);
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
+        socket.on("getMonitor", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Get Monitor: ${monitorID} User ID: ${socket.userID}`)
+
+                let bean = await R.findOne("monitor", " id = ? AND user_id = ? ", [
+                    monitorID,
+                    socket.userID,
+                ])
+
+                callback({
+                    ok: true,
+                    monitor: bean.toJSON(),
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
+        // Start or Resume the monitor
+        socket.on("resumeMonitor", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+                await startMonitor(socket.userID, monitorID);
+                await sendMonitorList(socket);
+
+                callback({
+                    ok: true,
+                    msg: "Paused Successfully."
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
+        socket.on("pauseMonitor", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+                await pauseMonitor(socket.userID, monitorID)
+                await sendMonitorList(socket);
+
+                callback({
+                    ok: true,
+                    msg: "Paused Successfully."
+                });
+
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
+        socket.on("deleteMonitor", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Delete Monitor: ${monitorID} User ID: ${socket.userID}`)
+
+                if (monitorID in monitorList) {
+                    monitorList[monitorID].stop();
+                    delete monitorList[monitorID]
+                }
+
+                await R.exec("DELETE FROM monitor WHERE id = ? AND user_id = ? ", [
+                    monitorID,
+                    socket.userID
+                ]);
+
+                callback({
+                    ok: true,
+                    msg: "Deleted Successfully."
+                });
+
+                await sendMonitorList(socket);
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
+        socket.on("changePassword", async (password, callback) => {
+            try {
+                checkLogin(socket)
+
+                if (! password.currentPassword) {
+                    throw new Error("Invalid new password")
+                }
+
+                let user = await R.findOne("user", " id = ? AND active = 1 ", [
+                    socket.userID
+                ])
+
+                if (user && passwordHash.verify(password.currentPassword, user.password)) {
+
+                    await R.exec("UPDATE `user` SET password = ? WHERE id = ? ", [
+                        passwordHash.generate(password.newPassword),
+                        socket.userID
+                    ]);
+
+                    callback({
+                        ok: true,
+                        msg: "Password has been updated successfully."
+                    })
+                } else {
+                    throw new Error("Incorrect current password")
+                }
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+    });
+
+    server.listen(3001, () => {
+        console.log('Listening on 3001');
+        startMonitors();
+    });
+
+})();
+
+async function checkOwner(userID, monitorID) {
+    let row = await R.getRow("SELECT id FROM monitor WHERE id = ? AND user_id = ? ", [
+        monitorID,
+        userID,
+    ])
+
+    if (! row) {
+        throw new Error("You do not own this monitor.");
+    }
+}
+
+async function sendMonitorList(socket) {
+    io.to(socket.userID).emit("monitorList", await getMonitorJSONList(socket.userID))
+}
+
+async function afterLogin(socket, user) {
+    socket.userID = user.id;
+    socket.join(user.id)
+    socket.emit("monitorList", await getMonitorJSONList(user.id))
+}
+
+async function getMonitorJSONList(userID) {
+    let result = [];
+
+    let monitorList = await R.find("monitor", " user_id = ? ORDER BY weight DESC ", [
+        userID
+    ])
+
+    for (let monitor of monitorList) {
+        result.push(monitor.toJSON())
+    }
+
+    return result;
+}
+
+function checkLogin(socket) {
+    if (! socket.userID) {
+        throw new Error("You are not logged in.");
+    }
+}
+
+async function initDatabase() {
+    let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [
+        "jwtSecret"
+    ]);
+
+    if (! jwtSecretBean) {
+        console.log("JWT secret is not found, generate one.")
+        jwtSecretBean = R.dispense("setting")
+        jwtSecretBean.key = "jwtSecret"
+
+        jwtSecretBean.value = passwordHash.generate(dayjs() + "")
+        await R.store(jwtSecretBean)
+    } else {
+        console.log("Load JWT secret from database.")
+    }
+
+    jwtSecret = jwtSecretBean.value;
+}
+
+async function startMonitor(userID, monitorID) {
+    await checkOwner(userID, monitorID)
+
+    console.log(`Resume Monitor: ${monitorID} User ID: ${userID}`)
+
+    await R.exec("UPDATE monitor SET active = 1 WHERE id = ? AND user_id = ? ", [
+        monitorID,
+        userID
+    ]);
+
+    let monitor = await R.findOne("monitor", " id = ? ", [
+        monitorID
+    ])
+
+    monitorList[monitor.id] = monitor;
+    monitor.start(io)
+}
+
+async function pauseMonitor(userID, monitorID) {
+    await checkOwner(userID, monitorID)
+
+    console.log(`Pause Monitor: ${monitorID} User ID: ${userID}`)
+
+    await R.exec("UPDATE monitor SET active = 0 WHERE id = ? AND user_id = ? ", [
+        monitorID,
+        userID
+    ]);
+
+    if (monitorID in monitorList) {
+        monitorList[monitorID].stop();
+    }
+}
+
+/**
+ * Resume active monitors
+ */
+async function startMonitors() {
+    let list = await R.find("monitor", " active = 1 ")
+
+    for (let monitor of list) {
+        monitor.start(io)
+        monitorList[monitor.id] = monitor;
+    }
+}
+
diff --git a/server/util.js b/server/util.js
new file mode 100644
index 000000000..fe3ed4a04
--- /dev/null
+++ b/server/util.js
@@ -0,0 +1,3 @@
+exports.sleep = (ms) => {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 000000000..1f05560e6
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/assets/app.scss b/src/assets/app.scss
new file mode 100644
index 000000000..a17e18840
--- /dev/null
+++ b/src/assets/app.scss
@@ -0,0 +1,57 @@
+@import "vars.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;
+}
+
+.shadow-box {
+    overflow: hidden;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
+    padding: 10px;
+    border-radius: 10px;
+
+    &.big-padding {
+        padding: 20px;
+    }
+}
+
+.btn {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.btn-primary {
+    color: white;
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+        background-color: $highlight;
+        border-color: $highlight;
+    }
+}
+
+.hp-bar-big {
+    white-space: nowrap;
+    margin-top: 4px;
+    text-align: center;
+    direction: rtl;
+    margin-bottom: 10px;
+    transition: all ease-in-out 0.15s;
+    position: relative;
+
+    div {
+        display: inline-block;
+        background-color: $primary;
+        width: 1%;
+        height: 30px;
+        margin: 0.3%;
+        border-radius: 50rem;
+        transition: all ease-in-out 0.15s;
+
+        &:hover {
+            opacity: 0.8;
+            transform: scale(1.5);
+        }
+    }
+}
diff --git a/src/assets/vars.scss b/src/assets/vars.scss
new file mode 100644
index 000000000..dd1bcc0b9
--- /dev/null
+++ b/src/assets/vars.scss
@@ -0,0 +1,6 @@
+$primary: #5CDD8B;
+$link-color: #111;
+$border-radius: 50rem;
+
+$highlight: #7ce8a4;
+$highlight-white: #e7faec;
diff --git a/src/components/Confirm.vue b/src/components/Confirm.vue
new file mode 100644
index 000000000..063ece257
--- /dev/null
+++ b/src/components/Confirm.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="modal fade" tabindex="-1" ref="modal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <slot></slot>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn" :class="btnStyle" @click="yes" data-bs-dismiss="modal">Yes</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from 'bootstrap'
+
+export default {
+    props: {
+        btnStyle: {
+            type: String,
+            default: "btn-primary"
+        }
+    },
+    data: () => ({
+        modal: null
+    }),
+    mounted() {
+        this.modal = new Modal(this.$refs.modal)
+    },
+    methods: {
+        show() {
+            this.modal.show()
+        },
+        yes() {
+            this.$emit('yes');
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 000000000..5907f616b
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="form-container">
+        <div class="form">
+            <form @submit.prevent="submit">
+
+                <h1 class="h3 mb-3 fw-normal"></h1>
+
+                <div class="form-floating">
+                    <input type="text" class="form-control" id="floatingInput" placeholder="Username" v-model="username">
+                    <label for="floatingInput">Username</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password" v-model="password">
+                    <label for="floatingPassword">Password</label>
+                </div>
+
+                <div class="form-check mb-3 mt-3">
+                    <label>
+                        <input type="checkbox" value="remember-me" class="form-check-input" id="remember" v-model="remember">
+
+                        <label class="form-check-label" for="remember">
+                            Remember me
+                        </label>
+                    </label>
+                </div>
+                <button class="w-100 btn btn-primary" type="submit" :disabled="processing">Login</button>
+
+                <div class="alert alert-danger mt-3" role="alert" v-if="res && !res.ok">
+                    {{ res.msg }}
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            processing: false,
+            username: "",
+            password: "",
+            remember: true,
+            res: null,
+        }
+    },
+    methods: {
+        submit() {
+            this.processing = true;
+            this.$root.login(this.username, this.password, (res) => {
+                this.processing = false;
+                this.res = res;
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+.form-container {
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.form {
+
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+    text-align: center;
+}
+</style>
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
new file mode 100644
index 000000000..9e3d7a65c
--- /dev/null
+++ b/src/layouts/Layout.vue
@@ -0,0 +1,69 @@
+<template>
+
+    <div class="lost-connection" v-if="! $root.socket.connected && ! $root.socket.firstConnect">
+        <div class="container-fluid">
+            Lost connection to the socket server. Reconnecting...
+        </div>
+    </div>
+
+    <header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
+
+        <router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+            <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+            <span class="fs-4 title">Uptime Kuma</span>
+        </router-link>
+
+        <ul class="nav nav-pills">
+            <li class="nav-item"><router-link to="/dashboard" class="nav-link">📊 Dashboard</router-link></li>
+            <li class="nav-item"><router-link to="/settings" class="nav-link">⚙ Settings</router-link></li>
+        </ul>
+
+    </header>
+
+    <main>
+        <router-view v-if="$root.loggedIn" />
+        <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
+    </main>
+
+</template>
+
+<script>
+import Login from "../components/Login.vue";
+
+export default {
+    components: {
+        Login
+    },
+    mounted() {
+        this.init();
+    },
+    watch: {
+        $route (to, from) {
+            this.init();
+        }
+    },
+    methods: {
+        init() {
+            if (this.$route.name === "root") {
+                this.$router.push("/dashboard")
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .title {
+        font-weight: bold;
+    }
+
+    .nav {
+        margin-right: 25px;
+    }
+
+    .lost-connection {
+        padding: 5px;
+        background-color: crimson;
+        color: white;
+    }
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 000000000..085c25f2b
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,78 @@
+import {createApp, h} from "vue";
+import {createRouter, createWebHistory} from 'vue-router'
+
+import App from './App.vue'
+import Layout from './layouts/Layout.vue'
+import Settings from "./pages/Settings.vue";
+import Dashboard from "./pages/Dashboard.vue";
+import DashboardHome from "./pages/DashboardHome.vue";
+import Details from "./pages/Details.vue";
+import socket from "./mixins/socket"
+import "./assets/app.scss"
+import EditMonitor from "./pages/EditMonitor.vue";
+import Toast from "vue-toastification";
+import "vue-toastification/dist/index.css";
+import "bootstrap"
+
+const routes = [
+    {
+        path: '/',
+        component: Layout,
+        children: [
+            {
+                name: "root",
+                path: '',
+                component: Dashboard,
+                children: [
+                    {
+                        name: "DashboardHome",
+                        path: '/dashboard',
+                        component: DashboardHome,
+                        children: [
+                            {
+                                path: ':id',
+                                component: Details,
+                            },
+                            {
+                                path: '/add',
+                                component: EditMonitor,
+                            },
+                            {
+                                path: '/edit/:id',
+                                component: EditMonitor,
+                            },
+                        ]
+                    },
+                    {
+                        path: '/settings',
+                        component: Settings,
+                    },
+                ],
+            },
+        ],
+    }
+]
+
+const router = createRouter({
+    linkActiveClass: 'active',
+    history: createWebHistory(),
+    routes,
+})
+
+const app = createApp({
+    mixins: [
+        socket,
+    ],
+    render: ()=>h(App)
+})
+
+app.use(router)
+
+const options = {
+    position: "bottom-right"
+};
+
+app.use(Toast, options);
+
+app.mount('#app')
+
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
new file mode 100644
index 000000000..a55a1d3e2
--- /dev/null
+++ b/src/mixins/socket.js
@@ -0,0 +1,121 @@
+import {io} from "socket.io-client";
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+
+let storage = localStorage;
+let socket;
+
+export default {
+
+    data() {
+        return {
+            socket: {
+                token: null,
+                firstConnect: true,
+                connected: false,
+            },
+            allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
+            loggedIn: false,
+            monitorList: [
+
+            ],
+            importantHeartbeatList: [
+
+            ]
+        }
+    },
+
+    created() {
+        socket = io("http://localhost:3001", {
+            transports: ['websocket']
+        });
+
+        socket.on('monitorList', (data) => {
+            this.monitorList = data;
+        });
+
+        socket.on('disconnect', () => {
+            this.socket.connected = false;
+        });
+
+        socket.on('connect', () => {
+            this.socket.connected = true;
+            this.socket.firstConnect = false;
+
+            if (storage.token) {
+                this.loginByToken(storage.token)
+            } else {
+                this.allowLoginDialog = true;
+            }
+
+        });
+
+    },
+
+    methods: {
+        getSocket() {
+          return socket;
+        },
+        toastRes(res) {
+            if (res.ok) {
+                toast.success(res.msg);
+            } else {
+                toast.error(res.msg);
+            }
+        },
+        login(username, password, callback) {
+            socket.emit("login", {
+                username,
+                password,
+            }, (res) => {
+
+                if (res.ok) {
+                    storage.token = res.token;
+                    this.socket.token = res.token;
+                    this.loggedIn = true;
+
+                    // Trigger Chrome Save Password
+                    history.pushState({}, '')
+                }
+
+                callback(res)
+            })
+        },
+        loginByToken(token) {
+            socket.emit("loginByToken", token, (res) => {
+                this.allowLoginDialog = true;
+
+                if (! res.ok) {
+                    this.logout()
+                    console.log(res.msg)
+                } else {
+                    this.loggedIn = true;
+                }
+            })
+        },
+        logout() {
+            storage.removeItem("token");
+            this.socket.token = null;
+            this.loggedIn = false;
+
+            socket.emit("logout", () => {
+                toast.success("Logout Successfully")
+            })
+        },
+        add(monitor, callback) {
+            socket.emit("add", monitor, callback)
+        },
+        deleteMonitor(monitorID, callback) {
+            socket.emit("deleteMonitor", monitorID, callback)
+        },
+        loadMonitor(monitorID) {
+
+        }
+    },
+
+    computed: {
+
+    }
+
+}
+
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
new file mode 100644
index 000000000..8da162484
--- /dev/null
+++ b/src/pages/Dashboard.vue
@@ -0,0 +1,128 @@
+<template>
+
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12 col-xl-4">
+                <div>
+                    <router-link to="/add" class="btn btn-primary">Add New Monitor</router-link>
+                </div>
+
+                <div class="shadow-box list">
+
+                    <span v-if="$root.monitorList.length === 0">No Monitors, please <router-link to="/add">add one</router-link>.</span>
+
+                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in $root.monitorList">
+
+                        <div class="row">
+                        	<div class="col-6">
+
+                                <div class="info">
+                                    <span class="badge rounded-pill bg-primary">{{ item.upRate }}%</span>
+                                    {{ item.name }}
+                                </div>
+
+                            </div>
+                        	<div class="col-6">
+                                <div class="hp-bar">
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                    <div></div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </router-link>
+
+                </div>
+            </div>
+            <div class="col-12 col-xl-8">
+                <router-view />
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+export default {
+    components: {
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        monitorURL(id) {
+            return "/dashboard/" + id;
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/vars.scss";
+
+.container-fluid {
+    width: 98%
+}
+
+.list {
+    margin-top: 25px;
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 15px 15px 12px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &.disabled {
+            opacity: 0.3;
+        }
+
+        .info {
+            white-space: nowrap;
+        }
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+    }
+}
+
+.hp-bar {
+    white-space: nowrap;
+    margin-top: 4px;
+    text-align: right;
+
+    div {
+        display: inline-block;
+        background-color: $primary;
+        width: 0.35rem;
+        height: 1rem;
+        margin: 0.15rem;
+        border-radius: 50rem;
+        transition: all ease-in-out 0.15s;
+
+        &:hover {
+            opacity: 0.8;
+            transform: scale(1.5);
+        }
+    }
+}
+
+</style>
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
new file mode 100644
index 000000000..b9ecfefbb
--- /dev/null
+++ b/src/pages/DashboardHome.vue
@@ -0,0 +1,123 @@
+<template>
+
+    <div v-if="$route.name === 'DashboardHome'">
+        <h1 class="mb-3">Quick Stats</h1>
+
+        <div class="shadow-box big-padding text-center">
+            <div class="row">
+
+                <div class="col-12">
+                    <div class="hp-bar-big">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </div>
+
+            	<div class="col">
+                    <h3>Up</h3>
+                    <span class="num">2</span>
+                </div>
+            	<div class="col">
+                    <h3>Down</h3>
+                    <span class="num text-danger">0</span>
+                </div>
+                <div class="col">
+                    <h3>Pause</h3>
+                    <span class="num">0</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="row mt-4">
+        	<div class="col-8">
+                <h4>Latest Incident</h4>
+
+                <div class="shadow-box bg-danger text-light">
+                    MySQL was down.
+                </div>
+
+                <div class="shadow-box bg-primary text-light">
+                    No issues was found.
+                </div>
+
+            </div>
+        	<div class="col-4">
+
+                <h4>Overall Uptime</h4>
+
+                <div class="shadow-box">
+                    <div>100.00% (24 hours)</div>
+                    <div>100.00% (7 days)</div>
+                    <div>100.00% (30 days)</div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <router-view ref="child" />
+</template>
+
+<script>
+export default {
+    computed: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/vars";
+
+.num {
+    font-size: 30px;
+    color: $primary;
+    font-weight: bold;
+}
+</style>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
new file mode 100644
index 000000000..d1e04d1c3
--- /dev/null
+++ b/src/pages/Details.vue
@@ -0,0 +1,162 @@
+<template>
+    <h1>{{ monitor.name }}</h1>
+    <h2>{{ monitor.url }}</h2>
+
+    <div class="functions">
+        <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
+        <button class="btn btn-primary" @click="resumeMonitor"  v-if="! monitor.active">Resume</button>
+        <router-link :to=" '/edit/' + monitor.id " class="btn btn-light">Edit</router-link>
+        <button class="btn btn-danger" @click="deleteDialog">Delete</button>
+    </div>
+
+    <div class="shadow-box">
+
+        <div class="hp-bar-big">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-8">
+
+            </div>
+            <div class="col-md-4">
+
+            </div>
+        </div>
+    </div>
+
+    <Confirm ref="confirmPause" @yes="pauseMonitor">
+        Are you sure want to pause?
+    </Confirm>
+
+    <Confirm ref="confirmDelete" btnStyle="btn-danger" @yes="deleteMonitor">
+        Are you sure want to delete this monitor?
+    </Confirm>
+</template>
+
+<script>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+import Confirm from "../components/Confirm.vue";
+
+export default {
+    components: {
+        Confirm
+    },
+    mounted() {
+
+    },
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        monitor() {
+            let id = parseInt(this.$route.params.id)
+
+            for (let monitor of this.$root.monitorList) {
+                if (monitor.id === id) {
+                    return monitor;
+                }
+            }
+            return {};
+        },
+    },
+    methods: {
+        pauseDialog() {
+            this.$refs.confirmPause.show();
+        },
+        resumeMonitor() {
+            this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
+                this.$root.toastRes(res)
+            })
+        },
+        pauseMonitor() {
+            this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
+                this.$root.toastRes(res)
+            })
+        },
+        deleteDialog() {
+            this.$refs.confirmDelete.show();
+        },
+        deleteMonitor() {
+            this.$root.deleteMonitor(this.monitor.id, (res) => {
+                if (res.ok) {
+                    toast.success(res.msg);
+                    this.$router.push("/dashboard")
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+h2 {
+    color: $primary;
+    margin-bottom: 20px;
+}
+
+.functions {
+    button, a {
+        margin-right: 20px;
+    }
+}
+
+.shadow-box {
+    padding: 20px;
+    margin-top: 25px;
+}
+</style>
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
new file mode 100644
index 000000000..143806a79
--- /dev/null
+++ b/src/pages/EditMonitor.vue
@@ -0,0 +1,123 @@
+<template>
+    <h1 class="mb-3">{{ pageName }}</h1>
+    <form @submit.prevent="submit">
+
+    <div class="shadow-box">
+        <div class="row">
+            <div class="col-md-6">
+                <h2>General</h2>
+
+                    <div class="mb-3">
+                        <label for="type" class="form-label">Monitor Type</label>
+                        <select class="form-select" aria-label="Default select example" id="type" v-model="monitor.type">
+                            <option value="http">HTTP(s)</option>
+                            <option value="port">TCP Port</option>
+                            <option value="ping">Ping</option>
+                            <option value="keyword">HTTP(s) - Keyword</option>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="name" class="form-label">Friendly Name</label>
+                        <input type="text" class="form-control" id="name" v-model="monitor.name" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="url" class="form-label">URL</label>
+                        <input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
+                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="20">
+                    </div>
+
+                    <div>
+                        <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
+                    </div>
+
+            </div>
+
+            <div class="col-md-6">
+                <h2>Notifications</h2>
+                <p>Not available, please setup in Settings page.</p>
+                <a class="btn btn-primary me-2" href="/settings" target="_blank">Go to Settings</a>
+            </div>
+        </div>
+    </div>
+    </form>
+
+
+</template>
+
+<script>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+
+export default {
+    components: {
+
+    },
+    mounted() {
+
+        if (this.isAdd) {
+            this.monitor = {
+                type: "http",
+                name: "",
+                url: "https://",
+                interval: 60,
+            }
+        } else {
+            this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
+                if (res.ok) {
+                    this.monitor = res.monitor;
+                } else {
+                    toast.error(res.msg)
+                }
+            })
+        }
+
+    },
+    data() {
+        return {
+            processing: false,
+            monitor: { }
+        }
+    },
+    computed: {
+        pageName() {
+            return (this.isAdd) ? "Add New Monitor" : "Edit"
+        },
+        isAdd() {
+            return this.$route.path === "/add";
+        }
+    },
+    methods: {
+        submit() {
+            this.processing = true;
+
+            if (this.isAdd) {
+                this.$root.add(this.monitor, (res) => {
+                    this.processing = false;
+
+                    if (res.ok) {
+                        toast.success(res.msg);
+                        this.$router.push("/dashboard/" + res.monitorID)
+                    } else {
+                        toast.error(res.msg);
+                    }
+
+                })
+            } else {
+
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .shadow-box {
+        padding: 20px;
+    }
+</style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
new file mode 100644
index 000000000..77a4add1b
--- /dev/null
+++ b/src/pages/Settings.vue
@@ -0,0 +1,111 @@
+<template>
+    <h1 class="mb-3">Settings</h1>
+
+    <div class="shadow-box">
+        <div class="row">
+
+            <div class="col-md-6">
+                <h2>General</h2>
+                <form class="mb-3">
+                    <div class="mb-3">
+                        <label for="timezone" class="form-label">Timezone</label>
+                        <select class="form-select" aria-label="Default select example" id="timezone">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <button class="btn btn-primary" type="submit">Save</button>
+                    </div>
+                </form>
+
+                <h2>Change Password</h2>
+                <form class="mb-3" @submit.prevent="savePassword">
+                    <div class="mb-3">
+                        <label for="current-password" class="form-label">Current Password</label>
+                        <input type="password" class="form-control" id="current-password" required v-model="password.currentPassword">
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="new-password" class="form-label">New Password</label>
+                        <input type="password" class="form-control" id="new-password" required v-model="password.newPassword">
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="repeat-new-password" class="form-label">Repeat New Password</label>
+                        <input type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" id="repeat-new-password" required v-model="password.repeatNewPassword">
+                        <div class="invalid-feedback">
+                            The repeat password is not match.
+                        </div>
+                    </div>
+
+                    <div>
+                        <button class="btn btn-primary" type="submit">Update Password</button>
+                    </div>
+                </form>
+
+                <div>
+                    <button class="btn btn-danger" @click="$root.logout">Logout</button>
+                </div>
+            </div>
+
+            <div class="col-md-6">
+                <h2>Notifications</h2>
+                <p>Empty</p>
+                <button class="btn btn-primary" type="submit">Add Notification</button>
+            </div>
+
+        </div>
+    </div>
+
+
+</template>
+
+<script>
+
+
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+            invalidPassword: false,
+            password: {
+                currentPassword: "",
+                newPassword: "",
+                repeatNewPassword: "",
+            }
+        }
+    },
+    methods: {
+        savePassword() {
+            if (this.password.newPassword !== this.password.repeatNewPassword) {
+                this.invalidPassword = true;
+            } else {
+                this.$root.getSocket().emit("changePassword", this.password, (res) => {
+                    this.$root.toastRes(res)
+                    if (res.ok) {
+                        this.password.currentPassword = ""
+                        this.password.newPassword = ""
+                        this.password.repeatNewPassword = ""
+                    }
+                })
+            }
+        },
+    },
+    watch: {
+        "password.repeatNewPassword"() {
+            this.invalidPassword = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .shadow-box {
+        padding: 20px;
+    }
+</style>