fix: add AuthRequiredPanel to AuthConfirmDialog (#367)

packages/devtools/client/components/AuthConfirmDialog.vue

@@ -1,30 +1,17 @@
 <script setup lang="ts">
-import { AuthComfirm } from '~/composables/dialog'
+import { AuthConfirm } from '~/composables/dialog'
 </script>
 
 <template>
-  <AuthComfirm v-slot="{ resolve }">
-    <NDialog :model-value="true" @close="resolve(false)">
-      <div p4 flex="~ col gap-2">
-        <h3 class="mb2 text-lg font-medium leading-6" flex="~ items-center gap-1" text-orange>
-          <span class="i-carbon-information-square" /> Permissions required
-        </h3>
-        <p>
-          This operation requires permissions for running command and access files from the browser.
-        </p>
-        <p>
-          A request is sent to the server.<br>
-          Please check your terminal for the instructions and then come back.
-        </p>
-        <div flex="~ gap-3" mt2 justify-end>
+  <AuthConfirm v-slot="{ resolve }">
+    <NDialog :model-value="!isDevAuthed" class="border-none" @close="resolve(false)">
+      <AuthRequiredPanel>
+        <template #actions>
           <NButton @click="resolve(false)">
             Cancel
           </NButton>
-          <NButton disabled icon="i-carbon-time">
-            Waiting for authorization...
-          </NButton>
-        </div>
-      </div>
+        </template>
+      </AuthRequiredPanel>
     </NDialog>
-  </AuthComfirm>
+  </AuthConfirm>
 </template>

packages/devtools/client/components/AuthRequiredPanel.vue

@@ -32,7 +32,7 @@ async function input() {
 
 <template>
   <NPanelGrids v-if="!isDevAuthed">
-    <NCard flex="~ col gap-2" mxa items-center p6 text-center>
+    <NCard flex="~ col gap-2" mxa p6>
       <h3 class="mb2 text-lg font-medium leading-6" flex="~ items-center gap-1" text-orange>
         <span class="i-carbon-information-square" /> Permissions required
       </h3>
@@ -43,20 +43,25 @@ async function input() {
         A request is sent to the server.<br>
         Please check your terminal for the instructions and then come back.
       </p>
-      <div flex="~ gap-3" mt2 justify-end>
-        <NButton disabled icon="i-carbon-time">
-          Waiting for authorization...
-        </NButton>
+      <div flex="~ gap-3" mt5 justify-between>
+        <form relative flex="~ inline gap-2 items-center" @submit.prevent="input">
+          <p absolute left-1 top--5 text-xs op-50>
+            Or you can manually paste the token below:
+          </p>
+          <NTextInput
+            v-model="authInput" placeholder="Enter token here"
+            :n="isFailed ? 'red' : undefined"
+            @keydown.enter="input"
+          />
+          <NIconButton border="~ base" hover="border-primary text-green" p3.8 icon="i-carbon-arrow-right" @click="input" />
+        </form>
+        <div flex="~ gap-2">
+          <slot name="actions" />
+          <NButton disabled icon="i-carbon-time">
+            Waiting for authorization...
+          </NButton>
+        </div>
       </div>
-      <p>Or you can manually paste the token here:</p>
-      <form flex="~ inline gap-2 items-center" @submit.prevent="input">
-        <NTextInput
-          v-model="authInput" placeholder="Enter token here"
-          :n="isFailed ? 'red' : undefined"
-          @keydown.enter="input"
-        />
-        <NIconButton icon="i-carbon-arrow-right" @click="input" />
-      </form>
     </NCard>
   </NPanelGrids>
   <template v-else>

packages/devtools/client/composables/dev-auth.ts

@@ -31,33 +31,8 @@ export async function ensureDevAuthToken() {
   if (isDevAuthed.value)
     return devAuthToken.value!
 
-  if (!devAuthToken.value) {
-    const info = new UAParser(navigator.userAgent).getResult()
-    const desc = [
-      info.browser.name,
-      info.browser.version,
-      '|',
-      info.os.name,
-      info.os.version,
-      info.device.type,
-    ].filter(i => i).join(' ')
-    rpc.requestForAuth(desc)
-
-    const result = await Promise.race([
-      AuthComfirm.start(),
-      until(devAuthToken.value).toBeTruthy(),
-    ])
-
-    if (result === false) {
-      // @unocss-include
-      showNotification({
-        message: 'Action canceled',
-        icon: 'carbon-close',
-        classes: 'text-orange',
-      })
-      throw new Error('User canceled auth')
-    }
-  }
+  if (!devAuthToken.value)
+    await authConfirmAction()
 
   isDevAuthed.value = await rpc.verifyAuthToken(devAuthToken.value!)
   if (!isDevAuthed.value) {
@@ -67,8 +42,37 @@ export async function ensureDevAuthToken() {
       icon: 'i-carbon-warning-alt',
       classes: 'text-red',
     })
+    await authConfirmAction()
     throw new Error('Invalid auth token')
   }
 
   return devAuthToken.value!
 }
+
+async function authConfirmAction() {
+  const info = new UAParser(navigator.userAgent).getResult()
+  const desc = [
+    info.browser.name,
+    info.browser.version,
+    '|',
+    info.os.name,
+    info.os.version,
+    info.device.type,
+  ].filter(i => i).join(' ')
+  rpc.requestForAuth(desc)
+
+  const result = await Promise.race([
+    AuthConfirm.start(),
+    until(devAuthToken.value).toBeTruthy(),
+  ])
+
+  if (result === false) {
+    // @unocss-include
+    showNotification({
+      message: 'Action canceled',
+      icon: 'carbon-close',
+      classes: 'text-orange',
+    })
+    throw new Error('User canceled auth')
+  }
+}

packages/devtools/client/composables/dialog.ts

@@ -2,7 +2,7 @@ import type { InstallModuleReturn, ModuleActionType, ModuleStaticInfo } from '..
 
 export const ModuleDialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn, type: ModuleActionType]>()
 
-export const AuthComfirm = createTemplatePromise<boolean>()
+export const AuthConfirm = createTemplatePromise<boolean>()
 
 interface RestartDialog {
   id: string