2019-09-15 14:16:32 +02:00
|
|
|
import { Timeouts } from 'const/timeouts';
|
|
|
|
import { FieldViewText } from 'views/fields/field-view-text';
|
2016-04-02 15:20:48 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const MinOpacity = 0.1;
|
2016-04-01 21:19:27 +02:00
|
|
|
|
2019-09-16 19:55:06 +02:00
|
|
|
class FieldViewOtp extends FieldViewText {
|
|
|
|
otpTimeout = null;
|
|
|
|
otpTickInterval = null;
|
|
|
|
otpValue = null;
|
|
|
|
otpGenerator = null;
|
|
|
|
otpTimeLeft = 0;
|
|
|
|
otpValidUntil = 0;
|
|
|
|
fieldOpacity = null;
|
2016-04-01 23:09:16 +02:00
|
|
|
|
2019-09-16 20:54:14 +02:00
|
|
|
constructor(model, options) {
|
|
|
|
super(model, options);
|
|
|
|
this.once('remove', () => this.resetOtp());
|
|
|
|
}
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
renderValue(value) {
|
2016-04-01 23:09:16 +02:00
|
|
|
if (!value) {
|
2016-04-02 15:20:48 +02:00
|
|
|
this.resetOtp();
|
2016-04-01 23:09:16 +02:00
|
|
|
return '';
|
|
|
|
}
|
|
|
|
if (value !== this.otpGenerator) {
|
|
|
|
this.otpGenerator = value;
|
|
|
|
this.requestOtpUpdate();
|
|
|
|
}
|
|
|
|
return this.otpValue;
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-01 21:19:27 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
getEditValue(value) {
|
2016-04-01 23:09:16 +02:00
|
|
|
return value && value.url;
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-01 23:09:16 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2019-09-16 19:55:06 +02:00
|
|
|
super.render();
|
2016-04-02 15:20:48 +02:00
|
|
|
this.fieldOpacity = null;
|
|
|
|
this.otpTick();
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-02 15:20:48 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
resetOtp() {
|
2016-04-02 15:20:48 +02:00
|
|
|
this.otpGenerator = null;
|
|
|
|
this.otpValue = null;
|
|
|
|
this.otpTimeLeft = 0;
|
|
|
|
this.otpValidUntil = 0;
|
2016-04-01 23:09:16 +02:00
|
|
|
if (this.otpTimeout) {
|
|
|
|
clearTimeout(this.otpTimeout);
|
2016-04-02 15:20:48 +02:00
|
|
|
this.otpTimeout = null;
|
|
|
|
}
|
|
|
|
if (this.otpTickInterval) {
|
|
|
|
clearInterval(this.otpTickInterval);
|
|
|
|
this.otpTickInterval = null;
|
2016-04-01 23:09:16 +02:00
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-01 23:09:16 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
requestOtpUpdate() {
|
2016-04-01 23:09:16 +02:00
|
|
|
if (this.value) {
|
|
|
|
this.value.next(this.otpUpdated.bind(this));
|
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-01 23:09:16 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
otpUpdated(pass, timeLeft) {
|
2016-04-02 15:20:48 +02:00
|
|
|
if (!this.value || !pass) {
|
|
|
|
this.resetOtp();
|
2016-04-01 23:09:16 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.otpValue = pass || '';
|
2016-04-02 15:20:48 +02:00
|
|
|
this.otpTimeLeft = timeLeft || 0;
|
|
|
|
this.otpValidUntil = Date.now() + timeLeft;
|
2016-04-04 20:45:17 +02:00
|
|
|
if (!this.editing) {
|
|
|
|
this.render();
|
|
|
|
}
|
2016-04-01 23:16:23 +02:00
|
|
|
if (this.otpValue && timeLeft) {
|
2016-04-01 23:09:16 +02:00
|
|
|
this.otpTimeout = setTimeout(this.requestOtpUpdate.bind(this), timeLeft);
|
2016-04-02 15:20:48 +02:00
|
|
|
if (!this.otpTickInterval) {
|
|
|
|
this.otpTickInterval = setInterval(this.otpTick.bind(this), 300);
|
|
|
|
}
|
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-02 15:20:48 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
otpTick() {
|
2016-04-02 15:20:48 +02:00
|
|
|
if (!this.value || !this.otpValidUntil) {
|
|
|
|
return;
|
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
let opacity;
|
|
|
|
const timeLeft = this.otpValidUntil - Date.now();
|
2016-04-02 15:20:48 +02:00
|
|
|
if (timeLeft >= Timeouts.OtpFadeDuration || this.editing) {
|
|
|
|
opacity = 1;
|
|
|
|
} else if (timeLeft <= 0) {
|
|
|
|
opacity = MinOpacity;
|
|
|
|
} else {
|
|
|
|
opacity = Math.max(MinOpacity, Math.pow(timeLeft / Timeouts.OtpFadeDuration, 2));
|
|
|
|
}
|
|
|
|
if (this.fieldOpacity === opacity) {
|
|
|
|
return;
|
2016-04-01 23:09:16 +02:00
|
|
|
}
|
2016-04-02 15:20:48 +02:00
|
|
|
this.fieldOpacity = opacity;
|
|
|
|
this.valueEl.css('opacity', opacity);
|
2016-04-01 21:19:27 +02:00
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-04-01 21:19:27 +02:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { FieldViewOtp };
|