From 47729129c9c9964fff61bb9d10c9d6198ccb15d6 Mon Sep 17 00:00:00 2001
From: JDonadio <tanojaja@gmail.com>
Date: Fri, 17 Mar 2017 15:52:34 -0300
Subject: [PATCH] ref styling

---
 src/js/controllers/pincode.js | 24 ++++++++++++++-------
 src/sass/views/pincode.scss   | 40 ++++++++++++++++++++++-------------
 www/views/pincode.html        | 19 ++++++++++-------
 3 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/js/controllers/pincode.js b/src/js/controllers/pincode.js
index 65249208a..74efd43ee 100644
--- a/src/js/controllers/pincode.js
+++ b/src/js/controllers/pincode.js
@@ -1,13 +1,19 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('pincodeController', function($state, $stateParams, $ionicHistory, $timeout, $scope, $log, configService) {
+angular.module('copayApp.controllers').controller('pincodeController', function($state, $stateParams, $ionicHistory, $timeout, $scope, $log, configService, appConfigService) {
 
   $scope.$on("$ionicView.beforeEnter", function(event) {
     $scope.currentPincode = $scope.newPincode = '';
     $scope.fromSettings = $stateParams.fromSettings == 'true' ? true : false;
     $scope.locking = $stateParams.locking == 'true' ? true : false;
+    $scope.match = false;
+    $scope.appName = appConfigService.name;
   });
 
+  $scope.getFilledClass = function(limit) {
+    return $scope.currentPincode.length >= limit ? 'filled-' + $scope.appName : null;
+  };
+
   $scope.delete = function() {
     if ($scope.currentPincode.length > 0) {
       $scope.currentPincode = $scope.currentPincode.substring(0, $scope.currentPincode.length - 1);
@@ -15,30 +21,32 @@ angular.module('copayApp.controllers').controller('pincodeController', function(
     }
   };
 
-  function isComplete() {
+  $scope.isComplete = function() {
     if ($scope.currentPincode.length < 4) return false;
     else return true;
   };
 
   $scope.updatePinCode = function(value) {
-    if (value && !isComplete()) {
+    if (value && !$scope.isComplete()) {
       $scope.currentPincode = $scope.currentPincode + value;
     }
     $timeout(function() {
       $scope.$apply();
     });
-    if (!$scope.locking && isComplete()) {
+    if (!$scope.locking && $scope.isComplete()) {
       $scope.save();
     }
   };
 
   $scope.save = function() {
-    if (!isComplete()) return;
+    if (!$scope.isComplete()) return;
     var config = configService.getSync();
-    var match = config.lockapp.pincode.value == $scope.currentPincode ? true : false;
-
+    $scope.match = config.lockapp.pincode.value == $scope.currentPincode ? true : false;
+    $timeout(function() {
+      $scope.$apply();
+    });
     if (!$scope.locking) {
-      if (match) {
+      if ($scope.match) {
         $scope.fromSettings ? saveSettings($scope.locking, '') : $scope.close(150);
       }
     } else {
diff --git a/src/sass/views/pincode.scss b/src/sass/views/pincode.scss
index 272591c21..f81621c3f 100644
--- a/src/sass/views/pincode.scss
+++ b/src/sass/views/pincode.scss
@@ -34,11 +34,8 @@
       }
     }
     .block-code {
-      width: 120px;
+      width: 50%;
       margin: auto;
-      .row {
-        height: 35px;
-      }
     }
     .block-buttons {
       .col {
@@ -47,19 +44,32 @@
       cursor: pointer;
       position: absolute;
       bottom: 3%;
-      left: 0;
-      width: 100%;
+      left: 5%;
+      width: 90%;
     }
   }
-  .circle {
-  	border: 1px solid #666666;
-  	border-radius: 50%;
-  	opacity: 0.6;
-  	box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
-  	margin: 2px;
-  	transition: background-color .2s ease-in-out;
+  @mixin circle {
+    border-radius: 50%;
+    box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
+    transition: background-color .2s ease-in-out;
+    padding: 7%;
+    margin: 5%;
   }
-  .filled {
-  	background-color: #666666;
+  .circle-copay {
+    @include circle;
+  	border: 1px solid $v-accent-color;
+  }
+  .circle-bitpay {
+    @include circle;
+  	border: 1px solid $v-primary-color;
+  }
+  .filled-copay {
+    background-color: $v-accent-color;
+  }
+  .filled-bitpay {
+    background-color: $v-primary-color;
+  }
+  .error {
+    color: #f13333;
   }
 }
diff --git a/www/views/pincode.html b/www/views/pincode.html
index fe98700b2..b6914478f 100644
--- a/www/views/pincode.html
+++ b/www/views/pincode.html
@@ -4,8 +4,11 @@
     </ion-nav-back-button>
   </ion-nav-bar>
   <div class="content">
-    <div class="block-text row" translate ng-if="!newPincode">Please enter your mobile unlock code</div>
-    <div class="block-text row" translate ng-if="newPincode">Confirm your mobile unlock code</div>
+    <div class="block-text row">
+      <span translate ng-if="!newPincode && !isComplete()">Please enter your mobile unlock code</span>
+      <span translate ng-if="newPincode && !isComplete()">Confirm your mobile unlock code</span>
+      <span translate ng-if="isComplete() && !locking && !match" class="error">Incorrect code, try again.</span>
+    </div>
     <div class="app-icon">
       <i class="icon big-icon-svg">
         <div class="bg"></div>
@@ -13,10 +16,10 @@
     </div>
     <div class="block-code">
       <div class="row">
-        <div class="col circle" ng-class="{'filled': currentPincode.length >= 1}"></div>
-        <div class="col circle" ng-class="{'filled': currentPincode.length >= 2}"></div>
-        <div class="col circle" ng-class="{'filled': currentPincode.length >= 3}"></div>
-        <div class="col circle" ng-class="{'filled': currentPincode.length >= 4}"></div>
+        <div class="col circle-{{appName}}" ng-class="getFilledClass(1)"></div>
+        <div class="col circle-{{appName}}" ng-class="getFilledClass(2)"></div>
+        <div class="col circle-{{appName}}" ng-class="getFilledClass(3)"></div>
+        <div class="col circle-{{appName}}" ng-class="getFilledClass(4)"></div>
       </div>
     </div>
     <div class="block-buttons">
@@ -60,8 +63,8 @@
         <div class="col" ng-click="updatePinCode('0')">
           <div class="">0</div>
         </div>
-        <div class="col">
-          <div class="keyboard icon ion-arrow-left-a" ng-click="delete()"></div>
+        <div class="col" ng-click="delete()">
+          <div class="keyboard icon ion-arrow-left-a"></div>
         </div>
       </div>
     </div>