2016-04-01 21:19:27 +02:00
|
|
|
'use strict';
|
|
|
|
|
2016-04-02 15:20:48 +02:00
|
|
|
var FieldViewText = require('./field-view-text'),
|
|
|
|
Timeouts = require('../../const/timeouts');
|
|
|
|
|
2016-04-02 16:34:30 +02:00
|
|
|
var MinOpacity = 0.1;
|
2016-04-01 21:19:27 +02:00
|
|
|
|
|
|
|
var FieldViewOtp = FieldViewText.extend({
|
2016-04-01 23:09:16 +02:00
|
|
|
otpTimeout: null,
|
2016-04-02 15:20:48 +02:00
|
|
|
otpTickInterval: null,
|
2016-04-01 23:09:16 +02:00
|
|
|
otpValue: null,
|
|
|
|
otpGenerator: null,
|
2016-04-02 15:20:48 +02:00
|
|
|
otpTimeLeft: 0,
|
|
|
|
otpValidUntil: 0,
|
|
|
|
fieldOpacity: null,
|
2016-04-01 23:09:16 +02:00
|
|
|
|
2016-04-01 21:19:27 +02:00
|
|
|
renderValue: function(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;
|
2016-04-01 21:19:27 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
getEditValue: function(value) {
|
2016-04-01 23:09:16 +02:00
|
|
|
return value && value.url;
|
|
|
|
},
|
|
|
|
|
2016-04-02 15:20:48 +02:00
|
|
|
render: function() {
|
|
|
|
FieldViewText.prototype.render.call(this);
|
|
|
|
this.fieldOpacity = null;
|
|
|
|
this.otpTick();
|
|
|
|
},
|
|
|
|
|
2016-04-01 23:09:16 +02:00
|
|
|
remove: function() {
|
2016-04-02 15:20:48 +02:00
|
|
|
this.resetOtp();
|
2016-04-01 23:09:16 +02:00
|
|
|
FieldViewText.prototype.remove.apply(this, arguments);
|
|
|
|
},
|
|
|
|
|
2016-04-02 15:20:48 +02:00
|
|
|
resetOtp: function() {
|
|
|
|
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
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
requestOtpUpdate: function() {
|
|
|
|
if (this.value) {
|
|
|
|
this.value.next(this.otpUpdated.bind(this));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
otpUpdated: function(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-01 23:09:16 +02:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
otpTick: function() {
|
|
|
|
if (!this.value || !this.otpValidUntil) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var opacity;
|
|
|
|
var timeLeft = this.otpValidUntil - Date.now();
|
|
|
|
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
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = FieldViewOtp;
|