Adjusted OIDC template, continue working on building client side app

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import LocaleText from "@/components/text/localeText.vue";
+const emits = defineEmits(['close'])
+
+</script>
+
+<template>
+<div class="position-absolute w-100 h-100 top-0 start-0 z-1 rounded-3 d-flex p-2" style="background-color: #00000070;">
+	<div class="card m-auto rounded-3" style="width: 700px">
+		<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
+			<h4 class="mb-0">
+				<LocaleText t="Clients Settings"></LocaleText>
+			</h4>
+			<button type="button" class="btn-close ms-auto" @click="emits('close')"></button>
+		</div>
+		<div class="card-body px-4">
+			<div class="py-2">
+				<h6>
+					<LocaleText t="OpenID Connect (OIDC)"></LocaleText>
+				</h6>
+				<hr>
+				<div class="form-check form-switch">
+					<label class="form-check-label" for="oidc_switch">
+						<LocaleText t="Enable"></LocaleText>
+					</label>
+					<input class="form-check-input" type="checkbox" role="switch" id="oidc_switch">
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -91,7 +91,10 @@ const router = createRouter({
 						{
 							name: "Client Viewer",
 							path: ':id',
-							component: () => import('@/components/clientComponents/clientViewer.vue')
+							component: () => import('@/components/clientComponents/clientViewer.vue'),
+							meta: {
+								title: "Clients"
+							},
 						}
 					]
 				},
@@ -155,11 +158,9 @@ router.beforeEach(async (to, from, next) => {
 	const dashboardConfigurationStore = DashboardConfigurationStore();
 
 	if (to.meta.title){
-		if (to.params.id){
-			document.title = to.params.id + " | WGDashboard";
-		}else{
-			document.title = to.meta.title + " | WGDashboard";
-		}
+		document.title = to.meta.title + " | WGDashboard";
+	}else if(to.params.id){
+		document.title = to.params.id + " | WGDashboard";
 	}else{
 		document.title = "WGDashboard"
 	}

src/static/app/src/views/clients.vue

@@ -7,13 +7,14 @@ import {GetLocale} from "@/utilities/locale.js";
 import ClientGroup from "@/components/clientComponents/clientGroup.vue";
 import { fetchGet } from "@/utilities/fetch.js"
 import {useRoute} from "vue-router";
+import ClientSettings from "@/components/clientComponents/clientSettings.vue";
 
 await assignmentStore.getClients();
 assignmentStore.getAllConfigurationsPeers();
 
 const searchString = ref("")
 const route = useRoute()
-
+const settings = ref(false)
 const oidc = computed(() => {
 	return Object.fromEntries(
 		Object.entries(assignmentStore.clients).filter(
@@ -24,8 +25,12 @@ const oidc = computed(() => {
 </script>
 
 <template>
-	<div class="text-body w-100 h-100 pb-2">
+	<div class="text-body w-100 h-100 pb-2 position-relative">
+
 		<div class="w-100 h-100 card rounded-3">
+			<Transition name="zoom">
+				<ClientSettings v-if="settings"></ClientSettings>
+			</Transition>
 			<div class="border-bottom z-0">
 				<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">
 					<label for="searchClient"><i class="bi bi-search me-2"></i></label>
@@ -35,7 +40,7 @@ const oidc = computed(() => {
 						class="form-control rounded-3 form-control-sm"
 						:placeholder="GetLocale('Search Clients...')"
 						type="email" style="width: auto;">
-					<button class="btn btn-body ms-auto bg-body-secondary rounded-3 btn-sm">
+					<button class="btn btn-body ms-auto bg-body-secondary rounded-3 btn-sm" @click="settings = !settings">
 						<i class="bi bi-gear-fill me-2"></i>
 						<LocaleText t="Settings"></LocaleText>
 					</button>