Improve protected branch setting page (#24379)

Main changes:

1. Change html structure of protected branch page, use [`grouped
fields`](https://fomantic-ui.com/collections/form.html#grouped-fields)
instead of `fields` for better margin, and wrap `grouped fields` around
related `field`s, remove unnecessary `<div id="protection_box"
class="fields">` outer div

2. Changed some order of field to make them more categorized, used `ui
dividing header` for categorization and fine tune css.

Before:

<img width="1907" alt="Screen Shot 2023-04-27 at 14 56 19"
src="https://user-images.githubusercontent.com/17645053/234783731-bce8a7ce-dfc9-4d47-a3a8-b962ebea9467.png">
<img width="1849" alt="Screen Shot 2023-04-27 at 14 56 30"
src="https://user-images.githubusercontent.com/17645053/234783740-c47d314e-5e2d-4854-98fd-c88f85ef3584.png">
<img width="1872" alt="Screen Shot 2023-04-27 at 14 56 36"
src="https://user-images.githubusercontent.com/17645053/234783745-18e35a75-07e8-451d-b001-f9bcf16fcab5.png">

After:


https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov



3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable
Merge" radio checkbox, which are exclusive

Before:

<img width="926" alt="Screen Shot 2023-04-28 at 13 08 29"
src="https://user-images.githubusercontent.com/17645053/235059233-75790f7a-e5ea-4e1c-82c6-509fef8b84b3.png">

After:

<img width="942" alt="Screen Shot 2023-04-28 at 13 09 28"
src="https://user-images.githubusercontent.com/17645053/235059367-852d1f61-8407-4126-8c79-315b9c1ffada.png">


4. Add a link to set default branch on branch list page (with reference
to github)


https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov

5. Removed dead codes.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

3 files changed, 155 insertions, 152 deletions

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 596d9ae78b..40d6351301 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -5,8 +5,13 @@
 		{{template "base/alert" .}}
 		{{template "repo/sub_menu" .}}
 		{{if .DefaultBranchBranch}}
-			<h4 class="ui top attached header gt-mt-4">
+			<h4 class="ui top attached header">
 				{{.locale.Tr "repo.default_branch"}}
+				{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
+				<a role="button" class="right" href="{{.RepoLink}}/settings/branches" data-tooltip-content="{{.locale.Tr "repo.settings.branches.switch_default_branch"}}">
+					{{svg "octicon-arrow-switch"}}
+				</a>
+				{{end}}
 			</h4>
 
 			<div class="ui attached table segment">
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index f74a2a837d..8023d39fed 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -12,18 +12,13 @@
 				<p>
 					{{.locale.Tr "repo.settings.default_branch_desc"}}
 				</p>
-				<form class="ui form" action="{{.Link}}" method="post">
+				<form class="gt-df" action="{{.Link}}" method="post">
 					{{.CsrfTokenHtml}}
 					<input type="hidden" name="action" value="default_branch">
 					{{if not .Repository.IsEmpty}}
-					<div class="required inline field">
-						<div class="ui dropdown selection" tabindex="0">
-							<select name="branch">
-								<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>
-								{{range .Branches}}
-									<option value="{{.}}">{{.}}</option>
-								{{end}}
-							</select>{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="ui dropdown selection gt-f1 gt-mr-3 gt-max-width-24rem">
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+							<input type="hidden" name="branch" value="{{.Repository.DefaultBranch}}">
 							<div class="default text">{{.Repository.DefaultBranch}}</div>
 							<div class="menu">
 								{{range .Branches}}
@@ -32,7 +27,6 @@
 							</div>
 						</div>
 						<button class="ui green button">{{$.locale.Tr "repo.settings.branches.update_default_branch"}}</button>
-					</div>
 					{{end}}
 				</form>
 			</div>
diff --git a/templates/repo/settings/protected_branch.tmpl b/templates/repo/settings/protected_branch.tmpl
index 31ba0bf888..2102dac641 100644
--- a/templates/repo/settings/protected_branch.tmpl
+++ b/templates/repo/settings/protected_branch.tmpl
@@ -5,39 +5,49 @@
 				{{.locale.Tr "repo.settings.branch_protection" (.Rule.RuleName|Escape) | Str2html}}
 			</h4>
 			<div class="ui attached segment branch-protection">
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.protect_patterns"}}</h5>
 				<div class="field">
-					<label for="protected_file_patterns">{{.locale.Tr "repo.settings.protect_branch_name_pattern"}}</label>
+					<label>{{.locale.Tr "repo.settings.protect_branch_name_pattern"}}</label>
 					<input name="rule_name" type="text" value="{{.Rule.RuleName}}">
 					<input name="rule_id" type="hidden" value="{{.Rule.ID}}">
 				</div>
-
-				<div class="ui divider"></div>
+				<div class="field">
+					<label>{{.locale.Tr "repo.settings.protect_protected_file_patterns"}}</label>
+					<input name="protected_file_patterns" type="text" value="{{.Rule.ProtectedFilePatterns}}">
+					<p class="help gt-ml-0">{{.locale.Tr "repo.settings.protect_protected_file_patterns_desc" | Safe}}</p>
+				</div>
+				<div class="field">
+					<label>{{.locale.Tr "repo.settings.protect_unprotected_file_patterns"}}</label>
+					<input name="unprotected_file_patterns" type="text" value="{{.Rule.UnprotectedFilePatterns}}">
+					<p class="help gt-ml-0">{{.locale.Tr "repo.settings.protect_unprotected_file_patterns_desc" | Safe}}</p>
+				</div>
 
 				{{.CsrfTokenHtml}}
-				<div id="protection_box" class="fields">
-					<div class="field">
-						<div class="ui radio checkbox">
-							<input name="enable_push" type="radio" value="none" class="disable-whitelist" data-target="#whitelist_box" {{if not .Rule.CanPush}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_disable_push"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_disable_push_desc"}}</p>
-						</div>
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.event_push"}}</h5>
+				<div class="field">
+					<div class="ui radio checkbox">
+						<input name="enable_push" type="radio" value="none" class="toggle-target-disabled" data-target="#whitelist_box" {{if not .Rule.CanPush}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.protect_disable_push"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.protect_disable_push_desc"}}</p>
 					</div>
-					<div class="field">
-						<div class="ui radio checkbox">
-							<input name="enable_push" type="radio" value="all" class="disable-whitelist" data-target="#whitelist_box" {{if and (.Rule.CanPush) (not .Rule.EnableWhitelist)}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_enable_push"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_enable_push_desc"}}</p>
-						</div>
+				</div>
+				<div class="field">
+					<div class="ui radio checkbox">
+						<input name="enable_push" type="radio" value="all" class="toggle-target-disabled" data-target="#whitelist_box" {{if and (.Rule.CanPush) (not .Rule.EnableWhitelist)}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.protect_enable_push"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.protect_enable_push_desc"}}</p>
 					</div>
+				</div>
+				<div class="grouped fields">
 					<div class="field">
 						<div class="ui radio checkbox">
-							<input name="enable_push" type="radio" value="whitelist" class="enable-whitelist" data-target="#whitelist_box" {{if and (.Rule.CanPush) (.Rule.EnableWhitelist)}}checked{{end}}>
+							<input name="enable_push" type="radio" value="whitelist" class="toggle-target-enabled" data-target="#whitelist_box" {{if and (.Rule.CanPush) (.Rule.EnableWhitelist)}}checked{{end}}>
 							<label>{{.locale.Tr "repo.settings.protect_whitelist_committers"}}</label>
 							<p class="help">{{.locale.Tr "repo.settings.protect_whitelist_committers_desc"}}</p>
 						</div>
 					</div>
-					<div id="whitelist_box" class="fields {{if not .Rule.EnableWhitelist}}disabled{{end}}">
-						<div class="whitelist field">
+					<div id="whitelist_box" class="grouped fields {{if not .Rule.EnableWhitelist}}disabled{{end}}">
+						<div class="checkbox-sub-item field">
 							<label>{{.locale.Tr "repo.settings.protect_whitelist_users"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="whitelist_users" value="{{.whitelist_users}}">
@@ -52,8 +62,7 @@
 							</div>
 						</div>
 						{{if .Owner.IsOrganization}}
-							<br>
-							<div class="whitelist field">
+							<div class="checkbox-sub-item field">
 								<label>{{.locale.Tr "repo.settings.protect_whitelist_teams"}}</label>
 								<div class="ui multiple search selection dropdown">
 									<input type="hidden" name="whitelist_teams" value="{{.whitelist_teams}}">
@@ -69,105 +78,37 @@
 								</div>
 							</div>
 						{{end}}
-						<br>
-						<div class="whitelist field">
+						<div class="checkbox-sub-item field">
 							<div class="ui checkbox">
 								<input type="checkbox" name="whitelist_deploy_keys" {{if .Rule.WhitelistDeployKeys}}checked{{end}}>
-								<label for="whitelist_deploy_keys">{{.locale.Tr "repo.settings.protect_whitelist_deploy_keys"}}</label>
-							</div>
-						</div>
-					</div>
-
-					<div class="ui divider"></div>
-
-					<div class="field">
-						<div class="ui checkbox">
-							<input class="enable-whitelist" name="enable_merge_whitelist" type="checkbox" data-target="#merge_whitelist_box" {{if .Rule.EnableMergeWhitelist}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_committers"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_merge_whitelist_committers_desc"}}</p>
-						</div>
-					</div>
-					<div id="merge_whitelist_box" class="fields {{if not .Rule.EnableMergeWhitelist}}disabled{{end}}">
-						<div class="whitelist field">
-							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_users"}}</label>
-							<div class="ui multiple search selection dropdown">
-								<input type="hidden" name="merge_whitelist_users" value="{{.merge_whitelist_users}}">
-								<div class="default text">{{.locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
-								<div class="menu">
-								{{range .Users}}
-									<div class="item" data-value="{{.ID}}">
-										{{avatar $.Context . 28 "mini"}}{{template "repo/search_name" .}}
-									</div>
-								{{end}}
-								</div>
+								<label>{{.locale.Tr "repo.settings.protect_whitelist_deploy_keys"}}</label>
 							</div>
 						</div>
-					{{if .Owner.IsOrganization}}
-						<br>
-						<div class="whitelist field">
-							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_teams"}}</label>
-							<div class="ui multiple search selection dropdown">
-								<input type="hidden" name="merge_whitelist_teams" value="{{.merge_whitelist_teams}}">
-								<div class="default text">{{.locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
-								<div class="menu">
-								{{range .Teams}}
-									<div class="item" data-value="{{.ID}}">
-										{{svg "octicon-people"}}
-									{{.Name}}
-									</div>
-								{{end}}
-								</div>
-							</div>
-						</div>
-					{{end}}
-					</div>
-
-					<div class="field">
-						<div class="ui checkbox">
-							<input class="enable-statuscheck" name="enable_status_check" type="checkbox" data-target="#statuscheck_contexts_box" {{if eq (len .branch_status_check_contexts) 0}}disabled{{end}} {{if .Rule.EnableStatusCheck}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_check_status_contexts"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_check_status_contexts_desc"}}</p>
-						</div>
-					</div>
-
-					<div id="statuscheck_contexts_box" class="fields {{if not .Rule.EnableStatusCheck}}disabled{{end}}">
-						<div class="field">
-							<table class="ui celled table six column">
-								<thead>
-									<tr><th>
-										{{.locale.Tr "repo.settings.protect_check_status_contexts_list"}}
-									</th>
-									</tr>
-								</thead>
-								<tbody>
-								{{range $.branch_status_check_contexts}}
-									<tr><td>
-										<span class="ui checkbox">
-											<input class="enable-whitelist" name="status_check_contexts" value="{{.}}" type="checkbox" {{if $.is_context_required}}{{if call $.is_context_required .}}checked{{end}}{{end}}>
-										</span>
-										{{.}}
-										{{if $.is_context_required}}{{if call $.is_context_required .}}<div class="ui label right">Required</div>{{end}}{{end}}
-									</td></tr>
-								{{end}}
-								</tbody>
-							</table>
-						</div>
 					</div>
-
-					<div class="field">
-						<label for="required-approvals">{{.locale.Tr "repo.settings.protect_required_approvals"}}</label>
-						<input name="required_approvals" id="required-approvals" type="number" value="{{.Rule.RequiredApprovals}}">
-						<p class="help">{{.locale.Tr "repo.settings.protect_required_approvals_desc"}}</p>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="require_signed_commits" type="checkbox" {{if .Rule.RequireSignedCommits}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.require_signed_commits"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.require_signed_commits_desc"}}</p>
 					</div>
+				</div>
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.event_pull_request_approvals"}}</h5>
+				<div class="field">
+					<label>{{.locale.Tr "repo.settings.protect_required_approvals"}}</label>
+					<input name="required_approvals" type="number" value="{{.Rule.RequiredApprovals}}">
+					<p class="help gt-ml-0">{{.locale.Tr "repo.settings.protect_required_approvals_desc"}}</p>
+				</div>
+				<div class="grouped fields">
 					<div class="field">
 						<div class="ui checkbox">
-							<input class="enable-whitelist" name="enable_approvals_whitelist" type="checkbox" data-target="#approvals_whitelist_box" {{if .Rule.EnableApprovalsWhitelist}}checked{{end}}>
+							<input name="enable_approvals_whitelist" type="checkbox" class="toggle-target-enabled" data-target="#approvals_whitelist_box" {{if .Rule.EnableApprovalsWhitelist}}checked{{end}}>
 							<label>{{.locale.Tr "repo.settings.protect_approvals_whitelist_enabled"}}</label>
 							<p class="help">{{.locale.Tr "repo.settings.protect_approvals_whitelist_enabled_desc"}}</p>
 						</div>
 					</div>
-					<div id="approvals_whitelist_box" class="fields {{if not .Rule.EnableApprovalsWhitelist}}disabled{{end}}">
-						<div class="whitelist field">
+					<div id="approvals_whitelist_box" class="grouped fields {{if not .Rule.EnableApprovalsWhitelist}}disabled{{end}}">
+						<div class="checkbox-sub-item field">
 							<label>{{.locale.Tr "repo.settings.protect_approvals_whitelist_users"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="approvals_whitelist_users" value="{{.approvals_whitelist_users}}">
@@ -182,8 +123,7 @@
 							</div>
 						</div>
 						{{if .Owner.IsOrganization}}
-							<br>
-							<div class="whitelist field">
+							<div class="checkbox-sub-item field">
 								<label>{{.locale.Tr "repo.settings.protect_approvals_whitelist_teams"}}</label>
 								<div class="ui multiple search selection dropdown">
 									<input type="hidden" name="approvals_whitelist_teams" value="{{.approvals_whitelist_teams}}">
@@ -200,53 +140,117 @@
 							</div>
 						{{end}}
 					</div>
-					<div class="field">
-						<div class="ui checkbox">
-							<input name="block_on_rejected_reviews" type="checkbox" {{if .Rule.BlockOnRejectedReviews}}checked{{end}}>
-							<label for="block_on_rejected_reviews">{{.locale.Tr "repo.settings.block_rejected_reviews"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.block_rejected_reviews_desc"}}</p>
-						</div>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="dismiss_stale_approvals" type="checkbox" {{if .Rule.DismissStaleApprovals}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.dismiss_stale_approvals"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.dismiss_stale_approvals_desc"}}</p>
 					</div>
+				</div>
+				<div class="grouped fields">
 					<div class="field">
 						<div class="ui checkbox">
-							<input name="block_on_official_review_requests" type="checkbox" {{if .Rule.BlockOnOfficialReviewRequests}}checked{{end}}>
-							<label for="block_on_official_review_requests">{{.locale.Tr "repo.settings.block_on_official_review_requests"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.block_on_official_review_requests_desc"}}</p>
+							<input name="enable_status_check" type="checkbox" class="toggle-target-enabled" data-target="#statuscheck_contexts_box" {{if .Rule.EnableStatusCheck}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.protect_check_status_contexts"}}</label>
+							<p class="help">{{.locale.Tr "repo.settings.protect_check_status_contexts_desc"}}</p>
 						</div>
 					</div>
+					<div id="statuscheck_contexts_box" class="checkbox-sub-item field {{if not .Rule.EnableStatusCheck}}disabled{{end}}">
+						<table class="ui celled table">
+							<thead>
+								<tr>
+									<th>{{.locale.Tr "repo.settings.protect_check_status_contexts_list"}}</th>
+								</tr>
+							</thead>
+							<tbody>
+							{{range $.branch_status_check_contexts}}
+								<tr>
+									<td>
+										<span class="ui checkbox">
+											<label>{{.}}</label>
+											<input name="status_check_contexts" value="{{.}}" type="checkbox" {{if SliceUtils.Contains $.Rule.StatusCheckContexts .}}checked{{end}}>
+										</span>
+									</td>
+								</tr>
+							{{else}}
+								<tr><td>N/A</td></tr>
+							{{end}}
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.event_pull_request_merge"}}</h5>
+				<div class="grouped fields">
 					<div class="field">
-						<div class="ui checkbox">
-							<input name="dismiss_stale_approvals" type="checkbox" {{if .Rule.DismissStaleApprovals}}checked{{end}}>
-							<label for="dismiss_stale_approvals">{{.locale.Tr "repo.settings.dismiss_stale_approvals"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.dismiss_stale_approvals_desc"}}</p>
+						<div class="ui radio checkbox">
+							<input name="enable_merge_whitelist" type="radio" value="false" class="toggle-target-disabled" data-target="#merge_whitelist_box" {{if not .Rule.EnableMergeWhitelist}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.protect_enable_merge"}}</label>
+							<p class="help">{{.locale.Tr "repo.settings.protect_enable_merge_desc"}}</p>
 						</div>
 					</div>
 					<div class="field">
-						<div class="ui checkbox">
-							<input name="require_signed_commits" type="checkbox" {{if .Rule.RequireSignedCommits}}checked{{end}}>
-							<label for="require_signed_commits">{{.locale.Tr "repo.settings.require_signed_commits"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.require_signed_commits_desc"}}</p>
+						<div class="ui radio checkbox">
+							<input name="enable_merge_whitelist" type="radio" value="true" class="toggle-target-enabled" data-target="#merge_whitelist_box" {{if .Rule.EnableMergeWhitelist}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_committers"}}</label>
+							<p class="help">{{.locale.Tr "repo.settings.protect_merge_whitelist_committers_desc"}}</p>
 						</div>
 					</div>
-					<div class="field">
-						<div class="ui checkbox">
-							<input name="block_on_outdated_branch" type="checkbox" {{if .Rule.BlockOnOutdatedBranch}}checked{{end}}>
-							<label for="block_on_outdated_branch">{{.locale.Tr "repo.settings.block_outdated_branch"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.block_outdated_branch_desc"}}</p>
+					<div id="merge_whitelist_box" class="grouped fields {{if not .Rule.EnableMergeWhitelist}}disabled{{end}}">
+						<div class="checkbox-sub-item field">
+							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_users"}}</label>
+							<div class="ui multiple search selection dropdown">
+								<input type="hidden" name="merge_whitelist_users" value="{{.merge_whitelist_users}}">
+								<div class="default text">{{.locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
+								<div class="menu">
+								{{range .Users}}
+									<div class="item" data-value="{{.ID}}">
+										{{avatar $.Context . 28 "mini"}}{{template "repo/search_name" .}}
+									</div>
+								{{end}}
+								</div>
+							</div>
 						</div>
+					{{if .Owner.IsOrganization}}
+						<div class="checkbox-sub-item field">
+							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_teams"}}</label>
+							<div class="ui multiple search selection dropdown">
+								<input type="hidden" name="merge_whitelist_teams" value="{{.merge_whitelist_teams}}">
+								<div class="default text">{{.locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
+								<div class="menu">
+								{{range .Teams}}
+									<div class="item" data-value="{{.ID}}">
+										{{svg "octicon-people"}}
+									{{.Name}}
+									</div>
+								{{end}}
+								</div>
+							</div>
+						</div>
+					{{end}}
 					</div>
-					<div class="field">
-						<label for="protected_file_patterns">{{.locale.Tr "repo.settings.protect_protected_file_patterns"}}</label>
-						<input name="protected_file_patterns" id="protected_file_patterns" type="text" value="{{.Rule.ProtectedFilePatterns}}">
-						<p class="help">{{.locale.Tr "repo.settings.protect_protected_file_patterns_desc" | Safe}}</p>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="block_on_rejected_reviews" type="checkbox" {{if .Rule.BlockOnRejectedReviews}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.block_rejected_reviews"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.block_rejected_reviews_desc"}}</p>
 					</div>
-					<div class="field">
-						<label for="unprotected_file_patterns">{{.locale.Tr "repo.settings.protect_unprotected_file_patterns"}}</label>
-						<input name="unprotected_file_patterns" id="unprotected_file_patterns" type="text" value="{{.Rule.UnprotectedFilePatterns}}">
-						<p class="help">{{.locale.Tr "repo.settings.protect_unprotected_file_patterns_desc" | Safe}}</p>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="block_on_official_review_requests" type="checkbox" {{if .Rule.BlockOnOfficialReviewRequests}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.block_on_official_review_requests"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.block_on_official_review_requests_desc"}}</p>
+					</div>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="block_on_outdated_branch" type="checkbox" {{if .Rule.BlockOnOutdatedBranch}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.block_outdated_branch"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.block_outdated_branch_desc"}}</p>
 					</div>
 				</div>
-
 				<div class="ui divider"></div>
 
 				<div class="field">