fix: focus confirm button and use red for delete confirmations (#39350)

Fixes https://github.com/go-gitea/gitea/issues/39347

1. Focus the confirm button in generic confirm modals so `Enter` runs
the highlighted action.
2. Delete actions that lacked the risky flag now get it, so their
confirm button is red.

---------

Co-authored-by: silverwind <me@silverwind.io>

templates/projects/view.tmpl

@@ -48,7 +48,7 @@
 						{{ctx.Locale.Tr "repo.projects.close"}}
 					</button>
 				{{end}}
-				<button type="button" class="item btn link-action" data-url="{{.Link}}/delete?id={{.Project.ID}}"
+				<button type="button" class="item btn link-action negative" data-url="{{.Link}}/delete?id={{.Project.ID}}"
 								data-modal-confirm-header="{{ctx.Locale.Tr "repo.projects.deletion"}}"
 								data-modal-confirm-content="{{ctx.Locale.Tr "repo.projects.deletion_desc"}}"
 				>
@@ -108,7 +108,7 @@
 									>
 										{{svg "octicon-star"}} {{ctx.Locale.Tr "repo.projects.column.set_default"}}
 									</a>
-									<a class="item button link-action" data-url="{{$.Link}}/{{.ID}}" data-fetch-method="DELETE"
+									<a class="item button link-action negative" data-url="{{$.Link}}/{{.ID}}" data-fetch-method="DELETE"
 										data-modal-confirm-header="{{ctx.Locale.Tr "repo.projects.column.delete"}}"
 										data-modal-confirm-content="{{ctx.Locale.Tr "repo.projects.column.deletion_desc"}}"
 									>

templates/repo/actions/runs_list.tmpl

@@ -62,7 +62,7 @@
 							</a>
 						{{end}}
 						{{if and $data.CanWriteRepoUnitActions $run.Status.IsDone}}
-							<a class="item link-action"
+							<a class="item link-action negative"
 								data-url="{{$run.Link}}/delete"
 								data-modal-confirm="{{ctx.Locale.Tr "actions.runs.delete.description"}}"
 							>

templates/repo/issue/labels/label_list.tmpl

@@ -51,7 +51,7 @@
 							data-label-num-issues="{{.NumIssues}}" data-label-description="{{.Description}}"
 							data-label-exclusive-order="{{.ExclusiveOrder}}"
 						>{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}}</a>
-						<a class="link-action" href="#" data-url="{{$.Link}}/delete?id={{.ID}}"
+						<a class="link-action negative" href="#" data-url="{{$.Link}}/delete?id={{.ID}}"
 							data-modal-confirm-header="{{ctx.Locale.Tr "repo.issues.label_deletion"}}"
 							data-modal-confirm-content="{{ctx.Locale.Tr "repo.issues.label_deletion_desc"}}"
 						>{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}}</a>

templates/repo/issue/view_content/comments_delete_time.tmpl

@@ -2,7 +2,7 @@
 	{{if (not .comment.Time.Deleted)}}
 		{{if (or ctx.RootData.IsAdmin (and ctx.RootData.IsSigned (eq ctx.RootData.SignedUserID .comment.PosterID)))}}
 			<span class="tw-ml-auto">
-				<button type="button" class="ui icon button compact mini link-action" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.del_time"}}"
+				<button type="button" class="ui icon button compact mini link-action negative" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.del_time"}}"
 								data-url="{{ctx.RootData.RepoLink}}/issues/{{ctx.RootData.Issue.Index}}/times/{{.comment.TimeID}}/delete?id={{.comment.Time.ID}}"
 								data-modal-confirm="{{ctx.Locale.Tr "repo.issues.del_time"}}"
 				>

templates/repo/settings/webhook/base_list.tmpl

@@ -19,7 +19,7 @@
 					<span class="tw-ml-2 tw-text-grey-light">{{.URL}}</span>
 				</div>
 				<a class="muted" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
-				<a class="tw-text-red tw-pr-2 link-action"
+				<a class="tw-text-red tw-pr-2 link-action negative"
 					data-url="{{$.Link}}/delete?id={{.ID}}"
 					data-modal-confirm="{{ctx.Locale.Tr "repo.settings.webhook_deletion_desc"}}"
 				>{{svg "octicon-trash"}}</a>

templates/shared/secrets/add_list.tmpl

@@ -49,7 +49,7 @@
 				>
 					{{svg "octicon-pencil"}}
 				</button>
-				<button type="button" class="btn interact-bg link-action tw-p-2"
+				<button type="button" class="btn interact-bg link-action negative tw-p-2"
 					data-url="{{$.Link}}/delete?id={{.ID}}"
 					data-modal-confirm="{{ctx.Locale.Tr "secrets.deletion.description"}}"
 					data-tooltip-content="{{ctx.Locale.Tr "secrets.deletion"}}"

templates/shared/variables/variable_list.tmpl

@@ -47,7 +47,7 @@
 				>
 					{{svg "octicon-pencil"}}
 				</button>
-				<button type="button" class="btn interact-bg tw-p-2 link-action"
+				<button type="button" class="btn interact-bg tw-p-2 link-action negative"
 					data-tooltip-content="{{ctx.Locale.Tr "actions.variables.deletion"}}"
 					data-url="{{$.Link}}/{{.ID}}/delete"
 					data-modal-confirm="{{ctx.Locale.Tr "actions.variables.deletion.description"}}"

web_src/js/features/comp/ConfirmModal.ts

@@ -20,7 +20,7 @@ export function createConfirmModal({header = '', content = '', confirmButtonColo
       <div class="content">${content}</div>
       <div class="actions">
         <button class="ui cancel button">${htmlRaw(svg('octicon-x'))} ${i18n.modal_cancel}</button>
-        <button class="ui ${confirmButtonColor} ok button">${htmlRaw(svg('octicon-check'))} ${i18n.modal_confirm}</button>
+        <button class="ui ${confirmButtonColor} ok button" autofocus>${htmlRaw(svg('octicon-check'))} ${i18n.modal_confirm}</button>
       </div>
     </div>
   `.trim());