From 303af554c9bc7b22d5182a6fe9e22192a546cd41 Mon Sep 17 00:00:00 2001
From: Guillaume <me@gsvd.dev>
Date: Thu, 27 Feb 2025 14:40:12 -0500
Subject: Improve "generate new access token" form (#33730)

Fix: https://github.com/go-gitea/gitea/issues/33519

As discussed in [PR
#33614](https://github.com/go-gitea/gitea/pull/33614), the
ScopedAccessTokenSelector Vue component is not particularly useful.

This PR removes the component and reverts to using HTML templates. It
also introduces some (hopefully) useful refactoring.

The Vue component was causing the UX bug reported in the linked issue.
Required form fields are now properly working, as expected (see
screenshot).

![Screenshot from 2025-02-25
22-00-28](https://github.com/user-attachments/assets/41167854-0718-48b0-a3ee-75ca3a7b8b20)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 .../js/components/ScopedAccessTokenSelector.vue    | 81 ----------------------
 1 file changed, 81 deletions(-)
 delete mode 100644 web_src/js/components/ScopedAccessTokenSelector.vue

(limited to 'web_src/js/components')

diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
deleted file mode 100644
index 9eaf824035..0000000000
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, onUnmounted} from 'vue';
-import {hideElem, showElem} from '../utils/dom.ts';
-
-const props = defineProps<{
-  isAdmin: boolean;
-  noAccessLabel: string;
-  readLabel: string;
-  writeLabel: string;
-}>();
-
-const categories = computed(() => {
-  const categories = [
-    'activitypub',
-  ];
-  if (props.isAdmin) {
-    categories.push('admin');
-  }
-  categories.push(
-    'issue',
-    'misc',
-    'notification',
-    'organization',
-    'package',
-    'repository',
-    'user');
-  return categories;
-});
-
-onMounted(() => {
-  document.querySelector('#scoped-access-submit').addEventListener('click', onClickSubmit);
-});
-
-onUnmounted(() => {
-  document.querySelector('#scoped-access-submit').removeEventListener('click', onClickSubmit);
-});
-
-function onClickSubmit(e: Event) {
-  e.preventDefault();
-
-  const warningEl = document.querySelector('#scoped-access-warning');
-  // check that at least one scope has been selected
-  for (const el of document.querySelectorAll<HTMLInputElement>('.access-token-select')) {
-    if (el.value) {
-      // Hide the error if it was visible from previous attempt.
-      hideElem(warningEl);
-      // Submit the form.
-      document.querySelector<HTMLFormElement>('#scoped-access-form').submit();
-      // Don't show the warning.
-      return;
-    }
-  }
-  // no scopes selected, show validation error
-  showElem(warningEl);
-}
-</script>
-
-<template>
-  <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 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>
-- 
cgit v1.2.3