Fixed #357: Brought back IP Address and Port

But still manually restart WGDashboard is needed

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>