Improve 403 and 500 error web pages (#2349)

* Improve 403 and 500 error web pages

* Flake8

* Fix pages

Author: Didayolo

src/apps/pages/views.py

@@ -6,7 +6,6 @@
 from announcements.models import Announcement, NewsPost
 
 from django.conf import settings
-from django.shortcuts import render
 from utils.data import pretty_bytes
 
 
@@ -115,8 +114,3 @@ def get_context_data(self, *args, **kwargs):
 
 class MonitorQueuesView(TemplateView):
     template_name = 'pages/monitor_queues.html'
-
-
-def page_not_found_view(request, exception):
-    print(request)
-    return render(request, '404.html', status=404)

src/static/img/403.png

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+<div class="sixteen wide mobile eight wide computer centered column">
+        <img src="/static/img/403.png">
+        <p>You do not have permission to access this page.</p>
+        <p>If you believe this is an error, please fill a <a href="https://github.com/codalab/codabench/issues/new">bug report</a>. For more information about Codabench, check out the <a href="https://docs.codabench.org">docs</a>.</p>
+        <a class="ui fluid blue submit button" href="/">Return to Home</a>
+</div>
+{% endblock %}

src/static/img/500.png

@@ -6,7 +6,7 @@
         <img src="/static/img/404.png">
         <p>Could not find the page you requested.</p>
         <p>If you are the challenge organizer and this URL previously pointed to a valid competition and it is now missing please contact us at info@codabench.org for more information.</p>
-        <p> If this is an error, please file a <a href="https://github.com/codalab/codabench/issues/new">bug report</a>. For more information about Codabench, check out the <a href="https://docs.codabench.org">docs</a>.</p>
+        <p>If this is an error, please fill a <a href="https://github.com/codalab/codabench/issues/new">bug report</a>. For more information about Codabench, check out the <a href="https://docs.codabench.org">docs</a>.</p>
         <a class="ui fluid blue submit button" href="/">Return to Home</a>
 </div>
 {% endblock %}

src/templates/403.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+<div class="sixteen wide mobile eight wide computer centered column">
+        <img src="/static/img/500.png">
+        <p>Something went wrong on our end.</p>
+        <p>If this is an error, please fill a <a href="https://github.com/codalab/codabench/issues/new">bug report</a>. For more information about Codabench, check out the <a href="https://docs.codabench.org">docs</a>.</p>
+        <a class="ui fluid blue submit button" href="/">Return to Home</a>
+</div>
+{% endblock %}