From 594f25141c07315f4e4ccab66fff2c1902d3ba9c Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Sun, 10 Sep 2023 17:00:10 +0200
Subject: [PATCH] Add a simple error code page (mostly for handling 404s)

---
 assets/css/default.css             | 22 ++++++++++++++++++++++
 src/invidious/routes/errors.cr     |  4 ++--
 src/invidious/views/error_code.ecr | 11 +++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/invidious/views/error_code.ecr

diff --git a/assets/css/default.css b/assets/css/default.css
index a47762ec..7b2960d6 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -326,6 +326,28 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 
+/*
+ * Error page
+ */
+
+div.center-hv {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: column;
+}
+
+p#error-code, p#error-message {
+    position: relative;
+    padding: 0;
+    margin: 0;
+}
+
+p#error-code    { font-size: 8em; bottom: 3vh; right: 5vw; }
+p#error-message { font-size: 2em; bottom: 2vh; left: 3vw;  }
+
+
 /*
  * Responsive rules
  */
diff --git a/src/invidious/routes/errors.cr b/src/invidious/routes/errors.cr
index 2ecb032c..f6b94df3 100644
--- a/src/invidious/routes/errors.cr
+++ b/src/invidious/routes/errors.cr
@@ -26,7 +26,7 @@ module Invidious::Routes::ErrorRoutes
       end
     end
 
-    # TODO: create a proper 404 page
-    haltf env, status_code: 404
+    env.response.status_code = 404
+    templated "error_code"
   end
 end
diff --git a/src/invidious/views/error_code.ecr b/src/invidious/views/error_code.ecr
new file mode 100644
index 00000000..6d5ac048
--- /dev/null
+++ b/src/invidious/views/error_code.ecr
@@ -0,0 +1,11 @@
+<% message = HTML.escape(env.response.status.description || "Unknown error") %>
+
+
+<% content_for "header" do %>
+<title><%= message %> - Invidious</title>
+<% end %>
+
+<div class="h-box center-hv">
+    <div><p class="error-code"><%= env.response.status.code %></p></div>
+    <div><p class="error-message"><%= message %></p></div>
+</div>