Added some update :)

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

@@ -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(`/configuration/${this.newConfiguration.ConfigurationName}/peers`)
-							this.$router.push('/')
-						}, 1000)
 					}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>
-									<li>Configuration name can only contain 15 lower/uppercase alphabet, numbers, "_"(underscore), "="(equal), "+"(plus), "."(period/dot), "-"(dash/hyphen)</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>

src/static/locale/languages.json

@@ -1,10 +0,0 @@
-{
-	"WireGuard Configurations": {
-		"zh-CN": "WireGuard 配置",
-		"zh-HK": "WireGuard 配置"
-	},
-	"Configuration": {
-		"zh-CN": "配置",
-		"zh-HK": "配置"
-	}
-}

src/static/locale/zh-CN.json

@@ -146,6 +146,7 @@
 	"You can add up to (.*) peers": "您最多可以添加 $1 个端点",
 	"Use your own Private and Public Key": "使用您自己的秘钥和公钥",
 	"Enter IP Address/CIDR": "输入 IP 地址/前缀长度",
+	"IP Address/CIDR": "IP 地址/前缀长度",
 	"or": "或",
 	"Pick Available IP": "选择可用的 IP 地址",
 	"No available IP containing": "没有可用的 IP 地址含有 ",
@@ -223,5 +224,13 @@
 	"Please provide ipAddress": "请提供 ipAddress",
 	"Dashboard Language": "面板语言",
 	"Dashboard language update failed": "面板语言更新失败",
-	"Peer Remote Endpoint": "端点末端地址"
+	"Peer Remote Endpoint": "端点末端地址",
+	"New Configuration": "新配置",
+	"Configuration Name": "配置名称",
+	"Configuration name is invalid. Possible reasons:": "配置名称不正确。可能的原因：",
+	"Configuration name already exist\\.": "配置名称已存在。",
+	"Configuration name can only contain 15 lower/uppercase alphabet, numbers, underscore, equal sign, plus sign, period and hyphen\\.": "配置名称只能含有15个小/大写英文字母，数字，下划线，等于号，加号，小数点或短横线。",
+	"Invalid Port": "错误的端口",
+	"Save Configuration": "保存配置",
+	"IP Address/CIDR is invalid": "IP 地址/前缀长度格式错误"
 }

src/static/locale/zh-HK.json

@@ -146,6 +146,7 @@
 	"You can add up to (.*) peers": "您最多可以添加 $1 個端點",
 	"Use your own Private and Public Key": "使用您自己的秘鑰和公鑰",
 	"Enter IP Address/CIDR": "輸入 IP 地址/前綴長度",
+	"IP Address/CIDR": "IP 地址/前綴長度",
 	"or": "或",
 	"Pick Available IP": "選擇可用的 IP 地址",
 	"No available IP containing": "沒有可用的 IP 地址含有 ",
@@ -223,5 +224,13 @@
 	"Please provide ipAddress": "請提供 ipAddress",
 	"Dashboard Language": "面板語言",
 	"Dashboard language update failed": "面板語言更新失敗",
-	"Peer Remote Endpoint": "端點末端地址"
+	"Peer Remote Endpoint": "端點末端地址",
+	"New Configuration": "新配置",
+	"Configuration Name": "配置名稱",
+	"Configuration name is invalid. Possible reasons:": "配置名稱不正確。可能的原因：",
+	"Configuration name already exist\\.": "配置名稱已存在。",
+	"Configuration name can only contain 15 lower/uppercase alphabet, numbers, underscore, equal sign, plus sign, period and hyphen\\.": "配置名稱只能含有15個小/大寫英文字母，數字，下划線，等於號，加號，小數點或短橫線。",
+	"Invalid Port": "錯誤的端口",
+	"Save Configuration": "保存配置",
+	"IP Address/CIDR is invalid": "IP 地址/前綴長度格式錯誤"
 }