mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-22 07:10:09 +01:00
Autostart feature is done
This commit is contained in:
Donald Zou
parent
01c0175e8f
commit
9b981fcea8
@ -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,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>
|
||||
|
||||
@ -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,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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user