Fixed #357: Brought back IP Address and Port

But still manually restart WGDashboard is needed

src/dashboard.py

@@ -1228,6 +1228,8 @@ class DashboardConfig:
                     self.__config[section][key] = "true"
                 else:
                     self.__config[section][key] = "false"
+            if type(value) in [int, float]:
+                self.__config[section][key] = str(value)
             else:
                 self.__config[section][key] = value
             return self.SaveConfig(), ""

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

@@ -31,7 +31,8 @@ export default {
 		this.value = this.store.Configuration.Account[this.targetData];
 	},
 	methods:{
-		async useValidation(){
+		async useValidation(e){
+			
 			if (this.changed){
 				this.updating = true
 				await fetchPost("/api/updateDashboardConfigurationItem", {

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

@@ -0,0 +1,116 @@
+<script>
+import LocaleText from "@/components/text/localeText.vue";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import {v4} from "uuid";
+import {fetchPost} from "@/utilities/fetch.js";
+
+export default {
+	name: "dashboardIPPortInput" ,
+	components: {LocaleText},
+	setup(){
+		const store = DashboardConfigurationStore();
+		return {store};
+	},
+	data(){
+		return{
+			ipAddress:"",
+			port: 0,
+			invalidFeedback: "",
+			showInvalidFeedback: false,
+			isValid: false,
+			timeout: undefined,
+			changed: false,
+			updating: false,
+		}
+	},
+	mounted() {
+		this.ipAddress = this.store.Configuration.Server.app_ip
+		this.port = this.store.Configuration.Server.app_port
+	},
+	methods: {
+		async useValidation(e, targetData, value){
+			if (this.changed){
+				this.updating = true
+				await fetchPost("/api/updateDashboardConfigurationItem", {
+					section: "Server",
+					key: targetData,
+					value: value
+				}, (res) => {
+					if (res.status){
+						e.target.classList.add("is-valid")
+						this.showInvalidFeedback = false;
+						this.store.Configuration.Server[targetData] = value
+						clearTimeout(this.timeout)
+						this.timeout = setTimeout(() => {
+							e.target.classList.remove("is-valid")
+						}, 5000);
+					}else{
+						this.isValid = false;
+						this.showInvalidFeedback = true;
+						this.invalidFeedback = res.message
+					}
+					this.changed = false
+					this.updating = false;
+				})
+			}
+		}
+	}
+}
+</script>
+
+<template>
+<div class="card mb-4 shadow rounded-3">
+	<p class="card-header">
+		<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
+	</p>
+	<div class="card-body">
+		<div class="row gx-3">
+			<div class="col-sm">
+				<div class="form-group mb-2">
+					<label for="input_dashboard_ip" class="text-muted mb-1">
+						<strong><small>
+							<LocaleText t="IP Address / Hostname"></LocaleText>
+						</small></strong>
+					</label>
+					<input type="text" class="form-control"
+					       :class="{'is-invalid': showInvalidFeedback, 'is-valid': isValid}"
+					       id="input_dashboard_ip"
+					       v-model="this.ipAddress"
+					       @keydown="this.changed = true"
+					       @blur="useValidation($event, 'app_ip', this.ipAddress)"
+					       :disabled="this.updating"
+					>
+					<div class="invalid-feedback">{{this.invalidFeedback}}</div>
+				</div>
+			</div>
+			<div class="col-sm">
+				<div class="form-group mb-2">
+					<label for="input_dashboard_ip" class="text-muted mb-1">
+						<strong><small>
+							<LocaleText t="Listen Port"></LocaleText>
+						</small></strong>
+					</label>
+					<input type="number" class="form-control"
+					       :class="{'is-invalid': showInvalidFeedback, 'is-valid': isValid}"
+					       id="input_dashboard_ip"
+					       v-model="this.port"
+					       @keydown="this.changed = true"
+					       @blur="useValidation($event, 'app_port', this.port)"
+					       :disabled="this.updating"
+					>
+					<div class="invalid-feedback">{{this.invalidFeedback}}</div>
+				</div>
+			</div>
+		</div>
+		<div class="px-2 py-1 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 d-inline-block mt-1 mb-2">
+			<small><i class="bi bi-exclamation-triangle-fill me-2"></i>
+				<LocaleText t="Manual restart of WGDashboard is needed to apply changes on IP Address and Listen Port"></LocaleText>
+			</small>
+		</div>
+	</div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -59,7 +59,7 @@ export default {
 					</span>
 					
 				</button>
-				<ul class="dropdown-menu rounded-3 shadow" style="width: 500px">
+				<ul class="dropdown-menu rounded-3 shadow">
 					<li v-for="x in this.languages">
 						<a class="dropdown-item d-flex align-items-center" role="button"
 							@click="this.changeLanguage(x.lang_id)"
@@ -82,5 +82,8 @@ export default {
 </template>
 
 <style scoped>
+.dropdown-menu{
+	width: 100%;
+}
 
 </style>

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

@@ -13,11 +13,13 @@ import DashboardAPIKeys from "@/components/settingsComponent/dashboardAPIKeys.vu
 import AccountSettingsMFA from "@/components/settingsComponent/accountSettingsMFA.vue";
 import LocaleText from "@/components/text/localeText.vue";
 import DashboardLanguage from "@/components/settingsComponent/dashboardLanguage.vue";
+import DashboardIPPortInput from "@/components/settingsComponent/dashboardIPPortInput.vue";
 
 export default {
 	name: "settings",
 	methods: {ipV46RegexCheck},
 	components: {
+		DashboardIPPortInput,
 		DashboardLanguage,
 		LocaleText,
 		AccountSettingsMFA,
@@ -39,8 +41,7 @@ export default {
 			<h3 class="mb-3 text-body">
 				<LocaleText t="Settings"></LocaleText>
 			</h3>
-			<DashboardTheme></DashboardTheme>
-			<DashboardLanguage></DashboardLanguage>
+			
 			<div class="card mb-4 shadow rounded-3">
 				<p class="card-header">
 					<LocaleText t="Peers Default Settings"></LocaleText>
@@ -69,6 +70,19 @@ export default {
 					</DashboardSettingsInputWireguardConfigurationPath>
 				</div>
 			</div>
+			<hr class="mb-4">
+			<div class="row gx-4">
+				<div class="col-sm">
+					<DashboardTheme></DashboardTheme>
+				</div>
+				<div class="col-sm">
+					<DashboardLanguage></DashboardLanguage>
+				</div>
+
+			</div>
+			<DashboardIPPortInput></DashboardIPPortInput>
+			
+			
 			<div class="card mb-4 shadow rounded-3">
 				<p class="card-header">
 					<LocaleText t="WGDashboard Account Settings"></LocaleText>

src/static/css/dashboard.css

@@ -24,6 +24,12 @@
     font-weight: bold;
 }
 
+[data-bs-theme="dark"]{
+    hr{
+        border-color: #efefef;
+    }
+}
+
 /*
  * Sidebar
  */

src/static/locale/de.json

@@ -235,5 +235,6 @@
   "IP Address/CIDR is invalid": "IP-Adresse/CIDR ist ungültig",
   "IP Address": "IP-Adresse",
   "Enter IP Address / Hostname": "IP-Adresse/Hostnamen eingeben",
+  "IP Address / Hostname": "IP-Adresse/Hostnamen",
   "Count": "Zählen"
 }

src/static/locale/ru.json

@@ -235,6 +235,7 @@
 	"IP Address/CIDR is invalid": "IP-адрес/CIDR недействителен",
 	"IP Address": "IP-адрес",
 	"Enter IP Address / Hostname": "Введите IP-адрес/имя хоста",
+	"IP Address / Hostname": "IP-адрес/имя хоста",
 	"Count": "Считать"
 
 }

src/static/locale/uk.json

@@ -235,6 +235,7 @@
 	"IP Address/CIDR is invalid": "IP-адреса/CIDR невірна",
 	"IP Address": "IP-адреса",
 	"Enter IP Address / Hostname": "Введіть IP-адресу / ім’я хоста",
+	"IP Address / Hostname": "IP-адресу / ім’я хоста",
 	"Count": "Граф"
 
 }

src/static/locale/zh-CN.json

@@ -235,10 +235,12 @@
 	"IP Address/CIDR is invalid": "IP 地址/前缀长度格式错误",
 	"IP Address": "IP 地址",
 	"Enter IP Address / Hostname": "输入 IP 地址 / 域名",
+	"IP Address / Hostname": "IP 地址 / 域名",
+	"Dashboard IP Address \\& Listen Port": "面板 IP地址 & 监听端口", 
 	"Count": "数量",
 	"Geolocation": "地理位置",
 	"Is Alive": "在线",
 	"Average / Min / Max Round Trip Time": "平均 / 最低 / 最高来回通讯延迟",
-	"Sent / Received / Lost Package": "发送 / 接收 / 丢失数据包"
-
+	"Sent / Received / Lost Package": "发送 / 接收 / 丢失数据包",
+	"Manual restart of WGDashboard is needed to apply changes on IP Address and Listen Port": "更改 IP 地址或监听端口后需要手动重启 WGDashboard 以使用最新的设置"
 }

src/static/locale/zh-HK.json

@@ -235,11 +235,12 @@
 	"IP Address/CIDR is invalid": "IP 地址/前綴長度格式錯誤",
 	"IP Address": "IP 地址",
 	"Enter IP Address / Hostname": "输入 IP 地址 / 域名",
+	"IP Address / Hostname": "IP 地址 / 域名",
 	"Count": "數量",
 	"Geolocation": "地理位置",
 	"Is Alive": "在線",
 	"Average / Min / Max Round Trip Time": "平均 / 最低 / 最高來回通信延遲",
-	"Sent / Received / Lost Package": "發送 / 接收 / 遺失數據包"
-
+	"Sent / Received / Lost Package": "發送 / 接收 / 遺失數據包",
+	"Manual restart of WGDashboard is needed to apply changes on IP Address and Listen Port": "更改 IP 位址或監聽埠後需要手動重新啟動 WGDashboard 以使用最新的設置"
 
 }