From 6b4d4ca98586442298d4a987a83a3c5345063053 Mon Sep 17 00:00:00 2001 From: phil Date: Sat, 25 Jan 2025 18:31:30 +0100 Subject: [PATCH 01/38] Add missing tsconfig.node.json --- tsconfig.node.json | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 tsconfig.node.json diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..4c399c2 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,18 @@ +{ + "extends": "@tsconfig/node22/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} From 6c05d72430dd02a63423a5e940cff6b9f58d2897 Mon Sep 17 00:00:00 2001 From: phil Date: Sat, 25 Jan 2025 18:58:42 +0100 Subject: [PATCH 02/38] Add missing keyclock-js dependency --- package.json | 1 + pnpm-lock.yaml | 18 +++++++++++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 7aae403..0bd3683 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "@dsb-norge/vue-keycloak-js": "3.0.1", "axios": "1.7.9", + "keycloak-js": "^26.1.0", "vue": "3.5.13" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e9f286..3a3a2ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,11 +9,14 @@ importers: .: dependencies: '@dsb-norge/vue-keycloak-js': - specifier: 3.0.0 - version: 3.0.0(vue@3.5.13(typescript@5.6.3)) + specifier: 3.0.1 + version: 3.0.1(vue@3.5.13(typescript@5.6.3)) axios: specifier: 1.7.9 version: 1.7.9 + keycloak-js: + specifier: ^26.1.0 + version: 26.1.0 vue: specifier: 3.5.13 version: 3.5.13(typescript@5.6.3) @@ -191,8 +194,8 @@ packages: resolution: {integrity: sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==} engines: {node: '>=6.9.0'} - '@dsb-norge/vue-keycloak-js@3.0.0': - resolution: {integrity: sha512-PcANEYbCRWtvMLg9wPpGuBDR5wrvfC4nkOawGsF79zm6RQ6IfxGIpxWHoZSXEcRaYdPchkT4gCZ+dyp8wb7ccA==} + '@dsb-norge/vue-keycloak-js@3.0.1': + resolution: {integrity: sha512-uJ4deVw4Vyp2FrG0JjYAy8NE6zIlIIl/92mQDlSGH+9kc758hBdrCdZSD3aVzv/Lwh07tpOXsx4jXzbVQkPfkA==} peerDependencies: vue: '>=3.0.0' @@ -803,6 +806,9 @@ packages: keycloak-js@26.0.7: resolution: {integrity: sha512-vKCk1ISMiouYRLjMzi5fKp58RnYxKEBS29BoDgVfYwVW94IXchj9jLqBvIet31VD1v79l3WaWT+WMX7fH8O4wA==} + keycloak-js@26.1.0: + resolution: {integrity: sha512-3CTelLNADK6sIxGHCQmKlT3ezcIp8O3Iimmg+ybS78RHy+HAUkkoBaW/YuHGdYkfEDMBlrqD3u+CQ4vLsrmyFA==} + kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} @@ -1298,7 +1304,7 @@ snapshots: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 - '@dsb-norge/vue-keycloak-js@3.0.0(vue@3.5.13(typescript@5.6.3))': + '@dsb-norge/vue-keycloak-js@3.0.1(vue@3.5.13(typescript@5.6.3))': dependencies: keycloak-js: 26.0.7 vue: 3.5.13(typescript@5.6.3) @@ -1825,6 +1831,8 @@ snapshots: keycloak-js@26.0.7: {} + keycloak-js@26.1.0: {} + kolorist@1.8.0: {} lru-cache@5.1.1: From da2751d7a97acbc4a8a50e98cecf43a94b3437cb Mon Sep 17 00:00:00 2001 From: phil Date: Sat, 25 Jan 2025 23:53:54 +0100 Subject: [PATCH 03/38] Style user info (css from fastapi version) --- src/App.vue | 51 +++++++++++-- src/assets/styles.css | 169 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 212 insertions(+), 8 deletions(-) create mode 100644 src/assets/styles.css diff --git a/src/App.vue b/src/App.vue index 40cefaf..5c9886b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,3 +1,4 @@ + - - + \ No newline at end of file diff --git a/src/assets/styles.css b/src/assets/styles.css new file mode 100644 index 0000000..7d53ba4 --- /dev/null +++ b/src/assets/styles.css @@ -0,0 +1,169 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: floralwhite; + margin: 0; +} +h1 { + text-align: center; + background-color: #f7c7867d; + margin: 0 0 0.2em 0; +} +p { + margin: 0.2em; +} +hr { + margin: 0.2em; +} +.hidden { + display: none; +} +.center { + text-align: center; +} +.content { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.user-info { + padding: 0.5em; + display: flex; + gap: 0.5em; + flex-direction: column; + width: fit-content; + align-items: center; + margin: 5px auto; + box-shadow: 0px 0px 10px lightgreen; + background-color: lightgreen; + border-radius: 8px; +} +.user-info * { + flex: 2 1 auto; + margin: 0; +} +.user-info .picture { + max-width: 3em; + max-height: 3em +} +.user-info a.logout { + border: 2px solid darkkhaki; + padding: 3px 6px; + text-decoration: none; + text-align: center; + color: black; +} +.user-info a.logout:hover { + background-color: orange; +} +.debug-auth { + font-size: 90%; + background-color: #d8bebc75; + padding: 6px; +} +.debug-auth * { + margin: 0; +} +.debug-auth p { + text-align: center; + border-bottom: 1px solid black; +} +.debug-auth ul { + padding: 0; + list-style: none; +} +.debug-auth p, .debug-auth .key { + font-weight: bold; +} +.content { + text-align: left; +} +.hasResponseStatus { + background-color: #88888840; +} +.hasResponseStatus.status-200 { + background-color: #00ff0040; +} +.hasResponseStatus.status-401 { + background-color: #ff000040; +} +.hasResponseStatus.status-403 { + background-color: #ff990040; +} +.hasResponseStatus.status-404 { + background-color: #ffCC0040; +} +.hasResponseStatus.status-503 { + background-color: #ffA88050; +} +.role { + padding: 3px 6px; + background-color: #44228840; +} + +/* For home */ + +.login-box { + text-align: center; + background-color: antiquewhite; + margin: 0.5em auto; + width: fit-content; + box-shadow: 0 0 10px #49759b88; + border-radius: 8px; +} +.login-box .description { + font-style: italic; + font-weight: bold; + background-color: #f7c7867d; + padding: 6px; + margin: 0; + border-radius: 8px 8px 0 0; +} +.providers { + justify-content: center; + padding: 0.8em; +} +.providers .provider { + min-height: 2em; +} +.providers .provider a.link { + text-decoration: none; + max-height: 2em; +} +.providers .provider .link div { + text-align: center; + background-color: #f7c7867d; + border-radius: 8px; + padding: 6px; + text-align: center; + color: black; + font-weight: bold; + cursor: pointer; +} +.providers .provider .hint { + font-size: 80%; + max-width: 13em; +} +.providers .error { + color: darkred; + padding: 3px 6px; + text-align: center; + font-weight: bold; + flex: 1 1 auto; +} +.content .links-to-check { + display: flex; + text-align: center; + justify-content: center; + gap: 0.5em; + flex-flow: wrap; +} +.content .links-to-check a { + color: black; + padding: 5px 10px; + text-decoration: none; + border-radius: 8px; +} + + From c4cc6f71f10b931c642808f5df5237c9d38e08a6 Mon Sep 17 00:00:00 2001 From: phil Date: Sun, 26 Jan 2025 03:52:08 +0100 Subject: [PATCH 04/38] Add roles, logout, cleanup --- index.html | 2 +- src/App.vue | 46 ++++++++++++------------------------------- src/assets/styles.css | 7 +++++++ src/main.ts | 7 +++---- vite.config.ts | 12 ++--------- 5 files changed, 26 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index e2443c1..9114f43 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Axios interceptor example + OIDC test web
diff --git a/src/App.vue b/src/App.vue index 5c9886b..bf2b029 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,56 +20,36 @@ async function doAuthenticatedRequest() { requestHeaders.value = response.config.headers } -/* -class User { - public sub: string - public name: string - public picture: string - public email: string +function logout() { + keycloak.logoutFn() } -function createUser(): User { - return new User( - keycloak.sub, - keycloak.fullName, - keycloak.picture, - keycloak.email, - ) +function accountManagemnt() { + keycloak.accountManagement() } - -let user: User -keycloak.onAuthSuccess = () => { - user: User = createUser() -} -*/ \ No newline at end of file + diff --git a/src/assets/styles.css b/src/assets/styles.css index 7d53ba4..91ec4d6 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -166,4 +166,11 @@ hr { border-radius: 8px; } +.token { + overflow-wrap: anywhere; + font-family: monospace; +} +.from-keycloak-vue { + display: none; +} diff --git a/src/main.ts b/src/main.ts index 48d8916..3754012 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,7 +6,7 @@ import App from './App.vue' export const HTTP = axios.create({ baseURL: '/', - timeout: 10_000 + timeout: 10.000 }) function initializeTokenInterceptor() { @@ -28,9 +28,8 @@ createApp(App) realm: 'test', clientId: 'oidc-test-web', }, - onReady(kk: Keycloak, vkk) { - //console.log(kk, vkk) - console.log(kk.idTokenParsed) + init: { onLoad: 'check-sso' }, + onReady(keycloak: Keycloak, vkk) { initializeTokenInterceptor() }, }) diff --git a/vite.config.ts b/vite.config.ts index 2e3ef22..95da815 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,25 +5,17 @@ import fs from 'fs'; import path from 'path'; import vue from '@vitejs/plugin-vue' -import vueDevTools from 'vite-plugin-vue-devtools' +//import vueDevTools from 'vite-plugin-vue-devtools' // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), - vueDevTools(), + //vueDevTools(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, - }, - server: { - https: { - // key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')), - // cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')), - key: fs.readFileSync(path.resolve("/home/phil", 'tiptop+4-key.pem')), - cert: fs.readFileSync(path.resolve("/home/phil", 'tiptop+4.pem')), - }, } }) From 761778ce00c2c7db03439e5db1017bc7894ce37b Mon Sep 17 00:00:00 2001 From: phil Date: Sun, 26 Jan 2025 04:02:05 +0100 Subject: [PATCH 05/38] Fix types --- src/App.vue | 18 +++++++++--------- src/main.ts | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/App.vue b/src/App.vue index bf2b029..ddbe799 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,27 +21,27 @@ async function doAuthenticatedRequest() { } function logout() { - keycloak.logoutFn() + keycloak.logoutFn && keycloak.logoutFn() } function accountManagemnt() { - keycloak.accountManagement() + keycloak.accountManagement && keycloak.accountManagement() }