WIP: Convert to use vue-router & improve layout

WIP: Fix security page & improve layout

WIP: Fix displaying current page

UI: Improve spacing

Chore: Improve styling

src/components/settings/General.vue

@@ -163,13 +163,13 @@ export default {
 
     computed: {
         settings() {
-            return this.$parent.$parent.settings;
+            return this.$parent.$parent.$parent.settings;
         },
         saveSettings() {
-            return this.$parent.$parent.saveSettings;
+            return this.$parent.$parent.$parent.saveSettings;
         },
         settingsLoaded() {
-            return this.$parent.$parent.settingsLoaded;
+            return this.$parent.$parent.$parent.settingsLoaded;
         },
         guessTimezone() {
             return dayjs.tz.guess();

src/components/settings/MonitorHistory.vue

@@ -23,7 +23,7 @@
                 <button class="btn btn-outline-info me-2" @click="shrinkDatabase">
                     {{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})
                 </button>
-                <div class="form-text ms-2">{{ $t("shrinkDatabaseDescription") }}</div>
+                <div class="form-text mt-2 mb-4 ms-2">{{ $t("shrinkDatabaseDescription") }}</div>
             </div>
             <button
                 class="btn btn-outline-danger me-2 mb-2"
@@ -64,13 +64,13 @@ export default {
 
     computed: {
         settings() {
-            return this.$parent.$parent.settings;
+            return this.$parent.$parent.$parent.settings;
         },
         saveSettings() {
-            return this.$parent.$parent.saveSettings;
+            return this.$parent.$parent.$parent.saveSettings;
         },
         settingsLoaded() {
-            return this.$parent.$parent.settingsLoaded;
+            return this.$parent.$parent.$parent.settingsLoaded;
         },
         databaseSizeDisplay() {
             return (

src/components/settings/Security.vue

@@ -5,6 +5,7 @@
             <template v-if="!settings.disableAuth">
                 <p>
                     {{ $t("Current User") }}: <strong>{{ username }}</strong>
+                    <button v-if="! settings.disableAuth" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                 </p>
 
                 <h5 class="my-4">{{ $t("Change Password") }}</h5>
@@ -60,7 +61,7 @@
                 </form>
             </template>
 
-            <div v-if="!$parent.$parent.settings.disableAuth" class="mt-5 mb-3">
+            <div v-if="! settings.disableAuth" class="mt-5 mb-3">
                 <h5 class="my-4">
                     {{ $t("Two Factor Authentication") }}
                 </h5>
@@ -82,7 +83,6 @@
                 <div class="mb-4">
                     <button v-if="settings.disableAuth" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
                     <button v-if="! settings.disableAuth" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
-                    <button v-if="! settings.disableAuth" class="btn btn-danger me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                 </div>
             </div>
         </div>
@@ -244,13 +244,13 @@ export default {
 
     computed: {
         settings() {
-            return this.$parent.$parent.settings;
+            return this.$parent.$parent.$parent.settings;
         },
         saveSettings() {
-            return this.$parent.$parent.saveSettings;
+            return this.$parent.$parent.$parent.saveSettings;
         },
         settingsLoaded() {
-            return this.$parent.$parent.settingsLoaded;
+            return this.$parent.$parent.$parent.settingsLoaded;
         }
     },
 

src/pages/Settings.vue

@@ -8,21 +8,25 @@
             <div class="shadow-box">
                 <div class="row">
                     <div class="settings-menu">
-                        <div v-for="(item, key) in subMenus"
+                        <router-link
+                            v-for="(item, key) in subMenus"
                             :key="key"
+                            :to="`/settings/${item.path}`"
+                        >
+                            <div
                                 class="menu-item"
-                             :class="{ active: currentSubMenu == key }"
+                                :class="{ active: $route.name == `settings-${key}` }"
-                             @click="currentSubMenu = key"
                             >
                                 {{ item.title }}
                             </div>
+                        </router-link>
                     </div>
                     <div class="settings-content">
                         <div class="settings-content-header">
-                            {{ subMenus[currentSubMenu].title }}
+                            {{ subMenus[$route.name.split("-")[1]].title }}
                         </div>
                         <div class="mx-3">
-                            <component :is="subMenus[currentSubMenu].component" />
+                            <router-view />
                         </div>
                     </div>
                 </div>
@@ -32,16 +36,6 @@
 </template>
 
 <script>
-import { markRaw } from "vue";
-
-import Appearance from "../components/settings/Appearance.vue";
-import General from "../components/settings/General.vue";
-import Notifications from "../components/settings/Notifications.vue";
-import MonitorHistory from "../components/settings/MonitorHistory.vue";
-import Security from "../components/settings/Security.vue";
-import Backup from "../components/settings/Backup.vue";
-import About from "../components/settings/About.vue";
-
 export default {
 
     data() {
@@ -55,34 +49,33 @@ export default {
             subMenus: {
                 general: {
                     title: this.$t("General"),
-                    component: markRaw(General),
+                    path: "general",
                 },
                 appearance: {
                     title: this.$t("Appearance"),
-                    component: markRaw(Appearance),
+                    path: "appearance",
                 },
                 notifications: {
                     title: this.$t("Notifications"),
-                    component: markRaw(Notifications),
+                    path: "notifications",
                 },
                 monitorHistory: {
                     title: this.$t("Monitor History"),
-                    component: markRaw(MonitorHistory),
+                    path: "monitor-history",
                 },
                 security: {
                     title: this.$t("Security"),
-                    component: markRaw(Security),
+                    path: "security",
                 },
                 backup: {
                     title: this.$t("Backup"),
-                    component: markRaw(Backup),
+                    path: "backup",
                 },
                 about: {
                     title: this.$t("About"),
-                    component: markRaw(About),
+                    path: "about",
                 }
             },
-            currentSubMenu: "general",
         };
     },
 
@@ -142,6 +135,10 @@ footer {
     flex: 0 0 auto;
     width: 300px;
 
+    a {
+        text-decoration: none !important;
+    }
+
     .menu-item {
         border-radius: 10px;
         margin: 0.5em;

src/router.js

@@ -11,6 +11,14 @@ import Setup from "./pages/Setup.vue";
 const StatusPage = () => import("./pages/StatusPage.vue");
 import Entry from "./pages/Entry.vue";
 
+import Appearance from "./components/settings/Appearance.vue";
+import General from "./components/settings/General.vue";
+import Notifications from "./components/settings/Notifications.vue";
+import MonitorHistory from "./components/settings/MonitorHistory.vue";
+import Security from "./components/settings/Security.vue";
+import Backup from "./components/settings/Backup.vue";
+import About from "./components/settings/About.vue";
+
 const routes = [
     {
         path: "/",
@@ -59,6 +67,44 @@ const routes = [
                     {
                         path: "/settings",
                         component: Settings,
+                        children: [
+                            {
+                                path: "general",
+                                alias: "",
+                                name: "settings-general",
+                                component: General,
+                            },
+                            {
+                                path: "appearance",
+                                name: "settings-appearance",
+                                component: Appearance,
+                            },
+                            {
+                                path: "notifications",
+                                name: "settings-notifications",
+                                component: Notifications,
+                            },
+                            {
+                                path: "monitor-history",
+                                name: "settings-monitorHistory",
+                                component: MonitorHistory,
+                            },
+                            {
+                                path: "security",
+                                name: "settings-security",
+                                component: Security,
+                            },
+                            {
+                                path: "backup",
+                                name: "settings-backup",
+                                component: Backup,
+                            },
+                            {
+                                path: "about",
+                                name: "settings-about",
+                                component: About,
+                            },
+                        ]
                     },
                 ],
             },