refactor: replace legacy delete-button with link-action (#38143)

Removes the legacy `delete-button` handler (`initGlobalDeleteButton`)
and migrates all remaining usages to `link-action` and `show-modal` /
`form-fetch-action`.

Two handlers are adjusted for the new request shape: webauthn key delete
reads `id` from the query, and account deletion returns `JSONError` on
validation failure.

A E2E test ist added to cover one of the use cases.

Suggested in
https://github.com/go-gitea/gitea/pull/38046#discussion_r3414936737.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: bircni <bircni@icloud.com>

routers/web/user/setting/account.go

@@ -242,28 +242,16 @@ func DeleteAccount(ctx *context.Context) {
 		return
 	}
 
-	ctx.Data["Title"] = ctx.Tr("settings_title")
-	ctx.Data["PageIsSettingsAccount"] = true
-	ctx.Data["Email"] = ctx.Doer.Email
-
 	if _, _, err := auth.UserSignIn(ctx, ctx.Doer.Name, ctx.FormString("password")); err != nil {
 		switch {
 		case user_model.IsErrUserNotExist(err):
-			loadAccountData(ctx)
+			ctx.JSONError(ctx.Tr("form.user_not_exist"))
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.user_not_exist"), tplSettingsAccount, nil)
 		case errors.Is(err, smtp.ErrUnsupportedLoginType):
-			loadAccountData(ctx)
+			ctx.JSONError(ctx.Tr("form.unsupported_login_type"))
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.unsupported_login_type"), tplSettingsAccount, nil)
 		case errors.As(err, &db.ErrUserPasswordNotSet{}):
-			loadAccountData(ctx)
+			ctx.JSONError(ctx.Tr("form.unset_password"))
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.unset_password"), tplSettingsAccount, nil)
 		case errors.As(err, &db.ErrUserPasswordInvalid{}):
-			loadAccountData(ctx)
+			ctx.JSONError(ctx.Tr("form.enterred_invalid_password"))
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.enterred_invalid_password"), tplSettingsAccount, nil)
 		default:
 			ctx.ServerError("UserSignIn", err)
 		}
@@ -272,32 +260,27 @@ func DeleteAccount(ctx *context.Context) {
 
 	// admin should not delete themself
 	if ctx.Doer.IsAdmin {
-		ctx.Flash.Error(ctx.Tr("form.admin_cannot_delete_self"))
+		ctx.JSONError(ctx.Tr("form.admin_cannot_delete_self"))
-		ctx.Redirect(setting.AppSubURL + "/user/settings/account")
 		return
 	}
 
 	if err := user.DeleteUser(ctx, ctx.Doer, false); err != nil {
 		switch {
 		case repo_model.IsErrUserOwnRepos(err):
-			ctx.Flash.Error(ctx.Tr("form.still_own_repo"))
+			ctx.JSONError(ctx.Tr("form.still_own_repo"))
-			ctx.Redirect(setting.AppSubURL + "/user/settings/account")
 		case org_model.IsErrUserHasOrgs(err):
-			ctx.Flash.Error(ctx.Tr("form.still_has_org"))
+			ctx.JSONError(ctx.Tr("form.still_has_org"))
-			ctx.Redirect(setting.AppSubURL + "/user/settings/account")
 		case packages_model.IsErrUserOwnPackages(err):
-			ctx.Flash.Error(ctx.Tr("form.still_own_packages"))
+			ctx.JSONError(ctx.Tr("form.still_own_packages"))
-			ctx.Redirect(setting.AppSubURL + "/user/settings/account")
 		case user_model.IsErrDeleteLastAdminUser(err):
-			ctx.Flash.Error(ctx.Tr("auth.last_admin"))
+			ctx.JSONError(ctx.Tr("auth.last_admin"))
-			ctx.Redirect(setting.AppSubURL + "/user/settings/account")
 		default:
 			ctx.ServerError("DeleteUser", err)
 		}
-	} else {
+		return
-		log.Trace("Account deleted: %s", ctx.Doer.Name)
-		ctx.Redirect(setting.AppSubURL + "/")
 	}
+
+	ctx.JSONRedirect(setting.AppSubURL + "/")
 }
 
 func loadAccountData(ctx *context.Context) {

routers/web/user/setting/keys.go

@@ -247,17 +247,17 @@ func DeleteKey(ctx *context.Context) {
 	switch ctx.FormString("type") {
 	case "gpg":
 		if user_model.IsFeatureDisabledWithLoginType(ctx.Doer, setting.UserFeatureManageGPGKeys) {
-			ctx.NotFound(errors.New("gpg keys setting is not allowed to be visited"))
+			ctx.JSONError("gpg keys setting is not allowed to be visited")
 			return
 		}
 		if err := asymkey_model.DeleteGPGKey(ctx, ctx.Doer, ctx.FormInt64("id")); err != nil {
-			ctx.Flash.Error("DeleteGPGKey: " + err.Error())
+			ctx.JSONError("Failed to delete PGP key")
-		} else {
+			return
-			ctx.Flash.Success(ctx.Tr("settings.gpg_key_deletion_success"))
 		}
+		ctx.Flash.Success(ctx.Tr("settings.gpg_key_deletion_success"))
 	case "ssh":
 		if user_model.IsFeatureDisabledWithLoginType(ctx.Doer, setting.UserFeatureManageSSHKeys) {
-			ctx.NotFound(errors.New("ssh keys setting is not allowed to be visited"))
+			ctx.JSONError("ssh keys setting is not allowed to be visited")
 			return
 		}
 
@@ -268,24 +268,23 @@ func DeleteKey(ctx *context.Context) {
 			return
 		}
 		if external {
-			ctx.Flash.Error(ctx.Tr("settings.ssh_externally_managed"))
+			ctx.JSONError(ctx.Tr("settings.ssh_externally_managed"))
-			ctx.Redirect(setting.AppSubURL + "/user/settings/keys")
 			return
 		}
 		if err := asymkey_service.DeletePublicKey(ctx, ctx.Doer, keyID); err != nil {
-			ctx.Flash.Error("DeletePublicKey: " + err.Error())
+			ctx.JSONError("Failed to delete SSH key")
-		} else {
+			return
-			ctx.Flash.Success(ctx.Tr("settings.ssh_key_deletion_success"))
 		}
+		ctx.Flash.Success(ctx.Tr("settings.ssh_key_deletion_success"))
 	case "principal":
 		if err := asymkey_service.DeletePublicKey(ctx, ctx.Doer, ctx.FormInt64("id")); err != nil {
-			ctx.Flash.Error("DeletePublicKey: " + err.Error())
+			ctx.JSONError("Failed to delete SSH principal key")
-		} else {
+			return
-			ctx.Flash.Success(ctx.Tr("settings.ssh_principal_deletion_success"))
 		}
+		ctx.Flash.Success(ctx.Tr("settings.ssh_principal_deletion_success"))
 	default:
-		ctx.Flash.Warning("Function not implemented")
+		ctx.JSONError("unsupported key type")
-		ctx.Redirect(setting.AppSubURL + "/user/settings/keys")
+		return
 	}
 	ctx.JSONRedirect(setting.AppSubURL + "/user/settings/keys")
 }

routers/web/user/setting/security/webauthn.go

@@ -132,8 +132,7 @@ func WebauthnDelete(ctx *context.Context) {
 		return
 	}
 
-	form := web.GetForm(ctx).(*forms.WebauthnDeleteForm)
+	if _, err := auth.DeleteCredential(ctx, ctx.FormInt64("id"), ctx.Doer.ID); err != nil {
-	if _, err := auth.DeleteCredential(ctx, form.ID, ctx.Doer.ID); err != nil {
 		ctx.ServerError("GetWebAuthnCredentialByID", err)
 		return
 	}

routers/web/web.go

@@ -643,7 +643,7 @@ func registerWebRoutes(m *web.Router, webAuth *AuthMiddleware) {
 			m.Group("/webauthn", func() {
 				m.Post("/request_register", web.Bind(forms.WebauthnRegistrationForm{}), security.WebAuthnRegister)
 				m.Post("/register", security.WebauthnRegisterPost)
-				m.Post("/delete", web.Bind(forms.WebauthnDeleteForm{}), security.WebauthnDelete)
+				m.Post("/delete", security.WebauthnDelete)
 			})
 			m.Group("/openid", func() {
 				m.Post("", web.Bind(forms.AddOpenIDForm{}), security.OpenIDPost)

services/forms/user_form.go

@@ -419,17 +419,6 @@ func (f *WebauthnRegistrationForm) Validate(req *http.Request, errs binding.Erro
 	return middleware.Validate(errs, ctx.Data, f, ctx.Locale)
 }
 
-// WebauthnDeleteForm for deleting WebAuthn keys
-type WebauthnDeleteForm struct {
-	ID int64 `binding:"Required"`
-}
-
-// Validate validates the fields
-func (f *WebauthnDeleteForm) Validate(req *http.Request, errs binding.Errors) binding.Errors {
-	ctx := context.GetValidateContext(req)
-	return middleware.Validate(errs, ctx.Data, f, ctx.Locale)
-}
-
 // PackageSettingForm form for package settings
 type PackageSettingForm struct {
 	Action   string

templates/org/team/members.tmpl

@@ -34,12 +34,10 @@
 								</div>
 								<div class="item-trailing">
 									{{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}}
-										<form>
+										<button class="ui red button show-modal" data-modal="#remove-team-member"
-											<button class="ui red button delete-button" data-modal-id="remove-team-member"
+											data-modal-form.action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove?uid={{.ID}}"
-												data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove" data-datauid="{{.ID}}"
+											data-modal-name="{{.DisplayName}}"
-												data-name="{{.DisplayName}}"
+											data-modal-team-name="{{$.Team.Name}}">{{ctx.Locale.Tr "org.members.remove"}}</button>
-												data-data-team-name="{{$.Team.Name}}">{{ctx.Locale.Tr "org.members.remove"}}</button>
-										</form>
 									{{end}}
 								</div>
 							</div>
@@ -74,13 +72,13 @@
 		</div>
 	</div>
 </div>
-<div class="ui g-modal-confirm delete modal" id="remove-team-member">
+<form class="ui small modal form-fetch-action" method="post" id="remove-team-member">
 	<div class="header">
 		{{ctx.Locale.Tr "org.members.remove"}}
 	</div>
 	<div class="content">
-		<p>{{ctx.Locale.Tr "org.members.remove.detail" (HTMLFormat `<span class="%s"></span>` "name") (HTMLFormat `<span class="%s"></span>` "dataTeamName")}}</p>
+		<p>{{ctx.Locale.Tr "org.members.remove.detail" (HTMLFormat `<span class="%s"></span>` "name") (HTMLFormat `<span class="%s"></span>` "team-name")}}</p>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 {{template "base/footer" .}}

templates/org/team/new.tmpl

@@ -176,7 +176,7 @@
 							{{else}}
 								<button class="ui primary button">{{ctx.Locale.Tr "org.teams.update_settings"}}</button>
 								{{if not .Team.IsOwnerTeam}}
-									<button class="ui red button delete-button" data-url="{{.OrgLink}}/teams/{{.Team.Name | PathEscape}}/delete">{{ctx.Locale.Tr "org.teams.delete_team"}}</button>
+									<button class="ui red button link-action" data-modal-confirm="#delete-team" data-url="{{.OrgLink}}/teams/{{.Team.Name | PathEscape}}/delete">{{ctx.Locale.Tr "org.teams.delete_team"}}</button>
 								{{end}}
 							{{end}}
 						</div>
@@ -187,7 +187,7 @@
 	</div>
 </div>
 
-<div class="ui g-modal-confirm delete modal">
+<div class="ui small modal" id="delete-team">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "org.teams.delete_team_title"}}

templates/repo/branch/list.tmpl

@@ -200,7 +200,7 @@
 											</span>
 										</button>
 									{{else}}
-										<button class="btn interact-bg tw-p-2 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.delete" (.DBBranch.Name)}}" data-name="{{.DBBranch.Name}}">
+										<button class="btn interact-bg tw-p-2 show-modal delete-branch-button tw-text-red" data-modal="#delete-branch-modal" data-modal-form.action="{{$.Link}}/delete?name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.delete" (.DBBranch.Name)}}" data-modal-name="{{.DBBranch.Name}}">
 											{{svg "octicon-trash"}}
 										</button>
 									{{end}}
@@ -216,7 +216,7 @@
 	</div>
 </div>
 
-<div class="ui g-modal-confirm delete modal">
+<form class="ui small modal form-fetch-action" method="post" id="delete-branch-modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "repo.branch.delete_html"}} <span class="name"></span>
@@ -225,7 +225,7 @@
 		<p>{{ctx.Locale.Tr "repo.branch.delete_desc"}}</p>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 
 <div class="ui mini modal" id="create-branch-modal">
 	<div class="header">

templates/shared/actions/runner_edit.tmpl

@@ -52,7 +52,7 @@
 				<button type="button" class="ui button link-action" data-url="{{.Link}}/update-runner?disabled={{not .Runner.IsDisabled}}">
 					{{if .Runner.IsDisabled}}{{ctx.Locale.Tr "actions.runners.enable_runner"}}{{else}}{{ctx.Locale.Tr "actions.runners.disable_runner"}}{{end}}
 				</button>
-				<button class="ui red button delete-button" data-url="{{.Link}}/delete" data-modal="#runner-delete-modal">
+				<button class="ui red button link-action" data-url="{{.Link}}/delete" data-modal-confirm="#runner-delete-modal">
 					{{ctx.Locale.Tr "actions.runners.delete_runner"}}</button>
 			</div>
 		</form>
@@ -95,7 +95,7 @@
 		</table>
 		{{template "base/paginate" .}}
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="runner-delete-modal">
+	<div class="ui small modal" id="runner-delete-modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "actions.runners.delete_runner_header"}}

templates/user/settings/account.tmpl

@@ -56,7 +56,7 @@
 							</div>
 							<div class="flex-text-block">
 							{{if not .IsPrimary}}
-								<button class="ui red tiny button delete-button" data-modal-id="delete-email" data-url="{{AppSubUrl}}/user/settings/account/email/delete" data-id="{{.ID}}">
+								<button class="ui red tiny button link-action" data-modal-confirm="#delete-email" data-url="{{AppSubUrl}}/user/settings/account/email/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "settings.delete_email"}}
 								</button>
 								{{if .CanBePrimary}}
@@ -115,19 +115,19 @@
 				<p class="text left tw-font-semibold">{{ctx.Locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime}}</p>
 				{{end}}
 			</div>
-			<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
+			<form class="ui form ignore-dirty form-fetch-action" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
 				{{template "base/disable_form_autofill"}}
 				<div class="required field {{if .Err_Password}}error{{end}}">
 					<label for="password-confirmation">{{ctx.Locale.Tr "password"}}</label>
 					<input id="password-confirmation" name="password" type="password" autocomplete="off" required>
 				</div>
 				<div class="field">
-					<button class="ui red button delete-button" data-modal-id="delete-account" data-type="form" data-form="#delete-form">
+					<button class="ui red button" data-modal-confirm="#delete-account">
 						{{ctx.Locale.Tr "settings.confirm_delete_account"}}
 					</button>
 				</div>
 			</form>
-			<div class="ui g-modal-confirm delete modal" id="delete-account">
+			<div class="ui small modal" id="delete-account">
 				<div class="header">
 					{{svg "octicon-trash"}}
 					{{ctx.Locale.Tr "settings.delete_account_title"}}
@@ -141,7 +141,7 @@
 		{{end}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal" id="delete-email">
+<div class="ui small modal" id="delete-email">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "settings.email_deletion"}}

templates/user/settings/applications.tmpl

@@ -40,7 +40,7 @@
 							</div>
 						</div>
 						<div class="item-trailing">
-								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								<button class="ui red tiny button link-action" data-modal-confirm="#delete-token" data-url="{{$.Link}}/delete?id={{.ID}}">
 									{{svg "octicon-trash"}}
 									{{ctx.Locale.Tr "settings.delete_token"}}
 								</button>
@@ -92,7 +92,7 @@
 		{{end}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal" id="delete-token">
+<div class="ui small modal" id="delete-token">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "settings.access_token_deletion"}}

templates/user/settings/applications_oauth2_list.tmpl

@@ -24,7 +24,7 @@
 							{{svg "octicon-pencil"}}
 							{{ctx.Locale.Tr "settings.oauth2_application_edit"}}
 						</a>
-						<button class="ui red tiny button delete-button" data-modal-id="remove-gitea-oauth2-application"
+						<button class="ui red tiny button link-action" data-modal-confirm="#remove-gitea-oauth2-application"
 								data-url="{{$.Link}}/oauth2/{{.ID}}/delete">
 							{{svg "octicon-trash"}}
 							{{ctx.Locale.Tr "settings.delete_key"}}
@@ -35,7 +35,7 @@
 		{{end}}
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
+	<div class="ui small modal" id="remove-gitea-oauth2-application">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.remove_oauth2_application"}}

templates/user/settings/grants_oauth2.tmpl

@@ -18,7 +18,7 @@
 					</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="revoke-gitea-oauth2-grant"
+					<button class="ui red tiny button link-action" data-modal-confirm="#revoke-gitea-oauth2-grant"
 							data-url="{{AppSubUrl}}/user/settings/applications/oauth2/{{.ApplicationID}}/revoke/{{.ID}}">
 						{{ctx.Locale.Tr "settings.revoke_key"}}
 					</button>
@@ -27,7 +27,7 @@
 		{{end}}
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="revoke-gitea-oauth2-grant">
+	<div class="ui small modal" id="revoke-gitea-oauth2-grant">
 		<div class="header">
 			{{svg "octicon-shield" 16 "tw-mr-1"}}
 			{{ctx.Locale.Tr "settings.revoke_oauth2_grant"}}

templates/user/settings/keys_gpg.tmpl

@@ -68,7 +68,7 @@
 					</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="delete-gpg" data-url="{{$.Link}}/delete?type=gpg" data-id="{{.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-gpg" data-url="{{$.Link}}/delete?type=gpg&id={{.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 					{{if and (not .Verified) (ne $.VerifyingID .KeyID)}}
@@ -108,7 +108,7 @@
 			{{end}}
 		{{end}}
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="delete-gpg">
+	<div class="ui small modal" id="delete-gpg">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.gpg_key_deletion"}}

templates/user/settings/keys_principal.tmpl

@@ -26,7 +26,7 @@
 						</div>
 					</div>
 					<div class="item-trailing">
-						<button class="ui red tiny button delete-button" data-modal-id="delete-principal" data-url="{{$.Link}}/delete?type=principal" data-id="{{.ID}}">
+						<button class="ui red tiny button link-action" data-modal-confirm="#delete-principal" data-url="{{$.Link}}/delete?type=principal&id={{.ID}}">
 							{{ctx.Locale.Tr "settings.delete_key"}}
 						</button>
 					</div>
@@ -55,7 +55,7 @@
 		</div>
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="delete-principal">
+	<div class="ui small modal" id="delete-principal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.ssh_principal_deletion"}}

templates/user/settings/keys_ssh.tmpl

@@ -56,7 +56,7 @@
 						</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
+					<button class="ui red tiny button link-action{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-confirm="#delete-ssh" data-url="{{$.Link}}/delete?type=ssh&id={{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 					{{if and (not .Verified) (ne $.VerifyingFingerprint .Fingerprint)}}
@@ -104,7 +104,7 @@
 			{{end}}
 		{{end}}
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="delete-ssh">
+	<div class="ui small modal" id="delete-ssh">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.ssh_key_deletion"}}

templates/user/settings/organization.tmpl

@@ -23,13 +23,10 @@
 							</div>
 						</div>
 						<div class="item-trailing">
-							<form>
+							<button class="ui red button show-modal" data-modal="#leave-organization"
-								<button class="ui red button delete-button" data-modal-id="leave-organization"
+											data-modal-form.action="{{.OrganisationLink}}/members/action/leave?uid={{$.SignedUser.ID}}"
-												data-url="{{.OrganisationLink}}/members/action/leave" data-datauid="{{$.SignedUser.ID}}"
+											data-modal-organization-name="{{.DisplayName}}">{{ctx.Locale.Tr "org.members.leave"}}
-												data-name="{{$.SignedUser.DisplayName}}"
+							</button>
-												data-data-organization-name="{{.DisplayName}}">{{ctx.Locale.Tr "org.members.leave"}}
-								</button>
-							</form>
 						</div>
 					</div>
 					{{end}}
@@ -41,14 +38,14 @@
 		</div>
 	</div>
 
-<div class="ui g-modal-confirm delete modal" id="leave-organization">
+<form class="ui small modal form-fetch-action" method="post" id="leave-organization">
 	<div class="header">
 		{{ctx.Locale.Tr "org.members.leave"}}
 	</div>
 	<div class="content">
-		<p>{{ctx.Locale.Tr "org.members.leave.detail" (HTMLFormat `<span class="%s"></span>` "dataOrganizationName")}}</p>
+		<p>{{ctx.Locale.Tr "org.members.leave.detail" (HTMLFormat `<span class="%s"></span>` "organization-name")}}</p>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 
 {{template "user/settings/layout_footer" .}}

templates/user/settings/security/accountlinks.tmpl

@@ -40,7 +40,7 @@
 					{{end}}
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link" data-id="{{$loginSource.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link?id={{$loginSource.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
@@ -48,7 +48,7 @@
 		{{end}}
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="delete-account-link">
+	<div class="ui small modal" id="delete-account-link">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.remove_account_link"}}

templates/user/settings/security/openid.tmpl

@@ -29,7 +29,7 @@
 							</button>
 						{{end}}
 					</form>
-					<button class="ui red tiny button delete-button" data-modal-id="delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete" data-id="{{.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete?id={{.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
@@ -48,7 +48,7 @@
 		</button>
 	</form>
 
-	<div class="ui g-modal-confirm delete modal" id="delete-openid">
+	<div class="ui small modal" id="delete-openid">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.openid_deletion"}}

templates/user/settings/security/twofa.tmpl

@@ -9,9 +9,9 @@
 		<p>{{ctx.Locale.Tr "settings.regenerate_scratch_token_desc"}}</p>
 		<button class="ui primary button">{{ctx.Locale.Tr "settings.twofa_scratch_token_regenerate"}}</button>
 	</form>
-	<form class="ui form" action="{{AppSubUrl}}/user/settings/security/two_factor/disable" method="post" enctype="multipart/form-data" id="disable-form">
+	<form class="ui form form-fetch-action" action="{{AppSubUrl}}/user/settings/security/two_factor/disable" method="post">
 		<p>{{ctx.Locale.Tr "settings.twofa_disable_note"}}</p>
-		<button class="ui red button delete-button" data-modal-id="disable-twofa" data-type="form" data-form="#disable-form">{{ctx.Locale.Tr "settings.twofa_disable"}}</button>
+		<button class="ui red button" data-modal-confirm="#disable-twofa">{{ctx.Locale.Tr "settings.twofa_disable"}}</button>
 	</form>
 	{{else}}
 	{{/* The recovery tip is there as a means of encouraging a user to enroll */}}
@@ -22,7 +22,7 @@
 	</div>
 	{{end}}
 
-	<div class="ui g-modal-confirm delete modal" id="disable-twofa">
+	<div class="ui small modal" id="disable-twofa">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.twofa_disable"}}

templates/user/settings/security/webauthn.tmpl

@@ -16,7 +16,7 @@
 					</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-registration" data-url="{{$.Link}}/webauthn/delete?id={{.ID}}">
 					{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
@@ -30,7 +30,7 @@
 		</div>
 		<button id="register-webauthn" class="ui primary button">{{svg "octicon-key"}} {{ctx.Locale.Tr "settings.webauthn_register_key"}}</button>
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="delete-registration">
+	<div class="ui small modal" id="delete-registration">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.webauthn_delete_key"}}

tests/e2e/org.test.ts

@@ -32,3 +32,21 @@ test('add team member search', async ({page, request}) => {
   const result = page.locator('#search-user-box .results .result').first();
   await expect(result).toContainText(userName);
 });
+
+test('delete team via confirm modal', async ({page, request}) => {
+  const orgName = `e2e-del-team-${randomString(8)}`;
+  const teamName = `team-${randomString(8)}`;
+  await Promise.all([
+    (async () => {
+      await apiCreateOrg(request, orgName);
+      await apiCreateTeam(request, orgName, teamName);
+    })(),
+    login(page),
+  ]);
+
+  await page.goto(`/org/${orgName}/teams/${teamName}/edit`);
+  await page.getByRole('button', {name: 'Delete Team'}).click();
+  await page.getByRole('button', {name: 'Yes'}).click();
+  await expect(page).toHaveURL(new RegExp(`/org/${orgName}/teams$`));
+  await expect(page.getByText('The team has been deleted.')).toBeVisible();
+});

tests/integration/branches_test.go

@@ -38,13 +38,13 @@ func TestViewBranches(t *testing.T) {
 }
 
 func TestUndoDeleteBranch(t *testing.T) {
-	branchAction := func(t *testing.T, button string) (*HTMLDoc, string) {
+	branchAction := func(t *testing.T, button, attr string) (*HTMLDoc, string) {
 		session := loginUser(t, "user2")
 		req := NewRequest(t, "GET", "/user2/repo1/branches")
 		resp := session.MakeRequest(t, req, http.StatusOK)
 
 		htmlDoc := NewHTMLParser(t, resp.Body)
-		link, exists := htmlDoc.doc.Find(button).Attr("data-url")
+		link, exists := htmlDoc.doc.Find(button).Attr(attr)
 		require.True(t, exists, "The template has changed")
 		linkURL, err := url.Parse(link)
 		require.NoError(t, err)
@@ -58,12 +58,12 @@ func TestUndoDeleteBranch(t *testing.T) {
 	}
 
 	onGiteaRun(t, func(t *testing.T, u *url.URL) {
-		htmlDoc, name := branchAction(t, ".delete-branch-button")
+		htmlDoc, name := branchAction(t, ".delete-branch-button", "data-modal-form.action")
 		assert.Contains(t,
 			htmlDoc.doc.Find(".ui.positive.message").Text(),
 			translation.NewLocale("en-US").TrString("repo.branch.deletion_success", name),
 		)
-		htmlDoc, name = branchAction(t, ".restore-branch-button")
+		htmlDoc, name = branchAction(t, ".restore-branch-button", "data-url")
 		assert.Contains(t,
 			htmlDoc.doc.Find(".ui.positive.message").Text(),
 			translation.NewLocale("en-US").TrString("repo.branch.restore_success", name),

tests/integration/delete_user_test.go

@@ -13,7 +13,10 @@ import (
 	repo_model "gitea.dev/models/repo"
 	"gitea.dev/models/unittest"
 	user_model "gitea.dev/models/user"
+	"gitea.dev/modules/test"
 	"gitea.dev/tests"
+
+	"github.com/stretchr/testify/assert"
 )
 
 func assertUserDeleted(t *testing.T, userID int64) {
@@ -34,7 +37,8 @@ func TestUserDeleteAccount(t *testing.T) {
 	session := loginUser(t, "user8")
 	urlStr := "/user/settings/account/delete?password=" + userPassword
 	req := NewRequest(t, "POST", urlStr)
-	session.MakeRequest(t, req, http.StatusSeeOther)
+	resp := session.MakeRequest(t, req, http.StatusOK)
+	assert.NotEmpty(t, test.ParseJSONRedirect(resp.Body.Bytes()).Redirect)
 
 	assertUserDeleted(t, 8)
 	unittest.CheckConsistencyFor(t, &user_model.User{})
@@ -46,8 +50,8 @@ func TestUserDeleteAccountStillOwnRepos(t *testing.T) {
 	session := loginUser(t, "user2")
 	urlStr := "/user/settings/account/delete?password=" + userPassword
 	req := NewRequest(t, "POST", urlStr)
-	session.MakeRequest(t, req, http.StatusSeeOther)
+	resp := session.MakeRequest(t, req, http.StatusBadRequest)
-
+	assert.NotEmpty(t, test.ParseJSONError(resp.Body.Bytes()).ErrorMessage)
 	// user should not have been deleted, because the user still owns repos
 	unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: 2})
 }

tests/integration/html_helper.go

@@ -41,6 +41,7 @@ func (doc *HTMLDoc) Find(selector string) *goquery.Selection {
 
 // AssertHTMLElement check if the element by selector exists or does not exist depending on checkExists
 func AssertHTMLElement[T int | bool](t testing.TB, doc *HTMLDoc, selector string, checkExists T) {
+	t.Helper()
 	sel := doc.doc.Find(selector)
 	switch v := any(checkExists).(type) {
 	case bool:

tests/integration/user_settings_test.go

@@ -70,7 +70,7 @@ func TestUserSettingsAccount(t *testing.T) {
 
 		AssertHTMLElement(t, doc, "#password", true)
 		AssertHTMLElement(t, doc, "#email", true)
-		AssertHTMLElement(t, doc, "#delete-form", true)
+		AssertHTMLElement(t, doc, `form[action="/user/settings/account/delete"]`, true)
 	})
 
 	t.Run("credentials disabled", func(t *testing.T) {
@@ -87,7 +87,7 @@ func TestUserSettingsAccount(t *testing.T) {
 
 		AssertHTMLElement(t, doc, "#password", false)
 		AssertHTMLElement(t, doc, "#email", false)
-		AssertHTMLElement(t, doc, "#delete-form", true)
+		AssertHTMLElement(t, doc, `form[action="/user/settings/account/delete"]`, true)
 	})
 
 	t.Run("deletion disabled", func(t *testing.T) {

web_src/css/modules/button.css

@@ -326,11 +326,6 @@
   margin: 0 0.25em 0 0;
 }
 
-.delete-button,
-.delete-button:hover {
-  color: var(--color-red);
-}
-
 /* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
 
 .btn {

web_src/js/features/common-button.ts

@@ -1,4 +1,3 @@
-import {POST} from '../modules/fetch.ts';
 import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
 import {showFomanticModal} from '../modules/fomantic/modal.ts';
 import {camelize} from 'vue';
@@ -13,74 +12,6 @@ export function initGlobalButtonClickOnEnter(): void {
   });
 }
 
-export function initGlobalDeleteButton(): void {
-  // ".delete-button" shows a confirmation modal defined by `data-modal-id` attribute.
-  // Some model/form elements will be filled by `data-id` / `data-name` / `data-data-xxx` attributes.
-  // If there is a form defined by `data-form`, then the form will be submitted as-is (without any modification).
-  // If there is no form, then the data will be posted to `data-url`.
-  // TODO: do not use this method in new code. `show-modal` / `link-action(data-modal-confirm)` does far better than this.
-  // FIXME: all legacy `delete-button` should be refactored to use `show-modal` or `link-action`
-  for (const btn of document.querySelectorAll<HTMLElement>('.delete-button')) {
-    btn.addEventListener('click', (e) => {
-      e.preventDefault();
-
-      // eslint-disable-next-line github/no-dataset -- code depends on the camel-casing
-      const dataObj = btn.dataset;
-
-      const modalId = btn.getAttribute('data-modal-id');
-      const modal = document.querySelector(`.delete.modal${modalId ? `#${modalId}` : ''}`)!;
-
-      // set the modal "display name" by `data-name`
-      const modalNameEl = modal.querySelector('.name');
-      if (modalNameEl) modalNameEl.textContent = btn.getAttribute('data-name');
-
-      // fill the modal elements with data-xxx attributes: `data-data-organization-name="..."` => `<span class="dataOrganizationName">...</span>`
-      for (const [key, value] of Object.entries(dataObj)) {
-        if (key.startsWith('data')) {
-          const textEl = modal.querySelector(`.${key}`);
-          if (textEl) textEl.textContent = value ?? null;
-        }
-      }
-
-      showFomanticModal(modal, {
-        closable: false,
-        onApprove: () => {
-          // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
-          if (btn.getAttribute('data-type') === 'form') {
-            const formSelector = btn.getAttribute('data-form')!;
-            const form = document.querySelector<HTMLFormElement>(formSelector);
-            if (!form) throw new Error(`no form named ${formSelector} found`);
-            modal.classList.add('is-loading'); // the form is not in the modal, so also add loading indicator to the modal
-            form.classList.add('is-loading');
-            form.submit();
-            return false; // prevent modal from closing automatically
-          }
-
-          // prepare an AJAX form by data attributes
-          const postData = new FormData();
-          for (const [key, value] of Object.entries(dataObj)) {
-            if (key.startsWith('data')) { // for data-data-xxx (HTML) -> dataXxx (form)
-              postData.append(key.slice(4), String(value));
-            }
-            if (key === 'id') { // for data-id="..."
-              postData.append('id', String(value));
-            }
-          }
-          (async () => {
-            const response = await POST(btn.getAttribute('data-url')!, {data: postData});
-            if (response.ok) {
-              const data = await response.json();
-              window.location.href = data.redirect;
-            }
-          })();
-          modal.classList.add('is-loading'); // the request is in progress, so also add loading indicator to the modal
-          return false; // prevent modal from closing automatically
-        },
-      });
-    });
-  }
-}
-
 function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
   // a '.show-panel' element can show a panel, by `data-panel="selector"`
   // if it has "toggle" class, it toggles the panel

web_src/js/index.ts

@@ -58,7 +58,7 @@ import {initAdminSelfCheck} from './features/admin/selfcheck.ts';
 import {initOAuth2SettingsDisableCheckbox} from './features/oauth2-settings.ts';
 import {initGlobalFetchAction} from './features/common-fetch-action.ts';
 import {initCommmPageComponents, initGlobalComponent, initGlobalDropdown, initGlobalInput} from './features/common-page.ts';
-import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton} from './features/common-button.ts';
+import {initGlobalButtonClickOnEnter, initGlobalButtons} from './features/common-button.ts';
 import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
 import {callInitFunctions} from './modules/init.ts';
 import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
@@ -81,7 +81,6 @@ const initPerformanceTracer = callInitFunctions([
   initGlobalEnterQuickSubmit,
   initGlobalFormDirtyLeaveConfirm,
   initGlobalComboMarkdownEditor,
-  initGlobalDeleteButton,
   initGlobalInput,
   initGlobalShortcut,