lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-15 09:04:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

create qrcode in the browser instead of an external service

Browse Source
This commit is contained in:
Fabian Franz 2016-06-12 12:37:12 +02:00
parent bcb39d0c07
commit cd724c2bd9
4 changed files with 1356 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/opnsense/www/js/jquery.qrcode.js Normal file
View File

@ -0,0 +1,89 @@
(function( $ ){
$.fn.qrcode = function(options) {
// if options is string,
if( typeof options === 'string' ){
options = { text: options };
}
// set default values
// typeNumber < 1 for automatic calculation
options = $.extend( {}, {
render : "canvas",
width : 256,
height : 256,
typeNumber : -1,
correctLevel : QRErrorCorrectLevel.H,
background : "#ffffff",
foreground : "#000000"
}, options);
var createCanvas = function(){
// create the qrcode itself
var qrcode = new QRCode(options.typeNumber, options.correctLevel);
qrcode.addData(options.text);
qrcode.make();
// create canvas element
var canvas = document.createElement('canvas');
canvas.width = options.width;
canvas.height = options.height;
var ctx = canvas.getContext('2d');
// compute tileW/tileH based on options.width/options.height
var tileW = options.width / qrcode.getModuleCount();
var tileH = options.height / qrcode.getModuleCount();
// draw in the canvas
for( var row = 0; row < qrcode.getModuleCount(); row++ ){
for( var col = 0; col < qrcode.getModuleCount(); col++ ){
ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
}
}
// return just built canvas
return canvas;
}
// from Jon-Carlos Rivera (https://github.com/imbcmdth)
var createTable = function(){
// create the qrcode itself
var qrcode = new QRCode(options.typeNumber, options.correctLevel);
qrcode.addData(options.text);
qrcode.make();
// create table element
var $table = $('<table></table>')
.css("width", options.width+"px")
.css("height", options.height+"px")
.css("border", "0px")
.css("border-collapse", "collapse")
.css('background-color', options.background);
// compute tileS percentage
var tileW = options.width / qrcode.getModuleCount();
var tileH = options.height / qrcode.getModuleCount();
// draw in the table
for(var row = 0; row < qrcode.getModuleCount(); row++ ){
var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
for(var col = 0; col < qrcode.getModuleCount(); col++ ){
$('<td></td>')
.css('width', tileW+"px")
.css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
.appendTo($row);
}
}
// return just built canvas
return $table;
}
return this.each(function(){
var element = options.render == "canvas" ? createCanvas() : createTable();
$(element).appendTo(this);
});
};
})( jQuery );

20
src/opnsense/www/js/jquery.qrcode.js.LICENSE Normal file
View File

@ -0,0 +1,20 @@
Copyright (c) 2011 Jerome Etienne, http://jetienne.com
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

1237
src/opnsense/www/js/qrcode.js Normal file
View File

File diff suppressed because it is too large Load Diff

15
src/www/system_usermanager.php
View File

@ -368,6 +368,8 @@ legacy_html_escape_form_data($a_user);
include("head.inc");
?>
<script type="text/javascript" src="/ui/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="/ui/js/qrcode.js"></script>
<body>
@ -853,13 +855,16 @@ $( document ).ready(function() {
<?php
if (!empty($pconfig['otp_seed'])):
// construct google url, using token, username and this machines hostname
$google_otp_url = "https://chart.googleapis.com/chart?chs=200x200&amp;chld=M|0&amp;cht=qr&amp;chl=otpauth://totp/";
$google_otp_url .= $pconfig['usernamefld']."@".htmlspecialchars($config['system']['hostname'])."%3Fsecret%3D";
$google_otp_url .= $pconfig['otp_seed'];
$otp_url = "otpauth://totp/";
$otp_url .= $pconfig['usernamefld']."@".htmlspecialchars($config['system']['hostname'])."?secret=";
$otp_url .= $pconfig['otp_seed'];
?>
<br/>
<?=gettext("When using google authenticator, the following link provides a qrcode for easy setup");?><br/>
<a href="<?=$google_otp_url;?>" target="_blank"><?=$google_otp_url;?></a>
<?=gettext("When using google authenticator, scan the following qrcode for easy setup:");?><br/>
<div id="otp_qrcode"></div>
<script type="text/javascript">
$('#otp_qrcode').qrcode('<?= $otp_url ?>');
</script>
<?php
endif;?>
</div>