Fixed validation name of access token when creating

Author: BElluu

options/locale/locale_en-US.ini

@@ -908,6 +908,7 @@ token_name = Token Name
 generate_token = Generate Token
 generate_token_success = Your new token has been generated. Copy it now as it will not be shown again.
 generate_token_name_duplicate = <strong>%s</strong> has been used as an application name already. Please use a new one.
+generate_token_name_required = Token Name is required.
 delete_token = Delete
 access_token_deletion = Delete Access Token
 access_token_deletion_cancel_action = Cancel

templates/user/settings/applications.tmpl

@@ -55,10 +55,12 @@
 			</h5>
 			<form id="scoped-access-form" class="ui form ignore-dirty" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}
-				<div class="field {{if .Err_Name}}error{{end}}">
-					<label for="name">{{ctx.Locale.Tr "settings.token_name"}}</label>
-					<input id="name" name="name" value="{{.name}}" autofocus required maxlength="255">
-				</div>
+					<div class="field">
+						<label for="name">{{ctx.Locale.Tr "settings.token_name"}}</label>
+						<div id="scoped-access-token-name">
+							<input id="name" name="name" value="{{.name}}" autofocus required maxlength="255">
+						</div>
+					</div>
 				<div class="field">
 					<label>{{ctx.Locale.Tr "settings.repo_and_org_access"}}</label>
 					<label class="tw-cursor-pointer">
@@ -90,6 +92,9 @@
 					{{ctx.Locale.Tr "settings.generate_token"}}
 				</button>
 			</form>{{/* Fomantic ".ui.form .warning.message" is hidden by default, so put the warning message out of the form*/}}
+			<div id="token-name-warning" class="ui warning message center tw-hidden">
+				{{ctx.Locale.Tr "settings.generate_token_name_required"}}
+			</div>
 			<div id="scoped-access-warning" class="ui warning message center tw-hidden">
 				{{ctx.Locale.Tr "settings.at_least_one_permission"}}
 			</div>

web_src/js/components/ScopedAccessTokenSelector.vue renamed to web_src/js/components/ScopedAccessTokenForm.vue

@@ -38,20 +38,31 @@ onUnmounted(() => {
 function onClickSubmit(e: Event) {
   e.preventDefault();
 
+  const nameInput = document.querySelector<HTMLInputElement>('#name');
+  const nameWarning = document.querySelector('#token-name-warning');
+  if (!nameInput?.value.trim()) {
+    showElem(nameWarning);
+    return;
+  }
+  hideElem(nameWarning);
+
   const warningEl = document.querySelector('#scoped-access-warning');
-  // check that at least one scope has been selected
+  let hasSelectedScope = false;
+  
   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;
+      hasSelectedScope = true;
+      break;
     }
   }
-  // no scopes selected, show validation error
-  showElem(warningEl);
+
+  if (!hasSelectedScope) {
+    showElem(warningEl);
+    return;
+  }
+
+  hideElem(warningEl);
+  document.querySelector<HTMLFormElement>('#scoped-access-form')?.submit();
 }
 </script>
 

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

@@ -4,17 +4,17 @@ export async function initScopedAccessTokenCategories() {
   const el = document.querySelector('#scoped-access-token-selector');
   if (!el) return;
 
-  const {default: ScopedAccessTokenSelector} = await import(/* webpackChunkName: "scoped-access-token-selector" */'../components/ScopedAccessTokenSelector.vue');
+  const {default: ScopedAccessTokenForm} = await import(/* webpackChunkName: "scoped-access-token-form" */'../components/ScopedAccessTokenForm.vue');
   try {
-    const View = createApp(ScopedAccessTokenSelector, {
+    const View = createApp(ScopedAccessTokenForm, {
       isAdmin: JSON.parse(el.getAttribute('data-is-admin')),
       noAccessLabel: el.getAttribute('data-no-access-label'),
       readLabel: el.getAttribute('data-read-label'),
       writeLabel: el.getAttribute('data-write-label'),
     });
     View.mount(el);
   } catch (err) {
-    console.error('ScopedAccessTokenSelector failed to load', err);
+    console.error('ScopedAccessTokenForm failed to load', err);
     el.textContent = el.getAttribute('data-locale-component-failed-to-load');
   }
 }