ui: move "New access token" to a separate UI page (#11659)

We are updating the user's personal access token page (`/user/settings/applications`) to allow the creation of repo-specific tokens, adding a third option to "Repository and Organization Access".  In preparation for this new UI, this PR moves the creation of access tokens to a new page accessed by "New access token".

This also resolves a pet-peeve: the "Select permissions" dropdown on the inline edit form hides a *required* input for an access token.  This section is expanded on the new dedicated page.  (The Vue component used here is replaced with a JS-free alternative as well.  This form component used to lose selected values when an error occurred, and it didn't make sense as a Vue component, so it has been translated into an HTML template instead.)

## Checklist

The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).

### Tests for Go changes

- I added test coverage for Go changes...
  - [ ] in their respective `*_test.go` for unit tests.
  - [ ] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I ran...
  - [x] `make pr-go` before pushing

### Tests for JavaScript changes

- I added test coverage for JavaScript changes...
  - [ ] in `web_src/js/*.test.js` if it can be unit tested.
  - [x] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change.
- [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11659
Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net>
Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>

web_src/js/components/ScopedAccessTokenSelector.vue

@@ -1,104 +0,0 @@
-<script>
-import {hideElem, showElem} from '../utils/dom.js';
-
-export default {
-  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) {
-      const form = document.getElementById('scoped-access-form');
-      if (!form.checkValidity()) {
-        // some required inputs are not filled
-        return;
-      }
-
-      // prevent after validity-check to get native-required-popup
-      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.
-          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>

web_src/js/features/scoped-access-token-selector.ts

@@ -1,14 +0,0 @@
-import {createApp} from 'vue';
-
-export async function initScopedAccessTokenCategories() {
-  for (const el of document.getElementsByClassName('scoped-access-token')) {
-    const {default: ScopedAccessTokenSelector} = await import(/* webpackChunkName: "scoped-access-token-selector" */'../components/ScopedAccessTokenSelector.vue');
-    const scopedAccessTokenSelector = createApp(ScopedAccessTokenSelector, {
-      isAdmin: el.getAttribute('data-is-admin') === 'true',
-      noAccessLabel: el.getAttribute('data-no-access-label'),
-      readLabel: el.getAttribute('data-read-label'),
-      writeLabel: el.getAttribute('data-write-label'),
-    });
-    scopedAccessTokenSelector.mount(el);
-  }
-}

web_src/js/index.js

@@ -2,7 +2,6 @@
 import './bootstrap.js';
 
 import {initRepoActivityTopAuthorsChart} from './features/repo-activity-top-authors.ts';
-import {initScopedAccessTokenCategories} from './features/scoped-access-token-selector.ts';
 import {initDashboardRepoList} from './features/dashboard-repo-list.ts';
 
 import {initGlobalCopyToClipboardListener} from './features/clipboard.js';
@@ -192,7 +191,6 @@ onDomReady(() => {
   initUserAuthWebAuthnRegister();
   initUserAuth();
   initRepoDiffView();
-  initScopedAccessTokenCategories();
   initColorPickers();
   initModalClose();