use modal - css refactor

src/js/controllers/pincode.js

@@ -1,6 +1,7 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('pincodeController', function($timeout, $scope, $log, $window) {
+angular.module('copayApp.controllers').controller('pincodeController', function($timeout, $scope, $log, $window, configService) {
+  $scope.pincode = '';
 
   angular.element($window).on('keydown', function(e) {
     if (e.which === 8) { // you can add others here inside brackets.
@@ -11,34 +12,39 @@ angular.module('copayApp.controllers').controller('pincodeController', function(
     if (e.key && e.key.match(/^[0-9]$/))
       $scope.add(e.key);
     else if (e.key && e.key == 'Enter')
-      console.log('DONE');
+      checkPasscode();
-  });
-
-  $scope.$on('$ionicView.beforeEnter', function(event, data) {
-    $scope.passcode = "";
   });
 
   $scope.add = function(value) {
-    if (isComplete()) $log.debug("The four digit code was entered");
+    if (isComplete()) checkPasscode();
     else updatePassCode(value);
   };
 
   $scope.delete = function() {
-    if ($scope.passcode.length > 0) {
+    if ($scope.pincode.length > 0) {
-      $scope.passcode = $scope.passcode.substring(0, $scope.passcode.length - 1);
+      $scope.pincode = $scope.pincode.substring(0, $scope.pincode.length - 1);
       updatePassCode();
     }
   };
 
   function isComplete() {
-    if ($scope.passcode.length < 4) return false;
+    if ($scope.pincode.length < 4) return false;
     else return true;
   };
 
   function updatePassCode(value) {
-    if (value) $scope.passcode = $scope.passcode + value;
+    if (value) $scope.pincode = $scope.pincode + value;
     $timeout(function() {
+      checkPasscode();
       $scope.$apply();
     });
   };
+
+  function checkPasscode() {
+    configService.whenAvailable(function(config) {
+      var value = '1234';
+      if (value != $scope.pincode) return;
+      console.log('MATCH');
+    });
+  };
 });

src/js/controllers/tab-home.js

@@ -15,6 +15,17 @@ angular.module('copayApp.controllers').controller('tabHomeController',
     $scope.isNW = platformInfo.isNW;
     $scope.showRateCard = {};
 
+    function openPincodeModal() {
+      $ionicModal.fromTemplateUrl('views/modals/pincode.html', {
+        scope: $scope,
+        backdropClickToClose: false,
+        hardwareBackButtonClose: false
+      }).then(function(modal) {
+        $scope.pincodeModal = modal;
+        $scope.pincodeModal.show();
+      });
+    };
+    openPincodeModal();
     $scope.$on("$ionicView.afterEnter", function() {
       startupService.ready();
     });

src/js/routes.js

@@ -672,22 +672,6 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         }
       })
 
-      /*
-       *
-       * Pin Code
-       *
-       */
-
-      .state('tabs.home.pincode', {
-        url: '/pincode',
-        views: {
-          'tab-home@tabs': {
-            templateUrl: 'views/pincode.html',
-            controller: 'pincodeController'
-          }
-        }
-      })
-
       /*
        *
        * Paper Wallet

src/js/services/configService.js

@@ -53,6 +53,10 @@ angular.module('copayApp.services').factory('configService', function(storageSer
       }
     },
 
+    pincode: {
+      value: null,
+    },
+
     // External services
     recentTransactions: {
       enabled: true,

src/sass/views/pincode.scss

@@ -1,38 +1,36 @@
-.button-stretch {
+#pin-code {
+  background-color: #C3C3C3;
+
+  .button-stretch {
+      width: 100%;
+  }
+  .col-offset-15 {
+      margin-left: 15%;
+  }
+  @mixin centerer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .content {
+    position: absolute;
     width: 100%;
-}
+    height: 100%;
-
+    .block-code {
-.col-offset-15 {
+      @include centerer;
-    margin-left: 15%;
+      top: 20% !important;
-}
+      width: 50%;
-
+      > .row > .col {
-@mixin centerer {
+        border-bottom: 1px solid #3E3E3E;
-  position: absolute;
+        padding: 5px;
-  top: 50%;
+        margin: 10px;
-  left: 50%;
+        height: 35px;
-  transform: translate(-50%, -50%);
+      }
-}
+    }
-
+    .block-buttons {
-.content {
+      @include centerer;
-  position: relative;
+      padding: 20px;
-  width: 100%;
+    }
-  height: 100%;
-}
-
-.block-code {
-  @include centerer;
-  top: 20% !important;
-  width: 50%;
-
-  > .row > .col {
-    border-bottom: 1px solid #3E3E3E;
-    padding: 5px;
-    margin: 10px;
-    height: 35px;
   }
 }
-
-.block-buttons {
-  @include centerer;
-  padding: 20px;
-}

www/views/modals/pincode.html

@@ -1,18 +1,18 @@
-<ion-view hide-tabs>
+<ion-modal-view id="pin-code" ng-controller="pincodeController">
   <div class="content">
     <div class="block-code">
       <div class="row">
         <div class="col">
-            {{passcode.substring(0, 1)}}
+            {{pincode.substring(0, 1)}}
         </div>
         <div class="col">
-            {{passcode.substring(1, 2)}}
+            {{pincode.substring(1, 2)}}
         </div>
         <div class="col">
-            {{passcode.substring(2, 3)}}
+            {{pincode.substring(2, 3)}}
         </div>
         <div class="col">
-            {{passcode.substring(3, 4)}}
+            {{pincode.substring(3, 4)}}
         </div>
       </div>
     </div>
@@ -63,7 +63,4 @@
       </div>
     </div>
   </div>
-  <!-- <div class="parent">
+</ion-modal-view>
-    <div class="child">I'm centered!</div>
-  </div> -->
-</ion-view>

www/views/tab-home.html

@@ -66,7 +66,7 @@
     <div class="list card">
       <div class="item item-icon-right item-heading">
         <span translate>Wallets</span>
-        <a ui-sref="tabs.home.pincode" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
+        <a ui-sref="tabs.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
       </div>
       <div>
         <a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step">