Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-09-04 02:41:14 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Finished adjusting Peers UI for AWG

Browse Source
This commit is contained in:
Donald Zou
2024-12-03 02:34:45 +08:00
parent 807bb97b6a
commit 434c236210
6 changed files with 300 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/static/app/src/components/configurationComponents/peer.vue
View File

@@ -81,6 +81,14 @@ export default {
<samp>{{Peer.allowed_ip}}</samp>
</small>
</div>
<div v-if="Peer.advanced_security">
<small class="text-muted">
<LocaleText t="Advanced Security"></LocaleText>
</small>
<small class="d-block">
<samp>{{Peer.advanced_security}}</samp>
</small>
</div>
<div class="d-flex align-items-end">
<div class="ms-auto px-2 rounded-3 subMenuBtn"

36
src/static/app/src/components/configurationComponents/peerCreate.vue
View File

@@ -36,7 +36,8 @@ export default {
keepalive: parseInt(this.dashboardStore.Configuration.Peers.peer_keep_alive),
mtu: parseInt(this.dashboardStore.Configuration.Peers.peer_mtu),
preshared_key: "",
preshared_key_bulkAdd: false
preshared_key_bulkAdd: false,
advanced_security: "off",
},
availableIp: undefined,
availableIpSearchString: "",
@@ -85,6 +86,9 @@ export default {
});
}
return status;
},
getProtocol(){
return this.store.Configurations.find(x => x.Name === this.$route.params.id).Protocol;
}
},
watch: {
@@ -152,6 +156,36 @@ export default {
</div>
</div>
</div>
<hr>
<div v-if="this.getProtocol === 'awg'">
<h5>
<LocaleText t="AmneziaWG Peer Setting"></LocaleText>
</h5>
<div >
<label class="form-label d-block"><small class="text-muted">
<LocaleText t="Advanced Security"></LocaleText>
</small></label>
<div class="btn-group" role="group">
<input type="radio" class="btn-check"
v-model="this.data.advanced_security"
value="on"
name="advanced_security_radio" id="advanced_security_on" autocomplete="off">
<label class="btn btn-outline-primary btn-sm" for="advanced_security_on">
<LocaleText t="On"></LocaleText>
</label>
<input type="radio"
v-model="this.data.advanced_security"
value="off"
class="btn-check" name="advanced_security_radio" id="advanced_security_off" autocomplete="off">
<label class="btn btn-outline-primary btn-sm" for="advanced_security_off">
<LocaleText t="Off"></LocaleText>
</label>
</div>
</div>
</div>
<hr>
<div class="d-flex mt-2">
<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
:disabled="!this.allRequireFieldsFilled || this.saving"

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

@@ -425,9 +425,16 @@ export default {
<div v-if="!this.loading" class="container-md">
<div class="d-flex align-items-sm-center flex-column flex-sm-row gap-3">
<div>
<small CLASS="text-muted">
<LocaleText t="CONFIGURATION"></LocaleText>
</small>
<div class="text-muted d-flex align-items-center gap-2">
<h5 class="mb-0">
<span class="badge wireguardBg rounded-3 shadow" v-if="this.configurationInfo.Protocol === 'wg'">
WireGuard <LocaleText t="Configuration"></LocaleText>
</span>
<span class="badge amneziawgBg rounded-3 shadow" v-else>
AmneziaWG <LocaleText t="Configuration"></LocaleText>
</span>
</h5>
</div>
<div class="d-flex align-items-center gap-3">
<h1 class="mb-0 display-4"><samp>{{this.configurationInfo.Name}}</samp></h1>
</div>
@@ -496,6 +503,7 @@ export default {
</div>
</div>
</div>
<div style="word-break: break-all" class="col-12 col-lg-6">
<div class="card rounded-3 bg-transparent h-100">
<div class="card-body py-2 d-flex flex-column justify-content-center">

26
src/static/app/src/components/configurationComponents/peerSettings.vue
View File

@@ -61,7 +61,7 @@ export default {
},
mounted() {
this.$el.querySelectorAll("input").forEach(x => {
x.addEventListener("keyup", () => {
x.addEventListener("change", () => {
this.dataChanged = true;
});
})
@@ -198,6 +198,30 @@ export default {
v-model="this.data.keepalive"
id="peer_keep_alive">
</div>
<div v-if="this.data.advanced_security">
<label for="peer_advance_security" class="form-label d-block">
<small class="text-muted">
<LocaleText t="Advanced Security"></LocaleText>
</small>
</label>
<div class="btn-group" role="group">
<input type="radio" class="btn-check"
v-model="this.data.advanced_security"
value="on"
name="advanced_security_radio" id="advanced_security_on" autocomplete="off">
<label class="btn btn-outline-primary btn-sm" for="advanced_security_on">
<LocaleText t="On"></LocaleText>
</label>
<input type="radio"
v-model="this.data.advanced_security"
value="off"
class="btn-check" name="advanced_security_radio" id="advanced_security_off" autocomplete="off">
<label class="btn btn-outline-primary btn-sm" for="advanced_security_off">
<LocaleText t="Off"></LocaleText>
</label>
</div>
</div>
</div>
</div>
</div>

35
src/static/app/src/views/newConfiguration.vue
View File

@@ -24,7 +24,8 @@ export default {
PreUp: "",
PreDown: "",
PostUp: "",
PostDown: ""
PostDown: "",
Protocol: "wg"
},
numberOfAvailableIPs: "0",
error: false,
@@ -143,6 +144,34 @@ export default {
<form class="text-body d-flex flex-column gap-3"
@submit="(e) => {e.preventDefault(); this.saveNewConfiguration();}"
>
<div class="card rounded-3 shadow">
<div class="card-header">
<LocaleText t="Protocol"></LocaleText>
</div>
<div class="card-body d-flex gap-2 protocolBtnGroup">
<a
@click="this.newConfiguration.Protocol = 'wg'"
:class="{'opacity-50': this.newConfiguration.Protocol !== 'wg'}"
class="btn btn-primary wireguardBg border-0 " style="flex-basis: 100%">
<i class="bi bi-check-circle-fill me-2" v-if="this.newConfiguration.Protocol === 'wg'"></i>
<i class="bi bi-circle me-2" v-else></i>
<strong>
WireGuard
</strong>
</a>
<a
@click="this.newConfiguration.Protocol = 'awg'"
:class="{'opacity-50': this.newConfiguration.Protocol !== 'awg'}"
class="btn btn-primary amneziawgBg border-0" style="flex-basis: 100%">
<i class="bi bi-check-circle-fill me-2" v-if="this.newConfiguration.Protocol === 'awg'"></i>
<i class="bi bi-circle me-2" v-else></i>
<strong>
AmneziaWG
</strong>
</a>
</div>
</div>
<div class="card rounded-3 shadow">
<div class="card-header">
<LocaleText t="Configuration Name"></LocaleText>
@@ -303,5 +332,7 @@ export default {
</template>
<style scoped>
.protocolBtnGroup a{
transition: all 0.2s ease-in-out;
}
</style>