Add dashboard error pages (#326)

* Add dashboard error pages

* Add 410 and update small part of 504

readthedocsext/theme/templates/errors/dashboard/401.html

@@ -0,0 +1,36 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Unauthorized request" %}{% endblock %}
+
+{% block error_status %}401{% endblock %}
+{% block error_title %}
+  {{ block.super }}
+  {% trans "Unauthorized request" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-lock-keyhole{% endblock %}
+{% block error_icon_mobile_name %}fa-lock-keyhole{% endblock %}
+{% block error_icon_computer_style %}--fa-primary-color: orange;{% endblock %}
+{% block error_icon_mobile_style %}--fa-primary-color: orange;{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed %}
+      You may not be logged in, or your account may not have the necessary permissions to view this page.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  <p>
+    {% blocktrans trimmed %}
+      Try logging in again or logging in with a different account. If this does
+      not help, verify that your account has the necessary permissions to view
+      this page.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/403.html

@@ -0,0 +1,38 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Access restricted" %}{% endblock %}
+
+{% block error_status %}403{% endblock %}
+{% block error_title %}
+  {{ block.super }}
+  {% trans "Access restricted" %}
+{% endblock error_title %}
+{% block error_subtitle_text %}
+{% endblock error_subtitle_text %}
+
+{% block error_icon_computer_name %}fa-lock-keyhole{% endblock %}
+{% block error_icon_mobile_name %}fa-lock-keyhole{% endblock %}
+{% block error_icon_computer_style %}--fa-primary-color: orange;{% endblock %}
+{% block error_icon_mobile_style %}--fa-primary-color: orange;{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed %}
+      Your account may not have the necessary permissions to view this page.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  <p>
+    {% blocktrans trimmed %}
+      Try logging in again or logging in with a different account. If this does
+      not help, verify that your account has the necessary permissions to view
+      this page.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/404.html

@@ -0,0 +1,60 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% comment %}
+  This is for the dashboard 404 error page, not the documentation 404 error
+  pages. This will only show from our application.
+{% endcomment %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Page not found" %}{% endblock %}
+
+{% block error_status %}404{% endblock %}
+{% block error_title %}
+  {{ block.super }}
+  {% trans "Page not found" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-radar{% endblock %}
+{% block error_icon_mobile_name %}fa-radar{% endblock %}
+{% block error_icon_computer_style %}--fa-primary-color: greenyellow;{% endblock %}
+{% block error_icon_mobile_style %}--fa-primary-color: greenyellow;{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed %}
+      The resource you requested may no longer exist, may have been moved, or
+      you might not have permission to view this page.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% comment %}
+  We support the following cases with this error page:
+
+  - The URL was just plain bad
+  - The user is not authenticated and the project/resource is not public. We don't want to indicate that the project/resource exists.
+  - The user is authenticated and doesn't have permissions. Again, we do not want to indicate that the resource exists.
+
+{% endcomment %}
+{% block error_content_help %}
+  {% if request.user.is_authenticated %}
+    {# User is authenticated, we might have given a 404 to hide a 403 response #}
+    <p>
+      {% blocktrans trimmed %}
+        Ensure you have the correct permissions and try again.
+      {% endblocktrans %}
+    </p>
+  {% else %}
+    {# User is not authenticated, we might have given a 404 to hide a 401 response #}
+    <p>
+      {% url "account_login" as url_login %}
+      {% blocktrans trimmed with url_login=url_login url_login_next=request.path %}
+        <a href="{{ url_login }}?next={{ url_login_next }}">Log in</a> and try loading this page again.
+      {% endblocktrans %}
+    </p>
+  {% endif %}
+
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/410.html

@@ -0,0 +1,35 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Project unavailable" %}{% endblock %}
+
+{% block error_status %}410{% endblock %}
+{% block error_title %}
+  {{ block.super }}
+  {% trans "Project unavailable" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-cloud-slash{% endblock %}
+{% block error_icon_mobile_name %}fa-cloud-slash{% endblock %}
+{% block error_icon_computer_style %}--fa-primary-color: orangered;{% endblock %}
+{% block error_icon_mobile_style %}--fa-primary-color: orangered;{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed %}
+      This project was flagged as spam and is currently disabled.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  <p>
+    {% url 'support' as url_support %}
+    {% blocktrans trimmed with url_support=url_support %}
+      Please <a href="{{ url_support }}">contact us</a> if you think this is a mistake.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/429.html

@@ -0,0 +1,36 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Too many requests" %}{% endblock %}
+
+{% block error_status %}429{% endblock %}
+{% block error_title %}
+  {{ block.super }}
+  {% trans "Too many requests" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-turtle fa-swap-opacity{% endblock %}
+{% block error_icon_mobile_name %}fa-turtle fa-swap-opacity{% endblock %}
+{% block error_icon_computer_style %}--fa-primary-color: palegreen; --fa-secondary-color: palegreen;{% endblock %}
+{% block error_icon_mobile_style %}--fa-primary-color: palegreen; --fa-secondary-color: palegreen;{% endblock %}
+
+{% block error_content %}
+  <p>
+    {# Translators: this is colloquial and silly and doesn't need verbatim translation #}
+    {% trans "Slow down there, partner." %}
+    {% blocktrans trimmed %}
+      You sent too many requests in a short period of time.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  <p>
+    {% blocktrans trimmed %}
+      Wait several minutes before trying your request again.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/4xx.html

@@ -0,0 +1,37 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% comment %}
+  Leaving this as a technically-not-accurate "bad request", as this works okay
+  for being a fallback for missing error templates.
+{% endcomment %}
+{% block title %}{% trans "Bad request" %}{% endblock %}
+
+{% block error_status %}{% endblock %}
+{% block error_title %}
+  {% trans "Bad request" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-cloud-exclamation{% endblock %}
+{% block error_icon_mobile_name %}fa-cloud-exclamation{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed with url_support=url_support %}
+      Your request is either unsupported or we didn't understand it.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  <p>
+    {% url 'support' as url_support %}
+    {% blocktrans trimmed with url_support=url_support %}
+      Try again later or <a href="{{ url_support }}">contact us</a>
+      if this problem persists.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/504.html

@@ -0,0 +1,40 @@
+{% extends "errors/dashboard/base.html" %}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Service unavailable" %}{% endblock %}
+
+{% comment %}
+  This is the error for both 504/504 responses from AWS ALB. When we emit this
+  status, there is a problem with our instances, our load, or a significant
+  issue with our application code.
+{% endcomment %}
+
+{% block error_status %}504{% endblock %}
+{% block error_title %}
+  {{ block.super }}
+  {% trans "Service unavailable" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-cloud-xmark{% endblock %}
+{% block error_icon_mobile_name %}fa-cloud-xmark{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed %}
+      We have encountered a problem and Read the Docs is currently unavailable.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  {% url 'support' as url_support %}
+  <p>
+    {% blocktrans trimmed with url_support=url_support %}
+      Try back again shortly and <a href="{{ url_support }}">contact us</a> if
+      you continue to notice this error.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/5xx.html

@@ -0,0 +1,37 @@
+{% extends "errors/dashboard/base.html" %}
+
+{# The dashboard 5xx page, shows like it is part of the application #}
+
+{% load core_tags %}
+{% load i18n %}
+
+{% block title %}{% trans "Server error" %}{% endblock %}
+
+{% block error_status %}500{% endblock %}
+{% block error_title %}
+  {% trans "Something went wrong" %}
+{% endblock error_title %}
+
+{% block error_icon_computer_name %}fa-fire fa-swap-opacity{% endblock %}
+{% block error_icon_mobile_name %}fa-fire fa-swap-opacity{% endblock %}
+{% block error_icon_computer_style %}--fa-primary-color: red; --fa-secondary-color: orangered;{% endblock %}
+{% block error_icon_mobile_style %}--fa-primary-color: red; --fa-secondary-color: orangered;{% endblock %}
+
+{% block error_content %}
+  <p>
+    {% blocktrans trimmed %}
+      There was an unexpected error while trying to view this page.
+      You may have encountered a bug or a temporary issue affecting our services.
+    {% endblocktrans %}
+  </p>
+{% endblock error_content %}
+
+{% block error_content_help %}
+  <p>
+    {% url 'support' as url_support %}
+    {% blocktrans trimmed %}
+      <a href="{{ url_support }}">Contact us</a> if you continue to notice this error.
+    {% endblocktrans %}
+  </p>
+  {{ block.super }}
+{% endblock error_content_help %}

readthedocsext/theme/templates/errors/dashboard/base.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% load i18n %}
+
+{% comment %}
+  Errors extending from this base are _strictly_ dashboard errors. These errors
+  will look and feel like part of the application, where errors emit from
+  Proxito will display as an unbranded or minimally branded page.
+{% endcomment %}
+
+{% block content %}
+  <section>
+    <div class="ui hero padded container">
+      <div class="ui very padded text container">
+        <div class="ui vertically padded centered grid">
+          {# TODO there is probably a way to combine the two columns below and not repeat icon definition #}
+          <div class="ui computer only tablet only right aligned three wide computer three wide tablet column">
+            {% block error_icon_computer %}
+              <i class="fad {% block error_icon_computer_name %}{% endblock %} big black inverted shadowed circular icon"
+                 style="{% block error_icon_computer_style %}--fa-secondary-opacity: .5;{% endblock %}"></i>
+            {% endblock error_icon_computer %}
+          </div>
+          <div class="ui mobile only center aligned sixteen wide column">
+            {% block error_icon_mobile %}
+              <i class="fad {% block error_icon_mobile_name %}{% endblock %} big black inverted shadowed circular icon"
+                 style="{% block error_icon_mobile_style %}--fa-secondary-opacity: .5;{% endblock %}"></i>
+            {% endblock error_icon_mobile %}
+          </div>
+
+          <div class="ui ten wide computer eleven wide tablet sixteen wide mobile column">
+            <h1 class="ui small left aligned monospace header">
+              {% block error_title %}
+                <span class="ui grey text">
+                  {% block error_status %}
+                  {% endblock error_status %}
+                </span>
+              {% endblock error_title %}
+            </h1>
+
+            {% block error_content %}
+            {% endblock error_content %}
+
+            {% block error_content_help %}
+              <p>
+                <a class="ui button" href="javascript:history.back();">{% trans "Go back" %}</a>
+              </p>
+            {% endblock error_content_help %}
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock content %}