Add Custom Error Pages

Author: sebasgo

lib/dev_round_web/components/error_components.ex

@@ -0,0 +1,38 @@
+defmodule DevRoundWeb.ErrorComponents do
+  use DevRoundWeb, :html
+
+  attr :code, :integer, required: true
+  attr :title, :string, required: true
+  slot :inner_block
+
+  def error_page(assigns) do
+    ~H"""
+    <!DOCTYPE html>
+    <html lang="en" data-theme="dark">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="csrf-token" content={get_csrf_token()} />
+        <title>{@code} {@title}</title>
+        <link rel="stylesheet" href={~p"/assets/css/app.css"} />
+      </head>
+      <body>
+        <div class="card card-xl bg-black w-128 shadow-xl shadow-black mx-auto my-24">
+          <div class="card-body items-center text-center">
+            <h1 class="card-title">
+              <span class="text-primary">{@code}</span> {@title}
+            </h1>
+            {render_slot(@inner_block)}
+          </div>
+          <figure>
+            <img
+              src={~p"/images/error.png"}
+              alt="A rendering of an Apple MacBook which displays a pixelated broken heart which melts onto its keyboard."
+            />
+          </figure>
+        </div>
+      </body>
+    </html>
+    """
+  end
+end

lib/dev_round_web/controllers/error_html.ex

@@ -6,14 +6,7 @@ defmodule DevRoundWeb.ErrorHTML do
   """
   use DevRoundWeb, :html
 
-  # If you want to customize your error pages,
-  # uncomment the embed_templates/1 call below
-  # and add pages to the error directory:
-  #
-  #   * lib/dev_round_web/controllers/error_html/404.html.heex
-  #   * lib/dev_round_web/controllers/error_html/500.html.heex
-  #
-  # embed_templates "error_html/*"
+  embed_templates "error_html/*"
 
   # The default is to render a plain text page based on
   # the template name. For example, "404.html" becomes

lib/dev_round_web/controllers/error_html/404.html.heex

@@ -0,0 +1,6 @@
+<DevRoundWeb.ErrorComponents.error_page code={404} title="DevRound Not Found">
+  <p class="text-base-content/60">We are terribly sorry.</p>
+  <div class="card-actions mt-4">
+    <.button href={~p"/"} variant="primary">Return Home</.button>
+  </div>
+</DevRoundWeb.ErrorComponents.error_page>

lib/dev_round_web/controllers/error_html/500.html.heex

@@ -0,0 +1,3 @@
+<DevRoundWeb.ErrorComponents.error_page code={500} title="Internal DevRound Error">
+  <p class="text-base-content/60">We apologize the inconvenience.</p>
+</DevRoundWeb.ErrorComponents.error_page>

priv/static/images/error.png

@@ -5,10 +5,10 @@ defmodule DevRoundWeb.ErrorHTMLTest do
   import Phoenix.Template
 
   test "renders 404.html" do
-    assert render_to_string(DevRoundWeb.ErrorHTML, "404", "html", []) == "Not Found"
+    assert render_to_string(DevRoundWeb.ErrorHTML, "404", "html", []) =~ "DevRound Not Found"
   end
 
   test "renders 500.html" do
-    assert render_to_string(DevRoundWeb.ErrorHTML, "500", "html", []) == "Internal Server Error"
+    assert render_to_string(DevRoundWeb.ErrorHTML, "500", "html", []) =~ "Internal DevRound Error"
   end
 end