Add QR code generation when paste is created

css/bootstrap/privatebin.css

@@ -76,6 +76,26 @@ body.loading {
 
 #deletelink {
 	float: right;
+	margin-left: 5px;
+}
+
+#qrcodelink {
+	color: #337ab7;
+	float: right;
+	margin-left: 5px;
+	cursor: pointer;
+}
+#qrcodelink:hover, #qrcodelink:focus {
+	color: #23527c;
+}
+
+#qrcodemodalClose {
+	float: right;
+}
+#qrcode-display {
+	width: 200px;
+	height: 200px;
+	margin: auto;
 }
 
 #pastelink {

css/privatebin.css

@@ -132,7 +132,7 @@ h3.title {
 
 #toolbar, #status { margin-bottom: 5px; }
 
-#copyhint { color: #666; font-size: 0.85em; }
+#copyhint { color: #666; font-size: 0.85em }
 
 button, .button {
 	color: #fff;

js/privatebin.js

@@ -21,6 +21,7 @@
 /** global: prettyPrintOne */
 /** global: showdown */
 /** global: sjcl */
+/** global: kjua */
 
 // Immediately start random number generator collector.
 sjcl.random.startCollectors();
@@ -1205,7 +1206,8 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
         var $pasteSuccess,
             $pasteUrl,
             $remainingTime,
-            $shortenButton;
+            $shortenButton,
+            $qrCodeLink;
 
         /**
          * forward to URL shortener
@@ -1240,6 +1242,23 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             }
         }
 
+        /**
+         * Shows the QR code of the current paste.
+         *
+         * @name   PasteStatus.displayQrCode
+         * @function
+         * @param  {Event} event
+         */
+        function displayQrCode(event)
+        {
+            var qrCanvas = kjua({
+                render: 'canvas',
+                text: $pasteUrl.attr('href')
+            });
+            $('#qrcode-display').html(qrCanvas);
+
+        }
+
         /**
          * creates a notification after a successfull paste upload
          *
@@ -1336,9 +1355,11 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             // $pasteUrl is saved in me.createPasteNotification() after creation
             $remainingTime = $('#remainingtime');
             $shortenButton = $('#shortenbutton');
+            $qrCodeLink = $('#qrcodelink');
 
             // bind elements
             $shortenButton.click(sendToShortener);
+            $qrCodeLink.click(displayQrCode);
         }
 
         return me;

tpl/bootstrap.php

@@ -43,6 +43,7 @@ endif;
 		<noscript><link type="text/css" rel="stylesheet" href="css/noscript.css" /></noscript>
 		<script type="text/javascript" src="js/jquery-3.1.1.js" integrity="sha512-U6K1YLIFUWcvuw5ucmMtT9HH4t0uz3M366qrF5y4vnyH6dgDzndlcGvH/Lz5k8NFh80SN95aJ5rqGZEdaQZ7ZQ==" crossorigin="anonymous"></script>
 		<script type="text/javascript" src="js/sjcl-1.0.6.js" integrity="sha512-DsyxLV/uBoQlRTJmW5Gb2SxXUXB+aYeZ6zk+NuXy8LuLyi8oGti9AGn6He5fUY2DtgQ2//RjfaZog8exFuunUQ==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/kjua.min.js" integrity="sha512-hmvfOhcr4J8bjQ2GuNVzfSbuulv72wgQCJpgnXc2+cCHKqvYo8pK2nc0Q4Esem2973zo1radyIMTEkt+xJlhBA==" crossorigin="anonymous"></script>
 <?php
 if ($ZEROBINCOMPATIBILITY):
 ?>
@@ -70,7 +71,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-EvNAh1GXOoUiGZ/W8iPtzsce06bvVHy6+ajJztmfSgdQcKMPoj0dB8j1FC90MEChl7MOeR4xozvDymH/6HwIlA==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-HXQpEiyKGjM1QuKb+BfxjMcyrrmD3FX5nw5hwgOTONCtQqxCM5Q5bGkmsEvSKc+RcBUpGT3Mc48TddPI8kAlIg==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->
@@ -88,8 +89,8 @@ if ($isCpct):
 ?> class="navbar-spacing"<?php
 endif;
 ?>>
-		<div id="passwordmodal" class="modal fade" role="dialog">
+		<div id="passwordmodal" tabindex="-1" class="modal fade" role="dialog" aria-hidden="true">
-			<div class="modal-dialog">
+			<div class="modal-dialog" role="document">
 				<div class="modal-content">
 					<div class="modal-body">
 						<form id="passwordform" role="form">
@@ -103,6 +104,29 @@ endif;
 				</div>
 			</div>
 		</div>
+
+		<div id="qrcodemodal" tabindex="-1" class="modal fade" aria-labelledby="qrcodemodalTitle" role="dialog" aria-hidden="true">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+					<!-- <div class="modal-header">
+						<h5 id="qrcodemodalTitle" class="modal-title">QR code</h5>
+
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div> -->
+
+					<div class="modal-body">
+						<div class="mx-auto" id="qrcode-display"></div>
+					</div>
+
+					<!-- <div class="modal-footer"> -->
+						<button type="button" class="btn btn-primary btn-block" data-dismiss="modal"><?php echo I18n::_('Close') ?></button>
+					<!-- </div> -->
+				</div>
+			</div>
+		</div>
+
 		<nav class="navbar navbar-<?php echo $isDark ? 'inverse' : 'default'; ?> navbar-<?php echo $isCpct ? 'fixed' : 'static'; ?>-top"><?php
 if ($isCpct):
 ?><div class="container"><?php
@@ -449,6 +473,9 @@ if (strlen($URLSHORTENER)):
 endif;
 ?>
 					</div>
+					<div id="qrcodelink" data-toggle="modal" data-target="#qrcodemodal">
+						<span class="glyphicon glyphicon-qrcode" title="<?php echo I18n::_('Show QR code') ?>"></span>
+					</div>
 				</div>
 				<ul id="editorTabs" class="nav nav-tabs hidden">
 					<li role="presentation" class="active"><a id="messageedit" href="#"><?php echo I18n::_('Editor'); ?></a></li>

tpl/page.php

@@ -22,6 +22,7 @@ endif;
 ?>
 		<script type="text/javascript" src="js/jquery-3.1.1.js" integrity="sha512-U6K1YLIFUWcvuw5ucmMtT9HH4t0uz3M366qrF5y4vnyH6dgDzndlcGvH/Lz5k8NFh80SN95aJ5rqGZEdaQZ7ZQ==" crossorigin="anonymous"></script>
 		<script type="text/javascript" src="js/sjcl-1.0.6.js" integrity="sha512-DsyxLV/uBoQlRTJmW5Gb2SxXUXB+aYeZ6zk+NuXy8LuLyi8oGti9AGn6He5fUY2DtgQ2//RjfaZog8exFuunUQ==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/kjua.min.js" integrity="sha512-hmvfOhcr4J8bjQ2GuNVzfSbuulv72wgQCJpgnXc2+cCHKqvYo8pK2nc0Q4Esem2973zo1radyIMTEkt+xJlhBA==" crossorigin="anonymous"></script>
 <?php
 if ($ZEROBINCOMPATIBILITY):
 ?>
@@ -48,7 +49,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-EvNAh1GXOoUiGZ/W8iPtzsce06bvVHy6+ajJztmfSgdQcKMPoj0dB8j1FC90MEChl7MOeR4xozvDymH/6HwIlA==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-HXQpEiyKGjM1QuKb+BfxjMcyrrmD3FX5nw5hwgOTONCtQqxCM5Q5bGkmsEvSKc+RcBUpGT3Mc48TddPI8kAlIg==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->