Finished updating locales

src/static/app/src/components/clientComponents/clientAssignedPeers.vue

@@ -41,10 +41,12 @@ const availablePeerSearchString = ref("")
 				<button class="btn btn-sm bg-primary-subtle text-primary-emphasis rounded-3 ms-auto"
 						@click="manage = !manage">
 					<template v-if="!manage">
-						<i class="bi bi-list-check me-2"></i>Manage
+						<i class="bi bi-list-check me-2"></i>
+						<LocaleText t="Manage"></LocaleText>
 					</template>
 					<template v-else>
-						<i class="bi bi-check me-2"></i>Done
+						<i class="bi bi-check me-2"></i>
+						<LocaleText t="Done"></LocaleText>
 					</template>
 				</button>
 			</div>

src/static/app/src/components/clientComponents/clientGroup.vue

@@ -28,7 +28,7 @@ onMounted(() => {
 		<div class="card-header d-flex align-items-center rounded-0">
 			<h6 class="my-2">{{ groupName }}</h6>
 			<span class="badge text-bg-primary ms-auto">
-				<LocaleText :t="getClients.length + ' Clients'"></LocaleText>
+				<LocaleText :t="getClients.length + ' Client' + (getClients.length > 1 ? 's': '')"></LocaleText>
 			</span>
 		</div>
 		<div class="card-body p-0">

src/static/app/src/components/clientComponents/clientSettingComponents/oidcSettings.vue

@@ -49,12 +49,12 @@ const toggle = async () => {
 				class="form-check-input" type="checkbox" role="switch" id="oidc_switch">
 		</div>
 	</div>
-	<div>
-		<div class="alert alert-dark rounded-3 mb-0">
-			<LocaleText t="Due to security reason, in order to edit OIDC configuration, you will need to edit "></LocaleText>
-			<code>wg-dashboard-oidc-providers.json</code> <LocaleText t="directly, then restart WGDashboard to apply the latest settings."></LocaleText>
-		</div>
-	</div>
+<!--	<div>-->
+<!--		<div class="alert alert-dark rounded-3 mb-0">-->
+<!--			<LocaleText t="Due to security reason, in order to edit OIDC configuration, you will need to edit "></LocaleText>-->
+<!--			<code>wg-dashboard-oidc-providers.json</code> <LocaleText t="directly, then restart WGDashboard to apply the latest settings."></LocaleText>-->
+<!--		</div>-->
+<!--	</div>-->
 </div>
 </template>
 

src/static/app/src/components/configurationComponents/peerAssignModalComponents/searchClients.vue

@@ -56,7 +56,7 @@ const emits = defineEmits(['assign'])
 						:class="{'active': selectedGroup === groupName}"
 						class="btn bg-primary-subtle text-primary-emphasis btn-sm me-2 rounded-3" 
 						v-for="(_, groupName) in assignmentStore.clients">
-						{{ groupName }} 
+						<LocaleText :t="groupName"></LocaleText>
 							<span class="ms-1 badge" :class="[ groupCount[groupName] > 0 ? 'bg-primary' : 'bg-secondary' ]">
 								{{ groupCount[groupName] }}
 							</span>

src/static/app/src/components/configurationComponents/peerTagComponents/peerTagColorPicker.vue

@@ -4,6 +4,7 @@ const props = defineProps(['colors', 'group'])
 const emits = defineEmits(['close', 'select', ''])
 const searchString = ref("")
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js"
+import LocaleText from "@/components/text/localeText.vue";
 const store = WireguardConfigurationsStore();
 onMounted(() => {
 	let ele = document.querySelector(".icon-grid div.active")
@@ -33,7 +34,7 @@ onMounted(() => {
 		</div>
 		<div class="p-2 border-top d-flex gap-2">
 			<button class="btn btn-sm btn-success rounded-2 ms-auto" @click="emits('close')">
-				Done
+				<LocaleText t="Done"></LocaleText>
 			</button>
 		</div>
 	</div>

src/static/app/src/components/configurationComponents/peerTagComponents/peerTagIconPicker.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import {computed, onMounted, ref} from "vue";
+import { GetLocale } from "@/utilities/locale.js"
 const props = defineProps(['group'])
 import bootstrapIcons from "bootstrap-icons/font/bootstrap-icons.json"
+import LocaleText from "@/components/text/localeText.vue";
 const emits = defineEmits(['close', 'select'])
 onMounted(() => {
 	let ele = document.querySelector(".icon-grid div.active")
@@ -29,7 +31,7 @@ const searchIcon = computed(() => {
 			<i class="bi bi-search"></i>
 		</label>
 		<input v-model="searchString"
-			   placeholder="Search Icon"
+			   :placeholder="GetLocale('Search Icon')"
 			   class="form-control form-control-sm rounded-2">
 	</div>
 	<div class="p-2 d-grid icon-grid"
@@ -47,10 +49,10 @@ const searchIcon = computed(() => {
 		<button
 			@click="group.Icon = ''"
 			class="btn btn-sm btn-secondary rounded-2 ms-auto">
-			Remove Icon
+			<LocaleText t="Remove Icon"></LocaleText>
 		</button>
 		<button class="btn btn-sm btn-success rounded-2" @click="emits('close')">
-			Done
+			<LocaleText t="Done"></LocaleText>
 		</button>
 	</div>
 </div>

src/static/app/src/components/configurationComponents/peerTagComponents/peerTagSetting.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import LocaleText from "@/components/text/localeText.vue";
+import { GetLocale } from "@/utilities/locale.js"
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js"
 import {ref} from "vue";
 const store = WireguardConfigurationsStore();
@@ -42,7 +43,7 @@ const toggleTag = () => {
 			:disabled="!edit"
 			v-model="groupName"
 			@change="group.GroupName = groupName"
-			placeholder="Tag Name"
+			:placeholder="GetLocale('Tag Name')"
 			class="form-control form-control-sm p-2 rounded-2 w-100">
 		<button
 			v-if="edit"
@@ -56,7 +57,7 @@ const toggleTag = () => {
 			style="white-space: nowrap"
 			:class="{active: !store.Filter.HiddenTags.includes(groupId)}"
 			@click="toggleTag()"
-			class="rounded-2  p-2 btn btn-sm btn-outline-primary">
+			class="rounded-2 p-2 btn btn-sm btn-outline-primary">
 			<i class="bi"
 				:class="[!store.Filter.HiddenTags.includes(groupId) ? 'bi-eye-fill':'bi-eye-slash-fill']"
 			></i>

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

@@ -91,7 +91,7 @@ export default {
 								<small>
 									<i class="bi me-2"
 									   :class="[this.wireguardConfigurationsStore.CurrentSort.order === 'asc' ? 'bi-sort-up' : 'bi-sort-down']"
-									   v-if="this.wireguardConfigurationsStore.CurrentSort.key === sv"></i>{{s}}
+									   v-if="this.wireguardConfigurationsStore.CurrentSort.key === sv"></i><LocaleText :t="s"></LocaleText>
 								</small>
 							</a>
 						</div>

src/static/app/src/components/map/osmap.vue

@@ -108,11 +108,6 @@ export default {
 					}
 				});
 				map.addLayer(vectorLayer);
-				if (this.store.Configuration.Server.dashboard_theme === 'dark'){
-					map.on('postcompose',() => {
-						document.querySelector('#map').style.filter="grayscale(80%) invert(100%)";
-					});
-				}
 			}).catch(e => {
 				this.osmAvailable = false
 			})

src/static/app/src/components/newConfigurationComponents/newConfigurationTemplates.vue

@@ -27,10 +27,10 @@ const calculateIP = ref(256)
 </script>
 
 <template>
-<div class="card">
+<div class="card rounded-3">
 	<div class="card-header">
 		<div class="d-flex align-items-center">
-			<LocaleText t="Templates"></LocaleText>
+			<LocaleText t="Subnets & Listen Ports Templates"></LocaleText>
 			<button
 				type="button"
 				@click="newTemplate()"

src/static/app/src/components/peerDetailsModalComponents/peerEndpoints.vue

@@ -139,8 +139,10 @@ const setMapCenter = (endpoint) => {
 					<table class="table table-hover" >
 						<thead>
 							<tr>
-								<th>Endpoint</th>
-								<th v-if="endpoints.geolocation">Geolocation</th>
+								<th><LocaleText t="Endpoint"></LocaleText></th>
+								<th v-if="endpoints.geolocation">
+									<LocaleText t="Geolocation"></LocaleText>
+								</th>
 							</tr>
 						</thead>
 						<tbody>

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

@@ -84,13 +84,17 @@ const view = ref("edit")
 											<a
 												@click="view = 'edit'"
 												:class="{active: view === 'edit'}"
-												class="nav-link  rounded-3" role="button">Edit</a>
+												class="nav-link  rounded-3" role="button">
+												<LocaleText t="Edit"></LocaleText>
+											</a>
 										</li>
 										<li class="nav-item">
 											<a
 												:class="{active: view === 'sessions'}"
 												@click="view = 'sessions'"
-												class="nav-link rounded-3" role="button">Sessions</a>
+												class="nav-link rounded-3" role="button">
+												<LocaleText t="Sessions"></LocaleText>
+											</a>
 										</li>
 									</ul>
 								</div>

src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/addWebHook.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {ref} from "vue";
+import { GetLocale } from "@/utilities/locale.js"
 import {fetchGet, fetchPost} from "@/utilities/fetch.js"
 import LocaleText from "@/components/text/localeText.vue";
 import { v4 } from "uuid";
@@ -26,9 +27,9 @@ if (!props.webHook){
 }
 
 const Actions = ref({
-	'peer_created': "Peer Created",
-	'peer_deleted': "Peer Deleted",
-	'peer_updated': "Peer Updated"
+	'peer_created': GetLocale("Peer Created"),
+	'peer_deleted': GetLocale("Peer Deleted"),
+	'peer_updated': GetLocale("Peer Updated")
 })
 const emits = defineEmits(['refresh', 'delete'])
 import { DashboardConfigurationStore } from "@/stores/DashboardConfigurationStore"

src/static/app/src/components/systemStatusComponents/cpuCore.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {computed, ref} from "vue";
+import LocaleText from "@/components/text/localeText.vue";
 
 const props = defineProps({
 	core_number: Number,
@@ -33,7 +34,7 @@ const squareHeight = computed(() => {
 				:class="[align ? 'end-0':'start-0']"
 			>
 				<small class="text-muted me-2">
-					Core #{{core_number + 1}}
+					<LocaleText t="Core"></LocaleText> #{{core_number + 1}}
 				</small>
 				<small class="fw-bold">
 					{{percentage}}%

src/static/app/src/css/dashboard.css

@@ -1300,4 +1300,8 @@ samp{
     transform: translateY(20px);
     opacity: 0;
     filter: blur(3px);
+}
+
+[data-bs-theme="dark"] #map{
+    filter: grayscale(80%) invert(100%)
 }

src/static/app/src/router/router.js

@@ -1,5 +1,4 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import {cookie} from "../utilities/cookie.js";
 import {fetchGet} from "@/utilities/fetch.js";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";

src/static/app/src/utilities/fetch.js

@@ -1,4 +1,3 @@
-import router from "@/router/router.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 
 const getHeaders = () => {