9a3de436f4
The [recommended order](https://vuejs.org/guide/scaling-up/sfc.html) for SFC blocks is script -> template -> style, which we were violating because template and script were swapped. I do find script first also easier to read because the imports are on top, letting me immideatly see a component's dependencies. This is a pure cut-paste refactor with some removal of some empty lines. --------- Co-authored-by: Lauris BH <lauris@nix.lv>
112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<script>
|
|
import {createApp} from 'vue';
|
|
import {hideElem, showElem} from '../utils/dom.js';
|
|
|
|
const sfc = {
|
|
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);
|
|
}
|
|
},
|
|
};
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
<div v-for="category in categories" :key="category" class="field gt-pl-2 gt-pb-2 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>
|