From 36bd87f729575bc121f7966230088dfd9264fed6 Mon Sep 17 00:00:00 2001 From: Gustavo Maximiliano Cortez Date: Thu, 29 Jan 2015 01:56:32 -0300 Subject: [PATCH] New PIN page --- css/src/main.css | 2 +- css/src/mobile.css | 68 ++++++++++++++++++++++++++- js/controllers/createProfile.js | 49 +++++++------------- js/controllers/home.js | 61 ++++++++++--------------- js/services/pinService.js | 74 ++++++++++++++++++++++-------- views/createProfile.html | 42 ++++++----------- views/home.html | 81 ++++++--------------------------- views/includes/pin-number.html | 25 ++++++++++ views/includes/pin.html | 21 +++++++++ 9 files changed, 236 insertions(+), 187 deletions(-) create mode 100644 views/includes/pin-number.html create mode 100644 views/includes/pin.html diff --git a/css/src/main.css b/css/src/main.css index 09240c9f8..fef8902b9 100644 --- a/css/src/main.css +++ b/css/src/main.css @@ -1655,7 +1655,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus { } .clipo { - padding: 0 0 2rem; + margin-bottom: 2rem; text-align: center; } diff --git a/css/src/mobile.css b/css/src/mobile.css index 840946072..bf5df6359 100644 --- a/css/src/mobile.css +++ b/css/src/mobile.css @@ -4,7 +4,32 @@ * */ -@media (max-width: 1024px) { +@media (max-width: 1024px) { + + /* disabling text selection */ + * { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + input { + -webkit-user-select: auto !important; + -khtml-user-select: auto !important; + -moz-user-select: auto !important; + -ms-user-select: auto !important; + user-select: auto !important; + } + + * { + -webkit-user-drag: none; + -moz-user-drag: none; + -ms-user-drag: none; + user-drag: none; + } + /* END disabling text selection */ .inner-wrap { -webkit-transition-duration: 250ms; @@ -14,7 +39,7 @@ body { overflow: hidden; -ms-content-zooming: none; - } + } .loading-screen { background-color: #2C3E50; @@ -363,6 +388,45 @@ /*******************************************/ + .pin { + margin: 0 auto; + width: 70%; + text-align: center; + overflow: hidden; + } + + .pin-box { + color: #fff; + font-size: 28px; + width: 25%; + float: left; + } + + .pin-numbers { + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + background-color: #000; + height: 50%; + } + + .pin-button-bar { + height: 25%; + } + + a.pin-button { + margin: 2px; + padding: 4% 10%; + display: inline-block; + color: #ccc; + font-size: 120%; + } + + a.pin-button:active { + color: #fff; + } + } @media (max-width: 640px) { diff --git a/js/controllers/createProfile.js b/js/controllers/createProfile.js index 05477f881..2f6e66da3 100644 --- a/js/controllers/createProfile.js +++ b/js/controllers/createProfile.js @@ -2,7 +2,7 @@ angular.module('copayApp.controllers').controller('CreateProfileController', function($scope, $rootScope, $location, $timeout, $window, notification, pluginManager, identityService, pinService, isMobile, isCordova, configService, go) { - var _credentials, _firstpin; + var _credentials; $scope.init = function() { @@ -12,41 +12,27 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun $scope.isMobile = isMobile.any(); $scope.isWindowsPhoneApp = isMobile.Windows() && isCordova; $scope.hideForWP = 0; - + $scope.digits = []; + $scope.defined = []; + $rootScope.askForPin = 0; $scope.createStep = 'storage'; $scope.useLocalstorage = false; $scope.minPasswordStrength = _.isUndefined(config.minPasswordStrength) ? 4 : config.minPasswordStrength; + }; - pinService.makePinInput($scope, 'newpin', function(newValue) { - _firstpin = newValue; - $scope.hideForWP = 0; - $scope.askForPin = 2; - $timeout(function() { - $scope.$digest(); - }, 1); + $scope.clear = function() { + pinService.clearPin($scope); + }; + $scope.press = function(digit) { + pinService.pressPin($scope, digit, true); + }; - }); - - pinService.makePinInput($scope, 'repeatpin', function(newValue) { - if (newValue === _firstpin) { - _firstpin = null; - $scope.createPin(newValue); - } else { - $scope.askForPin = 1; - $scope.hideForWP = 0; - $scope.passwordStrength = null; - - _firstpin = null; - $scope.error = 'Entered PINs were not equal. Try again'; - $timeout(function() { - $scope.$digest(); - }, 1); - } - }); + $scope.skip = function () { + pinService.skipPin($scope, true); }; $scope.formFocus = function() { @@ -63,14 +49,11 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun preconditions.checkState(_credentials && _credentials.email); $rootScope.starting = true; - // hide Keyboard after submit form - $window.document.querySelector('#repeatpin').blur(); - $timeout(function() { pinService.save(pin, _credentials.email, _credentials.password, function(err) { _credentials.password = ''; _credentials = null; - $scope.askForPin = 0; + $rootScope.askForPin = 0; $rootScope.hasPin = true; $scope.createDefaultWallet(); }); @@ -117,7 +100,7 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun $rootScope.hideNavigation = false; $rootScope.starting = true; identityService.createDefaultWallet(function(err) { - $scope.askForPin = 0; + $rootScope.askForPin = 0; $rootScope.starting = null; if (err) { @@ -157,7 +140,7 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun email: emailOrUsername, password: password, }; - $scope.askForPin = 1; + $rootScope.askForPin = 1; $scope.hideForWP = 0; $rootScope.hideNavigation = true; diff --git a/js/controllers/home.js b/js/controllers/home.js index d36179160..563a040af 100644 --- a/js/controllers/home.js +++ b/js/controllers/home.js @@ -1,15 +1,19 @@ 'use strict'; -angular.module('copayApp.controllers').controller('HomeController', function($scope, $rootScope, $timeout, $window, go, notification, identityService, Compatibility, pinService, applicationService, isMobile, isCordova, localstorageService) { +angular.module('copayApp.controllers').controller('HomeController', function($scope, $rootScope, $timeout, $window, go, notification, identityService, Compatibility, pinService, applicationService, isMobile, isCordova, localstorageService) { var KEY = 'CopayDisclaimer'; var ls = localstorageService; - var _credentials, _firstpin; + var _credentials; + $scope.init = function() { $scope.isMobile = isMobile.any(); $scope.isWindowsPhoneApp = isMobile.Windows() && isCordova; $scope.hideForWP = 0; - $scope.attempt = 0; + $scope.attempt = 0; + $scope.digits = []; + $scope.defined = []; + $rootScope.askForPin = 0; // This is only for backwards compat, insight api should link to #!/confirmed directly if (getParam('confirmed')) { @@ -40,6 +44,18 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc } }; + $scope.clear = function() { + pinService.clearPin($scope); + }; + + $scope.press = function(digit) { + pinService.pressPin($scope, digit); + }; + + $scope.skip = function () { + pinService.skipPin($scope); + }; + $scope.agreeDisclaimer = function() { ls.setItem(KEY, true, function(err) { $scope.showDisclaimer = null; @@ -55,31 +71,6 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc } }; - pinService.makePinInput($scope, 'pin', function(newValue) { - $scope.openWithPin(newValue); - }); - - pinService.makePinInput($scope, 'newpin', function(newValue) { - _firstpin = newValue; - $scope.askForPin = 2; - }); - - pinService.makePinInput($scope, 'repeatpin', function(newValue) { - if (newValue === _firstpin) { - _firstpin = null; - $scope.createPin(newValue); - } else { - $scope.$$childTail.setPinForm.newpin.$setViewValue(''); - $scope.$$childTail.setPinForm.newpin.$render(); - $scope.$$childTail.setPinForm.repeatpin.$setViewValue(''); - $scope.$$childTail.setPinForm.repeatpin.$render(); - - _firstpin = null; - $scope.askForPin = 1; - $scope.error = 'Entered PINs were not equal. Try again'; - } - }); - $scope.openWithPin = function(pin) { if (!pin) { @@ -88,14 +79,15 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc } $rootScope.starting = true; - // hide Keyboard after submit form - $window.document.querySelector('#pin').blur(); - $timeout(function() { var credentials = pinService.get(pin, function(err, credentials) { if (err || !credentials) { $rootScope.starting = null; $scope.error = 'Wrong PIN'; + $scope.clear(); + $timeout(function() { + $scope.error = null; + }, 2000); return; } $scope.open(credentials.email, credentials.password); @@ -117,14 +109,11 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc preconditions.checkState(_credentials && _credentials.email); $rootScope.starting = true; - // hide Keyboard after submit form - $window.document.querySelector('#repeatpin').blur(); - $timeout(function() { pinService.save(pin, _credentials.email, _credentials.password, function(err) { _credentials.password = ''; _credentials = null; - $scope.askForPin = 0; + $rootScope.askForPin = 0; $rootScope.hasPin = true; $rootScope.starting = null; $scope.openWallets(); @@ -194,7 +183,7 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc email: email, password: password, }; - $scope.askForPin = 1; + $rootScope.askForPin = 1; $rootScope.starting = false; $rootScope.hideNavigation = true; $timeout(function() { diff --git a/js/services/pinService.js b/js/services/pinService.js index 6329e7ce5..fa20c78c2 100644 --- a/js/services/pinService.js +++ b/js/services/pinService.js @@ -10,6 +10,8 @@ angular.module('copayApp.services') var ls = localstorageService; var root = {}; + var _firstpin; + root.check = function(cb) { ls.getItem(KEY, function(err, value) { return cb(err, value ? true : false); @@ -48,27 +50,61 @@ angular.module('copayApp.services') ls.removeItem(KEY, cb); }; - - root.makePinInput = function(scope, name, cb) { - Object.defineProperty(scope, name, { - get: function() { - return this['_' + name]; - }, - set: function(newValue) { - this['_' + name] = newValue; - scope.error = null; - scope.loading = null; - if (newValue && newValue.length == 4) { - $timeout(function() { - return cb(newValue); - }, 30); - } - }, - enumerable: true, - configurable: true - }); + root.clearPin = function(scope) { + scope.digits = []; + scope.defined = []; }; + root.pressPin = function(scope, digit, skipOpenWithPin) { + scope.error = null; + scope.digits.push(digit); + scope.defined.push(true); + if (scope.digits.length == 4) { + var pin = scope.digits.join(''); + if (!$rootScope.hasPin) { + if (!_firstpin) { + _firstpin = pin; + $timeout(function() { + scope.clear(); + }, 100); + return; + } + else { + if (pin === _firstpin) { + scope.createPin(pin); + } + else { + _firstpin = null; + $timeout(function() { + scope.clear(); + scope.error = 'Entered PINs were not equal. Try again'; + $timeout(function() { + scope.error = null; + }, 2000); + }, 100); + return; + } + } + } + if (!skipOpenWithPin) { + scope.openWithPin(pin); + } + } + }; + + root.skipPin = function(scope, creatingProfile) { + if (!$rootScope.hasPin) { + if (!creatingProfile) { + scope.openWallets(); + } + else { + scope.createDefaultWallet() + } + } + else { + scope.pinLogout(); + } + }; return root; }); diff --git a/views/createProfile.html b/views/createProfile.html index fa970ea3d..4ad11e872 100644 --- a/views/createProfile.html +++ b/views/createProfile.html @@ -1,9 +1,15 @@
+ +
+
+
+
-
+
+
Copay
@@ -199,13 +205,15 @@
+
-
-
+
+
+
clipo
-
+
@@ -213,30 +221,8 @@ {{error|translate}}
- -
-
- - -
-
- - -
-
-
- - Skip - -
-
- -
-
-
+
+
diff --git a/views/home.html b/views/home.html index b11fd38f9..2311f33d3 100644 --- a/views/home.html +++ b/views/home.html @@ -1,5 +1,10 @@
+ +
+
+
+
@@ -33,9 +38,10 @@
+
-
+
Copay
@@ -52,11 +58,11 @@
-
+
- clipo + clipo + clipo
-
@@ -65,72 +71,10 @@ {{error|translate}}
- -
-
- - -
-
- - -
- -
-
- - Skip - -
-
- -
-
- - -
+
-
-
- clipo -
-
-
-
- -
- - {{error|translate}} - -
- -
- - -
- -
-
- - - Logout - -
-
- -
-
-
-
- -
+
clipo
@@ -213,6 +157,7 @@ aasdas
+
diff --git a/views/includes/pin-number.html b/views/includes/pin-number.html new file mode 100644 index 000000000..ff3790e77 --- /dev/null +++ b/views/includes/pin-number.html @@ -0,0 +1,25 @@ +
+
+ 1 + 2 + 3 +
+
+ 4 + 5 + 6 +
+
+ 7 + 8 + 9 +
+
+ + + + + 0 + +
+
diff --git a/views/includes/pin.html b/views/includes/pin.html new file mode 100644 index 000000000..8e1f25dd0 --- /dev/null +++ b/views/includes/pin.html @@ -0,0 +1,21 @@ +
+
+ - + * +
+ +
+ - + * +
+ +
+ - + * +
+ +
+ - + * +
+