fix: improve permssion prompt

nuxt · Oct 1, 2023 · 91ae0bd · 91ae0bd
1 parent 694d853
commit 91ae0bd
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts
@@ -64,7 +64,7 @@ export interface ServerFunctions {
   customTabAction(name: string, action: number): Promise<boolean>
   runWizard<T extends WizardActions>(token: string, name: T, ...args: GetWizardArgs<T>): Promise<void>
   openInEditor(filepath: string): Promise<boolean>
-  requestForAuth(info?: string): Promise<void>
+  requestForAuth(info?: string, origin?: string): Promise<void>
   verifyAuthToken(token: string): Promise<boolean>
   restartNuxt(hard?: boolean): Promise<void>
   installNuxtModule(token: string, name: string, dry?: boolean): Promise<InstallModuleReturn>

diff --git a/packages/devtools/client/components/AuthRequiredPanel.vue b/packages/devtools/client/components/AuthRequiredPanel.vue
@@ -8,7 +8,7 @@ onMounted(async () => {
     }
   }
   if (!isDevAuthed.value)
-    rpc.requestForAuth()
+    requestForAuth()
 })
 
 const authInput = ref('')

diff --git a/packages/devtools/client/composables/dev-auth.ts b/packages/devtools/client/composables/dev-auth.ts
@@ -51,7 +51,7 @@ export async function ensureDevAuthToken() {
 
 export const userAgentInfo = new UAParser(navigator.userAgent).getResult()
 
-async function authConfirmAction() {
+export async function requestForAuth() {
   const desc = [
     userAgentInfo.browser.name,
     userAgentInfo.browser.version,
@@ -60,7 +60,12 @@ async function authConfirmAction() {
     userAgentInfo.os.version,
     userAgentInfo.device.type,
   ].filter(i => i).join(' ')
-  rpc.requestForAuth(desc)
+  return await rpc.requestForAuth(desc, window.location.origin)
+}
+
+async function authConfirmAction() {
+  if (!devAuthToken.value)
+    requestForAuth()
 
   const result = await Promise.race([
     AuthConfirm.start(),

diff --git a/packages/devtools/client/pages/modules/custom-[name].vue b/packages/devtools/client/pages/modules/custom-[name].vue
@@ -24,7 +24,7 @@ onMounted(() => {
     }, 2000)
   }
   else if (tab.value.requireAuth && !isDevAuthed.value) {
-    rpc.requestForAuth()
+    requestForAuth()
   }
 })
 </script>

diff --git a/packages/devtools/src/server-rpc/general.ts b/packages/devtools/src/server-rpc/general.ts
@@ -149,15 +149,17 @@ export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: N
       logger.info('Restarting Nuxt...')
       return nuxt.callHook('restart', { hard })
     },
-    async requestForAuth(info: string) {
+    async requestForAuth(info: string, origin?: string) {
       const token = await getDevAuthToken()
 
+      origin ||= `${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}`
+
       const message = [
         `A browser is requesting permissions of ${colors.bold(colors.yellow('writing files and running commands'))} from the DevTools UI.`,
         colors.bold(info),
         '',
         'Please open the following URL in the browser:',
-        colors.bold(colors.green(`${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}${ROUTE_AUTH}?token=${token}`)),
+        colors.bold(colors.green(`${origin}${ROUTE_AUTH}?token=${token}`)),
         '',
         'Or manually copy and paste the following token:',
         colors.bold(colors.cyan(token)),