user-verification
Version:
OTP verification SDK for web applications
967 lines (954 loc) • 46 kB
JavaScript
'use strict';
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _regeneratorRuntime() {
_regeneratorRuntime = function () {
return e;
};
var t,
e = {},
r = Object.prototype,
n = r.hasOwnProperty,
o = Object.defineProperty || function (t, e, r) {
t[e] = r.value;
},
i = "function" == typeof Symbol ? Symbol : {},
a = i.iterator || "@@iterator",
c = i.asyncIterator || "@@asyncIterator",
u = i.toStringTag || "@@toStringTag";
function define(t, e, r) {
return Object.defineProperty(t, e, {
value: r,
enumerable: !0,
configurable: !0,
writable: !0
}), t[e];
}
try {
define({}, "");
} catch (t) {
define = function (t, e, r) {
return t[e] = r;
};
}
function wrap(t, e, r, n) {
var i = e && e.prototype instanceof Generator ? e : Generator,
a = Object.create(i.prototype),
c = new Context(n || []);
return o(a, "_invoke", {
value: makeInvokeMethod(t, r, c)
}), a;
}
function tryCatch(t, e, r) {
try {
return {
type: "normal",
arg: t.call(e, r)
};
} catch (t) {
return {
type: "throw",
arg: t
};
}
}
e.wrap = wrap;
var h = "suspendedStart",
l = "suspendedYield",
f = "executing",
s = "completed",
y = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var p = {};
define(p, a, function () {
return this;
});
var d = Object.getPrototypeOf,
v = d && d(d(values([])));
v && v !== r && n.call(v, a) && (p = v);
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
function defineIteratorMethods(t) {
["next", "throw", "return"].forEach(function (e) {
define(t, e, function (t) {
return this._invoke(e, t);
});
});
}
function AsyncIterator(t, e) {
function invoke(r, o, i, a) {
var c = tryCatch(t[r], t, o);
if ("throw" !== c.type) {
var u = c.arg,
h = u.value;
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
invoke("next", t, i, a);
}, function (t) {
invoke("throw", t, i, a);
}) : e.resolve(h).then(function (t) {
u.value = t, i(u);
}, function (t) {
return invoke("throw", t, i, a);
});
}
a(c.arg);
}
var r;
o(this, "_invoke", {
value: function (t, n) {
function callInvokeWithMethodAndArg() {
return new e(function (e, r) {
invoke(t, n, e, r);
});
}
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(e, r, n) {
var o = h;
return function (i, a) {
if (o === f) throw Error("Generator is already running");
if (o === s) {
if ("throw" === i) throw a;
return {
value: t,
done: !0
};
}
for (n.method = i, n.arg = a;;) {
var c = n.delegate;
if (c) {
var u = maybeInvokeDelegate(c, n);
if (u) {
if (u === y) continue;
return u;
}
}
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
if (o === h) throw o = s, n.arg;
n.dispatchException(n.arg);
} else "return" === n.method && n.abrupt("return", n.arg);
o = f;
var p = tryCatch(e, r, n);
if ("normal" === p.type) {
if (o = n.done ? s : l, p.arg === y) continue;
return {
value: p.arg,
done: n.done
};
}
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
}
};
}
function maybeInvokeDelegate(e, r) {
var n = r.method,
o = e.iterator[n];
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
var i = tryCatch(o, e.iterator, r.arg);
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
var a = i.arg;
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
}
function pushTryEntry(t) {
var e = {
tryLoc: t[0]
};
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
}
function resetTryEntry(t) {
var e = t.completion || {};
e.type = "normal", delete e.arg, t.completion = e;
}
function Context(t) {
this.tryEntries = [{
tryLoc: "root"
}], t.forEach(pushTryEntry, this), this.reset(!0);
}
function values(e) {
if (e || "" === e) {
var r = e[a];
if (r) return r.call(e);
if ("function" == typeof e.next) return e;
if (!isNaN(e.length)) {
var o = -1,
i = function next() {
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
return next.value = t, next.done = !0, next;
};
return i.next = i;
}
}
throw new TypeError(typeof e + " is not iterable");
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
value: GeneratorFunctionPrototype,
configurable: !0
}), o(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: !0
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
var e = "function" == typeof t && t.constructor;
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
}, e.mark = function (t) {
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
}, e.awrap = function (t) {
return {
__await: t
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
return this;
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
void 0 === i && (i = Promise);
var a = new AsyncIterator(wrap(t, r, n, o), i);
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
return t.done ? t.value : a.next();
});
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
return this;
}), define(g, "toString", function () {
return "[object Generator]";
}), e.keys = function (t) {
var e = Object(t),
r = [];
for (var n in e) r.push(n);
return r.reverse(), function next() {
for (; r.length;) {
var t = r.pop();
if (t in e) return next.value = t, next.done = !1, next;
}
return next.done = !0, next;
};
}, e.values = values, Context.prototype = {
constructor: Context,
reset: function (e) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
},
stop: function () {
this.done = !0;
var t = this.tryEntries[0].completion;
if ("throw" === t.type) throw t.arg;
return this.rval;
},
dispatchException: function (e) {
if (this.done) throw e;
var r = this;
function handle(n, o) {
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
}
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
var i = this.tryEntries[o],
a = i.completion;
if ("root" === i.tryLoc) return handle("end");
if (i.tryLoc <= this.prev) {
var c = n.call(i, "catchLoc"),
u = n.call(i, "finallyLoc");
if (c && u) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
} else if (c) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
} else {
if (!u) throw Error("try statement without catch or finally");
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
}
}
}
},
abrupt: function (t, e) {
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
var o = this.tryEntries[r];
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
var i = o;
break;
}
}
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
var a = i ? i.completion : {};
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
},
complete: function (t, e) {
if ("throw" === t.type) throw t.arg;
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
},
finish: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
}
},
catch: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.tryLoc === t) {
var n = r.completion;
if ("throw" === n.type) {
var o = n.arg;
resetTryEntry(r);
}
return o;
}
}
throw Error("illegal catch attempt");
},
delegateYield: function (e, r, n) {
return this.delegate = {
iterator: values(e),
resultName: r,
nextLoc: n
}, "next" === this.method && (this.arg = t), y;
}
}, e;
}
var DIALOG_ID = 'dev-otp-dialog';
var RESEND_TIMEOUT = 5 * 60 * 1000;
var CHECK_MARK = "\u2713"; // Unicode checkmark symbol
var DevOTPImpl = /*#__PURE__*/function () {
function DevOTPImpl() {
var _this = this;
this.generateStylesCSS = function () {
var _this$styles$verifyBu, _this$styles$verifyBu2, _this$styles$verifyBu3, _this$styles$verifyBu4, _this$styles$verifyBu5, _this$styles$successM, _this$styles$successM2, _this$styles$successM3, _this$styles$dialog, _this$styles$dialog2, _this$styles$dialog3, _this$styles$dialog4, _this$styles$dialog5, _this$styles$dialog6, _this$styles$input, _this$styles$input2, _this$styles$input3, _this$styles$input4, _this$styles$input5, _this$styles$input6, _this$styles$verifyBu6, _this$styles$verifyBu7, _this$styles$verifyBu8, _this$styles$verifyBu9, _this$styles$verifyBu10, _this$styles$cancelBu, _this$styles$cancelBu2, _this$styles$cancelBu3, _this$styles$cancelBu4, _this$styles$cancelBu5, _this$styles$resendBu, _this$styles$resendBu2, _this$styles$resendBu3, _this$styles$resendBu4, _this$styles$resendBu5, _this$styles$errorMes, _this$styles$errorMes2, _this$styles$errorMes3, _this$styles$errorMes4, _this$styles$verifyBu11, _this$styles$verifyBu12, _this$styles$verifyBu13, _this$styles$verifyBu14, _this$styles$verifyBu15, _this$styles$successM4, _this$styles$successM5, _this$styles$successM6;
return "\n " + (_this.styles ? "\n .dev-otp-input-group {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n }\n .dev-otp-input-group input {\n flex: 1;\n }\n .verify-button {\n background: " + (((_this$styles$verifyBu = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu.background) || '#cc14ff') + ";\n color: " + (((_this$styles$verifyBu2 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu2.color) || '#FFFFFF') + ";\n padding: " + (((_this$styles$verifyBu3 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu3.padding) || '8px 16px') + ";\n border-radius: " + (((_this$styles$verifyBu4 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu4.borderRadius) || '4px') + ";\n border: " + (((_this$styles$verifyBu5 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu5.border) || 'none') + ";\n cursor: pointer;\n display: none;\n width: auto !important;\n }\n .verify-button.visible {\n display: inline-block;\n }\n .success-mark {\n color: " + (((_this$styles$successM = _this.styles.successMark) == null ? void 0 : _this$styles$successM.color) || '#1dc11a') + ";\n font-size: " + (((_this$styles$successM2 = _this.styles.successMark) == null ? void 0 : _this$styles$successM2.fontSize) || '20px') + ";\n margin-left: " + (((_this$styles$successM3 = _this.styles.successMark) == null ? void 0 : _this$styles$successM3.marginLeft) || '8px') + ";\n display: none;\n width: auto;\n line-height: 1;\n }\n .success-mark.visible {\n display: inline-block; \n }\n " : '') + "\n #dev-otp-dialog {\n padding: " + (((_this$styles$dialog = _this.styles.dialog) == null ? void 0 : _this$styles$dialog.padding) || '20px') + ";\n border-radius: " + (((_this$styles$dialog2 = _this.styles.dialog) == null ? void 0 : _this$styles$dialog2.borderRadius) || '8px') + ";\n border: " + (((_this$styles$dialog3 = _this.styles.dialog) == null ? void 0 : _this$styles$dialog3.border) || 'none') + ";\n box-shadow: " + (((_this$styles$dialog4 = _this.styles.dialog) == null ? void 0 : _this$styles$dialog4.boxShadow) || '0 2px 8px rgba(0, 0, 0, 0.2)') + ";\n background: " + (((_this$styles$dialog5 = _this.styles.dialog) == null ? void 0 : _this$styles$dialog5.background) || '#FFFFFF') + ";\n }\n #dev-otp-dialog::backdrop {\n background: " + (((_this$styles$dialog6 = _this.styles.dialog) == null ? void 0 : _this$styles$dialog6.backdrop) || 'rgba(0, 0, 0, 0.5)') + ";\n }\n #dev-otp-input {\n padding: " + (((_this$styles$input = _this.styles.input) == null ? void 0 : _this$styles$input.padding) || '8px') + ";\n font-size: " + (((_this$styles$input2 = _this.styles.input) == null ? void 0 : _this$styles$input2.fontSize) || '16px') + ";\n border: " + (((_this$styles$input3 = _this.styles.input) == null ? void 0 : _this$styles$input3.border) || '1px solid #ccc') + ";\n border-radius: " + (((_this$styles$input4 = _this.styles.input) == null ? void 0 : _this$styles$input4.borderRadius) || '4px') + ";\n margin-bottom: 12px;\n width: 100%;\n box-sizing: border-box;\n color: " + (((_this$styles$input5 = _this.styles.input) == null ? void 0 : _this$styles$input5.color) || '#353a40') + ";\n background: " + (((_this$styles$input6 = _this.styles.input) == null ? void 0 : _this$styles$input6.background) || '#F9FAFB') + ";\n }\n #dev-otp-verify {\n background: " + (((_this$styles$verifyBu6 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu6.background) || '#cc14ff') + ";\n color: " + (((_this$styles$verifyBu7 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu7.color) || '#FFFFFF') + ";\n padding: " + (((_this$styles$verifyBu8 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu8.padding) || '8px 16px') + ";\n border-radius: " + (((_this$styles$verifyBu9 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu9.borderRadius) || '4px') + ";\n border: " + (((_this$styles$verifyBu10 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu10.border) || 'none') + ";\n cursor: pointer;\n margin-right: 8px;\n }\n #dev-otp-cancel {\n background: " + (((_this$styles$cancelBu = _this.styles.cancelButton) == null ? void 0 : _this$styles$cancelBu.background) || '#FFFFFF') + ";\n color: " + (((_this$styles$cancelBu2 = _this.styles.cancelButton) == null ? void 0 : _this$styles$cancelBu2.color) || '#1dc11a') + ";\n padding: " + (((_this$styles$cancelBu3 = _this.styles.cancelButton) == null ? void 0 : _this$styles$cancelBu3.padding) || '8px 16px') + ";\n border-radius: " + (((_this$styles$cancelBu4 = _this.styles.cancelButton) == null ? void 0 : _this$styles$cancelBu4.borderRadius) || '4px') + ";\n border: " + (((_this$styles$cancelBu5 = _this.styles.cancelButton) == null ? void 0 : _this$styles$cancelBu5.border) || '1px solid #1dc11a') + ";\n cursor: pointer;\n }\n #dev-otp-resend {\n background: " + (((_this$styles$resendBu = _this.styles.resendButton) == null ? void 0 : _this$styles$resendBu.background) || '#F9FAFB') + ";\n color: " + (((_this$styles$resendBu2 = _this.styles.resendButton) == null ? void 0 : _this$styles$resendBu2.color) || '#4B5563') + ";\n padding: " + (((_this$styles$resendBu3 = _this.styles.resendButton) == null ? void 0 : _this$styles$resendBu3.padding) || '8px 16px') + ";\n border-radius: " + (((_this$styles$resendBu4 = _this.styles.resendButton) == null ? void 0 : _this$styles$resendBu4.borderRadius) || '4px') + ";\n border: " + (((_this$styles$resendBu5 = _this.styles.resendButton) == null ? void 0 : _this$styles$resendBu5.border) || '1px solid #4B5563') + ";\n cursor: pointer;\n margin-top: 12px;\n width: 100%;\n }\n #dev-otp-resend:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n #dev-otp-error {\n color: " + (((_this$styles$errorMes = _this.styles.errorMessage) == null ? void 0 : _this$styles$errorMes.color) || '#EF4444') + ";\n font-size: " + (((_this$styles$errorMes2 = _this.styles.errorMessage) == null ? void 0 : _this$styles$errorMes2.fontSize) || '14px') + ";\n margin-top: " + (((_this$styles$errorMes3 = _this.styles.errorMessage) == null ? void 0 : _this$styles$errorMes3.marginTop) || '8px') + ";\n text-align: " + (((_this$styles$errorMes4 = _this.styles.errorMessage) == null ? void 0 : _this$styles$errorMes4.textAlign) || 'center') + ";\n display: none;\n }\n .dev-otp-resend {\n margin-top: 12px;\n text-align: center;\n }\n .dev-otp-timer {\n margin-bottom: 8px;\n color: " + (_this.styles.text || '#353a40') + ";\n font-size: 14px;\n }\n #dev-otp-countdown {\n font-weight: bold;\n color: " + (_this.styles.text || '#353a40') + ";\n }\n .verify-button {\n background: " + (((_this$styles$verifyBu11 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu11.background) || '#cc14ff') + ";\n color: " + (((_this$styles$verifyBu12 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu12.color) || '#FFFFFF') + ";\n padding: " + (((_this$styles$verifyBu13 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu13.padding) || '8px 16px') + ";\n border-radius: " + (((_this$styles$verifyBu14 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu14.borderRadius) || '4px') + ";\n border: " + (((_this$styles$verifyBu15 = _this.styles.verifyButton) == null ? void 0 : _this$styles$verifyBu15.border) || 'none') + ";\n cursor: pointer;\n display: none;\n }\n .verify-button.visible {\n display: inline-block;\n }\n .success-mark {\n color: " + (((_this$styles$successM4 = _this.styles.successMark) == null ? void 0 : _this$styles$successM4.color) || '#1dc11a') + ";\n font-size: " + (((_this$styles$successM5 = _this.styles.successMark) == null ? void 0 : _this$styles$successM5.fontSize) || '20px') + ";\n margin-left: " + (((_this$styles$successM6 = _this.styles.successMark) == null ? void 0 : _this$styles$successM6.marginLeft) || '8px') + ";\n display: none;\n }\n .success-mark.visible {\n display: inline-block;\n }\n ";
};
this.createDialog = function () {
if (!_this.styles) {
throw new Error('Theme styles not initialized');
}
// Remove existing dialog if it exists
var existingDialog = document.getElementById(DIALOG_ID);
if (existingDialog) {
existingDialog.remove();
}
var dialog = document.createElement('dialog');
dialog.id = DIALOG_ID;
var messageText = _this.verificationType === 'email' ? 'Please enter the verification code sent to your email' : 'Please enter the verification code sent to your phone';
dialog.innerHTML = "\n <div class=\"dev-otp-content\">\n <h2>Enter OTP</h2>\n <p>" + messageText + "</p>\n <input type=\"text\" id=\"dev-otp-input\" maxlength=\"6\" placeholder=\"Enter OTP\">\n <div id=\"dev-otp-error\"></div>\n <div class=\"dev-otp-buttons\">\n <button id=\"dev-otp-verify\">Verify</button>\n <button id=\"dev-otp-cancel\">Cancel</button>\n </div>\n <div class=\"dev-otp-resend\">\n <div class=\"dev-otp-timer\">You can resend OTP in <span id=\"dev-otp-countdown\"></span></div>\n <button id=\"dev-otp-resend\">Resend OTP</button>\n </div>\n </div>\n ";
var style = document.createElement('style');
style.setAttribute('data-for', DIALOG_ID);
style.textContent = _this.generateStylesCSS();
// Remove existing style if it exists
var existingStyle = document.head.querySelector("style[data-for=\"" + DIALOG_ID + "\"]");
if (existingStyle) {
existingStyle.remove();
}
document.head.appendChild(style);
document.body.appendChild(dialog);
_this.dialog = dialog;
// Add event listeners
dialog.querySelector('#dev-otp-verify').addEventListener('click', _this.handleOTPVerification);
dialog.querySelector('#dev-otp-cancel').addEventListener('click', function () {
_this.hideError();
_this.dialog.close();
});
dialog.querySelector('#dev-otp-resend').addEventListener('click', _this.handleResendOTP);
dialog.querySelector('#dev-otp-input').addEventListener('input', function () {
_this.hideError();
});
return dialog;
};
this.startResendTimer = function () {
var resendButton = _this.dialog.querySelector('#dev-otp-resend');
var timerDisplay = _this.dialog.querySelector('#dev-otp-countdown');
var timerContainer = _this.dialog.querySelector('.dev-otp-timer');
var timeLeft = RESEND_TIMEOUT / 1000;
if (_this.resendTimer) {
clearInterval(_this.resendTimer);
}
resendButton.disabled = true;
resendButton.textContent = 'Resend OTP';
var updateTimer = function updateTimer() {
var minutes = Math.floor(timeLeft / 60);
var seconds = timeLeft % 60;
timerDisplay.textContent = minutes + ":" + String(seconds).padStart(2, '0');
};
updateTimer();
timerContainer.style.display = 'block';
_this.resendTimer = setInterval(function () {
timeLeft--;
if (timeLeft <= 0) {
clearInterval(_this.resendTimer);
resendButton.disabled = false;
timerContainer.style.display = 'none';
} else {
updateTimer();
}
}, 1000);
};
this.showError = function (message) {
var errorElement = _this.dialog.querySelector('#dev-otp-error');
errorElement.textContent = message;
errorElement.style.display = 'block';
};
this.hideError = function () {
var errorElement = _this.dialog.querySelector('#dev-otp-error');
errorElement.style.display = 'none';
};
this.init = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(siteId) {
var emailInput, phoneInput, emailVerifyButton, emailGroup, emailSuccessMark, phoneVerifyButton, phoneGroup, phoneSuccessMark, style;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_this.siteId = siteId;
_context.next = 4;
return _this.fetchThemeConfig();
case 4:
_this.styles = _context.sent;
emailInput = document.querySelector('[data-verify="email"]');
phoneInput = document.querySelector('[data-verify="phone"]');
if (!(!emailInput && !phoneInput)) {
_context.next = 9;
break;
}
throw new Error('No verification inputs found with data-verify="email" or data-verify="phone"');
case 9:
if (!emailInput) {
_context.next = 25;
break;
}
// Find the verify button before wrapping
emailVerifyButton = emailInput.nextElementSibling;
if (emailVerifyButton != null && emailVerifyButton.matches('[data-verify="verify-button"]')) {
_context.next = 13;
break;
}
throw new Error('verify-button not found next to email input');
case 13:
// Create and insert wrapper
emailGroup = document.createElement('div');
emailGroup.className = 'dev-otp-input-group';
emailInput.parentNode.insertBefore(emailGroup, emailInput);
// Move both elements into wrapper
emailGroup.appendChild(emailInput);
emailGroup.appendChild(emailVerifyButton);
// Create success mark span
emailSuccessMark = document.createElement('span');
emailSuccessMark.className = 'success-mark';
emailSuccessMark.textContent = CHECK_MARK;
emailGroup.appendChild(emailSuccessMark);
emailVerifyButton.classList.add('verify-button');
emailInput.addEventListener('input', function (e) {
var isValidEmail = e.target.value.includes('@') && e.target.value.includes('.');
emailVerifyButton.classList.toggle('visible', isValidEmail);
emailSuccessMark.classList.remove('visible');
});
emailVerifyButton.addEventListener('click', function (evt) {
_this.handleVerifyClick(evt, 'email');
});
case 25:
if (!phoneInput) {
_context.next = 41;
break;
}
// Find the verify button before wrapping
phoneVerifyButton = phoneInput.nextElementSibling;
if (phoneVerifyButton != null && phoneVerifyButton.matches('[data-verify="verify-button"]')) {
_context.next = 29;
break;
}
throw new Error('verify-button not found next to phone input');
case 29:
// Create and insert wrapper
phoneGroup = document.createElement('div');
phoneGroup.className = 'dev-otp-input-group';
phoneInput.parentNode.insertBefore(phoneGroup, phoneInput);
// Move both elements into wrapper
phoneGroup.appendChild(phoneInput);
phoneGroup.appendChild(phoneVerifyButton);
// Create success mark span
phoneSuccessMark = document.createElement('span');
phoneSuccessMark.className = 'success-mark';
phoneSuccessMark.textContent = CHECK_MARK;
phoneGroup.appendChild(phoneSuccessMark);
phoneVerifyButton.classList.add('verify-button');
phoneInput.addEventListener('input', function (e) {
var isValidPhone = /^\d{10,}$/.test(e.target.value.replace(/\D/g, ''));
phoneVerifyButton.classList.toggle('visible', isValidPhone);
phoneSuccessMark.classList.remove('visible');
});
phoneVerifyButton.addEventListener('click', function (evt) {
_this.handleVerifyClick(evt, 'phone');
});
case 41:
// Update event listener for verification success
document.addEventListener('dev-otp-verified', function (event) {
if (event.detail.verified) {
var input = document.querySelector("[data-verify=\"" + _this.verificationType + "\"]");
var group = input == null ? void 0 : input.closest('.dev-otp-input-group');
var successMark = group == null ? void 0 : group.querySelector('.success-mark');
var verifyButton = group == null ? void 0 : group.querySelector('.verify-button');
if (verifyButton && successMark) {
verifyButton.classList.remove('visible');
successMark.classList.add('visible');
}
}
});
// Add styles to document
style = document.createElement('style');
style.textContent = _this.generateStylesCSS();
document.head.appendChild(style);
_context.next = 51;
break;
case 47:
_context.prev = 47;
_context.t0 = _context["catch"](0);
_this.printError(_context.t0.message);
throw _context.t0;
case 51:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 47]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}();
this.printError = function (message) {
console.error("VERIFICATION SDK Error: " + message);
};
this.handleVerifyClick = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(evt, type) {
var input, identifier, _this$dialog, response, errorText, data;
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
evt.preventDefault();
input = document.querySelector("[data-verify=\"" + type + "\"]");
identifier = input == null ? void 0 : input.value;
if (identifier) {
_context2.next = 6;
break;
}
_this.printError(type.charAt(0).toUpperCase() + type.slice(1) + " is required");
return _context2.abrupt("return");
case 6:
// Store the verification type and identifier for potential resend
_this.verificationType = type;
_this.identifier = identifier;
_context2.prev = 8;
if (!_this.dialog) {
_this.createDialog();
}
// Make API call outside the if/else block
_context2.next = 12;
return fetch('https://user-verification-tawny.vercel.app/api/send-otp', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
siteId: _this.siteId,
identifier: identifier,
type: type
})
});
case 12:
response = _context2.sent;
if (response.ok) {
_context2.next = 19;
break;
}
_context2.next = 16;
return response.text();
case 16:
errorText = _context2.sent;
console.error('Error Response:', errorText);
throw new Error('Failed to send OTP');
case 19:
_context2.next = 21;
return response.json();
case 21:
data = _context2.sent;
if (data) {
_this.jwt = data.token;
}
(_this$dialog = _this.dialog) == null || _this$dialog.showModal();
_this.startResendTimer();
_context2.next = 30;
break;
case 27:
_context2.prev = 27;
_context2.t0 = _context2["catch"](8);
_this.printError(_context2.t0 instanceof Error ? _context2.t0.message : 'An unknown error occurred');
case 30:
case "end":
return _context2.stop();
}
}, _callee2, null, [[8, 27]]);
}));
return function (_x2, _x3) {
return _ref2.apply(this, arguments);
};
}();
this.handleResendOTP = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
var response, retryResponse, retryData, data;
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.prev = 0;
_context3.next = 3;
return fetch('https://user-verification-tawny.vercel.app/api/resend-otp', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
verification_token: _this.jwt
})
});
case 3:
response = _context3.sent;
if (response.ok) {
_context3.next = 20;
break;
}
if (!(response.status === 400)) {
_context3.next = 17;
break;
}
_context3.next = 8;
return fetch('https://user-verification-tawny.vercel.app/api/resend-otp', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
siteId: _this.siteId,
identifier: _this.identifier,
type: _this.verificationType
})
});
case 8:
retryResponse = _context3.sent;
if (retryResponse.ok) {
_context3.next = 11;
break;
}
throw new Error('Failed to resend OTP');
case 11:
_context3.next = 13;
return retryResponse.json();
case 13:
retryData = _context3.sent;
if (retryData) {
_this.jwt = retryData.token;
}
_context3.next = 18;
break;
case 17:
throw new Error('Failed to resend OTP');
case 18:
_context3.next = 24;
break;
case 20:
_context3.next = 22;
return response.json();
case 22:
data = _context3.sent;
if (data) {
_this.jwt = data.token;
}
case 24:
// Reset and start the timer again
if (_this.resendTimer) {
clearInterval(_this.resendTimer);
}
_this.startResendTimer();
_context3.next = 31;
break;
case 28:
_context3.prev = 28;
_context3.t0 = _context3["catch"](0);
_this.printError(_context3.t0 instanceof Error ? _context3.t0.message : 'An unknown error occurred');
case 31:
case "end":
return _context3.stop();
}
}, _callee3, null, [[0, 28]]);
}));
this.handleOTPVerification = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
var otpInput, otp, _this$dialog2, response, signature, successEvent;
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
otpInput = document.querySelector('#dev-otp-input');
otp = otpInput == null ? void 0 : otpInput.value;
if (!(!otp || otp.length !== 6)) {
_context4.next = 5;
break;
}
_this.showError('Invalid OTP');
return _context4.abrupt("return");
case 5:
if (_this.jwt) {
_context4.next = 8;
break;
}
_this.showError('Verification token is missing');
return _context4.abrupt("return");
case 8:
_context4.prev = 8;
_context4.next = 11;
return fetch('https://user-verification-tawny.vercel.app/api/verify-otp', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
verification_code: otp,
verification_token: _this.jwt
})
});
case 11:
response = _context4.sent;
if (response.ok) {
_context4.next = 17;
break;
}
if (!(response.status === 401)) {
_context4.next = 16;
break;
}
_this.showError('Invalid OTP');
return _context4.abrupt("return");
case 16:
throw new Error('OTP verification failed');
case 17:
_context4.next = 19;
return response.json();
case 19:
signature = _context4.sent.verification_signature;
_this.hideError();
(_this$dialog2 = _this.dialog) == null || _this$dialog2.close();
successEvent = new CustomEvent('dev-otp-verified', {
detail: {
verified: true,
signature: signature
}
});
document.dispatchEvent(successEvent);
_context4.next = 29;
break;
case 26:
_context4.prev = 26;
_context4.t0 = _context4["catch"](8);
_this.printError(_context4.t0 instanceof Error ? _context4.t0.message : 'An unknown error occurred');
case 29:
case "end":
return _context4.stop();
}
}, _callee4, null, [[8, 26]]);
}));
this.siteId = null;
this.jwt = null;
this.dialog = null;
this.styles = null;
this.resendTimer = null;
this.identifier = null;
this.verificationType = null;
}
var _proto = DevOTPImpl.prototype;
_proto.fetchThemeConfig = /*#__PURE__*/function () {
var _fetchThemeConfig = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
var response, responseData, colors;
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
_context5.prev = 0;
_context5.next = 3;
return fetch("https://user-verification-tawny.vercel.app/api/get-theme/" + this.siteId);
case 3:
response = _context5.sent;
if (!(!response || !response.ok)) {
_context5.next = 6;
break;
}
throw new Error("Failed to fetch theme configuration: " + (response == null ? void 0 : response.status));
case 6:
_context5.next = 8;
return response.json();
case 8:
responseData = _context5.sent;
console.log('Theme API Response:', responseData);
if (!(!responseData || !responseData.data || !responseData.data.colors)) {
_context5.next = 12;
break;
}
throw new Error('Invalid theme configuration response format');
case 12:
// Map the API colors to our component styles
colors = responseData.data.colors;
return _context5.abrupt("return", {
dialog: {
padding: '20px',
borderRadius: '8px',
border: 'none',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
backdrop: 'rgba(0, 0, 0, 0.5)',
background: colors.cardBackground || '#FFFFFF'
},
input: {
padding: '8px',
fontSize: '16px',
border: '1px solid #ccc',
borderRadius: '4px',
color: colors.text || '#353a40',
background: colors.background || '#F9FAFB'
},
verifyButton: {
// Primary color for verify button
background: colors.primary || '#cc14ff',
color: '#FFFFFF',
padding: '8px 16px',
borderRadius: '4px',
border: 'none',
display: 'none' // Initially hidden
},
cancelButton: {
// Cancel button colors
background: colors.cancelBackground || '#FFFFFF',
color: colors.cancelButton || '#1dc11a',
padding: '8px 16px',
borderRadius: '4px',
border: "1px solid " + (colors.cancelButton || '#1dc11a')
},
resendButton: {
// Resend button colors
background: colors.background || '#F9FAFB',
color: colors.resendButton || '#4B5563',
padding: '8px 16px',
borderRadius: '4px',
border: "1px solid " + (colors.resendButton || '#4B5563')
},
errorMessage: {
color: colors.error || '#EF4444',
fontSize: '14px',
marginTop: '8px',
textAlign: 'center'
},
successMark: {
color: colors.success || '#1dc11a',
fontSize: '20px',
marginLeft: '8px',
display: 'none'
}
});
case 16:
_context5.prev = 16;
_context5.t0 = _context5["catch"](0);
console.error('Theme fetch error:', _context5.t0);
this.printError("Failed to fetch theme configuration: " + _context5.t0.message);
return _context5.abrupt("return", this.getDefaultTheme());
case 21:
case "end":
return _context5.stop();
}
}, _callee5, this, [[0, 16]]);
}));
function fetchThemeConfig() {
return _fetchThemeConfig.apply(this, arguments);
}
return fetchThemeConfig;
}();
_proto.getDefaultTheme = function getDefaultTheme() {
// Return default theme on error
return {
dialog: {
padding: '20px',
borderRadius: '8px',
border: 'none',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
backdrop: 'rgba(0, 0, 0, 0.5)',
background: '#FFFFFF'
},
input: {
padding: '8px',
fontSize: '16px',
border: '1px solid #ccc',
borderRadius: '4px',
color: '#353a40',
background: '#F9FAFB'
},
verifyButton: {
background: '#cc14ff',
color: '#FFFFFF',
padding: '8px 16px',
borderRadius: '4px',
border: 'none'
},
cancelButton: {
background: '#FFFFFF',
color: '#1dc11a',
padding: '8px 16px',
borderRadius: '4px',
border: '1px solid #1dc11a'
},
resendButton: {
background: '#F9FAFB',
color: '#4B5563',
padding: '8px 16px',
borderRadius: '4px',
border: '1px solid #4B5563'
},
errorMessage: {
color: '#EF4444',
fontSize: '14px',
marginTop: '8px',
textAlign: 'center'
},
successMark: {
color: '#1dc11a',
fontSize: '20px',
marginLeft: '8px',
display: 'none'
}
};
};
return DevOTPImpl;
}(); // Create single instance
var devOTP = /*#__PURE__*/new DevOTPImpl();
// Export global initialization function
window.devInit = function (apiKey) {
var count = 0;
var _checkRender = function checkRender() {
if (document.querySelector('[data-verify="email"]') || document.querySelector('[data-verify="phone"]')) {
devOTP.init(apiKey);
} else {
if (count > 5) {
devOTP.printError('Unable to find required input email');
throw new Error('FAILED to initialize');
}
count++;
setTimeout(_checkRender, 100);
}
};
window.addEventListener('load', _checkRender);
};
//# sourceMappingURL=user-verification.cjs.development.js.map