feat: add web auth settings and redirect/retry buttons to ConnectionModal and operations component

Author: mikouaji

app/components/Header/ConnectorModal.vue

@@ -1,13 +1,70 @@
 <script setup lang="ts">
-const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
-  useConnector()
+const {
+  isConnected,
+  isConnecting,
+  npmUser,
+  error,
+  hasOperations,
+  operations,
+  connect,
+  disconnect,
+  refreshState,
+} = useConnector()
+
+const { settings } = useSettings()
+
+const authUrl = computed(() => {
+  const op = operations.value.find(o => o.status === 'running' && o.authUrl)
+  return op?.authUrl ?? null
+})
+
+const AUTH_POLL_INTERVAL = 20_000
+const AUTH_POLL_COUNT = 3
+let authPollTimer: ReturnType<typeof setInterval> | null = null
+
+function startAuthPolling() {
+  stopAuthPolling()
+  let remaining = AUTH_POLL_COUNT
+  authPollTimer = setInterval(async () => {
+    await refreshState()
+    remaining--
+    if (remaining <= 0) {
+      stopAuthPolling()
+    }
+  }, AUTH_POLL_INTERVAL)
+}
+
+function stopAuthPolling() {
+  if (authPollTimer) {
+    clearInterval(authPollTimer)
+    authPollTimer = null
+  }
+}
+
+onUnmounted(stopAuthPolling)
+
+function handleOpenAuthUrl() {
+  if (authUrl.value) {
+    window.open(authUrl.value, '_blank', 'noopener,noreferrer')
+    startAuthPolling()
+  }
+}
 
 const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
 const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 const hasAttemptedConnect = shallowRef(false)
 
+watch(
+  () => settings.value.connector.webAuth,
+  webAuth => {
+    if (!webAuth) {
+      settings.value.connector.autoOpenURL = false
+    }
+  },
+)
+
 watch(isConnected, connected => {
   if (!connected) {
     tokenInput.value = ''
@@ -61,13 +118,40 @@ function handleDisconnect() {
         </div>
       </div>
 
+      <!-- Connector preferences -->
+      <div class="flex flex-col gap-2">
+        <SettingsToggle
+          :label="$t('connector.modal.web_auth')"
+          v-model="settings.connector.webAuth"
+        />
+        <SettingsToggle
+          :label="$t('connector.modal.auto_open_url')"
+          v-model="settings.connector.autoOpenURL"
+          :class="!settings.connector.webAuth ? 'opacity-50 pointer-events-none' : ''"
+          :aria-disabled="!settings.connector.webAuth"
+        />
+      </div>
+
+      <div class="border-t border-border my-3" />
+
       <!-- Operations Queue -->
       <OrgOperationsQueue />
 
       <div v-if="!hasOperations" class="text-sm text-fg-muted">
         {{ $t('connector.modal.connected_hint') }}
       </div>
 
+      <!-- Web auth link -->
+      <button
+        v-if="authUrl"
+        type="button"
+        class="flex items-center justify-center gap-2 w-full px-4 py-2 font-mono text-sm text-accent bg-accent/10 border border-accent/30 rounded-md transition-colors duration-200 hover:bg-accent/20 focus-visible:outline-accent/70"
+        @click="handleOpenAuthUrl"
+      >
+        <span class="i-carbon:launch w-4 h-4" aria-hidden="true" />
+        {{ $t('operations.queue.open_web_auth') }}
+      </button>
+
       <button
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
@@ -194,6 +278,20 @@ function handleDisconnect() {
               class="w-full"
               size="medium"
             />
+
+            <div class="border-t border-border my-3" />
+            <div class="flex flex-col gap-2">
+              <SettingsToggle
+                :label="$t('connector.modal.web_auth')"
+                v-model="settings.connector.webAuth"
+              />
+              <SettingsToggle
+                :label="$t('connector.modal.auto_open_url')"
+                v-model="settings.connector.autoOpenURL"
+                :class="!settings.connector.webAuth ? 'opacity-50 pointer-events-none' : ''"
+                :aria-disabled="!settings.connector.webAuth"
+              />
+            </div>
           </div>
         </details>
       </div>

app/components/Org/OperationsQueue.vue

@@ -21,6 +21,8 @@ const {
   refreshState,
 } = useConnector()
 
+const { settings } = useSettings()
+
 const isExecuting = shallowRef(false)
 const otpInput = shallowRef('')
 
@@ -63,6 +65,18 @@ async function handleRetryWithOtp() {
   await handleExecute(otp)
 }
 
+/** Retry all OTP-failed operations using web auth (no OTP needed) */
+async function handleRetryWithWebAuth() {
+  const otpFailedOps = activeOperations.value.filter(
+    (op: PendingOperation) => op.status === 'failed' && op.result?.requiresOtp,
+  )
+  for (const op of otpFailedOps) {
+    await retryOperation(op.id)
+  }
+
+  await handleExecute()
+}
+
 async function handleClearAll() {
   await clearOperations()
   otpInput.value = ''
@@ -263,6 +277,15 @@ watch(isExecuting, executing => {
           {{ isExecuting ? $t('operations.queue.retrying') : $t('operations.queue.retry_otp') }}
         </button>
       </form>
+      <button
+        v-if="settings.connector.webAuth"
+        type="button"
+        :disabled="isExecuting"
+        class="w-full mt-2 px-3 py-2 font-mono text-xs text-fg bg-bg-subtle border border-border rounded transition-all duration-200 hover:text-fg hover:border-border-hover disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
+        @click="handleRetryWithWebAuth"
+      >
+        {{ isExecuting ? $t('operations.queue.retrying') : $t('operations.queue.retry_web_auth') }}
+      </button>
     </div>
 
     <!-- Action buttons -->