Add modals to Organization and Team remove/leave (#16471)

* Add modals to Organization and Team remove/leave

Add confirmation modals to Organization and Team remove and leave.

Fix #16215

Signed-off-by: Andrew Thornton <art27@cantab.net>

* avoid for-in

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Revert "avoid for-in"

This reverts commit 2af9a6f9d46ed31b6fc6e3a29e695577dcf09f75.

* Apply suggestions from code review

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

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

4 files changed, 75 insertions, 17 deletions

diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl
index 0952d12766..ecb535d570 100644
--- a/templates/org/member/members.tmpl
+++ b/templates/org/member/members.tmpl
@@ -54,14 +54,18 @@
 					<div class="ui four wide column">
 						<div class="text right">
 							{{if eq $.SignedUser.ID .ID}}
-								<form method="post" action="{{$.OrgLink}}/members/action/leave">
-									{{$.CsrfTokenHtml}}
-									<button type="submit" class="ui red small button" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.leave"}}</button>
+								<form>
+									<button class="ui red small button delete-button" data-modal-id="leave-organization"
+										data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
+										data-name="{{.DisplayName}}"
+										data-data-organization-name="{{$.Org.DisplayName}}">{{$.i18n.Tr "org.members.leave"}}</button>
 								</form>
 							{{else if $.IsOrganizationOwner}}
-								<form method="post" action="{{$.OrgLink}}/members/action/remove">
-									{{$.CsrfTokenHtml}}
-									<button type="submit" class="ui red small button" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.remove"}}</button>
+								<form>
+									<button class="ui red small button delete-button" data-modal-id="remove-organization-member"
+										data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
+										data-name="{{.DisplayName}}"
+										data-data-organization-name="{{$.Org.DisplayName}}">{{$.i18n.Tr "org.members.remove"}}</button>
 								</form>
 							{{end}}
 						</div>
@@ -73,4 +77,25 @@
 		{{template "base/paginate" .}}
 	</div>
 </div>
+<div class="ui small basic delete modal" id="leave-organization">
+	<div class="ui icon header">
+		{{svg "octicon-x" 16 "close inside"}}
+		{{$.i18n.Tr "org.members.leave"}}
+	</div>
+	<div class="content">
+		<p>{{$.i18n.Tr "org.members.leave.detail" `<span class="dataOrganizationName"></span>` | Safe}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
+<div class="ui small basic delete modal" id="remove-organization-member">
+	<div class="ui icon header">
+		{{svg "octicon-x" 16 "close inside"}}
+		{{$.i18n.Tr "org.members.remove"}}
+	</div>
+	<div class="content">
+		<p>{{$.i18n.Tr "org.members.remove.detail" `<span class="name"></span>` `<span class="dataOrganizationName"></span>` | Safe}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
+
 {{template "base/footer" .}}
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
index bfc151d000..f2c89e0653 100644
--- a/templates/org/team/members.tmpl
+++ b/templates/org/team/members.tmpl
@@ -26,10 +26,12 @@
 				<div class="ui bottom attached table segment members">
 					{{range .Team.Members}}
 						<div class="item">
-							{{if $.IsOrganizationOwner}}
-								<form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/remove">
-									{{$.CsrfTokenHtml}}
-									<button type="submit" class="ui red small button right" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.remove"}}</button>
+							{{if and $.IsOrganizationOwner (not (eq $.SignedUser.ID .ID))}}
+								<form>
+									<button class="ui red button delete-button right" data-modal-id="remove-team-member"
+										data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/remove" data-datauid="{{.ID}}"
+										data-name="{{.DisplayName}}"
+										data-data-team-name="{{$.Team.Name}}">{{$.i18n.Tr "org.members.remove"}}</button>
 								</form>
 							{{end}}
 							<a href="{{.HomeLink}}">
@@ -47,4 +49,14 @@
 		</div>
 	</div>
 </div>
+<div class="ui small basic delete modal" id="remove-team-member">
+	<div class="ui icon header">
+		{{svg "octicon-x" 16 "close inside"}}
+		{{$.i18n.Tr "org.members.remove"}}
+	</div>
+	<div class="content">
+		<p>{{$.i18n.Tr "org.members.remove.detail" `<span class="name"></span>` `<span class="dataTeamName"></span>` | Safe}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
 {{template "base/footer" .}}
diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index 9ab6e8f4cd..84729a0841 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@@ -3,10 +3,10 @@
 		<strong>{{.Team.Name}}</strong>
 		<div class="ui right">
 			{{if .Team.IsMember $.SignedUser.ID}}
-				<form method="post" action="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/leave">
-					{{$.CsrfTokenHtml}}
-					<input type="hidden" name="page" value="home"/>
-					<button type="submit" class="ui red tiny button" name="uid" value="{{$.SignedUser.ID}}">{{$.i18n.Tr "org.teams.leave"}}</button>
+				<form>
+					<button class="ui red tiny button delete-button" data-modal-id="leave-team-sidebar"
+						data-url="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/leave" data-datauid="{{$.SignedUser.ID}}"
+						data-name="{{.Team.Name}}">{{$.i18n.Tr "org.teams.leave"}}</button>
 				</form>
 			{{else if .IsOrganizationOwner}}
 				<form method="post" action="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/join">
@@ -59,3 +59,13 @@
 		</div>
 	{{end}}
 </div>
+<div class="ui small basic delete modal" id="leave-team-sidebar">
+	<div class="ui icon header">
+		{{svg "octicon-x" 16 "close inside"}}
+		{{$.i18n.Tr "org.teams.leave"}}
+	</div>
+	<div class="content">
+		<p>{{$.i18n.Tr "org.teams.leave.detail" `<span class="name"></span>` | Safe}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl
index 4e877bef2a..6f4f155072 100644
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@@ -17,9 +17,10 @@
 						<a class="text black" href="{{$.OrgLink}}/teams/{{.LowerName}}"><strong>{{.Name}}</strong></a>
 						<div class="ui right">
 							{{if .IsMember $.SignedUser.ID}}
-								<form method="post" action="{{$.OrgLink}}/teams/{{.LowerName}}/action/leave">
-									{{$.CsrfTokenHtml}}
-									<button type="submit" class="ui red small button" name="uid" value="{{$.SignedUser.ID}}">{{$.i18n.Tr "org.teams.leave"}}</button>
+								<form>
+									<button class="ui red tiny button delete-button" data-modal-id="leave-team"
+										data-url="{{$.OrgLink}}/teams/{{.LowerName}}/action/leave" data-datauid="{{$.SignedUser.ID}}"
+										data-name="{{.Name}}">{{$.i18n.Tr "org.teams.leave"}}</button>
 								</form>
 							{{else if $.IsOrganizationOwner}}
 								<form method="post" action="{{$.OrgLink}}/teams/{{.LowerName}}/action/join">
@@ -44,4 +45,14 @@
 		</div>
 	</div>
 </div>
+<div class="ui small basic delete modal" id="leave-team">
+	<div class="ui icon header">
+		{{svg "octicon-x" 16 "close inside"}}
+		{{$.i18n.Tr "org.teams.leave"}}
+	</div>
+	<div class="content">
+		<p>{{$.i18n.Tr "org.teams.leave.detail" `<span class="name"></span>` | Safe}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
 {{template "base/footer" .}}