mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-12-26 17:04:14 +08:00
Autostart feature is done
This commit is contained in:
Donald Zou
parent
01c0175e8f
commit
9b981fcea8
8 changed files with 263 additions and 167 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -63,52 +63,50 @@ 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">
|
||||
<LocaleText t="API Keys"></LocaleText>
|
||||
</h5>
|
||||
<div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()" >
|
||||
<input class="form-check-input" type="checkbox"
|
||||
v-model="this.value"
|
||||
@change="this.toggleDashboardAPIKeys()"
|
||||
role="switch" id="allowAPIKeysSwitch">
|
||||
<label class="form-check-label" for="allowAPIKeysSwitch">
|
||||
<LocaleText t="Enabled" v-if="this.value"></LocaleText>
|
||||
<LocaleText t="Disabled" v-else></LocaleText>
|
||||
</label>
|
||||
</div>
|
||||
<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>
|
||||
</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"
|
||||
@change="this.toggleDashboardAPIKeys()"
|
||||
role="switch" id="allowAPIKeysSwitch">
|
||||
<label class="form-check-label" for="allowAPIKeysSwitch">
|
||||
<LocaleText t="Enabled" v-if="this.value"></LocaleText>
|
||||
<LocaleText t="Disabled" v-else></LocaleText>
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="this.value" class="d-flex flex-column gap-2">
|
||||
<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()"
|
||||
>
|
||||
<i class="bi bi-plus-circle-fill me-2"></i>
|
||||
<LocaleText t="API Key"></LocaleText>
|
||||
</button>
|
||||
<div class="card" style="height: 300px" v-if="this.apiKeys.length === 0">
|
||||
<div class="card-body d-flex text-muted">
|
||||
</div>
|
||||
<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()"
|
||||
>
|
||||
<i class="bi bi-plus-circle-fill me-2"></i>
|
||||
<LocaleText t="API Key"></LocaleText>
|
||||
</button>
|
||||
<div class="card" style="height: 300px" v-if="this.apiKeys.length === 0">
|
||||
<div class="card-body d-flex text-muted">
|
||||
<span class="m-auto">
|
||||
<LocaleText t="No WGDashboard API Key"></LocaleText>
|
||||
</span>
|
||||
</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 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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -66,39 +66,48 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<label :for="this.uuid" class="text-muted mb-1">
|
||||
<strong><small>
|
||||
<LocaleText :t="this.title"></LocaleText>
|
||||
</small></strong>
|
||||
</label>
|
||||
<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="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>
|
||||
<LocaleText :t="this.title"></LocaleText>
|
||||
</small></strong>
|
||||
</label>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<small><i class="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<LocaleText :t="warningText"></LocaleText>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
</button>
|
||||
<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>
|
||||
|
|
@ -35,6 +35,11 @@ export default {
|
|||
const dashboardConfigurationStore = DashboardConfigurationStore()
|
||||
return {dashboardConfigurationStore}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
activeTab: "WireGuardConfiguration"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -42,94 +47,139 @@ 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">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
<LocaleText t="WGDashboard Settings"></LocaleText>
|
||||
</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 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="col-sm">
|
||||
<DashboardLanguage></DashboardLanguage>
|
||||
<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>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<DashboardIPPortInput></DashboardIPPortInput>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<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 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>
|
||||
<h6>
|
||||
<LocaleText t="Update Password"></LocaleText>
|
||||
</h6>
|
||||
<AccountSettingsInputPassword
|
||||
targetData="password">
|
||||
</AccountSettingsInputPassword>
|
||||
<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>
|
||||
|
||||
<AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<DashboardAPIKeys></DashboardAPIKeys>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue