Disable `Create column` button while the column name is empty (#25192)

![Jun-10-2023
18-43-04](https://github.com/go-gitea/gitea/assets/80308335/4796c9be-d161-43a0-a3e3-d9cd6a19cda4)

Fixes #25116

2 files changed, 38 insertions, 18 deletions

diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
index f249854b15..068c42838a 100644
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@@ -34,7 +34,7 @@
 
 							<div class="text right actions">
 								<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
-								<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}" class="ui primary button" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
+								<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}" class="ui primary button disabled" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
 							</div>
 						</form>
 					</div>
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index b8cb651f69..82814ec8b6 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -9,6 +9,21 @@ function updateIssueCount(cards) {
   parent.getElementsByClassName('board-card-cnt')[0].textContent = cnt;
 }
 
+function createNewBoard(url, boardTitle, projectColorInput) {
+  $.ajax({
+    url,
+    data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}),
+    headers: {
+      'X-Csrf-Token': csrfToken,
+    },
+    contentType: 'application/json',
+    method: 'POST',
+  }).done(() => {
+    boardTitle.closest('form').removeClass('dirty');
+    window.location.reload();
+  });
+}
+
 function moveIssue({item, from, to, oldIndex}) {
   const columnCards = to.getElementsByClassName('board-card');
   updateIssueCount(from);
@@ -17,8 +32,8 @@ function moveIssue({item, from, to, oldIndex}) {
   const columnSorting = {
     issues: Array.from(columnCards, (card, i) => ({
       issueID: parseInt($(card).attr('data-issue')),
-      sorting: i
-    }))
+      sorting: i,
+    })),
   };
 
   $.ajax({
@@ -31,7 +46,7 @@ function moveIssue({item, from, to, oldIndex}) {
     type: 'POST',
     error: () => {
       from.insertBefore(item, from.children[oldIndex]);
-    }
+    },
   });
 }
 
@@ -168,24 +183,29 @@ export function initRepoProject() {
     });
   });
 
-  $('#new_board_submit').on('click', function (e) {
+  $('#new_board_submit').on('click', (e) => {
     e.preventDefault();
-
     const boardTitle = $('#new_board');
     const projectColorInput = $('#new_board_color_picker');
+    if (!boardTitle.val()) {
+      return;
+    }
+    const url = $(this).data('url');
+    createNewBoard(url, boardTitle, projectColorInput);
+  });
 
-    $.ajax({
-      url: $(this).data('url'),
-      data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}),
-      headers: {
-        'X-Csrf-Token': csrfToken,
-      },
-      contentType: 'application/json',
-      method: 'POST',
-    }).done(() => {
-      boardTitle.closest('form').removeClass('dirty');
-      window.location.reload();
-    });
+  $('.new-board').on('input keyup', (e) => {
+    const boardTitle = $('#new_board');
+    const projectColorInput = $('#new_board_color_picker');
+    if (!boardTitle.val()) {
+      $('#new_board_submit').addClass('disabled');
+      return;
+    }
+    $('#new_board_submit').removeClass('disabled');
+    if (e.key === 'Enter') {
+      const url = $(this).data('url');
+      createNewBoard(url, boardTitle, projectColorInput);
+    }
   });
 }