Display errors caused in AJAX requests

src/pretix/base/templates/400.html

@@ -6,7 +6,7 @@
     <h1>{% trans "Bad Request" %}</h1>
     <p>{% trans "We were unable to parse your request." %}</p>
     <p>{{ exception }}</p>
-    <p>
+    <p class="links">
         <a href="javascript:history.back()">{% trans "Take a step back" %}</a>
         &middot; <a href="javascript:location.reload()">{% trans "Try again" %}</a>
     </p>

src/pretix/base/templates/403.html

@@ -6,7 +6,7 @@
     <h1>{% trans "Permission denied" %}</h1>
     <p>{% trans "You do not have access to this page." %}</p>
     <p>{{ exception }}</p>
-    <p>
+    <p class="links">
         <a href="javascript:history.back()">{% trans "Take a step back" %}</a>
         &middot; <a href="javascript:location.reload()">{% trans "Try again" %}</a>
     </p>

src/pretix/base/templates/404.html

@@ -6,7 +6,7 @@
     <h1>{% trans "Not found" %}</h1>
     <p>{% trans "I'm afraid we could not find the the resource you requested." %}</p>
     <p>{{ exception }}</p>
-    <p>
+    <p class="links">
         <a href="javascript:history.back()">{% trans "Take a step back" %}</a>
     </p>
 {% endblock %}

src/pretix/base/templates/500.html

@@ -7,7 +7,7 @@
     <p>{% trans "We had trouble processing your request." %}</p>
     <p>{% trans "If this problem persists, please contact us." %}</p>
     <p>{{ exception }}</p>
-    <p>
+    <p class="links">
         <a href="javascript:history.back()">{% trans "Take a step back" %}</a>
         &middot; <a href="javascript:location.reload()">{% trans "Try again" %}</a>
     </p>

src/pretix/base/templates/csrffail.html

@@ -18,7 +18,7 @@
             Please go back to the last page, refresh this page and then try again. If the problem persists, please get in touch with us.
         {% endblocktrans %}</p>
     {% endif %}
-    <p>
+    <p class="links">
         <a href="javascript:history.back()">{% trans "Take a step back" %}</a>
     </p>
 {% endblock %}

src/pretix/presale/templates/pretixpresale/base.html

@@ -37,6 +37,8 @@
         {% endblocktrans %}
     {% endwith %}
 </footer>
+<div id="ajaxerr">
+</div>
 <div id="loadingmodal">
     <i class="fa fa-cog big-rotating-icon"></i>
     <h1>{% trans "We are processing your request…" %}</h1>

src/static/pretixpresale/js/ui/asynctask.js

@@ -42,10 +42,12 @@ function async_task_error(jqXHR, textStatus, errorThrown) {
     "use strict";
     waitingDialog.hide();
     // TODO: Handle status codes != 200
-    // if(jqXHR.status == 500) {
-    // } if(jqXHR.status == 403) {
-    // } if(jqXHR.status == 503) {
-    // }
+    var c = $(jqXHR.responseText).filter('.container');
+    if (c.length > 0) {
+        ajaxErrDialog.show(c.first().html());
+    } else {
+        alert(gettext('Unknown error.'));
+    }
 }
 
 $(function () {

src/static/pretixpresale/js/ui/main.js

@@ -19,6 +19,8 @@ $(function () {
         $("#voucher-box").slideDown();
         $("#voucher-toggle").slideUp();
     });
+
+    $("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide);
 });
 
 var waitingDialog = {
@@ -32,3 +34,17 @@ var waitingDialog = {
         $("body").removeClass("loading");
     }
 };
+
+var ajaxErrDialog = {
+    show: function (c) {
+        "use strict";
+        $("#ajaxerr").html(c);
+        $("#ajaxerr .links").html("<a class='btn btn-default ajaxerr-close'>"
+                                  + gettext("Close message") + "</a>");
+        $("body").addClass("ajaxerr");
+    },
+    hide: function () {
+        "use strict";
+        $("body").removeClass("ajaxerr");
+    }
+};

src/static/pretixpresale/scss/main.scss

@@ -64,7 +64,7 @@ body.loading .container {
     filter: blur(2px);
 }
 
-#loadingmodal {
+#loadingmodal, #ajaxerr {
     position: fixed;
     top: 0;
     left: 0;
@@ -76,16 +76,25 @@ body.loading .container {
     z-index: 900000;
     visibility: hidden;
 
-    .big-rotating-icon {
+    .big-icon {
         margin-top: 50px;
+        font-size: 200px;
+        color: $brand-primary;
+    }
+
+    .big-rotating-icon {
         -webkit-animation: fa-spin 8s infinite linear;
         animation: fa-spin 8s infinite linear;
+        margin-top: 50px;
         font-size: 200px;
         color: $brand-primary;
     }
 }
+#ajaxerr {
+    background: rgba(236, 236, 236, .9);
+}
 
-.loading #loadingmodal {
+.loading #loadingmodal, .ajaxerr #ajaxerr {
     opacity: 1;
     visibility: visible;
     transition: opacity .5s ease-in-out;