Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-10-26 20:36:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added some update :)

Browse Source
This commit is contained in:
Donald Zou
2024-09-23 03:07:48 +08:00
parent b664fccce2
commit 4cae910b68
4 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,9 +3,11 @@ import {parse} from "cidr-tools";
import '@/utilities/wireguard.js'
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
import {fetchPost} from "@/utilities/fetch.js";
import LocaleText from "@/components/text/localeText.vue";
export default {
name: "newConfiguration",
components: {LocaleText},
setup(){
const store = WireguardConfigurationsStore()
return {store}
@@ -48,9 +50,7 @@ export default {
if (res.status){
this.success = true
await this.store.getConfigurations()
setTimeout(() => {
this.$router.push('/')
}, 1000)
this.$router.push(`/configuration/${this.newConfiguration.ConfigurationName}/peers`)
}else{
this.error = true;
this.errorMessage = res.message;
@@ -131,7 +131,8 @@ export default {
<div class="mb-4 d-flex align-items-center gap-4">
<RouterLink to="/" class="text-decoration-none">
<h3 class="mb-0 text-body">
<i class="bi bi-chevron-left me-4"></i> New Configuration
<i class="bi bi-chevron-left me-4"></i>
<LocaleText t="New Configuration"></LocaleText>
</h3>
</RouterLink>
</div>
@@ -140,7 +141,9 @@ export default {
@submit="(e) => {e.preventDefault(); this.saveNewConfiguration();}"
>
<div class="card rounded-3 shadow">
<div class="card-header">Configuration Name</div>
<div class="card-header">
<LocaleText t="Configuration Name"></LocaleText>
</div>
<div class="card-body">
<input type="text" class="form-control" placeholder="ex. wg1" id="ConfigurationName"
v-model="this.newConfiguration.ConfigurationName"
@@ -149,10 +152,14 @@ export default {
<div class="invalid-feedback">
<div v-if="this.error">{{this.errorMessage}}</div>
<div v-else>
Configuration name is invalid. Possible reasons:
<LocaleText t="Configuration name is invalid. Possible reasons:"></LocaleText>
<ul class="mb-0">
<li>Configuration name already exist.</li>
<li>Configuration name can only contain 15 lower/uppercase alphabet, numbers, "_"(underscore), "="(equal), "+"(plus), "."(period/dot), "-"(dash/hyphen)</li>
<li>
<LocaleText t="Configuration name already exist."></LocaleText>
</li>
<li>
<LocaleText t="Configuration name can only contain 15 lower/uppercase alphabet, numbers, underscore, equal sign, plus sign, period and hyphen."></LocaleText>
</li>
</ul>
</div>
@@ -160,10 +167,15 @@ export default {
</div>
</div>
<div class="card rounded-3 shadow">
<div class="card-header">Private Key / Public Key / Pre-Shared Key</div>
<div class="card-header">
<LocaleText t="Private Key"></LocaleText> &
<LocaleText t="Public Key"></LocaleText>
</div>
<div class="card-body" style="font-family: var(--bs-font-monospace)">
<div class="mb-2">
<label class="text-muted fw-bold mb-1"><small>PRIVATE KEY</small></label>
<label class="text-muted fw-bold mb-1"><small>
<LocaleText t="Private Key"></LocaleText>
</small></label>
<div class="input-group">
<input type="text" class="form-control" id="PrivateKey" required
:disabled="this.loading"
@@ -178,7 +190,9 @@ export default {
</div>
</div>
<div>
<label class="text-muted fw-bold mb-1"><small>PUBLIC KEY</small></label>
<label class="text-muted fw-bold mb-1"><small>
<LocaleText t="Public Key"></LocaleText>
</small></label>
<input type="text" class="form-control" id="PublicKey"
v-model="this.newConfiguration.PublicKey" disabled
>
@@ -188,7 +202,9 @@ export default {
</div>
<div class="card rounded-3 shadow">
<div class="card-header">Listen Port</div>
<div class="card-header">
<LocaleText t="Listen Port"></LocaleText>
</div>
<div class="card-body">
<input type="number" class="form-control" placeholder="0-65353" id="ListenPort"
min="1"
@@ -199,14 +215,14 @@ export default {
<div class="invalid-feedback">
<div v-if="this.error">{{this.errorMessage}}</div>
<div v-else>
Invalid port
<LocaleText t="Invalid port"></LocaleText>
</div>
</div>
</div>
</div>
<div class="card rounded-3 shadow">
<div class="card-header d-flex align-items-center">
IP Address & Range
<LocaleText t="IP Address/CIDR"></LocaleText>
<span class="badge rounded-pill text-bg-success ms-auto">{{ numberOfAvailableIPs }} Available IPs</span>
</div>
<div class="card-body">
@@ -218,7 +234,7 @@ export default {
<div class="invalid-feedback">
<div v-if="this.error">{{this.errorMessage}}</div>
<div v-else>
IP address & range is invalid.
IP Address/CIDR is invalid
</div>
</div>
@@ -229,7 +245,7 @@ export default {
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#newConfigurationOptionalAccordionCollapse">
Optional Settings
<LocaleText t="Optional Settings"></LocaleText>
</button>
</h2>
<div id="newConfigurationOptionalAccordionCollapse"
@@ -263,20 +279,18 @@ export default {
</div>
</div>
</div>
<!-- <RouterLink to="/new_configuration" class="btn btn-success rounded-3 shadow ms-auto rounded-3">-->
<!-- <i class="bi bi-save me-2"></i>-->
<!-- Save-->
<!-- </RouterLink>-->
<button class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto"
:disabled="!this.goodToSubmit">
:disabled="!this.goodToSubmit || this.loading || this.success">
<span v-if="this.success" class="d-flex w-100">
Success! <i class="bi bi-check-circle-fill ms-2"></i>
<LocaleText t="Success"></LocaleText>!
<i class="bi bi-check-circle-fill ms-2"></i>
</span>
<span v-else-if="!this.loading" class="d-flex w-100">
Save Configuration <i class="bi bi-save-fill ms-2"></i>
<LocaleText t="Save Configuration"></LocaleText>
<i class="bi bi-save-fill ms-2"></i>
</span>
<span v-else class="d-flex w-100 align-items-center">
Saving...
<LocaleText t="Saving..."></LocaleText>
<span class="ms-2 spinner-border spinner-border-sm" role="status">
<!-- <span class="visually-hidden">Loading...</span>-->
</span>