Generic message system

settings.py

@@ -29,4 +29,4 @@ GROUP = None
 
 # limit size of pasted text in bytes. Be carefull allowing too much size can slow down user's
 # browser
-MAX_SIZE = 500 * 1
+MAX_SIZE = 500 * 1000

static/css/style.css

@@ -109,6 +109,10 @@ h4#pixels-total {
 	margin-top: 40px;
 }
 
+.alert .title {
+	display:block;
+}
+
 /* Home */
 
 .btn-group {
@@ -143,10 +147,6 @@ input.hide-upload {
 	height: 49px;
 }
 
-.max-size-reached {
-	display: none;
-}
-
 /* Paste Page */
 
 .items {
@@ -157,8 +157,6 @@ input.hide-upload {
 	background-color: white;
 }
 
-#copy-success, 
-#short-url-success, 
 .submit-form {
 	display:none;
 }

static/js/behavior.js

@@ -1,11 +1,11 @@
 ;
 
-/* Start random number generator seeding ASAP *%
+/* Start random number generator seeding ASAP */
 sjcl.random.startCollectors();
 /* Ensure jquery use cache for ajax requests */
 $.ajaxSetup({ cache: true });
 
-
+zerobin = {
     /** Base64 + compress + encrypt, with callbacks before each operation,
         and all of them are executed in a timed continuation to give
         a change to the UI to respond.
@@ -223,6 +223,19 @@ $.ajaxSetup({ cache: true });
         lineBreaks = length - text.replace(crlf, '').length;
 
       return length + nonAscii + Math.max(0, options.lineBreaks * (lineBreaks - 1));
+  },
+  message: function(type, message, title, flush, callback) {
+
+    if (flush) {$('.alert-'+type).remove()}
+
+    $message = $('#alert-template').clone().attr('id', null)
+                                   .addClass('alert alert-' + type);
+    $('.message', $message).html(message);
+
+    if (title) {$('.title', $message).html(title)}
+    else {$('.title', $message).remove()}
+
+    $message.prependTo($('#main')).show('fadeUp', callback);
   }
 };
 
@@ -242,14 +255,20 @@ $('button[type=submit]').live("click", function(e){
 
   var sizebytes = zerobin.count($('#content').val(), { });
   var oversized = sizebytes > zerobin.max_size;
+  var readable_fsize = Math.round(sizebytes/1024);
+  var readable_maxsize = Math.round(zerobin.max_size/1024)
   if (oversized){
-    $('.max-size-reached').show();
-    $('.file-size').text(Math.round(sizebytes/1024));
+    zerobin.message('error',
+                    ('Your file is <strong class="file-size">' + readable_fsize +
+                    '</strong>KB. You have reached the maximum size limit of ' +
+                    readable_maxsize + 'KB.'),
+                    'Warning!', true)
   }
 
   if (!oversized && paste.trim()) {
 
-    $('form.well p').hide();
+    $form = $('input, textarea, select, button').prop('disabled', true);
+    $form.prop('disabled', true);
     $loading = $('form.well .progress').show();
     var $loading = $('form.well .progress .bar')
                     .css('width', '25%')
@@ -278,9 +297,14 @@ $('button[type=submit]').live("click", function(e){
 
           $.post('/paste/create', data)
            .error(function(error) {
-              $('form.well p').show();
+              $form.prop('disabled', false);
               $loading.hide();
-              alert('Error: paste could not be saved. Please try again later.');
+              zerobin.message(
+                'error',
+                'Paste could not be saved. Please try again later.',
+                'Error'
+              );
+
            })
            .success(function(data) {
               $loading.text('Redirecting to new paste...').css('width', '100%');
@@ -291,15 +315,16 @@ $('button[type=submit]').live("click", function(e){
         }
       );
     } catch (err) {
-      $('form.well p').show();
+      $form.prop('disabled', false);
       $loading.hide();
-      alert('Error: paste could not be encrypted. Aborting.');
+      zerobin.message('error', 'Paste could not be encrypted. Aborting.',
+                      'Error');
     }
   }
 
 });
 
-**
+/**
     DECRYPTION:
     On the display paste page, decrypt and decompress the paste content,
     add syntax coloration then setup the copy to clipboard button.
@@ -318,7 +343,8 @@ if (content && key) {
     /* On error*/
     function(){
       $bar.hide();
-      alert('Could not decrypt data (Wrong key ?)');
+      zerobin.message('error', 'Could not decrypt data (Wrong key ?)',
+                      'Error');
     },
 
     /* Update progress bar */
@@ -345,9 +371,10 @@ if (content && key) {
           zerobin.getTinyURL(window.location.toString(), function(tinyurl){
             clip.setText(tinyurl);
             $('#copy-success').hide();
-            $('#short-url-success')
-             .html('Short url: <a href="' + tinyurk + '">' + tinyurk + '</a>')
-             .show('fadeUp');
+            zerobin.message('success',
+                            '<a href="' + tinyurk + '">' + tinyurk + '</a>',
+                            'Short url'
+            )
             $('#short-url').text('Get short url');
           });
         });
@@ -360,7 +387,8 @@ if (content && key) {
           clip.setText(zerobin.getPasteContent());
         });
         clip.addEventListener('complete', function(){
-          $('#copy-success').show('fadeUp', function(){clip.reposition()});
+          zerobin.message('info', 'The paste is now in your clipboard',
+                          '', false, function(){clip.reposition()});
         });
         clip.glue('clip-button');
 
@@ -441,7 +469,7 @@ try {
   });
 }
 catch (e) {
-  alert(e);
+  zerobin.message('error', 'Could no upload the file', 'Error');
 }
 
 $('#file-upload').mouseover(function(){
@@ -451,7 +479,7 @@ $('#file-upload').mouseover(function(){
 
 /* Alerts */
 
-$(".close").click(function(){
+$(".close").live('click', function(){
   $(this).parent().fadeOut();
 });
 

views/base.tpl

@@ -23,7 +23,7 @@
     <script src="/static/js/jquery-1.7.2.min.js"></script>
     <script src="/static/js/behavior.js"></script>
     <script type="text/javascript">
-      zerobin.max_size = {{ max_size }};
+      zerobin.max_size = {{ get('max_size', -1)}};
     </script>
 
   </head>
@@ -63,7 +63,7 @@
           </div><!--/.well -->
         </div><!--/span-->
 
-        <div class="span10">
+        <div id='main' class="span10">
 
            %include
 
@@ -114,5 +114,12 @@
 
     -->
 
+    <p id="alert-template">
+      <a class="close" data-dismiss="alert" href="#">×</a>
+      <strong class="title"></strong>
+      <span class="message"></span>
+    </p>
+
   </body>
+
 </html>

views/home.tpl

@@ -1,9 +1,3 @@
-<div class="alert alert-error max-size-reached">
-  <a class="close" data-dismiss="alert" href="#">×</a>
-  <strong>Warning!</strong><br>
-  Your file is <strong class="file-size"></strong>KB You have reached the maximum size limit of {{ max_size_kb }}KB.
-</div>
-
 <p class="file-upload">
 	<input type="button" class="btn btn-upload"  value="Upload File">
 	<input type="file" class="hide-upload" id="file-upload" >
@@ -19,15 +13,15 @@
     <option value="never">Never</option>
   </select>
 <button type="submit" class="btn btn-primary">Submit</button>
+</p>
 <p>
-<p>
+    <div class="progress progress-striped active">
+      <div class="bar"></div>
+    </div>
     <textarea rows="10"  style="width:100%;"
               class="input-xlarge"
               id="content" name="content"></textarea>
 </p>
-<div class="progress progress-striped active">
-  <div class="bar"></div>
-</div>
 </form>
 
 

views/paste.tpl

@@ -1,24 +1,24 @@
 %if "burn_after_reading" in str(paste.expiration):
   %if keep_alive:
-   <div class="alert alert-info">
-      <strong>Ok!</strong>
+    <p class="alert alert-info">
+      <a class="close" data-dismiss="alert" href="#">×</a>
+      <strong class="title">Ok!</strong>
+      <span class="message">
         This paste will be deleted the next time it is read.
-    </div>
+      </span>
+    </p>
   %else:
-   <div class="alert">
-   <strong>Warning!</strong>
-      This paste has self-destructed. If you close this windows, there is not way
-      to recover it.
-   </div>
+    <p class="alert">
+      <a class="close" data-dismiss="alert" href="#">×</a>
+      <strong class="title">Warning!</strong>
+      <span class="message">
+        This paste has self-destructed. If you close this windows,
+        there is not way to recover it.
+      </span>
+    </p>
   %end
 %end
 
-<div id="copy-success" class="alert alert-success">
-  The paste is now in your clipboad
-</div>
-
-<div id="short-url-success" class="alert alert-success"></div>
-
 <div class="well paste-form">
 <form action="/" method="get" accept-charset="utf-8">
 <p class="lnk-option">