Still working on localization

src/static/app/src/components/configurationComponents/peerList.vue

@@ -41,6 +41,7 @@ import PeerJobsAllModal from "@/components/configurationComponents/peerJobsAllMo
 import PeerJobsLogsModal from "@/components/configurationComponents/peerJobsLogsModal.vue";
 import {ref} from "vue";
 import PeerShareLinkModal from "@/components/configurationComponents/peerShareLinkModal.vue";
+import LocaleText from "@/components/text/localeText.vue";
 
 Chart.register(
 	ArcElement,
@@ -71,6 +72,7 @@ Chart.register(
 export default {
 	name: "peerList",
 	components: {
+		LocaleText,
 		PeerShareLinkModal,
 		PeerJobsLogsModal,
 		PeerJobsAllModal, PeerJobs, PeerCreate, PeerQRCode, PeerSettings, PeerSearch, Peer, Line, Bar},
@@ -410,7 +412,9 @@ export default {
 	<div v-if="!this.loading" class="container-md">
 		<div class="d-flex align-items-center">
 			<div>
-				<small CLASS="text-muted">CONFIGURATION</small>
+				<small CLASS="text-muted">
+					<LocaleText t="CONFIGURATION"></LocaleText>
+				</small>
 				<div class="d-flex align-items-center gap-3">
 					<h1 class="mb-0"><samp>{{this.configurationInfo.Name}}</samp></h1>
 				</div>
@@ -418,13 +422,15 @@ export default {
 			<div class="card rounded-3 bg-transparent shadow-sm ms-auto">
 				<div class="card-body py-2 d-flex align-items-center">
 					<div>
-						<p class="mb-0 text-muted"><small>Status</small></p>
+						<p class="mb-0 text-muted"><small>
+							<LocaleText t="Status"></LocaleText>
+						</small></p>
 						<div class="form-check form-switch ms-auto">
 							<label class="form-check-label" style="cursor: pointer" :for="'switch' + this.configurationInfo.id">
-								{{this.configurationToggling ? 'Turning ':''}}
+								<LocaleText t="On" v-if="this.configurationInfo.Status"></LocaleText>
-								{{this.configurationInfo.Status ? "On":"Off"}}
+								<LocaleText t="Off" v-else></LocaleText>
 								<span v-if="this.configurationToggling"
-								      class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+								      class="spinner-border spinner-border-sm ms-2" aria-hidden="true"></span>
 							</label>
 							<input class="form-check-input"
 							       style="cursor: pointer"
@@ -444,7 +450,9 @@ export default {
 			<div class="col-6 col-lg-3">
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body py-2">
-						<p class="mb-0 text-muted"><small>Address</small></p>
+						<p class="mb-0 text-muted"><small>
+							<LocaleText t="Address"></LocaleText>
+						</small></p>
 						{{this.configurationInfo.Address}}
 					</div>
 				</div>
@@ -452,7 +460,9 @@ export default {
 			<div class="col-6 col-lg-3">
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body py-2">
-						<p class="mb-0 text-muted"><small>Listen Port</small></p>
+						<p class="mb-0 text-muted"><small>
+							<LocaleText t="Listen Port"></LocaleText>
+						</small></p>
 						{{this.configurationInfo.ListenPort}}
 					</div>
 				</div>
@@ -460,7 +470,9 @@ export default {
 			<div style="word-break: break-all" class="col-12 col-lg-6">
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body py-2">
-						<p class="mb-0 text-muted"><small>Public Key</small></p>
+						<p class="mb-0 text-muted"><small>
+							<LocaleText t="Public Key"></LocaleText>
+						</small></p>
 						<samp>{{this.configurationInfo.PublicKey}}</samp>
 					</div>
 				</div>
@@ -471,7 +483,9 @@ export default {
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body d-flex">
 						<div>
-							<p class="mb-0 text-muted"><small>Connected Peers</small></p>
+							<p class="mb-0 text-muted"><small>
+								<LocaleText t="Connected Peers"></LocaleText>
+							</small></p>
 							<strong class="h4">{{configurationSummary.connectedPeers}}</strong>
 						</div>
 						<i class="bi bi-ethernet ms-auto h2 text-muted"></i>
@@ -482,7 +496,9 @@ export default {
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body d-flex">
 						<div>
-							<p class="mb-0 text-muted"><small>Total Usage</small></p>
+							<p class="mb-0 text-muted"><small>
+								<LocaleText t="Total Usage"></LocaleText>
+							</small></p>
 							<strong class="h4">{{configurationSummary.totalUsage}} GB</strong>
 						</div>
 						<i class="bi bi-arrow-down-up ms-auto h2 text-muted"></i>
@@ -493,7 +509,9 @@ export default {
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body d-flex">
 						<div>
-							<p class="mb-0 text-muted"><small>Total Received</small></p>
+							<p class="mb-0 text-muted"><small>
+								<LocaleText t="Total Received"></LocaleText>
+							</small></p>
 							<strong class="h4 text-primary">{{configurationSummary.totalReceive}} GB</strong>
 						</div>
 						<i class="bi bi-arrow-down ms-auto h2 text-muted"></i>
@@ -504,7 +522,9 @@ export default {
 				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body d-flex">
 						<div>
-							<p class="mb-0 text-muted"><small>Total Sent</small></p>
+							<p class="mb-0 text-muted"><small>
+								<LocaleText t="Total Sent"></LocaleText>
+							</small></p>
 							<strong class="h4 text-success">{{configurationSummary.totalSent}} GB</strong>
 						</div>
 						<i class="bi bi-arrow-up ms-auto h2 text-muted"></i>
@@ -516,7 +536,9 @@ export default {
 			<div class="col-12 col-lg-6">
 				<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px">
 					<div class="card-header bg-transparent border-0">
-						<small class="text-muted">Peers Total Data Usage</small></div>
+						<small class="text-muted">
+							<LocaleText t="Peers Data Usage"></LocaleText>
+						</small></div>
 					<div class="card-body pt-1">
 						<Bar
 							:data="individualDataUsage"
@@ -527,7 +549,9 @@ export default {
 			</div>
 			<div class="col-sm col-lg-3">
 				<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px">
-					<div class="card-header bg-transparent border-0"><small class="text-muted">Real Time Received Data Usage</small></div>
+					<div class="card-header bg-transparent border-0"><small class="text-muted">
+						<LocaleText t="Real Time Received Data Usage"></LocaleText>
+					</small></div>
 					<div class="card-body pt-1">
 						<Line
 							:options="chartOptions"
@@ -539,7 +563,9 @@ export default {
 			</div>
 			<div class="col-sm col-lg-3">
 				<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px">
-					<div class="card-header bg-transparent border-0"><small class="text-muted">Real Time Sent Data Usage</small></div>
+					<div class="card-header bg-transparent border-0"><small class="text-muted">
+						<LocaleText t="Real Time Sent Data Usage"></LocaleText>
+					</small></div>
 					<div class="card-body  pt-1">
 						<Line
 							:options="chartOptions"

src/static/app/src/components/configurationComponents/peerSearch.vue

@@ -2,10 +2,13 @@
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import LocaleText from "@/components/text/localeText.vue";
+import {GetLocale} from "@/utilities/locale.js";
 
 
 export default {
 	name: "peerSearch",
+	components: {LocaleText},
 	setup(){
 		const store = DashboardConfigurationStore();
 		const wireguardConfigurationStore = WireguardConfigurationsStore()
@@ -18,16 +21,16 @@ export default {
 	data(){
 		return {
 			sort: {
-				status: "Status",
+				status: GetLocale("Status"),
-				name: "Name",
+				name: GetLocale("Name"),
-				allowed_ip: "Allowed IP",
+				allowed_ip: GetLocale("Allowed IP"),
-				restricted: "Restricted"
+				restricted: GetLocale("Restricted")
 			},
 			interval: {
-				'5000': '5 Seconds',
+				'5000': GetLocale('5 Seconds'),
-				'10000': '10 Seconds',
+				'10000': GetLocale('10 Seconds'),
-				'30000': '30 Seconds',
+				'30000': GetLocale('30 Seconds'),
-				'60000': '1 Minutes'
+				'60000': GetLocale('1 Minutes')
 			},
 			searchString: "",
 			searchStringTimeout: undefined,
@@ -77,8 +80,10 @@ export default {
 			})
 		}
 	},
-	mounted() {
+	computed: {
-		
+		searchBarPlaceholder(){
+			return GetLocale("Search Peers...")
+		}
 	}
 }
 </script>
@@ -89,16 +94,18 @@ export default {
 			<RouterLink
 				to="create"
 				class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
-				<i class="bi bi-plus-lg me-2"></i>Peer
+				<i class="bi bi-plus-lg me-2"></i>
+				<LocaleText t="Peer"></LocaleText>
 			</RouterLink>
 			<button class="btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  shadow-sm"
 			        @click="this.downloadAllPeer()">
-				<i class="bi bi-download me-2"></i> Download All
+				<i class="bi bi-download me-2"></i>
+				<LocaleText t="Download All"></LocaleText>
 			</button>
 			<div class="mt-3 mt-md-0 flex-grow-1">
 
 				<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-100"
-				       placeholder="Search Peers..."
+				       :placeholder="searchBarPlaceholder"
 				       id="searchPeers"
 				       @keyup="this.debounce()"
 				       v-model="this.searchString">
@@ -108,7 +115,7 @@ export default {
 				class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
 				type="button" aria-expanded="false">
 				<i class="bi bi-filter-circle me-2"></i>
-				Display
+				<LocaleText t="Display"></LocaleText>
 			</button>
 			<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
 			        @click="this.showMoreSettings = true"
@@ -123,13 +130,15 @@ export default {
 						<div class="m-auto modal-dialog-centered dashboardModal">
 							<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-2">
-									<h4 class="mb-0 fw-normal">Display
+									<h4 class="mb-0 fw-normal"><LocaleText t="Display"></LocaleText>
 									</h4>
 									<button type="button" class="btn-close ms-auto" @click="this.showDisplaySettings = false"></button>
 								</div>
 								<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
 									<div>
-										<p class="text-muted fw-bold mb-2"><small>Sort by</small></p>
+										<p class="text-muted fw-bold mb-2"><small>
+											<LocaleText t="Sort by"></LocaleText>
+										</small></p>
 										<div class="list-group">
 											<a v-for="(value, key) in this.sort" class="list-group-item list-group-item-action d-flex" role="button" @click="this.updateSort(key)">
 												<span class="me-auto">{{value}}</span>
@@ -139,7 +148,9 @@ export default {
 										</div>
 									</div>
 									<div>
-										<p class="text-muted fw-bold mb-2"><small>Refresh interval</small></p>
+										<p class="text-muted fw-bold mb-2"><small>
+											<LocaleText t="Refresh Interval"></LocaleText>
+										</small></p>
 										<div class="list-group">
 											<a v-for="(value, key) in this.interval"
 											   class="list-group-item list-group-item-action d-flex" role="button"
@@ -164,21 +175,24 @@ export default {
 						<div class="m-auto modal-dialog-centered dashboardModal">
 							<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-2">
-									<h4 class="mb-0 fw-normal">Configuration Settings
+									<h4 class="mb-0 fw-normal">
+										<LocaleText t="Configuration Settings"></LocaleText>
 									</h4>
 									<button type="button" class="btn-close ms-auto" @click="this.showMoreSettings = false"></button>
 								</div>
 								<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
 									<div>
-										<p class="text-muted fw-bold mb-2"><small>Peer Jobs</small></p>
+										<p class="text-muted fw-bold mb-2"><small>
+											<LocaleText t="Peer Jobs"></LocaleText>
+										</small></p>
 										<div class="list-group">
 											<a class="list-group-item list-group-item-action d-flex" role="button" 
 											   @click="this.$emit('jobsAll')">
-												Active Jobs
+												<LocaleText t="Active Jobs"></LocaleText>
 											</a>
 											<a class="list-group-item list-group-item-action d-flex" role="button"
 											   @click="this.$emit('jobLogs')">
-												Logs
+												<LocaleText t="Logs"></LocaleText>
 											</a>
 										</div>
 									</div>

src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue

@@ -48,7 +48,9 @@ export default {
 				<small class="text-muted">
 					<LocaleText t="Expire At"></LocaleText>
 				</small>
-				{{this.apiKey.ExpiredAt ? this.apiKey.ExpiredAt : 'Never'}}
+				
+				<LocaleText t="Never Expire" v-if="!this.apiKey.ExpiredAt"></LocaleText>
+				<span>{{ this.apiKey.ExpiredAt }}</span>
 			</div>
 			<a role="button" class="btn btn-sm bg-danger-subtle text-danger-emphasis rounded-3"
 			   v-if="!this.store.getActiveCrossServer()"

src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/newDashboardAPIKey.vue

@@ -3,10 +3,11 @@ import dayjs from "dayjs";
 import {fetchPost} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import VueDatePicker from "@vuepic/vue-datepicker";
+import LocaleText from "@/components/text/localeText.vue";
 
 export default {
 	name: "newDashboardAPIKey",
-	components: {VueDatePicker},
+	components: {LocaleText, VueDatePicker},
 	data(){
 		return{
 			newKeyData:{
@@ -58,11 +59,15 @@ export default {
 	     style="background-color: #00000060; backdrop-filter: blur(3px)">
 		<div class="card m-auto rounded-3 mt-5">
 			<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
-				<h6 class="mb-0">Create API Key</h6>
+				<h6 class="mb-0">
+					<LocaleText t="Create API Key"></LocaleText>
+				</h6>
 				<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 			</div>
 			<div class="card-body d-flex gap-2 p-4 flex-column">
-				<small class="text-muted">When should this API Key expire?</small>
+				<small class="text-muted">
+					<LocaleText t="When should this API Key expire?"></LocaleText>
+				</small>
 				<div class="d-flex align-items-center gap-2">
 					<VueDatePicker
 						:is24="true"
@@ -80,7 +85,8 @@ export default {
 					<input class="form-check-input" type="checkbox"
 					       v-model="this.newKeyData.neverExpire" id="neverExpire" :disabled="this.submitting">
 					<label class="form-check-label" for="neverExpire">
-						Never Expire (<i class="bi bi-emoji-grimace-fill"></i> Don't think that's a good idea)
+						<LocaleText t="Never Expire"></LocaleText> (<i class="bi bi-emoji-grimace-fill me-2"></i> 
+						<LocaleText t="Don't think that's a good idea"></LocaleText>)
 					</label>
 				</div>
 				<button class="ms-auto btn bg-success-subtle text-success-emphasis border-1 border-success-subtle rounded-3 shadow-sm"
@@ -88,7 +94,8 @@ export default {
 				        @click="this.submitNewAPIKey()"
 				>
 					<i class="bi bi-check-lg me-2" v-if="!this.submitting"></i>
-					{{this.submitting ? 'Creating...':'Done'}}
+					<LocaleText t="Creating..." v-if="this.submitting"></LocaleText>
+					<LocaleText t="Create" v-else></LocaleText>
 				</button>
 			</div>
 		</div>

src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue

@@ -72,7 +72,7 @@ export default {
 				<LocaleText :t="this.title"></LocaleText>
 			</small></strong>
 		</label>
-		<div class="d-flex gap-2 align-items-start mb-2">
+		<div class="d-flex gap-2 align-items-start">
 			<div class="flex-grow-1">
 				<input type="text" class="form-control rounded-3"
 				       :class="{'is-invalid': this.showInvalidFeedback, 'is-valid': this.isValid}"

src/static/app/src/utilities/locale.js

@@ -1,16 +1,12 @@
 export const GetLocale = (key) => {
-	console.log(key)
-	
 	if (window.Locale === null)
 		return key
-	
 	const reg = Object.keys(window.Locale)
 	const match = reg.filter(x => {
-		return key.match(new RegExp('^' + x + '$', 'g')) !== null
+		return key.match(new RegExp('^' + x + '$', 'gi')) !== null
 	})
-	console.log(match)
 	if (match.length === 0 || match.length > 1){
 		return key
 	}
-	return window.Locale[match[0]]
+	return key.replace(new RegExp(match[0], 'gi'), window.Locale[match[0]])
 }

src/static/locale/zh-CN.json

@@ -45,5 +45,39 @@
 	"Disabled": "已停用",
 	"No WGDashboard API Key": "没有 WGDashboard API 秘钥",
 	"Expire At": "过期于",
-	"Are you sure to delete this API key\\?": "确定删除此 API 秘钥？"
+	"Are you sure to delete this API key\\?": "确定删除此 API 秘钥？",
+	"Create API Key": "创建 API 秘钥",
+	"When should this API Key expire\\?": "这个 API 秘钥什么时候过期呢？",
+	"Never Expire": "从不过期",
+	"Don't think that's a good idea": "我不觉得这是一个好主意",
+	"Creating\\.\\.\\.": "创建中...",
+	"Create": "创建",
+	"Status": "状态",
+	"On": "已启用",
+	"Off": "已停用",
+	"Address": "网络地址",
+	"Listen Port": "监听端口",
+	"Public Key": "公钥",
+	"Connected Peers": "已连接端点",
+	"Total Usage": "总数据用量",
+	"Total Received": "总接收数据用量",
+	"Total Sent": "总发送数据用量",
+	"Peers Data Usage": "端点的数据用量",
+	"Real Time Received Data Usage": "实时接收数据量",
+	"Real Time Sent Data Usage": "实时发送数据量",
+	"Peer": "端点",
+	"Download All": "全部下载",
+	"Search Peers\\.\\.\\.": "搜索端点...",
+	"Display": "显示设置",
+	"Sort By": "排列方式",
+	"Refresh Interval": "刷新间隔",
+	"Name": "名字",
+	"Allowed IP": "允许 IP 地址",
+	"Restricted": "已限制端点",
+	"(.*) Seconds": "$1 秒",
+	"(.*) Minutes": "$1 分钟",
+	"Configuration Settings": "配置设定",
+	"Peer Jobs": "端点任务",
+	"Active Jobs": "未运行任务",
+	"Logs": "日志"
 }