From 6cc36057421fb6ff163f1a26ffedec7cf745f51b Mon Sep 17 00:00:00 2001
From: itpropro <jdamaschke@visorian.com>
Date: Tue, 16 Apr 2024 18:55:22 +0200
Subject: [PATCH] feat(devtools): :sparkles:  Added devauth check; Updated UI

---
 client/nuxt.config.ts     | 11 +++++++++++
 client/pages/index.vue    | 31 +++++++++++++++++++++++--------
 src/devtools.ts           |  4 ----
 src/runtime/types/oidc.ts |  2 +-
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 090c9de..d9e29d1 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -13,4 +13,15 @@ export default defineNuxtConfig({
   app: {
     baseURL: '/__nuxt-oidc-auth',
   },
+  unocss: {
+    shortcuts: {
+      // General Tokens
+      'bg-base': 'n-bg-base',
+      'bg-active': 'n-bg-active',
+      'border-base': 'n-border-base',
+      'text-secondary': 'color-black/50 dark:color-white/50',
+      // Reusable
+      'x-divider': 'h-1px w-full bg-gray/15',
+    }
+  }
 })
diff --git a/client/pages/index.vue b/client/pages/index.vue
index ead7b80..47a6a50 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -10,22 +10,24 @@ export interface OidcConfig {
 }
 
 const devtoolsClient: NuxtDevtoolsIframeClient | null = ref(null)
-
+const devAuthToken = ref<string | null>(localStorage.getItem('__nuxt_dev_token__'))
 const oidcRuntimeConfig = ref()
 const oidcConfig = ref<OidcConfig>()
 const selectedProvider = ref('')
 const oidcState = ref({})
 const clientWindow = computed(() => devtoolsClient.value.host?.app)
 const oidcSecrets = ref({})
+const isDevAuthed = ref(false)
 
 onDevtoolsClientConnected(async (client: NuxtDevtoolsIframeClient) => {
   // Getting devtools client
   devtoolsClient.value = client
   // Settings refs
-  oidcRuntimeConfig.value = (await devtoolsClient.value.devtools.rpc.getServerRuntimeConfig()).oidc
-  oidcConfig.value = (await devtoolsClient.value.devtools.rpc.getServerConfig()).oidc
+  isDevAuthed.value = await devtoolsClient.value.devtools.rpc.verifyAuthToken(devAuthToken.value)
+  oidcRuntimeConfig.value = isDevAuthed.value ? (await devtoolsClient.value.devtools.rpc.getServerRuntimeConfig()).oidc : {}
+  oidcConfig.value = isDevAuthed.value ? (await devtoolsClient.value.devtools.rpc.getServerConfig()).oidc : {}
   oidcState.value = devtoolsClient.value.host.nuxt.payload.state['$snuxt-oidc-auth-session'] || {}
-  oidcSecrets.value = await devtoolsClient.value.devtools.extendClientRpc('nuxt-oidc-auth-rpc').getNuxtOidcAuthSecrets()
+  oidcSecrets.value = isDevAuthed.value ? await devtoolsClient.value.devtools.extendClientRpc('nuxt-oidc-auth-rpc').getNuxtOidcAuthSecrets() : {}
 })
 
 async function login(provider?: string) {
@@ -38,8 +40,8 @@ async function logout(provider?: string) {
 </script>
 
 <template>
-  <div class="relative p-10 flex flex-col h-screen">
-    <div class="flex justify-start w-92% flex-gap-2 top-0 fixed n-navbar-glass">
+  <div class="relative w-full flex flex-col h-screen">
+    <div class="flex px-10 justify-start w-full flex-gap-2 top-0 fixed n-navbar-glass">
       <div class="mt-4">
         <h1 class="text-3xl font-bold">
           Nuxt OIDC Auth
@@ -73,12 +75,25 @@ async function logout(provider?: string) {
         Refresh
       </NButton>
     </div>
+    <NTip
+      v-if="!isDevAuthed"
+      class="relative mt-24"
+      n="orange5"
+      icon="i-carbon-locked"
+      justify-center
+    >
+      Current DevTools session is not authorized, some features may be disabled.
+    </NTip>
     <div
       v-if="oidcConfig"
-      class="flex flex-col gap-2 pb-4 mt-10"
+      class="flex flex-col gap-2 p-10 pt-6"
+      :class="{ 'mt-16': isDevAuthed }"
     >
       <AuthState :oidc-state />
-      <ProviderConfigs :oidc-runtime-config :oidc-config />
+      <ProviderConfigs
+        :oidc-runtime-config
+        :oidc-config
+      />
       <Secrets :oidc-secrets />
       <DevMode :oidc-runtime-config />
     </div>
diff --git a/src/devtools.ts b/src/devtools.ts
index d8f718b..c404586 100644
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -35,13 +35,9 @@ export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
 
   nuxt.hook('devtools:customTabs', (tabs) => {
     tabs.push({
-      // unique identifier
       name: 'nuxt-oidc-auth',
-      // title to display in the tab
       title: 'Nuxt OIDC Auth',
-      // any icon from Iconify, or a URL to an image
       icon: 'carbon:rule-locked',
-      // iframe view
       view: {
         type: 'iframe',
         src: DEVTOOLS_UI_ROUTE,
diff --git a/src/runtime/types/oidc.ts b/src/runtime/types/oidc.ts
index 6c68f94..db22976 100644
--- a/src/runtime/types/oidc.ts
+++ b/src/runtime/types/oidc.ts
@@ -149,7 +149,7 @@ export interface OidcProviderConfig {
    * Space-delimited list of string values that specifies whether the authorization server prompts the user for reauthentication and consent
    */
   prompt?: Array<'none'> | Array<PossibleCombinations<'login' | 'consent' | 'select_account'>>
-    /**
+  /**
    * Encode redirect uri query parameter in authorization request. Only for compatibility with services that don't implement proper parsing of query parameters.
    * @default false
    */