Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-08-28 07:51:13 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Configuration Settings done

Browse Source
This commit is contained in:
Donald Zou
2024-10-04 16:58:47 +08:00
parent 5f46f54dfd
commit 4a2f3e0372
12 changed files with 2191 additions and 1450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/static/app/dist/assets/index.css vendored
View File

File diff suppressed because one or more lines are too long

98
src/static/app/dist/assets/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/static/app/dist/index.html vendored
View File

@@ -9,6 +9,6 @@
<link rel="stylesheet" crossorigin href="/static/app/dist/assets/index.css">
</head>
<body>
<div id="app" class="w-100 vh-100"></div>
<div id="app"></div>
</body>
</html>

3192
src/static/app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
src/static/app/src/App.vue
View File

@@ -38,7 +38,7 @@ const getActiveCrossServer = computed(() => {
</nav>
<Suspense>
<RouterView v-slot="{ Component }">
<Transition name="app" mode="out-in">
<Transition name="app" mode="out-in" type="transition">
<Component :is="Component"></Component>
</Transition>
</RouterView>

6
src/static/app/src/components/configurationComponents/newPeersComponents/privatePublicKeyInput.vue
View File

@@ -2,6 +2,7 @@
import "@/utilities/wireguard.js"
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import LocaleText from "@/components/text/localeText.vue";
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
export default {
name: "privatePublicKeyInput",
components: {LocaleText},
@@ -12,7 +13,8 @@ export default {
},
setup(){
const dashboardStore = DashboardConfigurationStore();
return {dashboardStore}
const wgStore = WireguardConfigurationsStore()
return {dashboardStore, wgStore}
},
data(){
return {
@@ -39,7 +41,7 @@ export default {
checkMatching(){
try{
if(this.keypair.privateKey){
if(this.testKey(this.keypair.privateKey)){
if(this.wgStore.checkWGKeyLength(this.keypair.privateKey)){
this.keypair.publicKey = window.wireguard.generatePublicKey(this.keypair.privateKey)
if (window.wireguard.generatePublicKey(this.keypair.privateKey)
!== this.keypair.publicKey){

13
src/static/app/src/components/configurationComponents/peerList.vue
View File

@@ -42,6 +42,7 @@ import PeerJobsLogsModal from "@/components/configurationComponents/peerJobsLogs
import {ref} from "vue";
import PeerShareLinkModal from "@/components/configurationComponents/peerShareLinkModal.vue";
import LocaleText from "@/components/text/localeText.vue";
import EditConfiguration from "@/components/configurationComponents/peerScheduleJobsComponents/editConfiguration.vue";
Chart.register(
ArcElement,
@@ -72,6 +73,7 @@ Chart.register(
export default {
name: "peerList",
components: {
EditConfiguration,
LocaleText,
PeerShareLinkModal,
PeerJobsLogsModal,
@@ -139,6 +141,9 @@ export default {
peerShare:{
modalOpen: false,
selectedPeer: undefined
},
editConfiguration: {
modalOpen: false
}
}
},
@@ -584,6 +589,7 @@ export default {
<PeerSearch
@jobsAll="this.peerScheduleJobsAll.modalOpen = true"
@jobLogs="this.peerScheduleJobsLogs.modalOpen = true"
@editConfiguration="this.editConfiguration.modalOpen = true"
:configuration="this.configurationInfo"></PeerSearch>
<TransitionGroup name="list" tag="div" class="row gx-2 gy-2 z-0">
<div class="col-12 col-lg-6 col-xl-4"
@@ -643,6 +649,13 @@ export default {
@close="this.peerShare.modalOpen = false; this.peerShare.selectedPeer = undefined;"
:peer="this.configurationPeers.find(x => x.id === this.peerShare.selectedPeer)"></PeerShareLinkModal>
</Transition>
<Transition name="zoom">
<EditConfiguration
@close="this.editConfiguration.modalOpen = false"
@dataChanged="(d) => this.configurationInfo = d"
:configurationInfo="this.configurationInfo"
v-if="this.editConfiguration.modalOpen"></EditConfiguration>
</Transition>
</div>
</template>

197
src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/editConfiguration.vue Normal file
View File

@@ -0,0 +1,197 @@
<script setup>
import LocaleText from "@/components/text/localeText.vue";
import {onMounted, reactive, ref, useTemplateRef, watch} from "vue";
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
import {fetchPost} from "@/utilities/fetch.js";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import router from "@/router/index.js";
const props = defineProps({
configurationInfo: Object
})
const wgStore = WireguardConfigurationsStore()
const store = DashboardConfigurationStore()
const saving = ref(false)
const data = reactive(JSON.parse(JSON.stringify(props.configurationInfo)))
const editPrivateKey = ref(false)
const dataChanged = ref(false)
const confirmChanges = ref(false)
const reqField = reactive({
PrivateKey: true,
IPAddress: true,
ListenPort: true
})
const editConfigurationContainer = useTemplateRef("editConfigurationContainer")
const genKey = () => {
if (wgStore.checkWGKeyLength(data.PrivateKey)){
reqField.PrivateKey = true;
data.PublicKey = window.wireguard.generatePublicKey(data.PrivateKey)
}else{
reqField.PrivateKey = false;
}
}
const resetForm = () => {
dataChanged.value = false;
Object.assign(data, JSON.parse(JSON.stringify(props.configurationInfo)))
}
const emit = defineEmits(["changed"])
const saveForm = () => {
saving.value = true
fetchPost("/api/updateWireguardConfiguration", data, (res) => {
saving.value = false
if (res.status){
store.newMessage("Server", "Configuration saved", "success")
dataChanged.value = false
emit("dataChanged", res.data)
}else{
store.newMessage("Server", res.message, "danger")
}
})
}
watch(data, () => {
dataChanged.value = JSON.stringify(data) !== JSON.stringify(props.configurationInfo);
}, {
deep: true
})
</script>
<template>
<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll" ref="editConfigurationContainer">
<div class="container d-flex h-100 w-100">
<div class="m-auto modal-dialog-centered dashboardModal" style="width: 700px">
<div class="card rounded-3 shadow flex-grow-1">
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
<h4 class="mb-0">
<LocaleText t="Configuration Settings"></LocaleText>
</h4>
<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
</div>
<div class="card-body px-4 pb-4">
<div class="d-flex gap-2 flex-column">
<div class="d-flex align-items-center">
<small class="text-muted">
<LocaleText t="Name"></LocaleText>
</small>
<small class="ms-auto"><samp>{{data.Name}}</samp></small>
</div>
<div class="d-flex align-items-center">
<small class="text-muted">
<LocaleText t="Public Key"></LocaleText>
</small>
<small class="ms-auto"><samp>{{data.PublicKey}}</samp></small>
</div>
<hr>
<div>
<label for="configuration_private_key" class="form-label d-flex">
<small class="text-muted d-block">
<LocaleText t="Private Key"></LocaleText>
</small>
<div class="form-check form-switch ms-auto">
<input class="form-check-input"
type="checkbox" role="switch" id="editPrivateKeySwitch"
v-model="editPrivateKey"
>
<label class="form-check-label" for="editPrivateKeySwitch">
<small>Edit</small>
</label>
</div>
</label>
<input type="text" class="form-control form-control-sm rounded-3"
:disabled="saving || !editPrivateKey"
:class="{'is-invalid': !reqField.PrivateKey}"
@keyup="genKey()"
v-model="data.PrivateKey"
id="configuration_private_key">
</div>
<div>
<label for="configuration_ipaddress_cidr" class="form-label">
<small class="text-muted">
<LocaleText t="IP Address/CIDR"></LocaleText>
</small>
</label>
<input type="text" class="form-control form-control-sm rounded-3"
:disabled="saving"
v-model="data.Address"
id="configuration_ipaddress_cidr">
</div>
<div>
<label for="configuration_listen_port" class="form-label">
<small class="text-muted">
<LocaleText t="Listen Port"></LocaleText>
</small>
</label>
<input type="number" class="form-control form-control-sm rounded-3"
:disabled="saving"
v-model="data.ListenPort"
id="configuration_listen_port">
</div>
<div>
<label for="configuration_preup" class="form-label">
<small class="text-muted">
<LocaleText t="PreUp"></LocaleText>
</small>
</label>
<input type="text" class="form-control form-control-sm rounded-3"
:disabled="saving"
v-model="data.PreUp"
id="configuration_preup">
</div>
<div>
<label for="configuration_predown" class="form-label">
<small class="text-muted">
<LocaleText t="PreDown"></LocaleText>
</small>
</label>
<input type="text" class="form-control form-control-sm rounded-3"
:disabled="saving"
v-model="data.PreDown"
id="configuration_predown">
</div>
<div>
<label for="configuration_postup" class="form-label">
<small class="text-muted">
<LocaleText t="PostUp"></LocaleText>
</small>
</label>
<input type="text" class="form-control form-control-sm rounded-3"
:disabled="saving"
v-model="data.PostUp"
id="configuration_postup">
</div>
<div>
<label for="configuration_postdown" class="form-label">
<small class="text-muted">
<LocaleText t="PostDown"></LocaleText>
</small>
</label>
<input type="text" class="form-control form-control-sm rounded-3"
:disabled="saving"
v-model="data.PostDown"
id="configuration_postdown">
</div>
<div class="d-flex align-items-center gap-2 mt-4">
<button class="btn bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3 shadow ms-auto px-3 py-2"
@click="resetForm()"
:disabled="!dataChanged || saving">
<i class="bi bi-arrow-clockwise"></i>
</button>
<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 px-3 py-2 shadow"
:disabled="!dataChanged || saving"
@click="saveForm()"
>
<i class="bi bi-save-fill"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>

7
src/static/app/src/components/configurationComponents/peerSearch.vue
View File

@@ -182,6 +182,13 @@ export default {
</div>
<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
<div>
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex" role="button"
@click="this.$emit('editConfiguration')">
<LocaleText t="Configuration Settings"></LocaleText>
</a>
</div>
<hr>
<p class="text-muted fw-bold mb-2"><small>
<LocaleText t="Peer Jobs"></LocaleText>
</small></p>

6
src/static/app/src/stores/WireguardConfigurationsStore.js
View File

@@ -79,6 +79,10 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
checkCIDR(ip){
return isCidr(ip) !== 0
},
checkWGKeyLength(key){
console.log(key)
const reg = /^[A-Za-z0-9+/]{43}=?=?$/;
return reg.test(key)
}
}
});

41
src/static/css/dashboard.css
View File

@@ -24,12 +24,6 @@
font-weight: bold;
}
[data-bs-theme="dark"]{
hr{
border-color: #efefef;
}
}
#app{
width: 100%;
height: 100vh;
@@ -1071,7 +1065,13 @@ pre.index-alert {
}
.login-container-fluid{
height: calc(100% - 50px) !important;
height: calc(100% - 50px);
}
@media screen and (min-width: 576px) {
.login-container-fluid{
height: 100%;
}
}
.totp{
@@ -1203,4 +1203,31 @@ pre.index-alert {
.slide-leave-to {
opacity: 0;
transform: translateX(50px) !important;
}
@property --bgdegree{
syntax: '<angle>';
initial-value: 234deg;
inherits: false;
}
.login-container-fluid{
background: linear-gradient(var(--bgdegree), #009fff1a var(--distance2), #ff4b001a 100%);
animation: login 8s ease-in-out infinite;
}
.login-container-fluid[data-bs-theme="dark"]{
background: linear-gradient(var(--bgdegree), #003555 var(--distance2), #521800 100%);
animation: login 8s ease-in-out infinite;
}
@keyframes login {
0%{
--bgdegree: 234deg;
}
100%{
--bgdegree: 594deg;
}
}