playkit-sdk 1.1.3-beta.4 → 1.1.4-beta

package/dist/playkit-sdk.cjs.js

@@ -1,5 +1,5 @@
 /**
- * playkit-sdk v1.1.3-beta.4
+ * playkit-sdk v1.1.4-beta
  * PlayKit SDK for JavaScript
  * @license SEE LICENSE IN LICENSE
  */
@@ -311,6 +311,7 @@ class AuthFlowManager extends EventEmitter {
         this.identifierPanel = null;
         this.verificationPanel = null;
         this.loadingOverlay = null;
+        this.otpInstance = null;
         // @ts-ignore - replaced at build time
         this.baseURL = baseURL || "https://playkit.agentlandlab.com";
         this.currentLanguage = this.detectLanguage();
@@ -441,12 +442,12 @@ class AuthFlowManager extends EventEmitter {
 
           <div class="playkit-auth-input-group">
             <div class="playkit-code-inputs">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="0">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="1">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="2">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="3">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="4">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="5">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="0">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="1">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="2">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="3">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="4">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="5">
             </div>
           </div>
 
@@ -463,8 +464,9 @@ class AuthFlowManager extends EventEmitter {
         </div>
       </div>
     `;
-        // Add styles
+        // Add styles and load VanillaOTP
         this.addStyles();
+        this.loadVanillaOTP();
         // Append to body
         document.body.appendChild(this.modal);
         // Get references
@@ -474,6 +476,18 @@ class AuthFlowManager extends EventEmitter {
         // Setup event listeners
         this.setupEventListeners();
     }
+    /**
+     * Load VanillaOTP library
+     */
+    loadVanillaOTP() {
+        // Check if VanillaOTP is already loaded
+        if (window.VanillaOTP)
+            return;
+        // Inject VanillaOTP script
+        const script = document.createElement('script');
+        script.textContent = `"use strict";var VanillaOTP=function(t,e=null){if(this.emptyChar=" ","string"==typeof t)this.container=document.querySelector(t);else{if(!(t instanceof Element))return;this.container=t}e&&("string"==typeof e?this.updateTo=document.querySelector(e)||null:e instanceof Element?this.updateTo=e:this.updateTo=null),this.inputs=Array.from(this.container.querySelectorAll("input[type=text], input[type=number], input[type=password]"));let n=this,u=n.inputs.length;for(let i=0;i<u;i++){let l=n.inputs[i];l.addEventListener("input",function(){if(isNaN(l.value))return l.value=l.dataset.otpInputRestore||"",n._updateValue();if(0==l.value.length)return n._saveInputValue(i);if(1==l.value.length){n._saveInputValue(i),n._updateValue(),i+1<u&&n.inputs[i+1].focus();return}if(i==u-1)return n._setInputValue(i,l.value);let t=l.value.split("");for(let e=0;e<t.length&&!(e+i>=u);e++)n._setInputValue(e+i,t[e]);let a=Math.min(u-1,i+t.length);n.inputs[a].focus()}),l.addEventListener("keydown",function(t){if(8==t.keyCode&&""==l.value&&0!=i){n._setInputValue(i-1,""),n.inputs[i-1].focus();return}if(46==t.keyCode&&i!=u-1){let e=l.selectionStart||0;for(let a=i+e;a<u-1;a++)n._setInputValue(a,n.inputs[a+1].value);n._setInputValue(u-1,""),l.selectionStart&&(l.selectionStart=e),t.preventDefault();return}if(37==t.keyCode&&(null==l.selectionStart||0==l.selectionStart)){i>0&&(t.preventDefault(),n.inputs[i-1].focus(),n.inputs[i-1].select());return}if(39==t.keyCode&&(null==l.selectionStart||l.selectionEnd==l.value.length)){i+1<u&&(t.preventDefault(),n.inputs[i+1].focus(),n.inputs[i+1].select());return}})}};VanillaOTP.prototype.setEmptyChar=function(t){this.emptyChar=t},VanillaOTP.prototype.getValue=function(){let t="",e=this;return this.inputs.forEach(function(n){t+=""==n.value?e.emptyChar:n.value}),t},VanillaOTP.prototype.setValue=function(t){if(isNaN(t)){console.error("Please enter an integer value.");return}let e=(t=""+t).split("");for(let n=0;n<this.inputs.length;n++)this._setInputValue(n,e[n]||"")},VanillaOTP.prototype._setInputValue=function(t,e){return isNaN(e)?console.error("Please enter an integer value."):this.inputs[t]?void(this.inputs[t].value=String(e).substring(0,1),this._saveInputValue(t),this._updateValue()):console.error("Index not found.")},VanillaOTP.prototype._saveInputValue=function(t,e){if(!this.inputs[t])return console.error("Index not found.");this.inputs[t].dataset.otpInputRestore=e||this.inputs[t].value},VanillaOTP.prototype._updateValue=function(){this.updateTo&&(this.updateTo.value=this.getValue())};`;
+        document.head.appendChild(script);
+    }
     /**
      * Add CSS styles to the page
      */
@@ -653,6 +667,13 @@ class AuthFlowManager extends EventEmitter {
         padding: 0 !important;
         transition: border-color 0.15s ease, box-shadow 0.15s ease;
         background: #FFFFFF;
+        -moz-appearance: textfield;
+      }
+
+      .playkit-code-input::-webkit-outer-spin-button,
+      .playkit-code-input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
       }
 
       .playkit-code-input:hover {
@@ -762,7 +783,7 @@ class AuthFlowManager extends EventEmitter {
      * Setup event listeners
      */
     setupEventListeners() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         // Auth type toggle
         const emailRadio = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelector('input[value="email"]');
         const phoneRadio = (_b = this.modal) === null || _b === void 0 ? void 0 : _b.querySelector('input[value="phone"]');
@@ -797,44 +818,23 @@ class AuthFlowManager extends EventEmitter {
                 this.onSendCodeClicked();
             }
         });
-        // Code inputs
-        const codeInputs = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.playkit-code-input');
-        codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input, index) => {
-            input.addEventListener('input', (e) => {
-                const target = e.target;
-                // Only allow digits and limit to 1 character
-                const value = target.value.replace(/\D/g, '');
-                target.value = value.slice(0, 1);
-                // Move to next input if a digit was entered
-                if (target.value.length === 1 && index < codeInputs.length - 1) {
-                    codeInputs[index + 1].focus();
-                }
-                // Auto-submit when all 6 digits entered
-                if (index === 5 && target.value.length === 1) {
-                    this.onVerifyClicked();
-                }
-            });
-            input.addEventListener('keydown', (e) => {
-                if (e.key === 'Backspace' && !input.value && index > 0) {
-                    codeInputs[index - 1].focus();
-                }
-            });
-            // Paste support
-            input.addEventListener('paste', (e) => {
-                var _a;
-                e.preventDefault();
-                const pastedData = ((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
-                const digits = pastedData.replace(/\D/g, '').slice(0, 6);
-                digits.split('').forEach((digit, i) => {
-                    if (codeInputs[i]) {
-                        codeInputs[i].value = digit;
+        // Initialize VanillaOTP for code inputs
+        const codeInputsContainer = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelector('.playkit-code-inputs');
+        if (codeInputsContainer && window.VanillaOTP) {
+            this.otpInstance = new window.VanillaOTP(codeInputsContainer);
+            // Auto-submit when all 6 digits entered
+            const codeInputs = (_d = this.modal) === null || _d === void 0 ? void 0 : _d.querySelectorAll('.playkit-code-input');
+            codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input, index) => {
+                input.addEventListener('input', () => {
+                    // Check if all inputs are filled
+                    const allFilled = Array.from(codeInputs).every(inp => inp.value.length === 1);
+                    if (allFilled) {
+                        // Small delay to ensure the last input is processed
+                        setTimeout(() => this.onVerifyClicked(), 100);
                     }
                 });
-                if (digits.length === 6) {
-                    this.onVerifyClicked();
-                }
             });
-        });
+        }
         // Verify button
         const verifyBtn = document.getElementById('playkit-verify-btn');
         verifyBtn === null || verifyBtn === void 0 ? void 0 : verifyBtn.addEventListener('click', () => this.onVerifyClicked());
@@ -887,9 +887,16 @@ class AuthFlowManager extends EventEmitter {
     async onVerifyClicked() {
         var _a;
         this.clearError('verify');
-        const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
-        const code = Array.from(codeInputs).map((input) => input.value).join('');
-        if (code.length !== 6) {
+        // Get code from VanillaOTP instance or fallback to manual collection
+        let code = '';
+        if (this.otpInstance) {
+            code = this.otpInstance.getValue().replace(/\s/g, ''); // Remove spaces
+        }
+        else {
+            const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
+            code = Array.from(codeInputs).map((input) => input.value).join('');
+        }
+        if (code.length !== 6 || !/^\d{6}$/.test(code)) {
             this.showError(this.t('enterAllDigits'), 'verify');
             return;
         }
@@ -978,8 +985,13 @@ class AuthFlowManager extends EventEmitter {
         if (this.verificationPanel)
             this.verificationPanel.style.display = 'none';
         // Clear code inputs
-        const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
-        codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input) => (input.value = ''));
+        if (this.otpInstance) {
+            this.otpInstance.setValue(''); // Clear all inputs using VanillaOTP
+        }
+        else {
+            const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
+            codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input) => (input.value = ''));
+        }
     }
     showVerificationPanel() {
         var _a;