From a7beb141c733585bbe14b614a2a129756fbc0594 Mon Sep 17 00:00:00 2001
From: krmax44 <hi@krmax44.de>
Date: Mon, 2 Oct 2023 16:04:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20redesign=20error=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 froide/templates/400.html            | 12 ++++++----
 froide/templates/403.html            | 17 +++++++-------
 froide/templates/404.html            | 15 ++++++------
 froide/templates/500.html            | 18 ++++++---------
 froide/templates/error_base.html     | 34 ++++++++++++++++++++++++++++
 frontend/styles/components/misc.scss | 25 ++++++++++++++++++++
 6 files changed, 90 insertions(+), 31 deletions(-)
 create mode 100644 froide/templates/error_base.html

diff --git a/froide/templates/400.html b/froide/templates/400.html
index 3bb0bf8bc..5448c9fcb 100644
--- a/froide/templates/400.html
+++ b/froide/templates/400.html
@@ -1,6 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>{% blocktrans %}400 - Bad Request{% endblocktrans %}</h2>
-{% endblock %}
+{% block error %}
+{% blocktrans %}400 - Bad Request{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}This one seems to be on you. Please contact us, if this error comes as a surprise.{% endblocktrans %}
+{% endblock error_description %}
\ No newline at end of file
diff --git a/froide/templates/403.html b/froide/templates/403.html
index 8696c1c20..8cf9940e5 100644
--- a/froide/templates/403.html
+++ b/froide/templates/403.html
@@ -1,11 +1,10 @@
-{% extends 'base.html' %}
+{% extends "error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>{% blocktrans %}403 - Forbidden{% endblocktrans %}</h2>
-{% if message %}
-  <p>{{ message }}</p>
-{% else %}
-  <p>{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}</p>
-{% endif %}
-{% endblock %}
+{% block error %}
+{% blocktrans %}403 - Forbidden{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}
+{% endblock error_description %}
diff --git a/froide/templates/404.html b/froide/templates/404.html
index e3305671c..ea149ff07 100644
--- a/froide/templates/404.html
+++ b/froide/templates/404.html
@@ -1,9 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>
-  {% blocktrans %}404 - Not Found{% endblocktrans %}
-</h2>
-<span class="text-white">{{ exception }}</span>
-{% endblock %}
+{% block error %}
+{% blocktrans %}404 - Not Found{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}Nothing to see here.{% endblocktrans %}
+{% endblock error_description %}
\ No newline at end of file
diff --git a/froide/templates/500.html b/froide/templates/500.html
index c2dc1df3d..663faf402 100644
--- a/froide/templates/500.html
+++ b/froide/templates/500.html
@@ -1,14 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
-{% load static %}
 
-{% block css %}
-<link href="{% static 'css/main.css' %}" rel="stylesheet">
-{% endblock %}
+{% block error %}
+{% blocktrans %}500 - Server Error{% endblocktrans %}
+{% endblock error %}
 
-{% block app_body %}
-<h2>{% blocktrans %}500 - Server Error{% endblocktrans %}</h2>
-{% if request.sentry.id %}
-<p>{% blocktrans with ref=request.sentry.id %}If you need assistance, you may reference this error as <strong>{{ ref }}</strong>.{% endblocktrans %}</p>
-{% endif %}
-{% endblock %}
+{% block error_description %}
+{% blocktrans with ref=request.sentry.id %}We logged the error and are working on fixing it. If you need to contact us, please use the reference <code>{{ ref }}</code>.{% endblocktrans %}
+{% endblock error_description %}
\ No newline at end of file
diff --git a/froide/templates/error_base.html b/froide/templates/error_base.html
new file mode 100644
index 000000000..ec1a641d4
--- /dev/null
+++ b/froide/templates/error_base.html
@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load search_helper %}
+
+{% block body %}
+  <div class="container mt-3">
+    <h2 class="mb-3">{% block error %}{% endblock error %}</h2>
+    
+    <div class="row">
+      <div class="col col-md-8">
+        <div class="redacted error-redacted-bar mb-1" aria-hidden="true">&nbsp;</div>
+        <div class="mb-1 error-page-description">
+          <span>{% block error_description %}{% endblock error_description %}</span>
+        </div>
+        <div class="redacted error-redacted-bar mb-1" aria-hidden="true">&nbsp;</div>
+        <div class="redacted error-redacted-bar" aria-hidden="true">&nbsp;</div>
+      </div>
+
+      {% block error_right %}{% endblock error_right %}
+    </div>
+  </div>
+
+  <div class="py-3 py-lg-5 my-5 text-bg-subtle tight-margin">
+    <div class="container">
+      <p class="lead">
+        {% blocktrans %}You can try searching or go back to the <a href="/">Home page</a>.{% endblocktrans %}
+      </p>
+      
+      {% multi_search %}
+    </div>
+  </div>
+
+  {% block error_footer %}{% endblock error_footer %}
+{% endblock body %}
\ No newline at end of file
diff --git a/frontend/styles/components/misc.scss b/frontend/styles/components/misc.scss
index 985cdc318..de3cc225f 100644
--- a/frontend/styles/components/misc.scss
+++ b/frontend/styles/components/misc.scss
@@ -123,3 +123,28 @@ input.copy-text {
   aspect-ratio: 3/2;
   object-fit: contain;
 }
+
+.error-redacted-bar {
+  height: 1.25em;
+}
+
+.error-page-description {
+  position: relative;
+
+  span {
+    background-color: var(--#{$prefix}body-bg);
+    padding-bottom: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--redacted);
+    height: 1.25em;
+    z-index: -1;
+  }
+}