From 369cad90c1c2e938a7651947dbffaed6bd2ebd4f Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 3 Nov 2021 17:03:40 +0800
Subject: [PATCH] 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        |  6 +--
 src/components/settings/MonitorHistory.vue |  8 ++--
 src/components/settings/Security.vue       | 10 ++---
 src/pages/Settings.vue                     | 51 ++++++++++------------
 src/router.js                              | 46 +++++++++++++++++++
 5 files changed, 82 insertions(+), 39 deletions(-)

diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
index 308f21ae..a1b42d85 100644
--- a/src/components/settings/General.vue
+++ b/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();
diff --git a/src/components/settings/MonitorHistory.vue b/src/components/settings/MonitorHistory.vue
index 85853ea1..95efff0e 100644
--- a/src/components/settings/MonitorHistory.vue
+++ b/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 (
diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue
index 1cbfb034..27ff37fd 100644
--- a/src/components/settings/Security.vue
+++ b/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;
         }
     },
 
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 9ff23415..0cff1367 100644
--- a/src/pages/Settings.vue
+++ b/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"
-                             :key="key"
-                             class="menu-item"
-                             :class="{ active: currentSubMenu == key }"
-                             @click="currentSubMenu = key"
+                        <router-link
+                            v-for="(item, key) in subMenus"
+                            :key="key"
+                            :to="`/settings/${item.path}`"
                         >
-                            {{ item.title }}
-                        </div>
+                            <div
+                                class="menu-item"
+                                :class="{ active: $route.name == `settings-${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;
diff --git a/src/router.js b/src/router.js
index 5c3fda94..86615f89 100644
--- a/src/router.js
+++ b/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,
+                            },
+                        ]
                     },
                 ],
             },