if(!customElements.get("remex-auth")){class e extends HTMLElement{constructor(e){super(),this.uniqueSuffix="_"+Math.random().toString(36).substr(2,9),this._config={selector:this,uniqueSuffix:this.uniqueSuffix,i18n:e.i18n||{},styles:e.styles||{},language:e.defaultLanguage||"en",endpoint:`${e.endpoint||""}/rest/v2`,logoUrl:e.logoUrl||!1,popularCountries:e.popularCountries||!1,providers:e.providers||{email:!0,sms:!0},autoLoginAfterRegister:e.autoLoginAfterRegister||!1},this._startLanguage=e.defaultLanguage||"en";const t=this;this.cpl=document.querySelector('meta[name="x-cpl"]')?.getAttribute("content")||"1.0.0",this.config=new Proxy(this._config,{set:(e,s,i)=>(e[s]!==i&&(e[s]=i,"language"==s&&t.translateUI()),!0)}),this.tokenRefreshInterval=3e4,this.tokenRefreshTik=3e4,this.windowIsFocused=!0,this.rendered=!1,this.inizialized=!1,this._transMap={},this.init()}translateUI(){
this.querySelectorAll("i18n").forEach((e=>e.innerHTML=this.trans(this._transMap[e.getAttribute("key")],null,!0)||e.innerHTML)),this.querySelectorAll("[i18n]").forEach((e=>{const t=JSON.parse(e.getAttribute("i18n").replace(/_cm_/g,'"'));for(let s in t){const i=t[s];void 0!==this._transMap[i]&&e.setAttribute(s,this.trans(this._transMap[i],null,!0)||i)}}))}transKey(e){let t=0;if(!e||0===(e??"").length)return t;for(let s=0;s<(e??"").length;s++)t=(t<<5)-t+e.charCodeAt(s),t&=t;return t=t.toString(),t=/-/.test(t)?t.replace("-","N"):"P"+t,this._transMap[t]=e,t}trans(e,t,s=!1){const i=this._config.i18n[this._config.language]||{};let n=void 0!==i[e]?(i[e]??e??"").trim():(e??"").trim();if(void 0!==t)for(var e in t)n=(n?.replace(e,t[e])??"").trim();if(!s){const t=this.transKey(e);return this._transMap[t]=e,`<i18n key="${t}">${(n??"").trim()}</i18n>`}return n.trim()}async loadScript(e){return new Promise(((t,s)=>{const i=document.createElement("script");i.src=e,i.onload=t,i.onerror=s,
document.head.appendChild(i)}))}async recalcFingesprint(){if(void 0===window.FingerprintHandler)if(window.__loadingFp){const e=new Promise((e=>{const t=setInterval((()=>{void 0!==window.FingerprintHandler&&(clearInterval(t),e())}),100)}));await e}else window.__loadingFp=!0,await this.loadScript(`/cdn/${this.cpl}/js/remex/fp.min.js`);this.fingerprint=await window.FingerprintHandler.generateFingerprint(),this.deviceLabel=await window.FingerprintHandler.getSimpleDeviceDescription(),this.dispatchEvent(new CustomEvent("RemexAuthFingerprint",{bubbles:!0,detail:{id:this.fingerprint,label:this.deviceLabel}}))}async init(){if(void 0===window.CookieHandler)if(window.__loadingCookies){const e=new Promise((e=>{const t=setInterval((()=>{void 0!==window.FingerprintHandler&&(clearInterval(t),e())}),100)}));await e}else window.__loadingCookies=!0,await this.loadScript(`/cdn/${this.cpl}/js/remex/cookies.min.js`);this.cookies=window.CookieHandler,await this.recalcFingesprint(),
"undefined"!=typeof jQuery&&void 0===$.fn.mask&&this.loadScript("/cdn/assets/js/jquery.mask.min.js"),document.addEventListener("visibilitychange",(()=>{document.hidden?(this.windowIsFocused=!1,this.tokenRefreshInterval=6e4):(this.windowIsFocused=!0,clearTimeout(this.tokenRefreshTik),this.tokenRefreshTik=setTimeout((()=>this.refreshToken()),1e3),this.tokenRefreshInterval=3e4)})),window.addEventListener("storage",(e=>{"RemexAuthToken"==e.key&&e.newValue&&(localStorage.setItem("RemexAuthToken",e.newValue),this.refreshToken())})),this.tokenRefreshTik=setTimeout((()=>this.refreshToken()),1e3),this.inizialized=!0,this.dispatchEvent(new CustomEvent("RemexAuthInitialized",{bubbles:!0}))}async getUserData(e=!1){if(!this.isConnected())return!1;if(e)try{const e=await fetch(`${this.config.endpoint}/profile`,{method:"GET",headers:await this.buildRequestHeaders()});if(200===e.status)return await e.json()}catch(e){}try{
return JSON.parse(atob((localStorage.getItem("RemexAuthToken")??"").split(":").pop()??"{}"))??!1}catch(e){return!1}}isConnected(){if(document.querySelector('meta[name="utk"]')){if(document.querySelector('meta[name="ub64"]')){const e=()=>{localStorage.setItem("RemexAuthToken",`${document.querySelector('meta[name="utk"]').getAttribute("content")}:${this.fingerprint}:${document.querySelector('meta[name="ub64"]').getAttribute("content")}`),document.querySelector('meta[name="ub64"]').remove()};this.fingerprint?e():setTimeout((async()=>{this.fingerprint=this.fingerprint=await window.FingerprintHandler.generateFingerprint(),e()}),1e3)}return!0}return void 0!==localStorage.getItem("RemexAuthToken")&&"undefined"!=localStorage.getItem("RemexAuthToken")&&!/totp:/.test(localStorage.getItem("RemexAuthToken"))&&(localStorage.getItem("RemexAuthToken")??"").replace(/undefined/gi,"").length>0}getToken(){
return this.isConnected()?document.querySelector('meta[name="utk"]')?document.querySelector('meta[name="utk"]').getAttribute("content"):localStorage.getItem("RemexAuthToken").split(":")[0]:document.querySelector('meta[name="utk"]')?.getAttribute("content")??null}async handleLogout(e){try{await fetch(`${this.config.endpoint}/auth/logout`,{method:"POST",headers:await this.buildRequestHeaders()})}catch(e){}return localStorage.removeItem("RemexAuthToken"),this.dispatchEvent(new CustomEvent("RemexAuthLogout",{bubbles:!0,detail:e})),!0}async sendEmailVerificationCode(e){try{const t=await fetch(`${this.config.endpoint}/auth/verify/email`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({email:e})});if(200===t.status)return await t.json();if(404===t.status)return{success:!1,message:"There is no user in our system with this email"}}catch(e){}return{success:!1,message:"Error sending code to email"}}async handlePasswordReset(e,t,s,i){try{
const n=await fetch(`${this.config.endpoint}/auth/password`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({email:e,password:t,seed:i,resetTotp:s??!1})});if(200===n.status)return await n.json()}catch(e){}return{success:!1,message:"Error updating password"}}async buildRequestHeaders(){const e=this.cpl.length?this.cpl:this.cookies.fetch("x-cpl")??"1.0.0",t={"Content-Type":"application/json","x-fingerprint":this.fingerprint,"x-device":this.deviceLabel,"v-compilation":e,"x-cpl":e,"x-signature":await this.generateHmacSignature(this.fingerprint,e)};return this.isConnected()&&(t["X-Refresh-Token"]=`${localStorage.getItem("RemexAuthToken")}`),t}async handleLogin(e,t,s){try{const i=await fetch(`${this.config.endpoint}/auth/login`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({username:e,password:t,seed:s})});if(200===i.status){const e=await i.json();return localStorage.setItem("RemexAuthToken",e.token),e}
return 201===i.status&&await i.json()}catch(e){return this.scope.dispatchEvent(new CustomEvent("RemexAuthError",{bubbles:!0,detail:e})),!1}}async checkEmail(e){try{const t=await fetch(`${this.config.endpoint}/auth/checkmail`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({email:e})});if(404===t.status)return{success:!1,message:"Email not found in our system"};if(403===t.status)return{success:!1,message:(await t.json()).message||"Your user account has been closed or disabled"};if(200===t.status||201===t.status)return await t.json()}catch(e){return navigator.serviceWorker.getRegistrations().then((function(e){for(let t of e)t.unregister()})),caches.keys().then((function(e){for(let t of e)caches.delete(t)})),{success:!1,message:"Sorry we have a problem, please reload web page, and try again."}}}async checkPhone(e){try{const t=await fetch(`${this.config.endpoint}/auth/checkphone`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({
phone:e})});if(404===t.status)return{success:!1,message:"Phone not found in our system"};if(200===t.status||201===t.status)return await t.json()}catch(e){return{success:!1,message:"Sorry we have a problem, please reload web page, and try again"}}}async handleEmailVerify(e,t){try{const s=await fetch(`${this.config.endpoint}/auth/verify/email`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({email:e,code:t})});if(200===s.status)return await s.json()}catch(e){}return{success:!1,message:"Invalid code"}}async handlePhoneVerify(e,t){try{const s=await fetch(`${this.config.endpoint}/auth/verify/phone`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({phone:e,code:t})});if(200===s.status)return await s.json()}catch(e){}return{success:!1,message:"Invalid code"}}async handleTOTPVerification(e,t){try{const s=await fetch(`${this.config.endpoint}/auth/verify/totp`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify({
email:e,code:t})});if(200===s.status)return await s.json()}catch(e){}return{success:!1,message:"Invalid code"}}async handleTrustDevice(){try{this.auth.state.trustDeviceHandling=!0;const e=await this.buildRequestHeaders(),t=await fetch(`${this.config.endpoint}/auth/device/trust`,{method:"PUT",headers:e});if(200===t.status)return await t.json();this.auth.state.trustDeviceHandling=!1}catch(e){this.auth.state.trustDeviceHandling=!1}return{success:!1,message:"Invalid device"}}async handleRegistration(e,t){try{const t=await fetch(`${this.config.endpoint}/auth/register`,{method:"POST",headers:await this.buildRequestHeaders(),body:JSON.stringify(e)});if(200===t.status||201===t.status)return await t.json()}catch(e){}return{success:!1,message:"Error registration data"}}async generateHmacSignature(e,t){const s=new TextEncoder,i=s.encode(t),n=s.encode(e),a=await crypto.subtle.importKey("raw",i,{name:"HMAC",hash:"SHA-256"},!1,["sign"]),o=await crypto.subtle.sign("HMAC",a,n)
;return Array.from(new Uint8Array(o)).map((e=>e.toString(16).padStart(2,"0"))).join("")}async refreshToken(){if(clearTimeout(this.tokenRefreshTik),this.isConnected()&&this.windowIsFocused&&!this.refresshingToken)try{this.refresshingToken=!0,this.refreshController&&this.refreshController.abort(),this.refreshController=new AbortController;const e=await fetch(`${this.config.endpoint}/auth/refresh-token`,{method:"POST",headers:await this.buildRequestHeaders(),signal:this.refreshController.signal}),t=await e.json();return"y"==(e.headers.get("x-force-logout")??"n")&&this.isConnected()?(await this.handleLogout(t.message??"Forced logout from backend"),this.refresshingToken=!1,!1):e.headers.get("x-force-reload")?(await this.handleLogout(t.message??"Application updated, force reload required"),this.refresshingToken=!1,!1):200===e.status?(t.token&&localStorage.setItem("RemexAuthToken",t.token),this.tokenRefreshTik=setTimeout((()=>this.refreshToken()),Math.max(this.tokenRefreshInterval,3e4)),
this.dispatchEvent(new CustomEvent("RemexAuthReConnected",{bubbles:!0,detail:{token:t.token,geo:t.geo,trust:t.trust}})),this.refresshingToken=!1,!0):(await this.handleLogout(t.message??"Application updated, force reload required"),this.refresshingToken=!1,!1)}catch(e){"AbortError"===e.name||(await this.handleLogout(),this.refresshingToken=!1)}return!1}connectedCallback(){this.initComponent(),this.attachResizeObserver()}initComponent(){const e=()=>{this.auth=new t(this),void 0!==this.auth&&"function"==typeof this.auth.render&&(this.auth.render(),this.rendered=!0)};this.inizialized?e():this.addEventListener("RemexAuthInitialized",e)}attachResizeObserver(){this.observerResize=new ResizeObserver((async()=>{if(void 0!==this.auth&&"function"==typeof this.auth.init){try{await this.recalcFingesprint()}catch(e){}this.auth.init()}})),this.observerResize.observe(this)}disconnectedCallback(){this.detachResizeObserver()}detachResizeObserver(){this.observerResize&&this.observerResize.disconnect()}
isDev(){return document.querySelector('meta[name="app-env"]')&&"dev"==document.querySelector('meta[name="app-env"]').getAttribute("content")}async loadStyles(){return new Promise((e=>{if(this.styleLoaded)e();else if(!document.querySelector('link[href*="authenticator/style.min.css"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="/assets/microfronts/authenticator/style.min.css"+(this.isDev()?`?_dc=${(new Date).getTime()}`:""),t.onload=()=>{this.styleLoaded=!0,e()},document.head.appendChild(t)}}))}}customElements.define("remex-auth",e);class t{constructor(e){this.scope=e;const t=localStorage.getItem("RemexAuthToken")??null;this._state={token:t,trustDeviceHandling:!1,trustDevice:!1,currentView:null!=t?"loading":"login"};const s=this;this.state=new Proxy(this._state,{set:(e,t,i)=>(e[t]!==i&&(e[t]=i,s.scope.dispatchEvent(new CustomEvent("RemexAuthStateChanged",{detail:{property:t,value:i}}))),!0)}),this.isoData=null,this.init()}async init(){
this.state.user=await this.scope.getUserData(),this.state.trustDeviceHandling=!1,this.render(),this.state.token&&(this.setView("logged"),setTimeout((()=>this.refreshToken()),1e3)),this.scope.addEventListener("RemexAuthReConnected",(async e=>{this.state.geo=e.detail.geo,this.state.token=e.detail.token,this.state.trustDevice=e.detail.trust,this.state.user=await this.scope.getUserData()})),this.scope.addEventListener("RemexAuthLogout",(e=>{this.state.logoutMessage=e.detail??!1,this.setView("login")})),this.scope.translateUI()}setLanguage(e){this.scope.config.language=e}trans(e,t,s=!1){return e&&0!==(e??"").length?this.scope.trans(e,t,s):""}transKey(e){return e&&0!==(e??"").length?this.scope.transKey(e):0}i18nJSON(e){return JSON.stringify(e).replace(/"/g,"_cm_")}setView(e){this.state.currentView=e,this.render(),this.scope.translateUI()}async render(){await this.scope.loadStyles();const e=this.scope.config.selector;let t=null;const s=this.state.currentView
;"loading"===s?t=this.loadingUI():"login"===s?t=this.createLoginForm():"register"===s?t=this.createRegisterForm():"forgotPassword"===s?t=this.createForgotPasswordForm():"totpVerification"===s?t=this.createTOTPVerificationForm():"updateProfile"===s?(await this.loadIsoData(),t=await this.createCompleteRegistrationForm()):"verifyEmail"===s?t=await this.createChannelVerificationForm("email"):"verifyPhone"===s?t=await this.createChannelVerificationForm("phone"):"resetPassword"===s?t=this.createResetPasswordForm():"enterPassword"===s?t=this.createPasswordForm():"logged"===s&&(t=this.createLoggedForm()),null!=t&&(e.innerHTML="",e.appendChild(t)),this.scope.dispatchEvent(new CustomEvent("RemexAuthRendered",{bubbles:!0})),this.scope.translateUI()}loadingUI(){const e=document.createElement("div");return e.classList.add("auth-form"),e.classList.add("auth-form-loading"),e.innerHTML=`${this.trans("Connecting",null,!1)}...`,e}createLoginForm(){this.state.flow="login"
;const e=document.createElement("form")
;e.classList.add("auth-form"),e.innerHTML=`\n        ${(this.state?.logoutMessage??"").length?`<div class="logout-message"><span><i class="icon icon-error"></i> ${this.trans(this.state?.logoutMessage??"")}.</span></div>`:""}\n        ${this.scope.config?.logoUrl?`<div class="customer-picture" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""} \n        <h5 class="auth-title"><i class="icon icon-fingerprint"></i> ${this.trans("Authentication")}</h5>\n        <p class="auth-subtitle">${this.trans("Please login to your account.")}</p>\n        \n        ${this.scope.config.providers?.email&&this.scope.config.providers?.sms?`<div id="${this.scope.config.uniqueSuffix}input-choicer" class="input-choicer-toggler">\n                    <label for="${this.scope.config.uniqueSuffix}email-choicer" class="choiced" >\n                        <input type="radio" name="input-choicer" id="${this.scope.config.uniqueSuffix}email-choicer" checked choice="email-input-choice">\n                        ${this.trans("Email")}</label> \n                    <label for="${this.scope.config.uniqueSuffix}sms-choicer"  >\n                        <input type="radio" name="input-choicer" id="${this.scope.config.uniqueSuffix}sms-choicer" choice="phone-input-choice">\n                        ${this.trans("Phone number")}</label>\n                </div>`:""} \n\n        ${this.scope.config.providers?.email?`${this.scope.config.providers?.sms?"":`<label for="${this.scope.config.uniqueSuffix}email" class="email-input-choice">${this.trans("Email")}</label>`}\n                <div class="auth-input-group email-input-choice">\n                    <input type="email" required class="auth-input" name="email" id="${this.scope.config.uniqueSuffix}email" i18n="${this.i18nJSON({
placeholder:this.transKey("yourmail@domain.com"),"aria-label":this.transKey("Email")})}">\n                    <span class="auth-input-icon"><i class="icon icon-email"></i></span>\n                </div>`:""}\n\n        ${this.scope.config.providers?.sms?`${this.scope.config.providers?.email?"":`<label for="${this.scope.config.uniqueSuffix}phone" class="phone-input-choice">${this.trans("Phone number")}</label>`}\n                <div class="auth-input-group phone-input-choice">\n                    <input type="${this.scope.config.providers?.email?"hidden":"tel"}" required class="auth-input" name="phone" id="${this.scope.config.uniqueSuffix}phone" i18n="${this.i18nJSON({"aria-label":this.transKey("phone")
})}" placeholder="+1 XXX XXX XXXX">\n                    <span class="auth-input-icon"><i class="icon icon-phone"></i></span>\n                </div>`:""} \n        <div class="auth-error-message" ></div>    \n        <button type="submit" disabled class="auth-button">${this.trans("Continue")}</button>\n        <p class="auth-footer">\n            <a href="#" id="${this.scope.config.uniqueSuffix}toRegister" >${this.trans("Are you new here?")} <b>${this.trans("Register")}!</b></a>\n        </p>\n      `;const t=e.querySelector(".auth-error-message");return this.scope.config.providers?.sms&&(e.querySelector(`#${this.scope.config.uniqueSuffix}phone`).addEventListener("input",(s=>{t.innerHTML="";let i=s.target.value;i=i.replace(/[^+\d]/g,""),i=i.startsWith("+")?"+"+i.slice(1).replace(/[+]/g,""):i.replace(/[+]/g,""),s.target.value=i.trim();const n=e.querySelector("button");s.target.value.length>=10&&s.target.validity.valid?n.removeAttribute("disabled"):n.setAttribute("disabled",!0)})),
setTimeout((()=>{"undefined"!=typeof jQuery&&void 0!==$.fn.mask&&$(`#${this.scope.config.uniqueSuffix}phone`).mask("+000000000000")}),100)),this.scope.config.providers?.email&&e.querySelector(`#${this.scope.config.uniqueSuffix}email`).addEventListener("input",(s=>{t.innerHTML="";const i=(s.target.value??"").trim(),n=e.querySelector("button");i.length>0&&s.target.validity.valid?n.removeAttribute("disabled"):n.setAttribute("disabled",!0)})),this.scope.config.providers?.email&&this.scope.config.providers?.sms&&(e.querySelectorAll(".phone-input-choice").forEach((e=>e.style.display="none")),e.querySelectorAll('input[name="input-choicer"]').forEach((s=>{s.addEventListener("change",(s=>{t.innerHTML="",e.querySelectorAll(".email-input-choice").forEach((e=>e.style.display="none")),e.querySelectorAll(".phone-input-choice").forEach((e=>e.style.display="none")),e.querySelector(".email-input-choice input").type="hidden",e.querySelector(".phone-input-choice input").type="hidden",
e.querySelectorAll(`.${s.target.getAttribute("choice")}`).forEach((e=>e.style.display="block")),e.querySelectorAll(`.${s.target.getAttribute("choice")} input`).forEach((e=>"email"==e.name?e.type="email":e.type="tel")),e.querySelectorAll('input[name="input-choicer"]').forEach((e=>e.parentElement.classList.remove("choiced"))),s.target.parentElement.classList.add("choiced")}))}))),e.querySelector(`#${this.scope.config.uniqueSuffix}toRegister`).addEventListener("click",(e=>{e.preventDefault(),this.setView("register")})),e.addEventListener("submit",(async s=>{s.preventDefault();const i=e.querySelector("button");i.setAttribute("disabled",!0),i.cacheHTML=i.innerHTML,i.innerHTML='<span class="loader"></span>',t.innerHTML="";const n=Array.from(document.querySelectorAll(".auth-input-group input")).find((e=>null!==e.offsetParent));let a=!1,o="";if(this.state.forceResetPassword=!1,n)switch(n.name){case"email":this.state.email=n.value,this.state.phone=!1,
a=await this.scope.checkEmail(this.state.email),o="verifyEmail";break;case"phone":this.state.phone=n.value,this.state.email=!1,a=await this.scope.checkPhone(this.state.phone),o="verifyPhone"}a||(a={success:!1,message:"Sorry we have a problem, please reload web page, and try again"},navigator.serviceWorker.getRegistrations().then((function(e){for(let t of e)t.unregister()})),caches.keys().then((function(e){for(let t of e)caches.delete(t)}))),a.forceResetPassword?(this.state.forceResetPassword=!0,this.setView("forgotPassword")):(i.setAttribute("disabled",!0),i.innerHTML=i.cacheHTML,a.success?(this.state.picture=a.picture,a.channelVerified?(this.state.maskName=a.maskName??"",this.setView("enterPassword")):(this.state.verifyCaptionMessage=this.trans(a.message??""),this.setView(o))):(i.innerHTML=i.cacheHTML,t.innerHTML=`<i class="icon icon-error"></i> ${this.trans(a?.message??"")}.`))})),e}createLoggedForm(){const e=document.createElement("form");return e.classList.add("auth-form"),
e.classList.add("auth-form-logged"),e.innerHTML=`\n        <div class="customer-picture auth-picture" style="background-image:url(${this.state.user.pictureUrl})"></div>\n        <small class="auth-title auth-title-small"><i class="icon icon-fingerprint"></i> ${this.trans("You are logged in as")}</small>\n        <h4 class="auth-name">${this.state.user.name}</h4>\n        <h6 class="show-on-trust-flow auth-email "><i class="icon icon-email"></i> ${this.state.user.email}</h6>\n        <h6 class="show-on-trust-flow auth-phone"><i class="icon icon-phone"></i> ${this.state.user.phone}</h6> \n        ${(this.state.user?.code??"").length?`<h6 class="show-on-trust-flow auth-code" i18n="${this.i18nJSON({title:this.transKey("Customer ID")
})}" ><i class="icon icon-target-user"></i> <b>${this.state.user.code}</b></h6>`:""}\n        <div class="trusted-device-container show-on-trust-flow auth-device">\n             <div class="trust-device-badge"><i class="icon icon-${this.state.trustDevice?"shield":""}"></i> ${this.scope.deviceLabel??""}</div>\n             <small>${this.trans(this.state.trustDevice?"This device is trusted":"This is not a trusted device, your session will be disconnected in 30 minutes")}.</small>\n        </div>\n        <br>\n        <button type="submit" class="auth-button auth-button-logout show-on-trust-flow">${this.trans("Logout")} <i class="icon icon-logout"></i></button> \n\n        <div class="trustflow-container" style="display:none"> \n                    <small>${this.trans("¿Te gustaría marcar este dispositivo como de confianza para que la sesión de usuario no se desconecte por seguridad?")}</small>\n                    <br>\n                    <div class="trust-device-badge">${this.scope.deviceLabel??""}</div>\n                    <div class="trust-device-geoip">\n                        ${this.state.geo?`<img class="auth-flag" src="${this.state.geo?.countryFlag}"> ${this.state.geo?.native} / IP: ${this.state.geo?.ip}`:""} \n                    </div> \n                    <div class="trustflow-bottons">\n                        <button type="button" action="deny" class="auth-button auth-button-trustnot"><i class="icon icon-cancel"></i> ${this.trans("Deny")}</button> \n                        <button type="button" action="accept" class="auth-button auth-button-trustok"><i class="icon icon-shield"></i> ${this.trans("Accept")}</button> \n                    </div>\n                </div> \n                 \n        \n      `,
this.scope.addEventListener("RemexAuthStateChanged",(t=>{if(!this.state.trustDevice){const t=this.state.geo||!1,s=e?.querySelector(".trust-device-geoip")||null;null!=s&&(s.innerHTML=t?`<img class="auth-flag" src="${t.countryFlag}"> ${t.native} / IP: ${t.ip}`:"")}if(this.state.user){const t=e?.querySelector(".auth-name")||null;null!=t&&(t.innerHTML=this.state.user.name);const s=e?.querySelector(".auth-email")||null;null!=s&&(s.innerHTML=`<i class="icon icon-email"></i> ${this.state.user.email}`);const i=e?.querySelector(".auth-phone")||null;null!=i&&(i.innerHTML=`<i class="icon icon-phone"></i> ${this.state.user.phone}`);const n=e?.querySelector(".auth-code")||null;null!=n&&(n.innerHTML=`<i class="icon icon-target-user"></i> <b>${this.state.user.code}</b>`);const a=e?.querySelector(".auth-picture")||null;null!=a&&(a.style.backgroundImage=`url(${this.state.user.pictureUrl})`);const o=e?.querySelector(".auth-device")||null
;null!=o&&(o.innerHTML=`<div class="trust-device-badge"><i class="icon icon-${this.state.trustDevice?"shield":""}"></i> ${this.scope.deviceLabel}</div>\n                         <small>${this.trans(this.state.trustDevice?"This device is trusted":"This is not a trusted device, your session will be disconnected in 30 minutes")}.</small>`),this.state.trustDevice?(e.querySelector(".trustflow-container").style.display="none",e.classList.remove("trustflow")):(e.querySelector(".trustflow-container").style.display="block",e.classList.add("trustflow"))}})),e.querySelectorAll('button[type="button"]').forEach((t=>t.addEventListener("click",(async t=>{t.preventDefault(),e.classList.remove("trustflow"),"accept"==t.target.getAttribute("action")&&(this.state.trustDevice=!0,await this.scope.refreshToken(),setTimeout((async()=>await this.scope.handleTrustDevice()),1e3))})))),e.addEventListener("submit",(async t=>{t.preventDefault();const s=e.querySelector('button[type="submit"]')
;s.setAttribute("disabled",!0),s.cacheHTML=s.innerHTML,s.innerHTML='<span class="loader"></span>',this.state.token=null,this.state.user=null,this.state.trustDevice=!1,this.setView("login"),await this.scope.handleLogout()})),setTimeout((async()=>{const e=await this.scope.getUserData();this.scope.dispatchEvent(new CustomEvent("RemexAuthConnected",{bubbles:!0,detail:{...e,token:this.state.token.split(":")[0],fingerprint:this.scope.fingerprint,deviceLabel:this.scope.deviceLabel}}))}),10),setTimeout((async()=>{await this.scope.refreshToken(),this.state.trustDevice||this.state.trustDeviceHandling||(e.classList.add("trustflow"),e.querySelector(".trustflow-container").style.display="block")}),1e3),e}createResetPasswordForm(){const e=document.createElement("form");e.classList.add("auth-form"),
e.innerHTML=`\n            <div class="customer-picture" style="background-image:url(${this.state.picture})"></div>\n            ${this.scope.config?.logoUrl?`<div class="customer-picture-subicon" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""}  \n            <h5 class="auth-title "><i class="icon icon-password"></i> ${this.trans("New Password")}</h5>  \n            <label for="${this.scope.config.uniqueSuffix}password" class="">${this.trans("Your new access password")}</label>\n            <div class="auth-input-group ">\n                <span class="auth-input-icon"><i class="icon icon-password"></i></span>\n                <input type="password" autocomplete="false" autofocus i18n="${this.i18nJSON({"aria-label":this.transKey("New Password"),placeholder:this.transKey("New Password")
})}"  class="auth-input" id="${this.scope.config.uniqueSuffix}password"/> \n            </div> \n            <div class="password-strength " id="${this.scope.config.uniqueSuffix}passwordStrength" style="display:none">\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n            </div>\n            <small class="password-strength-label " id="${this.scope.config.uniqueSuffix}passwordStrengthLabel"></small>\n\n            <label class="" for="${this.scope.config.uniqueSuffix}rePassword" style="display:none">${this.trans("Repeat password")}</label>      \n            <div class="auth-input-group" id="${this.scope.config.uniqueSuffix}repeatPasswordGroup" style="display: none;">\n                <span class="auth-input-icon"><i class="icon icon-password"></i></span>\n                <input type="password" autocomplete="false" autofocus  class="auth-input" id="${this.scope.config.uniqueSuffix}repassword"  i18n="${this.i18nJSON({
"aria-label":this.transKey("Repeat password"),placeholder:this.transKey("New Password")})}"/>\n            </div>\n\n            <div class="auth-error-message " id="${this.scope.config.uniqueSuffix}register-errors"></div>\n\n\n             ${this.state.allowResetTotp?`<label for="${this.scope.config.uniqueSuffix}disableTOTP" class="label-checkbox"><input type="checkbox" id="${this.scope.config.uniqueSuffix}disableTOTP" class="auth-checkbox"/> ${this.trans("Disable TOTP layer.")}</label>`:""}\n\n            <button type="submit" disabled class=" auth-button">${this.trans("Set password")}</button>\n            <p class="auth-footer ">\n                <a href="#" id="${this.scope.config.uniqueSuffix}toLogin" class="auth-link"><b>${this.trans("Comeback to Login")}</b></a>\n            </p>\n        `
;const t=e.querySelector('button[type="submit"]'),s=e.querySelector(`#${this.scope.config.uniqueSuffix}password`),i=e.querySelector(`#${this.scope.config.uniqueSuffix}passwordStrength`),n=e.querySelector(`#${this.scope.config.uniqueSuffix}passwordStrengthLabel`),a=e.querySelector(`#${this.scope.config.uniqueSuffix}repeatPasswordGroup`),o=e.querySelector(`label[for="${this.scope.config.uniqueSuffix}rePassword"]`),r=e.querySelector(`#${this.scope.config.uniqueSuffix}repassword`),c=e.querySelector('button[type="submit"]'),u=i.querySelectorAll(".strength-bar");return s.addEventListener("input",(()=>{const e=s.value;if(0===e.length)return i.style.display="none",n.style.display="none",a.style.display="none",o.style.display="none",void c.setAttribute("disabled",!0);const t=this.getPasswordStrength(e);u.forEach(((e,s)=>{e.style.backgroundColor=s<t?t>=4?"green":"red":"gray"})),t>=4?(a.style.display="block",o.style.display="block",i.style.display="none",
n.style.display="none"):(a.style.display="none",o.style.display="none",n.style.display="block",n.innerHTML=`<b>${this.trans("Password secirity _VALUE_ %",{_VALUE_:20*t})}</b><br><small>${this.trans("Use minnimum 8 characters, uppercase, lowercase, numbers and special characters")}</small>`,i.style.display="flex",c.setAttribute("disabled",!0))})),r.addEventListener("input",(()=>{r.value.trim()===s.value.trim()?c.removeAttribute("disabled"):c.setAttribute("disabled",!0)})),e.addEventListener("submit",(async s=>{s.preventDefault();const i=e.querySelector(`#${this.scope.config.uniqueSuffix}password`).value,n=e.querySelector(`#${this.scope.config.uniqueSuffix}repassword`).value,a=this.validatePasswordStrength(i);if(!a.valid)return e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).style.display="block",e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).textContent=a.message,!1
;if(i.trim()!==n.trim())return e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).style.display="block",e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).textContent=this.trans("Passwords do not match"),!1;e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).style.display="none",t.setAttribute("disabled",!0),t.cacheHTML=t.innerHTML,t.innerHTML='<span class="loader"></span>';const o=e.querySelector(`#${this.scope.config.uniqueSuffix}disableTOTP`)?.checked??!1,r=await this.scope.handlePasswordReset(this.state.email,i,o,this.state.emailSeed);t.removeAttribute("disabled"),t.innerHTML=t.cacheHTML,r.success&&(this.state.flow="login",
e.innerHTML=`<div class="customer-picture" style="background-image:url(${this.state.picture})"></div>\n                                     ${this.scope.config?.logoUrl?`<div class="customer-picture-subicon" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""}\n                                      <h5><i class="icon icon-shield"></i> ${this.trans(r.message)}</h5>\n                                        <p class="auth-subtitle">${this.trans("Now you can log back in with your new password.")}</p>\n                                        <i class="icon icon-big icon-success"></i><br><br>\n                                        <button type="button" class="auth-button">${this.trans("Comeback to Login")}</button>`,e.querySelector("button").addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})))})),e.querySelector(`#${this.scope.config.uniqueSuffix}toLogin`).addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})),e}
createPasswordForm(){const e=document.createElement("form");return e.classList.add("auth-form"),e.innerHTML=`\n        <div class="customer-picture" style="background-image:url(${this.state.picture})"></div>\n        ${this.scope.config?.logoUrl?`<div class="customer-picture-subicon" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""}  \n        <h5 class="auth-title"><i class="icon icon-fingerprint"></i> ${this.trans("Login")}</h5>\n        <p>${this.state.maskName}</p>\n        <label for="${this.scope.config.uniqueSuffix}password">${this.trans("Password")}</label>\n        <div class="auth-input-group">\n          <input type="password" autocomplete="false" autofocus class="auth-input" id="${this.scope.config.uniqueSuffix}password" i18n="${this.i18nJSON({"aria-label":this.transKey("Password"),placeholder:this.transKey("Your access password")
})}">\n          <span class="auth-input-icon"><i class="icon icon-password"></i></span>\n          <span class="auth-input-icon-toggle-password" style="display:none"><i class="icon icon-eye"></i></span>\n          <a href="#" class="recovery-password-action" id="${this.scope.config.uniqueSuffix}doPasswordRecovery">${this.trans("Recovery Password")}</a>\n        </div> \n        <div class="auth-error-message" id="${this.scope.config.uniqueSuffix}loginErrorLabel"></div>\n        <button type="submit" disabled class="auth-button">${this.trans("Login")}</button>\n        <button type="button" class="auth-button-cancel">${this.trans("Cancel")}</button>\n      `,e.querySelector(`#${this.scope.config.uniqueSuffix}doPasswordRecovery`).addEventListener("click",(e=>{e.preventDefault(),this.setView("forgotPassword")})),e.querySelector(".auth-input-icon-toggle-password").addEventListener("click",(t=>{
const s=e.querySelector(`#${this.scope.config.uniqueSuffix}password`),i=e.querySelector(".auth-input-icon-toggle-password i");"password"===s.getAttribute("type")?(s.setAttribute("type","text"),i.classList.remove("icon-eye"),i.classList.add("icon-eye-off")):(s.setAttribute("type","password"),i.classList.remove("icon-eye-off"),i.classList.add("icon-eye"))})),e.querySelector(`#${this.scope.config.uniqueSuffix}password`).addEventListener("focus",(e=>{const t=e.target.value.length;e.target.setSelectionRange(t,t)})),e.querySelector(`#${this.scope.config.uniqueSuffix}password`).addEventListener("input",(t=>{e.querySelector(`#${this.scope.config.uniqueSuffix}loginErrorLabel`).innerHTML="",t.target.value.length?e.querySelector(".auth-input-icon-toggle-password").style.display="block":(e.querySelector(".auth-input-icon-toggle-password").style.display="none",t.target.setAttribute("type","password")),
this.validatePasswordStrength(t.target.value).valid?e.querySelector('button[type="submit"]').removeAttribute("disabled"):e.querySelector('button[type="submit"]').setAttribute("disabled",!0)})),e.querySelector('button[type="button"]').addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})),e.addEventListener("submit",(async t=>{t.preventDefault();const s=e.querySelector('button[type="submit"]');s.setAttribute("disabled",!0),s.cacheHTML=s.innerHTML,s.innerHTML='<span class="loader"></span>';const i=e.querySelector(`#${this.scope.config.uniqueSuffix}password`).value;this.state.password=i;const n=await this.scope.handleLogin(this.state.email||this.state.phone,i);n?(this.state.user=await this.scope.getUserData(),this.state.geo=n.geo??null,n.totp?this.setView("totpVerification"):(this.state.token=n.token,this.state.trustDeviceHandling||(this.state.trustDevice=n.trust),this.setView("logged"),this.scope.dispatchEvent(new CustomEvent("RemexAuthLogged",{bubbles:!0,
detail:this.state.user})))):(e.querySelector(`#${this.scope.config.uniqueSuffix}password`).value="",e.querySelector(`#${this.scope.config.uniqueSuffix}password`).focus(),e.querySelector(`#${this.scope.config.uniqueSuffix}loginErrorLabel`).innerHTML=`<i class="icon icon-error"></i> ${this.trans("Invalid credentials. Please try again.")}`,e.querySelector('button[type="submit"]').removeAttribute("disabled"),s.removeAttribute("disabled",!0),s.innerHTML=s.cacheHTML)})),e}_createCodeVerificationForm(e,t,s){const i=document.createElement("form");i.classList.add("auth-form"),
i.innerHTML=`<div class="form-main">\n            ${this.scope.config?.logoUrl||this.state.picture?`<div class="customer-picture" style="background-image:url(${this.scope.config?.logoUrl||this.state.picture})"></div>`:""}  \n            <h5><i class="icon icon-${s?`check-${s}`:"shield"}"></i> ${this.trans(e)}</h5>\n            <p class="auth-subtitle">${this.trans(t)}</p>\n            <div class="auth-input-group auth-input-6code">\n                ${Array.from({length:6}).map(((e,t)=>`<div><input type="number" inputmode="numeric" class="auth-input" maxlength="1" id="${this.scope.config.uniqueSuffix}code${t}" i18n="${this.i18nJSON({"aria-label":this.transKey("Verification Code")
})}"></div>`)).join("")}\n            </div>\n            <small class="auth-error-message" id="${this.scope.config.uniqueSuffix}verificationError" ></small>\n            <button type="submit" disabled class="auth-button"><i class="icon icon-shield"></i> ${this.trans("Verify")}</button>\n            <button type="button" class="auth-button-cancel">${this.trans("Cancel")}</button>\n            </div>\n            <div class="form-secondary"></div>\n        `;const n=()=>6===Array.from({length:6}).map(((e,t)=>i.querySelector(`#${this.scope.config.uniqueSuffix}code${t}`).value)).join("").length;return i.querySelector('button[type="button"]').addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})),i.querySelectorAll("input").forEach(((e,t)=>{e.addEventListener("focus",(e=>{e.target.setAttribute("type","number")})),e.addEventListener("blur",(e=>{e.target.setAttribute("type","password")})),e.addEventListener("keyup",(e=>{const t=e.key.toLowerCase()
;if("backspace"==t||"delete"==t){e.target.value="";const t=parseInt(e.target.getAttribute("id").replace(`${this.scope.config.uniqueSuffix}code`,"")),s=i.querySelector(`#${this.scope.config.uniqueSuffix}code${t-1}`);s&&s.focus()}})),e.addEventListener("input",(e=>{if(i.querySelector(".auth-error-message").innerHTML="",i.querySelector('button[type="submit"]').setAttribute("disabled",!0),e.target.value.toString().length>1&&(e.target.value=e.target.value.toString().slice(e.target.value.toString().length-1,e.target.value.toString().length)),e.target.value.toString().length>0){const e=i.querySelector(`#${this.scope.config.uniqueSuffix}code${t+1}`);e?(e.focus(),n()&&i.querySelector('button[type="submit"]').removeAttribute("disabled")):n()&&(i.querySelector('button[type="submit"]').removeAttribute("disabled"),i.querySelector('button[type="submit"]').focus())}else t>0&&i.querySelector(`#${this.scope.config.uniqueSuffix}code${t-1}`).focus()}))})),
i.querySelector(".auth-input-6code").addEventListener("paste",(e=>{const t=e.clipboardData.getData("text");6===t.length&&/^\d{6}$/.test(t)&&(e.preventDefault(),t.split("").forEach(((e,t)=>{const s=i.querySelector(`#${this.scope.config.uniqueSuffix}code${t}`);s&&(s.value=e,setTimeout((()=>s.setAttribute("type","password")),250))})),n()&&i.querySelector("button").removeAttribute("disabled"))})),setTimeout((()=>i.querySelector(`#${this.scope.config.uniqueSuffix}code0`).focus()),100),i}createTOTPVerificationForm(){const e=this._createCodeVerificationForm("Verify by TOTP code","Generate a temporary code from your authentication application to secure access to your account.");e.addEventListener("submit",(async t=>{t.preventDefault(),e.querySelector(".auth-error-message").innerHTML="";const s=e.querySelector('button[type="submit"]');s.setAttribute("disabled",!0),e.querySelector('button[type="button"]').setAttribute("disabled",!0),s.cacheHTML=s.innerHTML,
s.innerHTML='<span class="loader"></span>';const i=Array.from({length:6}).map(((t,s)=>e.querySelector(`#${this.scope.config.uniqueSuffix}code${s}`).value)).join("");e.querySelectorAll('input[inputmode="numeric"]').forEach((e=>e.setAttribute("disabled",!0)));const n=await this.scope.handleTOTPVerification(this.state.email||this.state.phone,i);if(n.success){const e=await this.scope.handleLogin(this.state.email||this.state.phone,this.state.password,n.seed);e.success?(this.state.user=await this.scope.getUserData(),this.state.token=e.token,this.state.trustDeviceHandling||(this.state.trustDevice=n.trust),this.setView("logged"),this.scope.dispatchEvent(new CustomEvent("RemexAuthLogged",{bubbles:!0,detail:this.state.user}))):this.setView("totpVerification"),delete this.state.password}else s.removeAttribute("disabled"),e.querySelector('button[type="button"]').removeAttribute("disabled"),e.querySelectorAll('input[inputmode="numeric"]').forEach((e=>e.removeAttribute("disabled"))),
e.querySelector(".auth-error-message").innerHTML=`<i class="icon icon-error"> ${this.trans(n.message??"Invalid code")}</i>`,s.innerHTML=s.cacheHTML}));const t=document.createElement("a");return t.href="#",t.classList.add("action-help"),t.innerHTML=`<small><i class="icon icon-help"></i> ${this.trans("What can I do if I have lost my TOTP?")}</small>`,e.querySelector(".auth-input-6code").insertAdjacentElement("afterend",t),t.addEventListener("click",(async t=>{e.querySelector(".form-main").style.display="none",e.querySelector(".form-secondary").style.display="block",
e.querySelector(".form-secondary").innerHTML=`\n                    <button type="button" class="auth-button-prev"><i class="icon icon-prev-arrow"></i></button>\n                    <br>\n                    <br>\n                    <h4>${this.trans("What can I do if I have lost my TOTP?")}</h4>\n                    <p>${this.trans("If you have accidentally uninstalled the authenticator app that generates the TOTP codes or you have lost your phone, you can disable the TOTP second-factor layer of security by resetting a new password.")}</p>\n                    <button type="button" class="auth-button gotoresetpassword">${this.trans("Reset Now")}</button>\n                    `,e.querySelector(".auth-button-prev").addEventListener("click",(t=>{t.preventDefault(),e.querySelector(".form-main").style.display="block",e.querySelector(".form-secondary").style.display="none"})),e.querySelector(".gotoresetpassword").addEventListener("click",(e=>{e.preventDefault(),
this.setView("forgotPassword")}))})),e}async createChannelVerificationForm(e){let t="email"==e?"Verify Your Email":"Verify Your Celular",s="email"==e?"Please enter the 6-digit code sent to your email.":"Please enter the 6-digit code sent to your phone.";switch(this.state?.flow??"login"){case"login":t="email"==e?"Verify Your Email before login":"Verify Your Celular before login",s="email"==e?"Please enter the 6-digit code sent to your email.":"Please enter the 6-digit code sent to your phone.";break;case"passwordRecovery":t="email"==e?"Verify Your Email before set new passowrd":"Verify Your Celular before set new passowrd",s="email"==e?"Please enter the 6-digit code sent to your email.":"Please enter the 6-digit code sent to your phone."}const i=this._createCodeVerificationForm(t,s,e);return i.addEventListener("submit",(async t=>{t.preventDefault();const s=Array.from({length:6}).map(((e,t)=>i.querySelector(`#${this.scope.config.uniqueSuffix}code${t}`).value)).join("")
;i.querySelectorAll("input").forEach((e=>e.setAttribute("disabled",!0))),i.querySelector('button[type="submit"]').setAttribute("disabled",!0),i.querySelector('button[type="button"]').setAttribute("disabled",!0),i.querySelector("input").setAttribute("disabled",!0);const n=i.querySelector('button[type="submit"]');n.cacheHTML=n.innerHTML,n.innerHTML='<span class="loader"></span>',i.querySelector(".auth-error-message").innerHTML="";let a={success:!1,message:"Invalid verification code. Please try again."};switch(e){case"email":a=await this.scope.handleEmailVerify(this.state.email,s);break;case"phone":a=await this.scope.handlePhoneVerify(this.state.phone,s)}if(a.success)switch(this.state.emailSeed=a.seed,this.state.allowResetTotp=a.isTotpEnabled??!1,this.state.flow){case"register":return this.setView("updateProfile");case"login":return this.setView("logged");case"passwordRecovery":return this.setView("resetPassword")
}else i.querySelectorAll("input").forEach((e=>e.removeAttribute("disabled"))),i.querySelector('button[type="button"]').removeAttribute("disabled"),n.setAttribute("disabled",!0),n.innerHTML=n.cacheHTML,i.querySelector(".auth-error-message").innerHTML=`<i class="icon icon-error"></i> ${this.trans("Invalid verification code. Please try again.")}`,i.querySelectorAll("input").forEach((e=>{e.value="",e.setAttribute("type","number")}))})),i}createRegisterForm(){this.state.flow="register";const e=document.createElement("form");e.classList.add("auth-form"),
e.innerHTML=`\n            ${this.scope.config?.logoUrl?`<div class="customer-picture" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""}  \n            <h5><i class="icon icon-user-add"></i> ${this.trans("Register")}</h5>\n            <p class="auth-subtitle">${this.trans("In a few steps you will be registered.")}</p>\n            <label for="${this.scope.config.uniqueSuffix}email">${this.trans("Email")}</label>\n            <div class="auth-input-group">\n                <input type="email" value="${this.state?.email||""}" i18n="${this.i18nJSON({"aria-label":this.transKey("Email"),placeholder:this.transKey("Email")
})}" class="auth-input" id="${this.scope.config.uniqueSuffix}email"/>\n                <span class="auth-input-icon"><i class="icon icon-email"></i></span>\n            </div>\n            <label for="${this.scope.config.uniqueSuffix}password">${this.trans("Password")}</label>\n            <div class="auth-input-group">\n                <span class="auth-input-icon"><i iconfor="password" class="icon icon-password icon-password-open"></i></span>\n                <input type="password" autocomplete="false" autofocus  class="auth-input" id="${this.scope.config.uniqueSuffix}password" i18n="${this.i18nJSON({"aria-label":this.transKey("Password"),placeholder:this.transKey("Password")
})}"/> \n                <span class="auth-input-icon-toggle-password" for="password" style="display:none"><i class="icon icon-eye"></i></span>\n            </div> \n            <div class="password-strength" id="${this.scope.config.uniqueSuffix}passwordStrength" style="display:none">\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n                    <div class="strength-bar"></div>\n            </div>\n            <small class="password-strength-label" id="${this.scope.config.uniqueSuffix}passwordStrengthLabel"></small>\n\n           <label for="${this.scope.config.uniqueSuffix}rePassword" style="display:none">${this.trans("Repeat password")}</label>   \n            <div class="auth-input-group" id="${this.scope.config.uniqueSuffix}repeatPasswordGroup" style="display: none;">\n                <span class="auth-input-icon"><i  iconfor="repassword" class="icon icon-password icon-password-open"></i></span>\n                <input type="password" autocomplete="false" autofocus class="auth-input" id="${this.scope.config.uniqueSuffix}repassword" i18n="${this.i18nJSON({
"aria-label":this.transKey("Repeat password"),placeholder:this.transKey("Repeat password")})}"/>\n                <span class="auth-input-icon-toggle-password" for="repassword" style="display:none"><i class="icon icon-eye"></i></span>\n\n            </div>\n\n            <div class="auth-error-message" id="${this.scope.config.uniqueSuffix}register-errors"></div>\n            <button type="submit" disabled class="auth-button">${this.trans("Register")}</button>\n            <p class="auth-footer">\n                <a href="#" id="${this.scope.config.uniqueSuffix}toLogin" class="auth-link">${this.trans("Already have an account?")} <b>${this.trans("Login")}</b></a>\n            </p>\n        `
;const t=e.querySelector(`#${this.scope.config.uniqueSuffix}password`),s=e.querySelector(`#${this.scope.config.uniqueSuffix}passwordStrength`),i=e.querySelector(`#${this.scope.config.uniqueSuffix}passwordStrengthLabel`),n=e.querySelector(`#${this.scope.config.uniqueSuffix}repeatPasswordGroup`),a=e.querySelector(`label[for="${this.scope.config.uniqueSuffix}rePassword"]`),o=e.querySelector(`#${this.scope.config.uniqueSuffix}repassword`),r=e.querySelector('button[type="submit"]'),c=s.querySelectorAll(".strength-bar");return e.querySelectorAll(".auth-input-icon-toggle-password").forEach((t=>{const s=e.querySelector(`#${this.scope.config.uniqueSuffix}${t.getAttribute("for")}`);s.addEventListener("input",(e=>t.style.display=s.value.length?"block":"none")),t.addEventListener("click",(e=>{const i=t.querySelector("i");"password"===s.getAttribute("type")?(s.setAttribute("type","text"),i.classList.remove("icon-eye"),i.classList.add("icon-eye-off")):(s.setAttribute("type","password"),
i.classList.remove("icon-eye-off"),i.classList.add("icon-eye"))}))})),t.addEventListener("input",(()=>{const o=t.value;if(e.querySelector('[iconfor="password"]').classList.add("icon-password-open"),0===o.length)return s.style.display="none",a.style.display="none",i.style.display="none",n.style.display="none",r.setAttribute("disabled",!0),void(e.querySelector('[for="password"]').style.display="none");const u=this.getPasswordStrength(o);c.forEach(((e,t)=>{e.style.backgroundColor=t<u?u>=4?"green":"red":"gray"})),u>=4?(n.style.display="block",a.style.display="block",s.style.display="none",i.style.display="none",e.querySelector('[iconfor="password"]').classList.remove("icon-password-open")):(n.style.display="none",a.style.display="none",i.style.display="block",i.innerHTML=`<b>${this.trans("Password secirity _VALUE_ %",{_VALUE_:20*u})}</b><br><small>${this.trans("Use minnimum 8 characters, uppercase, lowercase, numbers and special characters")}</small>`,s.style.display="flex",
r.setAttribute("disabled",!0))})),o.addEventListener("input",(()=>{e.querySelector('[iconfor="repassword"]').classList.add("icon-password-open"),o.value.trim()===t.value.trim()?(e.querySelector('[iconfor="repassword"]').classList.remove("icon-password-open"),r.removeAttribute("disabled")):r.setAttribute("disabled",!0)})),e.addEventListener("submit",(async t=>{t.preventDefault();const s=e.querySelector(`#${this.scope.config.uniqueSuffix}password`).value,i=e.querySelector(`#${this.scope.config.uniqueSuffix}repassword`).value,n=e.querySelector(`#${this.scope.config.uniqueSuffix}email`).value,a=this.validatePasswordStrength(s);if(!a.valid)return e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).style.display="block",e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).textContent=a.message,!1;if(s.trim()!==i.trim())return e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).style.display="block",
e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).textContent=this.trans("Passwords do not match"),!1;e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).style.display="none";const o=e.querySelector('button[type="submit"]');o.setAttribute("disabled",!0),o.cacheHTML=o.innerHTML,o.innerHTML='<span class="loader"></span>';const r=await this.scope.sendEmailVerificationCode(n);o.setAttribute("disabled",!0),o.innerHTML=o.cacheHTML,r.success&&(this.state.flow="register",this.state.password=s,this.state.email=n,this.state.seed=r.seed,this.setView("verifyEmail"))})),e.querySelector(`#${this.scope.config.uniqueSuffix}toLogin`).addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})),e}getPasswordStrength(e){let t=0;return e.length>=8&&t++,/[A-Z]/.test(e)&&t++,/[a-z]/.test(e)&&t++,/[0-9]/.test(e)&&t++,/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(e)&&t++,t}validatePasswordStrength(e){
const t=this.scope.config.passwordValidation||{},s=t.minLength||8,i=t.mustContainSpecialChars||!1,n=t.specialChars||"!@#$%^&*()_+[]{}|;:,.<>?",a=t.mustContainUppercase||!1;return t.maxConsecutiveNumbers,e.length<s?{valid:!1,stop:2,message:this.trans("Password must be at least _minLength_ characters long.",{minLength:s},!0)}:i&&!new RegExp(`[${n}]`).test(e)?{valid:!1,stop:3,message:this.trans("Password must contain at least one special character: _specialChars_",{specialChars:n},!0)}:a&&!/[A-Z]/.test(e)?{valid:!1,stop:4,message:this.trans("Password must contain at least one uppercase letter.",null,!0)}:/\d{5,}/.test(e)?{valid:!1,stop:5,message:this.trans("Password must not contain more than two consecutive identical numbers.",null,!0)}:{valid:!0,stop:6}}createForgotPasswordForm(){const e=document.createElement("form");return e.classList.add("auth-form"),
e.innerHTML=`\n        ${this.state.forceResetPassword?`<div class="logout-message"><span><i class="icon icon-error"></i> ${this.trans("Por tu seguridad es necesario que establezcas una nueva contraseña.")}.</span></div>`:""}\n        ${this.scope.config?.logoUrl?`<div class="customer-picture" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""}  \n        <h5><i class="icon icon-password-reset"></i> ${this.trans("Forgot Password")}</h5>\n        <p class="auth-subtitle">${this.trans("We will send you a verification code to your email and after validating that it is yours we will let you change the password.")}</p>\n         <div class="auth-input-group">\n            <input value="${this.state?.email?this.state.email:""}" type="email" i18n="${this.i18nJSON({"aria-label":this.transKey("Email"),placeholder:this.transKey("Email")
})}" class="auth-input" id="${this.scope.config.uniqueSuffix}email" />\n            <span class="auth-input-icon"><i class="icon icon-email"></i></span>\n        </div>\n        <small class="auth-error-message" id="${this.scope.config.uniqueSuffix}verificationError" ></small>\n        <button type="submit" ${(this.state?.email??"").length?"":"disabled"} class="auth-button">${this.trans("Continue")}</button>\n        <p class="auth-footer"><a href="#" id="${this.scope.config.uniqueSuffix}toLogin" class="auth-link">${this.trans("Back to Login")}</a></p>\n      `,e.addEventListener("submit",(async t=>{t.preventDefault();const s=e.querySelector(`#${this.scope.config.uniqueSuffix}email`).value,i=e.querySelector('button[type="submit"]');e.querySelector(`#${this.scope.config.uniqueSuffix}verificationError`).innerHTML="",i.setAttribute("disabled",!0),i.cacheHTML=i.innerHTML,i.innerHTML='<span class="loader"></span>',e.querySelector(".auth-footer").style.display="none"
;const n=await this.scope.sendEmailVerificationCode(s);i.removeAttribute("disabled",!0),i.innerHTML=i.cacheHTML,e.querySelector(".auth-footer").style.display="block",n.success?(this.state.picture=n.picture,this.state.verifyCaptionMessage=this.trans(n.message??"",null,!0),this.state.flow="passwordRecovery",this.setView("verifyEmail")):e.querySelector(`#${this.scope.config.uniqueSuffix}verificationError`).innerHTML=`<i class="icon icon-error"></i> ${this.trans(n.message,null,!0)}`})),e.querySelector(`#${this.scope.config.uniqueSuffix}toLogin`).addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})),e.querySelector('input[type="email"]').addEventListener("input",(t=>{t.preventDefault(),e.querySelector(`#${this.scope.config.uniqueSuffix}verificationError`).innerHTML="",t.target.checkValidity()?e.querySelector('button[type="submit"]').removeAttribute("disabled"):e.querySelector('button[type="submit"]').setAttribute("disabled",!0)})),e}async loadIsoData(){
if(null==this.isoData)try{const t=await fetch(`/cdn/${this.scope.cpl}/microfronts/authenticator/iso.json`,{method:"GET",headers:await this.scope.buildRequestHeaders()});if(200===t.status){const s=await t.json();for(var e in this.isoData=[],s)this.isoData.push({iso:e,i18nName:s[e].name[this.scope.config.language]??s[e].name.en,...s[e]})}}catch(e){}}async createCompleteRegistrationForm(){const e=document.createElement("form");e.classList.add("auth-form"),
e.innerHTML=`\n        ${this.scope.config?.logoUrl?`<div class="customer-picture" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""} \n        <h5>${this.trans("register"==this.state.flow?"Complete your registration":"Profile data")}!</h5>\n\n        <label for="${this.scope.config.uniqueSuffix}fullname">${this.trans("Fullname")}</label>\n        <div class="auth-input-group">\n            <input type="text" autofocus inputmode="latin-name" class="auth-input" id="${this.scope.config.uniqueSuffix}fullname" required i18n="${this.i18nJSON({"aria-label":this.transKey("Fullname"),placeholder:this.transKey("Fullname")})}"/>\n            <span class="auth-input-icon"><i class="icon icon-user"></i></span>\n        </div>\n        \n        <label for="${this.scope.config.uniqueSuffix}gender">${this.trans("Gender")}</label>\n        <div class="auth-input-group">\n            <remex-select required icon="gender i18n="${this.i18nJSON({
placeholder:this.transKey("Select Gender")})}" placeholder="${this.trans("Select Gender",null,!0)}"  id="${this.scope.config.uniqueSuffix}gender"></remex-select> \n        </div>\n\n        <label for="${this.scope.config.uniqueSuffix}country">${this.trans("Country")}</label>\n        <div class="auth-input-group">\n            <remex-select required icon="earth" i18n="${this.i18nJSON({placeholder:this.transKey("Select Country")})}" placeholder="${this.trans("Select Country",null,!0)}"  id="${this.scope.config.uniqueSuffix}country"></remex-select>\n        </div>\n         \n        <label for="${this.scope.config.uniqueSuffix}phone">${this.trans("Celular")}</label>\n        <div class="auth-input-group">\n             <input inputmode="numeric" required type="tel"  class="auth-input" id="${this.scope.config.uniqueSuffix}phone" i18n="${this.i18nJSON({"aria-label":this.transKey("Celular"),placeholder:this.transKey("Celular")
})}"/>\n            <span class="auth-input-icon"><i class="icon icon-phone"></i></span>\n        </div>\n\n        <div class="auth-error-message" id="${this.scope.config.uniqueSuffix}register-errors"></div>\n\n        <button disabled type="submit" class="auth-button">${this.trans("Continue")}</button>\n         <button type="button" class="auth-button-cancel">${this.trans("Cancel")}</button>\n      `;const t=e.querySelector(`#${this.scope.config.uniqueSuffix}gender`);setTimeout((()=>{t.items=[{label:this.trans("Male",null,!0),value:"Male"},{label:this.trans("Female",null,!0),value:"Female"}]}),100);const s=e.querySelector(`#${this.scope.config.uniqueSuffix}country`);setTimeout((()=>{s.items=this.isoData.map((e=>{let t=!1;return this.scope.config.popularCountries&&this.scope.config.popularCountries.length&&(this.scope.config.popularCountries.indexOf(e.iso.toLowerCase())>-1||this.scope.config.popularCountries.indexOf(e.iso)>-1)&&(t=this.trans("Paises populares",null,!0)),{
label:`${e.flag} ${e.i18nName}`,value:e.iso,phonerg:e.regexp,phonemask:e.mask,group:t}}))}),100),s.addEventListener("change",(t=>{const s=t.detail,i=s.phonemask??"",n=s.phonerg??"";e.querySelector(`#${this.scope.config.uniqueSuffix}phone`).setAttribute("placeholder",i),e.querySelector(`#${this.scope.config.uniqueSuffix}phone`).setAttribute("pattern",n),setTimeout((()=>{"undefined"!=typeof jQuery&&void 0!==$.fn.mask&&$(`#${this.scope.config.uniqueSuffix}phone`).mask(i)}),100)}));const i=e=>{e.value&&!e.checkValidity()?e.classList.add("invalid-input"):e.classList.remove("invalid-input")},n=()=>{e.checkValidity()?e.querySelector('button[type="submit"]').removeAttribute("disabled"):e.querySelector('button[type="submit"]').setAttribute("disabled",!0)};return e.querySelectorAll("input, remex-select").forEach((t=>{t.addEventListener("input",(()=>{i(t),n(),e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).innerHTML=""})),t.addEventListener("change",(()=>{i(t),n(),
e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).innerHTML=""}))})),e.querySelector('button[type="button"]').addEventListener("click",(e=>{e.preventDefault(),this.setView("login")})),e.addEventListener("submit",(async t=>{t.preventDefault();const s=e.querySelector('button[type="submit"]');s.setAttribute("disabled",!0),s.cacheHTML=s.innerHTML,s.innerHTML='<span class="loader"></span>';const i={fullname:e.querySelector(`#${this.scope.config.uniqueSuffix}fullname`).value,gender:e.querySelector(`#${this.scope.config.uniqueSuffix}gender`).value,country:e.querySelector(`#${this.scope.config.uniqueSuffix}country`).value,phone:e.querySelector(`#${this.scope.config.uniqueSuffix}phone`).value,email:this.state.email,password:this.state.password,seed:this.state.seed},n=await this.scope.handleRegistration(i);if(s.removeAttribute("disabled"),s.innerHTML=s.cacheHTML,n.success){
if(this.scope.config?.autoLoginAfterRegister&&await this.scope.handleLogin(this.state.email||this.state.phone,this.state.password,n.seed))return this.state.user=await this.scope.getUserData(),this.state.geo=n.geo??null,this.state.token=n.token,this.state.trustDeviceHandling||(this.state.trustDevice=n.trust),this.scope.dispatchEvent(new CustomEvent("RemexAuthLogged",{bubbles:!0,detail:this.state.user})),this.setView("logged");this.state.flow="login",
e.innerHTML=`<div class="customer-picture" style="background-image:url(${this.state.picture})"></div>\n                     ${this.scope.config?.logoUrl?`<div class="customer-picture-subicon" style="background-image:url(${this.scope.config?.logoUrl})"></div>`:""}\n                      <h5><i class="icon icon-shield"></i> ${this.trans("User registration successful")}</h5>\n                        <p class="auth-subtitle">${this.trans("Congratulations _NAME_!, you are now a registered user and you can access safely with your email and password.",{_NAME_:`<b>${n.firstName}</b>`})}</p>\n                        <i class="icon icon-big icon-success"></i><br><br>\n                        <button type="button" class="auth-button">${this.trans("Comeback to Login")}</button>`,e.querySelector("button").addEventListener("click",(e=>{e.preventDefault(),this.setView("login")}))
}else e.querySelector(`#${this.scope.config.uniqueSuffix}register-errors`).innerHTML=`<i class="icon icon-error"></i> ${this.trans(n.message,null,!0)}`})),e}}if(window.RemexAuthComponentClass=e,!customElements.get("remex-select")){var script=document.createElement("script");const e=document.querySelector('meta[name="x-cpl"]')?.getAttribute("content")||"1.0.0";script.src=`/cdn/${e}/microfronts/remex-select/index.min.js`,script.async=!0,document.head.appendChild(script)}}