Better look and feel

public/views/glidera.html

@@ -6,43 +6,105 @@
 </div>
 
 
-<div class="content glidera" ng-controller="glideraController as glidera">
+<div class="content glidera p20v" ng-controller="glideraController as glidera">
-  <div class="row">
-    <div class="large-12 columns">
 
-      <a href ng-if="!index.glideraToken" ng-click="$root.go('preferencesGlidera')">
+  <div class="onGoingProcess" ng-show="glidera.loading">
-        Connect to Glidera
+    <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 translate>Connecting to Glidera...</span>
+    </div>
+  </div>
+
+  <div class="text-center m10b">
+    <img src="img/glidera-logo.png" ng-click="glidera.update(index.glideraToken)">
+  </div>
+  <div ng-if="!index.glideraToken" 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>
+        <p class="text-gray size-12">Connect your Glidera account to get started</p>
+        <button 
+          class="dark-gray outline round tiny" 
+          ng-click="$root.openExternalLink(glidera.authenticateUrl); showOauthForm = true" translate>
+          Connect to Glidera
+        </button>
+        <a href ng-click="showOauthForm = true" class="db text-gray size-12">
+          Do you already have the Oauth Code?
+        </a>
+      </div>
+      <div class="text-center" ng-show="showOauthForm">
+        <p class="text-gray size-12">Paste the authorization code here</p>
+        <form name="oauthCode" ng-submit="glidera.submitOauthCode(code)" novalidate>
+          <label>OAuth Code<label>
+            <input type="text" ng-model="code" ng-disabled="glidera.loading">
+          <input 
+            class="button dark-gray outline round" 
+            type="submit" value="Get started" ng-disabled="glidera.loading">
+        </form>
+      </div>
+    </div>
+  </div>
+  <div ng-if="index.glideraToken" ng-init="glidera.init(index.glideraToken)">
+
+    <div class="text-center m10b">
+      {{index.glideraEmail}} <br>
+      <a href class="text-gray" ng-click="$root.go('preferencesGlidera')">
+        Preferences
       </a>
+    </div>
 
-      <div ng-if="index.glideraToken" ng-init="glidera.init(index.glideraToken)">
+    <h4 class="title m0" translate>Connected</h4>
-        Connected to Glidera - <a href ng-click="$root.go('preferencesGlidera')">Preferences</a>
+    <ul class="no-bullet m0 size-14">
-
+      <li class="line-b p20 pointer" ng-click="$root.go('buyGlidera')">
-        <div>
+      <span translate>Buy</span>
-          <button class="" ng-click="$root.go('buyGlidera')">Buy</button>
+      <span class="right text-gray">
-          <button class="" ng-click="$root.go('sellGlidera')">Sell</button>
+        <i class="icon-arrow-right3 size-24 right"></i>
-        </div>
+      </span>
-
+      </li>
-        <h2>Transactions</h2>
+      <li class="line-b p20 pointer" ng-click="$root.go('sellGlidera')">
-        <ul>
+      <span translate>Sell</span>
-          <li ng-repeat="tx in glidera.txs">
+      <span class="right text-gray">
-            transactionUuid: {{tx.transactionUuid}} <br>
+        <i class="icon-arrow-right3 size-24 right"></i>
-            transactionDate: {{tx.transactionDate}} <br>
+      </span>
-            type: {{tx.type}} <br>
+      </li>
-            price: {{tx.price}} <br>
+    </ul>
-            subtotal: {{tx.subtotal}} <br>
-            fees: {{tx.fees}} <br>
-            total: {{tx.total}} <br>
-            currency: {{tx.currency}} <br>
-            estimatedDeliveryDate: {{tx.estimatedDeliveryDate}} <br>
-            transactionHash: {{tx.transactionHash}} <br>
-            status: {{tx.status}}<br>
-          </li>
-        </ul>
-
 
+    <h4 class="title m0" translate>Activity</h4> 
+    <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 == 'PENDING'">Pending</span>
+        <span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span>
+      </div>
     </div>
+
   </div>
 </div>
 <div class="extra-margin-bottom"></div>

public/views/modals/glidera-tx-details.html

@@ -0,0 +1,60 @@
+<nav class="tab-bar">
+  <section class="left-small">
+    <a ng-click="cancel()">
+      <i class="icon-arrow-left3 icon-back"></i>
+      <span class="text-back" translate>Back</span>
+    </a>
+  </section>
+  <section class="middle tab-bar-section">
+    <h1 class="title ellipsis" ng-style="{'color':color}" translate>
+      Transaction
+    </h1>
+  </section>
+</nav>
+
+<div class="modal-content fix-modals-touch">
+  <div class="header-modal text-center">
+    <span class="label tu radius" ng-show="tx.type == 'BUY'"
+      ng-style="{'background-color':color}" translate>Bought</span>
+    <span class="label tu gray radius" ng-show="tx.type == 'SELL'" translate>Sold</span>
+    <div class="size-42">
+      {{tx.subtotal}} {{tx.currency}}
+    </div>
+    <div>
+      <span class="text-success" ng-if="tx.status == 'COMPLETE'">Completed</span>
+      <span class="text-info" ng-if="tx.status == 'PENDING'">Pending</span>
+      <span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span>
+    </div>
+  </div>
+
+  <h4 class="title m0" translate>Details</h4>
+
+  <ul class="no-bullet size-14 m0"> 
+
+    <li ng-show="tx.transactionDate" class="line-b p10 oh">
+      <span class="text-gray" translate>Date</span>:
+      <span class="right">{{tx.transactionDate | amCalendar}}</span>
+    </li>
+
+    <li ng-show="tx.price" class="line-b p10 oh">
+      <span class="text-gray" translate>Price</span>:
+      <span class="right">{{tx.price}}</span>
+    </li>
+
+    <li ng-show="tx.subtotal" class="line-b p10 oh">
+      <span class="text-gray" translate>Subtotal</span>:
+      <span class="right">{{tx.subtotal}}</span>
+    </li>
+
+    <li ng-show="tx.fees" class="line-b p10 oh">
+      <span class="text-gray" translate>Fees</span>:
+      <span class="right">{{tx.fees}}</span>
+    </li>
+
+    <li ng-show="tx.total" class="line-b p10 oh">
+      <span class="text-gray" translate>Total</span>:
+      <span class="right">{{tx.total}}</span>
+    </li>
+  </ul>
+  <div class="extra-margin-bottom"></div>
+</div>

public/views/preferencesGlidera.html

@@ -9,21 +9,6 @@
   <div class="row" ng-init="glidera.init(index.glideraToken)">
     <div class="large-12 columns">
 
-      <div ng-show="!index.glideraToken">
-        <a  
-          class="button outline dark-gray" 
-          ng-click="$root.openExternalLink(glidera.authenticateUrl)">
-          Get OAuth Code
-        </a>
-
-        <form name="form" ng-submit="glidera.submit(code)" novalidate>
-          <label>OAuth Code
-            <input type="text" ng-model="code">
-          </label>
-          <input type="submit" value="Get Access Token">
-        </form>
-      </div>
-
       <div ng-show="index.glideraToken">
         <a  
           class="button warning" 

public/views/walletHome.html

@@ -113,9 +113,10 @@
           </div>
           <div class="right">
 
-            <a class="button outline round light-gray tiny m0"
+            <a ng-show="!index.isShared" class="button outline round light-gray tiny preferences-icon m0"
               ng-click="$root.go('glidera')">
-              Glidera
+              <i class="fi-credit-card size-18 vm"></i>
+              <span class="show-for-medium-up">Glidera</span>
             </a>
 
             <a ng-click="$root.go('preferences')" class="button outline round light-gray tiny preferences-icon m0">

src/js/controllers/glidera.js

@@ -1,13 +1,68 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('glideraController', 
-  function(glideraService) {
+  function($scope, $timeout, $modal, profileService, configService, storageService, glideraService) {
+      
+    var config = configService.getSync().wallet.settings;
+    this.authenticateUrl = glideraService.getOauthCodeUrl();
 
-    this.init = function(token) {
+    this.update = function(token) {
       var self = this;
       glideraService.getTransactions(token, function(error, txs) {
         self.txs = txs;
       });
+      glideraService.getEmail(token, function(error, data) {
+        self.email = data.email;
+      });
+    };
+
+    this.submitOauthCode = function(code) {
+      var fc = profileService.focusedClient;
+      var self = this;
+      this.loading = true;
+      $timeout(function() {
+        glideraService.getToken(code, function(error, data) {
+          if (data && data.access_token) {
+            storageService.setGlideraToken(fc.credentials.network, data.access_token, function() {
+              $scope.$emit('Local/GlideraTokenUpdated');
+              $timeout(function() {
+                self.loading = false;
+                $scope.$apply();
+              }, 100);
+            });
+          }
+        });
+      }, 100);
+    };
+
+    this.openTxModal = function(token, tx) {
+      var self = this;
+      var fc = profileService.focusedClient;
+      var ModalInstanceCtrl = function($scope, $modalInstance) {
+        $scope.tx = tx;
+        $scope.settings = config;
+        $scope.color = fc.backgroundColor;
+
+        glideraService.getTransaction(token, tx.transactionUuid, function(error, tx) {
+          $scope.tx = tx;
+        });
+
+        $scope.cancel = function() {
+          $modalInstance.dismiss('cancel');
+        };
+
+      };
+
+      var modalInstance = $modal.open({
+        templateUrl: 'views/modals/glidera-tx-details.html',
+          windowClass: 'full animated slideInRight',
+          controller: ModalInstanceCtrl,
+      });
+
+      modalInstance.result.finally(function() {
+        var m = angular.element(document.getElementsByClassName('reveal-modal'));
+        m.addClass('slideOutRight');
+      });
     };
 
   });

src/js/controllers/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, lodash, go, profileService, configService, isCordova, rateService, storageService, addressService, gettextCatalog, gettext, amMoment, nodeWebkit, addonManager, feeService, isChromeApp, bwsError, utilService, $state) {
+angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, lodash, go, profileService, configService, isCordova, rateService, storageService, addressService, gettextCatalog, gettext, amMoment, nodeWebkit, addonManager, feeService, isChromeApp, bwsError, utilService, $state, glideraService) {
   var self = this;
   self.isCordova = isCordova;
   self.onGoingProcess = {};
@@ -114,6 +114,8 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     self.setSpendUnconfirmed();
 
     self.glideraToken = null;
+    self.glideraTxs = null;
+    self.glideraEmail = null;
 
     $timeout(function() {
       self.hasProfile = true;
@@ -847,9 +849,18 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   };
 
   self.initGlidera = function() {
+    if (self.isShared) return;
     storageService.getGlideraToken(self.network, function(err, val) {
       if (err) return;
-      self.glideraToken = val;
+      else {
+        self.glideraToken = val;
+        glideraService.getTransactions(val, function(error, txs) {
+          self.glideraTxs = txs;
+        });
+        glideraService.getEmail(val, function(error, data) {
+          self.glideraEmail = data.email;
+        });
+      }
     });
   };
 

src/js/controllers/preferencesGlidera.js

@@ -3,8 +3,6 @@
 angular.module('copayApp.controllers').controller('preferencesGlideraController', 
   function($scope, $timeout, profileService, go, glideraService, storageService) {
 
-    this.authenticateUrl = glideraService.getOauthCodeUrl();
-
     this.init = function(token) {
       var self = this;
       glideraService.getPermissions(token, function(error, permission) {
@@ -26,21 +24,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
       glideraService.getLimits(token, function(error, limits) {
         self.limits = limits;
       });
-    };
+    }; 
-
-    this.submit = function(code) {
-      var fc = profileService.focusedClient;
-      glideraService.getToken(code, function(error, data) {
-        if (data && data.status == 200) {
-          storageService.setGlideraToken(fc.credentials.network, data.data.access_token, function() {
-            $scope.$emit('Local/GlideraTokenUpdated');
-            $timeout(function() {
-              go.walletHome();
-            }, 100);
-          });
-        }
-      });
-    };
 
     this.revokeToken = function() {
       var fc = profileService.focusedClient;

src/js/services/glideraService.js

@@ -34,7 +34,7 @@ angular.module('copayApp.services').factory('glideraService', function($http, $l
 
     $http(req).then(function(data) {
       $log.info('Glidera Authorization Access Token: SUCCESS');
-      return cb(null, data); 
+      return cb(null, data.data); 
     }, function(data) {
       $log.error('Glidera Authorization Access Token: ERROR ' + data.statusText);
       return cb(data.statusText);
@@ -111,8 +111,20 @@ angular.module('copayApp.services').factory('glideraService', function($http, $l
   root.getTransactions = function(token, cb) {
     if (!token) return cb('Invalid Token');
     $http(_get('/transaction', token)).then(function(data) {
-      $log.info('Glidera Transaction: SUCCESS');
+      $log.info('Glidera Transactions: SUCCESS');
       return cb(null, data.data.transactions);
+    }, function(data) {
+      $log.error('Glidera Transactions: ERROR ' + data.statusText);
+      return cb(data.statusText);
+    });
+  };
+
+  root.getTransaction = function(token, txid, cb) {
+    if (!token) return cb('Invalid Token');
+    if (!txid) return cb('TxId required');
+    $http(_get('/transaction/' + txid, token)).then(function(data) {
+      $log.info('Glidera Transaction: SUCCESS');
+      return cb(null, data.data);
     }, function(data) {
       $log.error('Glidera Transaction: ERROR ' + data.statusText);
       return cb(data.statusText);