add pincode view-controller

src/js/controllers/pincode.js

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

src/js/routes.js

@@ -672,6 +672,22 @@ 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/sass/views/pincode.scss

@@ -0,0 +1,38 @@
+.button-stretch {
+    width: 100%;
+}
+
+.col-offset-15 {
+    margin-left: 15%;
+}
+
+@mixin centerer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.content {
+  position: relative;
+  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;
+}

src/sass/views/views.scss

@@ -46,3 +46,4 @@
 @import "includes/accountSelector";
 @import "integrations/integrations";
 @import "custom-amount";
+@import "pincode";

www/views/pincode.html

@@ -0,0 +1,69 @@
+<ion-view hide-tabs>
+  <div class="content">
+    <div class="block-code">
+      <div class="row">
+        <div class="col">
+            {{passcode.substring(0, 1)}}
+        </div>
+        <div class="col">
+            {{passcode.substring(1, 2)}}
+        </div>
+        <div class="col">
+            {{passcode.substring(2, 3)}}
+        </div>
+        <div class="col">
+            {{passcode.substring(3, 4)}}
+        </div>
+      </div>
+    </div>
+    <div class="block-buttons">
+      <div class="row">
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('1')">1</button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('2')">2</button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('3')">3</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('4')">4</button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('5')">5</button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('6')">6</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('7')">7</button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('8')">8</button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('9')">9</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button class="button button-light button-stretch"></button>
+        </div>
+        <div class="col">
+          <button class="button button-light button-stretch" ng-click="add('0')">0</button>
+        </div>
+        <div class="col">
+          <button class="button icon ion-arrow-left-a button-light button-stretch" ng-click="delete()"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- <div class="parent">
+    <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.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
+        <a ui-sref="tabs.home.pincode" 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">