feat: closes #11549, new error pages

public/language/en-GB/global.json

@@ -10,7 +10,7 @@
 	"500.title": "Internal Error.",
 	"500.message": "Oops! Looks like something went wrong!",
 	"400.title": "Bad Request.",
-	"400.message": "It looks like this link is malformed, please double-check and try again. Otherwise, return to the <a class=\"alert-link\" href='%1/'>home page</a>.",
+	"400.message": "It looks like this link is malformed, please double-check and try again.<br/><div class=\"text-sm text-muted\">Return to the <a href='%1/'>home page</a>.</div>",
 
 	"register": "Register",
 	"login": "Login",

public/language/en-GB/pages.json

@@ -68,7 +68,7 @@
 
 	"confirm": "Email Confirmed",
 
-	"maintenance.text": "%1 is currently undergoing maintenance. Please come back another time.",
+	"maintenance.text": "%1 is currently undergoing maintenance.<br/>Please come back another time.",
 	"maintenance.messageIntro": "Additionally, the administrator has left this message:",
 
 	"throttled.text": "%1 is currently unavailable due to excessive load. Please come back another time."

src/controllers/topics.js

@@ -22,7 +22,7 @@ const upload_url = nconf.get('upload_url');
 
 topicsController.get = async function getTopic(req, res, next) {
 	const tid = req.params.topic_id;
-
+	throw new Error('db connection not found');
 	if (
 		(req.params.post_index && !utils.isNumber(req.params.post_index) && req.params.post_index !== 'unread') ||
 		!utils.isNumber(tid)

src/views/400.tpl

@@ -1,9 +1,12 @@
-<div class="alert alert-danger">
-	<strong>[[global:400.title]]</strong>
+<div class="flex-fill">
+	<h2 class="fw-semibold tracking-tight text-center">[[global:400.title]]</h2>
 
-	<p>{{{ if error }}}{error}{{{ else }}}[[global:400.message, {config.relative_path}]]{{{ end }}}</p>
-
-	{{{ if returnLink }}}
-	<p>[[error:goback]]</p>
-	{{{ end }}}
+	<div class="mx-auto">
+		<div class="d-flex flex-column gap-3 justify-content-center text-center">
+			<div class="mx-auto p-4 bg-light border rounded">
+				<i class="text-secondary fa fa-fw fa-4x fa-triangle-exclamation"></i>
+			</div>
+			{{{ if error }}}{error}{{{ else }}}[[global:400.message, {config.relative_path}]]{{{ end }}}
+		</div>
+	</div>
 </div>

src/views/403.tpl

@@ -1,13 +1,15 @@
-<div class="alert alert-danger">
-	<strong>[[global:403.title]]</strong>
-
-	<p>{{{ if error }}}{error}{{{ else }}}[[global:403.message]]{{{ end }}}</p>
-
-	{{{ if returnLink }}}
-	<p>[[error:goback]]</p>
-	{{{ end }}}
+<div class="flex-fill">
+	<h2 class="fw-semibold tracking-tight text-center">[[global:403.title]]</h2>
 
+	<div class="mx-auto">
+		<div class="d-flex flex-column gap-3 justify-content-center text-center">
+			<div class="mx-auto p-4 bg-light border rounded">
+				<i class="text-secondary fa fa-fw fa-4x fa-key"></i>
+			</div>
+			{{{ if error }}}{error}{{{ else }}}[[global:403.message]]{{{ end }}}
 			{{{ if !loggedIn }}}
-	<p>[[global:403.login, {config.relative_path}]]</p>
+			[[global:403.login, {config.relative_path}]]
 			{{{ end }}}
+		</div>
+	</div>
 </div>

src/views/500.tpl

@@ -1,10 +1,13 @@
-<div class="alert alert-danger">
-	<strong>[[global:500.title]]</strong>
-	<p>[[global:500.message]]</p>
-	<p>{path}</p>
-	{{{ if error }}}<p>{error}</p>{{{ end }}}
+<div class="flex-fill">
+	<h2 class="fw-semibold tracking-tight text-center">[[global:500.title]]</h2>
 
-	{{{ if returnLink }}}
-	<p>[[error:goback]]</p>
-	{{{ end }}}
+	<div class="mx-auto">
+		<div class="d-flex flex-column gap-3 justify-content-center text-center">
+			<div class="mx-auto p-4 bg-light border rounded">
+				<i class="text-secondary fa fa-fw fa-4x fa-triangle-exclamation"></i>
+			</div>
+			[[global:500.message]]
+			{{{ if error }}}<div class="text-sm text-muted">{error}</div>{{{ end }}}
+		</div>
+	</div>
 </div>

src/views/503.tpl

@@ -1,12 +1,15 @@
-<h1 class="text-center">[[pages:maintenance.text, {site_title}]]</h1>
-<h2 class="text-center"><i class="fa fa-wrench fa-3x"></i></h2>
-{{{ if message }}}
-<div class="row maintenance">
-	<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
-		<p class="lead text-center">[[pages:maintenance.messageIntro]]</p>
-		<div class="well">
-			{message}
+<div class="flex-fill">
+	<h2 class="fw-semibold tracking-tight text-center">[[pages:maintenance.text, {site_title}]]</h2>
+
+	<div class="mx-auto">
+		<div class="d-flex flex-column gap-3 justify-content-center text-center">
+			<div class="mx-auto p-4 bg-light border rounded">
+				<i class="text-secondary fa fa-fw fa-4x fa-wrench"></i>
+			</div>
+			{{{ if message }}}
+			[[pages:maintenance.messageIntro]]
+			<div class="text-sm text-muted">{message}</div>
+			{{{ end }}}
 		</div>
 	</div>
 </div>
-{{{ end }}}