mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-11-04 12:53:43 +01:00 
			
		
		
		
	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>
		
			
				
	
	
		
			113 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			113 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>
 |