Display errors caused in AJAX requests

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;