Error messages in the UI

lib/document_handler.js

@@ -24,7 +24,7 @@ DocumentHandler.prototype.handleGet = function(key, response, skipExpire) {
     else {
       winston.warn('document not found', { key: key });
       response.writeHead(404, { 'content-type': 'application/json' });
-      response.end(JSON.stringify({ message: 'document not found' }));
+      response.end(JSON.stringify({ message: 'Document not found.' }));
     }
   }, skipExpire);
 };
@@ -40,7 +40,7 @@ DocumentHandler.prototype.handleRawGet = function(key, response, skipExpire) {
     else {
       winston.warn('raw document not found', { key: key });
       response.writeHead(404, { 'content-type': 'application/json' });
-      response.end(JSON.stringify({ message: 'document not found' }));
+      response.end(JSON.stringify({ message: 'Document not found.' }));
     }
   }, skipExpire);
 };
@@ -58,7 +58,7 @@ DocumentHandler.prototype.handlePost = function(request, response) {
       _this.cancelled = true;
       winston.warn('document >maxLength', { maxLength: _this.maxLength });
       response.writeHead(400, { 'content-type': 'application/json' });
-      response.end(JSON.stringify({ message: 'document exceeds maximum length' }));
+      response.end(JSON.stringify({ message: 'Document exceeds maximum length.' }));
     }
   });
   request.on('end', function(end) {
@@ -72,7 +72,7 @@ DocumentHandler.prototype.handlePost = function(request, response) {
         else {
           winston.verbose('error adding document');
           response.writeHead(500, { 'content-type': 'application/json' });
-          response.end(JSON.stringify({ message: 'error adding document' }));
+          response.end(JSON.stringify({ message: 'Error adding document.' }));
         }
       });
     });
@@ -80,7 +80,7 @@ DocumentHandler.prototype.handlePost = function(request, response) {
   request.on('error', function(error) {
     winston.error('connection error: ' + error.message);
     response.writeHead(500, { 'content-type': 'application/json' });
-    response.end(JSON.stringify({ message: 'connection error' }));
+    response.end(JSON.stringify({ message: 'Connection error.' }));
   });
 };
 

static/application.css

@@ -110,7 +110,7 @@ textarea {
 	right: 0px;
 }
 
-#box3 {
+#box3, #messages li {
 	background: #173e48;
 	font-family: Helvetica, sans-serif;
 	font-size: 12px;
@@ -118,7 +118,7 @@ textarea {
 	padding: 10px 15px;
 }
 
-#box3 .label {
+#box3 .label, #messages li {
 	color: #fff;
 	font-weight: bold;
 }
@@ -147,3 +147,22 @@ textarea {
 #box2 .function.twitter { background-position: -153px top; }
 #box2 .function.enabled.twitter { background-position: -153px center; }
 #box2 .function.enabled.twitter:hover { background-position: -153px bottom; }
+
+#messages {
+	position:fixed;
+	top:0px;
+	right:138px;
+	margin:0;
+	padding:0;
+	width:400px;
+}
+
+#messages li {
+	background:rgba(23,62,72,0.8);
+	margin:0 auto;
+	list-style:none;
+}
+
+#messages li.error {
+	background:rgba(102,8,0,0.8);
+}

static/application.js

@@ -57,12 +57,20 @@ haste_document.prototype.save = function(data, callback) {
       _this.locked = true;
       _this.key = res.key;
       var high = hljs.highlightAuto(data);
-      callback({
+      callback(null, {
         value: high.value,
         key: res.key,
         language: high.language,
         lineCount: data.split("\n").length
       });
+    },
+    error: function(res) {
+      try {
+        callback($.parseJSON(res.responseText));
+      }
+      catch (e) {
+        callback({message: 'Something went wrong!'});
+      }
     }
   });
 };
@@ -91,6 +99,15 @@ haste.prototype.setTitle = function(ext) {
   document.title = title;
 };
 
+// Show a message box
+haste.prototype.showMessage = function(msg, cls) {
+  var msgBox = $('<li class="'+(cls || 'info')+'">'+msg+'</li>');
+  $('#messages').prepend(msgBox);
+  setTimeout(function() {
+    msgBox.slideUp('fast', function() { $(this).remove(); });
+  }, 3000);
+};
+
 // Show the light key
 haste.prototype.lightKey = function() {
   this.configureKey(['new', 'save']);
@@ -209,8 +226,11 @@ haste.prototype.duplicateDocument = function() {
 // Lock the current document
 haste.prototype.lockDocument = function() {
   var _this = this;
-  this.doc.save(this.$textarea.val(), function(ret) {
+  this.doc.save(this.$textarea.val(), function(err, ret) {
-    if (ret) {
+    if (err) {
+      _this.showMessage(err.message, 'error');
+    }
+    else if (ret) {
       _this.$code.html(ret.value);
       _this.setTitle(ret.key);
       var file = '/' + ret.key;

static/index.html

@@ -39,6 +39,7 @@
 	</head>
 
 	<body>
+		<ul id="messages"></ul>
 
 		<div id="key">
 		  <div id="pointer" style="display:none;"></div>