mirror of https://github.com/BTCPrivate/copay.git
Autofocus and show the second PIN input automatically. Hide submit button. Allow only numbers
This commit is contained in:
parent
33e0bf80a6
commit
51028178ed
|
@ -43,6 +43,45 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
|
||||||
configurable: true
|
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() {
|
$scope.done = function() {
|
||||||
$rootScope.starting = false;
|
$rootScope.starting = false;
|
||||||
|
|
|
@ -286,10 +286,20 @@ angular.module('copayApp.directives')
|
||||||
link: function(_scope, _element) {
|
link: function(_scope, _element) {
|
||||||
$timeout(function() {
|
$timeout(function() {
|
||||||
_element[0].focus();
|
_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() {
|
.directive('match', function() {
|
||||||
return {
|
return {
|
||||||
require: 'ngModel',
|
require: 'ngModel',
|
||||||
|
|
|
@ -47,62 +47,81 @@
|
||||||
<a class="text-white" href="#!/createProfile">creating your profile</a>
|
<a class="text-white" href="#!/createProfile">creating your profile</a>
|
||||||
</div>
|
</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>
|
<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>
|
<form name="setPinForm" ng-submit="createPin(setPinForm)" novalidate>
|
||||||
<div class="input">
|
<div class="input" ng-show="!secondPin">
|
||||||
<input id="setpin" type="tel" ng-model="setpin" class="form-control"
|
<input id="newpin" type="tel" ng-model="newpin" class="form-control"
|
||||||
ng-maxlength="4" ng-minlength="4" maxlength="4"
|
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>
|
<i class="icon-locked"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="input">
|
<div class="input" ng-show="secondPin">
|
||||||
<input id="repeatpin" type="tel" ng-model="repeatpin" class="form-control"
|
<input id="repeatpin" type="tel" ng-model="repeatpin" class="form-control"
|
||||||
ng-maxlength="4" ng-minlength="4" maxlength="4"
|
ng-maxlength="4" ng-minlength="4" maxlength="4"
|
||||||
placeholder="Repeat pin number" name="repeatpin"
|
ng-pattern="/^[0-9]{1,4}$/"
|
||||||
match="setpin" required>
|
placeholder="Repeat pin number" name="repeatpin" required show-focus="secondPin">
|
||||||
<i class="icon-locked"></i>
|
<i class="icon-locked"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-warning size-12" ng-show="setPinForm.repeatpin.$dirty && setPinForm.repeatpin.$invalid">
|
<button translate type="submit" class="dn button primary radius expand m0"
|
||||||
<i class="fi-x"></i>
|
ng-disabled="setPinForm.$invalid || error">
|
||||||
{{'Pin must match'|translate}}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button translate type="submit" class="button primary radius expand m0"
|
|
||||||
ng-disabled="setPinForm.$invalid || loading">
|
|
||||||
Set pin
|
Set pin
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<div class="box-setup-footer text-right">
|
<div class="box-setup-footer row collapse">
|
||||||
<a class="text-gray" ng-click="createPin()">
|
<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>
|
<span translate>Skip</span>
|
||||||
<i class="icon-arrow-right3"></i>
|
<i class="icon-arrow-right3"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="box-setup" ng-if='hasPin'>
|
<div class="box-setup" ng-if='hasPin'>
|
||||||
<h1><span translate>Enter your </span> <b> PIN number</b></h1>
|
<h1><span translate>Enter your </span> <b> PIN number</b></h1>
|
||||||
<form name="pinForm" ng-submit="openWithPin(pinForm)" novalidate>
|
<form name="pinForm" ng-submit="openWithPin(pinForm)" novalidate>
|
||||||
<p class="text-warning size-12" ng-show="error">
|
<div class="box-notification" ng-show="error">
|
||||||
<i class="fi-x"></i>
|
<div class="box-icon error">
|
||||||
|
<i class="fi-x size-24"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-warning size-14">
|
||||||
{{error|translate}}
|
{{error|translate}}
|
||||||
</p>
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<input id="pin" type="tel" ng-model="pin" class="form-control"
|
<input id="pin" type="tel" ng-model="pin" class="form-control"
|
||||||
ng-maxlength="4" ng-minlength="4" maxlength="4"
|
ng-maxlength="4" ng-minlength="4" maxlength="4"
|
||||||
|
ng-pattern="/^[0-9]{1,4}$/"
|
||||||
placeholder="Pin number" name="pin" required auto-focus>
|
placeholder="Pin number" name="pin" required auto-focus>
|
||||||
<i class="icon-locked"></i>
|
<i class="icon-locked"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button translate type="submit" class="button primary radius expand m0"
|
<button translate type="submit" class="dn button primary radius expand m0"
|
||||||
ng-disabled="pinForm.$invalid || loading">
|
ng-disabled="pinForm.$invalid || error">
|
||||||
Sign in
|
Sign in
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<div class="box-setup-footer text-right">
|
<div class="box-setup-footer">
|
||||||
<a class="text-gray" ng-click="pinLogout()">
|
<a class="button warning radius m0" ng-click="pinLogout()">
|
||||||
<i class="icon-power"></i>
|
<i class="icon-power"></i>
|
||||||
<span translate>Logout</span>
|
<span translate>Logout</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
Loading…
Reference in New Issue