kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
Code

Autostart feature is done

Browse Source
This commit is contained in:
Donald Zou 2024-10-31 22:13:00 +08:00
parent 01c0175e8f
commit 9b981fcea8
8 changed files with 263 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/static/app/src/components/configurationList.vue
View File

@ -31,7 +31,6 @@ export default {
</script> </script>
<template> <template>
<div class="mt-md-5 mt-3"> <div class="mt-md-5 mt-3">
<div class="container-md"> <div class="container-md">
<div class="d-flex mb-4 configurationListTitle align-items-center gap-3"> <div class="d-flex mb-4 configurationListTitle align-items-center gap-3">

2
src/static/app/src/components/navbar.vue
View File

@ -39,7 +39,7 @@ export default {
</script> </script>
<template> <template>
<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container" <div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container"
:class="{active: this.dashboardConfigurationStore.ShowNavBar}" :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
:data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme" :data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
> >

4
src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
View File

@ -44,9 +44,7 @@ export default {
<template> <template>
<div> <div>
<h6>
<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
</h6>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="form-check form-switch"> <div class="form-check form-switch">

78
src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue
View File

@ -63,52 +63,50 @@ export default {
</script> </script>
<template> <template>
<div class="card rounded-3"> <div class="card rounded-3" >
<div class="card-body position-relative d-flex flex-column gap-2" > <div class="card-header d-flex align-items-center" :class="{'border-bottom-0 rounded-3': !this.value}">
<div class="d-flex align-items-center"> <h6 class="my-2">
<h5 class="mb-0"> <LocaleText t="API Keys"></LocaleText>
<LocaleText t="API Keys"></LocaleText> </h6>
</h5> <div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()" >
<div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()" > <input class="form-check-input" type="checkbox"
<input class="form-check-input" type="checkbox" v-model="this.value"
v-model="this.value" @change="this.toggleDashboardAPIKeys()"
@change="this.toggleDashboardAPIKeys()" role="switch" id="allowAPIKeysSwitch">
role="switch" id="allowAPIKeysSwitch"> <label class="form-check-label" for="allowAPIKeysSwitch">
<label class="form-check-label" for="allowAPIKeysSwitch"> <LocaleText t="Enabled" v-if="this.value"></LocaleText>
<LocaleText t="Enabled" v-if="this.value"></LocaleText> <LocaleText t="Disabled" v-else></LocaleText>
<LocaleText t="Disabled" v-else></LocaleText> </label>
</label>
</div>
</div> </div>
<div v-if="this.value" class="d-flex flex-column gap-2"> </div>
<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm" <div class="card-body position-relative d-flex flex-column gap-2" v-if="this.value">
@click="this.newDashboardAPIKey = true" <button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
v-if="!this.store.getActiveCrossServer()" @click="this.newDashboardAPIKey = true"
> v-if="!this.store.getActiveCrossServer()"
<i class="bi bi-plus-circle-fill me-2"></i> >
<LocaleText t="API Key"></LocaleText> <i class="bi bi-plus-circle-fill me-2"></i>
</button> <LocaleText t="API Key"></LocaleText>
<div class="card" style="height: 300px" v-if="this.apiKeys.length === 0"> </button>
<div class="card-body d-flex text-muted"> <div class="card" style="height: 300px" v-if="this.apiKeys.length === 0">
<div class="card-body d-flex text-muted">
<span class="m-auto"> <span class="m-auto">
<LocaleText t="No WGDashboard API Key"></LocaleText> <LocaleText t="No WGDashboard API Key"></LocaleText>
</span> </span>
</div>
</div> </div>
<div class="d-flex flex-column gap-2 position-relative" v-else style="min-height: 300px">
<TransitionGroup name="apiKey">
<DashboardAPIKey v-for="key in this.apiKeys" :apiKey="key"
:key="key.Key"
@deleted="(nkeys) => this.apiKeys = nkeys"></DashboardAPIKey>
</TransitionGroup>
</div>
<Transition name="zoomReversed">
<NewDashboardAPIKey v-if="this.newDashboardAPIKey"
@created="(data) => this.apiKeys = data"
@close="this.newDashboardAPIKey = false"
></NewDashboardAPIKey>
</Transition>
</div> </div>
<div class="d-flex flex-column gap-2 position-relative" v-else style="min-height: 300px">
<TransitionGroup name="apiKey">
<DashboardAPIKey v-for="key in this.apiKeys" :apiKey="key"
:key="key.Key"
@deleted="(nkeys) => this.apiKeys = nkeys"></DashboardAPIKey>
</TransitionGroup>
</div>
<Transition name="zoomReversed">
<NewDashboardAPIKey v-if="this.newDashboardAPIKey"
@created="(data) => this.apiKeys = data"
@close="this.newDashboardAPIKey = false"
></NewDashboardAPIKey>
</Transition>
</div> </div>
</div> </div>

3
src/static/app/src/components/settingsComponent/dashboardIPPortInput.vue
View File

@ -59,9 +59,6 @@ export default {
<template> <template>
<div> <div>
<h5>
<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
</h5>
<div class="row g-2"> <div class="row g-2">
<div class="col-sm"> <div class="col-sm">
<div class="form-group"> <div class="form-group">

69
src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue
View File

@ -66,39 +66,48 @@ export default {
</script> </script>
<template> <template>
<div class="form-group"> <div class="card">
<label :for="this.uuid" class="text-muted mb-1"> <div class="card-header">
<strong><small> <h6 class="my-2">
<LocaleText :t="this.title"></LocaleText> <LocaleText t="Path"></LocaleText>
</small></strong> </h6>
</label> </div>
<div class="d-flex gap-2 align-items-start"> <div class="card-body">
<div class="flex-grow-1"> <div class="form-group">
<input type="text" class="form-control rounded-3" <label :for="this.uuid" class="text-muted mb-1">
:class="{'is-invalid': this.showInvalidFeedback, 'is-valid': this.isValid}" <strong><small>
:id="this.uuid" <LocaleText :t="this.title"></LocaleText>
v-model="this.value" </small></strong>
@keydown="this.changed = true" </label>
:disabled="this.updating" <div class="d-flex gap-2 align-items-start">
<div class="flex-grow-1">
<input type="text" class="form-control rounded-3"
:class="{'is-invalid': this.showInvalidFeedback, 'is-valid': this.isValid}"
:id="this.uuid"
v-model="this.value"
@keydown="this.changed = true"
:disabled="this.updating"
>
<div class="invalid-feedback fw-bold">{{this.invalidFeedback}}</div>
</div>
<button
@click="this.useValidation()"
:disabled="!this.changed"
class="ms-auto btn rounded-3 border-success-subtle bg-success-subtle text-success-emphasis">
<i class="bi bi-save2-fill" v-if="!this.updating"></i>
<span class="spinner-border spinner-border-sm" v-else></span>
</button>
</div>
<div class="px-2 py-1 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 d-inline-block mt-1 mb-2"
v-if="warning"
> >
<div class="invalid-feedback fw-bold">{{this.invalidFeedback}}</div> <small><i class="bi bi-exclamation-triangle-fill me-2"></i>
<LocaleText :t="warningText"></LocaleText>
</small>
</div>
</div> </div>
<button
@click="this.useValidation()"
:disabled="!this.changed"
class="ms-auto btn rounded-3 border-success-subtle bg-success-subtle text-success-emphasis">
<i class="bi bi-save2-fill" v-if="!this.updating"></i>
<span class="spinner-border spinner-border-sm" v-else></span>
</button>
</div> </div>
<div class="px-2 py-1 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 d-inline-block mt-1 mb-2"
v-if="warning"
>
<small><i class="bi bi-exclamation-triangle-fill me-2"></i>
<LocaleText :t="warningText"></LocaleText>
</small>
</div>
</div> </div>
</template> </template>

65
src/static/app/src/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue
View File

@ -1,8 +1,9 @@
<script setup> <script setup>
import LocaleText from "@/components/text/localeText.vue"; import LocaleText from "@/components/text/localeText.vue";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js"; import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import {computed, ref} from "vue"; import {computed, reactive, ref, watch} from "vue";
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js"; import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
import {fetchPost} from "@/utilities/fetch.js";
const store = DashboardConfigurationStore() const store = DashboardConfigurationStore()
const wireguardConfigurationStore = WireguardConfigurationsStore() const wireguardConfigurationStore = WireguardConfigurationsStore()
const data = ref(store.Configuration.WireGuardConfiguration.autostart) const data = ref(store.Configuration.WireGuardConfiguration.autostart)
@ -10,21 +11,65 @@ const data = ref(store.Configuration.WireGuardConfiguration.autostart)
const configurations = computed(() => { const configurations = computed(() => {
return wireguardConfigurationStore.Configurations.map(x => x.Name) return wireguardConfigurationStore.Configurations.map(x => x.Name)
}) })
const updateAutostart = async () => {
console.log(data.value)
await fetchPost("/api/updateDashboardConfigurationItem", {
section: "WireGuardConfiguration",
key: "autostart",
value: data.value
}, async (res) => {
console.log(res);
})
}
const toggle = (c) => {
if (data.value.includes(c)){
data.value = data.value.filter(x => x !== c)
}else{
data.value.push(c)
}
}
watch(data.value, () => {
updateAutostart()
})
</script> </script>
<template> <template>
<div class=""> <div class="card rounded-3">
<h5> <div class="card-header">
<LocaleText t="Autostart"></LocaleText> <h6 class="my-2">
</h5> <LocaleText t="Toggle When Start Up"></LocaleText>
<div class="d-flex gap-2"> </h6>
<button class="btn btn-outline-primary" v-for="c in configurations"> </div>
<i class="bi-circle me-2"></i> {{c}} <div class="card-body d-flex gap-2">
</button> <div class="list-group w-100">
<button type="button"
:key="c"
@click="toggle(c)"
class="list-group-item list-group-item-action py-2 w-100 d-flex align-items-center"
v-for="c in configurations">
<samp>{{c}}</samp>
<i class="ms-auto" :class="[data.includes(c) ? 'bi-check-circle-fill':'bi-circle']"></i>
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.list-group{
&:first-child{
border-top-left-radius: var(--bs-border-radius-lg);
border-top-right-radius: var(--bs-border-radius-lg)
}
&:last-child{
border-bottom-left-radius: var(--bs-border-radius-lg);
border-bottom-right-radius: var(--bs-border-radius-lg)
}
}
</style> </style>

208
src/static/app/src/views/settings.vue
View File

@ -35,6 +35,11 @@ export default {
const dashboardConfigurationStore = DashboardConfigurationStore() const dashboardConfigurationStore = DashboardConfigurationStore()
return {dashboardConfigurationStore} return {dashboardConfigurationStore}
}, },
data(){
return{
activeTab: "WireGuardConfiguration"
}
}
} }
</script> </script>
@ -42,94 +47,139 @@ export default {
<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-4">
<div> <div>
<h2>
<LocaleText t="WireGuard Configuration Settings"></LocaleText> <ul class="nav nav-pills nav-justified align-items-center gap-2">
</h2> <li class="nav-item">
<a class="nav-link rounded-3"
@click="this.activeTab = 'WGDashboard'"
:class="{active: this.activeTab === 'WGDashboard'}"
role="button">
<h6 class="my-2">
WGDashboard Settings
</h6>
</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-3"
@click="this.activeTab = 'Peers'"
:class="{active: this.activeTab === 'Peers'}"
role="button">
<h6 class="my-2">
Peers Settings
</h6>
</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-3"
@click="this.activeTab = 'WireGuardConfiguration'"
:class="{active: this.activeTab === 'WireGuardConfiguration'}"
role="button">
<h6 class="my-2">
WireGuard Configuration Settings
</h6>
</a>
</li>
</ul>
<hr> <hr>
<div class="card rounded-3 mb-3"> <div>
<div class="card-body"> <Transition name="fade2" mode="out-in">
<DashboardSettingsInputWireguardConfigurationPath <div class="d-flex gap-3 flex-column" v-if="activeTab === 'WireGuardConfiguration'">
targetData="wg_conf_path" <DashboardSettingsInputWireguardConfigurationPath
title="Configurations Directory" targetData="wg_conf_path"
:warning="true" title="Configurations Directory"
warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard" :warning="true"
> warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard"
</DashboardSettingsInputWireguardConfigurationPath> >
</div> </DashboardSettingsInputWireguardConfigurationPath>
</div> <DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
<div class="card rounded-3 mb-3">
<div class="card-body">
<DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
</div>
</div>
<div class="card rounded-3 mb-3">
<div class="card-body">
<h5>
<LocaleText t="Peer Default Settings"></LocaleText>
</h5>
<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 class="d-flex gap-3 flex-column" v-else-if="activeTab === 'Peers'">
</div> <div class="card rounded-3">
</div> <div class="card-header">
<div> <h6 class="my-2">
<h2> <LocaleText t="Peer Default Settings"></LocaleText>
<LocaleText t="WGDashboard Settings"></LocaleText> </h6>
</h2>
<hr>
<div class="d-flex flex-column gap-3">
<div class="card rounded-3">
<div class="card-body">
<div class="row g-2">
<div class="col-sm">
<DashboardTheme></DashboardTheme>
</div> </div>
<div class="col-sm"> <div class="card-body">
<DashboardLanguage></DashboardLanguage> <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>
</div> </div>
</div> <div class="d-flex gap-3 flex-column" v-else-if="activeTab === 'WGDashboard'">
<div class="card"> <div class="card rounded-3">
<div class="card-body"> <div class="card-header">
<DashboardIPPortInput></DashboardIPPortInput> <h6 class="my-2">
</div> <LocaleText t="Appearance"></LocaleText>
</div> </h6>
<div class="card"> </div>
<div class="card-body d-flex flex-column gap-3"> <div class="card-body">
<div> <div class="row g-2">
<h5> <div class="col-sm">
<LocaleText t="Account Settings"></LocaleText> <DashboardTheme></DashboardTheme>
</h5> </div>
<AccountSettingsInputUsername targetData="username" <div class="col-sm">
title="Username" <DashboardLanguage></DashboardLanguage>
></AccountSettingsInputUsername> </div>
</div>
</div>
</div> </div>
<div> <div class="card">
<h6> <div class="card-header">
<LocaleText t="Update Password"></LocaleText> <h6 class="my-2">
</h6> <LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
<AccountSettingsInputPassword </h6>
targetData="password"> </div>
</AccountSettingsInputPassword> <div class="card-body">
<DashboardIPPortInput></DashboardIPPortInput>
</div>
</div> </div>
<div class="card">
<AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA> <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>
</div> </div>
</div> </Transition>
<DashboardAPIKeys></DashboardAPIKeys>
</div> </div>
</div> </div>
</div> </div>