donaldzou/WGDashboard
1
1
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-12-27 09:22:19 +08:00
Code Issues Projects Releases Packages Wiki Activity

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>
<template>
<div class="mt-md-5 mt-3">
<div class="container-md">
<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>
<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}"
: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>
<div>
<h6>
<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
</h6>
<div class="d-flex align-items-center">
<div class="form-check form-switch">

12
src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue
View file

@ -63,12 +63,11 @@ export default {
</script>
<template>
<div class="card rounded-3">
<div class="card-body position-relative d-flex flex-column gap-2" >
<div class="d-flex align-items-center">
<h5 class="mb-0">
<div class="card rounded-3" >
<div class="card-header d-flex align-items-center" :class="{'border-bottom-0 rounded-3': !this.value}">
<h6 class="my-2">
<LocaleText t="API Keys"></LocaleText>
</h5>
</h6>
<div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()" >
<input class="form-check-input" type="checkbox"
v-model="this.value"
@ -80,7 +79,7 @@ export default {
</label>
</div>
</div>
<div v-if="this.value" class="d-flex flex-column gap-2">
<div class="card-body position-relative d-flex flex-column gap-2" v-if="this.value">
<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
@click="this.newDashboardAPIKey = true"
v-if="!this.store.getActiveCrossServer()"
@ -108,7 +107,6 @@ export default {
@close="this.newDashboardAPIKey = false"
></NewDashboardAPIKey>
</Transition>
</div>
</div>
</div>

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

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

9
src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue
View file

@ -66,6 +66,13 @@ export default {
</script>
<template>
<div class="card">
<div class="card-header">
<h6 class="my-2">
<LocaleText t="Path"></LocaleText>
</h6>
</div>
<div class="card-body">
<div class="form-group">
<label :for="this.uuid" class="text-muted mb-1">
<strong><small>
@ -100,6 +107,8 @@ export default {
</div>
</div>
</div>
</div>
</template>

61
src/static/app/src/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue
View file

@ -1,8 +1,9 @@
<script setup>
import LocaleText from "@/components/text/localeText.vue";
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 {fetchPost} from "@/utilities/fetch.js";
const store = DashboardConfigurationStore()
const wireguardConfigurationStore = WireguardConfigurationsStore()
const data = ref(store.Configuration.WireGuardConfiguration.autostart)
@ -10,21 +11,65 @@ const data = ref(store.Configuration.WireGuardConfiguration.autostart)
const configurations = computed(() => {
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>
<template>
<div class="">
<h5>
<LocaleText t="Autostart"></LocaleText>
</h5>
<div class="d-flex gap-2">
<button class="btn btn-outline-primary" v-for="c in configurations">
<i class="bi-circle me-2"></i> {{c}}
<div class="card rounded-3">
<div class="card-header">
<h6 class="my-2">
<LocaleText t="Toggle When Start Up"></LocaleText>
</h6>
</div>
<div class="card-body d-flex gap-2">
<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>
</template>
<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>

104
src/static/app/src/views/settings.vue
View file

@ -35,6 +35,11 @@ export default {
const dashboardConfigurationStore = DashboardConfigurationStore()
return {dashboardConfigurationStore}
},
data(){
return{
activeTab: "WireGuardConfiguration"
}
}
}
</script>
@ -42,12 +47,43 @@ export default {
<div class="mt-md-5 mt-3 text-body mb-3">
<div class="container-md d-flex flex-column gap-4">
<div>
<h2>
<LocaleText t="WireGuard Configuration Settings"></LocaleText>
</h2>
<ul class="nav nav-pills nav-justified align-items-center gap-2">
<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>
<div class="card rounded-3 mb-3">
<div class="card-body">
<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"
@ -55,18 +91,16 @@ export default {
warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard"
>
</DashboardSettingsInputWireguardConfigurationPath>
</div>
</div>
<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>
<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>
</h5>
</h6>
</div>
<div class="card-body">
<div>
<PeersDefaultSettingsInput
targetData="peer_global_dns" title="DNS"></PeersDefaultSettingsInput>
@ -84,13 +118,13 @@ export default {
</div>
</div>
</div>
<div>
<h2>
<LocaleText t="WGDashboard Settings"></LocaleText>
</h2>
<hr>
<div class="d-flex flex-column gap-3">
<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">
@ -103,34 +137,50 @@ export default {
</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>
<h5>
<LocaleText t="Account Settings"></LocaleText>
</h5>
<AccountSettingsInputUsername targetData="username"
title="Username"
></AccountSettingsInputUsername>
</div>
<hr>
<div>
<h6>
<LocaleText t="Update Password"></LocaleText>
</h6>
<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>
</Transition>
</div>
</div>
</div>
</div>