code.gitea.io/gitea@v1.21.7/web_src/js/components/ScopedAccessTokenSelector.vue (about)

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