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

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 3c1934dd8b471f821bb132a49f1a1aa87be68c10..65525aac2b213c1b842b34aa22b554b600e74752 100644 (file)
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -77,13 +77,13 @@
                                        <p class="activity meta">
                                                <i>{{ctx.Locale.Tr "settings.access_token_desc" (HTMLFormat `href="%s/api/swagger" target="_blank"` AppSubUrl) (`href="https://docs.gitea.com/development/oauth2-provider#scopes" target="_blank"`|SafeHTML)}}</i>
                                        </p>
-                                       <div class="scoped-access-token-mount">
-                                               <scoped-access-token-selector
-                                                       :is-admin="{{if .IsAdmin}}true{{else}}false{{end}}"
-                                                       no-access-label="{{ctx.Locale.Tr "settings.permission_no_access"}}"
-                                                       read-label="{{ctx.Locale.Tr "settings.permission_read"}}"
-                                                       write-label="{{ctx.Locale.Tr "settings.permission_write"}}"
-                                               ></scoped-access-token-selector>
+                                       <div id="scoped-access-token-selector"
+                                               data-is-admin="{{if .IsAdmin}}true{{else}}false{{end}}"
+                                               data-no-access-label="{{ctx.Locale.Tr "settings.permission_no_access"}}"
+                                               data-read-label="{{ctx.Locale.Tr "settings.permission_read"}}"
+                                               data-write-label="{{ctx.Locale.Tr "settings.permission_write"}}"
+                                               data-locale-component-failed-to-load="{{ctx.Locale.Tr "graphs.component_failed_to_load"}}"
+                                       >
                                        </div>
                                </details>
                                <button id="scoped-access-submit" class="ui primary button">

diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 103cc525ad0213575c3e110ac466d8d6dee8436e..326afba4e5d3a82ad1d80ede4cf09f4734164259 100644 (file)
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -1,5 +1,4 @@
 <script>
-import {createApp} from 'vue';
 import {hideElem, showElem} from '../utils/dom.js';
 
 const sfc = {
@@ -73,18 +72,6 @@ const sfc = {
 };
 
 export default sfc;
-
-/**
- * Initialize category toggle sections
- */
-export function initScopedAccessTokenCategories() {
-  for (const el of document.getElementsByClassName('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.js b/web_src/js/features/scoped-access-token.js
new file mode 100644 (file)
index 0000000..c498d4c
--- /dev/null
+++ b/web_src/js/features/scoped-access-token.js
@@ -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.js b/web_src/js/index.js
index 1867556eeed21ef95dcacccd9cce2fba33e9f8ed..4c3852b4065a001ee99782a0664fede18bc2d733 100644 (file)
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2,7 +2,6 @@
 import './bootstrap.js';
 
 import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
-import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue';
 import {initDashboardRepoList} from './components/DashboardRepoList.vue';
 
 import {initGlobalCopyToClipboardListener} from './features/clipboard.js';
@@ -88,6 +87,7 @@ import {initDirAuto} from './modules/dirauto.js';
 import {initRepositorySearch} from './features/repo-search.js';
 import {initColorPickers} from './features/colorpicker.js';
 import {initAdminSelfCheck} from './features/admin/selfcheck.js';
+import {initScopedAccessTokenCategories} from './features/scoped-access-token.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();