mirror of
https://github.com/Tygs/0bin.git
synced 2023-08-10 21:13:00 +03:00
Loading bar works and encryption/decryption is now a serie of continuations
This commit is contained in:
sam
parent
e34e740808
commit
65d75f2faf
@ -165,3 +165,20 @@ text-decoration:underline;
|
||||
display:none;
|
||||
}
|
||||
|
||||
/** Progress bar */
|
||||
|
||||
.progress {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.progress .bar {
|
||||
width: 25%;
|
||||
text-indent: 10px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
-webkit-transition: width 0.1s ease;
|
||||
-moz-transition: width 0.1s ease;
|
||||
-ms-transition: width 0.1s ease;
|
||||
-o-transition: width 0.1s ease;
|
||||
transition: width 0.1s ease;
|
||||
@ -5,24 +5,119 @@ sjcl.random.startCollectors();
|
||||
/* Ensure jquery use cache for ajax requests */
|
||||
$.ajaxSetup({ cache: true });
|
||||
|
||||
|
||||
|
||||
zerobin = {
|
||||
encrypt: function(key, content) {
|
||||
content = sjcl.codec.base64.fromBits(sjcl.codec.utf8String.toBits(content));
|
||||
return sjcl.encrypt(key, lzw.compress(content));
|
||||
|
||||
/** 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.
|
||||
*/
|
||||
encrypt: function(key, content, toBase64Callback,
|
||||
compressCallback, encryptCallback, doneCallback) {
|
||||
|
||||
setTimeout (function(){
|
||||
|
||||
content = sjcl.codec.utf8String.toBits(content);
|
||||
if (toBase64Callback) {toBase64Callback()}
|
||||
|
||||
setTimeout(function(){
|
||||
|
||||
content = sjcl.codec.base64.fromBits(content);
|
||||
if (compressCallback) {compressCallback()}
|
||||
|
||||
setTimeout(function(){
|
||||
|
||||
content = lzw.compress(content);
|
||||
if (encryptCallback) {encryptCallback()}
|
||||
|
||||
setTimeout(function(){
|
||||
content = sjcl.encrypt(key, content);
|
||||
if (doneCallback) {doneCallback(content)}
|
||||
}, 250);
|
||||
|
||||
}, 250);
|
||||
|
||||
}, 250);
|
||||
|
||||
}, 250);
|
||||
},
|
||||
decrypt: function(key, content) {
|
||||
content = lzw.decompress(sjcl.decrypt(key, content));
|
||||
return sjcl.codec.utf8String.fromBits(sjcl.codec.base64.toBits(content));
|
||||
|
||||
/** Base64 decoding + uncompress + decrypt, with callbacks before each operation,
|
||||
and all of them are executed in a timed continuation to give
|
||||
a change to the UI to respond.
|
||||
|
||||
This is where using a library to fake synchronicity could start to be
|
||||
useful, this code is starting be difficult to read. If anyone read this
|
||||
and got a suggestion, by all means, speak your mind.
|
||||
*/
|
||||
decrypt: function(key, content, errorCallback, uncompressCallback,
|
||||
fromBase64Callback, toStringCallback, doneCallback) {
|
||||
|
||||
/* Decrypt */
|
||||
setTimeout(function(){
|
||||
|
||||
try {
|
||||
|
||||
content = sjcl.decrypt(key, content);
|
||||
if (uncompressCallback) {uncompressCallback()}
|
||||
|
||||
/* Decompress */
|
||||
setTimeout(function(){
|
||||
|
||||
try {
|
||||
|
||||
content = lzw.decompress(content);
|
||||
if (fromBase64Callback) {fromBase64Callback()}
|
||||
|
||||
/* From base 64 to bits */
|
||||
setTimeout(function(){
|
||||
|
||||
try {
|
||||
|
||||
content = sjcl.codec.base64.toBits(content);
|
||||
if (toStringCallback) {toStringCallback()}
|
||||
|
||||
/* From bits to string */
|
||||
setTimeout(function(){
|
||||
|
||||
try {
|
||||
content = sjcl.codec.utf8String.fromBits(content);
|
||||
if (doneCallback) {doneCallback(content)}
|
||||
} catch (err) {
|
||||
errorCallback(err);
|
||||
}
|
||||
|
||||
}, 250); /* "End of from bits to string" */
|
||||
|
||||
} catch (err) {
|
||||
errorCallback(err);
|
||||
}
|
||||
|
||||
}, 250); /* End of "from base 64 to bits" */
|
||||
|
||||
} catch (err) {
|
||||
errorCallback(err);
|
||||
}
|
||||
|
||||
}, 250); /* End of "decompress" */
|
||||
|
||||
} catch (err) {
|
||||
errorCallback(err);
|
||||
}
|
||||
|
||||
}, 250); /* End of "decrypt" */
|
||||
},
|
||||
|
||||
/** Create a random base64 string long enought to be suitable as
|
||||
an encryption key */
|
||||
make_key: function() {
|
||||
return sjcl.codec.base64.fromBits(sjcl.random.randomWords(8, 0), 0);
|
||||
},
|
||||
|
||||
get_date: function(){
|
||||
var date = new Date();
|
||||
return date.getDate()+"-"+(date.getMonth()+1)+"-"+date.getFullYear();
|
||||
},
|
||||
|
||||
get_time: function(){
|
||||
var date = new Date();
|
||||
var h=date.getHours();
|
||||
@ -33,9 +128,11 @@ zerobin = {
|
||||
if (s<10) {s = "0" + s}
|
||||
return h+":"+m+":"+s;
|
||||
},
|
||||
numOrdA: function(a, b){
|
||||
return (a-b);
|
||||
|
||||
numOrdA: function(a, b){
|
||||
return (a-b);
|
||||
},
|
||||
|
||||
get_keys: function(){
|
||||
var keys = new Array();
|
||||
for(i=0; i<=localStorage.length; i++){
|
||||
@ -44,6 +141,7 @@ zerobin = {
|
||||
}
|
||||
return keys.sort(zerobin.numOrdA);
|
||||
},
|
||||
|
||||
/** Get a tinyurl using JSONP */
|
||||
getTinyURL: function(longURL, success) {
|
||||
|
||||
@ -56,6 +154,7 @@ zerobin = {
|
||||
var api = 'http://json-tinyurl.appspot.com/?url=';
|
||||
$.getJSON(api + encodeURIComponent(longURL) + '&callback=' + callback);
|
||||
},
|
||||
|
||||
support_localstorage: function(){
|
||||
if (localStorage){
|
||||
return true;
|
||||
@ -63,6 +162,7 @@ zerobin = {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
store_paste: function(url){
|
||||
if (zerobin.support_localstorage){
|
||||
var date = new Date();
|
||||
@ -77,9 +177,10 @@ zerobin = {
|
||||
localStorage.setItem(keys.reverse()[0]+1, paste);
|
||||
}
|
||||
},
|
||||
|
||||
get_pastes: function(){
|
||||
if (zerobin.support_localstorage){
|
||||
var pastes = '';
|
||||
var pastes = '';
|
||||
var keys = zerobin.get_keys();
|
||||
keys.reverse();
|
||||
|
||||
@ -94,7 +195,7 @@ zerobin = {
|
||||
var on_at = 'on ';
|
||||
}
|
||||
pastes = pastes + '<li><a class="items" href="' + paste.split(';')[1] + '">' + on_at + display_date + '</a></li>';
|
||||
}
|
||||
}
|
||||
if (!pastes){
|
||||
return '<i class="grey">Your previous pastes will be saved in your browser using <a href="http://www.w3.org/TR/webstorage/">localStorage</a>.</i>';
|
||||
}
|
||||
@ -103,7 +204,8 @@ zerobin = {
|
||||
return 'Sorry your browser does not support LocalStorage, We cannot display your previous pastes.';
|
||||
}
|
||||
},
|
||||
get_paste_content: function(){
|
||||
|
||||
getPasteContent: function(){
|
||||
var content_clone = '' ;
|
||||
$("#paste-content li").each(function(index) {
|
||||
content_clone = content_clone + $(this).text() + '\n';
|
||||
@ -127,73 +229,137 @@ $('button[type=submit]').live("click", function(e){
|
||||
var paste = $('textarea').val();
|
||||
|
||||
if (paste.trim()) {
|
||||
var expiration = $('#expiration').val();
|
||||
var key = zerobin.make_key();
|
||||
var data = {content: zerobin.encrypt(key, paste), expiration: expiration}
|
||||
|
||||
$.post('/paste/create', data)
|
||||
.error(function(error) {
|
||||
alert('Paste could not be saved. Please try again later.');
|
||||
})
|
||||
.success(function(data) {
|
||||
var paste_url = '/paste/' + data['paste'] + '#' + key;
|
||||
window.location = (paste_url);
|
||||
zerobin.store_paste(paste_url);
|
||||
});
|
||||
$('form.well p').hide();
|
||||
$loading = $('form.well .progress').show();
|
||||
var $loading = $('form.well .progress .bar')
|
||||
.css('width', '25%')
|
||||
.text('Converting paste to bits...');
|
||||
|
||||
/* Encode, compress, encrypt and send the paste then redirect the user
|
||||
to the new paste. We ensure a loading animation is updated
|
||||
during the process by passing callbacks.
|
||||
*/
|
||||
try {
|
||||
|
||||
var expiration = $('#expiration').val();
|
||||
var key = zerobin.make_key();
|
||||
|
||||
zerobin.encrypt(key, paste,
|
||||
|
||||
function(){$loading.text('Encoding to base64...').css('width', '45%')},
|
||||
function(){$loading.text('Compressing...').css('width', '65%')},
|
||||
function(){$loading.text('Encrypting...').css('width', '85%')},
|
||||
|
||||
/* This block deal with sending the data, redirection or error handling */
|
||||
function(content){
|
||||
|
||||
$loading.text('Sending...').css('width', '95%');
|
||||
var data = {content: content, expiration: expiration};
|
||||
|
||||
$.post('/paste/create', data)
|
||||
.error(function(error) {
|
||||
$('form.well p').show();
|
||||
$loading.hide();
|
||||
alert('Error: paste could not be saved. Please try again later.');
|
||||
})
|
||||
.success(function(data) {
|
||||
$loading.text('Redirecting to new paste...').css('width', '100%');
|
||||
var paste_url = '/paste/' + data['paste'] + '#' + key;
|
||||
zerobin.store_paste(paste_url);
|
||||
window.location = (paste_url);
|
||||
});
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
$('form.well p').show();
|
||||
$loading.hide();
|
||||
alert('Error: paste could not be encrypted. Aborting.');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/** On the display paste page.
|
||||
Decrypt and decompress the paste content, add syntax coloration then
|
||||
setup the copy to clipboard button.
|
||||
/**
|
||||
DECRYPTION:
|
||||
On the display paste page, decrypt and decompress the paste content,
|
||||
add syntax coloration then setup the copy to clipboard button.
|
||||
*/
|
||||
var content = $('#paste-content').text().trim();
|
||||
var key = window.location.hash.substring(1);
|
||||
var error = false;
|
||||
if (content && key) {
|
||||
try {
|
||||
$('#paste-content').text(zerobin.decrypt(key, content));
|
||||
} catch(err) {
|
||||
error = true;
|
||||
alert('Could not decrypt data (Wrong key ?)');
|
||||
}
|
||||
|
||||
content = '';
|
||||
var $bar = $('.well form .progress').show();
|
||||
var $loading = $('.well form .progress .bar').css('width', '25%')
|
||||
.text('Decrypting paste...');
|
||||
|
||||
if (!error) {
|
||||
zerobin.decrypt(key, content,
|
||||
|
||||
$('#short-url').click(function(e) {
|
||||
e.preventDefault();
|
||||
$('#short-url').text('Loading short url...');
|
||||
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');
|
||||
$('#short-url').text('Get short url');
|
||||
/* On error*/
|
||||
function(){
|
||||
$bar.hide();
|
||||
alert('Could not decrypt data (Wrong key ?)');
|
||||
},
|
||||
|
||||
/* Update progress bar */
|
||||
function(){$loading.text('Decompressing...').css('width', '45%')},
|
||||
function(){$loading.text('Base64 decoding...').css('width', '65%')},
|
||||
function(){$loading.text('From bits to string...').css('width', '85%')},
|
||||
|
||||
/* When done */
|
||||
function(content){
|
||||
|
||||
/* Decrypted content goes back to initial container*/
|
||||
$('#paste-content').text(content);
|
||||
content = '';
|
||||
|
||||
$loading.text('Code coloration...').css('width', '95%');
|
||||
|
||||
/* Add a continuation to let the UI redraw */
|
||||
setTimeout(function(){
|
||||
|
||||
/* Setup link to get the paste short url*/
|
||||
$('#short-url').click(function(e) {
|
||||
e.preventDefault();
|
||||
$('#short-url').text('Loading short url...');
|
||||
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');
|
||||
$('#short-url').text('Get short url');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
prettyPrint();
|
||||
/* Setup flash clipboard button */
|
||||
ZeroClipboard.setMoviePath('/static/js/ZeroClipboard.swf' );
|
||||
|
||||
/* Setup flash clipboard button */
|
||||
ZeroClipboard.setMoviePath('/static/js/ZeroClipboard.swf' );
|
||||
var clip = new ZeroClipboard.Client();
|
||||
clip.addEventListener('mouseup', function(){
|
||||
clip.setText(zerobin.getPasteContent());
|
||||
});
|
||||
clip.addEventListener('complete', function(){
|
||||
$('#copy-success').show('fadeUp', function(){clip.reposition()});
|
||||
});
|
||||
clip.glue('clip-button');
|
||||
|
||||
var clip = new ZeroClipboard.Client();
|
||||
clip.addEventListener('mouseup', function(){
|
||||
clip.setText(zerobin.get_paste_content());
|
||||
});
|
||||
clip.addEventListener('complete', function(){
|
||||
$('#copy-success').show('fadeUp', function(){clip.reposition()});
|
||||
});
|
||||
clip.glue('clip-button');
|
||||
window.onresize = clip.reposition;
|
||||
|
||||
/** Syntaxic coloration */
|
||||
prettyPrint();
|
||||
|
||||
/* Display result */
|
||||
$loading.text('Done').css('width', '100%');
|
||||
$bar.hide();
|
||||
}, 250);
|
||||
|
||||
window.onresize = clip.reposition;
|
||||
}
|
||||
);
|
||||
|
||||
} /* End of "DECRYPTION" */
|
||||
|
||||
}
|
||||
|
||||
/* Synchronize expiration select boxes value */
|
||||
$('.paste-option select').live('change', function(){
|
||||
@ -201,11 +367,9 @@ $('.paste-option select').live('change', function(){
|
||||
$('.paste-option select').val(value);
|
||||
});
|
||||
|
||||
|
||||
/* Resize Textarea according to content */
|
||||
$('#content').elastic();
|
||||
|
||||
|
||||
/* Display bottom paste option buttons when needed */
|
||||
$('#content').live('keyup change', function(){
|
||||
if($('#content').height() < 400 ){
|
||||
@ -221,33 +385,14 @@ $('#content').live('keyup change', function(){
|
||||
/* Display previous pastes */
|
||||
$('.previous-pastes .items').html(zerobin.get_pastes());
|
||||
|
||||
|
||||
|
||||
/* clone a paste */
|
||||
$('.btn-clone').click(function(e){
|
||||
e.preventDefault();
|
||||
var content_clone = zerobin.get_paste_content();
|
||||
var content_clone = zerobin.getPasteContent();
|
||||
$('.submit-form').show();
|
||||
$('.paste-form').remove();
|
||||
$('#content').val(content_clone);
|
||||
$('#content').trigger('change');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}); /* End of "document ready" jquery callback */
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
pastebin featuring burn after reading, an history and
|
||||
a clipboard">
|
||||
|
||||
<link rel="shortcut icon" href="/static/ico/favicon.ico">
|
||||
<link rel="shortcut icon" href="/static/ico/favicon.ico">
|
||||
<link href="/static/css/prettify.css" rel="stylesheet" />
|
||||
<link href="/static/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
|
||||
@ -14,6 +14,9 @@
|
||||
class="input-xlarge"
|
||||
id="content" name="content"></textarea>
|
||||
</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
@ -33,6 +33,10 @@
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<pre id="paste-content" class="prettyprint linenums">
|
||||
<code>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user