diff --git a/src/js/controllers/pincode.js b/src/js/controllers/pincode.js new file mode 100644 index 000000000..dca8f08f4 --- /dev/null +++ b/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(); + }); + }; +}); diff --git a/src/js/routes.js b/src/js/routes.js index 4fc657bd4..b02f18937 100644 --- a/src/js/routes.js +++ b/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 diff --git a/src/sass/views/pincode.scss b/src/sass/views/pincode.scss new file mode 100644 index 000000000..64a4b8584 --- /dev/null +++ b/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; +} diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index a4648928f..5516fd9ab 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -46,3 +46,4 @@ @import "includes/accountSelector"; @import "integrations/integrations"; @import "custom-amount"; +@import "pincode"; diff --git a/www/views/pincode.html b/www/views/pincode.html new file mode 100644 index 000000000..7bbf96677 --- /dev/null +++ b/www/views/pincode.html @@ -0,0 +1,69 @@ + +
+
+
+
+ {{passcode.substring(0, 1)}} +
+
+ {{passcode.substring(1, 2)}} +
+
+ {{passcode.substring(2, 3)}} +
+
+ {{passcode.substring(3, 4)}} +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ + diff --git a/www/views/tab-home.html b/www/views/tab-home.html index 5e1b1a99c..6f0d57ece 100644 --- a/www/views/tab-home.html +++ b/www/views/tab-home.html @@ -66,7 +66,7 @@
Wallets - +
@@ -91,7 +91,7 @@ {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' · ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} - + [Balance Hidden] {{wallet.m}}-of-{{wallet.n}}