add setup page

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>