From 48207bc2a26cd567104bc67ffef40f34a5b0b78a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sat, 3 Sep 2022 22:34:58 -0400
Subject: [PATCH] advanced/api/web-crawler pages

---
 public/scss/admin/admin.scss                  |   1 -
 .../admin/partials/api/sorted-list/form.tpl   |  10 +-
 .../admin/partials/api/sorted-list/item.tpl   |   8 +-
 src/views/admin/settings/advanced.tpl         | 163 +++++++++---------
 src/views/admin/settings/api.tpl              |  16 +-
 src/views/admin/settings/web-crawler.tpl      |  23 ++-
 6 files changed, 109 insertions(+), 112 deletions(-)

diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss
index c5c094f536..fd9986c6c7 100644
--- a/public/scss/admin/admin.scss
+++ b/public/scss/admin/admin.scss
@@ -39,7 +39,6 @@ body {
 
 	h1 {
 		font-size: 35px;
-		margin-bottom: 50px;
 	}
 
 	label {
diff --git a/src/views/admin/partials/api/sorted-list/form.tpl b/src/views/admin/partials/api/sorted-list/form.tpl
index 00acbe7c05..1ce54cf56a 100644
--- a/src/views/admin/partials/api/sorted-list/form.tpl
+++ b/src/views/admin/partials/api/sorted-list/form.tpl
@@ -1,15 +1,15 @@
 <form>
     <input type="hidden" name="token" />
     <input type="hidden" name="timestamp" />
-    <div class="form-group">
-        <label for="uid">[[admin/settings/api:uid]]</label>
+    <div class="mb-3">
+        <label class="form-label" for="uid">[[admin/settings/api:uid]]</label>
         <input type="number" name="uid" class="form-control" placeholder="1" min="0" />
-        <p class="help-text">
+        <p class="form-text">
             [[admin/settings/api:uid-help-text]]
         </p>
     </div>
-    <div class="form-group">
-        <label for="description">[[admin/settings/api:description]]</label>
+    <div class="mb-3">
+        <label class="form-label" for="description">[[admin/settings/api:description]]</label>
         <input type="text" name="description" class="form-control" placeholder="Description" />
     </div>
 </form>
\ No newline at end of file
diff --git a/src/views/admin/partials/api/sorted-list/item.tpl b/src/views/admin/partials/api/sorted-list/item.tpl
index 8c8daaa11f..41cbaa3a82 100644
--- a/src/views/admin/partials/api/sorted-list/item.tpl
+++ b/src/views/admin/partials/api/sorted-list/item.tpl
@@ -1,8 +1,8 @@
 <li data-type="item" class="list-group-item">
     <div class="row">
-        <div class="col-xs-9">
-            <span class="label label-primary">{{{ if uid }}}uid {uid}{{{ else }}}master{{{ end }}}</span>
-            {{{ if token }}}<input type="text" readonly="readonly" value="{token}" size="32" />{{{ else }}}<em class="text-warning">[[admin/settings/api:token-on-save]]</em>{{{ end }}}<br />
+        <div class="col-9">
+            <span class="badge bg-primary">{{{ if uid }}}uid {uid}{{{ else }}}master{{{ end }}}</span>
+            {{{ if token }}}<input class="form-control-plaintext" type="text" readonly="readonly" value="{token}" size="32" />{{{ else }}}<em class="text-warning">[[admin/settings/api:token-on-save]]</em>{{{ end }}}<br />
             <p>
                 {{{ if description }}}
                 {description}
@@ -13,7 +13,7 @@
                 <small>{timestampISO}</small>
             </p>
         </div>
-        <div class="col-xs-3 text-right">
+        <div class="col-3 text-end">
             <button type="button" data-type="edit" class="btn btn-info">Edit</button>
             <button type="button" data-type="remove" class="btn btn-danger">Delete</button>
         </div>
diff --git a/src/views/admin/settings/advanced.tpl b/src/views/admin/settings/advanced.tpl
index ae8f6e5c4d..106bea8f62 100644
--- a/src/views/admin/settings/advanced.tpl
+++ b/src/views/admin/settings/advanced.tpl
@@ -1,157 +1,156 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:maintenance-mode]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:maintenance-mode]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="maintenanceMode">
 					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:maintenance-mode]]</strong></span>
 				</label>
 			</div>
-			<p class="help-block">
+			<p class="form-text">
 				[[admin/settings/advanced:maintenance-mode.help]]
 			</p>
-			<div class="form-group">
-				<label for="maintenanceModeStatus">[[admin/settings/advanced:maintenance-mode.status]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maintenanceModeStatus">[[admin/settings/advanced:maintenance-mode.status]]</label>
 				<input id="maintenanceModeStatus" class="form-control" type="text" data-field="maintenanceModeStatus">
 			</div>
-			<div class="form-group">
-				<label for="maintenanceModeMessage">[[admin/settings/advanced:maintenance-mode.message]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maintenanceModeMessage">[[admin/settings/advanced:maintenance-mode.message]]</label>
 				<textarea id="maintenanceModeMessage" class="form-control" data-field="maintenanceModeMessage"></textarea>
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:headers]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:headers]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="csp-frame-ancestors">[[admin/settings/advanced:headers.csp-frame-ancestors]]</label>
-				<input class="form-control" id="csp-frame-ancestors" type="text" placeholder="https://a.example.com https://b.example.com" data-field="csp-frame-ancestors" /><br />
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="csp-frame-ancestors">[[admin/settings/advanced:headers.csp-frame-ancestors]]</label>
+				<input class="form-control" id="csp-frame-ancestors" type="text" placeholder="https://a.example.com https://b.example.com" data-field="csp-frame-ancestors" />
+				<p class="form-text">
 					[[admin/settings/advanced:headers.csp-frame-ancestors-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="powered-by">[[admin/settings/advanced:headers.powered-by]]</label>
-				<input class="form-control" id="powered-by" type="text" placeholder="NodeBB" data-field="powered-by" /><br />
+			<div class="mb-3">
+				<label class="form-label" for="powered-by">[[admin/settings/advanced:headers.powered-by]]</label>
+				<input class="form-control" id="powered-by" type="text" placeholder="NodeBB" data-field="powered-by" />
 			</div>
-			<div class="form-group">
-				<label for="access-control-allow-origin">[[admin/settings/advanced:headers.acao]]</label>
-				<input class="form-control" id="access-control-allow-origin" type="text" placeholder="" value="" data-field="access-control-allow-origin" /><br />
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="access-control-allow-origin">[[admin/settings/advanced:headers.acao]]</label>
+				<input class="form-control" id="access-control-allow-origin" type="text" placeholder="" value="" data-field="access-control-allow-origin" />
+				<p class="form-text">
 					[[admin/settings/advanced:headers.acao-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="access-control-allow-origin-regex">[[admin/settings/advanced:headers.acao-regex]]</label>
-				<input class="form-control" id="access-control-allow-origin-regex" type="text" placeholder="" value="" data-field="access-control-allow-origin-regex" /><br />
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="access-control-allow-origin-regex">[[admin/settings/advanced:headers.acao-regex]]</label>
+				<input class="form-control" id="access-control-allow-origin-regex" type="text" placeholder="" value="" data-field="access-control-allow-origin-regex" />
+				<p class="form-text">
 					[[admin/settings/advanced:headers.acao-regex-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="access-control-allow-credentials">[[admin/settings/advanced:headers.acac]]</label>
-				<input class="form-control" id="access-control-allow-credentials" type="text" placeholder="" value="" data-field="access-control-allow-credentials" /><br />
+			<div class="mb-3">
+				<label class="form-label" for="access-control-allow-credentials">[[admin/settings/advanced:headers.acac]]</label>
+				<input class="form-control" id="access-control-allow-credentials" type="text" placeholder="" value="" data-field="access-control-allow-credentials" />
 			</div>
-			<div class="form-group">
-				<label for="access-control-allow-methods">[[admin/settings/advanced:headers.acam]]</label>
-				<input class="form-control" id="access-control-allow-methods" type="text" placeholder="" data-field="access-control-allow-methods" /><br />
+			<div class="mb-3">
+				<label class="form-label" for="access-control-allow-methods">[[admin/settings/advanced:headers.acam]]</label>
+				<input class="form-control" id="access-control-allow-methods" type="text" placeholder="" data-field="access-control-allow-methods" />
 			</div>
-			<div class="form-group">
-				<label for="access-control-allow-headers">[[admin/settings/advanced:headers.acah]]</label>
-				<input class="form-control" id="access-control-allow-headers" type="text" placeholder="" data-field="access-control-allow-headers" /><br />
+			<div class="mb-3">
+				<label class="form-label" for="access-control-allow-headers">[[admin/settings/advanced:headers.acah]]</label>
+				<input class="form-control" id="access-control-allow-headers" type="text" placeholder="" data-field="access-control-allow-headers" />
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="cross-origin-embedder-policy" id="cross-origin-embedder-policy">
 					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:headers.coep]]</strong></span>
 				</label>
 			</div>
-			<p class="help-block">[[admin/settings/advanced:headers.coep-help]]</p>
-			<div class="form-group">
+			<p class="form-text">[[admin/settings/advanced:headers.coep-help]]</p>
+			<div class="mb-3">
 				<label for="cross-origin-resource-policy">[[admin/settings/advanced:headers.coop]]</label>
-				<select class="form-control" id="cross-origin-opener-policy" data-field="cross-origin-opener-policy">
+				<select class="form-select" id="cross-origin-opener-policy" data-field="cross-origin-opener-policy">
 					<option value="same-origin">same-origin</option>
 					<option value="same-origin-allow-popups">same-origin-allow-popups</option>
 					<option value="unsafe-none">unsafe-none</option>
 				</select>
 			</div>
 
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="cross-origin-resource-policy">[[admin/settings/advanced:headers.corp]]</label>
-				<select class="form-control" id="cross-origin-resource-policy" data-field="cross-origin-resource-policy">
+				<select class="form-select" id="cross-origin-resource-policy" data-field="cross-origin-resource-policy">
 					<option value="same-site">same-site</option>
 					<option value="same-origin">same-origin</option>
 					<option value="cross-origin">cross-origin</option>
 				</select>
-				<br />
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:hsts]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:hsts]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="hsts-enabled" checked>
 					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:hsts.enabled]]</strong></span>
 				</label>
 			</div>
-			<div class="form-group">
-				<label for="hsts-maxage">[[admin/settings/advanced:hsts.maxAge]]</label>
-				<input class="form-control" id="hsts-maxage" type="number" placeholder="31536000" data-field="hsts-maxage" /><br />
+			<div class="mb-3">
+				<label class="form-label" for="hsts-maxage">[[admin/settings/advanced:hsts.maxAge]]</label>
+				<input class="form-control" id="hsts-maxage" type="number" placeholder="31536000" data-field="hsts-maxage" />
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="hsts-subdomains" checked>
 					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:hsts.subdomains]]</strong></span>
 				</label>
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="hsts-preload">
 					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:hsts.preload]]</strong></span>
 				</label>
 			</div>
-			<p class="help-block">
+			<p class="form-text">
 				[[admin/settings/advanced:hsts.help, https:\/\/hstspreload.org\/]]
 			</p>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:traffic-management]]</div>
-	<div class="col-sm-10 col-xs-12">
-		<p class="help-block">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:traffic-management]]</div>
+	<div class="col-sm-10 col-12">
+		<p class="form-text">
 			[[admin/settings/advanced:traffic.help]]
 		</p>
 		<form>
-			<div class="form-group">
+			<div class="mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="eventLoopCheckEnabled">
 					<input class="mdl-switch__input" id="eventLoopCheckEnabled" type="checkbox" data-field="eventLoopCheckEnabled" checked />
 					<span class="mdl-switch__label">[[admin/settings/advanced:traffic.enable]]</span>
 				</label>
 			</div>
-			<div class="form-group">
-				<label for="eventLoopLagThreshold">[[admin/settings/advanced:traffic.event-lag]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="eventLoopLagThreshold">[[admin/settings/advanced:traffic.event-lag]]</label>
 				<input class="form-control" id="eventLoopLagThreshold" type="number" data-field="eventLoopLagThreshold" placeholder="Default: 70" step="10" min="10" value="70" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/advanced:traffic.event-lag-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="eventLoopInterval">[[admin/settings/advanced:traffic.lag-check-interval]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="eventLoopInterval">[[admin/settings/advanced:traffic.lag-check-interval]]</label>
 				<input class="form-control" id="eventLoopInterval" type="number" data-field="eventLoopInterval" placeholder="Default: 500" value="500" step="50" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/advanced:traffic.lag-check-interval-help]]
 				</p>
 			</div>
@@ -159,30 +158,30 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:sockets.settings]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:sockets.settings]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="maxReconnectionAttempts">[[admin/settings/advanced:sockets.max-attempts]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maxReconnectionAttempts">[[admin/settings/advanced:sockets.max-attempts]]</label>
 				<input class="form-control" id="maxReconnectionAttempts" type="text" value="5" placeholder="[[admin/settings/advanced:sockets.default-placeholder, 5]]" data-field="maxReconnectionAttempts" />
 			</div>
-			<div class="form-group">
-				<label for="reconnectionDelay">[[admin/settings/advanced:sockets.delay]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="reconnectionDelay">[[admin/settings/advanced:sockets.delay]]</label>
 				<input class="form-control" id="reconnectionDelay" type="text" value="1500" placeholder="[[admin/settings/advanced:sockets.default-placeholder, 1500]]" data-field="reconnectionDelay" />
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:analytics.settings]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:analytics.settings]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="analytics:maxCache">[[admin/settings/advanced:analytics.max-cache]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="analytics:maxCache">[[admin/settings/advanced:analytics.max-cache]]</label>
 				<input class="form-control" id="analytics:maxCache" type="text" value="500" placeholder="500" data-field="analytics:maxCache" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/advanced:analytics.max-cache-help]]
 				</p>
 			</div>
@@ -190,12 +189,12 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/advanced:compression.settings]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:compression.settings]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<p class="help-block">
+			<div class="mb-3">
+				<p class="form-text">
 					[[admin/settings/advanced:compression.help]]
 				</p>
 				<div class="checkbox">
diff --git a/src/views/admin/settings/api.tpl b/src/views/admin/settings/api.tpl
index 9ee1cd35f6..aafb723453 100644
--- a/src/views/admin/settings/api.tpl
+++ b/src/views/admin/settings/api.tpl
@@ -10,25 +10,25 @@
 
 	<hr />
 
-	<div class="row">
-		<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/api:settings]]</div>
-		<div class="col-sm-10 col-xs-12">
+	<div class="row mb-4">
+		<div class="col-sm-2 col-12 settings-header">[[admin/settings/api:settings]]</div>
+		<div class="col-sm-10 col-12">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input id="requireHttps" class="mdl-switch__input" type="checkbox" name="requireHttps" />
 					<span class="mdl-switch__label">[[admin/settings/api:require-https]]</span>
 				</label>
 			</div>
-			<p class="help-block">[[admin/settings/api:require-https-caveat]]</p>
+			<p class="form-text">[[admin/settings/api:require-https-caveat]]</p>
 		</div>
 	</div>
 
-	<div class="row">
-		<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/api:tokens]]</div>
-		<div class="col-sm-10 col-xs-12">
+	<div class="row mb-4">
+		<div class="col-sm-2 col-12 settings-header">[[admin/settings/api:tokens]]</div>
+		<div class="col-sm-10 col-12">
 			<div class="form-group" data-type="sorted-list" data-sorted-list="tokens" data-item-template="admin/partials/api/sorted-list/item" data-form-template="admin/partials/api/sorted-list/form">
 				<input type="hidden" name="tokens">
-				<ul data-type="list" class="list-group"></ul>
+				<ul data-type="list" class="list-group mb-3"></ul>
 				<button type="button" data-type="add" class="btn btn-info">Create Token</button>
 			</div>
 		</div>
diff --git a/src/views/admin/settings/web-crawler.tpl b/src/views/admin/settings/web-crawler.tpl
index bf818358e2..74733d8ea8 100644
--- a/src/views/admin/settings/web-crawler.tpl
+++ b/src/views/admin/settings/web-crawler.tpl
@@ -1,39 +1,38 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/web-crawler:crawlability-settings]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/web-crawler:crawlability-settings]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<strong>[[admin/settings/web-crawler:robots-txt]]</strong><br />
+			<label class="form-label">[[admin/settings/web-crawler:robots-txt]]</label>
 			<textarea class="form-control" data-field="robots:txt"></textarea>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/web-crawler:sitemap-feed-settings]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/web-crawler:sitemap-feed-settings]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="feeds:disableRSS">
 					<span class="mdl-switch__label"><strong>[[admin/settings/web-crawler:disable-rss-feeds]]</strong></span>
 				</label>
 			</div>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="feeds:disableSitemap">
 					<span class="mdl-switch__label"><strong>[[admin/settings/web-crawler:disable-sitemap-xml]]</strong></span>
 				</label>
 			</div>
 
-			<div class="form-group">
-				<label for="sitemapTopics">[[admin/settings/web-crawler:sitemap-topics]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="sitemapTopics">[[admin/settings/web-crawler:sitemap-topics]]</label>
 				<input id="sitemapTopics" class="form-control" type="text" data-field="sitemapTopics" />
 			</div>
 
-			<br />
 			<p>
 				<button id="clear-sitemap-cache" class="btn btn-warning">[[admin/settings/web-crawler:clear-sitemap-cache]]</button>
 				<a href="{config.relative_path}/sitemap.xml" target="_blank" class="btn btn-link">[[admin/settings/web-crawler:view-sitemap]]</a>