UNPKG

dripsender-otp-widget

Version:

A customizable OTP verification widget for Dripsender

8 lines (7 loc) 33.9 kB
(function(M,H){typeof exports=="object"&&typeof module<"u"?module.exports=H():typeof define=="function"&&define.amd?define(H):(M=typeof globalThis<"u"?globalThis:M||self,M.DripsenderOTP=H())})(this,function(){"use strict";var ue=Object.defineProperty;var fe=(M,H,L)=>H in M?ue(M,H,{enumerable:!0,configurable:!0,writable:!0,value:L}):M[H]=L;var at=(M,H,L)=>(fe(M,typeof H!="symbol"?H+"":H,L),L);function M(){}function H(t){return t()}function L(){return Object.create(null)}function W(t){t.forEach(H)}function lt(t){return typeof t=="function"}function zt(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}function Pt(t){return Object.keys(t).length===0}function c(t,e){t.appendChild(e)}function jt(t,e,r){const o=Tt(t);if(!o.getElementById(e)){const i=m("style");i.id=e,i.textContent=r,Ot(o,i)}}function Tt(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function Ot(t,e){return c(t.head||t,e),e.sheet}function C(t,e,r){t.insertBefore(e,r||null)}function O(t){t.parentNode&&t.parentNode.removeChild(t)}function Et(t,e){for(let r=0;r<t.length;r+=1)t[r]&&t[r].d(e)}function m(t){return document.createElement(t)}function Z(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function D(t){return document.createTextNode(t)}function S(){return D(" ")}function Mt(){return D("")}function A(t,e,r,o){return t.addEventListener(e,r,o),()=>t.removeEventListener(e,r,o)}function st(t){return function(e){return e.preventDefault(),t.call(this,e)}}function ct(t){return function(e){return e.stopPropagation(),t.call(this,e)}}function n(t,e,r){r==null?t.removeAttribute(e):t.getAttribute(e)!==r&&t.setAttribute(e,r)}function Ct(t){return Array.from(t.childNodes)}function $(t,e){e=""+e,t.data!==e&&(t.data=e)}function dt(t,e){t.value=e??""}function ut(t,e,r,o){r==null?t.style.removeProperty(e):t.style.setProperty(e,r,o?"important":"")}let F;function q(t){F=t}function St(){if(!F)throw new Error("Function called outside component initialization");return F}function Ht(t){St().$$.on_mount.push(t)}const Y=[],ft=[];let R=[];const pt=[],It=Promise.resolve();let rt=!1;function Bt(){rt||(rt=!0,It.then(wt))}function ot(t){R.push(t)}const nt=new Set;let U=0;function wt(){if(U!==0)return;const t=F;do{try{for(;U<Y.length;){const e=Y[U];U++,q(e),Nt(e.$$)}}catch(e){throw Y.length=0,U=0,e}for(q(null),Y.length=0,U=0;ft.length;)ft.pop()();for(let e=0;e<R.length;e+=1){const r=R[e];nt.has(r)||(nt.add(r),r())}R.length=0}while(Y.length);for(;pt.length;)pt.pop()();rt=!1,nt.clear(),q(t)}function Nt(t){if(t.fragment!==null){t.update(),W(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(ot)}}function At(t){const e=[],r=[];R.forEach(o=>t.indexOf(o)===-1?e.push(o):r.push(o)),r.forEach(o=>o()),R=e}const Dt=new Set;function Lt(t,e){t&&t.i&&(Dt.delete(t),t.i(e))}function mt(t){return(t==null?void 0:t.length)!==void 0?t:Array.from(t)}function Wt(t,e,r){const{fragment:o,after_update:i}=t.$$;o&&o.m(e,r),ot(()=>{const s=t.$$.on_mount.map(H).filter(lt);t.$$.on_destroy?t.$$.on_destroy.push(...s):W(s),t.$$.on_mount=[]}),i.forEach(ot)}function Vt(t,e){const r=t.$$;r.fragment!==null&&(At(r.after_update),W(r.on_destroy),r.fragment&&r.fragment.d(e),r.on_destroy=r.fragment=null,r.ctx=[])}function Kt(t,e){t.$$.dirty[0]===-1&&(Y.push(t),Bt(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function Yt(t,e,r,o,i,s,p=null,d=[-1]){const f=F;q(t);const u=t.$$={fragment:null,ctx:[],props:s,update:M,not_equal:i,bound:L(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(f?f.$$.context:[])),callbacks:L(),dirty:d,skip_bound:!1,root:e.target||f.$$.root};p&&p(u.root);let h=!1;if(u.ctx=r?r(t,e.props||{},(w,b,...l)=>{const g=l.length?l[0]:b;return u.ctx&&i(u.ctx[w],u.ctx[w]=g)&&(!u.skip_bound&&u.bound[w]&&u.bound[w](g),h&&Kt(t,w)),b}):[],u.update(),h=!0,W(u.before_update),u.fragment=o?o(u.ctx):!1,e.target){if(e.hydrate){const w=Ct(e.target);u.fragment&&u.fragment.l(w),w.forEach(O)}else u.fragment&&u.fragment.c();e.intro&&Lt(t.$$.fragment),Wt(t,e.target,e.anchor),wt()}q(f)}class Rt{constructor(){at(this,"$$");at(this,"$$set")}$destroy(){Vt(this,1),this.$destroy=M}$on(e,r){if(!lt(r))return M;const o=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return o.push(r),()=>{const i=o.indexOf(r);i!==-1&&o.splice(i,1)}}$set(e){this.$$set&&!Pt(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}const Ut="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(Ut);function Xt(t){jt(t,"svelte-ujil1y",`body{margin:0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;background-color:#f9fafb}@keyframes svelte-ujil1y-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}@keyframes svelte-ujil1y-success-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(79, 209, 197, 0)}50%{transform:scale(1.03);box-shadow:0 0 20px rgba(79, 209, 197, 0.5)}}input[type="text"].svelte-ujil1y,input[type="tel"].svelte-ujil1y{transition:border-color 0.2s ease}button.svelte-ujil1y{position:relative;overflow:hidden}.otp-primary-button.svelte-ujil1y{appearance:none !important;-webkit-appearance:none !important;display:block !important;width:100% !important;padding:1rem !important;border:0 !important;border-radius:0.75rem !important;background-color:#3b82f6 !important;background-image:linear-gradient(to right, #3b82f6, #9333ea) !important;color:#ffffff !important;font-weight:600 !important;text-align:center !important;cursor:pointer !important;opacity:1 !important}.otp-primary-button.svelte-ujil1y:disabled{cursor:default !important;opacity:0.7 !important}button.svelte-ujil1y::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255, 255, 255, 0.5);opacity:0;border-radius:100%;transform:scale(1, 1) translate(-50%);transform-origin:50% 50%}@keyframes svelte-ujil1y-ripple{0%{transform:scale(0, 0);opacity:0.5}100%{transform:scale(20, 20);opacity:0}}button.svelte-ujil1y:focus:not(:active)::after{animation:svelte-ujil1y-ripple 1s ease-out}`)}function bt(t,e,r){const o=t.slice();return o[30]=e[r],o[32]=r,o}function gt(t){let e,r,o,i,s,p,d,f,u,h,w,b;function l(x,j){return x[3]?Ft:qt}let g=l(t),v=g(t),k=t[5]&&yt(t),_=t[6]&&vt(t);return{c(){e=m("div"),r=m("div"),o=m("div"),i=m("div"),s=m("div"),p=m("h2"),d=D(t[0]),f=S(),u=m("div"),h=S(),v.c(),w=S(),k&&k.c(),b=S(),_&&_.c(),n(p,"class","text-2xl font-bold text-gray-800 mb-2"),n(u,"class","w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"),n(s,"class","text-center mb-8"),n(i,"class","bg-white p-8 rounded-2xl"),n(o,"class","bg-gradient-to-br from-blue-500 to-purple-600 p-1 rounded-2xl shadow-2xl"),n(r,"class","modal-content relative w-full max-w-md transform transition-all duration-300 ease-in-out scale-100 translate-y-0"),n(e,"class","fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm")},m(x,j){C(x,e,j),c(e,r),c(r,o),c(o,i),c(i,s),c(s,p),c(p,d),c(s,f),c(s,u),c(i,h),v.m(i,null),c(i,w),k&&k.m(i,null),c(i,b),_&&_.m(i,null)},p(x,j){j[0]&1&&$(d,x[0]),g===(g=l(x))&&v?v.p(x,j):(v.d(1),v=g(x),v&&(v.c(),v.m(i,w))),x[5]?k?k.p(x,j):(k=yt(x),k.c(),k.m(i,b)):k&&(k.d(1),k=null),x[6]?_?_.p(x,j):(_=vt(x),_.c(),_.m(i,null)):_&&(_.d(1),_=null)},d(x){x&&O(e),v.d(),k&&k.d(),_&&_.d()}}}function Ft(t){let e,r,o,i,s,p,d,f,u,h,w,b,l,g,v,k,_,x,j=mt(t[2]),T=[];for(let y=0;y<j.length;y+=1)T[y]=ht(bt(t,j,y));function Q(y,B){return y[4]?Gt:Jt}let V=Q(t),I=V(t);return{c(){e=m("div"),r=m("label"),r.textContent="Masukkan Kode OTP",o=S(),i=m("p"),s=D("Kode OTP telah dikirim ke nomor "),p=D(t[1]),d=S(),f=m("div");for(let y=0;y<T.length;y+=1)T[y].c();u=S(),h=m("div"),w=m("button"),w.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg> Ubah Nomor HP`,b=S(),l=m("button"),l.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg> Kirim Ulang Kode`,g=S(),v=m("button"),I.c(),n(r,"class","block text-sm font-medium text-gray-700 mb-2"),n(i,"class","text-xs text-gray-500 mb-4"),n(f,"class","flex justify-between mb-6"),n(w,"type","button"),n(w,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-ujil1y"),n(w,"aria-label","Ubah Nomor HP"),n(l,"type","button"),n(l,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-ujil1y"),n(l,"aria-label","Kirim Ulang Kode"),n(h,"class","flex justify-between text-sm"),n(e,"class","mb-6"),n(e,"id","otp-container"),n(v,"type","button"),v.disabled=k=t[4]||t[2].some(kt),n(v,"class","otp-primary-button w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-ujil1y")},m(y,B){C(y,e,B),c(e,r),c(e,o),c(e,i),c(i,s),c(i,p),c(e,d),c(e,f);for(let z=0;z<T.length;z+=1)T[z]&&T[z].m(f,null);c(e,u),c(e,h),c(h,w),c(h,b),c(h,l),C(y,g,B),C(y,v,B),I.m(v,null),_||(x=[A(w,"click",t[25]),A(l,"click",t[26]),A(v,"click",ct(st(t[13])))],_=!0)},p(y,B){if(B[0]&2&&$(p,y[1]),B[0]&23812){j=mt(y[2]);let z;for(z=0;z<j.length;z+=1){const et=bt(y,j,z);T[z]?T[z].p(et,B):(T[z]=ht(et),T[z].c(),T[z].m(f,null))}for(;z<T.length;z+=1)T[z].d(1);T.length=j.length}V!==(V=Q(y))&&(I.d(1),I=V(y),I&&(I.c(),I.m(v,null))),B[0]&20&&k!==(k=y[4]||y[2].some(kt))&&(v.disabled=k)},d(y){y&&(O(e),O(g),O(v)),Et(T,y),I.d(),_=!1,W(x)}}}function qt(t){let e,r,o,i,s,p,d,f,u;function h(l,g){return l[4]?Zt:Qt}let w=h(t),b=w(t);return{c(){e=m("div"),r=m("label"),r.textContent="Nomor HP",o=S(),i=m("div"),s=m("input"),p=S(),d=m("button"),b.c(),n(r,"for","phone"),n(r,"class","block text-sm font-medium text-gray-700 mb-2"),n(s,"type","tel"),n(s,"id","phone"),n(s,"placeholder","Masukkan nomor HP Anda"),n(s,"autocomplete","off"),n(s,"class","w-full p-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-ujil1y"),ut(s,"color","#111827",1),n(i,"class","relative"),n(e,"class","mb-6"),n(e,"id","phone-container"),n(d,"type","button"),d.disabled=t[4],n(d,"class","otp-primary-button w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-ujil1y")},m(l,g){C(l,e,g),c(e,r),c(e,o),c(e,i),c(i,s),dt(s,t[1]),C(l,p,g),C(l,d,g),b.m(d,null),f||(u=[A(s,"input",t[20]),A(s,"keydown",t[21]),A(d,"click",ct(st(t[9])))],f=!0)},p(l,g){g[0]&2&&dt(s,l[1]),w!==(w=h(l))&&(b.d(1),b=w(l),b&&(b.c(),b.m(d,null))),g[0]&16&&(d.disabled=l[4])},d(l){l&&(O(e),O(p),O(d)),b.d(),f=!1,W(u)}}}function ht(t){let e,r,o,i,s,p,d,f,u;function h(...l){return t[22](t[32],...l)}function w(...l){return t[23](t[32],...l)}function b(){return t[24](t[32])}return{c(){e=m("div"),r=m("input"),i=S(),s=m("div"),d=S(),n(r,"type","text"),n(r,"id","otp-"+t[32]),n(r,"maxlength","1"),n(r,"inputmode","numeric"),n(r,"autocomplete","off"),r.value=o=t[30],n(r,"class","w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-ujil1y"),ut(r,"color","#111827",1),n(s,"class",p="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(t[8]===t[32]?"bg-blue-500":"bg-transparent")),n(e,"class","relative")},m(l,g){C(l,e,g),c(e,r),c(e,i),c(e,s),c(e,d),f||(u=[A(r,"input",h),A(r,"keydown",w),A(r,"paste",t[14]),A(r,"focus",b)],f=!0)},p(l,g){t=l,g[0]&4&&o!==(o=t[30])&&r.value!==o&&(r.value=o),g[0]&256&&p!==(p="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(t[8]===t[32]?"bg-blue-500":"bg-transparent"))&&n(s,"class",p)},d(l){l&&O(e),f=!1,W(u)}}}function Jt(t){let e;return{c(){e=D("Verifikasi")},m(r,o){C(r,e,o)},d(r){r&&O(e)}}}function Gt(t){let e;return{c(){e=m("div"),e.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Memverifikasi...`,n(e,"class","flex items-center justify-center")},m(r,o){C(r,e,o)},d(r){r&&O(e)}}}function Qt(t){let e;return{c(){e=D("Kirim Kode OTP")},m(r,o){C(r,e,o)},d(r){r&&O(e)}}}function Zt(t){let e;return{c(){e=m("div"),e.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Mengirim...`,n(e,"class","flex items-center justify-center")},m(r,o){C(r,e,o)},d(r){r&&O(e)}}}function yt(t){let e,r,o,i,s,p;return{c(){e=m("div"),r=Z("svg"),o=Z("path"),i=S(),s=m("span"),p=D(t[5]),n(o,"fill-rule","evenodd"),n(o,"d","M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"),n(o,"clip-rule","evenodd"),n(r,"xmlns","http://www.w3.org/2000/svg"),n(r,"class","h-5 w-5 mr-2 flex-shrink-0"),n(r,"viewBox","0 0 20 20"),n(r,"fill","currentColor"),n(e,"class","mt-4 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md flex items-start")},m(d,f){C(d,e,f),c(e,r),c(r,o),c(e,i),c(e,s),c(s,p)},p(d,f){f[0]&32&&$(p,d[5])},d(d){d&&O(e)}}}function vt(t){let e,r,o,i,s,p;return{c(){e=m("div"),r=Z("svg"),o=Z("path"),i=S(),s=m("span"),p=D(t[6]),n(o,"fill-rule","evenodd"),n(o,"d","M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"),n(o,"clip-rule","evenodd"),n(r,"xmlns","http://www.w3.org/2000/svg"),n(r,"class","h-5 w-5 mr-2 flex-shrink-0"),n(r,"viewBox","0 0 20 20"),n(r,"fill","currentColor"),n(e,"class","mt-4 p-3 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-md flex items-start")},m(d,f){C(d,e,f),c(e,r),c(r,o),c(e,i),c(e,s),c(s,p)},p(d,f){f[0]&64&&$(p,d[6])},d(d){d&&O(e)}}}function $t(t){let e,r=t[7]&&gt(t);return{c(){r&&r.c(),e=Mt()},m(o,i){r&&r.m(o,i),C(o,e,i)},p(o,i){o[7]?r?r.p(o,i):(r=gt(o),r.c(),r.m(e.parentNode,e)):r&&(r.d(1),r=null)},i:M,o:M,d(o){o&&O(e),r&&r.d(o)}}}function tt(t){const e=document.getElementById(t);e&&(e.classList.add("shake"),setTimeout(()=>{e.classList.remove("shake")},500))}const kt=t=>t==="";function te(t,e,r){let{title:o="Verifikasi OTP"}=e,{vp_url:i=""}=e,{votp_url:s=""}=e,{notRegisteredMessage:p="Nomor HP tidak ditemukan"}=e,{rememberHours:d=0}=e,{onVerified:f=()=>{}}=e,u="",h=["","","","",""];h.length;let w=!1,b=!1,l="",g="",v=!0,k=0;const _="otp_verified_"+location.hostname,x="otp_expiry_"+location.hostname;if(d>0){const a=localStorage.getItem(_),P=parseInt(localStorage.getItem(x)||"0");a==="true"&&Date.now()<P&&(v=!1)}Ht(()=>{console.log("[OTP Widget] Mounted",{vp_url:i,votp_url:s,title:o,rememberHours:d}),!v&&f&&f()});async function j(a){if(a&&(a.preventDefault(),a.stopPropagation()),console.log("[OTP Widget] handlePhoneSubmit called"),!u){r(5,l="Silakan masukkan nomor HP"),tt("phone-container");return}r(5,l=""),r(4,b=!0);try{const E=await(await fetch(i,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:u})})).json();console.log("[OTP Widget] Phone submit response:",E),E.exists?(r(4,b=!1),r(3,w=!0),r(6,g=`Kode OTP telah dikirim ke ${u}`),setTimeout(()=>{var N;(N=document.getElementById("otp-0"))==null||N.focus()},300)):(r(4,b=!1),r(5,l=p),tt("phone-container"))}catch(P){console.error("[OTP Widget] Phone submit error:",P),r(4,b=!1),r(5,l="Terjadi kesalahan, coba lagi")}}function T(a,P){var N;const E=P.target.value;if(!/^\d*$/.test(E)){P.target.value=h[a];return}r(2,h[a]=E.slice(-1),h),E&&a<4&&((N=document.getElementById(`otp-${a+1}`))==null||N.focus(),r(8,k=a+1)),h.every(K=>K!=="")&&a===4&&I()}function Q(a,P){var E;P.key==="Backspace"&&!h[a]&&a>0&&((E=document.getElementById(`otp-${a-1}`))==null||E.focus(),r(8,k=a-1))}function V(a){r(8,k=a)}async function I(a){a&&(a.preventDefault(),a.stopPropagation()),console.log("[OTP Widget] verifyOtp called");const P=h.join("");if(P.length!==5){r(5,l="Silakan masukkan kode OTP 5 digit"),tt("otp-container");return}r(5,l=""),r(4,b=!0);try{const N=await(await fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:u,otp:P})})).json();if(console.log("[OTP Widget] Verify response:",N),N.status=="success"){r(4,b=!1),r(6,g="Verifikasi berhasil!");const K=document.querySelector(".modal-content");if(K&&K.classList.add("success-animation"),r(7,v=!1),d>0){const it=d*60*60*1e3;localStorage.setItem(_,"true"),localStorage.setItem(x,(Date.now()+it).toString())}f&&f(),console.log("[OTP Widget] Verification successful, modal hidden")}else r(4,b=!1),r(5,l="Kode OTP tidak valid"),tt("otp-container")}catch(E){console.error("[OTP Widget] Verify error:",E),r(4,b=!1),r(5,l="Terjadi kesalahan, coba lagi")}}function y(a){var K;a.preventDefault();const P=a.clipboardData.getData("text");if(!/^\d+$/.test(P))return;const E=P.slice(0,5).split("");E.forEach((it,_t)=>{_t<5&&r(2,h[_t]=it,h)});const N=Math.min(E.length,4);(K=document.getElementById(`otp-${N}`))==null||K.focus(),r(8,k=N),E.length===5&&I()}function B(){u=this.value,r(1,u)}const z=a=>{a.key==="Enter"&&(a.preventDefault(),j())},et=(a,P)=>T(a,P),le=(a,P)=>Q(a,P),se=a=>V(a),ce=()=>{r(3,w=!1),r(6,g="")},de=()=>{r(6,g=""),j()};return t.$$set=a=>{"title"in a&&r(0,o=a.title),"vp_url"in a&&r(15,i=a.vp_url),"votp_url"in a&&r(16,s=a.votp_url),"notRegisteredMessage"in a&&r(17,p=a.notRegisteredMessage),"rememberHours"in a&&r(18,d=a.rememberHours),"onVerified"in a&&r(19,f=a.onVerified)},[o,u,h,w,b,l,g,v,k,j,T,Q,V,I,y,i,s,p,d,f,B,z,et,le,se,ce,de]}class ee extends Rt{constructor(e){super(),Yt(this,e,te,$t,zt,{title:0,vp_url:15,votp_url:16,notRegisteredMessage:17,rememberHours:18,onVerified:19},Xt,[-1,-1])}}const re=`*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-bottom-2{bottom:-.5rem}.left-1\\/2{left:50%}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-ml-1{margin-left:-.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.h-1{height:.25rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-600{--tw-gradient-to: #9333ea var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.success-animation{animation:success-pulse 1.5s ease-in-out}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:text-blue-800:hover{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.disabled\\:transform-none:disabled{transform:none}.disabled\\:opacity-70:disabled{opacity:.7} `,oe=location.hostname==="localhost"||location.hostname==="127.0.0.1"?"http://localhost:6544":"https://api.dripsender.id",X=document.currentScript,xt=(X==null?void 0:X.getAttribute("data-id"))||(X==null?void 0:X.getAttribute("data-key"));let J=null,G=null;function ne(){J=t=>{var r;const e=t.target;e.tagName==="A"&&!((r=e.getAttribute("href"))!=null&&r.startsWith("#"))&&(console.log("[OTP Widget] Blocked link click"),t.preventDefault())},G=t=>(console.log("[OTP Widget] Blocked form submit"),t.preventDefault(),t.stopPropagation(),!1),document.addEventListener("click",J,!0),window.addEventListener("submit",G,!0)}function ie(t){J&&(document.removeEventListener("click",J,!0),J=null),G&&(window.removeEventListener("submit",G,!0),G=null),t&&t.remove(),console.log("[OTP Widget] Cleanup complete, page restored")}function ae(){if(!xt){console.error("[OTP Widget] Missing data-id attribute");return}fetch(`${oe}/api/otp/config/${xt}`).then(t=>t.json()).then(t=>{if(t.error){console.error("[OTP Widget] Config error:",t.error);return}const e=document.createElement("div");e.id="otp-widget-container",e.style.cssText="position: fixed; inset: 0; z-index: 9999;",document.body.appendChild(e);const r=e.attachShadow({mode:"closed"}),o=document.createElement("style");o.textContent=re,r.appendChild(o);const i=document.createElement("div");i.style.cssText="width: 100%; height: 100%;",r.appendChild(i),typeof window<"u"&&ne(),new ee({target:i,props:{vp_url:t.r,votp_url:t.v,title:t.t,rememberHours:t.m||0,onVerified:()=>ie(e)}})}).catch(t=>{console.error("[OTP Widget] Failed to load config:",t)})}return ae(),{}});