Fix leaving organization bug on user settings -> orgs (#21983) (#22438)

Backport #21983

Fix #21772

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

Co-authored-by: 花墨 <shanee@live.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: KN4CK3R <admin@oldschoolhack.me>

options/locale/locale_en-US.ini

@@ -497,6 +497,7 @@ team_not_exist = The team does not exist.
 last_org_owner = You cannot remove the last user from the 'owners' team. There must be at least one owner for an organization.
 cannot_add_org_to_team = An organization cannot be added as a team member.
 duplicate_invite_to_team = The user was already invited as a team member.
+organization_leave_success = You have successfully left the organization %s.
 
 invalid_ssh_key = Can not verify your SSH key: %s
 invalid_gpg_key = Can not verify your GPG key: %s

routers/web/org/members.go

@@ -108,13 +108,20 @@ func MembersAction(ctx *context.Context) {
 		}
 	case "leave":
 		err = models.RemoveOrgUser(org.ID, ctx.Doer.ID)
-		if organization.IsErrLastOrgOwner(err) {
+		if err == nil {
+			ctx.Flash.Success(ctx.Tr("form.organization_leave_success", org.DisplayName()))
+			ctx.JSON(http.StatusOK, map[string]interface{}{
+				"redirect": "", // keep the user stay on current page, in case they want to do other operations.
+			})
+		} else if organization.IsErrLastOrgOwner(err) {
 			ctx.Flash.Error(ctx.Tr("form.last_org_owner"))
 			ctx.JSON(http.StatusOK, map[string]interface{}{
 				"redirect": ctx.Org.OrgLink + "/members",
 			})
-			return
+		} else {
+			log.Error("RemoveOrgUser(%d,%d): %v", org.ID, ctx.Doer.ID, err)
 		}
+		return
 	}
 
 	if err != nil {

templates/user/settings/organization.tmpl

@@ -17,9 +17,13 @@
 					{{range .Orgs}}
 					<div class="item">
 						<div class="right floated content">
-							<form method="post" action="{{.OrganisationLink}}/members/action/leave">
+							<form>
 								{{$.CsrfTokenHtml}}
-								<button type="submit" class="ui primary small button" name="uid" value="{{.ID}}">{{$.locale.Tr "org.members.leave"}}</button>
+								<button class="ui red button delete-button" data-modal-id="leave-organization"
+												data-url="{{.OrganisationLink}}/members/action/leave" data-datauid="{{$.SignedUser.ID}}"
+												data-name="{{$.SignedUser.DisplayName}}"
+												data-data-organization-name="{{.DisplayName}}">{{$.locale.Tr "org.members.leave"}}
+								</button>
 							</form>
 						</div>
 						{{avatar . 28 "mini"}}
@@ -36,4 +40,14 @@
 		</div>
 	</div>
 </div>
+<div class="ui small basic delete modal" id="leave-organization">
+	<div class="ui icon header">
+		{{svg "octicon-x" 16 "close inside"}}
+		{{$.locale.Tr "org.members.leave"}}
+	</div>
+	<div class="content">
+		<p>{{$.locale.Tr "org.members.leave.detail" `<span class="dataOrganizationName"></span>` | Safe}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
 {{template "base/footer" .}}