copay/public/views/glidera.html

<div 
  class="topbar-container" 
  ng-include="'views/includes/topbar.html'"
  ng-init="titleSection='Glidera'; closeToHome = true">
</div>


<div class="content glidera p20v" ng-controller="glideraController as glidera">

  <div class="onGoingProcess" ng-show="glidera.loading || index.glideraLoading">
    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
    <span ng-show="glidera.loading" translate>Connecting to Glidera...</span>
    <span ng-show="index.glideraLoading">{{index.glideraLoading|translate}}</span>
    </div>
  </div>

  <div class="row">
    <div class="columns">
      <div class="text-center m20b">
        <img src="img/glidera-logo.png">
      </div>

      <div class="m20b box-notification" ng-if="index.glideraError || glidera.error">
        <div class="text-warning">
          <span ng-show="index.glideraError == 'Unauthorized'" translate>Could not connect to Glidera: Unauthorized</span>
          <span ng-show="index.glideraError == 'Forbidden'" translate>Could not connect to Glidera: Forbidden</span>
          <span ng-show="index.glideraError != ('Forbidden' && 'Unauthorized')">{{index.glideraError || glidera.error}}</span>
        </div>
        <div class="m10t" ng-show="index.glideraToken && index.glideraError == 'Forbidden'">
          <button class="round tiny" ng-click="index.glideraToken = null; index.glideraError = null">
            Request a new token
          </button>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="index.glideraCredentials && !index.glideraToken && !index.glideraLoading && !index.glideraError" 
    class="row">
    <div class="columns" ng-init="showOauthForm = false">
      <div class="text-center" ng-show="!showOauthForm">
        <p translate>You can buy and sell Bitcoin with a US bank account directly in Copay.</p>
        <div class="m10b text-gray size-12" translate>Connect your Glidera account to get started</div>
        <button
          class="dark-gray outline round tiny" 
          ng-click="$root.openExternalLink(glidera.getAuthenticateUrl()); showOauthForm = true" translate>
          Connect to Glidera
        </button>
        <div>
          <a href ng-click="showOauthForm = true" class="text-gray size-12">
            Do you already have the Oauth Code?
          </a>
        </div>
      </div>
      <div class="text-center" ng-show="showOauthForm">
        <form name="oauthCodeForm" ng-submit="glidera.submitOauthCode(code)" novalidate>
          <label>OAuth Code</label>
          <input type="text" ng-model="code" ng-disabled="glidera.loading" 
          ng-attr-placeholder="{{'Paste the authorization code here'|translate}}" required>
          <input 
            class="button expand round" 
            ng-style="{'background-color':index.backgroundColor}"
            type="submit" value="Get started" ng-disabled="oauthCodeForm.$invalid || glidera.loading">
        </form>
        <div>
          <a href class="size-12 text-gray" 
            ng-click="showOauthForm = false; index.glideraError = null; glidera.error = null" translate>Go back</a>
        </div>
      </div>
    </div>
  </div> 

  <div ng-if="index.glideraToken && index.glideraPermissions" 
    ng-init="glidera.update(index.glideraToken, index.glideraPermissions)">

    <div class="text-center m10b">
      <div class="size-12" ng-show="index.glideraEmail">{{index.glideraEmail}}</div>

      <div ng-show="index.glideraPersonalInfo" class="size-12">
        {{index.glideraPersonalInfo.firstName}} {{index.glideraPersonalInfo.lastName}}
      </div>
    </div>

    <div class="text-center m20b">
      <a href class="text-gray" ng-click="$root.go('preferencesGlidera')">
        Preferences
      </a>
    </div>

    <ul class="no-bullet m0 size-14" ng-show="index.glideraPermissions.transact">
      <li class="line-b line-t p20 pointer" ng-click="$root.go('buyGlidera')">
      <span translate>Buy</span>
      <span class="right text-gray">
        <i class="icon-arrow-right3 size-24 right"></i>
      </span>
      </li>
      <li class="line-b p20 pointer" ng-click="$root.go('sellGlidera')">
      <span translate>Sell</span>
      <span class="right text-gray">
        <i class="icon-arrow-right3 size-24 right"></i>
      </span>
      </li>
    </ul>

    <div ng-show="index.glideraPermissions.transaction_history">
      <h4 class="title m0" translate>Activity</h4> 
      <div ng-show="!index.glideraTxs" 
        class="size-12 p10 text-center text-gray" translate>
        No activity in your account
      </div>
      <div ng-repeat="tx in index.glideraTxs"
        ng-click="glidera.openTxModal(index.glideraToken, tx)"
        class="row collapse last-transactions-content">
        <div class="large-3 medium-3 small-3 columns">
          <span class="label tu radius" ng-show="tx.type == 'BUY'"
            ng-style="{'background-color':index.backgroundColor}" translate>Bought</span>
          <span class="label tu gray radius" ng-show="tx.type == 'SELL'" translate>Sold</span>
        </div>

        <div class="large-4 medium-4 small-4 columns">
          <span class="size-16">
            {{tx.subtotal}} {{tx.currency}}
          </span>
        </div>
        <div class="large-4 medium-4 small-4 columns text-right">
          <div class="m5t size-12 text-gray">
            <time ng-if="tx.transactionDate">{{tx.transactionDate | amTimeAgo}}</time>
          </div>
        </div>
        <div class="large-1 medium-1 small-1 columns text-right">
          <i class="icon-arrow-right3 size-18"></i>
        </div>
        <div class="size-12 text-gray columns m5t">
          <span class="text-success" ng-if="tx.status == 'COMPLETE'">Completed</span>
          <span class="text-info" ng-if="tx.status == 'PROCESSING'">Processing</span>
          <span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span>
        </div>
      </div>
    </div>

  </div>
</div>
<div class="extra-margin-bottom"></div>