From a80a2866deb32b302ebcd300b458e426454b8e87 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Fri, 13 Sep 2024 16:32:56 +0800
Subject: [PATCH] Almost done...

---
 .../configurationComponents/peer.vue          | 13 ++--
 .../configurationComponents/peerJobs.vue      | 13 ++--
 .../peerJobsAllModal.vue                      | 10 ++-
 .../peerJobsLogsModal.vue                     | 52 +++++++++++----
 .../configurationComponents/peerQRCode.vue    |  6 +-
 .../schedulePeerJob.vue                       | 31 +++++----
 .../configurationComponents/peerSearch.vue    |  2 +-
 .../configurationComponents/peerSettings.vue  | 64 ++++++++++++++-----
 .../peerSettingsDropdown.vue                  |  9 +--
 .../peerShareLinkModal.vue                    | 18 ++++--
 .../stores/WireguardConfigurationsStore.js    | 39 +++++------
 src/static/locale/zh-CN.json                  | 55 +++++++++++++++-
 12 files changed, 220 insertions(+), 92 deletions(-)

diff --git a/src/static/app/src/components/configurationComponents/peer.vue b/src/static/app/src/components/configurationComponents/peer.vue
index 9d90b8b..ccf88bf 100644
--- a/src/static/app/src/components/configurationComponents/peer.vue
+++ b/src/static/app/src/components/configurationComponents/peer.vue
@@ -3,9 +3,10 @@ import { ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import "animate.css"
 import PeerSettingsDropdown from "@/components/configurationComponents/peerSettingsDropdown.vue";
+import LocaleText from "@/components/text/localeText.vue";
 export default {
 	name: "peer",
-	components: {PeerSettingsDropdown},
+	components: {LocaleText, PeerSettingsDropdown},
 	props: {
 		Peer: Object
 	},
@@ -57,7 +58,7 @@ export default {
 			<div v-else class="border-0 card-header bg-transparent text-warning fw-bold" 
 			     style="font-size: 0.8rem">
 				<i class="bi-lock-fill me-2"></i>
-				Access Restricted
+				<LocaleText t="Access Restricted"></LocaleText>
 			</div>
 		</div>
 		<div class="card-body pt-1" style="font-size: 0.9rem">
@@ -65,12 +66,16 @@ export default {
 				{{Peer.name ? Peer.name : 'Untitled Peer'}}
 			</h6>
 			<div class="mb-2">
-				<small class="text-muted">Public Key</small>
+				<small class="text-muted">
+					<LocaleText t="Public Key"></LocaleText>
+				</small>
 				<p class="mb-0"><samp>{{Peer.id}}</samp></p>
 			</div>
 			<div class="d-flex align-items-end">
 				<div>
-					<small class="text-muted">Allowed IP</small>
+					<small class="text-muted">
+						<LocaleText t="Allowed IPs"></LocaleText>
+					</small>
 					<p class="mb-0"><samp>{{Peer.allowed_ip}}</samp></p>
 				</div>
 				<div class="ms-auto px-2 rounded-3 subMenuBtn"
diff --git a/src/static/app/src/components/configurationComponents/peerJobs.vue b/src/static/app/src/components/configurationComponents/peerJobs.vue
index 55d09b4..8538917 100644
--- a/src/static/app/src/components/configurationComponents/peerJobs.vue
+++ b/src/static/app/src/components/configurationComponents/peerJobs.vue
@@ -3,6 +3,7 @@ import ScheduleDropdown from "@/components/configurationComponents/peerScheduleJ
 import SchedulePeerJob from "@/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {v4} from "uuid";
+import LocaleText from "@/components/text/localeText.vue";
 export default {
 	name: "peerJobs",
 	setup(){
@@ -13,6 +14,7 @@ export default {
 		selectedPeer: Object
 	},
 	components:{
+		LocaleText,
 		SchedulePeerJob,
 		ScheduleDropdown,
 	},
@@ -50,8 +52,8 @@ export default {
 			<div class="m-auto modal-dialog-centered dashboardModal">
 				<div class="card rounded-3 shadow" style="width: 700px">
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
-						<h4 class="mb-0 fw-normal">Schedule Jobs
-							<strong></strong>
+						<h4 class="mb-0 fw-normal">
+							<LocaleText t="Schedule Jobs"></LocaleText>
 						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
@@ -60,7 +62,8 @@ export default {
 							<button class="btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow" 
 							        
 							        @click="this.addJob()">
-								<i class="bi bi-plus-lg me-2"></i> Job
+								<i class="bi bi-plus-lg me-2"></i>
+								<LocaleText t="Job"></LocaleText>
 							</button>
 						</div>
 						<TransitionGroup name="schedulePeerJobTransition" tag="div" class="position-relative">
@@ -76,7 +79,9 @@ export default {
 							     style="height: 153px"
 							     v-if="this.selectedPeer.jobs.length === 0">
 								<div class="card-body text-muted text-center d-flex">
-									<h6 class="m-auto">This peer does not have any job yet.</h6>
+									<h6 class="m-auto">
+										<LocaleText t="This peer does not have any job yet."></LocaleText>
+									</h6>
 								</div>
 							</div>
 						</TransitionGroup>
diff --git a/src/static/app/src/components/configurationComponents/peerJobsAllModal.vue b/src/static/app/src/components/configurationComponents/peerJobsAllModal.vue
index 0ea2d26..6a8847f 100644
--- a/src/static/app/src/components/configurationComponents/peerJobsAllModal.vue
+++ b/src/static/app/src/components/configurationComponents/peerJobsAllModal.vue
@@ -2,6 +2,7 @@
 import SchedulePeerJob from "@/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {v4} from "uuid";
+import LocaleText from "@/components/text/localeText.vue";
 
 export default {
 	name: "peerJobsAllModal",
@@ -9,7 +10,7 @@ export default {
 		const store = WireguardConfigurationsStore();
 		return {store}
 	},
-	components: {SchedulePeerJob},
+	components: {LocaleText, SchedulePeerJob},
 	props: {
 		configurationPeers: Array[Object]
 	},
@@ -32,7 +33,8 @@ export default {
 			<div class="m-auto modal-dialog-centered dashboardModal">
 				<div class="card rounded-3 shadow" style="width: 700px">
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
-						<h4 class="mb-0 fw-normal">All Active Jobs
+						<h4 class="mb-0 fw-normal">
+							<LocaleText t="All Active Jobs"></LocaleText>
 						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
@@ -71,7 +73,9 @@ export default {
 						     style="height: 153px"
 						     v-else>
 							<div class="card-body text-muted text-center d-flex">
-								<h6 class="m-auto">No active job at the moment.</h6>
+								<span class="m-auto">
+									<LocaleText t="No active job at the moment."></LocaleText>
+								</span>
 							</div>
 						</div>
 					</div>
diff --git a/src/static/app/src/components/configurationComponents/peerJobsLogsModal.vue b/src/static/app/src/components/configurationComponents/peerJobsLogsModal.vue
index 81b4981..6c33150 100644
--- a/src/static/app/src/components/configurationComponents/peerJobsLogsModal.vue
+++ b/src/static/app/src/components/configurationComponents/peerJobsLogsModal.vue
@@ -1,8 +1,10 @@
 <script>
 import dayjs from "dayjs";
 import {fetchGet} from "@/utilities/fetch.js";
+import LocaleText from "@/components/text/localeText.vue";
 export default {
 	name: "peerJobsLogsModal",
+	components: {LocaleText},
 	props: {
 		configurationInfo: Object	
 	},
@@ -51,44 +53,56 @@ export default {
 			<div class="m-auto mt-0 modal-dialog-centered dashboardModal" style="width: 100%">
 				<div class="card rounded-3 shadow w-100" >
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
-						<h4 class="mb-0">Jobs Logs</h4>
+						<h4 class="mb-0">
+							<LocaleText t="Jobs Logs"></LocaleText>
+						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
 					<div class="card-body px-4 pb-4 pt-2">
 						<div v-if="!this.dataLoading">
-							<p>Updated at: {{this.logFetchTime}}</p>
+							<p>
+								<LocaleText t="Updated at"></LocaleText>
+								: {{this.logFetchTime}}</p>
 							<div class="mb-2 d-flex gap-3">
 								<button @click="this.fetchLog()"
 								        class="btn btn-sm rounded-3 shadow-sm
 							        text-info-emphasis bg-info-subtle border-1 border-info-subtle me-1">
 									<i class="bi bi-arrow-clockwise me-2"></i>
-									Refresh
+									<LocaleText t="Refresh"></LocaleText>
 								</button>
 								<div class="d-flex gap-3 align-items-center">
-									<span class="text-muted">Filter</span>
+									<span class="text-muted">
+										<LocaleText t="Filter"></LocaleText>
+									</span>
 									<div class="form-check">
 										<input class="form-check-input" type="checkbox" v-model="this.showSuccessJob"
 										       id="jobLogsShowSuccessCheck">
 										<label class="form-check-label" for="jobLogsShowSuccessCheck">
-											<span class="badge text-success-emphasis bg-success-subtle">Success</span>
+											<span class="badge text-success-emphasis bg-success-subtle">
+												<LocaleText t="Success"></LocaleText>
+											</span>
 										</label>
 									</div>
 									<div class="form-check">
 										<input class="form-check-input" type="checkbox" v-model="this.showFailedJob"
 										       id="jobLogsShowFailedCheck">
 										<label class="form-check-label" for="jobLogsShowFailedCheck">
-											<span class="badge text-danger-emphasis bg-danger-subtle">Failed</span>
+											<span class="badge text-danger-emphasis bg-danger-subtle">
+												<LocaleText t="Failed"></LocaleText>
+											</span>
 										</label>
 									</div>
 								</div>
 								<div class="d-flex gap-3 align-items-center ms-auto">
-									<span class="text-muted">Display</span>
+									<span class="text-muted">
+										<LocaleText t="Display"></LocaleText>
+									</span>
 									<div class="form-check">
 										<input class="form-check-input" type="checkbox"
 										       v-model="showJobID"
 										       id="jobLogsShowJobIDCheck">
 										<label class="form-check-label" for="jobLogsShowJobIDCheck">
-											Job ID
+											<LocaleText t="Job ID"></LocaleText>
 										</label>
 									</div>
 									<div class="form-check">
@@ -96,7 +110,7 @@ export default {
 										       v-model="showLogID"
 										       id="jobLogsShowLogIDCheck">
 										<label class="form-check-label" for="jobLogsShowLogIDCheck">
-											Log ID
+											<LocaleText t="Log ID"></LocaleText>
 										</label>
 									</div>
 
@@ -106,11 +120,21 @@ export default {
 							<table class="table">
 								<thead>
 								<tr>
-									<th scope="col">Date</th>
-									<th scope="col" v-if="showLogID">Log ID</th>
-									<th scope="col" v-if="showJobID">Job ID</th>
-									<th scope="col">Status</th>
-									<th scope="col">Message</th>
+									<th scope="col">
+										<LocaleText t="Date"></LocaleText>
+									</th>
+									<th scope="col" v-if="showLogID">
+										<LocaleText t="Log ID"></LocaleText>
+									</th>
+									<th scope="col" v-if="showJobID">
+										<LocaleText t="Job ID"></LocaleText>
+									</th>
+									<th scope="col">
+										<LocaleText t="Status"></LocaleText>
+									</th>
+									<th scope="col">
+										<LocaleText t="Message"></LocaleText>
+									</th>
 								</tr>
 								</thead>
 								<tbody>
diff --git a/src/static/app/src/components/configurationComponents/peerQRCode.vue b/src/static/app/src/components/configurationComponents/peerQRCode.vue
index 83ef79d..77c2949 100644
--- a/src/static/app/src/components/configurationComponents/peerQRCode.vue
+++ b/src/static/app/src/components/configurationComponents/peerQRCode.vue
@@ -1,7 +1,9 @@
 <script>
 import QRCode from "qrcode";
+import LocaleText from "@/components/text/localeText.vue";
 export default {
 	name: "peerQRCode",
+	components: {LocaleText},
 	props: {
 		peerConfigData: String
 	},
@@ -19,7 +21,9 @@ export default {
 			<div class="m-auto modal-dialog-centered dashboardModal justify-content-center">
 				<div class="card rounded-3 shadow">
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
-						<h4 class="mb-0">QR Code</h4>
+						<h4 class="mb-0">
+							<LocaleText t="QR Code"></LocaleText>
+						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
 					<div class="card-body">
diff --git a/src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue b/src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue
index 04165c9..fc3a782 100644
--- a/src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue
+++ b/src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue
@@ -5,10 +5,11 @@ import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.
 import {fetchPost} from "@/utilities/fetch.js";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import dayjs from "dayjs";
+import LocaleText from "@/components/text/localeText.vue";
 
 export default {
 	name: "schedulePeerJob",
-	components: {VueDatePicker, ScheduleDropdown},
+	components: {LocaleText, VueDatePicker, ScheduleDropdown},
 	props: {
 		dropdowns: Array[Object],
 		pjob: Object,
@@ -110,15 +111,19 @@ export default {
 	<div class="card shadow-sm rounded-3 mb-2" :class="{'border-warning-subtle': this.newJob}">
 		<div class="card-header bg-transparent text-muted border-0">
 			<small class="d-flex" v-if="!this.newJob">
-				<strong class="me-auto">Job ID</strong>
+				<strong class="me-auto">
+					<LocaleText t="Job ID"></LocaleText>
+				</strong>
 				<samp>{{this.job.JobID}}</samp>
 			</small>
-			<small v-else><span class="badge text-bg-warning">Unsaved Job</span></small>
+			<small v-else><span class="badge text-bg-warning">
+				<LocaleText t="Unsaved Job"></LocaleText>
+			</span></small>
 		</div>
 		<div class="card-body pt-1" style="font-family: var(--bs-font-monospace)">
 			<div class="d-flex gap-2 align-items-center mb-2">
 				<samp>
-					if
+					<LocaleText t="if"></LocaleText>
 				</samp>
 				<ScheduleDropdown
 					:edit="edit"
@@ -127,7 +132,7 @@ export default {
 					@update="(value) => {this.job.Field = value}"
 				></ScheduleDropdown>
 				<samp>
-					is
+					<LocaleText t="is"></LocaleText>
 				</samp>
 				<ScheduleDropdown
 					:edit="edit"
@@ -149,12 +154,6 @@ export default {
 					:dark="this.store.Configuration.Server.dashboard_theme === 'dark'"
 				/>
 				
-<!--				<input class="form-control form-control-sm form-control-dark rounded-3 flex-grow-1"-->
-<!--				       :disabled="!edit"-->
-<!--				       type="datetime-local"-->
-<!--				       v-if="this.job.Field === 'date'"-->
-<!--				       v-model="this.job.Value"-->
-<!--				       style="width: auto">-->
 				<input class="form-control form-control-sm form-control-dark rounded-3 flex-grow-1" 
 				       :disabled="!edit"
 				       v-else
@@ -165,7 +164,7 @@ export default {
 				</samp>
 			</div>
 			<div class="px-5 d-flex gap-2 align-items-center">
-				<samp>then</samp>
+				<samp><LocaleText t="then"></LocaleText></samp>
 				<ScheduleDropdown
 					:edit="edit"
 					:options="this.dropdowns.Action"
@@ -178,18 +177,18 @@ export default {
 				<div class="ms-auto d-flex gap-3" v-if="!this.edit">
 					<a role="button"
 					   class="ms-auto text-decoration-none"
-					   @click="this.edit = true">[E] Edit</a>
+					   @click="this.edit = true">[E] <LocaleText t="Edit"></LocaleText></a>
 					<a role="button"
 					   @click="this.delete()"
-					   class=" text-danger text-decoration-none">[D] Delete</a>
+					   class=" text-danger text-decoration-none">[D] <LocaleText t="Delete"></LocaleText></a>
 				</div>
 				<div class="ms-auto d-flex gap-3" v-else>
 					<a role="button"
 					   class="text-secondary text-decoration-none"
-					   @click="this.reset()">[C] Cancel</a>
+					   @click="this.reset()">[C] <LocaleText t="Cancel"></LocaleText></a>
 					<a role="button"
 					   class="text-primary ms-auto text-decoration-none"
-					   @click="this.save()">[S] Save</a>
+					   @click="this.save()">[S] <LocaleText t="Save"></LocaleText></a>
 				</div>
 			</div>
 		</div>
diff --git a/src/static/app/src/components/configurationComponents/peerSearch.vue b/src/static/app/src/components/configurationComponents/peerSearch.vue
index f1f30f3..6481684 100644
--- a/src/static/app/src/components/configurationComponents/peerSearch.vue
+++ b/src/static/app/src/components/configurationComponents/peerSearch.vue
@@ -23,7 +23,7 @@ export default {
 			sort: {
 				status: GetLocale("Status"),
 				name: GetLocale("Name"),
-				allowed_ip: GetLocale("Allowed IP"),
+				allowed_ip: GetLocale("Allowed IPs"),
 				restricted: GetLocale("Restricted")
 			},
 			interval: {
diff --git a/src/static/app/src/components/configurationComponents/peerSettings.vue b/src/static/app/src/components/configurationComponents/peerSettings.vue
index a413de7..d5f3ee2 100644
--- a/src/static/app/src/components/configurationComponents/peerSettings.vue
+++ b/src/static/app/src/components/configurationComponents/peerSettings.vue
@@ -1,9 +1,11 @@
 <script>
 import {fetchPost} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import LocaleText from "@/components/text/localeText.vue";
 
 export default {
 	name: "peerSettings",
+	components: {LocaleText},
 	props: {
 		selectedPeer: Object
 	},
@@ -73,18 +75,24 @@ export default {
 			<div class="m-auto modal-dialog-centered dashboardModal">
 				<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 pb-2">
-						<h4 class="mb-0">Peer Settings</h4>
+						<h4 class="mb-0">
+							<LocaleText t="Peer Settings"></LocaleText>
+						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
 					<div class="card-body px-4 pb-4" v-if="this.data">
 						<div class="d-flex flex-column gap-2 mb-4">
 							<div class="d-flex align-items-center">
-								<small class="text-muted">Public Key</small>
+								<small class="text-muted">
+									<LocaleText t="Public Key"></LocaleText>
+								</small>
 								<small class="ms-auto"><samp>{{this.data.id}}</samp></small>
 							</div>
 							<div>
 								<label for="peer_name_textbox" class="form-label">
-									<small class="text-muted">Name</small>
+									<small class="text-muted">
+										<LocaleText t="Name"></LocaleText>
+									</small>
 								</label>
 								<input type="text" class="form-control form-control-sm rounded-3"
 								       :disabled="this.saving"
@@ -94,7 +102,10 @@ export default {
 							<div>
 								<div class="d-flex position-relative">
 									<label for="peer_private_key_textbox" class="form-label">
-										<small class="text-muted">Private Key <code>(Required for QR Code and Download)</code></small>
+										<small class="text-muted"><LocaleText t="Private Key"></LocaleText> 
+											<code>
+												<LocaleText t="(Required for QR Code and Download)"></LocaleText>
+											</code></small>
 									</label>
 									<a role="button" class="ms-auto text-decoration-none toggleShowKey"
 									   @click="this.showKey = !this.showKey"
@@ -110,7 +121,11 @@ export default {
 							</div>
 							<div>
 								<label for="peer_allowed_ip_textbox" class="form-label">
-									<small class="text-muted">Allowed IPs <code>(Required)</code></small>
+									<small class="text-muted">
+										<LocaleText t="Allowed IPs"></LocaleText>
+										<code>
+											<LocaleText t="(Required)"></LocaleText>
+										</code></small>
 								</label>
 								<input type="text" class="form-control form-control-sm rounded-3"
 								       :disabled="this.saving"
@@ -120,7 +135,11 @@ export default {
 
 							<div>
 								<label for="peer_endpoint_allowed_ips" class="form-label">
-									<small class="text-muted">Endpoint Allowed IPs <code>(Required)</code></small>
+									<small class="text-muted">
+										<LocaleText t="Endpoint Allowed IPs"></LocaleText>
+										<code>
+											<LocaleText t="(Required)"></LocaleText>
+										</code></small>
 								</label>
 								<input type="text" class="form-control form-control-sm rounded-3"
 								       :disabled="this.saving"
@@ -129,7 +148,9 @@ export default {
 							</div>
 							<div>
 								<label for="peer_DNS_textbox" class="form-label">
-									<small class="text-muted">DNS</small>
+									<small class="text-muted">
+										<LocaleText t="DNS"></LocaleText>
+									</small>
 								</label>
 								<input type="text" class="form-control form-control-sm rounded-3"
 								       :disabled="this.saving"
@@ -141,7 +162,7 @@ export default {
 									<h2 class="accordion-header">
 										<button class="accordion-button rounded-3 collapsed" type="button"
 										        data-bs-toggle="collapse" data-bs-target="#peerSettingsAccordionOptional">
-											Optional Settings
+											<LocaleText t="Optional Settings"></LocaleText>
 										</button>
 									</h2>
 									<div id="peerSettingsAccordionOptional" class="accordion-collapse collapse"
@@ -149,7 +170,8 @@ export default {
 										<div class="accordion-body d-flex flex-column gap-2 mb-2">
 											<div>
 												<label for="peer_preshared_key_textbox" class="form-label">
-													<small class="text-muted">Pre-Shared Key</small>
+													<small class="text-muted">
+														<LocaleText t="Pre-Shared Key"></LocaleText></small>
 												</label>
 												<input type="text" class="form-control form-control-sm rounded-3"
 												       :disabled="this.saving"
@@ -157,7 +179,9 @@ export default {
 												       id="peer_preshared_key_textbox">
 											</div>
 											<div>
-												<label for="peer_mtu" class="form-label"><small class="text-muted">MTU</small></label>
+												<label for="peer_mtu" class="form-label"><small class="text-muted">
+													<LocaleText t="MTU"></LocaleText>
+												</small></label>
 												<input type="number" class="form-control form-control-sm rounded-3"
 												       :disabled="this.saving"
 												       v-model="this.data.mtu"
@@ -165,7 +189,9 @@ export default {
 											</div>
 											<div>
 												<label for="peer_keep_alive" class="form-label">
-													<small class="text-muted">Persistent Keepalive</small>
+													<small class="text-muted">
+														<LocaleText t="Persistent Keepalive"></LocaleText>
+													</small>
 												</label>
 												<input type="number" class="form-control form-control-sm rounded-3"
 												       :disabled="this.saving"
@@ -178,25 +204,27 @@ export default {
 							</div>
 							<hr>
 							<div class="d-flex gap-2 align-items-center">
-								<strong>Reset Data Usage</strong>
+								<strong>
+									<LocaleText t="Reset Data Usage"></LocaleText>
+								</strong>
 								<div class="d-flex gap-2 ms-auto">
 									<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
 										@click="this.resetPeerData('total')"
 									>
 										<i class="bi bi-arrow-down-up me-2"></i>
-										Total
+										<LocaleText t="Total"></LocaleText>
 									</button>
 									<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
 									        @click="this.resetPeerData('receive')"
 									>
 										<i class="bi bi-arrow-down me-2"></i>
-										Received
+										<LocaleText t="Received"></LocaleText>
 									</button>
 									<button class="btn bg-primary-subtle text-primary-emphasis rounded-3  flex-grow-1 shadow-sm"
 									        @click="this.resetPeerData('sent')"
 									>
 										<i class="bi bi-arrow-up me-2"></i>
-										Sent
+										<LocaleText t="Sent"></LocaleText>
 									</button>
 								</div>
 								
@@ -206,14 +234,16 @@ export default {
 							<button class="btn btn-secondary rounded-3 shadow"
 							        @click="this.reset()"
 							        :disabled="!this.dataChanged || this.saving">
-								Revert <i class="bi bi-arrow-clockwise ms-2"></i>
+								<LocaleText t="Revert"></LocaleText>
+								 <i class="bi bi-arrow-clockwise ms-2"></i>
 							</button>
 
 							<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
 							        :disabled="!this.dataChanged || this.saving"
 							        @click="this.savePeer()"
 							>
-								Save Peer<i class="bi bi-save-fill ms-2"></i></button>
+								<LocaleText t="Save Peer"></LocaleText>
+								<i class="bi bi-save-fill ms-2"></i></button>
 						</div>
 					</div>
 				</div>
diff --git a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
index 5e3a824..44a12ba 100644
--- a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
+++ b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
@@ -1,9 +1,11 @@
 <script>
 import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import LocaleText from "@/components/text/localeText.vue";
 
 export default {
 	name: "peerSettingsDropdown",
+	components: {LocaleText},
 	setup(){
 		const dashboardStore = DashboardConfigurationStore()
 		return {dashboardStore}
@@ -88,9 +90,8 @@ export default {
 			<template v-if="!this.Peer.private_key">
 				<li>
 					<small class="w-100 dropdown-item text-muted"
-					       style="white-space: break-spaces; font-size: 0.7rem"
-					>Download & QR Code is not available due to no <code>private key</code>
-						set for this peer
+					       style="white-space: break-spaces; font-size: 0.7rem">
+						<LocaleText t="Download & QR Code is not available due to no private key set for this peer"></LocaleText>
 					</small>
 				</li>
 				
@@ -114,7 +115,7 @@ export default {
 				<a class="dropdown-item d-flex" role="button"
 				   @click="this.$emit('setting')"
 				>
-					<i class="me-auto bi bi-pen"></i> Edit
+					<i class="me-auto bi bi-pen"></i> <LocaleText t="Peer Settings"></LocaleText>
 				</a>
 			</li>
 			<li>
diff --git a/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue b/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
index 5904919..9014893 100644
--- a/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
+++ b/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
@@ -4,6 +4,7 @@ import {fetchPost} from "@/utilities/fetch.js";
 import dayjs from "dayjs";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import VueDatePicker from '@vuepic/vue-datepicker';
+import LocaleText from "@/components/text/localeText.vue";
 
 
 export default {
@@ -12,6 +13,7 @@ export default {
 		peer: Object
 	},
 	components: {
+		LocaleText,
 		VueDatePicker
 	},
 	data(){
@@ -49,11 +51,9 @@ export default {
 				if (res.status){
 					this.peer.ShareLink = res.data;
 					this.dataCopy = res.data.at(0);
-					this.store.newMessage("Server", "Share link created successfully", "success")
 				}else{
 					this.store.newMessage("Server", 
 						"Share link failed to create. Reason: " + res.message, "danger")
-
 				}
 				this.loading = false;
 			})
@@ -108,13 +108,15 @@ export default {
 			<div class="m-auto modal-dialog-centered dashboardModal" style="width: 500px">
 				<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">Share Peer</h4>
+						<h4 class="mb-0">
+							<LocaleText t="Share Peer"></LocaleText>
+						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
 					<div class="card-body px-4 pb-4" v-if="this.peer.ShareLink">
 						<div v-if="!this.dataCopy">
 							<h6 class="mb-3 text-muted">
-								Currently the peer is not sharing
+								<LocaleText t="Currently the peer is not sharing"></LocaleText>
 							</h6>
 							<button 
 								@click="this.startSharing()"
@@ -123,7 +125,8 @@ export default {
 								<span :class="{'animate__animated animate__flash animate__infinite animate__slower': this.loading}">
 									<i class="bi bi-send-fill me-2" ></i>
 								</span>
-								{{this.loading ? "Sharing...":"Start Sharing"}}
+								<LocaleText t="Sharing..." v-if="this.loading"></LocaleText>
+								<LocaleText t="Start Sharing" v-else></LocaleText>
 							</button>
 						</div>
 						<div v-else>
@@ -137,7 +140,7 @@ export default {
 							<div class="d-flex flex-column gap-2 mb-3">
 								<small>
 									<i class="bi bi-calendar me-2"></i>
-									Expire Date
+									<LocaleText t="Expire At"></LocaleText>
 								</small>
 								<VueDatePicker
 									:is24="true"
@@ -157,7 +160,8 @@ export default {
 								<span :class="{'animate__animated animate__flash animate__infinite animate__slower': this.loading}">
 									<i class="bi bi-send-slash-fill me-2" ></i>
 								</span>
-								{{this.loading ? "Stop Sharing...":"Stop Sharing"}}
+								<LocaleText t="Stop Sharing..." v-if="this.loading"></LocaleText>
+								<LocaleText t="Stop Sharing" v-else></LocaleText>
 							</button>
 						</div>
 					</div>
diff --git a/src/static/app/src/stores/WireguardConfigurationsStore.js b/src/static/app/src/stores/WireguardConfigurationsStore.js
index d4770c3..6335fa1 100644
--- a/src/static/app/src/stores/WireguardConfigurationsStore.js
+++ b/src/static/app/src/stores/WireguardConfigurationsStore.js
@@ -1,6 +1,7 @@
 import {defineStore} from "pinia";
 import {fetchGet} from "@/utilities/fetch.js";
 import isCidr from "is-cidr";
+import {GetLocale} from "@/utilities/locale.js";
 
 export const WireguardConfigurationsStore = defineStore('WireguardConfigurationsStore', {
 	state: () => ({
@@ -11,54 +12,54 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
 			dropdowns: {
 				Field: [
 					{
-						display: "Total Received",
+						display: GetLocale("Total Received"),
 						value: "total_receive",
 						unit: "GB",
 						type: 'number'
 					},
 					{
-						display: "Total Sent",
+						display: GetLocale("Total Sent"),
 						value: "total_sent",
 						unit: "GB",
 						type: 'number'
 					},
 					{
-						display: "Total Data",
+						display: GetLocale("Total Usage"),
 						value: "total_data",
 						unit: "GB",
 						type: 'number'
 					},
 					{
-						display: "Date",
+						display: GetLocale("Date"),
 						value: "date",
 						type: 'date'
 					}
 				],
 				Operator: [
+					// {
+					// 	display: "equal",
+					// 	value: "eq"
+					// },
+					// {
+					// 	display: "not equal",
+					// 	value: "neq"
+					// },
 					{
-						display: "equal",
-						value: "eq"
-					},
-					{
-						display: "not equal",
-						value: "neq"
-					},
-					{
-						display: "larger than",
+						display: GetLocale("larger than"),
 						value: "lgt"
 					},
-					{
-						display: "less than",
-						value: "lst"
-					},
+					// {
+					// 	display: "less than",
+					// 	value: "lst"
+					// },
 				],
 				Action: [
 					{
-						display: "Restrict Peer",
+						display: GetLocale("Restrict Peer"),
 						value: "restrict"
 					},
 					{
-						display: "Delete Peer",
+						display: GetLocale("Delete Peer"),
 						value: "delete"
 					}
 				]
diff --git a/src/static/locale/zh-CN.json b/src/static/locale/zh-CN.json
index a16da89..a7556e2 100644
--- a/src/static/locale/zh-CN.json
+++ b/src/static/locale/zh-CN.json
@@ -66,18 +66,69 @@
 	"Real Time Received Data Usage": "实时接收数据量",
 	"Real Time Sent Data Usage": "实时发送数据量",
 	"Peer": "端点",
+	"Peer Settings": "端点设定",
 	"Download All": "全部下载",
 	"Search Peers\\.\\.\\.": "搜索端点...",
 	"Display": "显示设置",
 	"Sort By": "排列方式",
 	"Refresh Interval": "刷新间隔",
 	"Name": "名字",
-	"Allowed IP": "允许 IP 地址",
+	"Allowed IPs": "允许的 IP 地址",
 	"Restricted": "已限制端点",
 	"(.*) Seconds": "$1 秒",
 	"(.*) Minutes": "$1 分钟",
 	"Configuration Settings": "配置设定",
 	"Peer Jobs": "端点任务",
 	"Active Jobs": "未运行任务",
-	"Logs": "日志"
+	"All Active Jobs": "所有未运行任务",
+	"Logs": "日志",
+	"Private Key": "秘钥",
+	"\\(Required for QR Code and Download\\)": "（二维码以及下载功能需要填写秘钥）",
+	"\\(Required\\)": "（必填项）",
+	"Endpoint Allowed IPs": "终结点允许的 IP 地址",
+	"DNS": "域名系统（DNS）",
+	"Optional Settings": "可选设定",
+	"Pre-Shared Key": "共享秘钥",
+	"MTU": "最大传输单元",
+	"Persistent Keepalive": "持久保持活动",
+	"Reset Data Usage": "重置数据用量",
+	"Total": "总数据",
+	"Sent": "发送数据",
+	"Received": "接收数据",
+	"Revert": "撤销更改",
+	"Save Peer": "保存端点",
+	"QR Code": "二维码",
+	"Schedule Jobs": "计划任务",
+	"Job": "任务",
+	"Job ID": "任务 ID",
+	"Unsaved Job": "未保存任务",
+	"This peer does not have any job yet\\.": "此端点还没有任何任务",
+	"if": "如果",
+	"is": "是",
+	"then": "那就",
+	"larger than": "大于",
+	"Date": "日期",
+	"Restrict Peer": "限制端点",
+	"Delete Peer": "删除端点",
+	"Edit": "编辑",
+	"Delete": "删除",
+	"Cancel": "取消",
+	"Save": "保存",
+	"No active job at the moment\\.": "没有未运行的任务",
+	"Jobs Logs": "任务日志",
+	"Updated at": "更新于",
+	"Refresh": "刷新",
+	"Filter": "筛选",
+	"Success": "成功",
+	"Failed": "失败",
+	"Log ID": "任务 ID",
+	"Message": "消息",
+	"Share Peer": "分享端点",
+	"Currently the peer is not sharing": "此端点未被共享",
+	"Sharing\\.\\.\\.": "分享中...",
+	"Start Sharing": "开始分享",
+	"Stop Sharing\\.\\.\\.": "停止分享中...",
+	"Stop Sharing": "停止分享",
+	"Access Restricted": "已限制访问",
+	"Download \\& QR Code is not available due to no private key set for this peer": "下载以及二维码功能不可用，需要填写此端点的秘钥"
 }
\ No newline at end of file