2021-06-25 13:55:49 +00:00
|
|
|
<template>
|
2021-11-04 14:12:52 +00:00
|
|
|
<div>
|
|
|
|
<h1 v-show="show" class="mb-3">
|
|
|
|
{{ $t("Settings") }}
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
<div class="shadow-box">
|
|
|
|
<div class="row">
|
2022-03-04 15:20:42 +00:00
|
|
|
<div v-if="showSubMenu" class="settings-menu col-lg-3 col-md-5">
|
2021-11-04 14:12:52 +00:00
|
|
|
<router-link
|
|
|
|
v-for="(item, key) in subMenus"
|
|
|
|
:key="key"
|
|
|
|
:to="`/settings/${key}`"
|
|
|
|
>
|
|
|
|
<div class="menu-item">
|
|
|
|
{{ item.title }}
|
2021-10-07 08:30:16 +00:00
|
|
|
</div>
|
2021-11-04 14:12:52 +00:00
|
|
|
</router-link>
|
2022-04-18 16:39:49 +00:00
|
|
|
|
|
|
|
<!-- Logout Button -->
|
2022-04-20 14:39:07 +00:00
|
|
|
<a v-if="$root.isMobile && $root.loggedIn && $root.socket.token !== 'autoLogin'" class="logout" @click.prevent="$root.logout">
|
2022-04-18 16:39:49 +00:00
|
|
|
<div class="menu-item">
|
|
|
|
<font-awesome-icon icon="sign-out-alt" />
|
|
|
|
{{ $t("Logout") }}
|
|
|
|
</div>
|
|
|
|
</a>
|
2021-11-04 14:12:52 +00:00
|
|
|
</div>
|
2022-03-04 15:20:42 +00:00
|
|
|
<div class="settings-content col-lg-9 col-md-7">
|
|
|
|
<div v-if="currentPage" class="settings-content-header">
|
2021-11-04 14:12:52 +00:00
|
|
|
{{ subMenus[currentPage].title }}
|
|
|
|
</div>
|
|
|
|
<div class="mx-3">
|
|
|
|
<router-view v-slot="{ Component }">
|
|
|
|
<transition name="slide-fade" appear>
|
|
|
|
<component :is="Component" />
|
|
|
|
</transition>
|
|
|
|
</router-view>
|
2021-08-19 18:37:59 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
2021-08-19 18:37:59 +00:00
|
|
|
</div>
|
2021-11-04 14:12:52 +00:00
|
|
|
</div>
|
2021-06-25 13:55:49 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-11-04 14:12:52 +00:00
|
|
|
import { useRoute } from "vue-router";
|
2021-10-26 15:02:32 +00:00
|
|
|
|
2021-11-04 14:12:52 +00:00
|
|
|
export default {
|
2021-06-25 13:55:49 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2021-08-19 18:37:59 +00:00
|
|
|
show: true,
|
2021-10-20 10:54:20 +00:00
|
|
|
settings: {},
|
|
|
|
settingsLoaded: false,
|
2021-11-29 08:50:00 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
currentPage() {
|
2021-12-08 17:19:09 +00:00
|
|
|
let pathSplit = useRoute().path.split("/");
|
|
|
|
let pathEnd = pathSplit[pathSplit.length - 1];
|
|
|
|
if (!pathEnd || pathEnd === "settings") {
|
2022-03-04 15:20:42 +00:00
|
|
|
return null;
|
2021-11-29 08:50:00 +00:00
|
|
|
}
|
|
|
|
return pathEnd;
|
|
|
|
},
|
2021-10-20 10:54:20 +00:00
|
|
|
|
2022-03-04 15:20:42 +00:00
|
|
|
showSubMenu() {
|
|
|
|
if (this.$root.isMobile) {
|
|
|
|
return !this.currentPage;
|
|
|
|
} else {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-29 08:50:00 +00:00
|
|
|
subMenus() {
|
|
|
|
return {
|
2021-10-20 10:54:20 +00:00
|
|
|
general: {
|
|
|
|
title: this.$t("General"),
|
|
|
|
},
|
|
|
|
appearance: {
|
|
|
|
title: this.$t("Appearance"),
|
|
|
|
},
|
|
|
|
notifications: {
|
|
|
|
title: this.$t("Notifications"),
|
|
|
|
},
|
2022-03-29 17:49:45 +00:00
|
|
|
"reverse-proxy": {
|
|
|
|
title: this.$t("Reverse Proxy"),
|
|
|
|
},
|
2021-11-04 14:12:52 +00:00
|
|
|
"monitor-history": {
|
2021-10-20 10:54:20 +00:00
|
|
|
title: this.$t("Monitor History"),
|
|
|
|
},
|
|
|
|
security: {
|
|
|
|
title: this.$t("Security"),
|
|
|
|
},
|
2021-10-30 17:37:15 +00:00
|
|
|
proxies: {
|
|
|
|
title: this.$t("Proxies"),
|
|
|
|
},
|
2021-10-20 10:54:20 +00:00
|
|
|
backup: {
|
|
|
|
title: this.$t("Backup"),
|
|
|
|
},
|
|
|
|
about: {
|
|
|
|
title: this.$t("About"),
|
2021-11-04 14:12:52 +00:00
|
|
|
},
|
2021-11-29 08:50:00 +00:00
|
|
|
};
|
2021-11-04 14:12:52 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-03-04 15:20:42 +00:00
|
|
|
watch: {
|
|
|
|
"$root.isMobile"() {
|
|
|
|
this.loadGeneralPage();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-07-01 13:47:14 +00:00
|
|
|
mounted() {
|
2021-07-31 13:57:58 +00:00
|
|
|
this.loadSettings();
|
2022-03-04 15:20:42 +00:00
|
|
|
this.loadGeneralPage();
|
2021-07-01 13:47:14 +00:00
|
|
|
},
|
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
methods: {
|
2022-03-04 15:20:42 +00:00
|
|
|
|
|
|
|
// For desktop only, mobile do nothing
|
|
|
|
loadGeneralPage() {
|
|
|
|
if (!this.currentPage && !this.$root.isMobile) {
|
|
|
|
this.$router.push("/settings/general");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-07-31 13:57:58 +00:00
|
|
|
loadSettings() {
|
|
|
|
this.$root.getSocket().emit("getSettings", (res) => {
|
|
|
|
this.settings = res.data;
|
2021-08-09 10:46:57 +00:00
|
|
|
|
2022-04-05 11:43:23 +00:00
|
|
|
if (this.settings.checkUpdate === undefined) {
|
|
|
|
this.settings.checkUpdate = true;
|
|
|
|
}
|
|
|
|
|
2021-08-09 10:46:57 +00:00
|
|
|
if (this.settings.searchEngineIndex === undefined) {
|
|
|
|
this.settings.searchEngineIndex = false;
|
|
|
|
}
|
|
|
|
|
2021-09-15 12:40:26 +00:00
|
|
|
if (this.settings.entryPage === undefined) {
|
|
|
|
this.settings.entryPage = "dashboard";
|
|
|
|
}
|
|
|
|
|
2021-10-09 15:33:47 +00:00
|
|
|
if (this.settings.keepDataPeriodDays === undefined) {
|
2021-10-12 15:28:21 +00:00
|
|
|
this.settings.keepDataPeriodDays = 180;
|
2021-10-09 15:33:47 +00:00
|
|
|
}
|
|
|
|
|
2022-05-12 10:18:47 +00:00
|
|
|
if (this.settings.tlsExpiryNotifyDays === undefined) {
|
|
|
|
this.settings.tlsExpiryNotifyDays = [];
|
|
|
|
}
|
|
|
|
|
2021-10-20 10:54:20 +00:00
|
|
|
this.settingsLoaded = true;
|
2021-09-23 12:42:33 +00:00
|
|
|
});
|
2021-07-31 13:57:58 +00:00
|
|
|
},
|
|
|
|
|
2022-03-29 09:38:48 +00:00
|
|
|
/**
|
|
|
|
* Save Settings
|
|
|
|
* @param currentPassword (Optional) Only need for disableAuth to true
|
|
|
|
*/
|
|
|
|
saveSettings(callback, currentPassword) {
|
|
|
|
this.$root.getSocket().emit("setSettings", this.settings, currentPassword, (res) => {
|
2021-07-31 13:57:58 +00:00
|
|
|
this.$root.toastRes(res);
|
|
|
|
this.loadSettings();
|
2022-03-29 09:38:48 +00:00
|
|
|
|
|
|
|
if (callback) {
|
|
|
|
callback();
|
|
|
|
}
|
2021-09-23 12:42:33 +00:00
|
|
|
});
|
2021-07-31 13:57:58 +00:00
|
|
|
},
|
2022-03-04 15:20:42 +00:00
|
|
|
}
|
2021-09-23 12:42:33 +00:00
|
|
|
};
|
2021-06-25 13:55:49 +00:00
|
|
|
</script>
|
|
|
|
|
2021-08-08 05:47:29 +00:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "../assets/vars.scss";
|
|
|
|
|
|
|
|
.shadow-box {
|
|
|
|
padding: 20px;
|
2021-10-20 10:54:20 +00:00
|
|
|
min-height: calc(100vh - 155px);
|
2021-08-08 05:47:29 +00:00
|
|
|
}
|
|
|
|
|
2021-10-20 10:54:20 +00:00
|
|
|
footer {
|
|
|
|
color: #aaa;
|
|
|
|
font-size: 13px;
|
|
|
|
margin-top: 20px;
|
|
|
|
padding-bottom: 30px;
|
|
|
|
text-align: center;
|
2021-08-10 04:20:06 +00:00
|
|
|
}
|
|
|
|
|
2021-10-20 10:54:20 +00:00
|
|
|
.settings-menu {
|
2021-11-03 09:03:40 +00:00
|
|
|
a {
|
|
|
|
text-decoration: none !important;
|
|
|
|
}
|
|
|
|
|
2021-10-20 10:54:20 +00:00
|
|
|
.menu-item {
|
|
|
|
border-radius: 10px;
|
|
|
|
margin: 0.5em;
|
|
|
|
padding: 0.7em 1em;
|
|
|
|
cursor: pointer;
|
2022-03-10 13:34:30 +00:00
|
|
|
border-left-width: 0;
|
|
|
|
transition: all ease-in-out 0.1s;
|
2021-08-10 04:20:06 +00:00
|
|
|
}
|
2021-09-01 15:09:32 +00:00
|
|
|
|
2021-10-20 10:54:20 +00:00
|
|
|
.menu-item:hover {
|
|
|
|
background: $highlight-white;
|
|
|
|
|
|
|
|
.dark & {
|
|
|
|
background: $dark-header-bg;
|
2021-09-01 17:51:51 +00:00
|
|
|
}
|
2021-10-20 10:54:20 +00:00
|
|
|
}
|
2021-09-01 15:09:32 +00:00
|
|
|
|
2021-11-04 14:12:52 +00:00
|
|
|
.active .menu-item {
|
2021-10-20 10:54:20 +00:00
|
|
|
background: $highlight-white;
|
|
|
|
border-left: 4px solid $primary;
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
|
|
|
.dark & {
|
|
|
|
background: $dark-header-bg;
|
2021-09-01 17:51:51 +00:00
|
|
|
}
|
2021-09-01 15:09:32 +00:00
|
|
|
}
|
2021-08-08 05:47:29 +00:00
|
|
|
}
|
2021-08-29 18:22:49 +00:00
|
|
|
|
2021-10-20 10:54:20 +00:00
|
|
|
.settings-content {
|
|
|
|
.settings-content-header {
|
|
|
|
width: calc(100% + 20px);
|
|
|
|
border-bottom: 1px solid #dee2e6;
|
|
|
|
border-radius: 0 10px 0 0;
|
|
|
|
margin-top: -20px;
|
|
|
|
margin-right: -20px;
|
|
|
|
padding: 12.5px 1em;
|
|
|
|
font-size: 26px;
|
|
|
|
|
|
|
|
.dark & {
|
|
|
|
background: $dark-header-bg;
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
2022-03-04 15:20:42 +00:00
|
|
|
|
|
|
|
.mobile & {
|
|
|
|
padding: 15px 0 0 0;
|
|
|
|
|
|
|
|
.dark & {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
}
|
2021-10-20 10:54:20 +00:00
|
|
|
}
|
2021-08-29 18:22:49 +00:00
|
|
|
}
|
2022-04-18 16:39:49 +00:00
|
|
|
|
|
|
|
.logout {
|
|
|
|
color: $danger !important;
|
|
|
|
}
|
2021-06-25 13:55:49 +00:00
|
|
|
</style>
|