Warn on navigation if currently editing comment or title (#32223)

Author: Tim Wundenberg

templates/repo/issue/view_content.tmpl

@@ -139,7 +139,7 @@
 </div>
 
 <template id="issue-comment-editor-template">
-	<div class="ui form comment">
+	<form class="ui form comment">
 		<div class="field">
 			{{template "shared/combomarkdowneditor" (dict
 				"CustomInit" true
@@ -162,7 +162,7 @@
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
 			</div>
 		</div>
-	</div>
+	</form>
 </template>
 
 {{template "repo/issue/view_content/reference_issue_dialog" .}}

templates/repo/issue/view_title.tmpl

@@ -26,17 +26,17 @@
 		</div>
 	</div>
 	{{if $canEditIssueTitle}}
-	<div class="ui form issue-title tw-hidden" id="issue-title-editor">
+	<form class="ui form issue-title tw-hidden" id="issue-title-editor">
 		<div class="ui input tw-flex-1">
-			<input value="{{.Issue.Title}}" data-old-title="{{.Issue.Title}}" maxlength="255" autocomplete="off">
+			<input name="title" value="{{.Issue.Title}}" data-old-title="{{.Issue.Title}}" maxlength="255" autocomplete="off" />
 		</div>
 		<div class="issue-title-buttons">
 			<button class="ui small basic cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
 			<button class="ui small primary button" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title">
 				{{ctx.Locale.Tr "repo.issues.save"}}
 			</button>
 		</div>
-	</div>
+	</form>
 	{{end}}
 	<div class="issue-title-meta">
 		{{if .HasMerged}}

web_src/js/features/repo-issue-edit.ts

@@ -7,6 +7,7 @@ import {attachRefIssueContextPopup} from './contextpopup.ts';
 import {initCommentContent, initMarkupContent} from '../markup/content.ts';
 import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
 import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
+import {applyAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
 async function tryOnEditContent(e) {
   const clickTarget = e.target.closest('.edit-content');
@@ -86,6 +87,7 @@ async function tryOnEditContent(e) {
   comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
   if (!comboMarkdownEditor) {
     editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
+    applyAreYouSure(editContentZone.firstElementChild);
     const saveButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.primary.button');
     const cancelButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.cancel.button');
     comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));

web_src/js/features/repo-issue.ts

@@ -16,6 +16,7 @@ import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {applyAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
 const {appSubUrl} = window.config;
 
@@ -535,6 +536,8 @@ export function initRepoIssueTitleEdit() {
   const issueTitleEditor = document.querySelector('#issue-title-editor');
   if (!issueTitleEditor) return;
 
+  applyAreYouSure(issueTitleEditor);
+
   const issueTitleInput = issueTitleEditor.querySelector('input');
   const oldTitle = issueTitleInput.getAttribute('data-old-title');
   issueTitleDisplay.querySelector('#issue-title-edit-show').addEventListener('click', () => {