Zerobin with QRCode

Rédigé par Sozezzo - 25 avril 2015 - Aucun commentaire

A minimalist, opensource online pastebin-like where the server has zero knowledge of pasted data. Data is encrypted/decrypted in the browser using 256 bits AES...

http://sebsauvage.net/wiki/doku.php?id=php:zerobin

with so many features BUT without QR Code.

We can be sometime lazy to type URL on "Smartphone", but the "Smartphone" can read QR Code.

We use version alpha 0.19, GitHub access to source code.

Basic requirements:

Not too much change the original code;
Not compromise security;
Easy to understand;

Advices:

Make a full back-up before start.
If you think it's complicated: Do. Or do not. There is no try.;

How we add QR Code:

Step 1:

Add this image to folder: img/qrcode.png

Step 2:

Edit file : css/zerobin.css

Add this style:


div#qrcode{
clear:both;
width:128px;
height:128px;
border: 15px solid white;
z-index: 1000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

Step 3 :

Edit file : tpl/page.html

Add this 12th line:

<script type="text/javascript" src="js/qrcode.js?{$VERSION|rawurlencode}#"></script>

It will be like this :

<html>
<head>
<title>ZeroBin</title>
<meta name="robots" content="noindex" />
<link type="text/css" rel="stylesheet" href="css/zerobin.css?{$VERSION|rawurlencode}#" />
<script type="text/javascript" src="js/jquery.js?{$VERSION|rawurlencode}#"></script>
<script type="text/javascript" src="js/sjcl.js?{$VERSION|rawurlencode}#"></script>
<script type="text/javascript" src="js/base64.js?{$VERSION|rawurlencode}#"></script>
<script type="text/javascript" src="js/rawdeflate.js?{$VERSION|rawurlencode}#"></script>
<script type="text/javascript" src="js/rawinflate.js?{$VERSION|rawurlencode}#"></script>
<script type="text/javascript" src="js/zerobin.js?{$VERSION|rawurlencode}#"></script>
<script type="text/javascript" src="js/qrcode.js?{$VERSION|rawurlencode}#"></script>
<link type="text/css" rel="stylesheet" href="js/highlight.styles/monokai.css?{$VERSION|rawurlencode}#">
<script type="text/javascript" src="js/highlight.pack.js?{$VERSION|rawurlencode}#"></script>

Step 4 :

Edit file : js/zerobin.js

Line 362


$('div#pastelink').html('Your paste is <a id="pasteurl" href="' + url + '">' + url + '</a> <span id="copyhint">(Hit CTRL+C to copy)</span>');

replace by


                $('div#pastelink').html(
                  'Your paste is <a id="pasteurl" href="' + url + '">' + url + '</a>'
                + '<a href=# id="qrcodehit"  onclick="javascript:'
                + '$(\'div#qrcode\').show();'
                + '$(\'div#qrcode\').empty();'
                + 'if (typeof qrcode !== \'undefined\') { return; }'
                + 'var qrcode = new QRCode(\'qrcode\', { text: \'' + url + '\', width: 128, height: 128, colorDark : \'#000000\', colorLight : \'#ffffff\', correctLevel : QRCode.CorrectLevel.H }); '
                + '$(\'div#qrcode\').click(function(){$(\'div#qrcode\').hide();});'
                + '" >'
                + '<img id="qrcodeimg" src="img/qrcode.png"></a>'
                 + '<span id="copyhint">(Hit CTRL+C to copy)</span>'
                + '<div id="qrcode" style="display:none;" >'
                );

Step 5 :

Copy file : qrcode.js

to folder : js\

This file is available on github here under MIT license.

Folder : ./jquery-qrcode/src/