From e683927b544accfb6a4ca4cbd221c4321fa353f2 Mon Sep 17 00:00:00 2001
From: sillyguodong <gedong_1994@163.com>
Date: Tue, 13 Aug 2024 12:03:20 +0800
Subject: [PATCH 1/5] fix: the component of access token not mounted

---
 webpack.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index 838fb51f4361a..32bd87c009561 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -258,6 +258,9 @@ export default {
   },
   resolve: {
     symlinks: false,
+    alias: {
+      'vue$': 'vue/dist/vue.esm-bundler.js',
+    },
   },
   watchOptions: {
     ignored: [

From 7596a497f475d4cdbc542f264cb4c74cd8def9d7 Mon Sep 17 00:00:00 2001
From: sillyguodong <gedong_1994@163.com>
Date: Wed, 14 Aug 2024 17:24:17 +0800
Subject: [PATCH 2/5] Revert "fix: the component of access token not mounted"

This reverts commit e683927b544accfb6a4ca4cbd221c4321fa353f2.
---
 webpack.config.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 32bd87c009561..838fb51f4361a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -258,9 +258,6 @@ export default {
   },
   resolve: {
     symlinks: false,
-    alias: {
-      'vue$': 'vue/dist/vue.esm-bundler.js',
-    },
   },
   watchOptions: {
     ignored: [

From ba52d01b3458d8b5c5aa4d3f14928fed9ec5eb09 Mon Sep 17 00:00:00 2001
From: sillyguodong <gedong_1994@163.com>
Date: Wed, 14 Aug 2024 18:00:55 +0800
Subject: [PATCH 3/5] fix: do not import createApp in sfc file

---
 templates/user/settings/applications.tmpl     | 13 ++++++------
 .../components/ScopedAccessTokenSelector.vue  | 15 +++++++-------
 web_src/js/features/scoped-access-token.ts    | 20 +++++++++++++++++++
 web_src/js/index.ts                           |  2 +-
 4 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 web_src/js/features/scoped-access-token.ts

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 3c1934dd8b471..706c96db59028 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -77,13 +77,12 @@
 					<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"}}"
+					>
 					</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 b2fda052604b4..01ac37e46b225 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 = {
@@ -77,13 +76,13 @@ 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);
-  }
-}
+// export function initScopedAccessTokenCategories() {
+//   for (const el of document.querySelectorAll('.scoped-access-token-mount')) {
+//     createApp({})
+//       .component('scoped-access-token-selector', sfc)
+//       .mount(el);
+//   }
+// }
 
 </script>
 <template>
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 0000000000000..c498d4c0111d0
--- /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 7ae8969fc8f60..81b8828dba9c1 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,

From b53fd2fb12498cb3059d26db1d7291a4437b0958 Mon Sep 17 00:00:00 2001
From: sillyguodong <gedong_1994@163.com>
Date: Wed, 14 Aug 2024 18:02:06 +0800
Subject: [PATCH 4/5] chore: delete useless comments

---
 web_src/js/components/ScopedAccessTokenSelector.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 01ac37e46b225..896c1dbff4b0a 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -72,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">

From ebc4ac5e7c85241970e0f9730ff6b143c4dd073c Mon Sep 17 00:00:00 2001
From: sillyguodong <gedong_1994@163.com>
Date: Thu, 15 Aug 2024 11:08:00 +0800
Subject: [PATCH 5/5] fix: add missing data-locale-component-failed-to-load

---
 templates/user/settings/applications.tmpl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 706c96db59028..65525aac2b213 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -82,6 +82,7 @@
 						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>