mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-27 16:54:04 +00:00
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
This commit is contained in:
Nelson Chan
parent
f9bb48de13
commit
369cad90c1
5 changed files with 82 additions and 39 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue