fix the component of access token list not mounted (#31824)

try to fix #31771

3 files changed, 21 insertions, 14 deletions

diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index b2fda05260..896c1dbff4 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import {createApp} from 'vue';
 import {hideElem, showElem} from '../utils/dom.ts';
 
 const sfc = {
@@ -73,18 +72,6 @@ const sfc = {
 };
 
 export default sfc;
-
-/**
- * Initialize category toggle sections
- */
-export function initScopedAccessTokenCategories() {
-  for (const el of document.querySelectorAll('.scoped-access-token-mount')) {
-    createApp({})
-      .component('scoped-access-token-selector', sfc)
-      .mount(el);
-  }
-}
-
 </script>
 <template>
   <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category">
diff --git a/web_src/js/features/scoped-access-token.ts b/web_src/js/features/scoped-access-token.ts
new file mode 100644
index 0000000000..c498d4c011
--- /dev/null
+++ b/web_src/js/features/scoped-access-token.ts
@@ -0,0 +1,20 @@
+import {createApp} from 'vue';
+
+export async function initScopedAccessTokenCategories() {
+  const el = document.querySelector('#scoped-access-token-selector');
+  if (!el) return;
+
+  const {default: ScopedAccessTokenSelector} = await import(/* webpackChunkName: "scoped-access-token-selector" */'../components/ScopedAccessTokenSelector.vue');
+  try {
+    const View = createApp(ScopedAccessTokenSelector, {
+      isAdmin: JSON.parse(el.getAttribute('data-is-admin')),
+      noAccessLabel: el.getAttribute('data-no-access-label'),
+      readLabel: el.getAttribute('data-read-label'),
+      writeLabel: el.getAttribute('data-write-label'),
+    });
+    View.mount(el);
+  } catch (err) {
+    console.error('ScopedAccessTokenSelector failed to load', err);
+    el.textContent = el.getAttribute('data-locale-component-failed-to-load');
+  }
+}
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
index 7ae8969fc8..81b8828dba 100644
--- a/web_src/js/index.ts
+++ b/web_src/js/index.ts
@@ -3,7 +3,6 @@ import './bootstrap.ts';
 import './htmx.ts';
 
 import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
-import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue';
 import {initDashboardRepoList} from './components/DashboardRepoList.vue';
 
 import {initGlobalCopyToClipboardListener} from './features/clipboard.ts';
@@ -80,6 +79,7 @@ import {initColorPickers} from './features/colorpicker.ts';
 import {initAdminSelfCheck} from './features/admin/selfcheck.ts';
 import {initOAuth2SettingsDisableCheckbox} from './features/oauth2-settings.ts';
 import {initGlobalFetchAction} from './features/common-fetch-action.ts';
+import {initScopedAccessTokenCategories} from './features/scoped-access-token.ts';
 import {
   initFootLanguageMenu,
   initGlobalDropdown,