From 1952149b4c4056d6ce02c7fbbe5c69d5a5aed241 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Fri, 26 Sep 2014 19:43:12 -0400
Subject: [PATCH] settings pages done!

---
 src/views/admin/header.tpl               |   1 -
 src/views/admin/languages.tpl            |   2 +-
 src/views/admin/settings/advanced.tpl    |  57 +++---
 src/views/admin/settings/email.tpl       |  31 ++-
 src/views/admin/settings/general.tpl     | 105 +++++-----
 src/views/admin/settings/pagination.tpl  |  27 +--
 src/views/admin/settings/post.tpl        | 135 ++++++++-----
 src/views/admin/settings/reputation.tpl  |  68 ++++---
 src/views/admin/settings/sockets.tpl     |  39 ++--
 src/views/admin/settings/tags.tpl        |  15 +-
 src/views/admin/settings/user.tpl        | 245 +++++++++++++----------
 src/views/admin/settings/web-crawler.tpl |  41 ++--
 12 files changed, 437 insertions(+), 329 deletions(-)

diff --git a/src/views/admin/header.tpl b/src/views/admin/header.tpl
index 637de52f45..e57c70af21 100644
--- a/src/views/admin/header.tpl
+++ b/src/views/admin/header.tpl
@@ -100,7 +100,6 @@
 						<li class="nav-header"><i class="fa fa-fw fa-dashboard"></i> General</li>
 						<li class="active"><a href="{relative_path}/admin/index">Dashboard</a></li>
 						<li><a href="{relative_path}/admin/languages">Languages</a></li>
-						<li><a href="{relative_path}/admin/settings/general">Settings</a></li>
 						<li><a href="{relative_path}/admin/sounds">Sounds</a></li>
 					</ul>
 				</div>
diff --git a/src/views/admin/languages.tpl b/src/views/admin/languages.tpl
index 4a5d5fe6a1..21b689420d 100644
--- a/src/views/admin/languages.tpl
+++ b/src/views/admin/languages.tpl
@@ -1,7 +1,7 @@
 <div class="languages">
 	<div class="col-sm-9">
 		<div class="panel panel-default">
-			<div class="panel-heading">Languages</div>
+			<div class="panel-heading">Language Settings</div>
 			<div class="panel-body">
 				<p>
 					The default language determines the language settings for all users who
diff --git a/src/views/admin/settings/advanced.tpl b/src/views/admin/settings/advanced.tpl
index c62429a07d..26ee0700d4 100644
--- a/src/views/admin/settings/advanced.tpl
+++ b/src/views/admin/settings/advanced.tpl
@@ -1,30 +1,37 @@
-<div class="alert alert-warning">
-	<form>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="maintenanceMode"> <strong>Maintenance Mode</strong>
-			</label>
-		</div>
-		<p class="help-block">
-			When the forum is in maintenance mode, all requests will be redirected to a static holding page.
-			Administrators are exempt from this redirection, and are able to access the site normally.
-		</p>
-	</form>
-</div>
-<div class="alert alert-warning">
-	<form>
-		<div class="form-group">
-			<label for="allow-from-uri">Set ALLOW-FROM to Place NodeBB in an iFrame:</label>
-			<input class="form-control" id="allow-from-uri" type="text" placeholder="external-domain.com" data-field="allow-from-uri" /><br />
-		</div>
-		<div class="form-group">
-			<label for="cookieDomain">Set domain for session cookie</label>
-			<input class="form-control" id="cookieDomain" type="text" placeholder=".domain.tld" data-field="cookieDomain" /><br />
+<div class="panel panel-default">
+	<div class="panel-heading">Maintenance Mode</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="maintenanceMode"> <strong>Maintenance Mode</strong>
+				</label>
+			</div>
 			<p class="help-block">
-				Leave blank for default
+				When the forum is in maintenance mode, all requests will be redirected to a static holding page.
+				Administrators are exempt from this redirection, and are able to access the site normally.
 			</p>
-		</div>
-	</form>
+		</form>
+	</div>
+</div>
+
+<div class="panel panel-default">
+	<div class="panel-heading">Domain Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="form-group">
+				<label for="allow-from-uri">Set ALLOW-FROM to Place NodeBB in an iFrame:</label>
+				<input class="form-control" id="allow-from-uri" type="text" placeholder="external-domain.com" data-field="allow-from-uri" /><br />
+			</div>
+			<div class="form-group">
+				<label for="cookieDomain">Set domain for session cookie</label>
+				<input class="form-control" id="cookieDomain" type="text" placeholder=".domain.tld" data-field="cookieDomain" /><br />
+				<p class="help-block">
+					Leave blank for default
+				</p>
+			</div>
+		</form>
+	</div>
 </div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/email.tpl b/src/views/admin/settings/email.tpl
index 31116d2246..904f4176c9 100644
--- a/src/views/admin/settings/email.tpl
+++ b/src/views/admin/settings/email.tpl
@@ -1,6 +1,7 @@
-<form>
-	<div class="alert alert-warning">
-		<div>
+<div class="panel panel-default">
+	<div class="panel-heading">Email Settings</div>
+	<div class="panel-body">
+		<form>
 			<p>
 				Please ensure that you have installed a third-party emailer (e.g. PostageApp, Mailgun, Mandrill, SendGrid, etc), otherwise emails will not be sent by NodeBB
 			</p>
@@ -15,15 +16,23 @@
 			<p class="help-block">
 				The test email will be sent to the currently logged in user's email address.
 			</p>
-		</div>
+				</div>
+			</div>
+		</form>
 	</div>
-	<div class="alert alert-warning">
-		<div class="checkbox">
-			<label for="disableEmailSubscriptions">
-				<input type="checkbox" id="disableEmailSubscriptions" data-field="disableEmailSubscriptions" name="disableEmailSubscriptions" /> Disable subscriber notification emails
-			</label>
-		</div>
+</div>
+
+<div class="panel panel-default">
+	<div class="panel-heading">Email Subscriptions</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label for="disableEmailSubscriptions">
+					<input type="checkbox" id="disableEmailSubscriptions" data-field="disableEmailSubscriptions" name="disableEmailSubscriptions" /> Disable subscriber notification emails
+				</label>
+			</div>
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/general.tpl b/src/views/admin/settings/general.tpl
index f79bf49416..573cef89b9 100644
--- a/src/views/admin/settings/general.tpl
+++ b/src/views/admin/settings/general.tpl
@@ -1,51 +1,60 @@
-<div class="alert alert-warning">
-	<form>
-		<label>Site Title</label>
-		<input class="form-control" type="text" placeholder="Your Community Name" data-field="title" />
-
-		<div class="checkbox">
-			<label for="showSiteTitle">
-				<input type="checkbox" id="showSiteTitle" data-field="showSiteTitle" name="showSiteTitle" /> Show Site Title in Header
-			</label>
-		</div>
-
-		<label>Browser Title</label>
-		<input class="form-control" type="text" placeholder="Browser Title" data-field="browserTitle" />
-		<p class="help-block">
-			If no browser title is specified, the site title will be used
-		</p>
-
-		<label>Site Description</label>
-		<input type="text" class="form-control" placeholder="A short description about your community" data-field="description" /><br />
-
-		<label>Site Keywords</label>
-		<input type="text" class="form-control" placeholder="Keywords describing your community, comma-seperated" data-field="keywords" /><br />
-
-		<label>Site Logo</label>
-		<input id="logoUrl" type="text" class="form-control" placeholder="Path to a logo to display on forum header" data-field="brand:logo" /><br />
-		<input data-action="upload" data-target="logoUrl" data-route="{relative_path}/admin/uploadlogo" type="button" class="btn btn-default" value="Upload Logo"></input> <br /> <br/>
-
-		<label>Favicon</label><br />
-		<input id="faviconUrl" type="text" class="form-control" placeholder="favicon.ico" data-field="brand:favicon" /><br />
-		<input data-action="upload" data-target="faviconUrl" data-route="{relative_path}/admin/uploadfavicon" type="button" class="btn btn-default" value="Upload"></input> <br /> <br/>
-
-		<hr/>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="allowGuestSearching"> <strong>Allow guests to search without logging in</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="useOutgoingLinksPage"> <strong>Use Outgoing Links Warning Page</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="disableSocialButtons"> <strong>Disable social buttons</strong>
-			</label>
-		</div>
-	</form>
+<div class="panel panel-default">
+	<div class="panel-heading">Site Settings</div>
+	<div class="panel-body">
+		<form>
+			<label>Site Title</label>
+			<input class="form-control" type="text" placeholder="Your Community Name" data-field="title" />
+
+			<div class="checkbox">
+				<label for="showSiteTitle">
+					<input type="checkbox" id="showSiteTitle" data-field="showSiteTitle" name="showSiteTitle" /> Show Site Title in Header
+				</label>
+			</div>
+
+			<label>Browser Title</label>
+			<input class="form-control" type="text" placeholder="Browser Title" data-field="browserTitle" />
+			<p class="help-block">
+				If no browser title is specified, the site title will be used
+			</p>
+
+			<label>Site Description</label>
+			<input type="text" class="form-control" placeholder="A short description about your community" data-field="description" /><br />
+
+			<label>Site Keywords</label>
+			<input type="text" class="form-control" placeholder="Keywords describing your community, comma-seperated" data-field="keywords" /><br />
+
+			<label>Site Logo</label>
+			<input id="logoUrl" type="text" class="form-control" placeholder="Path to a logo to display on forum header" data-field="brand:logo" /><br />
+			<input data-action="upload" data-target="logoUrl" data-route="{relative_path}/admin/uploadlogo" type="button" class="btn btn-default" value="Upload Logo"></input> <br /> <br/>
+
+			<label>Favicon</label><br />
+			<input id="faviconUrl" type="text" class="form-control" placeholder="favicon.ico" data-field="brand:favicon" /><br />
+			<input data-action="upload" data-target="faviconUrl" data-route="{relative_path}/admin/uploadfavicon" type="button" class="btn btn-default" value="Upload"></input> <br /> <br/>
+		</form>
+	</div>
+</div>
+
+<div class="panel panel-default">
+	<div class="panel-heading">General Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="allowGuestSearching"> <strong>Allow guests to search without logging in</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="useOutgoingLinksPage"> <strong>Use Outgoing Links Warning Page</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="disableSocialButtons"> <strong>Disable social buttons</strong>
+				</label>
+			</div>
+		</form>
+	</div>
 </div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/pagination.tpl b/src/views/admin/settings/pagination.tpl
index 11597cf110..de9c9bd801 100644
--- a/src/views/admin/settings/pagination.tpl
+++ b/src/views/admin/settings/pagination.tpl
@@ -1,16 +1,19 @@
-<form>
-	<div class="alert alert-warning">
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="usePagination"> <strong>Paginate topics and posts instead of using infinite scroll.</strong>
-			</label>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">Pagination Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="usePagination"> <strong>Paginate topics and posts instead of using infinite scroll.</strong>
+				</label>
+			</div>
 
-		<strong>Topics per Page</strong><br /> <input type="text" class="form-control" value="20" data-field="topicsPerPage"><br />
-		<strong>Posts per Page</strong><br /> <input type="text" class="form-control" value="20" data-field="postsPerPage"><br />
-		<hr/>
-		<strong>Initial Number of Topics to Load (Unread, Recent, Popular etc.)</strong><br /> <input type="text" class="form-control" value="20" data-field="topicsPerList"><br />
+			<strong>Topics per Page</strong><br /> <input type="text" class="form-control" value="20" data-field="topicsPerPage"><br />
+			<strong>Posts per Page</strong><br /> <input type="text" class="form-control" value="20" data-field="postsPerPage"><br />
+			<hr/>
+			<strong>Initial Number of Topics to Load (Unread, Recent, Popular etc.)</strong><br /> <input type="text" class="form-control" value="20" data-field="topicsPerList">
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/post.tpl b/src/views/admin/settings/post.tpl
index f4b9f57df5..f8fc856865 100644
--- a/src/views/admin/settings/post.tpl
+++ b/src/views/admin/settings/post.tpl
@@ -1,61 +1,86 @@
-<form>
-	<div class="alert alert-warning">
-		<div class="form-group">
-			<label>Default Post Sorting</label>
-			<select class="form-control" data-field="topicPostSort">
-				<option value="oldest_to_newest">Oldest to Newest</option>
-				<option value="newest_to_oldest">Newest to Oldest</option>
-				<option value="most_votes">Most Votes</option>
-			</select>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">Post Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="form-group">
+				<label>Default Post Sorting</label>
+				<select class="form-control" data-field="topicPostSort">
+					<option value="oldest_to_newest">Oldest to Newest</option>
+					<option value="newest_to_oldest">Newest to Oldest</option>
+					<option value="most_votes">Most Votes</option>
+				</select>
+			</div>
 
-		<strong>Seconds between Posts</strong><br /> <input type="text" class="form-control" value="10" data-field="postDelay"><br />
-		<strong>Seconds before new user can post</strong><br /> <input type="text" class="form-control" value="10" data-field="initialPostDelay"><br />
-		<strong>Minimum Title Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTitleLength"><br />
-		<strong>Maximum Title Length</strong><br /> <input type="text" class="form-control" value="255" data-field="maximumTitleLength"><br />
-		<strong>Minimum Post Length</strong><br /> <input type="text" class="form-control" value="8" data-field="minimumPostLength"><br />
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="disableSignatures"> <strong>Disable signatures</strong>
-			</label>
-		</div>
-		<strong>Chat Message Inbox Size</strong><br /> <input type="text" class="form-control" value="250" data-field="chatMessageInboxSize"><br />
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="allowFileUploads"> <strong>Allow users to upload regular files</strong>
-			</label>
-		</div>
-		<strong>Maximum File Size</strong><br /> <input type="text" class="form-control" value="2048" data-field="maximumFileSize"><br />
+			<strong>Seconds between Posts</strong><br /> <input type="text" class="form-control" value="10" data-field="postDelay"><br />
+			<strong>Seconds before new user can post</strong><br /> <input type="text" class="form-control" value="10" data-field="initialPostDelay"><br />
+			<strong>Minimum Title Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTitleLength"><br />
+			<strong>Maximum Title Length</strong><br /> <input type="text" class="form-control" value="255" data-field="maximumTitleLength"><br />
+			<strong>Minimum Post Length</strong><br /> <input type="text" class="form-control" value="8" data-field="minimumPostLength"><br />
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="disableSignatures"> <strong>Disable signatures</strong>
+				</label>
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="panel panel-default">
+	<div class="panel-heading">Chat Settings</div>
+	<div class="panel-body">
+		<form>
+			<strong>Chat Message Inbox Size</strong><br /> <input type="text" class="form-control" value="250" data-field="chatMessageInboxSize">
+		</form>
+	</div>
+</div>
 
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="allowTopicsThumbnail"> <strong>Allow users to upload topic thumbnails</strong>
-			</label>
-		</div>
-		<strong>Topic Thumb Size</strong><br /> <input type="text" class="form-control" value="120" data-field="topicThumbSize"><br />
+<div class="panel panel-default">
+	<div class="panel-heading">Upload Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="allowFileUploads"> <strong>Allow users to upload regular files</strong>
+				</label>
+			</div>
+			<strong>Maximum File Size</strong><br /> <input type="text" class="form-control" value="2048" data-field="maximumFileSize"><br />
+
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="allowTopicsThumbnail"> <strong>Allow users to upload topic thumbnails</strong>
+				</label>
+			</div>
+			<strong>Topic Thumb Size</strong><br /> <input type="text" class="form-control" value="120" data-field="topicThumbSize">
+		</form>
+	</div>
+</div>
 
-		<h3>Composer Settings</h3>
-		<p>
-			The following settings govern the functionality and/or appearance of the post composer shown
-			to users when they create new topics, or reply to existing topics.
-		</p>
-		<div class="checkbox">
-			<label for="composer:showHelpTab">
-				<input type="checkbox" id="composer:showHelpTab" data-field="composer:showHelpTab" checked />
-				Show "Help" tab
-			</label>
-		</div>
-		<div class="checkbox">
-			<label for="composer:allowPluginHelp">
-				<input type="checkbox" id="composer:allowPluginHelp" data-field="composer:allowPluginHelp" checked />
-				Allow plugins to add content to the help tab
-			</label>
-		</div>
-		<div class="form-group">
-			<label for="composer:customHelpText">Custom Help Text</label>
-			<textarea class="form-control" id="composer:customHelpText" data-field="composer:customHelpText" rows="5"></textarea>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">Composer Settings</div>
+	<div class="panel-body">
+		<form>
+			<p>
+				The following settings govern the functionality and/or appearance of the post composer shown
+				to users when they create new topics, or reply to existing topics.
+			</p>
+			<div class="checkbox">
+				<label for="composer:showHelpTab">
+					<input type="checkbox" id="composer:showHelpTab" data-field="composer:showHelpTab" checked />
+					Show "Help" tab
+				</label>
+			</div>
+			<div class="checkbox">
+				<label for="composer:allowPluginHelp">
+					<input type="checkbox" id="composer:allowPluginHelp" data-field="composer:allowPluginHelp" checked />
+					Allow plugins to add content to the help tab
+				</label>
+			</div>
+			<div class="form-group">
+				<label for="composer:customHelpText">Custom Help Text</label>
+				<textarea class="form-control" id="composer:customHelpText" data-field="composer:customHelpText" rows="5"></textarea>
+			</div>
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/reputation.tpl b/src/views/admin/settings/reputation.tpl
index 834a39e14e..704a93fef1 100644
--- a/src/views/admin/settings/reputation.tpl
+++ b/src/views/admin/settings/reputation.tpl
@@ -1,34 +1,48 @@
-<form>
-	<div class="alert alert-warning">
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="reputation:disabled"> <strong>Disable Reputation System</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="downvote:disabled"> <strong>Disable Down Voting</trong>
-			</label>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">Reputation Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="reputation:disabled"> <strong>Disable Reputation System</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="downvote:disabled"> <strong>Disable Down Voting</trong>
+				</label>
+			</div>
+		</form>
 	</div>
+</div>
 
-	<div class="alert alert-warning">
-		<h3>Privilege Thresholds</h3>
-		<p>Use <strong>privilege thresholds</strong> to manage how much reputation a user must gain to receive moderator access.</p><br />
-		<strong>Manage Thread</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_topic"><br />
-		<strong>Manage Content</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_content"><br />
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="privileges:disabled"> <strong>Disable Privilege Threshold System</strong>
-			</label>
-		</div>
+
+<div class="panel panel-default">
+	<div class="panel-heading">Privilege Thresholds</div>
+	<div class="panel-body">
+		<form>
+			<p class="help-block">
+				Use privilege thresholds to manage how much reputation a user must gain to receive moderator access.
+			</p>
+			<strong>Manage Thread</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_topic"><br />
+			<strong>Manage Content</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_content"><br />
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="privileges:disabled"> <strong>Disable Privilege Threshold System</strong>
+				</label>
+			</div>
+		</form>
 	</div>
+</div>
 
-	<div class="alert alert-warning">
-		<h3>Activity Thresholds</h3>
-		<strong>Minimum reputation to downvote posts</strong><br /> <input type="text" class="form-control" data-field="privileges:downvote"><br />
-		<strong>Minimum reputation to flag posts</strong><br /> <input type="text" class="form-control" data-field="privileges:flag"><br />
+<div class="panel panel-default">
+	<div class="panel-heading">Activity Thresholds</div>
+	<div class="panel-body">
+		<form>
+			<strong>Minimum reputation to downvote posts</strong><br /> <input type="text" class="form-control" data-field="privileges:downvote"><br />
+			<strong>Minimum reputation to flag posts</strong><br /> <input type="text" class="form-control" data-field="privileges:flag"><br />
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/sockets.tpl b/src/views/admin/settings/sockets.tpl
index 7e1157fc33..c02b78ba25 100644
--- a/src/views/admin/settings/sockets.tpl
+++ b/src/views/admin/settings/sockets.tpl
@@ -1,21 +1,24 @@
-<form>
-	<div class="alert alert-warning">
-		<div class="form-group">
-			<label for="maxReconnectionAttempts">Max Reconnection Attempts</label>
-			<input class="form-control" id="maxReconnectionAttempts" type="text" value="5" data-field="maxReconnectionAttempts" /><br />
-		</div>
-		<div class="form-group">
-			<label for="reconnectionDelay">Reconnection Delay</label>
-			<input class="form-control" id="reconnectionDelay" type="text" value="200" data-field="reconnectionDelay" /><br />
-		</div>
-		<div class="form-group">
-			<label for="websocketAddress">Websocket Address</label>
-			<input class="form-control" id="websocketAddress" type="text" data-field="websocketAddress" /><br />
-			<p class="help-block">
-				Leave blank if unsure.
-			</p>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">Web Socket Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="form-group">
+				<label for="maxReconnectionAttempts">Max Reconnection Attempts</label>
+				<input class="form-control" id="maxReconnectionAttempts" type="text" value="5" data-field="maxReconnectionAttempts" /><br />
+			</div>
+			<div class="form-group">
+				<label for="reconnectionDelay">Reconnection Delay</label>
+				<input class="form-control" id="reconnectionDelay" type="text" value="200" data-field="reconnectionDelay" /><br />
+			</div>
+			<div class="form-group">
+				<label for="websocketAddress">Websocket Address</label>
+				<input class="form-control" id="websocketAddress" type="text" data-field="websocketAddress" /><br />
+				<p class="help-block">
+					Leave blank if unsure.
+				</p>
+			</div>
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/tags.tpl b/src/views/admin/settings/tags.tpl
index 6dfe98024c..05e794677b 100644
--- a/src/views/admin/settings/tags.tpl
+++ b/src/views/admin/settings/tags.tpl
@@ -1,9 +1,12 @@
-<form>
-	<div class="alert alert-warning">
-		<strong>Tags per Topic</strong><br /> <input type="text" class="form-control" value="5" data-field="tagsPerTopic"><br />
-		<strong>Minimum Tag Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTagLength"><br />
-		<strong>Maximum Tag Length</strong><br /> <input type="text" class="form-control" value="15" data-field="maximumTagLength"><br />
+<div class="panel panel-default">
+	<div class="panel-heading">Tag Settings</div>
+	<div class="panel-body">
+		<form>
+			<strong>Tags per Topic</strong><br /> <input type="text" class="form-control" value="5" data-field="tagsPerTopic"><br />
+			<strong>Minimum Tag Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTagLength"><br />
+			<strong>Maximum Tag Length</strong><br /> <input type="text" class="form-control" value="15" data-field="maximumTagLength"><br />
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/user.tpl b/src/views/admin/settings/user.tpl
index f945cce7d8..9d99b64300 100644
--- a/src/views/admin/settings/user.tpl
+++ b/src/views/admin/settings/user.tpl
@@ -1,117 +1,146 @@
-<form role="form">
-	<div class="alert alert-warning">
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="allowRegistration" checked> <strong>Allow registration</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="allowLocalLogin" checked> <strong>Allow local login</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="allowAccountDelete" checked> <strong>Allow account deletion</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="privateUserInfo"> <strong>Make user info private</strong>
-			</label>
-		</div>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="requireEmailConfirmation"> <strong>Require Email Confirmation</strong>
-			</label>
-		</div>
-		<h3>Avatars</h3>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="profile:convertProfileImageToPNG"> <strong>Convert profile image uploads to PNG</strong>
-			</label>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">User Settings</div>
+	<div class="panel-body">
+		<form role="form">
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="allowRegistration" checked> <strong>Allow registration</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="allowLocalLogin" checked> <strong>Allow local login</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="allowAccountDelete" checked> <strong>Allow account deletion</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="privateUserInfo"> <strong>Make user info private</strong>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="requireEmailConfirmation"> <strong>Require Email Confirmation</strong>
+				</label>
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="panel panel-default">
+	<div class="panel-heading">Avatars</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="profile:convertProfileImageToPNG"> <strong>Convert profile image uploads to PNG</strong>
+				</label>
+			</div>
+
+			<div class="form-group">
+				<label>Default Gravatar Image</label>
+				<select class="form-control" data-field="defaultGravatarImage">
+					<option value="">default</option>
+					<option value="identicon">identicon</option>
+					<option value="mm">mystery-man</option>
+					<option value="monsterid">monsterid</option>
+					<option value="wavatar">wavatar</option>
+					<option value="retro">retro</option>
+				</select>
+			</div>
 
-		<div class="form-group">
-			<label>Default Gravatar Image</label>
-			<select class="form-control" data-field="defaultGravatarImage">
-				<option value="">default</option>
-				<option value="identicon">identicon</option>
-				<option value="mm">mystery-man</option>
-				<option value="monsterid">monsterid</option>
-				<option value="wavatar">wavatar</option>
-				<option value="retro">retro</option>
-			</select>
-		</div>
+			<div class="form-group">
+				<label>Custom Gravatar Default Image</label>
+				<input id="customGravatarDefaultImage" type="text" class="form-control" placeholder="A custom image to use instead of gravatar defaults" data-field="customGravatarDefaultImage" /><br />
+				<input data-action="upload" data-target="customGravatarDefaultImage" data-route="{relative_path}/admin/uploadgravatardefault" type="button" class="btn btn-default" value="Upload"></input>
+			</div>
 
-		<div class="form-group">
-			<label>Custom Gravatar Default Image</label>
-			<input id="customGravatarDefaultImage" type="text" class="form-control" placeholder="A custom image to use instead of gravatar defaults" data-field="customGravatarDefaultImage" /><br />
-			<input data-action="upload" data-target="customGravatarDefaultImage" data-route="{relative_path}/admin/uploadgravatardefault" type="button" class="btn btn-default" value="Upload"></input>
-		</div>
+			<div class="form-group">
+				<label for="profileImageDimension">Profile Image Dimension</label>
+				<input id="profileImageDimension" type="text" class="form-control" data-field="profileImageDimension" placeholder="128" />
+			</div>
 
-		<div class="form-group">
-			<label for="profileImageDimension">Profile Image Dimension</label>
-			<input id="profileImageDimension" type="text" class="form-control" data-field="profileImageDimension" placeholder="128" />
-		</div>
+			<div class="form-group">
+				<label>Maximum User Image File Size</label>
+				<input type="text" class="form-control" placeholder="Maximum size of uploaded user images in kilobytes" data-field="maximumProfileImageSize" />
+			</div>
+		</form>
+	</div>
+</div>
 
+<div class="panel panel-default">
+	<div class="panel-heading">Account Protection</div>
+	<div class="panel-body">
+		<form>
+			<div class="form-group">
+				<label for="loginAttempts">Login attempts per hour</label>
+				<input id="loginAttempts" type="text" class="form-control" data-field="loginAttempts" placeholder="5" />
+				<p class="help-block">
+					If login attempts to a user&apos;s account exceeds this threshold, that account will be locked for a pre-configured amount of time
+				</p>
+			</div>
+			<div class="form-group">
+				<label for="lockoutDuration">Account Lockout Duration (minutes)</label>
+				<input id="lockoutDuration" type="text" class="form-control" data-field="lockoutDuration" placeholder="60" />
+			</div>
+			<div class="form-group">
+				<label>Days to remember user login sessions</label>
+				<input type="text" class="form-control" data-field="loginDays" placeholder="14" />
+			</div>
+		</form>
+	</div>
+</div>
 
-		<h3>Account Protection</h3>
-		<div class="form-group">
-			<label for="loginAttempts">Login attempts per hour</label>
-			<input id="loginAttempts" type="text" class="form-control" data-field="loginAttempts" placeholder="5" />
-			<p class="help-block">
-				If login attempts to a user&apos;s account exceeds this threshold, that account will be locked for a pre-configured amount of time
-			</p>
-		</div>
-		<div class="form-group">
-			<label for="lockoutDuration">Account Lockout Duration (minutes)</label>
-			<input id="lockoutDuration" type="text" class="form-control" data-field="lockoutDuration" placeholder="60" />
-		</div>
-		<div class="form-group">
-			<label>Days to remember user login sessions</label>
-			<input type="text" class="form-control" data-field="loginDays" placeholder="14" />
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">User Bans</div>
+	<div class="panel-body">
+		<form>
+			<div class="form-group">
+				<label>Number of flags to ban user</label>
+				<input type="text" class="form-control" value="3" placeholder="" data-field="flagsForBan" />
+			</div>
+			<hr />
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="autoban:downvote"> <strong>Enable automatic banning for reaching below a reputation threshold</strong>
+				</label>
+			</div>
+			<label>Reputation threshold before receiving an automatic ban</label>
+			<input type="text" class="form-control" value="" placeholder="-50" data-field="autoban:downvote:threshold" />
+		</form>
+	</div>
+</div>
 
-		<h3>Other</h3>
-		<div class="form-group">
-			<label>Number of flags to ban user</label>
-			<input type="text" class="form-control" value="3" placeholder="" data-field="flagsForBan" />
-		</div>
-		<hr />
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="autoban:downvote"> <strong>Enable automatic banning for reaching below a reputation threshold</strong>
-			</label>
-		</div>
-		<label>Reputation threshold before receiving an automatic ban</label>
-		<input type="text" class="form-control" value="" placeholder="-50" data-field="autoban:downvote:threshold" />
-		<hr />
-		<div class="form-group">
-			<label>Maximum User Image File Size</label>
-			<input type="text" class="form-control" placeholder="Maximum size of uploaded user images in kilobytes" data-field="maximumProfileImageSize" />
-		</div>
-		<div class="form-group">
-			<label>Minimum Username Length</label>
-			<input type="text" class="form-control" value="2" data-field="minimumUsernameLength">
-		</div>
-		<div class="form-group">
-			<label>Maximum Username Length</label>
-			<input type="text" class="form-control" value="16" data-field="maximumUsernameLength">
-		</div>
-		<div class="form-group">
-			<label>Minimum Password Length</label>
-			<input type="text" class="form-control" value="6" data-field="minimumPasswordLength">
-		</div>
-		<div class="form-group">
-			<label>Maximum Signature Length</label>
-			<input type="text" class="form-control" value="255" data-field="maximumSignatureLength">
-		</div>
-		<div class="form-group">
-			<label>Forum Terms of Use <small>(Leave blank to disable)</small></label>
-			<textarea class="form-control" data-field="termsOfUse"></textarea>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">User Registration</div>
+	<div class="panel-body">
+		<form>
+			<div class="form-group">
+				<label>Minimum Username Length</label>
+				<input type="text" class="form-control" value="2" data-field="minimumUsernameLength">
+			</div>
+			<div class="form-group">
+				<label>Maximum Username Length</label>
+				<input type="text" class="form-control" value="16" data-field="maximumUsernameLength">
+			</div>
+			<div class="form-group">
+				<label>Minimum Password Length</label>
+				<input type="text" class="form-control" value="6" data-field="minimumPasswordLength">
+			</div>
+			<div class="form-group">
+				<label>Maximum Signature Length</label>
+				<input type="text" class="form-control" value="255" data-field="maximumSignatureLength">
+			</div>
+			<div class="form-group">
+				<label>Forum Terms of Use <small>(Leave blank to disable)</small></label>
+				<textarea class="form-control" data-field="termsOfUse"></textarea>
+			</div>
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file
diff --git a/src/views/admin/settings/web-crawler.tpl b/src/views/admin/settings/web-crawler.tpl
index 1913e6bf16..20d66fb2e5 100644
--- a/src/views/admin/settings/web-crawler.tpl
+++ b/src/views/admin/settings/web-crawler.tpl
@@ -1,23 +1,30 @@
-<form>
-	<div class="alert alert-warning">
-		<strong>Custom Robots.txt <small>Leave blank for default</small></strong><br />
-		<textarea class="form-control" data-field="robots.txt"></textarea>
+<div class="panel panel-default">
+	<div class="panel-heading">Crawlability Settings</div>
+	<div class="panel-body">
+		<form>
+			<strong>Custom Robots.txt <small>Leave blank for default</small></strong><br />
+			<textarea class="form-control" data-field="robots.txt"></textarea>
+		</form>
 	</div>
+</div>
 
-	<div class="alert alert-warning">
-		<strong>Feeds</strong>
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="feeds:disableRSS"> <strong>Disable RSS Feeds</strong>
-			</label>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading">Sitemap & Feed Settings</div>
+	<div class="panel-body">
+		<form>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="feeds:disableRSS"> <strong>Disable RSS Feeds</strong>
+				</label>
+			</div>
 
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" data-field="feeds:disableSitemap"> <strong>Disable Sitemap.xml</strong>
-			</label>
-		</div>
+			<div class="checkbox">
+				<label>
+					<input type="checkbox" data-field="feeds:disableSitemap"> <strong>Disable Sitemap.xml</strong>
+				</label>
+			</div>
+		</form>
 	</div>
-</form>
+</div>
 
 <!-- IMPORT admin/settings/footer.tpl -->
\ No newline at end of file