Improve "generate new access token" form

models/auth/access_token_scope.go

@@ -14,7 +14,7 @@ import (
 type AccessTokenScopeCategory int
 
 const (
-	AccessTokenScopeCategoryActivityPub = iota
+	AccessTokenScopeCategoryActivityPub AccessTokenScopeCategory = iota
 	AccessTokenScopeCategoryAdmin
 	AccessTokenScopeCategoryMisc // WARN: this is now just a placeholder, don't remove it which will change the following values
 	AccessTokenScopeCategoryNotification
@@ -38,6 +38,32 @@ var AllAccessTokenScopeCategories = []AccessTokenScopeCategory{
 	AccessTokenScopeCategoryUser,
 }
 
+// AccessTokenScopeCategoryNames maps AccessTokenScopeCategory to their string representations
+var AccessTokenScopeCategoryNames = map[AccessTokenScopeCategory]string{
+	AccessTokenScopeCategoryActivityPub:  "activitypub",
+	AccessTokenScopeCategoryAdmin:        "admin",
+	AccessTokenScopeCategoryMisc:         "misc",
+	AccessTokenScopeCategoryNotification: "notification",
+	AccessTokenScopeCategoryOrganization: "organization",
+	AccessTokenScopeCategoryPackage:      "package",
+	AccessTokenScopeCategoryIssue:        "issue",
+	AccessTokenScopeCategoryRepository:   "repository",
+	AccessTokenScopeCategoryUser:         "user",
+}
+
+// AccessTokenScopeCategoryNames is a list of all access token scope category names
+var AllAccessTokenScopeCategoryNames = []string{
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryActivityPub],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryAdmin],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryMisc],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryNotification],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryOrganization],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryPackage],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryIssue],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryRepository],
+	AccessTokenScopeCategoryNames[AccessTokenScopeCategoryUser],
+}
+
 // AccessTokenScopeLevel represents the access levels without a given scope category
 type AccessTokenScopeLevel int
 

models/auth/access_token_scope_test.go

@@ -25,7 +25,7 @@ func TestAccessTokenScope_Normalize(t *testing.T) {
 		{"write:activitypub,write:admin,write:misc,write:notification,write:organization,write:package,write:issue,write:repository,write:user,public-only", "public-only,all", nil},
 	}
 
-	for _, scope := range []string{"activitypub", "admin", "misc", "notification", "organization", "package", "issue", "repository", "user"} {
+	for _, scope := range AllAccessTokenScopeCategoryNames {
 		tests = append(tests,
 			scopeTestNormalize{AccessTokenScope(fmt.Sprintf("read:%s", scope)), AccessTokenScope(fmt.Sprintf("read:%s", scope)), nil},
 			scopeTestNormalize{AccessTokenScope(fmt.Sprintf("write:%s", scope)), AccessTokenScope(fmt.Sprintf("write:%s", scope)), nil},
@@ -59,7 +59,7 @@ func TestAccessTokenScope_HasScope(t *testing.T) {
 		{"public-only", "read:issue", false, nil},
 	}
 
-	for _, scope := range []string{"activitypub", "admin", "misc", "notification", "organization", "package", "issue", "repository", "user"} {
+	for _, scope := range AllAccessTokenScopeCategoryNames {
 		tests = append(tests,
 			scopeTestHasScope{
 				AccessTokenScope(fmt.Sprintf("read:%s", scope)),

routers/web/user/setting/applications.go

@@ -98,6 +98,7 @@ func loadApplicationsData(ctx *context.Context) {
 		return
 	}
 	ctx.Data["Tokens"] = tokens
+	ctx.Data["TokenCategories"] = auth_model.AllAccessTokenScopeCategoryNames
 	ctx.Data["EnableOAuth2"] = setting.OAuth2.Enabled
 	ctx.Data["IsAdmin"] = ctx.Doer.IsAdmin
 	if setting.OAuth2.Enabled {

templates/user/settings/applications.tmpl

@@ -77,14 +77,26 @@
 					<p class="activity meta">
 						<i>{{ctx.Locale.Tr "settings.access_token_desc" (HTMLFormat `href="%s/api/swagger" target="_blank"` AppSubUrl) (`href="https://docs.gitea.com/development/oauth2-provider#scopes" target="_blank"`|SafeHTML)}}</i>
 					</p>
-					<div id="scoped-access-token-selector"
-						data-is-admin="{{if .IsAdmin}}true{{else}}false{{end}}"
-						data-no-access-label="{{ctx.Locale.Tr "settings.permission_no_access"}}"
-						data-read-label="{{ctx.Locale.Tr "settings.permission_read"}}"
-						data-write-label="{{ctx.Locale.Tr "settings.permission_write"}}"
-						data-locale-component-failed-to-load="{{ctx.Locale.Tr "graphs.component_failed_to_load"}}"
-					>
-					</div>
+					{{range $category := .TokenCategories}}
+						<div 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="">
+										{{ctx.Locale.Tr "settings.permission_no_access"}}
+									</option>
+									<option value="read:{{$category}}">
+										{{ctx.Locale.Tr "settings.permission_read"}}
+									</option>
+									<option value="write:{{$category}}">
+										{{ctx.Locale.Tr "settings.permission_write"}}
+									</option>
+								</select>
+							</div>
+						</div>
+					{{end}}
 				</details>
 				<button id="scoped-access-submit" class="ui primary button">
 					{{ctx.Locale.Tr "settings.generate_token"}}

web_src/js/index.ts

@@ -68,7 +68,6 @@ import {initColorPickers} from './features/colorpicker.ts';
 import {initAdminSelfCheck} from './features/admin/selfcheck.ts';
 import {initOAuth2SettingsDisableCheckbox} from './features/oauth2-settings.ts';
 import {initGlobalFetchAction} from './features/common-fetch-action.ts';
-import {initScopedAccessTokenCategories} from './features/scoped-access-token.ts';
 import {
   initFootLanguageMenu,
   initGlobalDropdown,
@@ -209,7 +208,6 @@ onDomReady(() => {
     initUserSettings,
     initRepoDiffView,
     initPdfViewer,
-    initScopedAccessTokenCategories,
     initColorPickers,
 
     initOAuth2SettingsDisableCheckbox,