fallback to reading leagues from the webview after captcha completion #1840

renderer/src/web/background/Leagues.ts

@@ -45,14 +45,34 @@ export const useLeagues = createGlobalState(() => {
     }
   })
 
-  async function load () {
+  async function load (
+    builtinBrowser?: { webview: Element, close: () => void }
+  ) {
     isLoading.value = true
     error.value = null
 
     try {
-      const response = await Host.proxy(`${poeWebApi()}/api/leagues?type=main&realm=pc`)
-      if (!response.ok) throw new Error(JSON.stringify(Object.fromEntries(response.headers)))
-      const leagues: ApiLeague[] = await response.json()
+      let leagues: ApiLeague[] | undefined
+      try {
+        const response = await Host.proxy(`${poeWebApi()}/api/leagues?type=main&realm=pc`)
+        leagues = await response.json() as ApiLeague[]
+      } catch (e) {
+        // when you click the "Retry" and has the built-in browser open
+        interface WebviewTag extends Element {
+          executeJavaScript (code: string): Promise<unknown>
+        }
+        if (builtinBrowser) {
+          const webview = builtinBrowser.webview as WebviewTag
+          try {
+            const bodyText = await webview.executeJavaScript('document.body.innerText')
+            leagues = JSON.parse(bodyText as string)
+            builtinBrowser.close()
+          } catch {}
+        }
+
+        if (!leagues) throw e
+      }
+
       tradeLeagues.value = leagues
         .filter(league =>
           !PERMANENT_HC.includes(league.id) &&

renderer/src/web/price-check/BackgroundInfo.vue

@@ -9,14 +9,14 @@
     <template #name>{{ t('app.leagues_failed') }}</template>
     <p>{{ t('app.leagues_failed_help') }}</p>
     <template #actions>
-      <button class="btn" @click="leagues.load">{{ t('Retry') }}</button>
+      <button class="btn" @click="leagues.load(builtinBrowser)">{{ t('Retry') }}</button>
       <button class="btn" @click="openCaptcha">{{ t('Browser') }}</button>
     </template>
   </ui-error-box>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useLeagues } from '@/web/background/Leagues'
 import { Host } from '@/web/background/IPC'
@@ -24,7 +24,13 @@ import { poeWebApi } from '@/web/Config'
 
 import UiErrorBox from '@/web/ui/UiErrorBox.vue'
 
-const showBrowser = inject<(url: string) => void>('builtin-browser')!
+const props = defineProps<{
+  builtinBrowser: {
+    webview: Element
+    show: (url: string) => void
+    close: () => void
+  }
+}>()
 
 const { t } = useI18n()
 
@@ -45,6 +51,6 @@ const updateInfo = computed(() => {
 const leagues = useLeagues()
 
 function openCaptcha () {
-  showBrowser(`https://${poeWebApi()}/api/leagues?type=main&realm=pc&compact=1`)
+  props.builtinBrowser.show(`https://${poeWebApi()}/api/leagues?type=main&realm=pc`)
 }
 </script>

renderer/src/web/price-check/PriceCheckWindow.vue

@@ -28,7 +28,7 @@
         <div v-else class="w-8" />
       </AppTitleBar>
       <div class="grow layout-column min-h-0 bg-gray-800">
-        <background-info />
+        <background-info :builtin-browser="builtinBrowser()" />
         <check-position-circle v-if="showCheckPos"
           :position="checkPosition" style="z-index: -1;" />
         <template v-if="item?.isErr()">
@@ -285,7 +285,8 @@ export default defineComponent({
       handleIdentification,
       overlayKey,
       isLeagueSelected,
-      openLeagueSelection
+      openLeagueSelection,
+      builtinBrowser: () => ({ webview: iframeEl.value!, show: showBrowser, close: closeBrowser })
     }
   }
 })

renderer/src/web/price-check/settings-price-check.vue

@@ -2,7 +2,7 @@
   <div class="max-w-md p-2">
     <div class="mb-2" v-if="!leagues.error.value">
       <div class="flex-1 mb-1">{{ t('league') }}
-        <button class="btn" @click="leagues.load" :disabled="leagues.isLoading.value">{{ t('Refresh') }}</button>
+        <button class="btn" @click="leagues.load()" :disabled="leagues.isLoading.value">{{ t('Refresh') }}</button>
       </div>
       <div v-if="leagues.isLoading.value" class="mb-4">
         <i class="fas fa-info-circle text-gray-600"></i> {{ t('app.leagues_loading') }}</div>
@@ -21,7 +21,7 @@
       <template #name>{{ t('app.leagues_failed') }}</template>
       <p>{{ t('app.leagues_failed_help_alt') }}</p>
       <template #actions>
-        <button class="btn" @click="leagues.load">{{ t('Retry') }}</button>
+        <button class="btn" @click="leagues.load()">{{ t('Retry') }}</button>
       </template>
     </ui-error-box>
     <div class="mb-2">