code.gitea.io/gitea@v1.22.3/web_src/js/components/ScopedAccessTokenSelector.vue (about) 1 <script> 2 import {hideElem, showElem} from '../utils/dom.js'; 3 4 const sfc = { 5 props: { 6 isAdmin: { 7 type: Boolean, 8 required: true, 9 }, 10 noAccessLabel: { 11 type: String, 12 required: true, 13 }, 14 readLabel: { 15 type: String, 16 required: true, 17 }, 18 writeLabel: { 19 type: String, 20 required: true, 21 }, 22 }, 23 24 computed: { 25 categories() { 26 const categories = [ 27 'activitypub', 28 ]; 29 if (this.isAdmin) { 30 categories.push('admin'); 31 } 32 categories.push( 33 'issue', 34 'misc', 35 'notification', 36 'organization', 37 'package', 38 'repository', 39 'user'); 40 return categories; 41 }, 42 }, 43 44 mounted() { 45 document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit); 46 }, 47 48 unmounted() { 49 document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit); 50 }, 51 52 methods: { 53 onClickSubmit(e) { 54 e.preventDefault(); 55 56 const warningEl = document.getElementById('scoped-access-warning'); 57 // check that at least one scope has been selected 58 for (const el of document.getElementsByClassName('access-token-select')) { 59 if (el.value) { 60 // Hide the error if it was visible from previous attempt. 61 hideElem(warningEl); 62 // Submit the form. 63 document.getElementById('scoped-access-form').submit(); 64 // Don't show the warning. 65 return; 66 } 67 } 68 // no scopes selected, show validation error 69 showElem(warningEl); 70 }, 71 }, 72 }; 73 74 export default sfc; 75 </script> 76 <template> 77 <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category"> 78 <label class="category-label" :for="'access-token-scope-' + category"> 79 {{ category }} 80 </label> 81 <div class="gitea-select"> 82 <select 83 class="ui selection access-token-select" 84 name="scope" 85 :id="'access-token-scope-' + category" 86 > 87 <option value=""> 88 {{ noAccessLabel }} 89 </option> 90 <option :value="'read:' + category"> 91 {{ readLabel }} 92 </option> 93 <option :value="'write:' + category"> 94 {{ writeLabel }} 95 </option> 96 </select> 97 </div> 98 </div> 99 </template>