mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-10-03 15:56:17 +00:00
Adjusted settings page
This commit is contained in:
Donald Zou
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
import PeersDefaultSettingsInput from "@/components/settingsComponent/peersDefaultSettingsInput.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex gap-3 flex-column">
|
||||
<div class="card rounded-3">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Peer Default Settings"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_global_dns" title="DNS"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_endpoint_allowed_ip" title="Endpoint Allowed IPs"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_mtu" title="MTU"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_keep_alive" title="Persistent Keepalive"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="remote_endpoint" title="Peer Remote Endpoint"
|
||||
:warning="true" warningText="This will be changed globally, and will be apply to all peer's QR code and configuration file."
|
||||
></PeersDefaultSettingsInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
|
||||
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
import DashboardLanguage from "@/components/settingsComponent/dashboardLanguage.vue";
|
||||
import AccountSettingsInputPassword from "@/components/settingsComponent/accountSettingsInputPassword.vue";
|
||||
import DashboardTheme from "@/components/settingsComponent/dashboardTheme.vue";
|
||||
import DashboardAPIKeys from "@/components/settingsComponent/dashboardAPIKeys.vue";
|
||||
import DashboardIPPortInput from "@/components/settingsComponent/dashboardIPPortInput.vue";
|
||||
import AccountSettingsMFA from "@/components/settingsComponent/accountSettingsMFA.vue";
|
||||
import AccountSettingsInputUsername from "@/components/settingsComponent/accountSettingsInputUsername.vue";
|
||||
import DashboardEmailSettings from "@/components/settingsComponent/dashboardEmailSettings.vue";
|
||||
import DashboardWebHooks from "@/components/settingsComponent/dashboardWebHooks.vue";
|
||||
|
||||
const dashboardConfigurationStore = DashboardConfigurationStore()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex gap-3 flex-column">
|
||||
<div class="card rounded-3">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Appearance"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-2">
|
||||
<div class="col-sm">
|
||||
<DashboardTheme></DashboardTheme>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<DashboardLanguage></DashboardLanguage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<DashboardIPPortInput></DashboardIPPortInput>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Account Settings"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column gap-3">
|
||||
<div>
|
||||
<AccountSettingsInputUsername targetData="username"
|
||||
title="Username"
|
||||
></AccountSettingsInputUsername>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<AccountSettingsInputPassword
|
||||
targetData="password">
|
||||
</AccountSettingsInputPassword>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<AccountSettingsMFA v-if="!dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
|
||||
</div>
|
||||
</div>
|
||||
<DashboardAPIKeys></DashboardAPIKeys>
|
||||
<DashboardEmailSettings></DashboardEmailSettings>
|
||||
<DashboardWebHooks></DashboardWebHooks>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import DashboardSettingsInputWireguardConfigurationPath
|
||||
from "@/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue";
|
||||
import DashboardSettingsWireguardConfigurationAutostart
|
||||
from "@/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex gap-3 flex-column" >
|
||||
<DashboardSettingsInputWireguardConfigurationPath
|
||||
targetData="wg_conf_path"
|
||||
title="Configurations Directory"
|
||||
:warning="true"
|
||||
warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard"
|
||||
>
|
||||
</DashboardSettingsInputWireguardConfigurationPath>
|
||||
<DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -42,6 +42,32 @@ const router = createRouter({
|
||||
name: "Settings",
|
||||
path: 'settings',
|
||||
component: () => import('@/views/settings.vue'),
|
||||
children: [
|
||||
{
|
||||
name: "WGDashboard Settings",
|
||||
path: "",
|
||||
component: () => import("@/components/settingsComponent/wgdashboardSettings.vue"),
|
||||
meta: {
|
||||
title: "WGDashboard Settings"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Peers Settings",
|
||||
path: "peers_settings",
|
||||
component: () => import("@/components/settingsComponent/peerDefaultSettings.vue"),
|
||||
meta: {
|
||||
title: "Peers Default Settings"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "WireGuard Configuration Settings",
|
||||
path: "wireguard_settings",
|
||||
component: () => import("@/components/settingsComponent/wireguardConfigurationSettings.vue"),
|
||||
meta: {
|
||||
title: "WireGuard Configuration Settings"
|
||||
}
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
title: "Settings"
|
||||
}
|
||||
|
||||
@@ -30,7 +30,6 @@ const deleteSuccess = async () => {
|
||||
|
||||
<template>
|
||||
<div class="text-body w-100 h-100 pb-2 position-relative">
|
||||
|
||||
<div class="w-100 h-100 card rounded-3">
|
||||
<Transition name="zoom">
|
||||
<ClientSettings v-if="settings" @close="settings = false"></ClientSettings>
|
||||
|
||||
@@ -40,15 +40,15 @@ export default {
|
||||
activeTab: "WGDashboard",
|
||||
tabs: [
|
||||
{
|
||||
id: "WGDashboard",
|
||||
id: "",
|
||||
title: "WGDashboard Settings"
|
||||
},
|
||||
{
|
||||
id: "Peers",
|
||||
id: "peers_settings",
|
||||
title: "Peers Settings"
|
||||
},
|
||||
{
|
||||
id: "WireGuardConfiguration",
|
||||
id: "wireguard_settings",
|
||||
title: "WireGuard Configuration Settings"
|
||||
}
|
||||
]
|
||||
@@ -59,123 +59,23 @@ export default {
|
||||
|
||||
<template>
|
||||
<div class="mt-md-5 mt-3 text-body mb-3">
|
||||
<div class="container-md d-flex flex-column gap-4">
|
||||
<div>
|
||||
<div class="container-md d-flex flex-column gap-3">
|
||||
<div class="border-bottom pb-3">
|
||||
<ul class="nav nav-pills nav-justified align-items-center gap-2">
|
||||
<li class="nav-item" v-for="t in this.tabs">
|
||||
<a class="nav-link rounded-3"
|
||||
@click="this.activeTab = t.id"
|
||||
:class="{active: this.activeTab === t.id}"
|
||||
<RouterLink
|
||||
:to="{name: t.title}"
|
||||
class="nav-link rounded-3"
|
||||
exact-active-class="active"
|
||||
role="button">
|
||||
<h6 class="my-2">
|
||||
<LocaleText :t="t.title"></LocaleText>
|
||||
</h6>
|
||||
</a>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div>
|
||||
<Transition name="fade2" mode="out-in">
|
||||
<div class="d-flex gap-3 flex-column" v-if="activeTab === 'WireGuardConfiguration'">
|
||||
<DashboardSettingsInputWireguardConfigurationPath
|
||||
targetData="wg_conf_path"
|
||||
title="Configurations Directory"
|
||||
:warning="true"
|
||||
warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard"
|
||||
>
|
||||
</DashboardSettingsInputWireguardConfigurationPath>
|
||||
<DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
|
||||
</div>
|
||||
<div class="d-flex gap-3 flex-column" v-else-if="activeTab === 'Peers'">
|
||||
<div class="card rounded-3">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Peer Default Settings"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_global_dns" title="DNS"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_endpoint_allowed_ip" title="Endpoint Allowed IPs"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_mtu" title="MTU"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="peer_keep_alive" title="Persistent Keepalive"></PeersDefaultSettingsInput>
|
||||
<PeersDefaultSettingsInput
|
||||
targetData="remote_endpoint" title="Peer Remote Endpoint"
|
||||
:warning="true" warningText="This will be changed globally, and will be apply to all peer's QR code and configuration file."
|
||||
></PeersDefaultSettingsInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-3 flex-column" v-else-if="activeTab === 'WGDashboard'">
|
||||
<div class="card rounded-3">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Appearance"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-2">
|
||||
<div class="col-sm">
|
||||
<DashboardTheme></DashboardTheme>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<DashboardLanguage></DashboardLanguage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<DashboardIPPortInput></DashboardIPPortInput>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Account Settings"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column gap-3">
|
||||
<div>
|
||||
<AccountSettingsInputUsername targetData="username"
|
||||
title="Username"
|
||||
></AccountSettingsInputUsername>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<AccountSettingsInputPassword
|
||||
targetData="password">
|
||||
</AccountSettingsInputPassword>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="my-2">
|
||||
<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
|
||||
</div>
|
||||
</div>
|
||||
<DashboardAPIKeys></DashboardAPIKeys>
|
||||
<DashboardEmailSettings></DashboardEmailSettings>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user