forgejo/web_src/js/components/ScopedAccessTokenSelector.vue
Gusted c8ec9bc2cc feat(ui): lazy-load all Vue components (#9444)
Some Vue components were already lazy-loaded, but not all.

There are three main changes:
1. Move init scripts outside Vue code.
2. Make the init scripts lazy-load the Vue components.
3. Deal with vue linters, because apparently if you do `export default` then some Vue linters will notice that's vue sfc.

The rationale for this pull requests is that this reduces the size of the `index.js` file.
- Uncompressed: 1.24 MB -> 954.40 kB
- Compressed (gzip, via `reverse_proxy` of Caddy): 400.45 kB -> 298.95 kB
- Compressed (zstd, via `bindata` tag): 363.75 kB -> 274.22 kB

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9444
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
2025-09-28 05:40:40 +02:00

97 lines
2.3 KiB
Vue

<script>
import {hideElem, showElem} from '../utils/dom.js';
export default {
props: {
isAdmin: {
type: Boolean,
required: true,
},
noAccessLabel: {
type: String,
required: true,
},
readLabel: {
type: String,
required: true,
},
writeLabel: {
type: String,
required: true,
},
},
computed: {
categories() {
const categories = [
'activitypub',
];
if (this.isAdmin) {
categories.push('admin');
}
categories.push(
'issue',
'misc',
'notification',
'organization',
'package',
'repository',
'user');
return categories;
},
},
mounted() {
document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit);
},
unmounted() {
document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit);
},
methods: {
onClickSubmit(e) {
e.preventDefault();
const warningEl = document.getElementById('scoped-access-warning');
// check that at least one scope has been selected
for (const el of document.getElementsByClassName('access-token-select')) {
if (el.value) {
// Hide the error if it was visible from previous attempt.
hideElem(warningEl);
// Submit the form.
document.getElementById('scoped-access-form').submit();
// Don't show the warning.
return;
}
}
// no scopes selected, show validation error
showElem(warningEl);
},
},
};
</script>
<template>
<div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category">
<label class="category-label" :for="'access-token-scope-' + category">
{{ category }}
</label>
<div class="gitea-select">
<select
class="ui selection access-token-select"
name="scope"
:id="'access-token-scope-' + category"
>
<option value="">
{{ noAccessLabel }}
</option>
<option :value="'read:' + category">
{{ readLabel }}
</option>
<option :value="'write:' + category">
{{ writeLabel }}
</option>
</select>
</div>
</div>
</template>