Add better error pages

assets/css/common/_layout.scss

@@ -400,8 +400,21 @@ figure {
   padding: 4px 16px;
 }
 
-.twofactor {
+.minimal {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.minimal__message {
+  padding: 30px;
+  max-width: 560px;
+  width: 100%;
+  margin: auto;
+  text-align: left;
+  background-color: $header_secondary_color;
+}
+
+.minimal__message__header {
+  margin: 0 0 10px 0;
+}

lib/philomena_web/templates/error/show.html.slime

@@ -0,0 +1,23 @@
+doctype html
+html lang="en"
+  head
+    meta charset="utf-8"
+    meta http-equiv="X-UA-Compatible" content="IE=edge"
+    = viewport_meta_tag(@conn)
+
+    title
+      => @status
+      | - Philomena
+    link rel="stylesheet" href=stylesheet_path(@conn, nil)
+    link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
+    link rel="icon" href="/favicon.ico" type="image/x-icon"
+    link rel="icon" href="/favicon.svg" type="image/svg+xml"
+
+  body.minimal
+    .minimal__message
+      h1.minimal__message__header
+        i.fa.fw.favicon-home>
+        ' Philomena
+
+      h3 = @short_msg
+      p = @long_msg

lib/philomena_web/templates/layout/two_factor.html.slime

@@ -11,6 +11,6 @@ html lang="en"
     link rel="icon" href="/favicon.ico" type="image/x-icon"
     link rel="icon" href="/favicon.svg" type="image/svg+xml"
 
-  body.twofactor
-    .twofactor__container
+  body.minimal
+    .minimal__container
       = @inner_content

lib/philomena_web/views/error_view.ex

@@ -1,11 +1,18 @@
 defmodule PhilomenaWeb.ErrorView do
   use PhilomenaWeb, :view
 
-  # If you want to customize a particular status code
-  # for a certain format, you may uncomment below.
-  # def render("500.html", _assigns) do
-  #   "Internal Server Error"
-  # end
+  import PhilomenaWeb.LayoutView, only: [
+    stylesheet_path: 2,
+    dark_stylesheet_path: 1,
+    viewport_meta_tag: 1
+  ]
+
+  @codes %{
+    400 => {"Bad Request", "Couldn't process your request!"},
+    403 => {"Forbidden", "Not allowed to access this page (are your cookies enabled?)"},
+    404 => {"Not Found", "Couldn't find what you were looking for!"},
+    500 => {"Internal Error", "Couldn't process your request!"},
+  }
 
   # By default, Phoenix returns the status message from
   # the template name. For example, "404.html" becomes
@@ -13,4 +20,17 @@ defmodule PhilomenaWeb.ErrorView do
   def template_not_found(template, _assigns) do
     Phoenix.Controller.status_message_from_template(template)
   end
+
+  def render(template, assigns) when template != "show.html" do
+    {short_msg, long_msg} = @codes[assigns.status] || @codes[500]
+
+    render(
+      PhilomenaWeb.ErrorView,
+      "show.html",
+      conn: assigns.conn,
+      status: assigns.status,
+      short_msg: short_msg,
+      long_msg: long_msg
+    )
+  end
 end