feat(coinbase): clean up coinbase integration onboarding

src/js/controllers/coinbase.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('coinbaseController', function($scope, $timeout, $ionicModal, $ionicHistory, $log, coinbaseService, lodash, platformInfo, ongoingProcess, popupService, externalLinkService) {
+angular.module('copayApp.controllers').controller('coinbaseController', function($scope, $timeout, $ionicModal, $ionicHistory, $log, coinbaseService, lodash, platformInfo, ongoingProcess, popupService, externalLinkService, gettextCatalog) {
 
   var isNW = platformInfo.isNW;
   var isCordova = platformInfo.isCordova;
@@ -79,11 +79,35 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
     }
   }
 
+  this.openSignupWindow = function() {
+    var url = coinbaseService.getSignupUrl();
+    var optIn = true;
+    var title = gettextCatalog.getString('Create Account');
+    var message = gettextCatalog.getString('This will open Coinbase.com, where you can create an account.');
+    var okText = gettextCatalog.getString('Go to Coinbase');
+    var cancelText = gettextCatalog.getString('Back');
+    externalLinkService.open(url, optIn, title, message, okText, cancelText);
+  }
+
+  this.openSupportWindow = function() {
+    var url = coinbaseService.getSupportUrl();
+    var optIn = true;
+    var title = gettextCatalog.getString('Coinbase Support');
+    var message = gettextCatalog.getString('Help and support for the Coinbase service is available on their website.');
+    var okText = gettextCatalog.getString('Open Help Center');
+    var cancelText = gettextCatalog.getString('Go Back');
+    externalLinkService.open(url, optIn, title, message, okText, cancelText);
+  }
+
   this.getAuthenticateUrl = function() {
     $scope.showOauthForm = isCordova || isNW ? false : true;
     return coinbaseService.getOauthCodeUrl();
   };
 
+  this.toggleOauthForm = function() {
+    $scope.showOauthForm = !$scope.showOauthForm;
+  }
+
   this.submitOauthCode = function(code) {
     var self = this;
     ongoingProcess.set('connectingCoinbase', true);
@@ -112,6 +136,7 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
 
   var self = this;
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    $scope.showOauthForm = false;
     coinbaseService.setCredentials();
     if (data.stateParams && data.stateParams.code) {
       coinbaseService.getStoredToken(function(at) {

src/js/services/coinbaseService.js

@@ -132,6 +132,14 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     return [amount, currency, amountUnitStr];
   };
 
+  root.getSignupUrl = function() {
+    return credentials.HOST + '/signup';
+  }
+
+  root.getSupportUrl = function() {
+    return 'https://support.coinbase.com/';
+  }
+
   root.getOauthCodeUrl = function() {
     return credentials.HOST
       + '/oauth/authorize?response_type=code&client_id='

src/sass/views/integrations/integrations.scss

@@ -0,0 +1,43 @@
+@import "coinbase";
+@import "glidera";
+@import "amazon";
+
+.integration-onboarding {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  &-logo {
+    display: inline-block;
+    img {
+      max-width: 170px;
+    }
+  }
+  &-heading {
+    font-size: 20px;
+    margin: 1rem;
+  }
+  &-description {
+    margin-top: 0;
+    margin-left: 2rem;
+    margin-right: 2rem;
+    margin-bottom: 100px;
+    opacity: .6;
+    max-width: 300px;
+  }
+  &-support-link {
+    cursor: pointer;
+  }
+  &-cta, &-oauthform {
+    position: absolute;
+    bottom: 5vh;
+    width: 100%;
+  }
+  &-oauthform {
+    input {
+      border-bottom: 2px solid $light-gray;
+    }
+  }
+}

src/sass/views/views.scss

@@ -42,7 +42,5 @@
 @import "includes/tx-status";
 @import "includes/itemSelector";
 @import "includes/walletSelector";
-@import "integrations/coinbase";
-@import "integrations/glidera";
-@import "integrations/amazon";
+@import "integrations/integrations";
 @import "custom-amount";

www/views/coinbase.html

@@ -4,35 +4,32 @@
     </ion-nav-back-button>
     <ion-nav-title>Coinbase</ion-nav-title>
   </ion-nav-bar>
-
-  <ion-content>
-
-    <div ng-if="!accessToken" ng-init="showOauthForm = false">
-      <div class="text-center m20v">
-        <img src="img/coinbase-logo.png" width="200">
+  <ion-nav-buttons side="secondary">
+    <button class="button button-clear ng-hide" ng-show="!accessToken" ng-click="coinbase.toggleOauthForm()">
+      <span ng-hide="showOauthForm" translate>Enter Code</span>
+      <span ng-show="showOauthForm" translate>Restart</span>
+    </button>
+  </ion-nav-buttons>
+  <ion-content scroll="false" class="ng-hide" ng-show="!accessToken">
+    <div class="integration-onboarding">
+      <div class="integration-onboarding-logo">
+        <img src="img/coinbase-logo.png">
       </div>
-      <div class="text-center small-10 small-centered columns" ng-show="!showOauthForm">
-
-        <p class="m20t text-gray size-12">Connect your Coinbase account to get started</p>
-
-        <button class="button button-standard button-primary"
-          ng-click="coinbase.openAuthenticateWindow()">
-          Connect to Coinbase
-        </button>
-        <div class="m20t">
-          <a href ng-click="showOauthForm = true" class="text-gray size-12">
-            Do you already have the Oauth Code?
-          </a>
-        </div>
+      <div class="integration-onboarding-heading" translate>Connect a Coinbase Account</div>
+      <div class="integration-onboarding-description" translate>If you have trouble with the Coinbase service, please <a class="integration-onboarding-support-link" ng-click="coinbase.openSupportWindow()">contact Coinbase support</a> for direct assistance.</div>
+      <div class="integration-onboarding-cta" ng-show="!showOauthForm">
+        <button class="button button-standard button-primary" ng-click="coinbase.openAuthenticateWindow()" translate>Connect to Coinbase</button>
+        <button class="button button-standard button-secondary" ng-click="coinbase.openSignupWindow()" translate>Create an Account</button>
       </div>
-      <div ng-show="showOauthForm">
+
+      <div ng-show="showOauthForm" class="integration-onboarding-oauthform">
         <form name="oauthCodeForm" ng-submit="coinbase.submitOauthCode(code)" novalidate>
-          <div class="list settings-input-group">
-            <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>
               <input type="text"
                      ng-model="code"
-                     ng-attr-placeholder="{{'Paste the authorization code here'}}" required>
+                     placeholder="{{'Enter OAuth Code'}}" required>
             </label>
           </div>
           <input
@@ -41,8 +38,11 @@
         </form>
       </div>
     </div>
+  </ion-content>
 
-  <div ng-if="accessToken">
+  <ion-content class="ng-hide" ng-show="accessToken">
+
+  <div>
 
     <div class="m20t text-center" ng-click="updateTransactions()">
       <img src="img/coinbase-logo.png" width="200">