Autofocus and show the second PIN input automatically. Hide submit button. Allow only numbers

js/controllers/home.js

@@ -43,6 +43,45 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
       configurable: true
     });
 
+  Object.defineProperty($scope,
+    "newpin", {
+      get: function() {
+        return this._newpin;
+      },
+      set: function(newValue) {
+        this._newpin = newValue;
+        if (newValue && newValue.length == 4) {
+          // next input
+          $scope.$$childTail.secondPin = true;
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
+
+  Object.defineProperty($scope,
+    "repeatpin", {
+      get: function() {
+        return this._repeatpin;
+      },
+      set: function(newValue) {
+        this._repeatpin = newValue;
+        if (newValue && newValue.length == 4) {
+          if ($scope.$$childTail._newpin === newValue) {
+            // save and submit
+            $scope.createPin($scope.$$childTail.setPinForm);
+          }
+          else {
+            $scope.error = 'Pin must match!';
+          }
+        }
+        if (!newValue) {
+          $scope.error = null;
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
 
   $scope.done = function() {
     $rootScope.starting = false;

js/directives.js

@@ -286,10 +286,20 @@ angular.module('copayApp.directives')
       link: function(_scope, _element) {
         $timeout(function() {
           _element[0].focus();
-        }, 0);
+        });
       }
     };
   })
+  .directive('showFocus', function($timeout) {
+    return function(scope, element, attrs) {
+      scope.$watch(attrs.showFocus, 
+        function (newValue) { 
+          $timeout(function() {
+              newValue && element[0].focus();
+          });
+        },true);
+    };    
+  })
   .directive('match', function() {
     return {
       require: 'ngModel',

views/home.html

@@ -47,62 +47,81 @@
       <a class="text-white" href="#!/createProfile">creating your profile</a>
     </div>
 
-    <div class="box-setup" ng-if='setPin'>
+    <div class="box-setup" ng-if="setPin" ng-init="secondPin = false">
       <h1><span translate>Set your </span> <b> PIN number</b></h1>
+      <div class="box-notification" ng-show="error">
+        <div class="box-icon error">
+          <i class="fi-x size-24"></i>
+        </div> 
+        <span class="text-warning size-14">
+          {{error|translate}}
+        </span>
+      </div>
+
       <form name="setPinForm" ng-submit="createPin(setPinForm)" novalidate> 
-        <div class="input">
-          <input id="setpin" type="tel" ng-model="setpin" class="form-control"
+        <div class="input" ng-show="!secondPin">
+          <input id="newpin" type="tel" ng-model="newpin" class="form-control"
             ng-maxlength="4" ng-minlength="4" maxlength="4"
-            placeholder="Pin number" name="setpin" required auto-focus>
+            ng-pattern="/^[0-9]{1,4}$/" 
+            placeholder="Pin number" name="newpin" required show-focus="!secondPin">
           <i class="icon-locked"></i>
         </div>
-        <div class="input">
+        <div class="input" ng-show="secondPin">
           <input id="repeatpin" type="tel" ng-model="repeatpin" class="form-control"
             ng-maxlength="4" ng-minlength="4" maxlength="4"
-            placeholder="Repeat pin number" name="repeatpin"
-            match="setpin" required>
+            ng-pattern="/^[0-9]{1,4}$/" 
+            placeholder="Repeat pin number" name="repeatpin" required show-focus="secondPin">
           <i class="icon-locked"></i>
         </div>
 
-        <p class="text-warning size-12" ng-show="setPinForm.repeatpin.$dirty && setPinForm.repeatpin.$invalid">
-          <i class="fi-x"></i> 
-          {{'Pin must match'|translate}}
-        </p>
- 
-        <button translate type="submit" class="button primary radius expand m0"
-          ng-disabled="setPinForm.$invalid || loading">
+        <button translate type="submit" class="dn button primary radius expand m0"
+          ng-disabled="setPinForm.$invalid || error">
           Set pin 
         </button>
       </form>
-      <div class="box-setup-footer text-right">
-        <a class="text-gray" ng-click="createPin()">
-          <span translate>Skip</span> 
-          <i class="icon-arrow-right3"></i>
-        </a>
+      <div class="box-setup-footer row collapse">
+        <div class="large-6 medium-6 small-6 columns">
+          <a class="button warning radius m0" ng-click="pinLogout()">
+            <span translate>Cancel</span> 
+            <i class="icon-x"></i>
+          </a>
+        </div>
+        <div class="large-6 medium-6 small-6 columns text-right">
+          <a class="button secondary radius m0" ng-click="open(email, password)">
+            <span translate>Skip</span> 
+            <i class="icon-arrow-right3"></i>
+          </a>
+        </div>
       </div>
     </div>
 
     <div class="box-setup" ng-if='hasPin'>
       <h1><span translate>Enter your </span> <b> PIN number</b></h1>
       <form name="pinForm" ng-submit="openWithPin(pinForm)" novalidate>
-        <p class="text-warning size-12" ng-show="error">
-          <i class="fi-x"></i> 
-          {{error|translate}}
-        </p>
+        <div class="box-notification" ng-show="error">
+          <div class="box-icon error">
+            <i class="fi-x size-24"></i>
+          </div> 
+          <span class="text-warning size-14">
+            {{error|translate}}
+          </span>
+        </div>
+
         <div class="input">
           <input id="pin" type="tel" ng-model="pin" class="form-control"
             ng-maxlength="4" ng-minlength="4" maxlength="4"
+            ng-pattern="/^[0-9]{1,4}$/" 
             placeholder="Pin number" name="pin" required auto-focus>
           <i class="icon-locked"></i>
         </div>
  
-        <button translate type="submit" class="button primary radius expand m0"
-          ng-disabled="pinForm.$invalid || loading">
+        <button translate type="submit" class="dn button primary radius expand m0"
+          ng-disabled="pinForm.$invalid || error">
           Sign in 
         </button>
       </form>
-      <div class="box-setup-footer text-right">
-        <a class="text-gray" ng-click="pinLogout()">
+      <div class="box-setup-footer">
+        <a class="button warning radius m0" ng-click="pinLogout()">
           <i class="icon-power"></i> 
           <span translate>Logout</span>
         </a>