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:
commit
3f23e57edd
16
css/main.css
16
css/main.css
|
@ -999,4 +999,20 @@ a.text-white:hover {color: #ccc;}
|
||||||
border: 0;
|
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';
|
'use strict';
|
||||||
|
|
||||||
angular.module('copayApp.controllers').controller('JoinController',
|
angular.module('copayApp.controllers').controller('JoinController',
|
||||||
function($scope, $rootScope, walletFactory, controllerUtils, Passphrase, notification) {
|
function($scope, $rootScope, $timeout, walletFactory, controllerUtils, Passphrase, notification) {
|
||||||
$scope.loading = false;
|
$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) {
|
$scope.join = function(form) {
|
||||||
if (form && form.$invalid) {
|
if (form && form.$invalid) {
|
||||||
notification.error('Error', 'Please enter the required fields');
|
notification.error('Error', 'Please enter the required fields');
|
||||||
|
|
|
@ -30,10 +30,6 @@ angular.module('copayApp.controllers').controller('SendController',
|
||||||
$scope.amount = amount;
|
$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;
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||||
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
|
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
|
||||||
$scope.isMobile = isMobile.any();
|
$scope.isMobile = isMobile.any();
|
||||||
|
@ -171,6 +167,8 @@ angular.module('copayApp.controllers').controller('SendController',
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.openScanner = function() {
|
$scope.openScanner = function() {
|
||||||
|
if (window.cordova) return $scope.scannerIntent();
|
||||||
|
|
||||||
$scope.showScanner = true;
|
$scope.showScanner = true;
|
||||||
|
|
||||||
// Wait a moment until the canvas shows
|
// Wait a moment until the canvas shows
|
||||||
|
|
|
@ -10,8 +10,9 @@
|
||||||
<h1 class="text-primary line-sidebar-b">Waiting copayers</h1>
|
<h1 class="text-primary line-sidebar-b">Waiting copayers</h1>
|
||||||
<h3>Share this secret with your other copayers</h3>
|
<h3>Share this secret with your other copayers</h3>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="ellipsis text-gray
|
<qrcode size="250" data="{{$root.wallet.getSecret()}}"></qrcode>
|
||||||
size-14">{{$root.wallet.getSecret()}}</div>
|
<div class="secret" class="ellipsis text-gray size-14">{{$root.wallet.getSecret()}}</div>
|
||||||
|
<div style="clear:both;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="text-white line-sidebar-b" ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()">New Wallet Created </h1>
|
<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>
|
<h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
|
||||||
<form name="joinForm" ng-submit="join(joinForm)" novalidate>
|
<form name="joinForm" ng-submit="join(joinForm)" novalidate>
|
||||||
<label for="connectionId"> Wallet Setting </label>
|
<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>
|
<label for="joinPassword"> User info</label>
|
||||||
<input id="joinPassword" type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
|
<input id="joinPassword" type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
|
||||||
<input type="password" class="form-control"
|
<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-check"></i></small>
|
||||||
<small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
|
<small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
|
||||||
</div>
|
</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>
|
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
|
||||||
</div>
|
</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>
|
<a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue