Merge pull request #2207 from btcpayserver/feat/new-error-pages

New Error Pages

BTCPayServer/Controllers/ErrorController.cs

@@ -13,7 +13,7 @@ namespace BTCPayServer.Controllers
             {
                 if (statusCode.HasValue)
                 {
-                    var specialPages = new[] { 404, 429, 500 };
+                    var specialPages = new[] { 404, 406, 417, 429, 500, 502 };
                     if (specialPages.Any(a => a == statusCode.Value))
                     {
                         var viewName = statusCode.ToString();

BTCPayServer/Views/Error/404.cshtml

@@ -1,39 +1,14 @@
 @{
+    Layout = "_LayoutError";
     ViewData["Title"] = "404 - Page not found";
 }
 
-<div class="row">
-    <div class="col-12 col-head" style="justify-content:center; flex-direction: row; display:flex; flex-direction:row; text-align:center;">
-        <a asp-controller="Home" asp-action="Index">
-            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="head-logo" height="70" asp-append-version="true" />
-        </a>
-
-        <h1 class="text-uppercase mt-3 ml-4">@ViewData["Title"]</h1>
-    </div>
-</div>
-
-<center>
-    <hr class="primary" />
-</center>
-
-<p class="lead text-center">
-    This is like searching for a person more beautiful than <a href="https://twitter.com/NicolasDorier" target="_blank">Nicolas Dorier</a>.
-    <br /><br />
-    <a href="https://twitter.com/NicolasDorier" target="_blank">
-        <img src="~/img/errorpages/404_nicolas.jpg" alt="Nicolas Dorier beauty" title="Slowly stroke the image" asp-append-version="true" />
-    </a>
-    <br /><br />
-    It doesn't exist.
-    <br /><br />
-    You can always try <a href="/">navigating back to home</a>.
-</p>
-
-<center>
-    <hr class="primary" />
-</center>
-
-<div class="row justify-content-center mt-5">
-    <div class="col">
-        <partial name="_BTCPaySupporters" />
-    </div>
-</div>
+This is like searching for a person more beautiful than <a href="https://twitter.com/NicolasDorier" target="_blank">Nicolas Dorier</a>.
+<br /><br />
+<a href="https://twitter.com/NicolasDorier" target="_blank">
+    <img src="~/img/errorpages/404_nicolas.jpg" alt="Nicolas Dorier beauty" title="Slowly stroke the image" asp-append-version="true" />
+</a>
+<br /><br />
+It doesn't exist.
+<br /><br />
+You can always try <a href="/">navigating back to home</a>.

BTCPayServer/Views/Error/406.cshtml

@@ -0,0 +1,22 @@
+@{
+    Layout = "_LayoutError";
+    ViewData["Title"] = "406 - Not Acceptable";
+}
+
+Sorry, but our server can't service you.<br />
+Either set proper `Accept` header in HTTP request or find a new server.
+<br /><br />
+<a href="https://twitter.com/jack" target="_blank">
+    <img src="~/img/errorpages/406_jack.jpg" alt="Jack guiding you on what's acceptable" title="Bitcoin fixes this™" />
+</a>
+<br /><br />
+<span>
+    <svg style="width:30px; height:30px; fill:rgb(81, 177, 62);" viewBox="0 0 24 24">
+        <g><circle cx="12.025" cy="16.437" r="1.281"></circle><path d="M14.39 7.194c-.094-.127-.242-.2-.4-.2h-3.928c-.158 0-.307.073-.4.2-.096.126-.125.29-.08.442l1.814 6.098c.063.212.258.357.48.357h.298c.222 0 .416-.145.48-.356l1.813-6.098c.047-.152.017-.316-.077-.442z"></path><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></g>
+    </svg>
+    <span class="css-901oao css-16my406 css-cens5h r-13gxpu9 r-poiln3 r-bcqeeo r-qvutc0" style="-webkit-line-clamp: 3;">
+        <span class="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0">
+            <a href="https://twitter.com/jack/status/1108487911802966017">Jack invites you to learn how Bitcoin fixes this™</a>
+        </span>
+    </span>
+</span>

BTCPayServer/Views/Error/417.cshtml

@@ -0,0 +1,12 @@
+@{
+    Layout = "_LayoutError";
+    ViewData["Title"] = "417 - Expectation Failed";
+}
+
+You've unfortunately failed expectations of manager <a href="https://twitter.com/pavlenex" target="_blank">Pavlenex</a>. Poor you.
+<br /><br />
+<a href="https://twitter.com/pavlenex" target="_blank">
+    <img src="~/img/errorpages/417_pavlenex.png" alt="Pavlenex avatar" title="Pavlenex fighting the system, while building better systems" asp-append-version="true" />
+</a>
+<br /><br />
+Check your request `Except` header and do better.

BTCPayServer/Views/Error/429.cshtml

@@ -1,39 +1,14 @@
 @{
+    Layout = "_LayoutError";
     ViewData["Title"] = "429 - Too Many Requests";
 }
 
-<div class="row">
-    <div class="col-12 col-head" style="justify-content:center; flex-direction: row; display:flex; flex-direction:row; text-align:center;">
-        <a asp-controller="Home" asp-action="Index">
-            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="head-logo" height="70" asp-append-version="true" />
-        </a>
-
-        <h1 class="text-uppercase mt-3 ml-4">@ViewData["Title"]</h1>
-    </div>
-</div>
-
-<center>
-    <hr class="primary" />
-</center>
-
-<p class="lead text-center">
-    Please send requests slower. Or face the wrath of <a href="https://twitter.com/r0ckstardev" target="_blank">Vin Diesel</a>.
-    <br /><br />
-    <a href="https://twitter.com/r0ckstardev" target="_blank">
-        <img src="~/img/errorpages/429_rockstardev.jpg" alt="Vin is angry because you caused 429" title="Move away that cursor" asp-append-version="true" />
-    </a>
-    <br /><br />
-    You sure you want to risk that?
-    <br /><br />
-    Slowly <a href="/">navigate back to home</a>.
-</p>
-
-<center>
-    <hr class="primary" />
-</center>
-
-<div class="row justify-content-center mt-5">
-    <div class="col">
-        <partial name="_BTCPaySupporters" />
-    </div>
-</div>
+Please send requests slower. Or face the wrath of <a href="https://twitter.com/r0ckstardev" target="_blank">Vin Diesel</a>.
+<br /><br />
+<a href="https://twitter.com/r0ckstardev" target="_blank">
+    <img src="~/img/errorpages/429_rockstardev.jpg" alt="Vin is angry because you caused 429" title="Move away that cursor" asp-append-version="true" />
+</a>
+<br /><br />
+You sure you want to risk that?
+<br /><br />
+Slowly <a href="/">navigate back to home</a>.

BTCPayServer/Views/Error/500.cshtml

@@ -1,39 +1,14 @@
 @{
+    Layout = "_LayoutError";
     ViewData["Title"] = "500 - Internal Server Error";
 }
 
-<div class="row">
-    <div class="col-12 col-head" style="justify-content:center; flex-direction: row; display:flex; flex-direction:row; text-align:center;">
-        <a asp-controller="Home" asp-action="Index">
-            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="head-logo" height="70" asp-append-version="true" />
-        </a>
-
-        <h1 class="text-uppercase mt-3 ml-4">@ViewData["Title"]</h1>
-    </div>
-</div>
-
-<center>
-    <hr class="primary" />
-</center>
-
-<p class="lead text-center">
-    Whoops, something really went wrong! <a href="https://twitter.com/mrkukks">Mr Kukks</a> is so sorry.
-    <br /><br />
-    <a href="https://twitter.com/mrkukks" target="_blank">
-        <img src="~/img/errorpages/500_mrkukks.jpg" alt="Mr Kukks puppy eyes" title="The most innocent look you'll ever see" asp-append-version="true" />
-    </a>
-    <br /><br />
-    Consult server log and consider submitting issue on BTCPayServer GitHub.
-    <br /><br />
-    <a href="/">Navigate back to home</a>.
-</p>
-
-<center>
-    <hr class="primary" />
-</center>
-
-<div class="row justify-content-center mt-5">
-    <div class="col">
-        <partial name="_BTCPaySupporters" />
-    </div>
-</div>
+Whoops, something really went wrong! <a href="https://twitter.com/mrkukks">Mr Kukks</a> is so sorry.
+<br /><br />
+<a href="https://twitter.com/mrkukks" target="_blank">
+    <img src="~/img/errorpages/500_mrkukks.jpg" alt="Mr Kukks puppy eyes" title="The most innocent look you'll ever see" asp-append-version="true" />
+</a>
+<br /><br />
+Consult server log and consider submitting issue on BTCPayServer GitHub.
+<br /><br />
+<a href="/">Navigate back to home</a>.

BTCPayServer/Views/Error/502.cshtml

@@ -0,0 +1,13 @@
+@{
+    Layout = "_LayoutError";
+    ViewData["Title"] = "502 - Bad Gateway";
+}
+
+The life is all about finding the right Gateways.<br />
+Unfortunately, this time you've found a bad one.
+<br /><br />
+<a href="https://twitter.com/milessuter" target="_blank">
+    <img src="~/img/errorpages/502_milessuter.jpg" alt="Miles obfuscated profile pic" title="But full name is not obfuscated" asp-append-version="true" />
+</a>
+<br /><br />
+Maybe <a href="https://twitter.com/milessuter">Gateway Tzar Miles</a> can help you out?

BTCPayServer/Views/Error/_LayoutError.cshtml

@@ -0,0 +1,31 @@
+@{
+    Layout = "_LayoutSimple";
+}
+
+<div class="row">
+    <div class="col-12 col-head" style="justify-content:center; flex-direction: row; display:flex; flex-direction:row; text-align:center;">
+        <a asp-controller="Home" asp-action="Index">
+            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="head-logo" height="70" asp-append-version="true" />
+        </a>
+
+        <h1 class="text-uppercase mt-3 ml-4">@ViewData["Title"]</h1>
+    </div>
+</div>
+
+<center>
+    <hr class="primary" />
+</center>
+
+<p class="lead text-center">
+    @RenderBody()
+</p>
+
+<center>
+    <hr class="primary" />
+</center>
+
+<div class="row justify-content-center mt-5">
+    <div class="col">
+        <partial name="_BTCPaySupporters" />
+    </div>
+</div>