feat(glidera): clearer expectations on glidera integration setup

This commit is contained in:
Jason Dreyzehner 2017-02-01 16:58:24 -05:00
commit 905b0f8c8d
6 changed files with 101 additions and 58 deletions

View file

@ -114,7 +114,40 @@ angular.module('copayApp.controllers').controller('glideraController',
}); });
}; };
$scope.openAuthenticateWindow = function() {
$scope.openExternalLink($scope.getAuthenticateUrl());
$scope.showOauthForm = true
}
$scope.openLoginWindow = function() {
var glideraUrl = ($scope.network === 'testnet') ? 'https://sandbox.glidera.io/login' : 'https://glidera.io/login';
$scope.openExternalLink(glideraUrl);
}
$scope.openSupportWindow = function() {
var url = glideraService.getSupportUrl();
var optIn = true;
var title = gettextCatalog.getString('Glidera Support');
var message = gettextCatalog.getString('You can email glidera at support@glidera.io for direct support, or you can contact Glidera on Twitter.');
var okText = gettextCatalog.getString('Tweet @GlideraInc');
var cancelText = gettextCatalog.getString('Go Back');
externalLinkService.open(url, optIn, title, message, okText, cancelText);
}
$scope.retry = function() {
$scope.connectingGlidera = true;
$scope.update({'fullUpdate': true});
$timeout(function(){
$scope.connectingGlidera = false;
}, 300);
}
$scope.toggleOauthForm = function() {
$scope.showOauthForm = !$scope.showOauthForm;
}
$scope.$on("$ionicView.beforeEnter", function(event, data) { $scope.$on("$ionicView.beforeEnter", function(event, data) {
$scope.showOauthForm = false;
initGlidera(); initGlidera();
}); });

View file

@ -48,6 +48,14 @@ angular.module('copayApp.services').factory('glideraService', function($http, $l
return credentials.NETWORK; return credentials.NETWORK;
}; };
root.getSignupUrl = function() {
return credentials.HOST + '/register';
}
root.getSupportUrl = function() {
return 'https://twitter.com/GlideraInc';
}
root.getOauthCodeUrl = function() { root.getOauthCodeUrl = function() {
_setCredentials(); _setCredentials();
return credentials.HOST + '/oauth2/auth?response_type=code&client_id=' + credentials.CLIENT_ID + '&redirect_uri=' + credentials.REDIRECT_URI; return credentials.HOST + '/oauth2/auth?response_type=code&client_id=' + credentials.CLIENT_ID + '&redirect_uri=' + credentials.REDIRECT_URI;

View file

@ -2,6 +2,12 @@
@import "glidera"; @import "glidera";
@import "amazon"; @import "amazon";
#coinbase, #glidera {
.button-small {
font-size: 13px;
}
}
.integration-onboarding { .integration-onboarding {
height: 100%; height: 100%;
display: flex; display: flex;

View file

@ -11,13 +11,13 @@
<img src="/img/icon-bitcoin.svg"/> <img src="/img/icon-bitcoin.svg"/>
</i> </i>
<div class="explain-heading" translate>Connect an Exchange</div> <div class="explain-heading" translate>Connect an Exchange</div>
<div class="explain-description" translate>Buy and sell bitcoin directly from your wallet by connecting an exchange account.</div> <div class="explain-description" translate>Buy and sell bitcoin directly from your wallet by connecting your exchange accounts.</div>
</div> </div>
<div class="item item-divider"></div> <div class="item item-divider"></div>
<a class="item item-icon-right" ui-sref="tabs.buyandsell.coinbase" ng-show="isCoinbaseEnabled"> <a class="item item-icon-right" ui-sref="tabs.buyandsell.coinbase" ng-show="isCoinbaseEnabled">
<img src="img/coinbase-logo.png" width="90"> <img src="img/coinbase-logo.png" width="90">
<span class="item-note" translate>International</span> <span class="item-note" translate>33 Countries</span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
<a class="item item-icon-right" ui-sref="tabs.buyandsell.glidera" ng-show="isGlideraEnabled"> <a class="item item-icon-right" ui-sref="tabs.buyandsell.glidera" ng-show="isGlideraEnabled">

View file

@ -5,7 +5,7 @@
<ion-nav-title>Coinbase</ion-nav-title> <ion-nav-title>Coinbase</ion-nav-title>
</ion-nav-bar> </ion-nav-bar>
<ion-nav-buttons side="secondary"> <ion-nav-buttons side="secondary">
<button class="button button-clear ng-hide" ng-show="!accessToken" ng-click="coinbase.toggleOauthForm()"> <button class="button button-clear button-small ng-hide" ng-show="!accessToken" ng-click="coinbase.toggleOauthForm()">
<span ng-hide="showOauthForm" translate>Enter Code</span> <span ng-hide="showOauthForm" translate>Enter Code</span>
<span ng-show="showOauthForm" translate>Restart</span> <span ng-show="showOauthForm" translate>Restart</span>
</button> </button>
@ -35,7 +35,7 @@
<input <input
class="button button-standard button-primary" class="button button-standard button-primary"
type="submit" value="Connect Coinbase Account" ng-disabled="oauthCodeForm.$invalid"> type="submit" value="Connect Coinbase Account" ng-disabled="oauthCodeForm.$invalid">
<button type="button" class="button button-standard button-secondary" ng-click="coinbase.openSignupWindow()" translate>Coinbase Support &rarr;</button> <button type="button" class="button button-standard button-secondary" ng-click="coinbase.openSupportWindow()" translate>Coinbase Support &rarr;</button>
</form> </form>
</div> </div>
</div> </div>

View file

@ -3,72 +3,68 @@
<ion-nav-back-button> <ion-nav-back-button>
</ion-nav-back-button> </ion-nav-back-button>
<ion-nav-title>Glidera</ion-nav-title> <ion-nav-title>Glidera</ion-nav-title>
</ion-nav-bar> <ion-nav-buttons side="secondary">
<button class="button button-clear button-small ng-hide" ng-show="!token && !connectingGlidera" ng-click="toggleOauthForm()">
<ion-content ng-show="!connectingGlidera"> <span ng-hide="showOauthForm" translate>Enter Code</span>
<span ng-show="showOauthForm" translate>Restart</span>
<div class="box-notification error m0" ng-show="!network"> </button>
Glidera is disabled for this application <button class="button button-clear button-small ng-hide" ng-show="token && !connectingGlidera && status && !status.userCanTransact" ng-click="retry()" translate>
</div> Refresh
</button>
<div class="box-notification warning m0" ng-show="network == 'testnet'"> </ion-nav-buttons>
Testnet wallets only work with Glidera Sandbox Accounts <ion-content scroll="false" class="ng-hide" ng-show="!token && !connectingGlidera">
</div> <div class="box-notification error m0" ng-show="!network">
The Glidera integration is currently disabled.
<div ng-if="!token"> </div>
<div class="box-notification warning m0" ng-show="network == 'testnet'">
<div ng-init="showOauthForm = false"> Testnet wallets only work with Glidera Sandbox Accounts.
<div class="text-center m20v"> </div>
<img src="img/glidera-logo.png" ng-click="update({'fullUpdate': true})" width="200"> <div class="integration-onboarding">
<div class="integration-onboarding-logo">
<img src="img/glidera-logo.png">
</div> </div>
<div class="text-center small-10 small-centered columns" ng-show="!showOauthForm"> <div class="integration-onboarding-description" ng-hide="showOauthForm" translate>Glidera's service is available in the United States, and can take 1-2 weeks to buy or sell bitcoin.</div>
<p class="glidera-lead">You can buy and sell Bitcoin with a US bank account directly in this app.</p> <div class="integration-onboarding-description" ng-show="showOauthForm" translate>If you have trouble, contact Glidera support for direct assistance.</div>
<div class="integration-onboarding-cta" ng-show="!showOauthForm">
<p class="glidera-text">Connect your Glidera account to get started.</p> <button class="button button-standard button-primary" ng-click="openAuthenticateWindow()" translate>Connect to Glidera</button>
<button type="button" class="button button-standard button-secondary" ng-click="openSupportWindow()" translate>Glidera Support &rarr;</button>
<button class="button button-standard button-primary"
ng-click="openExternalLink(getAuthenticateUrl()); showOauthForm = true">
Connect to Glidera
</button>
<div class="m10t">
<a href ng-click="showOauthForm = true" class="button button-standard button-secondary buttion-clear">
Have the OAuth Code?
</a>
</div>
<div class="disclosure">
<p>Glidera Inc. (Glidera) is providing the service of buying or selling bitcoin to BitPay users. To enable this service, Glidera has registered with US Treasury Departments FinCEN as a Money Service Business (#31000042625755). Users of BitPay must agree to the service agreement presented by Glidera prior to obtaining Glideras service of buying or selling bitcoin.</p>
<p>Service is available in the U.S. and Canada.</p>
</div>
</div> </div>
<div ng-show="showOauthForm">
<form class="settings" name="oauthCodeForm" ng-submit="submitOauthCode(code)" novalidate> <div ng-show="showOauthForm" class="integration-onboarding-oauthform">
<div class="list settings-input-group"> <form name="oauthCodeForm" ng-submit="submitOauthCode(code)" novalidate>
<label class="item item-input item-stacked-label"> <div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">OAuth Code</span> <span class="input-label">OAuth Code</span>
<input type="text" <input type="text"
ng-model="code" ng-model="code"
ng-attr-placeholder="{{'Paste the authorization code here'}}" required> placeholder="{{'Enter OAuth Code'}}" required>
</label> </label>
</div> </div>
<input class="button button-standard button-primary" type="submit" value="Connect Glidera Account" ng-disabled="oauthCodeForm.$invalid"> <input
class="button button-standard button-primary"
type="submit" value="Connect Glidera Account" ng-disabled="oauthCodeForm.$invalid">
<button type="button" class="button button-standard button-secondary" ng-click="openSupportWindow()" translate>Glidera Support &rarr;</button>
</form> </form>
</div> </div>
</div> </div>
</div> </ion-content>
<div ng-if="token"> <ion-content scroll="false" class="ng-hide" ng-show="token && !connectingGlidera && status && !status.userCanTransact">
<div class="text-center m20v"> <div class="integration-onboarding">
<img src="img/glidera-logo.png" ng-click="update({'fullUpdate': true})" width="200"> <div class="integration-onboarding-logo">
<img src="img/glidera-logo.png">
</div>
<div class="integration-onboarding-description" translate>Please complete your account verification on Glidera's website. If you have trouble, contact Glidera's support for direct assistance.</div>
<div class="integration-onboarding-cta">
<button class="button button-standard button-primary" ng-click="openLoginWindow()" translate>Complete Glidera Setup</button>
<button type="button" class="button button-standard button-secondary" ng-click="openSupportWindow()" translate>Glidera Support &rarr;</button>
</div>
</div> </div>
<div class="text-center m30v size-12" </ion-content>
ng-show="status && !status.userCanTransact">
<h4 class="text-bold">Complete Setup</h4> <ion-content class="ng-hide" ng-show="token && !connectingGlidera && status && status.userCanTransact">
<div>Your Glidera account is not ready to transact. Please, verify it at <b>Glidera.io</b></div> <div class="text-center m20v">
<a class="button" <img src="img/glidera-logo.png" width="170">
ng-init="glideraUrl = network == 'testnet' ? 'https://sandbox.glidera.io/login' : 'https://glidera.io/login'"
ng-click="openExternalLink(glideraUrl)">
Go to Glidera
</a>
</div> </div>
<div class="list card" <div class="list card"