a583c56306
The current UI to create API access tokens uses checkboxes that have a complicated relationship where some need to be checked and/or disabled in certain states. It also requires that a user interact with it to understand what their options really are. This branch changes to use `<select>`s. It better fits the available options, and it's closer to [GitHub's UI](https://github.com/settings/personal-access-tokens/new), which is good, in my opinion. It's more mobile friendly since the tap-areas are larger. If we ever add more permissions, like Maintainer, there's a natural place that doesn't take up more screen real-estate. This branch also fixes a few minor issues: - Hide the error about selecting at least one permission after second submission - Fix help description to call it "authorization" since that's what permissions are about (not authentication) Related: #24767. <img width="883" alt="Screenshot 2023-06-07 at 5 07 34 PM" src="https://github.com/go-gitea/gitea/assets/10803/6b63d807-c9be-4a4b-8e53-ecab6cbb8f76"> --- When it's open: <img width="881" alt="Screenshot 2023-06-07 at 5 07 59 PM" src="https://github.com/go-gitea/gitea/assets/10803/2432c6d0-39c2-4ca4-820e-c878ffdbfb69">
113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<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>
|
|
|
|
<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>
|