diff options
| -rw-r--r-- | templates/user/settings/applications.tmpl | 14 | ||||
| -rw-r--r-- | web_src/js/components/ScopedAccessTokenSelector.vue | 13 | ||||
| -rw-r--r-- | web_src/js/features/scoped-access-token.ts | 20 | ||||
| -rw-r--r-- | web_src/js/index.ts | 2 |
4 files changed, 28 insertions, 21 deletions
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index 3c1934dd8b..65525aac2b 100644 --- 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 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, |