Finished zh-CN

src/static/app/src/components/configurationComponents/backupRestoreComponents/backup.vue

@@ -4,6 +4,7 @@ import {computed, ref} from "vue";
 import {fetchPost} from "@/utilities/fetch.js";
 import {useRoute} from "vue-router";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import LocaleText from "@/components/text/localeText.vue";
 const props = defineProps(["b", "delay"])
 const deleteConfirmation = ref(false)
 const restoreConfirmation = ref(false)
@@ -59,18 +60,20 @@ const showContent = ref(false);
 					v-if="deleteConfirmation"
 					class="position-absolute w-100 h-100 confirmationContainer start-0 top-0 rounded-3 d-flex p-2">
 					<div class="m-auto">
-						<h5>Are you sure to delete this backup?</h5>
+						<h5>
+							<LocaleText t="Are you sure to delete this backup?"></LocaleText>
+						</h5>
 						<div class="d-flex gap-2 align-items-center justify-content-center">
 							<button class="btn btn-danger rounded-3" 
 							        :disabled="loading"
 							        @click='deleteBackup()'>
-								Yes
+								<LocaleText t="Yes"></LocaleText>
 							</button>
 							<button
 								@click="deleteConfirmation = false"
 								:disabled="loading"
 								class="btn bg-secondary-subtle text-secondary-emphasis border-secondary-subtle rounded-3">
-								No
+								<LocaleText t="No"></LocaleText>
 							</button>
 						</div>
 					</div>
@@ -81,19 +84,21 @@ const showContent = ref(false);
 					v-if="restoreConfirmation"
 					class="position-absolute w-100 h-100 confirmationContainer start-0 top-0 rounded-3 d-flex p-2">
 					<div class="m-auto">
-						<h5>Are you sure to restore this backup?</h5>
+						<h5>
+							<LocaleText t="Are you sure to restore this backup?"></LocaleText>
+						</h5>
 						<div class="d-flex gap-2 align-items-center justify-content-center">
 							<button
 								:disabled="loading"
 								@click="restoreBackup()"
 								class="btn btn-success rounded-3">
-								Yes
+								<LocaleText t="Yes"></LocaleText>
 							</button>
 							<button
 								@click="restoreConfirmation = false"
 								:disabled="loading"
 								class="btn bg-secondary-subtle text-secondary-emphasis border-secondary-subtle rounded-3">
-								No
+								<LocaleText t="No"></LocaleText>
 							</button>
 						</div>
 					</div>
@@ -102,13 +107,13 @@ const showContent = ref(false);
 			<div class="d-flex gap-3">
 				<div class="d-flex flex-column">
 					<small class="text-muted">
-						Backup
+						<LocaleText t="Backup"></LocaleText>
 					</small>
 					<samp>{{b.filename}}</samp>
 				</div>
 				<div class="d-flex flex-column">
 					<small class="text-muted">
-						Backup Date
+						<LocaleText t="Backup Date"></LocaleText>
 					</small>
 					{{dayjs(b.backupDate, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss")}}
 				</div>
@@ -130,7 +135,7 @@ const showContent = ref(false);
 				<a role="button" class="card-header d-flex text-decoration-none align-items-center" 
 				   :class="{'border-bottom-0': !showContent}"
 				   style="cursor: pointer" @click="showContent = !showContent">
-					<small>.conf File
+					<small>.conf <LocaleText t="File"></LocaleText>
 						</small>
 					<i class="bi bi-chevron-down ms-auto"></i>
 				</a>
@@ -144,7 +149,7 @@ const showContent = ref(false);
 			<div class="d-flex">
 				<span>
 					<i class="bi bi-database me-1"></i>
-					Database
+					<LocaleText t="Database File"></LocaleText>
 				</span>
 				<i class="bi ms-auto"
 					:class="[b.database ? 'text-success bi-check-circle-fill' : 'text-danger bi-x-circle-fill']"

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

@@ -50,7 +50,8 @@ const createBackup = () => {
 					<button 
 						@click="createBackup()"
 						class="btn bg-primary-subtle text-primary-emphasis border-primary-subtle rounded-3 w-100">
-						<i class="bi bi-plus-circle-fill me-2"></i> Create Backup
+						<i class="bi bi-plus-circle-fill me-2"></i>
+						<LocaleText t="Create Backup"></LocaleText>
 					</button>
 				</div>
 				<div class="position-relative d-flex flex-column gap-3">
@@ -65,7 +66,8 @@ const createBackup = () => {
 						     key="noBackups"
 						>
 							<div class="card-body text-center text-muted">
-								<i class="bi bi-x-circle-fill me-2"></i> No backup yet, click the button above to create backup.
+								<i class="bi bi-x-circle-fill me-2"></i>
+								<LocaleText t="No backup yet, click the button above to create backup."></LocaleText>
 							</div>
 						</div>
 						<Backup

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

@@ -59,15 +59,23 @@ const emits = defineEmits(["backup"])
 				<div class="card rounded-3 shadow flex-grow-1 bg-danger-subtle border-danger-subtle" id="deleteConfigurationContainer">
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
 						<h5 class="mb-0">
-							Are you sure to delete this configuration?
+							<LocaleText t="Are you sure to delete this configuration?"></LocaleText>
 						</h5>
 						<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
 					</div>
-					<div class="card-body px-4">
-						<p class="text-muted">
-							Once you deleted, all connected peers will get disconnected; Both configuration file 
-							(<code>.conf</code>) and database table related to this configuration will get deleted.
+					<div class="card-body px-4 text-muted">
+						<p class="mb-0">
+							<LocaleText t="Once you deleted this configuration:"></LocaleText>
 						</p>
+						<ul>
+							<li>
+								<LocaleText t="All connected peers will get disconnected"></LocaleText>
+							</li>
+							<li>
+								<LocaleText t="Both configuration file (.conf) and database table related to this configuration will get deleted"></LocaleText>
+							</li>
+						</ul>
+						 
 						<div class="alert"
 						     :class="[loading ? 'alert-secondary' : (backups.length > 0 ? 'alert-success' : 'alert-danger')]">
 							<div v-if="loading">
@@ -80,13 +88,12 @@ const emits = defineEmits(["backup"])
 							</div>
 							<div v-else class="d-flex align-items-center gap-2">
 								<i class="bi bi-x-circle-fill me-2"></i>
-								<LocaleText t="This configuration have no backup."></LocaleText>
-								
+								<LocaleText t="This configuration have no backup"></LocaleText>
 								<a role="button" 
 								   @click="emits('backup')"
 								   class="ms-auto btn btn-sm btn-primary rounded-3">
 									<i class="bi bi-clock-history me-2"></i>
-									Backup
+									<LocaleText t="Backup"></LocaleText>
 								</a>
 								<a role="button"
 								   @click="getBackup()"
@@ -96,7 +103,9 @@ const emits = defineEmits(["backup"])
 							</div>
 						</div>
 						<hr>
-						<p>If you're sure, please type in the configuration name below and click Delete.</p>
+						<p>
+							<LocaleText t="If you're sure, please type in the configuration name below and click Delete"></LocaleText>
+						</p>
 						<input class="form-control rounded-3 mb-3" 
 						       :placeholder="configurationName"
 						       v-model="input"
@@ -105,7 +114,7 @@ const emits = defineEmits(["backup"])
 						        @click="deleteConfiguration()"
 						        :disabled="input !== configurationName || deleting">
 							<i class="bi bi-trash-fill me-2 rounded-3"></i>
-							Delete
+							<LocaleText t="Delete"></LocaleText>
 						</button>
 					</div>
 				</div>

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

@@ -219,7 +219,7 @@ export default {
 											</a>
 											<a class="list-group-item list-group-item-action d-flex text-danger fw-bold" role="button"
 											   @click="this.$emit('deleteConfiguration')">
-												<LocaleText t="Delete"></LocaleText>
+												<LocaleText t="Delete Configuration"></LocaleText>
 											</a>
 										</div>
 									</div>

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

@@ -164,20 +164,23 @@ export default {
 			</template>
 			<template v-else>
 				<li class="confirmDelete">
-					<small style="white-space: break-spaces" class="mb-2 d-block fw-bold">Are you sure to delete this peer?</small>
+					<p style="white-space: break-spaces" class="mb-2 d-block fw-bold">
+						<LocaleText t="Are you sure to delete this peer?"></LocaleText>
+					</p>
 					<div class="d-flex w-100 gap-2">
+						<button
+							@click="this.deletePeer()"
+							:disabled="this.deleteBtnDisabled"
+							class="flex-grow-1 ms-auto btn btn-sm bg-danger">
+							<LocaleText t="Yes"></LocaleText>
+						</button>
 						<button
 							:disabled="this.deleteBtnDisabled"
 							@click="this.confirmDelete = false"
 							class="flex-grow-1 btn btn-sm bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">
 							<LocaleText t="No"></LocaleText>
 						</button>
-						<button 
-							@click="this.deletePeer()"
-							:disabled="this.deleteBtnDisabled"
-							class="flex-grow-1 ms-auto btn btn-sm bg-danger">
-							<LocaleText t="Yes"></LocaleText>
-						</button>
+						
 					</div>
 				</li>
 			</template>

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

@@ -115,18 +115,20 @@ const clearDownload = () => {
 						<div class="d-flex w-100 align-items-center gap-2">
 							<div class="d-flex gap-3">
 								<a role="button"
-								   v-if="!downloadConfirmation"
+								   v-if="!downloadConfirmation && selectedPeers.length !== configurationPeers.map(x => x.id).length"
 								   @click="selectedPeers = configurationPeers.map(x => x.id)"
 								   class="text-decoration-none text-body">
 									<small>
-										<i class="bi bi-check-all me-2"></i>Select All
+										<i class="bi bi-check-all me-2"></i>
+										<LocaleText t="Select All"></LocaleText>
 									</small>
 								</a>
 								<a role="button" class="text-decoration-none text-body"
 								   @click="selectedPeers = []"
 								   v-if="selectedPeers.length > 0 && !downloadConfirmation">
 									<small>
-										<i class="bi bi-x-circle-fill me-2"></i>Clear
+										<i class="bi bi-x-circle-fill me-2"></i>
+										<LocaleText t="Clear Selection"></LocaleText>
 									</small>
 								</a>
 							</div>
@@ -143,7 +145,7 @@ const clearDownload = () => {
 					<div class="card-body px-4 flex-grow-1 d-flex gap-2 flex-column position-relative" 
 					     ref="card-body"
 					     style="overflow-y: scroll">
-						<button type="button" class="btn w-100 peerBtn text-start rounded-3"
+						<button type="button" class="btn w-100 peerBtn text-start rounded-3 d-flex align-items-center gap-3"
 						        @click="togglePeers(p.id)"
 						        :class="{active: selectedPeers.find(x => x === p.id)}"
 						        :key="p.id"
@@ -151,31 +153,28 @@ const clearDownload = () => {
 						        ref="sp"
 						        :data-id="p.id"
 						        v-for="p in searchPeers">
-							<div class="d-flex align-items-center gap-3">
-								<span v-if="!downloadConfirmation">
+							<span v-if="!downloadConfirmation">
 									<i class="bi"
 									   :class="[ selectedPeers.find(x => x === p.id) ? 'bi-check-circle-fill':'bi-circle']"
 									></i>
 								</span>
-								<div class="d-flex flex-column">
-									<small class="fw-bold">
-										{{p.name ? p.name : "Untitled Peer"}}
-									</small>
-									<small class="text-muted">
-										<samp>{{p.id}}</samp>
-									</small>
-								</div>
-								<span v-if="downloadConfirmation" class="ms-auto">
-									<div class="spinner-border spinner-border-sm" role="status" 
-									     v-if="!downloaded.success.find(x => x === p.id) && !downloaded.failed.find(x => x === p.id)">
-										<span class="visually-hidden">Loading...</span>
-									</div>
-									<i class="bi"
-									   v-else
-									   :class="[downloaded.failed.find(x => x === p.id) ? 'bi-x-circle-fill':'bi-check-circle-fill']"
-									></i>
+							<span class="d-flex flex-column">
+								<small class="fw-bold">
+									{{p.name ? p.name : "Untitled Peer"}}
+								</small>
+								<small class="text-muted">
+									<samp>{{p.id}}</samp>
+								</small>
+							</span>
+							<span v-if="downloadConfirmation" class="ms-auto">
+								<span class="spinner-border spinner-border-sm" role="status"
+								     v-if="!downloaded.success.find(x => x === p.id) && !downloaded.failed.find(x => x === p.id)">
 								</span>
-							</div>
+								<i class="bi"
+								   v-else
+								   :class="[downloaded.failed.find(x => x === p.id) ? 'bi-x-circle-fill':'bi-check-circle-fill']"
+								></i>
+							</span>
 						</button>
 					</div>
 					<div class="card-footer px-4 py-3 gap-2 d-flex align-items-center">
@@ -187,7 +186,8 @@ const clearDownload = () => {
 								<i class="bi bi-download"></i>
 							</button>
 							<span v-if="selectedPeers.length > 0" class="flex-grow-1 text-center">
-								<i class="bi bi-check-circle-fill me-2"></i> {{selectedPeers.length}} Peer{{selectedPeers.length > 1 ? 's':''}}
+								<i class="bi bi-check-circle-fill me-2"></i>
+								<LocaleText :t="selectedPeers.length + ' Peer' + (selectedPeers.length > 1 ? 's':'')"></LocaleText>
 							</span>
 							<button class="btn bg-danger-subtle text-danger-emphasis border-danger-subtle ms-auto rounded-3"
 							        @click="deleteConfirmation = true"
@@ -198,16 +198,16 @@ const clearDownload = () => {
 						</template>
 						<template v-else-if="downloadConfirmation">
 							<strong v-if="downloaded.failed.length + downloaded.success.length < selectedPeers.length" class="flex-grow-1 text-center">
-								Downloading {{selectedPeers.length}} Peer{{selectedPeers.length > 1 ? 's':''}}...
+								<LocaleText t="Downloading" /> <LocaleText :t="selectedPeers.length + ' Peer' + (selectedPeers.length > 1 ? 's':'')"></LocaleText>...
 							</strong>
 							<template v-else>
 								<strong>
-									Download Finished
+									<LocaleText t="Download Finished"></LocaleText>
 								</strong>
 								<button 
 									@click="clearDownload()"
 									class="btn bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle rounded-3 ms-auto">
-									Done
+									<LocaleText t="Done"></LocaleText>
 								</button>
 							</template>
 						</template>
@@ -216,16 +216,16 @@ const clearDownload = () => {
 							        :disabled="selectedPeers.length === 0 || submitting"
 							        @click="submitDelete()"
 							>
-								Yes
+								<LocaleText t="Yes"></LocaleText>
 							</button>
 							<strong v-if="selectedPeers.length > 0" class="flex-grow-1 text-center">
-								Are you sure to delete {{selectedPeers.length}} Peer{{selectedPeers.length > 1 ? 's':''}}?
+								<LocaleText t="Are you sure to delete"></LocaleText> <LocaleText :t="selectedPeers.length + ' Peer' + (selectedPeers.length > 1 ? 's':'')"></LocaleText>?
 							</strong>
 							<button class="btn bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle ms-auto rounded-3"
 							        :disabled="selectedPeers.length === 0 || submitting"
 							        @click="deleteConfirmation = false"
 							>
-								No
+								<LocaleText t="No"></LocaleText>
 							</button>
 						</template>
 					</div>

src/static/app/src/components/configurationList.vue

@@ -45,6 +45,12 @@ export default {
 						<i class="bi bi-plus-circle"></i>
 					</h2>
 				</RouterLink>
+				<RouterLink to="/restore_configuration"
+				            class="btn btn-dark btn-brand p-2 shadow ms-2" style="border-radius: 100%">
+					<h2 class="mb-0" style="line-height: 0">
+						<i class="bi bi-clock-history "></i>
+					</h2>
+				</RouterLink>
 				
 			</div>
 			<TransitionGroup name="fade" tag="div" class="d-flex flex-column gap-3 mb-4">

src/static/app/src/components/restoreConfigurationComponents/backupGroup.vue

@@ -36,9 +36,7 @@ onMounted(() => {
 					</samp>
 				</h6>
 				<small class="text-muted">
-					{{backups.length}} 
-					<LocaleText t="Backups" v-if="backups.length > 1"></LocaleText>
-					<LocaleText t="Backup" v-else></LocaleText>
+					<LocaleText :t="backups.length + (backups.length > 1 ? ' Backups':' Backup')"></LocaleText>
 				</small>
 			</div>
 			<h5 class="ms-auto mb-0 dropdownIcon text-muted" :class="{active: showBackups}">

src/static/app/src/components/restoreConfigurationComponents/confirmBackup.vue

@@ -208,7 +208,7 @@ const submitRestore = async () => {
 							<LocaleText t="Invalid port."></LocaleText>
 						</li>
 						<li>
-							<LocaleText t="Port is assigned to existing WireGuard Configuration.    "></LocaleText>
+							<LocaleText t="Port is assigned to existing WireGuard Configuration."></LocaleText>
 						</li>
 					</ul>
 				</div>

src/static/app/src/views/newConfiguration.vue

@@ -138,12 +138,6 @@ export default {
 				<h2 class="mb-0">
 					<LocaleText t="New Configuration"></LocaleText>
 				</h2>
-				<RouterLink to="/restore_configuration"
-				            class="btn btn-dark btn-brand p-2 shadow ms-auto" style="border-radius: 100%">
-					<h2 class="mb-0" style="line-height: 0">
-						<i class="bi bi-clock-history"></i>
-					</h2>
-				</RouterLink>
 			</div>
 			
 			<form class="text-body d-flex flex-column gap-3"

src/static/app/src/views/restoreConfiguration.vue

@@ -19,7 +19,7 @@ const selectedConfiguration = ref("")
 	<div class="mt-5 text-body">
 		<div class="container mb-4">
 			<div class="mb-5 d-flex align-items-center gap-4">
-				<RouterLink to="/new_configuration"
+				<RouterLink to="/"
 				            class="btn btn-dark btn-brand p-2 shadow" style="border-radius: 100%">
 					<h2 class="mb-0" style="line-height: 0">
 						<i class="bi bi-arrow-left-circle"></i>

src/static/app/src/views/settings.vue

@@ -37,7 +37,21 @@ export default {
 	},
 	data(){
 		return{
-			activeTab: "WGDashboard"
+			activeTab: "WGDashboard",
+			tabs: [
+				{
+					id: "WGDashboard",
+					title: "WGDashboard Settings"
+				},
+				{
+					id: "Peers",
+					title: "Peers Settings"
+				},
+				{
+					id: "WireGuardConfiguration",
+					title: "WireGuard Configuration Settings"
+				}
+			]
 		}
 	}
 }
@@ -47,35 +61,14 @@ export default {
 	<div class="mt-md-5 mt-3 text-body mb-3">
 		<div class="container-md d-flex flex-column gap-4">
 			<div>
-				
 				<ul class="nav nav-pills nav-justified align-items-center gap-2">
-					<li class="nav-item">
+					<li class="nav-item" v-for="t in this.tabs">
 						<a class="nav-link rounded-3"
-						   @click="this.activeTab = 'WGDashboard'"
-						   :class="{active: this.activeTab === 'WGDashboard'}"
+						   @click="this.activeTab = t.id"
+						   :class="{active: this.activeTab === t.id}"
 						   role="button">
 							<h6 class="my-2">
-								WGDashboard Settings
-							</h6>
-						</a>
-					</li>
-					<li class="nav-item">
-						<a class="nav-link rounded-3"
-						   @click="this.activeTab = 'Peers'"
-						   :class="{active: this.activeTab === 'Peers'}"
-						   role="button">
-							<h6 class="my-2">
-								Peers Settings
-							</h6>
-						</a>
-					</li>
-					<li class="nav-item">
-						<a class="nav-link rounded-3" 
-						   @click="this.activeTab = 'WireGuardConfiguration'"
-						   :class="{active: this.activeTab === 'WireGuardConfiguration'}"
-						   role="button">
-							<h6 class="my-2">
-								WireGuard Configuration Settings
+								<LocaleText :t="t.title"></LocaleText>
 							</h6>
 						</a>
 					</li>

src/static/locale/zh-CN.json

@@ -250,8 +250,8 @@
 	"Selected Backup": "已选择备份",
 	"You don't have any configuration to restore": "您没有任何配置备份可以恢复",
 	"Help": "帮助",
-	"Backups": "个备份",
-	"Backup": "个备份",
+	"Backup": "备份",
+	"([0-9].*) Backups?": "$1个备份",
 	"Yes": "是",
 	"No": "否",
 	"Backup not selected": "没有选择备份",
@@ -261,5 +261,40 @@
 	"Contain": "含有",
 	"Restricted Peers?": "已限制访问端点",
 	"Restore": "恢复",
-	"Restoring": "恢复中..."
+	"Restoring": "恢复中...",
+	"WGDashboard Settings": "WGDashboard 设定",
+	"Peers Settings": "端点设定",
+	"WireGuard Configuration Settings": "WireGuard 配置设定",
+	"Appearance": "外观",
+	"Theme": "主题",
+	"Language": "语言",
+	"Account Settings": "账户设定",
+	"Peer Default Settings": "端点默认设定",
+	"Toggle When Start Up": "运行后启动配置",
+	"Other Settings": "其它设定",
+	"Select Peers": "选择端点",
+	"Backup & Restore": "备份及恢复",
+	"Delete Configuration": "删除配置",
+	"Create Backup": "创建备份",
+	"No backup yet, click the button above to create backup\\.": "还没有任何备份，点击上方按钮创建",
+	"Are you sure to delete this backup\\?": "您确定要删除此备份吗？",
+	"Are you sure to restore this backup?\\": "您确定要恢复此备份吗？",
+	"Backup Date": "备份日期",
+	"File": "文件",
+	"Are you sure to delete this configuration\\?": "您确定要删除此配置吗？",
+	"Once you deleted this configuration\\:": "当您删除了此配置后：",
+	"All connected peers will get disconnected": "所有已连接的端点会断开",
+	"Both configuration file \\(\\.conf\\) and database table related to this configuration will get deleted": "配置文件 (.conf) 以及相关的数据库文件会被删除",
+	"Checking backups...": "检查备份中...",
+	"This configuration have ([0-9].*) backups": "此配置有$1个备份",
+	"This configuration have no backup": "此配置没有备份",
+	"If you're sure, please type in the configuration name below and click Delete": "如果您确定，请在下方输入此配置的名称并点击删除",
+	"Select All": "选择所有",
+	"Clear Selection": "清除选择",
+	"([0-9].*) Peers?": "$1 个端点",
+	"Downloading": "正在下载",
+	"Download Finished": "下载完成",
+	"Done": "完成",
+	"Are you sure to delete": "您确定要删除",
+	"Are you sure to delete this peer\\?": "您确定要删除此端点吗？"
 }