mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #971 from yemel/feature/share-qr-code
Add qr code to wallet secret and qr scanner at join page
This commit is contained in:
Matias Alejo Garcia
commit
3f23e57edd
16
css/main.css
16
css/main.css
|
|
@ -999,4 +999,20 @@ a.text-white:hover {color: #ccc;}
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.panel qrcode {
|
||||
float: left;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
padding: 5px 0 0 5px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.panel .secret {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
overflow-wrap: break-word;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*-----------------------------------------------------------------*/
|
||||
|
|
|
|||
|
|
@ -1,9 +1,104 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('JoinController',
|
||||
function($scope, $rootScope, walletFactory, controllerUtils, Passphrase, notification) {
|
||||
function($scope, $rootScope, $timeout, walletFactory, controllerUtils, Passphrase, notification) {
|
||||
$scope.loading = false;
|
||||
|
||||
|
||||
// QR code Scanner
|
||||
var cameraInput;
|
||||
var video;
|
||||
var canvas;
|
||||
var $video;
|
||||
var context;
|
||||
var localMediaStream;
|
||||
|
||||
var _scan = function(evt) {
|
||||
if (localMediaStream) {
|
||||
context.drawImage(video, 0, 0, 300, 225);
|
||||
|
||||
try {
|
||||
qrcode.decode();
|
||||
} catch (e) {
|
||||
//qrcodeError(e);
|
||||
}
|
||||
}
|
||||
|
||||
$timeout(_scan, 500);
|
||||
};
|
||||
|
||||
var _successCallback = function(stream) {
|
||||
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
|
||||
localMediaStream = stream;
|
||||
video.play();
|
||||
$timeout(_scan, 1000);
|
||||
};
|
||||
|
||||
var _scanStop = function() {
|
||||
$scope.showScanner = false;
|
||||
if (!$scope.isMobile) {
|
||||
if (localMediaStream && localMediaStream.stop) localMediaStream.stop();
|
||||
localMediaStream = null;
|
||||
video.src = '';
|
||||
}
|
||||
};
|
||||
|
||||
var _videoError = function(err) {
|
||||
_scanStop();
|
||||
};
|
||||
|
||||
qrcode.callback = function(data) {
|
||||
_scanStop();
|
||||
|
||||
$scope.$apply(function() {
|
||||
$scope.connectionId = data;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.cancelScanner = function() {
|
||||
_scanStop();
|
||||
};
|
||||
|
||||
$scope.openScanner = function() {
|
||||
if (window.cordova) return $scope.scannerIntent();
|
||||
|
||||
$scope.showScanner = true;
|
||||
|
||||
// Wait a moment until the canvas shows
|
||||
$timeout(function() {
|
||||
canvas = document.getElementById('qr-canvas');
|
||||
context = canvas.getContext('2d');
|
||||
|
||||
if ($scope.isMobile) {
|
||||
cameraInput = document.getElementById('qrcode-camera');
|
||||
cameraInput.addEventListener('change', _scan, false);
|
||||
} else {
|
||||
video = document.getElementById('qrcode-scanner-video');
|
||||
$video = angular.element(video);
|
||||
canvas.width = 300;
|
||||
canvas.height = 225;
|
||||
context.clearRect(0, 0, 300, 225);
|
||||
|
||||
navigator.getUserMedia({
|
||||
video: true
|
||||
}, _successCallback, _videoError);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
$scope.scannerIntent = function() {
|
||||
cordova.plugins.barcodeScanner.scan(
|
||||
function onSuccess(result) {
|
||||
if (result.cancelled) return;
|
||||
|
||||
$scope.connectionId = result.text;
|
||||
$rootScope.$digest();
|
||||
},
|
||||
function onError(error) {
|
||||
alert('Scanning error');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$scope.join = function(form) {
|
||||
if (form && form.$invalid) {
|
||||
notification.error('Error', 'Please enter the required fields');
|
||||
|
|
|
|||
|
|
@ -30,10 +30,6 @@ angular.module('copayApp.controllers').controller('SendController',
|
|||
$scope.amount = amount;
|
||||
}
|
||||
|
||||
// Detect protocol
|
||||
$scope.isHttp = ($window.location.protocol.indexOf('http') === 0);
|
||||
$scope.isCordova = typeof(window.cordova) != 'undefined';
|
||||
|
||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
|
||||
$scope.isMobile = isMobile.any();
|
||||
|
|
@ -171,6 +167,8 @@ angular.module('copayApp.controllers').controller('SendController',
|
|||
};
|
||||
|
||||
$scope.openScanner = function() {
|
||||
if (window.cordova) return $scope.scannerIntent();
|
||||
|
||||
$scope.showScanner = true;
|
||||
|
||||
// Wait a moment until the canvas shows
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@
|
|||
<h1 class="text-primary line-sidebar-b">Waiting copayers</h1>
|
||||
<h3>Share this secret with your other copayers</h3>
|
||||
<div class="panel">
|
||||
<div class="ellipsis text-gray
|
||||
size-14">{{$root.wallet.getSecret()}}</div>
|
||||
<qrcode size="250" data="{{$root.wallet.getSecret()}}"></qrcode>
|
||||
<div class="secret" class="ellipsis text-gray size-14">{{$root.wallet.getSecret()}}</div>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-white line-sidebar-b" ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()">New Wallet Created </h1>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,32 @@
|
|||
<h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
|
||||
<form name="joinForm" ng-submit="join(joinForm)" novalidate>
|
||||
<label for="connectionId"> Wallet Setting </label>
|
||||
<input id="connectionId" type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
|
||||
<input id="connectionId" type="text" class="small-9 columns" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required style="width:85%;">
|
||||
<div class="small-2 columns" style="padding:0px;width:15%;" ng-hide="showScanner">
|
||||
<a class="postfix button primary" ng-click="openScanner()"><i class="fi-camera"> </i></a>
|
||||
</div>
|
||||
<div class="small-2 columns" style="padding:0px;width:15%;" ng-show="showScanner">
|
||||
<a class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x"> </i></a>
|
||||
</div>
|
||||
|
||||
<div id="scanner" class="row" ng-if="showScanner">
|
||||
<div class="text-centered">
|
||||
<canvas id="qr-canvas" width="200" height="150"></canvas>
|
||||
<div ng-show="isMobile">
|
||||
<div id="file-input-wrapper" class="btn btn-primary">
|
||||
<span class="pull-left text-centered">
|
||||
<i class="glyphicon glyphicon-refresh icon-rotate"></i>
|
||||
Get QR code
|
||||
</span>
|
||||
<input id="qrcode-camera" type="file" capture="camera" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div ng-hide="isMobile">
|
||||
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="joinPassword"> User info</label>
|
||||
<input id="joinPassword" type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
|
||||
<input type="password" class="form-control"
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@
|
|||
<small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
|
||||
<small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-hide="showScanner || !isHttp">
|
||||
<div class="small-2 columns" ng-hide="showScanner">
|
||||
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-show="showScanner && isHttp">
|
||||
<div class="small-2 columns" ng-show="showScanner">
|
||||
<a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue