Refactor "delete-button" to "link-action" (#34962)

11 files changed, 61 insertions, 96 deletions

diff --git a/templates/admin/auth/edit.tmpl b/templates/admin/auth/edit.tmpl
index 91b84e13b6..781f514af4 100644
--- a/templates/admin/auth/edit.tmpl
+++ b/templates/admin/auth/edit.tmpl
@@ -408,7 +408,10 @@
 
 				<div class="field">
 					<button class="ui primary button">{{ctx.Locale.Tr "admin.auths.update"}}</button>
-					<button class="ui red button delete-button" data-url="{{$.Link}}/delete" data-id="{{.Source.ID}}">{{ctx.Locale.Tr "admin.auths.delete"}}</button>
+					<button class="ui red button link-action" data-url="{{$.Link}}/delete?id={{.Source.ID}}"
+						data-modal-confirm-header="{{ctx.Locale.Tr "admin.auths.delete_auth_title"}}"
+						data-modal-confirm-content="{{ctx.Locale.Tr "admin.auths.delete_auth_desc"}}"
+					>{{ctx.Locale.Tr "admin.auths.delete"}}</button>
 				</div>
 			</form>
 		</div>
@@ -424,16 +427,4 @@
 			<p class="oauth2">{{ctx.Locale.Tr "admin.auths.tips.oauth2.general.tip"}} <b id="oauth2-callback-url"></b></p>
 		</div>
 	</div>
-
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "admin.auths.delete_auth_title"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "admin.auths.delete_auth_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
-</div>
-
 {{template "admin/layout_footer" .}}
diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl
index 985caf6bdf..4817f2681b 100644
--- a/templates/admin/packages/list.tmpl
+++ b/templates/admin/packages/list.tmpl
@@ -72,7 +72,12 @@
 							</td>
 							<td>{{FileSize .CalculateBlobSize}}</td>
 							<td>{{DateUtils.AbsoluteShort .Version.CreatedUnix}}</td>
-							<td><a class="delete-button" href="" data-url="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}" data-id="{{.Version.ID}}" data-name="{{.Package.Name}}" data-data-version="{{.Version.Version}}">{{svg "octicon-trash"}}</a></td>
+							<td>
+								<a class="text red show-modal" href data-modal="#admin-package-delete-modal"
+									data-modal-form.action="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}&id={{.Version.ID}}"
+									data-modal-package-name="{{.Package.Name}}" data-modal-package-version="{{.Version.Version}}"
+								>{{svg "octicon-trash"}}</a>
+							</td>
 						</tr>
 					{{else}}
 						<tr><td class="tw-text-center" colspan="10">{{ctx.Locale.Tr "no_results_found"}}</td></tr>
@@ -84,15 +89,13 @@
 		{{template "base/paginate" .}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "packages.settings.delete"}}
-	</div>
+<form class="ui small modal form-fetch-action" method="post" id="admin-package-delete-modal">
+	{{.CsrfTokenHtml}}
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "packages.settings.delete"}}</div>
 	<div class="content">
-		{{ctx.Locale.Tr "packages.settings.delete.notice" (HTMLFormat `<span class="%s"></span>` "name") (HTMLFormat `<span class="%s"></span>` "dataVersion")}}
+		{{ctx.Locale.Tr "packages.settings.delete.notice" (HTMLFormat `<span class="%s"></span>` "package-name") (HTMLFormat `<span class="%s"></span>` "package-version")}}
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 
 {{template "admin/layout_footer" .}}
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl
index ce08d49656..2ad2de3a1d 100644
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@@ -84,7 +84,12 @@
 							<td>{{FileSize .LFSSize}}</td>
 							<td>{{DateUtils.AbsoluteShort .UpdatedUnix}}</td>
 							<td>{{DateUtils.AbsoluteShort .CreatedUnix}}</td>
-							<td><a class="delete-button" href="" data-url="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}" data-id="{{.ID}}" data-name="{{.Name}}">{{svg "octicon-trash"}}</a></td>
+							<td>
+								<a class="text red show-modal" href data-modal="#admin-repo-delete-modal"
+									data-modal-form.action="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}&id={{.ID}}"
+									data-modal-repo-name="{{.Name}}"
+								>{{svg "octicon-trash"}}</a>
+							</td>
 						</tr>
 					{{else}}
 						<tr><td class="tw-text-center" colspan="12">{{ctx.Locale.Tr "no_results_found"}}</td></tr>
@@ -96,17 +101,15 @@
 		{{template "base/paginate" .}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "repo.settings.delete"}}
-	</div>
+<form class="ui small modal form-fetch-action" id="admin-repo-delete-modal" method="post">
+	{{.CsrfTokenHtml}}
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.settings.delete"}}</div>
 	<div class="content">
 		<p>{{ctx.Locale.Tr "repo.settings.delete_desc"}}</p>
-		{{ctx.Locale.Tr "repo.settings.delete_notices_2" (HTMLFormat `<span class="%s"></span>` "name")}}<br>
+		{{ctx.Locale.Tr "repo.settings.delete_notices_2" (HTMLFormat `<span class="%s"></span>` "repo-name")}}<br>
 		{{ctx.Locale.Tr "repo.settings.delete_notices_fork_1"}}<br>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 
 {{template "admin/layout_footer" .}}
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index f6d549a634..e769543f6a 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -67,7 +67,7 @@
 					{{else}}
 						<a class="link-action flex-text-inline" href data-url="{{.Link ctx}}/close">{{svg "octicon-skip" 14}}{{ctx.Locale.Tr "repo.projects.close"}}</a>
 					{{end}}
-					<a class="delete-button flex-text-inline" href="#" data-url="{{.Link ctx}}/delete">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
+					<a class="link-action flex-text-inline text red" href data-modal-confirm="#repo-project-delete-modal" data-url="{{.Link ctx}}/delete">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
 				</div>
 				{{end}}
 			</div>
@@ -81,14 +81,9 @@
 </div>
 
 {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "repo.projects.deletion"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "repo.projects.deletion_desc"}}</p>
-	</div>
+<div class="ui small modal" id="repo-project-delete-modal">
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.projects.deletion"}}</div>
+	<div class="content"><p>{{ctx.Locale.Tr "repo.projects.deletion_desc"}}</p></div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
 {{end}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index 5701c1faa6..8805c709a0 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -76,7 +76,7 @@
 								{{else}}
 									<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{ctx.Locale.Tr "repo.milestones.close"}}</a>
 								{{end}}
-								<a class="delete-button flex-text-inline" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
+								<a class="link-action flex-text-inline text red" href data-modal-confirm="#repo-milestone-delete-modal" data-url="{{$.RepoLink}}/milestones/delete?id={{.ID}}">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
 							</div>
 						{{end}}
 					</div>
@@ -92,15 +92,11 @@
 </div>
 
 {{if or .CanWriteIssues .CanWritePulls}}
-	<div class="ui g-modal-confirm delete modal">
-		<div class="header">
-			{{svg "octicon-trash"}}
-			{{ctx.Locale.Tr "repo.milestones.deletion"}}
-		</div>
-		<div class="content">
-			<p>{{ctx.Locale.Tr "repo.milestones.deletion_desc"}}</p>
-		</div>
+	<div class="ui small modal" id="repo-milestone-delete-modal">
+		<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.milestones.deletion"}}</div>
+		<div class="content"><p>{{ctx.Locale.Tr "repo.milestones.deletion_desc"}}</p></div>
 		{{template "base/modal_actions_confirm" .}}
 	</div>
 {{end}}
+
 {{template "base/footer" .}}
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index f61a8ef9e7..109a18fa0e 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -105,7 +105,7 @@
 							<a class="ui small button" href="{{.RepoLink}}/releases">
 								{{ctx.Locale.Tr "repo.release.cancel"}}
 							</a>
-							<a class="ui small red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
+							<a class="ui small red button link-action" data-modal-confirm="#repo-release-delete-modal" data-url="{{$.RepoLink}}/releases/delete?id={{.ID}}">
 								{{ctx.Locale.Tr "repo.release.delete_release"}}
 							</a>
 							{{if .IsDraft}}
@@ -129,15 +129,11 @@
 </div>
 
 {{if .PageIsEditRelease}}
-	<div class="ui g-modal-confirm delete modal">
-		<div class="header">
-			{{svg "octicon-trash"}}
-			{{ctx.Locale.Tr "repo.release.deletion"}}
-		</div>
-		<div class="content">
-			<p>{{ctx.Locale.Tr "repo.release.deletion_desc"}}</p>
-		</div>
+	<div class="ui small modal" id="repo-release-delete-modal">
+		<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.release.deletion"}}</div>
+		<div class="content"><p>{{ctx.Locale.Tr "repo.release.deletion_desc"}}</p></div>
 		{{template "base/modal_actions_confirm" .}}
 	</div>
 {{end}}
+
 {{template "base/footer" .}}
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index ef4732540b..e8e7a3f1c2 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -49,8 +49,8 @@
 								</div>
 							</div>
 							<div class="flex-item-trailing">
-								<a class="rm ui tiny button" href="{{$.Repository.Link}}/settings/branches/edit?rule_name={{.RuleName}}">{{ctx.Locale.Tr "repo.settings.edit_protected_branch"}}</a>
-								<button class="ui red tiny button delete-button" data-url="{{$.Repository.Link}}/settings/branches/{{.ID}}/delete" data-id="{{.ID}}">
+								<a class="ui tiny button" href="{{$.Repository.Link}}/settings/branches/edit?rule_name={{.RuleName}}">{{ctx.Locale.Tr "repo.settings.edit_protected_branch"}}</a>
+								<button class="ui red tiny button link-action" data-modal-confirm="#repo-branch-protection-delete-modal" data-url="{{$.Repository.Link}}/settings/branches/{{.ID}}/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "repo.settings.protected_branch.delete_rule"}}
 								</button>
 							</div>
@@ -65,14 +65,9 @@
 		{{end}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "repo.settings.protected_branch_deletion"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "repo.settings.protected_branch_deletion_desc"}}</p>
-	</div>
+<div class="ui small modal" id="repo-branch-protection-delete-modal">
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.settings.protected_branch_deletion"}}</div>
+	<div class="content"><p>{{ctx.Locale.Tr "repo.settings.protected_branch_deletion_desc"}}</p></div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index e941a2c4b6..62903e1cfb 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -29,7 +29,7 @@
 									</div>
 								</div>
 							</div>
-							<button class="ui red tiny button inline delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+							<button class="ui red tiny button link-action" data-modal-confirm="#repo-collaborator-delete-modal" data-url="{{$.Link}}/delete?id={{.ID}}">
 								{{ctx.Locale.Tr "repo.settings.delete_collaborator"}}
 							</button>
 						</div>
@@ -95,7 +95,7 @@
 							</div>
 							{{if $allowedToChangeTeams}}
 								<div class="flex-item-trailing" {{if .IncludesAllRepositories}} data-tooltip-content="{{ctx.Locale.Tr "repo.settings.delete_team_tip"}}"{{end}}>
-									<button class="ui red tiny button inline delete-button {{if .IncludesAllRepositories}}disabled{{end}}" data-url="{{$.Link}}/team/delete" data-id="{{.ID}}">
+									<button class="ui red tiny button link-action {{if .IncludesAllRepositories}}disabled{{end}}" data-modal-confirm="#repo-collaborator-delete-modal" data-url="{{$.Link}}/team/delete?id={{.ID}}">
 											{{ctx.Locale.Tr "repo.settings.delete_collaborator"}}
 									</button>
 								</div>
@@ -123,14 +123,9 @@
 		{{end}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "repo.settings.collaborator_deletion"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "repo.settings.collaborator_deletion_desc"}}</p>
-	</div>
+<div class="ui small modal" id="repo-collaborator-delete-modal">
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.settings.collaborator_deletion"}}</div>
+	<div class="content"><p>{{ctx.Locale.Tr "repo.settings.collaborator_deletion_desc"}}</p></div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index 5eb2a47e5a..b82d584b22 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -59,7 +59,7 @@
 								</div>
 							</div>
 							<div class="flex-item-trailing">
-								<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								<button class="ui red tiny button link-action" data-modal-confirm="#repo-deploy-key-delete-modal" data-url="{{$.Link}}/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "settings.delete_key"}}
 								</button>
 							</div>
@@ -72,14 +72,9 @@
 		</div>
 	</div>
 
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "repo.settings.deploy_key_deletion"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "repo.settings.deploy_key_deletion_desc"}}</p>
-	</div>
+<div class="ui small modal" id="repo-deploy-key-delete-modal">
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.settings.deploy_key_deletion"}}</div>
+	<div class="content"><p>{{ctx.Locale.Tr "repo.settings.deploy_key_deletion_desc"}}</p></div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index f6f82fb52d..4c7ef364d2 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -50,7 +50,7 @@
 					{{if and .CanWriteWiki (not .Repository.IsMirror)}}
 						<a class="ui small button" href="{{.RepoLink}}/wiki/{{.PageURL}}?action=_edit">{{ctx.Locale.Tr "repo.wiki.edit_page_button"}}</a>
 						<a class="ui small primary button" href="{{.RepoLink}}/wiki?action=_new">{{ctx.Locale.Tr "repo.wiki.new_page_button"}}</a>
-						<a class="ui small red button delete-button" href="" data-url="{{.RepoLink}}/wiki/{{.PageURL}}?action=_delete" data-id="{{.PageURL}}">{{ctx.Locale.Tr "repo.wiki.delete_page_button"}}</a>
+						<a class="ui small red button link-action" href data-modal-confirm="#repo-wiki-delete-page-modal" data-url="{{.RepoLink}}/wiki/{{.PageURL}}?action=_delete">{{ctx.Locale.Tr "repo.wiki.delete_page_button"}}</a>
 					{{end}}
 				</div>
 			</div>
@@ -96,14 +96,9 @@
 	</div>
 </div>
 
-<div class="ui g-modal-confirm delete modal">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{ctx.Locale.Tr "repo.wiki.delete_page_button"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "repo.wiki.delete_page_notice_1" $title}}</p>
-	</div>
+<div class="ui small modal" id="repo-wiki-delete-page-modal">
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.wiki.delete_page_button"}}</div>
+	<div class="content"><p>{{ctx.Locale.Tr "repo.wiki.delete_page_notice_1" $title}}</p></div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts
index 22a7890857..3b112b116b 100644
--- a/web_src/js/features/common-button.ts
+++ b/web_src/js/features/common-button.ts
@@ -145,11 +145,12 @@ function onShowModalClick(el: HTMLElement, e: MouseEvent) {
 
     const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
     const [attrTargetName, attrTargetProp] = attrTargetCombo.split('.');
-    // try to find target by: "#target" -> "[name=target]" -> ".target" -> "<target> tag"
+    // try to find target by: "#target" -> "[name=target]" -> ".target" -> "<target> tag", and then try the modal itself
     const attrTarget = elModal.querySelector(`#${attrTargetName}`) ||
       elModal.querySelector(`[name=${attrTargetName}]`) ||
       elModal.querySelector(`.${attrTargetName}`) ||
-      elModal.querySelector(`${attrTargetName}`);
+      elModal.querySelector(`${attrTargetName}`) ||
+      (elModal.matches(`${attrTargetName}`) || elModal.matches(`#${attrTargetName}`) || elModal.matches(`.${attrTargetName}`) ? elModal : null);
     if (!attrTarget) {
       if (!window.config.runModeIsProd) throw new Error(`attr target "${attrTargetCombo}" not found for modal`);
       continue;