New flow to link the bitpay card
This commit is contained in:
Gustavo Maximiliano Cortez
parent
4f5c814c50
commit
35cd6ce4cc
19 changed files with 385 additions and 384 deletions
|
|
@ -12,15 +12,15 @@
|
|||
<div>
|
||||
<div class="item item-no-bottom-border" translate>Recipient</div>
|
||||
|
||||
<div class="item item-text-wrap item-icon-left bitcoin-address" ng-class="{'item-big-icon-left':isCard}">
|
||||
<div class="item item-text-wrap item-icon-left bitcoin-address" ng-class="{'item-big-icon-left':cardId}">
|
||||
<i ng-if="isWallet" class="icon ion-briefcase size-21"></i>
|
||||
<span ng-if="!isWallet">
|
||||
<gravatar ng-if="!isCard" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
|
||||
<i ng-if="isCard" class="icon big-icon-svg">
|
||||
<gravatar ng-if="!cardId" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
|
||||
<i ng-if="cardId" class="icon big-icon-svg">
|
||||
<div class="bg icon-bitpay-card"></div>
|
||||
</i>
|
||||
</span>
|
||||
<span ng-class="{'m10l':isCard}">{{toName || toAddress}}</span>
|
||||
<span ng-class="{'m10l':cardId}">{{toName || toAddress}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<ion-nav-back-button>
|
||||
</ion-nav-back-button>
|
||||
<ion-nav-title>BitPay Card</ion-nav-title>
|
||||
<ion-nav-buttons side="secondary" ng-show="bitpayCard.bitpayCardAuthenticated">
|
||||
<button class="button back-button" ui-sref="tabs.bitpayCard.preferences">
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button back-button" ng-show="!error" ui-sref="tabs.bitpayCard.preferences">
|
||||
<i class="icon ion-ios-gear-outline"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
|
|
@ -16,147 +16,76 @@
|
|||
Sandbox version. Only for testing purpose
|
||||
</div>
|
||||
|
||||
<div class="m20t text-center size-12 text-gray" ng-show="!bitpayCard.bitpayCardAuthenticated && bitpayCard.loadingSession">
|
||||
Loading...
|
||||
</div>
|
||||
|
||||
<div ng-show="!bitpayCard.bitpayCardAuthenticated && !bitpayCard.loadingSession">
|
||||
<div class="text-center m20t">
|
||||
<img src="img/bitpay-card-visa.svg" width="200">
|
||||
<div class="oh pr" ng-show="!error">
|
||||
<div class="amount">
|
||||
<div ng-if="bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
|
||||
<div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
|
||||
<a class="button button-positive button-small" ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})">
|
||||
<i class="icon ion-ios-plus-empty"></i> {{'Add Funds'|translate}}
|
||||
</a>
|
||||
</div>
|
||||
<h4 class="text-center">
|
||||
<span ng-show="!bitpayCard.bitpayCardTwoFactorPending">Login to your account</span>
|
||||
<span ng-show="bitpayCard.bitpayCardTwoFactorPending">2-Step Verification</span>
|
||||
</h4>
|
||||
|
||||
<form
|
||||
ng-show="!bitpayCard.bitpayCardTwoFactorPending"
|
||||
name="authenticateForm"
|
||||
ng-submit="bitpayCard.authenticate(email, password)"
|
||||
novalidate>
|
||||
|
||||
<div class="card list">
|
||||
<label class="item item-input item-stacked-label">
|
||||
<span class="input-label">Email</span>
|
||||
<input name="email"
|
||||
type="email"
|
||||
ng-model="email"
|
||||
ng-disabled="bitpayCard.authenticating"
|
||||
required>
|
||||
</label>
|
||||
|
||||
<label class="item item-input item-stacked-label">
|
||||
<span class="input-label">Password</span>
|
||||
<input name="password"
|
||||
type="password"
|
||||
ng-model="password"
|
||||
ng-disabled="bitpayCard.authenticating"
|
||||
required>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<input class="button button-block button-positive"
|
||||
type="submit"
|
||||
ng-disabled="!authenticateForm.$valid || bitpayCard.authenticating"
|
||||
value="Login">
|
||||
</form>
|
||||
|
||||
<p ng-show="bitpayCard.bitpayCardTwoFactorPending" class="size-12 text-center text-gray">
|
||||
Enter the verification code generated by the authenticator app on your phone.
|
||||
</p>
|
||||
|
||||
<form
|
||||
ng-show="bitpayCard.bitpayCardTwoFactorPending"
|
||||
name="authenticate2FAForm"
|
||||
ng-submit="bitpayCard.authenticate2FA(twoFactorCode)"
|
||||
novalidate>
|
||||
|
||||
<div class="list">
|
||||
<label class="item item-input item-stacked-label">
|
||||
<span class="input-label">Verification Code</span>
|
||||
<input name="twoFactorCode"
|
||||
type="text"
|
||||
ng-model="twoFactorCode"
|
||||
ng-disabled="bitpayCard.authenticating"
|
||||
required>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<input class="button button-block button-positive"
|
||||
type="submit"
|
||||
ng-disabled="!authenticate2FAForm.$valid || bitpayCard.authenticating"
|
||||
value="Login">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div ng-show="bitpayCard.bitpayCardAuthenticated">
|
||||
<div class="oh pr">
|
||||
<div class="amount">
|
||||
<div ng-if="bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
|
||||
<div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
|
||||
<a class="button button-positive button-small" ui-sref="tabs.bitpayCard.amount({'isCard': true, 'toName': 'BitPay Card'})">
|
||||
<i class="icon ion-ios-plus-empty"></i> {{'Add Funds'|translate}}
|
||||
</a>
|
||||
</div>
|
||||
<div ng-if="!bitpayCard.bitpayCardCurrentBalance" class="m10t">
|
||||
<strong class="size-36">...</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-details-wallet-info">
|
||||
<img style="height:0.6em" ng-show="loadingHistory" src="img/icon-sync-white.svg">
|
||||
<div ng-if="!bitpayCard.bitpayCardCurrentBalance" class="m10t">
|
||||
<strong class="size-36">...</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-details-wallet-info">
|
||||
<img style="height:0.6em" ng-show="loadingHistory" src="img/icon-sync-white.svg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="error" class="text-center m10t assertive">
|
||||
{{error}}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="m10t text-center padding"
|
||||
ng-if="!loadingHistory && !bitpayCard.bitpayCardTransactionHistory[0] && !error">
|
||||
<i class="icon ion-ios-arrow-thin-up size-24"></i>
|
||||
<h1>Get started</h1>
|
||||
<h4>Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.</h4>
|
||||
</div>
|
||||
|
||||
<div class="list" ng-show="bitpayCard.bitpayCardTransactionHistory[0]">
|
||||
<div class="item item-divider">
|
||||
<select class="select-style" ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
|
||||
<option value="last30Days">Recent Activity</option>
|
||||
<option value="lastMonth">Last Month</option>
|
||||
<option value="all">All Activity</option>
|
||||
</select>
|
||||
</div>
|
||||
<div
|
||||
class="m10t text-center padding"
|
||||
ng-if="!bitpayCardCached && !loadingHistory && !bitpayCard.bitpayCardTransactionHistory[0]">
|
||||
<i class="icon ion-ios-arrow-thin-up size-24"></i>
|
||||
<h1>Get started</h1>
|
||||
<h4>Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.</h4>
|
||||
</div>
|
||||
ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
|
||||
class="item row"
|
||||
ng-init="bitpayCard.getMerchantInfo(tx)">
|
||||
<div class="col col-10" ng-init="icon = bitpayCard.getIconName(tx)">
|
||||
<img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
|
||||
</div>
|
||||
|
||||
<div class="list" ng-show="bitpayCardCached">
|
||||
<div class="item item-divider">
|
||||
<select class="select-style" ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
|
||||
<option value="last30Days">Recent Activity</option>
|
||||
<option value="lastMonth">Last Month</option>
|
||||
<option value="all">All Activity</option>
|
||||
</select>
|
||||
<div class="col">
|
||||
<div class="size-12 text-bold">
|
||||
{{tx.merchant.name}}
|
||||
</div>
|
||||
<div class="size-12">
|
||||
{{tx.merchant.city}}, {{tx.merchant.state}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
|
||||
class="item row"
|
||||
ng-init="bitpayCard.getMerchantInfo(tx)">
|
||||
<div class="col col-10" ng-init="icon = bitpayCard.getIconName(tx)">
|
||||
<img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="size-12 text-bold">
|
||||
{{tx.merchant.name}}
|
||||
</div>
|
||||
<div class="size-12">
|
||||
{{tx.merchant.city}}, {{tx.merchant.state}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ng-init="desc = bitpayCard.processDescription(tx)"
|
||||
class="col size-12">
|
||||
{{desc}}
|
||||
</div>
|
||||
<div class="col">
|
||||
<img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
|
||||
<img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
|
||||
</div>
|
||||
<div class="col text-right size-12 text-gray">
|
||||
<div class="size-14"
|
||||
ng-class="{
|
||||
'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
|
||||
'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
|
||||
{{tx.amount | currency:'$':2 }}
|
||||
</div>
|
||||
<time>{{tx.timestamp | amTimeAgo}}</time>
|
||||
ng-init="desc = bitpayCard.processDescription(tx)"
|
||||
class="col size-12">
|
||||
{{desc}}
|
||||
</div>
|
||||
<div class="col">
|
||||
<img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
|
||||
<img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
|
||||
</div>
|
||||
<div class="col text-right size-12 text-gray">
|
||||
<div class="size-14"
|
||||
ng-class="{
|
||||
'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
|
||||
'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
|
||||
{{tx.amount | currency:'$':2 }}
|
||||
</div>
|
||||
<time>{{tx.timestamp | amTimeAgo}}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,16 @@
|
|||
<div class="item">
|
||||
<span class="label" translate>To</span>
|
||||
<span class="payment-proposal-to" copy-to-clipboard="toAddress">
|
||||
<img src="img/icon-bitcoin-small.svg">
|
||||
<img ng-if="isWallet" src="img/icon-bitcoin-small.svg">
|
||||
<i ng-if="cardId" class="icon big-icon-svg">
|
||||
<div class="bg icon-bitpay-card"></div>
|
||||
</i>
|
||||
<span ng-show="toName">{{toName}}</span>
|
||||
<div ng-show="_paypro" ng-click="openPPModal(_paypro)">
|
||||
<i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
|
||||
<i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
|
||||
{{_paypro.domain}}
|
||||
</div>
|
||||
<contact class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
|
||||
<!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
|
||||
<span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@
|
|||
{{wallet.m}}-of-{{wallet.n}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<p>
|
||||
<span ng-if="!wallet.isComplete()" class="assertive" translate>
|
||||
Incomplete
|
||||
|
|
@ -91,15 +90,15 @@
|
|||
</p>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<a ui-sref="tabs.bitpayCard"
|
||||
ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
|
||||
class="item item-sub item-icon-left item-big-icon-left item-icon-right">
|
||||
<a ng-repeat="card in bitpayCards"
|
||||
ui-sref="tabs.bitpayCard({id:card.id})"
|
||||
ng-if="bitpayCardEnabled && bitpayCards[0]"
|
||||
class="item item-icon-left item-big-icon-left item-icon-right">
|
||||
<i class="icon big-icon-svg">
|
||||
<div class="bg icon-bitpay-card"></div>
|
||||
</i>
|
||||
<h2>BitPay Card</h2>
|
||||
<p ng-if="!bitpayCard" translate>Add funds to get started</p>
|
||||
<span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
|
||||
<p>{{card.lastFourDigits}}</p>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue