copay/www/views/bitpayCard.html

<ion-view id="bitpayCard">
  <ion-nav-bar class="bar-royal">
    <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">
        <i class="icon ion-ios-gear-outline"></i>
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification warning m0" ng-show="network == 'testnet'">
      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>
        <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="!loadingHistory && 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="loadingHistory" class="m10t">
            <strong class="size-36">...</strong>
          </div>
        </div>
      </div>

      <div
        class="m10t text-center padding"
        ng-show="!bitpayCard.bitpayCardTransactionHistory[0] &&
        !bitpayCard.bitpayCardInvoiceHistory[0] && (!loadingHistory || !bitpayCardCached)">
        <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-if="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>
        <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>
          </div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>