From 2ad2d5a6cea7e0e61bd213167244066c230b054e Mon Sep 17 00:00:00 2001
From: Punit Inani <80308335+puni9869@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:27:03 +0530
Subject: [PATCH] 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
---
 templates/repo/projects/view.tmpl    |  2 +-
 web_src/js/features/repo-projects.js | 54 +++++++++++++++++++---------
 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);
+    }
   });
 }