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:
@@ -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",
|
name: "Settings",
|
||||||
path: 'settings',
|
path: 'settings',
|
||||||
component: () => import('@/views/settings.vue'),
|
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: {
|
meta: {
|
||||||
title: "Settings"
|
title: "Settings"
|
||||||
}
|
}
|
||||||
|
@@ -30,7 +30,6 @@ const deleteSuccess = async () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="text-body w-100 h-100 pb-2 position-relative">
|
<div class="text-body w-100 h-100 pb-2 position-relative">
|
||||||
|
|
||||||
<div class="w-100 h-100 card rounded-3">
|
<div class="w-100 h-100 card rounded-3">
|
||||||
<Transition name="zoom">
|
<Transition name="zoom">
|
||||||
<ClientSettings v-if="settings" @close="settings = false"></ClientSettings>
|
<ClientSettings v-if="settings" @close="settings = false"></ClientSettings>
|
||||||
|
@@ -40,15 +40,15 @@ export default {
|
|||||||
activeTab: "WGDashboard",
|
activeTab: "WGDashboard",
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
id: "WGDashboard",
|
id: "",
|
||||||
title: "WGDashboard Settings"
|
title: "WGDashboard Settings"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "Peers",
|
id: "peers_settings",
|
||||||
title: "Peers Settings"
|
title: "Peers Settings"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "WireGuardConfiguration",
|
id: "wireguard_settings",
|
||||||
title: "WireGuard Configuration Settings"
|
title: "WireGuard Configuration Settings"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -59,123 +59,23 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="mt-md-5 mt-3 text-body mb-3">
|
<div class="mt-md-5 mt-3 text-body mb-3">
|
||||||
<div class="container-md d-flex flex-column gap-4">
|
<div class="container-md d-flex flex-column gap-3">
|
||||||
<div>
|
<div class="border-bottom pb-3">
|
||||||
<ul class="nav nav-pills nav-justified align-items-center gap-2">
|
<ul class="nav nav-pills nav-justified align-items-center gap-2">
|
||||||
<li class="nav-item" v-for="t in this.tabs">
|
<li class="nav-item" v-for="t in this.tabs">
|
||||||
<a class="nav-link rounded-3"
|
<RouterLink
|
||||||
@click="this.activeTab = t.id"
|
:to="{name: t.title}"
|
||||||
:class="{active: this.activeTab === t.id}"
|
class="nav-link rounded-3"
|
||||||
|
exact-active-class="active"
|
||||||
role="button">
|
role="button">
|
||||||
<h6 class="my-2">
|
<h6 class="my-2">
|
||||||
<LocaleText :t="t.title"></LocaleText>
|
<LocaleText :t="t.title"></LocaleText>
|
||||||
</h6>
|
</h6>
|
||||||
</a>
|
</RouterLink>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
</div>
|
||||||
|
<RouterView></RouterView>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
Reference in New Issue
Block a user