add setup page

package.json

@@ -5,7 +5,7 @@
         "dev": "vite --host",
         "start-server": "node server/server.js",
         "update": "",
-        "build": "npm install && vite build",
+        "build": "vite build",
         "vite-preview-dist": "vite preview --host"
     },
     "dependencies": {

server/server.js

@@ -9,6 +9,7 @@ const {R} = require("redbean-node");
 const passwordHash = require('password-hash');
 const jwt = require('jsonwebtoken');
 const Monitor = require("./model/monitor");
+const fs = require("fs");
 const {getSettings} = require("./util-server");
 const {Notification} = require("./notification")
 
@@ -17,14 +18,9 @@ app.use(express.json())
 let totalClient = 0;
 let jwtSecret = null;
 let monitorList = {};
+let needSetup = false;
 
 (async () => {
-    R.setup('sqlite', {
-        filename: './data/kuma.db'
-    });
-    R.freeze(true)
-    await R.autoloadModels("./server/model");
-
     await initDatabase();
 
     app.use('/', express.static("dist"));
@@ -44,6 +40,11 @@ let monitorList = {};
         console.log('a user connected');
         totalClient++;
 
+        if (needSetup) {
+            console.log("Redirect to setup page")
+            socket.emit("setup")
+        }
+
         socket.on('disconnect', () => {
             console.log('user disconnected');
             totalClient--;
@@ -113,6 +114,40 @@ let monitorList = {};
             socket.leave(socket.userID)
             socket.userID = null;
             callback();
+        });
+
+        socket.on("needSetup", async (callback) => {
+            callback(needSetup);
+        });
+
+        socket.on("setup", async (username, password, callback) => {
+            try {
+                if ((await R.count("user")) !== 0) {
+                    throw new Error("Uptime Kuma has been setup. If you want to setup again, please delete the database.")
+                }
+
+                let user = R.dispense("user")
+                user.username = username;
+                user.password = passwordHash.generate(password)
+                await R.store(user)
+
+                needSetup = false;
+
+                callback({
+                    ok: true,
+                    msg: "Added Successfully."
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+
+
+
+
         });
 
         // Auth Only API
@@ -402,6 +437,7 @@ let monitorList = {};
 
     server.listen(3001, () => {
         console.log('Listening on 3001');
+
         startMonitors();
     });
 
@@ -489,6 +525,21 @@ function checkLogin(socket) {
 }
 
 async function initDatabase() {
+    const path = './data/kuma.db';
+
+    if (! fs.existsSync(path)) {
+        console.log("Copy Database")
+        fs.copyFileSync("./db/kuma.db", path);
+    }
+
+    console.log("Connect to Database")
+
+    R.setup('sqlite', {
+        filename: path
+    });
+    R.freeze(true)
+    await R.autoloadModels("./server/model");
+
     let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [
         "jwtSecret"
     ]);
@@ -504,6 +555,11 @@ async function initDatabase() {
         console.log("Load JWT secret from database.")
     }
 
+    if ((await R.count("user")) === 0) {
+        console.log("No user, need setup")
+        needSetup = true;
+    }
+
     jwtSecret = jwtSecretBean.value;
 }
 

src/main.js

@@ -14,6 +14,7 @@ import EditMonitor from "./pages/EditMonitor.vue";
 import Toast from "vue-toastification";
 import "vue-toastification/dist/index.css";
 import "bootstrap"
+import Setup from "./pages/Setup.vue";
 
 const routes = [
     {
@@ -56,8 +57,14 @@ const routes = [
                     },
                 ],
             },
+
         ],
-    }
+
+    },
+    {
+        path: '/setup',
+        component: Setup,
+    },
 ]
 
 const router = createRouter({

src/mixins/socket.js

@@ -33,6 +33,10 @@ export default {
             transports: ['websocket']
         });
 
+        socket.on('setup', (monitorID, data) => {
+            this.$router.push("/setup")
+        });
+
         socket.on('monitorList', (data) => {
             this.monitorList = data;
         });

src/pages/Dashboard.vue

@@ -9,7 +9,9 @@
 
                 <div class="shadow-box list mb-4">
 
-                    <span v-if="$root.monitorList.length === 0">No Monitors, please <router-link to="/add">add one</router-link>.</span>
+                    <div class="text-center mt-3" v-if="Object.keys($root.monitorList).length === 0">
+                        No Monitors, please <router-link to="/add">add one</router-link>.
+                    </div>
 
                     <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in sortedMonitorList">
 

src/pages/Setup.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="form-container">
+        <div class="form">
+            <form @submit.prevent="submit">
+
+                <div>
+                    <object width="64" data="/icon.svg"></object>
+                    <div style="font-size: 28px; font-weight: bold; margin-top: 5px;">Uptime Kuma</div>
+                </div>
+
+                <p class="mt-3">Create your admin account</p>
+
+                <div class="form-floating">
+                    <input type="text" class="form-control" id="floatingInput" placeholder="Username" v-model="username" required>
+                    <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" required>
+                    <label for="floatingPassword">Password</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input type="password" class="form-control" id="repeat" placeholder="Repeat Password" v-model="repeatPassword" required>
+                    <label for="repeat">Repeat Password</label>
+                </div>
+
+                <button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">Create</button>
+
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+
+export default {
+    data() {
+        return {
+            processing: false,
+            username: "",
+            password: "",
+            repeatPassword: "",
+        }
+    },
+    mounted() {
+        this.$root.getSocket().emit("needSetup", (needSetup) => {
+            if (! needSetup) {
+                this.$router.push("/")
+            }
+        });
+    },
+    methods: {
+        submit() {
+            this.processing = true;
+
+            if (this.password !== this.repeatPassword) {
+                toast.error("Repeat password do not match.")
+                this.processing = false;
+                return;
+            }
+
+            this.$root.getSocket().emit("setup", this.username, this.password, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res)
+
+                if (res.ok) {
+                    this.$router.push("/")
+                }
+            })
+        }
+    }
+}
+</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>