mirror of https://github.com/BTCPrivate/copay.git
paypro: angularize the markup and address directive.
This commit is contained in:
parent
86a725240b
commit
aed815f5cd
135
js/directives.js
135
js/directives.js
|
@ -40,108 +40,51 @@ angular.module('copayApp.directives')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (err) {
|
if (err) {
|
||||||
if (scope._resetPayPro) scope._resetPayPro();
|
scope.sendForm.address.$isValid = false;
|
||||||
ctrl.$setValidity('validAddress', false);
|
notification.error('Error', err.message || 'Bad payment server.');
|
||||||
notification.error('Error', err.message);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var expires = new Date(merchantData.pr.pd.expires * 1000);
|
merchantData.unitTotal = (+merchantData.total / config.unitToSatoshi) + '';
|
||||||
var memo = merchantData.pr.pd.memo;
|
merchantData.expiration = new Date(
|
||||||
var payment_url = merchantData.pr.pd.payment_url;
|
merchantData.pr.pd.expires * 1000).toISOString();
|
||||||
var total = merchantData.total;
|
|
||||||
|
|
||||||
// XXX There needs to be a better way to do this:
|
$rootScope.merchant = merchantData;
|
||||||
total = +total / config.unitToSatoshi;
|
|
||||||
|
scope.sendForm.address.$isValid = true;
|
||||||
|
|
||||||
|
scope.sendForm.amount.$setViewValue(merchantData.unitTotal);
|
||||||
|
scope.sendForm.amount.$render();
|
||||||
|
scope.sendForm.amount.$isValid = true;
|
||||||
|
|
||||||
|
// If the address changes to a non-payment-protocol one,
|
||||||
|
// delete the `merchant` property from the scope.
|
||||||
|
var unregister = scope.$watch('address', function() {
|
||||||
|
var val = scope.sendForm.address.$viewValue || '';
|
||||||
|
var uri = copay.HDPath.parseBitcoinURI(val);
|
||||||
|
if (!uri || !uri.merchant) {
|
||||||
|
delete $rootScope.merchant;
|
||||||
|
scope.sendForm.amount.$setViewValue('');
|
||||||
|
scope.sendForm.amount.$render();
|
||||||
|
unregister();
|
||||||
|
if ($rootScope.$$phase !== '$apply'
|
||||||
|
&& $rootScope.$$phase !== '$digest') {
|
||||||
|
$rootScope.$apply();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if ($rootScope.$$phase !== '$apply'
|
||||||
|
&& $rootScope.$$phase !== '$digest') {
|
||||||
|
$rootScope.$apply();
|
||||||
|
}
|
||||||
|
|
||||||
notification.info('Payment Request',
|
notification.info('Payment Request',
|
||||||
'Server is requesting ' + total + ' ' + config.unitName + '.'
|
'Server is requesting '
|
||||||
+ ' Message: ' + memo);
|
+ merchantData.unitTotal + ' '
|
||||||
|
+ config.unitName + '.'
|
||||||
// XXX Pretty much all of this code accesses the raw DOM. It's
|
+ ' Message: '
|
||||||
// very bad, there's probably a better, more angular-y way to
|
+ merchantData.pr.pd.memo);
|
||||||
// do things here.
|
|
||||||
|
|
||||||
var address = angular.element(
|
|
||||||
document.querySelector('input#address'));
|
|
||||||
|
|
||||||
var amount = angular.element(
|
|
||||||
document.querySelector('input#amount'));
|
|
||||||
amount.val(total);
|
|
||||||
if (+merchantData.total !== 0) {
|
|
||||||
amount.attr('disabled', true);
|
|
||||||
}
|
|
||||||
|
|
||||||
var sendto = angular.element(document
|
|
||||||
.querySelector('div.send-note > p[ng-class]:first-of-type'));
|
|
||||||
sendto.html(sendto.html() + '<br><b>Server:</b> ' + memo);
|
|
||||||
|
|
||||||
var tamount = angular.element(document
|
|
||||||
.querySelector('div.send-note > p[ng-class]:nth-of-type(2)'));
|
|
||||||
var ca = merchantData.pr.ca
|
|
||||||
|| '<span style="color:red;">Untrusted</span>';
|
|
||||||
tamount.attr('class',
|
|
||||||
tamount.attr('class').replace(' hidden', ''))
|
|
||||||
tamount.html(total + ' (CA: ' + ca
|
|
||||||
+ '. Expires: '
|
|
||||||
+ expires.toISOString()
|
|
||||||
+ ')');
|
|
||||||
|
|
||||||
var submit = angular.element(
|
|
||||||
document.querySelector('button[type=submit]'));
|
|
||||||
submit.attr('disabled', false);
|
|
||||||
|
|
||||||
var sendall = angular.element(
|
|
||||||
document.querySelector('[title="Send all funds"]'));
|
|
||||||
sendall.attr('class', sendall.attr('class') + ' hidden');
|
|
||||||
|
|
||||||
// Reset all the changes from the payment protocol weirdness.
|
|
||||||
// XXX Bad hook. Find a better more angular-y way of doing this.
|
|
||||||
// This will also closure scope every variable above forever.
|
|
||||||
if (!scope._resetPayPro) {
|
|
||||||
scope._resetPayPro = function() {
|
|
||||||
var val = address.val();
|
|
||||||
var uri = copay.HDPath.parseBitcoinURI(val || '');
|
|
||||||
if (!uri || !uri.merchant) {
|
|
||||||
if (amount.attr('disabled')) {
|
|
||||||
amount.val('');
|
|
||||||
amount.attr('disabled', false);
|
|
||||||
}
|
|
||||||
sendto.html(sendto.html().replace(/<br><b>Server:.*$/, ''));
|
|
||||||
if (!/hidden/.test(tamount.attr('class'))) {
|
|
||||||
tamount.attr(tamount.attr('class') + ' hidden');
|
|
||||||
}
|
|
||||||
if (~tamount.html().indexOf('(CA: ')) {
|
|
||||||
tamount.html('');
|
|
||||||
}
|
|
||||||
if (!submit.attr('disabled')) {
|
|
||||||
submit.attr('disabled', true);
|
|
||||||
}
|
|
||||||
if (/ hidden$/.test(sendall.attr('class'))) {
|
|
||||||
sendall.attr('class',
|
|
||||||
sendall.attr('class').replace(' hidden', ''));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
scope.$watch('address',scope._resetPayPro);
|
|
||||||
}
|
|
||||||
|
|
||||||
ctrl.$setValidity('validAddress', true);
|
|
||||||
|
|
||||||
// XXX With PayPro, since amount is already filled in among
|
|
||||||
// other field oddities, the form is always invalid. Make it
|
|
||||||
// valid.
|
|
||||||
scope.sendForm.$valid = true;
|
|
||||||
scope.sendForm.$invalid = false;
|
|
||||||
scope.sendForm.$pristine = true;
|
|
||||||
|
|
||||||
scope.sendForm.address.$valid = true;
|
|
||||||
scope.sendForm.address.$invalid = false;
|
|
||||||
scope.sendForm.address.$pristine = true;
|
|
||||||
|
|
||||||
scope.sendForm.amount.$valid = true;
|
|
||||||
scope.sendForm.amount.$invalid = false;
|
|
||||||
scope.sendForm.amount.$pristine = true;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
ctrl.$setValidity('validAddress', true);
|
ctrl.$setValidity('validAddress', true);
|
||||||
|
|
|
@ -64,7 +64,8 @@
|
||||||
<small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
|
<small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
|
||||||
</label>
|
</label>
|
||||||
<div class="small-9 columns">
|
<div class="small-9 columns">
|
||||||
<input type="number" id="amount" ng-disabled="loading"
|
<input type="number" id="amount"
|
||||||
|
ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
|
||||||
name="amount" placeholder="Amount" ng-model="amount"
|
name="amount" placeholder="Amount" ng-model="amount"
|
||||||
min="0.0001" max="10000000000" enough-amount required
|
min="0.0001" max="10000000000" enough-amount required
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
|
@ -72,7 +73,7 @@
|
||||||
<small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
|
<small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
|
||||||
<small class="icon-input" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount"><i class="fi-x"></i></small>
|
<small class="icon-input" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount"><i class="fi-x"></i></small>
|
||||||
<a class="small input-note" title="Send all funds"
|
<a class="small input-note" title="Send all funds"
|
||||||
ng-show="$root.availableBalance > 0"
|
ng-show="$root.availableBalance > 0 && (!$root.merchant || +$root.merchant.total === 0)"
|
||||||
ng-click="topAmount(sendForm)">
|
ng-click="topAmount(sendForm)">
|
||||||
Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
|
Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
|
||||||
</a>
|
</a>
|
||||||
|
@ -114,15 +115,24 @@
|
||||||
<h6>Send to</h6>
|
<h6>Send to</h6>
|
||||||
<p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">
|
<p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">
|
||||||
{{address}}
|
{{address}}
|
||||||
|
<span ng-show="!!$root.merchant" style="display:block;">Server: {{$root.merchant.pr.pd.memo}}</span>
|
||||||
</p>
|
</p>
|
||||||
<h6>Total amount for this transaction:</h6>
|
<h6>Total amount for this transaction:</h6>
|
||||||
<p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}">
|
<p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}" ng-hide="!!$root.merchant">
|
||||||
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
|
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
|
||||||
<small>
|
<small>
|
||||||
{{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC <br/>
|
{{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC <br/>
|
||||||
Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
|
Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
|
||||||
</small>
|
</small>
|
||||||
</p>
|
</p>
|
||||||
|
<p class="text-gray" ng-show="!!$root.merchant">
|
||||||
|
<b>{{amount + defaultFee | noFractionNumber}}</b> {{$root.unitName}}<br>
|
||||||
|
CA:
|
||||||
|
<span ng-show="!!$root.merchant.pr.ca">{{$root.merchant.pr.ca}}</span>
|
||||||
|
<span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;">Untrusted</span>
|
||||||
|
<br>
|
||||||
|
Expires: {{$root.merchant.expiration}}
|
||||||
|
</p>
|
||||||
<div ng-show="wallet.isShared()">
|
<div ng-show="wallet.isShared()">
|
||||||
<h6>Note</h6>
|
<h6>Note</h6>
|
||||||
<p ng-class="{'hidden': !commentText}">{{commentText}}</p>
|
<p ng-class="{'hidden': !commentText}">{{commentText}}</p>
|
||||||
|
|
Loading…
Reference in New Issue