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

try to fix #31771
This commit is contained in:
sillyguodong 2024-08-17 01:37:36 +08:00 committed by GitHub
parent acd7053e9d
commit 2e7d202a7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 28 additions and 21 deletions

View File

@ -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">

View File

@ -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">

View File

@ -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');
}
}

View File

@ -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,