Merge pull request #18 from SADiLaR/feature/error_pages

Error pages

app/app/urls.py

@@ -29,3 +29,8 @@
     path("", views.home, name="home"),
     path("institutions/", views.institutions, name="institutions"),
 ]
+
+handler400 = "app.views.error_400"
+handler403 = "app.views.error_403"
+handler404 = "app.views.error_404"
+handler500 = "app.views.error_500"

app/app/views.py

@@ -25,3 +25,31 @@ def institutions(request):
     context = {"institutions_page": "active", "institutions": institutions}
 
     return render(request, template_name=template, context=context)
+
+
+def error_400(request, exception):
+    template = "400.html"
+    context = {}
+
+    return render(request, template_name=template, context=context)
+
+
+def error_403(request, exception):
+    template = "403.html"
+    context = {}
+
+    return render(request, template_name=template, context=context)
+
+
+def error_404(request, exception):
+    template = "404.html"
+    context = {}
+
+    return render(request, template_name=template, context=context)
+
+
+def error_500(request):
+    template = "500.html"
+    context = {}
+
+    return render(request, template_name=template, context=context)

app/static/css/styles.css

@@ -137,6 +137,13 @@ body {
     margin: 10px 0 0 0;
 }
 
+/*Error pages*/
+.error-card {
+    border-color: var(--primary-red);
+    margin: 0 10px 0 10px;
+    width: 100%;
+}
+
 /*bootstrap icons*/
 .bi {
     font-size: 50px;

app/templates/400.html

@@ -0,0 +1,11 @@
+{% extends "base_error.html" %}
+
+{% block error_content %}
+
+    <div class="card-body">
+            <h5 class="card-title">Bad Request (400)</h5>
+            <p class="card-text">The server cannot process the request due to client error.</p>
+            <a href="{% url 'home' %}" class="btn btn-primary">Go to home</a>
+    </div>
+
+{% endblock error_content %}

app/templates/403.html

@@ -0,0 +1,11 @@
+{% extends "base_error.html" %}
+
+{% block error_content %}
+
+    <div class="card-body">
+            <h5 class="card-title">Forbidden (403)</h5>
+            <p class="card-text">You do not have permission to access on this server.</p>
+            <a href="{% url 'home' %}" class="btn btn-primary">Go to home</a>
+        </div>
+
+{% endblock error_content %}

app/templates/404.html

@@ -0,0 +1,11 @@
+{% extends "base_error.html" %}
+
+{% block error_content %}
+
+    <div class="card-body">
+            <h5 class="card-title">Not Found (404)</h5>
+            <p class="card-text">The requested resource was not found on this server.</p>
+            <a href="{% url 'home' %}" class="btn btn-primary">Go to home</a>
+        </div>
+
+{% endblock error_content %}

app/templates/500.html

@@ -0,0 +1,11 @@
+{% extends "base_error.html" %}
+
+{% block error_content %}
+
+    <div class="card-body">
+        <h5 class="card-title">Internal Server Error (500)</h5>
+        <p class="card-text">The server encountered an unexpected condition that prevented it from fulfilling the request.</p>
+        <a href="{% url 'home' %}" class="btn btn-primary">Go to home</a>
+    </div>
+
+{% endblock error_content %}

app/templates/base_error.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<div class="section mt-3 mb-3">
+    <div class="card text-center error-card">
+        <div class="card-header">
+            Error
+        </div>
+        <div id="error_content">
+        {% block error_content %}
+
+        {% endblock error_content %}
+        </div>
+    </div>
+</div>
+
+{% endblock content %}