topaLE
/
uptime-kuma
1
0
Fork 0
Code Issues 185 Pull Requests 26 Projects Releases 28 Wiki Activity
Browse Source

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
chakflying/settings-redesign
Nelson Chan 3 years ago
parent
1fde85227c
commit
f616f7cba9
5 changed files with 82 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/settings/General.vue
  2. 8
      src/components/settings/MonitorHistory.vue
  3. 10
      src/components/settings/Security.vue
  4. 51
      src/pages/Settings.vue
  5. 46
      src/router.js

6
src/components/settings/General.vue
View File

@ -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();

8
src/components/settings/MonitorHistory.vue
View File

@ -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 (

10
src/components/settings/Security.vue
View File

@ -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;
}
},

51
src/pages/Settings.vue
View File

@ -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;

46
src/router.js
View File

@ -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,
},
]
},
],
},

Write Preview
Loading…
Cancel
Save