[UI] Fix scoped-access-token

- Regression of #4571
- Refactor to not use the component API of Vue. The root cause is still
unknown.

(cherry picked from commit aa5163d5c4e72cb1e8a1632745c06a006d77537f)

2 files changed, 13 insertions, 12 deletions

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index bd51a552bc..987b55467d 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -77,14 +77,12 @@
 					<p class="activity meta">
 						<i>{{ctx.Locale.Tr "settings.access_token_desc" (HTMLFormat `href="%s/api/swagger" target="_blank"` AppSubUrl) (`href="https://forgejo.org/docs/latest/user/token-scope/" 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>
+					<div class="scoped-access-token"
+						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">
 					{{ctx.Locale.Tr "settings.generate_token"}}
diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 103cc525ad..925e531c6b 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -78,10 +78,13 @@ 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);
+  for (const el of document.getElementsByClassName('scoped-access-token')) {
+    createApp(sfc, {
+      isAdmin: el.getAttribute('data-is-admin') === 'true',
+      noAccessLabel: el.getAttribute('data-no-access-label'),
+      readLabel: el.getAttribute('data-read-label'),
+      writeLabel: el.getAttribute('data-write-label'),
+    }).mount(el);
   }
 }