Просмотр исходного кода

Merge branch 'next' into fix-argument-validation-on-bindings

James Read 6 месяцев назад
Родитель
Сommit
257463997e

+ 80 - 85
frontend/package-lock.json

@@ -12,12 +12,12 @@
 				"@connectrpc/connect": "^2.1.1",
 				"@connectrpc/connect-web": "^2.1.1",
 				"@hugeicons/core-free-icons": "^3.1.0",
-				"@hugeicons/vue": "^1.0.3",
+				"@hugeicons/vue": "^1.0.4",
 				"@vitejs/plugin-vue": "^6.0.3",
 				"@xterm/addon-fit": "^0.11.0",
 				"@xterm/xterm": "^6.0.0",
 				"iconify-icon": "^3.0.2",
-				"picocrank": "^1.9.1",
+				"picocrank": "^1.10.0",
 				"standard": "^17.1.2",
 				"unplugin-vue-components": "^30.0.0",
 				"vite": "^7.3.0",
@@ -861,9 +861,10 @@
 			"license": "MIT"
 		},
 		"node_modules/@hugeicons/vue": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/@hugeicons/vue/-/vue-1.0.3.tgz",
-			"integrity": "sha512-DF9A277Ej4Eahu11Hkd3v6V0eZ1NHWZWs9OOByJaxGekgG8q7DAbkhltIo3bqsoxVprxaKSX3Mmn5a2dyzLsHA==",
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@hugeicons/vue/-/vue-1.0.4.tgz",
+			"integrity": "sha512-OtFEXbyW5jYUig98C/n/HygktLvfF5Ga6nN6gK8R0E0jCrVw3EfgoZZVXqo+xGxyIjH5R1wdbg6nJrtf6mzLKQ==",
+			"license": "MIT",
 			"peerDependencies": {
 				"vue": "^2.6.0 || ^3.0.0"
 			}
@@ -1344,39 +1345,39 @@
 			}
 		},
 		"node_modules/@vue/compiler-core": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.24.tgz",
-			"integrity": "sha512-eDl5H57AOpNakGNAkFDH+y7kTqrQpJkZFXhWZQGyx/5Wh7B1uQYvcWkvZi11BDhscPgj8N7XV3oRwiPnx1Vrig==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.26.tgz",
+			"integrity": "sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.28.5",
-				"@vue/shared": "3.5.24",
-				"entities": "^4.5.0",
+				"@vue/shared": "3.5.26",
+				"entities": "^7.0.0",
 				"estree-walker": "^2.0.2",
 				"source-map-js": "^1.2.1"
 			}
 		},
 		"node_modules/@vue/compiler-dom": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.24.tgz",
-			"integrity": "sha512-1QHGAvs53gXkWdd3ZMGYuvQFXHW4ksKWPG8HP8/2BscrbZ0brw183q2oNWjMrSWImYLHxHrx1ItBQr50I/q2zw==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.26.tgz",
+			"integrity": "sha512-y1Tcd3eXs834QjswshSilCBnKGeQjQXB6PqFn/1nxcQw4pmG42G8lwz+FZPAZAby6gZeHSt/8LMPfZ4Rb+Bd/A==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-core": "3.5.24",
-				"@vue/shared": "3.5.24"
+				"@vue/compiler-core": "3.5.26",
+				"@vue/shared": "3.5.26"
 			}
 		},
 		"node_modules/@vue/compiler-sfc": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.24.tgz",
-			"integrity": "sha512-8EG5YPRgmTB+YxYBM3VXy8zHD9SWHUJLIGPhDovo3Z8VOgvP+O7UP5vl0J4BBPWYD9vxtBabzW1EuEZ+Cqs14g==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
+			"integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.28.5",
-				"@vue/compiler-core": "3.5.24",
-				"@vue/compiler-dom": "3.5.24",
-				"@vue/compiler-ssr": "3.5.24",
-				"@vue/shared": "3.5.24",
+				"@vue/compiler-core": "3.5.26",
+				"@vue/compiler-dom": "3.5.26",
+				"@vue/compiler-ssr": "3.5.26",
+				"@vue/shared": "3.5.26",
 				"estree-walker": "^2.0.2",
 				"magic-string": "^0.30.21",
 				"postcss": "^8.5.6",
@@ -1384,13 +1385,13 @@
 			}
 		},
 		"node_modules/@vue/compiler-ssr": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.24.tgz",
-			"integrity": "sha512-trOvMWNBMQ/odMRHW7Ae1CdfYx+7MuiQu62Jtu36gMLXcaoqKvAyh+P73sYG9ll+6jLB6QPovqoKGGZROzkFFg==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.26.tgz",
+			"integrity": "sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-dom": "3.5.24",
-				"@vue/shared": "3.5.24"
+				"@vue/compiler-dom": "3.5.26",
+				"@vue/shared": "3.5.26"
 			}
 		},
 		"node_modules/@vue/devtools-api": {
@@ -1400,53 +1401,53 @@
 			"license": "MIT"
 		},
 		"node_modules/@vue/reactivity": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.24.tgz",
-			"integrity": "sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
+			"integrity": "sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/shared": "3.5.24"
+				"@vue/shared": "3.5.26"
 			}
 		},
 		"node_modules/@vue/runtime-core": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.24.tgz",
-			"integrity": "sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.26.tgz",
+			"integrity": "sha512-xJWM9KH1kd201w5DvMDOwDHYhrdPTrAatn56oB/LRG4plEQeZRQLw0Bpwih9KYoqmzaxF0OKSn6swzYi84e1/Q==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/reactivity": "3.5.24",
-				"@vue/shared": "3.5.24"
+				"@vue/reactivity": "3.5.26",
+				"@vue/shared": "3.5.26"
 			}
 		},
 		"node_modules/@vue/runtime-dom": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.24.tgz",
-			"integrity": "sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.26.tgz",
+			"integrity": "sha512-XLLd/+4sPC2ZkN/6+V4O4gjJu6kSDbHAChvsyWgm1oGbdSO3efvGYnm25yCjtFm/K7rrSDvSfPDgN1pHgS4VNQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/reactivity": "3.5.24",
-				"@vue/runtime-core": "3.5.24",
-				"@vue/shared": "3.5.24",
-				"csstype": "^3.1.3"
+				"@vue/reactivity": "3.5.26",
+				"@vue/runtime-core": "3.5.26",
+				"@vue/shared": "3.5.26",
+				"csstype": "^3.2.3"
 			}
 		},
 		"node_modules/@vue/server-renderer": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.24.tgz",
-			"integrity": "sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.26.tgz",
+			"integrity": "sha512-TYKLXmrwWKSodyVuO1WAubucd+1XlLg4set0YoV+Hu8Lo79mp/YMwWV5mC5FgtsDxX3qo1ONrxFaTP1OQgy1uA==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-ssr": "3.5.24",
-				"@vue/shared": "3.5.24"
+				"@vue/compiler-ssr": "3.5.26",
+				"@vue/shared": "3.5.26"
 			},
 			"peerDependencies": {
-				"vue": "3.5.24"
+				"vue": "3.5.26"
 			}
 		},
 		"node_modules/@vue/shared": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.24.tgz",
-			"integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.26.tgz",
+			"integrity": "sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==",
 			"license": "MIT"
 		},
 		"node_modules/@xterm/addon-fit": {
@@ -1995,9 +1996,9 @@
 			}
 		},
 		"node_modules/csstype": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+			"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
 			"license": "MIT"
 		},
 		"node_modules/data-view-buffer": {
@@ -2153,9 +2154,9 @@
 			"dev": true
 		},
 		"node_modules/entities": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
+			"integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==",
 			"license": "BSD-2-Clause",
 			"engines": {
 				"node": ">=0.12"
@@ -2960,9 +2961,9 @@
 			}
 		},
 		"node_modules/femtocrank": {
-			"version": "2.4.11",
-			"resolved": "https://registry.npmjs.org/femtocrank/-/femtocrank-2.4.11.tgz",
-			"integrity": "sha512-IDEcr8+w5/ux58F2N1heaxse7BvjJ0mJfJcCGx15QZCn8wi+hiQaIBud0ctlzRR3+SPmy7UCY5Ym+ZeyE4Bslg==",
+			"version": "2.4.12",
+			"resolved": "https://registry.npmjs.org/femtocrank/-/femtocrank-2.4.12.tgz",
+			"integrity": "sha512-X2a4WVG1ADGjQcULUyH2FJ4njJNZobfP+iPO1MpAEtWRyVEDxps6dmktbOb3igoyCxNObF0T0uKwUC7zV21C0A==",
 			"license": "AGPL-3.0"
 		},
 		"node_modules/file-entry-cache": {
@@ -4606,27 +4607,21 @@
 			"license": "ISC"
 		},
 		"node_modules/picocrank": {
-			"version": "1.9.1",
-			"resolved": "https://registry.npmjs.org/picocrank/-/picocrank-1.9.1.tgz",
-			"integrity": "sha512-57yoG8vBJ88CXBvFhv7SKqJaDXornGGOuvFewhKfCWEt+8+rYLIu6Hya+5811IrLHbeJWBd866AqmkBYvi0wZw==",
+			"version": "1.10.0",
+			"resolved": "https://registry.npmjs.org/picocrank/-/picocrank-1.10.0.tgz",
+			"integrity": "sha512-rpuFopcko5jKuQpnqpvN0Umg9M2qmDI6Z/tVzbnT9PSplwJmtw9wTjgDHyQXujoBBULyurRqtIeQKDPNFLlHOQ==",
 			"license": "ISC",
 			"dependencies": {
-				"@hugeicons/core-free-icons": "^2.0.0",
-				"@hugeicons/vue": "^1.0.3",
-				"@vitejs/plugin-vue": "^6.0.2",
-				"femtocrank": "^2.4.11",
+				"@hugeicons/core-free-icons": "^3.1.0",
+				"@hugeicons/vue": "^1.0.4",
+				"@vitejs/plugin-vue": "^6.0.3",
+				"femtocrank": "^2.4.12",
 				"unplugin-vue-components": "^30.0.0",
-				"vite": "^7.2.4",
-				"vue": "^3.5.24",
-				"vue-router": "^4.6.3"
+				"vite": "^7.3.0",
+				"vue": "^3.5.26",
+				"vue-router": "^4.6.4"
 			}
 		},
-		"node_modules/picocrank/node_modules/@hugeicons/core-free-icons": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@hugeicons/core-free-icons/-/core-free-icons-2.0.0.tgz",
-			"integrity": "sha512-OSfv5k0iB0yG61dcfK7jcf00AIK8EXyQOgtcNJzSBFvm88n9VOelkxihZHJnNwDUFpO/jZI3vZSVp6i1dmRvJQ==",
-			"license": "MIT"
-		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -6230,16 +6225,16 @@
 			}
 		},
 		"node_modules/vue": {
-			"version": "3.5.24",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
-			"integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
+			"version": "3.5.26",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
+			"integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-dom": "3.5.24",
-				"@vue/compiler-sfc": "3.5.24",
-				"@vue/runtime-dom": "3.5.24",
-				"@vue/server-renderer": "3.5.24",
-				"@vue/shared": "3.5.24"
+				"@vue/compiler-dom": "3.5.26",
+				"@vue/compiler-sfc": "3.5.26",
+				"@vue/runtime-dom": "3.5.26",
+				"@vue/server-renderer": "3.5.26",
+				"@vue/shared": "3.5.26"
 			},
 			"peerDependencies": {
 				"typescript": "*"

+ 2 - 2
frontend/package.json

@@ -25,12 +25,12 @@
 		"@connectrpc/connect": "^2.1.1",
 		"@connectrpc/connect-web": "^2.1.1",
 		"@hugeicons/core-free-icons": "^3.1.0",
-		"@hugeicons/vue": "^1.0.3",
+		"@hugeicons/vue": "^1.0.4",
 		"@vitejs/plugin-vue": "^6.0.3",
 		"@xterm/addon-fit": "^0.11.0",
 		"@xterm/xterm": "^6.0.0",
 		"iconify-icon": "^3.0.2",
-		"picocrank": "^1.9.1",
+		"picocrank": "^1.10.0",
 		"standard": "^17.1.2",
 		"unplugin-vue-components": "^30.0.0",
 		"vite": "^7.3.0",

+ 18 - 14
frontend/resources/vue/App.vue

@@ -19,7 +19,9 @@
     </Header>
 
     <div id="layout">
-        <Sidebar ref="sidebar" id = "mainnav" v-if="showNavigation" />
+        <Navigation ref="navigation" id="mainnav" v-if="showNavigation">
+            <Sidebar ref="sidebar" id = "mainnav" v-if="showNavigation" />
+        </Navigation>
 
 		<div id="content" initial-martial-complete="{{ hasLoaded }}">
             <main title="Main content">
@@ -77,6 +79,7 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import Sidebar from 'picocrank/vue/components/Sidebar.vue';
+import Navigation from 'picocrank/vue/components/Navigation.vue';
 import Header from 'picocrank/vue/components/Header.vue';
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Menu01Icon } from '@hugeicons/core-free-icons'
@@ -91,6 +94,7 @@ const { t, locale } = useI18n();
 const router = useRouter();
 
 const sidebar = ref(null);
+const navigation = ref(null);
 const username = ref('notset');
 const isLoggedIn = ref(false);
 const serverConnection = ref(true);
@@ -181,7 +185,7 @@ function updateHeaderFromInit() {
         showLoginLink.value = false
     }
 
-    renderSidebar()
+    renderNavigation()
 
     if (window.initResponse.loginRequired) {
         router.push('/login')
@@ -189,19 +193,19 @@ function updateHeaderFromInit() {
     }
 }
 
-function renderSidebar() {
-    if (!sidebar.value) {
+function renderNavigation() {
+    if (!navigation.value) {
         return
     }
 
     const rootDashboards = window.initResponse?.rootDashboards || []
 
-    if (typeof sidebar.value.clear === 'function') {
-        sidebar.value.clear()
+    if (typeof navigation.value.clear === 'function') {
+        navigation.value.clear()
     }
 
     for (const rootDashboard of rootDashboards) {
-        sidebar.value.addNavigationLink({
+        navigation.value.addNavigationLink({
             id: rootDashboard,
             name: rootDashboard,
             title: rootDashboard,
@@ -210,15 +214,15 @@ function renderSidebar() {
         })
     }
 
-    sidebar.value.addSeparator()
-    sidebar.value.addRouterLink('Entities', t('nav.entities'))
+    navigation.value.addSeparator()
+    navigation.value.addRouterLink('Entities', t('nav.entities'))
 
     if (showLogs.value) {
-        sidebar.value.addRouterLink('Logs', t('nav.logs'))
+        navigation.value.addRouterLink('Logs', t('nav.logs'))
     }
 
     if (showDiagnostics.value) {
-        sidebar.value.addRouterLink('Diagnostics', t('nav.diagnostics'))
+        navigation.value.addRouterLink('Diagnostics', t('nav.diagnostics'))
     }
 }
 
@@ -257,9 +261,9 @@ function changeLanguage() {
         languagePreference.value = selectedLanguage.value
     }
 
-    // Update sidebar with new translations
-    if (sidebar.value) {
-        renderSidebar()
+    // Update navigation with new translations
+    if (navigation.value) {
+        renderNavigation()
     }
 
     closeLanguageDialog()

+ 38 - 1
frontend/resources/vue/components/DashboardComponentDirectory.vue

@@ -1,11 +1,13 @@
 <template>
     <button @click="navigateToDirectory">
-        {{ component.title }}
+        <span class="icon" v-html="unicodeIcon"></span>
+        <span class="title">{{ component.title }}</span>
     </button>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router'
+import { computed } from 'vue'
 
 const router = useRouter()
 
@@ -16,6 +18,18 @@ const props = defineProps({
     }
 })
 
+function getUnicodeIcon(icon) {
+    if (icon === '' || !icon) {
+        return '&#x1f4c1;' // Default folder icon
+    } else {
+        return unescape(icon)
+    }
+}
+
+const unicodeIcon = computed(() => {
+    return getUnicodeIcon(props.component.icon)
+})
+
 function navigateToDirectory() {
     const params = { title: props.component.title }
     
@@ -34,9 +48,18 @@ function navigateToDirectory() {
 }
 
 button {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    padding: 0.5em;
     box-shadow: 0 0 .6em #aaa;
     background-color: #fff;
     border-radius: .7em;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: .85em;
 }
 
 button:hover {
@@ -44,16 +67,30 @@ button:hover {
     border-color: #999;
 }
 
+button .icon {
+    font-size: 3em;
+    flex-grow: 1;
+    align-content: center;
+}
+
+button .title {
+    font-weight: 500;
+    padding: 0.2em;
+}
+
 @media (prefers-color-scheme: dark) {
     button {
         box-shadow: 0 0 .6em #000;
         background-color: #111;
         border-color: #000;
+        color: #fff;
     }
 
     button:hover {
         background-color: #222;
         border-color: #000;
+        box-shadow: 0 0 6px #444;
+        color: #fff;
     }
 }
 

+ 13 - 2
service/internal/auth/otoauth2/restapi_auth_oauth2.go

@@ -263,10 +263,21 @@ func (h *OAuth2Handler) HandleOAuthCallback(w http.ResponseWriter, r *http.Reque
 		Timeout: clientSettings.Timeout,
 	}
 
-	userinfo := getUserInfo(h.cfg, userInfoClient, h.cfg.AuthOAuth2Providers[registeredState.providerName])
+	userinfo := getUserInfo(h.cfg, userInfoClient, providerConfig)
 
 	h.registeredStates[state].Username = userinfo.Username
-	h.registeredStates[state].Usergroup = userinfo.Usergroup
+	
+	usergroup := userinfo.Usergroup
+	if providerConfig != nil && providerConfig.AddToUsergroup != "" {
+		// Append configured usergroup name if addToUsergroup is set
+		if usergroup != "" {
+			usergroup = usergroup + " " + providerConfig.AddToUsergroup
+		} else {
+			usergroup = providerConfig.AddToUsergroup
+		}
+	}
+	
+	h.registeredStates[state].Usergroup = usergroup
 
 	http.Redirect(w, r, "/", http.StatusFound)
 }

+ 1 - 0
service/internal/config/config.go

@@ -184,6 +184,7 @@ type OAuth2Provider struct {
 	InsecureSkipVerify bool     `koanf:"insecureSkipVerify"`
 	CallbackTimeout    int      `koanf:"callbackTimeout"`
 	CertBundlePath     string   `koanf:"certBundlePath"`
+	AddToUsergroup     string   `koanf:"addToUsergroup"`
 }
 
 type NavigationLink struct {