Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

WIP: Convert to use vue-router & improve layout

Browse Source 
WIP: Fix security page & improve layout

WIP: Fix displaying current page

UI: Improve spacing

Chore: Improve styling
pull/753/head
Nelson Chan 3 years ago
parent f9bb48de13
commit 369cad90c1
5 changed files with 82 additions and 39 deletions
Show Stats Download Patch File Download Diff File

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

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

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

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

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

@ -5,6 +5,7 @@
<template v-if="!settings.disableAuth"> <template v-if="!settings.disableAuth">
<p> <p>
{{ $t("Current User") }}: <strong>{{ username }}</strong> {{ $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> </p>
<h5 class="my-4">{{ $t("Change Password") }}</h5> <h5 class="my-4">{{ $t("Change Password") }}</h5>
@ -60,7 +61,7 @@
</form> </form>
</template> </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"> <h5 class="my-4">
{{ $t("Two Factor Authentication") }} {{ $t("Two Factor Authentication") }}
</h5> </h5>
@ -82,7 +83,6 @@
<div class="mb-4"> <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-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-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> </div>
</div> </div>
@ -244,13 +244,13 @@ export default {
computed: { computed: {
settings() { settings() {
return this.$parent.$parent.settings; return this.$parent.$parent.$parent.settings;
}, },
saveSettings() { saveSettings() {
return this.$parent.$parent.saveSettings; return this.$parent.$parent.$parent.saveSettings;
}, },
settingsLoaded() { settingsLoaded() {
return this.$parent.$parent.settingsLoaded; return this.$parent.$parent.$parent.settingsLoaded;
} }
}, },

51
src/pages/Settings.vue
Unescape View File

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

46
src/router.js
Unescape View File

@ -11,6 +11,14 @@ import Setup from "./pages/Setup.vue";
const StatusPage = () => import("./pages/StatusPage.vue"); const StatusPage = () => import("./pages/StatusPage.vue");
import Entry from "./pages/Entry.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 = [ const routes = [
{ {
path: "/", path: "/",
@ -59,6 +67,44 @@ const routes = [
{ {
path: "/settings", path: "/settings",
component: 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