ionic-captcha
Version:
Arithmetic Captcha Component For Ionic 3
105 lines • 4.87 kB
JavaScript
import { Component, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CaptchaProvider } from './../providers/captcha-provider';
/**
* Generated class for the CaptchaComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
var HTML = "<ion-grid no-padding>\n<ion-row>\n <ion-col col-6 align-self-end>\n <ion-row class=\"bordered\" justify-content-center>\n <ion-col *ngFor=\"let image of images\" col-auto>\n <img [src]=\"image\" />\n </ion-col>\n </ion-row>\n </ion-col>\n <ion-col align-self-end col>\n <ion-item>\n <ion-input type=\"text\" [(ngModel)]=\"givenModel\" (ngModelChange)=\"changeCaptcha()\" (onFocus)=\"focusIn()\"></ion-input>\n </ion-item>\n </ion-col>\n <ion-col col-auto class=\"right\">\n <button type=\"button\" ion-button icon-only round small color=\"primary\" (click)=\"reloadCaptcha()\">\n <ion-icon name=\"refresh\"></ion-icon>\n </button>\n </ion-col>\n</ion-row>\n</ion-grid>";
var CSS = "\n ion-grid{\n margin: 10px 0;\n }\n\n .bordered {\n border: 1px solid;\n border-radius: 4px;\n }\n img {\n height: 20px;\n }\n .right {\n text-align: right;\n }\n ion-item {\n height: 35px;\n min-height: 35px !important;\n padding: 0 5px !important;\n input{\n text-align: center;\n }\n }\n button {\n border-radius: 50%;\n }\n";
export var CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return CaptchaComponent; }),
multi: true
};
var CaptchaComponent = (function () {
function CaptchaComponent(provider) {
this.provider = provider;
this.tryCount = -1;
this.keypressTimeout = 1500;
this.useMinus = true;
this.negativeAllowed = true;
this.minNumLength = 1;
this.maxNumLength = 2;
this.onTouchedCallback = (function () { });
this.onChangeCallback = (function () { });
}
CaptchaComponent.prototype.ngOnInit = function () {
this.images = this.provider.generateCaptcha(this.useMinus, this.negativeAllowed, this.minNumLength, this.maxNumLength);
};
CaptchaComponent.prototype.focusIn = function () {
this.onTouchedCallback();
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
CaptchaComponent.prototype.writeValue =
// From ControlValueAccessor interface
function (value) {
if (value !== this.givenModel) {
this.givenModel = value;
this.changeCaptcha();
}
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
CaptchaComponent.prototype.registerOnChange =
// From ControlValueAccessor interface
function (fn) {
this.onChangeCallback = fn;
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
CaptchaComponent.prototype.registerOnTouched =
// From ControlValueAccessor interface
function (fn) {
this.onTouchedCallback = fn;
};
CaptchaComponent.prototype.changeCaptcha = function () {
var _this = this;
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(function () {
if (_this.provider.result.toString() === _this.givenModel) {
_this.onChangeCallback(true);
_this.tryCount = 0;
}
else {
_this.onChangeCallback(null);
_this.tryCount = _this.tryCount + 1;
if (_this.tryCount > 2) {
_this.reloadCaptcha();
}
}
}, this.keypressTimeout);
};
CaptchaComponent.prototype.reloadCaptcha = function () {
this.images = this.provider.generateCaptcha(this.useMinus, this.negativeAllowed, this.minNumLength, this.maxNumLength);
this.tryCount = -1;
this.changeCaptcha();
};
CaptchaComponent.decorators = [
{ type: Component, args: [{
selector: 'captcha',
template: HTML,
styles: [CSS],
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
},] },
];
/** @nocollapse */
CaptchaComponent.ctorParameters = function () { return [
{ type: CaptchaProvider, },
]; };
CaptchaComponent.propDecorators = {
"keypressTimeout": [{ type: Input },],
"useMinus": [{ type: Input },],
"negativeAllowed": [{ type: Input },],
"minNumLength": [{ type: Input },],
"maxNumLength": [{ type: Input },],
};
return CaptchaComponent;
}());
export { CaptchaComponent };
//# sourceMappingURL=captcha.js.map