Implement errors

Signed-off-by: Knut Ahlers <knut@ahlers.me>

frontend/app.coffee

@@ -1,5 +1,9 @@
 fileURL = undefined
 
+MSG_NOT_FOUND = 'File not found'
+MSG_NOT_PERMITTED = 'Not allowed to access file'
+MSG_GENERIC_ERR = 'Something went wrong'
+
 $ ->
   $(window).bind 'hashchange', hashLoad
   hashLoad()
@@ -9,10 +13,14 @@ hashLoad = ->
   embedFileInfo(file)
 
 embedFileInfo = (file) ->
+  if file == ''
+    return handleErrorMessage MSG_NOT_FOUND
+
   fileURL = file
   $.ajax file,
     method: 'HEAD'
     success: handleEmbed
+    error: handleError
 
 handleEmbed = (data, status, xhr) ->
   type = xhr.getResponseHeader 'Content-Type'
@@ -33,3 +41,16 @@ handleEmbed = (data, status, xhr) ->
     return
 
   $('.show-generic').show()
+
+handleError = (xhr, status) ->
+  message = switch xhr.status
+    when 404 then MSG_NOT_FOUND
+    when 403 then MSG_NOT_PERMITTED
+    else MSG_GENERIC_ERR
+
+  handleErrorMessage message
+
+handleErrorMessage = (message) ->
+  $('.error').text message
+  $('.show-loading').hide()
+  $('.show-error').show()

frontend/app.js

@@ -1,9 +1,15 @@
 // Generated by CoffeeScript 1.12.4
 (function() {
-  var embedFileInfo, fileURL, handleEmbed, hashLoad;
+  var MSG_GENERIC_ERR, MSG_NOT_FOUND, MSG_NOT_PERMITTED, embedFileInfo, fileURL, handleEmbed, handleError, handleErrorMessage, hashLoad;
 
   fileURL = void 0;
 
+  MSG_NOT_FOUND = 'File not found';
+
+  MSG_NOT_PERMITTED = 'Not allowed to access file';
+
+  MSG_GENERIC_ERR = 'Something went wrong';
+
   $(function() {
     $(window).bind('hashchange', hashLoad);
     return hashLoad();
@@ -16,10 +22,14 @@
   };
 
   embedFileInfo = function(file) {
+    if (file === '') {
+      return handleErrorMessage(MSG_NOT_FOUND);
+    }
     fileURL = file;
     return $.ajax(file, {
       method: 'HEAD',
-      success: handleEmbed
+      success: handleEmbed,
+      error: handleError
     });
   };
 
@@ -42,4 +52,25 @@
     return $('.show-generic').show();
   };
 
+  handleError = function(xhr, status) {
+    var message;
+    message = (function() {
+      switch (xhr.status) {
+        case 404:
+          return MSG_NOT_FOUND;
+        case 403:
+          return MSG_NOT_PERMITTED;
+        default:
+          return MSG_GENERIC_ERR;
+      }
+    })();
+    return handleErrorMessage(message);
+  };
+
+  handleErrorMessage = function(message) {
+    $('.error').text(message);
+    $('.show-loading').hide();
+    return $('.show-error').show();
+  };
+
 }).call(this);

frontend/index.html

@@ -20,7 +20,7 @@
       h1 { text-align: center; font-size: 75px; }
       h2 { text-align: center; font-size: 24px; }
       .container { margin-top: 30px; }
-      .show-generic, .show-image, .show-video { display: none; }
+      .show-generic, .show-image, .show-video, .show-error { display: none; }
     </style>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -75,6 +75,13 @@
       </div>
     </div>
 
+    <div class="container show-error">
+      <h1>
+        <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+      </h1>
+      <h2 class="error"></h2>
+    </div>
+
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
             integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>