<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">let logintimer = null
let openwin = null
let openwinTimer = null
let winRef = null;
const leftWindow = (window.innerWidth - 600) / 2;
const topWindow = (window.innerHeight - 700) / 2;
const windowFeatures = `width=600,height=700,top=${topWindow},left=${leftWindow},scrollbars=yes,resizable=yes`;
const clientMask = document.createElement('div')
const noIosReplaceT3 = [
    "/talking-head.html",
    "/image-to-video-ai.html",
    "/ai-avatar-generator.html",
    "/text-to-speech.html",
    "/image-background-remover.html",
    "/ai-cartoon-generator.html",
    "/ai-vocal-remover.html",
    "/voice-changer.html",
    "/face-swap.html",
    "/ai-tool-pricing.html",
    "/video-translate.html",
    "/ai-voice-translator.html",
    "/ai-ghibli-filter.html",
    "/ai-dubbing.html",
    "/online-video-editor.html",
    "/ai-clothes-changer.html",
    "/api-credentials.html",
    "/authentication/usage.html",
    "/aitools/faceswap.html",
    "/api-pricing.html",
    "/vidnoz-coupon-for-christmas.html",
    "/chat-pdf.html",
    "/audio-to-text.html",
    "/aff/bf-sale.html",
    "/aff/xmas-sale.html",
    "/pricing.html",
    "/ai-kissing-video.html"
];
clientMask.style = `
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
`
let wait = null;

// ä¸œå…«åŒº+æµè§ˆå™¨è‹±æ–‡
function getEastEightEnglish() {
    // èŽ·å–å½“å‰æ—¥æœŸæ—¶é—´
    const currentDate = new Date()
    // èŽ·å–å½“å‰æ—¶åŒºåç§»é‡ï¼ˆä»¥åˆ†é’Ÿä¸ºå•ä½ï¼‰
    const timezoneOffset = currentDate.getTimezoneOffset()

    // èŽ·å–æµè§ˆå™¨è¯­è¨€è®¾ç½®
    const browserLanguage = navigator.language || navigator.userLanguage

    if (timezoneOffset === -480 &amp;&amp; (browserLanguage.toLowerCase() === 'en-us' || browserLanguage.toLowerCase() === 'en')) {
        return true
    } else {
        return false
    }
}

function loginUtcToLocal(date, fmt = 'YYYY/MM/DD HH:mm') {
    moment.locale('en') // å¤šè¯­è¨€ å¤„ç† krä¼&nbsp;ko jpä¼&nbsp;ja twä¼&nbsp;zh-tw
    return moment.utc(date).local().format(fmt)
}

function findAncestors(node, match) {
    while (node != null) {
        // eslint-disable-next-line
        if (match.call(null, node)) {
            return node
        }
        node = node.parentNode
    }
    return null
}

function isBlank(data) {
    if (data == null || data === 'null' || data === '' || data === undefined || data === 'undefined' || data === 'unknown') {
        return true
    } else {
        return false
    }
}

//Use LocalStorage to save data
function getStorage(name) {
    const nameStorage = localStorage.getItem(name)
    let result = null
    if (!nameStorage || nameStorage === 'null' || nameStorage === null) {
        result = null
    } else {
        result = typeof
            nameStorage === 'number' || name === 'textareaVal' || name === 'token'
            ? nameStorage
            : JSON.parse(nameStorage)
    }
    return result
}

//Read data with LocalStorage
function setStorage(name, param) {
    if (typeof param === 'number' || typeof param === 'string') {
        localStorage.setItem(name, param)
    } else {
        localStorage.setItem(name, JSON.stringify(param))
    }
}

//Use LocalStorage to delete data
function removeStorage(name) {
    if (!name) {
        localStorage.clear()
    } else {
        localStorage.removeItem(name)
    }
}

//Calculate the position of the window to make it center
function openCenteredWindow(url) {
    if (!winRef) {
        return window.open(url, "_blank", windowFeatures);
    } else {
        winRef.location.href = url;
        return winRef;
    }
}

function backVal(field) {
    return typeof field === 'string' ? field : field.value
}

const onCheckEmail = (email) =&gt; {
    const Expression = '^\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]*\\.)+[A-Za-z]{2,14}$'
    const logreg = new RegExp(Expression)
    return logreg.test(email)
}

const onCheckPassword = (pass) =&gt; {
    // ç§»é™¤ç©ºæ&nbsp;¼å’Œç©ºè¾“å…¥çš„æ£€æŸ¥ï¼Œé˜²æ­¢ç©ºç™½å¯†ç&nbsp;é€šè¿‡
    if (!pass || pass.trim().length === 0) {
        return false
    }

    // æ£€æŸ¥å¯†ç&nbsp;é•¿åº¦æ˜¯å¦åœ¨ 8 åˆ° 20 ä¸ªå­—ç¬¦ä¹‹é—´
    const lengthCheck = pass.length &gt;= 8 &amp;&amp; pass.length &lt;= 20

    // æ­£åˆ™è¡¨è¾¾å¼æ£€æŸ¥ï¼š
    const hasUpperCase = /[A-Z]/.test(pass) // è‡³å°‘ä¸€ä¸ªå¤§å†™å­—æ¯
    const hasLowerCase = /[a-z]/.test(pass) // è‡³å°‘ä¸€ä¸ªå°å†™å­—æ¯
    const hasDigit = /\d/.test(pass) // è‡³å°‘ä¸€ä¸ªæ•°å­—

    // ç‰¹æ®Šå­—ç¬¦ï¼šæŽ’é™¤å­—æ¯å’Œæ•°å­—çš„å…¶ä»–å­—ç¬¦
    const hasSpecialChar = /[^A-Za-z0-9]/.test(pass) // è‡³å°‘ä¸€ä¸ªå¤§å†™ã€å°å†™å­—æ¯ã€æ•°å­—ä»¥å¤–çš„å­—ç¬¦

    // æœ€ç»ˆæ¡ä»¶ï¼šæ‰€æœ‰æ¡ä»¶å¿…é¡»ä¸º true
    if (lengthCheck &amp;&amp; hasUpperCase &amp;&amp; hasLowerCase &amp;&amp; hasDigit &amp;&amp; hasSpecialChar) {
        return true
    } else {
        return false
    }
}

function _debounce(fn) {
    let t = null
    return function () {
        if (t) {
            clearTimeout(t)
        }
        t = setTimeout(() =&gt; {
            fn.apply(this, arguments)
        }, 1000)
    }
}

/**
 * @param {data} and { type }
 */
function sendEmailRequest(param, dom) {
    jqAjaxPromise({ url: '/api/user/account-validate', type: 'POST', data: { email: param.data } }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
        .then((res) =&gt; {
            if (res.code === 200) {
                if (param.type === 'signin') {
                    const _btn = dom.querySelector('.login-submit')
                    _btn.setAttribute('anchor', res.data.type)
                    _btn.removeAttribute('disabled')
                    let btnText = ''
                    if (res.data.status === 0) {
                        btnText = selfLoginTxt['sign-up']
                    } else {
                        if (res.data.type === 'account') {
                            btnText = selfLoginTxt['sign-in']
                        } else {
                            btnText = dom.querySelector(`.button-thirdParty[anchor='${res.data.type}']`).getAttribute('anchor-desc')
                        }
                    }
                    _btn.querySelector('span').innerText = btnText
                } else if (param.type === 'resetPwd') {
                    const _btn = dom.querySelector('.login-reset-pwd-btn')
                    const _input = dom.querySelector('.login-reset-pwd-email')
                    if (res.data.status === 0) {
                        _btn.setAttribute('disabled', 'diabled')
                        _input.classList.add('error')
                        _input.parentNode.classList.add('error')
                        _input.parentNode.querySelector('.error-tip').innerText = selfLoginTxt['the-email-you-entered-is-incorrect-try-again']
                    } else {
                        _input.classList.remove('error')
                        _input.parentNode.classList.remove('error')
                        _btn.removeAttribute('disabled')
                    }
                }
            } else {
                if (param.type === 'signin') {
                    const _btn = dom.querySelector('.login-submit')
                    _btn.removeAttribute('disabled')
                }
            }
        }).catch(() =&gt; {
            if (param.type === 'signin') {
                const _btn = dom.querySelector('.login-submit')
                _btn.removeAttribute('disabled')
            }
        })
}

//Determine whether the two values â€‹â€‹are equal directly
const containsVal = (field, value) =&gt; {
    const value1 = backVal(field)
    return value1 === value
}

function getNewParam(param) {
    const paramObj = localStorage.getItem('toolsPosition') ? { position: location.pathname } : ''
    param = { productName: localStorage.getItem('loginProductName'), pageName: localStorage.getItem('loginPageName'), ...param }
    param = paramObj ? { ...param, ...paramObj } : param
    return param
}

function getLoginStatus(loginId, current) {
    let _this = this;
    operateLoginTimer()
    let data = {
        loginId
    }
    data = getNewParam(data)
    logintimer = setInterval(() =&gt; {
        jqAjaxPromise({
            url: '/api/third-login/get-user-status',
            type: 'GET',
            data
        }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then(async (res) =&gt; {
                res.code != 202 &amp;&amp; (clientMask.remove())
                if (res.code === 200) {
                    operateLoginTimer()
                    const userTraits = {
                        id: res.data.id,
                        email: res.data.email,
                        first_name: res.data.first_name,
                        last_name: res.data.last_name,
                        head_portrait: res.data.head_portrait,
                        usertype: res.data.type
                    }

                    setCookie('access_token', res.data.access_token, 30)
                    setCookie('refresh_token', res.data.refresh_token, 30)
                    setCookie('loginProduct', res.data.redirect_url, 30)
                    setCookie('fallBackLang', 'en', 30)

                    setStorage('user_info', userTraits)
                    setCookie('user_info', JSON.stringify(userTraits), 30)
                    setStorage('isReplace', true)

                    const resData = await jqAjaxPromise({ url: `/api/site/app-config?t=${new Date().getTime()}` })
                    setCookie('userCountryGradient', resData.data.user_country_gradient)


                    const toolParams = localStorage.getItem('toolsPosition')
                    const productToPagelocal = localStorage.getItem('productToPage')
                    if (judgeClient() === 'ios' &amp;&amp; ~~resData.data.user_country_gradient === 3 &amp;&amp; !noIosReplaceT3.includes(cataLogueAfter)) {
                        location.reload()
                        return
                    } else if (!toolParams &amp;&amp; !productToPagelocal) {
                        if (!toCurrentLangApp(localStorage.getItem('loginProductName'))) {
                            location.href = res.data.redirect_url
                        }
                    } else if (toolParams === 'true') {
                        location.reload()
                    }

                    let data;
                    if (wait &amp;&amp; Array.isArray(wait)) {
                        data = await newDownloadFile(...wait);
                    }
                    _this.showSuccessWindow()
                    setTimeout(() =&gt; {
                        if (data != null) {
                            this.loginSuccess(data)
                        } else {
                            this.loginSuccess()
                        }
                    }, 2000)
                    closeOpenerWindow()
                }
                else if (res.code === 202) {
                    // operateLoginTimer()
                    // getLoginStatus.bind(_this)(loginId, current)
                }
                else {
                    operateLoginTimer()
                    closeOpenerWindow()
                    if (res.code === 203) {
                        _this.toPath('link')
                        _this.setLinkInfo({
                            email: res.data.email,
                            type: res.data.type
                        })
                    } else if (res.code === 204) {
                        _this.toPath('almost')
                        _this.almostLoginId = loginId
                    }
                }
            }).catch((err) =&gt; {
                clientMask.remove()
                _this.shadowRootEl.querySelectorAll('.button-thirdParty').forEach((item) =&gt; {
                    item.removeAttribute('disabled')
                })
                console.error(err)
                operateLoginTimer()
            })
    }, 1000)
}

function loginRedirect(data) {
    return new Promise((resolve, reject) =&gt; {
        jqAjaxPromise({ url: '/api/third-login/login-redirect', type: 'POST', data }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then((res) =&gt; {
                if (res.code === 200) {
                    openwin = openCenteredWindow(res.data.url)
                    this.windowBody.classList.add('loading')
                    if (openwin) {
                        openwinTimer = setInterval(() =&gt; {
                            if (openwin.closed) {
                                this.windowBody.classList.remove('loading')
                                clearInterval(openwinTimer)
                                clearInterval(logintimer)
                            }
                        }, 500)
                    }
                } else {
                    console.log('Sign in failed. Please try again later.')
                }
            }).finally(() =&gt; {
                resolve()
            })
    })
}

function LogIn(data, current) {
    data = getNewParam(data)
    jqAjaxPromise({ url: '/api/third-login/login-url-box', type: 'GET', data }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
        .then(async (res) =&gt; {
            if (res.code === 200) {
                getLoginStatus.bind(this)(res.data.loginId, current)
                await loginRedirect.bind(this)({
                    access_token: getCookie('access_token'),
                    loginId: res.data.loginId,
                    action: current
                })
                setCookie('loginid', res.data.loginId)
            } else {
                ToolTip({ text: selfLoginTxt['sign-in-failed-please-try-again-later'], type: 'error' })
            }
        }).catch((err) =&gt; {
            console.log(err)
            operateLoginTimer()
        }).finally(() =&gt; {
            document.querySelector('.login-dialog').querySelectorAll('.button-thirdParty').forEach(child =&gt; {
                child.removeAttribute('disabled')
            })
        })
}

function detectDeviceType() {
    const userAgent = navigator.userAgent;
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
        return 'mobile';
    } else {
        return 'pc';
    }
}

function thirdPartyLoginEvent(event) {
    if (getEastEightEnglish()) {
        if (!this.checkbox.classList.contains('active')) {
            this.checkboxTextBox.classList.add('shake')
            setTimeout(() =&gt; {
                this.checkboxTextBox.classList.remove('shake')
            }, 500)
            return
        }
    }
    const tarEle = event.target
    const threeitem = findAncestors(tarEle, function (node) {
        return node.classList.contains('button-thirdParty')
    })
    if (!threeitem) return
    operateLoginTimer()
    // closeOpenerWindow()
    const _anchor = threeitem.getAttribute('anchor')
    const _current = threeitem.getAttribute('current')
    threeitem.setAttribute('disabled', true)
    const appLoginId = !isBlank(getUrlParam('loginId')) ? getUrlParam('loginId') : ''
    const loginGaList = {
        google: 'registerpop_google_official',
        yahoo: 'registerpop_yahoo_official',
        facebook: 'registerpop_facebook_official',
        linkedin: 'registerpop_linkedin_official',
        microsoft: 'registerpop_microsoft_official'
    }
    loginGaList[_anchor] &amp;&amp; gtag('event', loginGaList[_anchor])
    if (detectDeviceType() === "mobile") {
        winRef = window.open("", "_blank");
    } else {
        winRef = window.open("", "_blank", windowFeatures);
    }
    LogIn.bind(this)({
        type: _anchor,
        loginId: appLoginId,
        aff: getCookie('aff') ? JSON.parse(getCookie('aff')) : '',
        insur: getCookie('insur'),
        code: getUrlParam('code')
    }, _current)
}

function thirdPartyLogin(_this) {
    let dom = _this.shadowRootEl || document
    const threelogins = dom.querySelectorAll('.button-thirdParty')
    threelogins.forEach(item =&gt; item.addEventListener('click', thirdPartyLoginEvent.bind(_this)))
}

function LoginSubmission(param, fn = () =&gt; { }, isCanva) {
    const appLoginId = !isBlank(getUrlParam('loginId')) ? getUrlParam('loginId') : ''
    const paramData = {
        aff: getCookie('aff') ? JSON.parse(getCookie('aff')) : '',
        insur: getCookie('insur'),
        code: getUrlParam('code'),
        loginId: appLoginId
    }
    param = { ...param, ...paramData }
    let _this = this;
    param = getNewParam(param)
    jqAjaxPromise({
        url: '/api/user/login', type: 'POST', data: param
    }, () =&gt; { }, isCanva ? 'canva' : (isMobile() ? 'mobile' : 'web'))
        .then(async (res) =&gt; {
            if (res.code === 200) {
                const userTraits = {
                    id: res.data.id,
                    email: res.data.email,
                    first_name: res.data.first_name,
                    last_name: res.data.last_name,
                    head_portrait: res.data.head_portrait,
                    usertype: res.data.type
                }
                setCookie('access_token', res.data.access_token, 30)
                setCookie('refresh_token', res.data.access_token, 30)
                setCookie('loginProduct', res.data.redirect_url, 30)
                setCookie('fallBackLang', 'en', 30)

                setStorage('user_info', userTraits)
                setCookie('user_info', JSON.stringify(userTraits), 30)
                setStorage('isReplace', true)

                const resData = await jqAjaxPromise({ url: `/api/site/app-config?t=${new Date().getTime()}` })
                setCookie('userCountryGradient', resData.data.user_country_gradient)

                const toolParams = localStorage.getItem('toolsPosition')
                const productToPagelocal = localStorage.getItem('productToPage')
                if (judgeClient() === 'ios' &amp;&amp; ~~resData.data.user_country_gradient === 3 &amp;&amp; !noIosReplaceT3.includes(cataLogueAfter)) {
                    location.reload()
                    return
                } else if (!toolParams &amp;&amp; !productToPagelocal) {
                    if (!toCurrentLangApp(localStorage.getItem('loginProductName'))) {
                        location.href = res.data.redirect_url
                    }
                } else if (toolParams === 'true') {
                    location.reload()
                }
                let data;
                if (wait &amp;&amp; Array.isArray(wait)) {
                    data = await newDownloadFile(...wait);
                }
                this.showSuccessWindow()
                setTimeout(() =&gt; {
                    if (data != null) {
                        this.loginSuccess(data)
                    } else {
                        this.loginSuccess()
                    }
                }, 2000)
            } else {
                if (res.code === 400) {
                    Modal({
                        iconType: 'hint',
                        titleText: selfLoginTxt['the-password-you-entered-is-incorrect-try-again-or-click-forgot-password']
                    })
                } else if (res.code === 1002) {
                    Modal({
                        iconType: 'hint',
                        titleText: selfLoginTxt['the-email-address-you-entered-is-incorrect-try-again']
                    })
                } else if (res.code === 210) {
                    this.isAccount = 'true'
                    this.toPath('verify');
                    this.verifyEmail = param.email;
                } else if (res.code === 211) {
                    if (!res.data.lockedData.lockedStatus) {
                        Modal({ iconType: 'hint', content: selfLoginTxt['incorrect-password-d-failed-login-attem'].replace('%d', res.data.lockedData.num) })
                    } else {
                        Modal({ iconType: 'hint', titleText: selfLoginTxt['sorry-you-have-been-restricted-from-logging-in'], content: selfLoginTxt['you-have-exceeded-the-number-of-all'].replace('%d1', loginUtcToLocal(res.data.lockedData.lockedReleaseAt, 'h:mm A')).replace('%d2', loginUtcToLocal(res.data.lockedData.lockedReleaseAt, 'MMMM Do')), submitText: selfLoginTxt['got-it'] })
                    }
                } else {
                    Modal({ iconType: 'hint', titleText: selfLoginTxt['sign-in-failed-please-try-again-later'] })
                }
            }
        }).catch(() =&gt; {
            Modal({ iconType: 'hint', titleText: selfLoginTxt['sign-in-failed-please-try-again-later'] })
        }).finally(() =&gt; {
            fn()
        })
}

function operateLoginTimer() {
    if (logintimer) {
        window.clearInterval(logintimer)
        clearInterval(logintimer)
        logintimer = null
    }
}

function closeOpenerWindow() {
    // window.opener = null
    // window.open('', '_self')
    !!openwin &amp;&amp; openwin.close()
}


class MyComponent extends HTMLElement {
    constructor() {
        super()

        this.ltitle = this.getAttribute('ltitle') || selfLoginTxt['sign-title']
        this.history = ''
        this.loginCheck = {
            email: false,
            pwd: false,
            code: false
        }
        this.registerCheck = {
            email: false,
            firstName: false,
            lastName: false,
            pwd: false
        }
        this.verifyEmail = this.getAttribute('verifyEmail') || ''
        this.linkEmail = this.getAttribute('linkEmail') || ''
        this.resetBackLink = false
        this.linkType = ''
        this.almostLoginId = ''
        this.mainInputValue = ''
        this.isAccount = ''
        this.isTemplateType = this.getAttribute('isTemplateType') || ''
        this.isFaceSwap = location.pathname.includes('face-swap.html') ? true : false
    }

    //ConnectedCallback was called when the custom element was first connected to the document DOM.
    connectedCallback() {

        this.innerHTML = `
        &lt;div id="login-dialog" class="login-dialog ${this.isTemplateType === 'true' ? 'canva-container' : ''}" &gt;
        &lt;div class="login-dialog-container"&gt;
            &lt;div class="login-dialog-left-img"&gt;
            &lt;/div&gt;
            &lt;div class="login-dialog-body" &gt;
            &lt;div class="small-loading"&gt;
                &lt;p&gt;${selfLoginTxt.loading}&lt;/p&gt;
            &lt;/div&gt;
            &lt;i class='login-close-btn pointer'&gt;&lt;/i&gt;
            &lt;i class='login-back-btn pointer'&gt;&lt;/i&gt;
            &lt;div class="login-sigin"&gt;
                &lt;h4 class="window-title"&gt;${this.ltitle}&lt;/h4&gt;
                &lt;p class="login-descript"&gt;${selfLoginTxt['sign-up-easily-with']}&lt;/p&gt;
                &lt;div class="login-btn-group"&gt;
                &lt;button class="pointer button-google button-thirdParty"    anchor="google"    current="signin" data-btn="no-init" anchor-desc="${selfLoginTxt['sign-in-with-google']}"&gt;&lt;span&gt;Google&lt;/span&gt;&lt;/button&gt;
                &lt;button class="pointer button-facebook button-thirdParty ${!this.isFaceSwap ? '' : 'half-width'}"  anchor="facebook"  current="signin" data-btn="no-init" anchor-desc="${selfLoginTxt['sign-in-with-facebook']}"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;
                ${!this.isFaceSwap ? `` : `&lt;button class="pointer button-apple button-thirdParty half-width" anchor="apple" current="signin" data-btn="no-init" anchor-desc="Sign in with Apple ID"&gt;&lt;span&gt;Apple&lt;/span&gt;&lt;/button&gt;`}
                &lt;button class="pointer button-linkedin button-thirdParty ${!this.isFaceSwap ? '' : 'half-width'}"  anchor="linkedin"  current="signin" data-btn="no-init" anchor-desc="${selfLoginTxt['sign-in-with-linkedin']}"&gt;&lt;span&gt;Linkedln&lt;/span&gt;&lt;/button&gt;
                &lt;button class="pointer button-microsoft button-thirdParty ${!this.isFaceSwap ? '' : 'half-width'}" anchor="microsoft" current="signin" data-btn="no-init" anchor-desc="${selfLoginTxt['sign-in-with-microsoft']}"&gt;&lt;span&gt;Microsoft&lt;/span&gt;&lt;/button&gt;
                
                &lt;/div&gt;
                &lt;span class="login-tips"&gt;&lt;i&gt; ${selfLoginTxt['or-sign-up-with-email']} &lt;/i&gt;&lt;/span&gt;
                &lt;div class="login-input-box error-tip-box"&gt;
                &lt;input type="email" placeholder="${selfLoginTxt['email-address']}" class="login-input window-input" autocomplete="off" title=""&gt;
                &lt;span class="error-tip no-title"&gt; ${selfLoginTxt['invalid-email-address']} &lt;/span&gt;
                &lt;/div&gt;
                &lt;button class="pointer submit-btn login-submit bingClickBtn1" anchor="" disabled&gt;&lt;span&gt; 
                ${selfLoginTxt['sign-up']}
                &lt;/span&gt;&lt;/button&gt;
                &lt;p class="login-text"&gt;${selfLoginTxt['already-have-an-account']}&amp;nbsp;&lt;span class="bingClickBtn2"&gt;${selfLoginTxt['sign-in']}&lt;/span&gt;&lt;/p&gt;
                &lt;p class="login-text last-text ${getEastEightEnglish() ? 'show-box' : ''}"&gt;${getEastEightEnglish() ? `&lt;span class='checkbox'&gt;&lt;/span&gt;` : ''} ${selfLoginTxt['by-signing-up-you-agree-to-our']} &lt;a target="_blank" href="https://www.vidnoz.com/privacy.html"&gt; ${selfLoginTxt['privacy-policy']} &lt;/a&gt; ${selfLoginTxt['and']} &lt;a target="_blank" href="https://www.vidnoz.com/terms.html"&gt;${selfLoginTxt['terms']}&lt;/a&gt;.&lt;/p&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-success"&gt;
                &lt;img src="https://www.vidnoz.com/js/commonSignin/images/successful.png" width="88" height="88" &gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['log-in-successful']} &lt;/h4&gt;
                &lt;span&gt; ${selfLoginTxt['please-return-to-the-app-and-start-your-journey-with-us']} &lt;/span&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-account"&gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['sign-in-with-your-email']} &lt;/h4&gt;
                &lt;div class="login-account-email-box error-tip-box"&gt;
                &lt;span class="login-account-label"&gt; ${selfLoginTxt['email-address']} &lt;/span&gt;
                &lt;input type="email" class="window-input login-account-email" title=""&gt;
                &lt;span class="error-tip"&gt; ${selfLoginTxt['invalid-email-address']} &lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="login-account-pwd-box"&gt;
                &lt;span class="login-account-label"&gt; ${selfLoginTxt['password']} &lt;/span&gt;
                &lt;div&gt;
                    &lt;input type="password" class="window-input login-account-pwd"&gt;
                    &lt;i class="pwd-eye bingClickBtn3" title="${selfLoginTxt['show-password']}"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="login-account-code-box"&gt;
                &lt;span class="login-account-label"&gt; ${selfLoginTxt['verification-code']} &lt;/span&gt;
                &lt;div class="login-account-code-input error-tip-box"&gt;
                    &lt;input type="text" maxlength="4" class="window-input login-account-code"&gt;
                    &lt;span class="error-tip no-title"&gt; ${selfLoginTxt['incorrect-verification-code']} &lt;/span&gt;
                    &lt;div class="login-account-code-img-box bingClickBtn4"&gt;
                        &lt;img src='https://www.vidnoz.com/js/commonSignin/images/code_default.png' style="display: block" width="115" height="48"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;span class="bingClickBtn5"&gt; ${selfLoginTxt['forgot-password']} &lt;/span&gt;
                &lt;button class="pointer submit-btn login-account-btn bingClickBtn6" disabled&gt;&lt;span&gt; ${selfLoginTxt['sign-in']} &lt;/span&gt;&lt;/button&gt;
                &lt;p&gt; ${selfLoginTxt['dont-have-an-account']} &amp;nbsp;&lt;span class="bingClickBtn7"&gt; ${selfLoginTxt['sign-up']} &lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-register"&gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['sign-up-with-your-email']} &lt;/h4&gt;
                &lt;div class="login-register-email-box error-tip-box"&gt;
                &lt;span class="login-register-tips"&gt; ${selfLoginTxt['email-address']} &lt;/span&gt;
                &lt;input type="email" class="window-input login-register-email" title=""&gt;
                &lt;span class="error-tip"&gt; ${selfLoginTxt['this-email-address-is-not-supported']} &lt;/span&gt;
                &lt;span class="error-interim-email-tip"&gt;${selfLoginTxt['this-email-address-is-not-supported']}&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="login-register-name-box"&gt;
                &lt;div class="login-register-first-name-box error-tip-box"&gt;
                    &lt;span class="login-register-tips"&gt; ${selfLoginTxt['first-name']} &lt;/span&gt;
                    &lt;input type="text" maxlength="100" class="window-input login-register-first-name"&gt;
                    &lt;span class="error-tip"&gt; ${selfLoginTxt['enter-your-first-name-here']} &lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="login-register-last-name-box error-tip-box"&gt;
                    &lt;span class="login-register-tips"&gt; ${selfLoginTxt['last-name']} &lt;/span&gt;
                    &lt;input type="text" maxlength="100" class="window-input login-register-last-name"&gt;
                    &lt;span class="error-tip"&gt; ${selfLoginTxt['enter-your-last-name-here']} &lt;/span&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="login-register-pwd-box error-tip-box"&gt;
                &lt;span class="login-register-tips"&gt; ${selfLoginTxt['password']} &lt;/span&gt;
                &lt;div &gt;
                    &lt;input type="password" class="window-input login-register-pwd"&gt;
                    &lt;i class="pwd-eye bingClickBtn8" title=" ${selfLoginTxt['show-password']} "&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;span class="error-tip error-tip-top"&gt; ${selfLoginTxt['password-must-be-6-to-20-characters']} &lt;/span&gt;
                &lt;/div&gt;
                &lt;p class="login-register-text"&gt; ${selfLoginTxt['by-signing-up-you-agree-to-our']}  &lt;a target="_blank" href="https://www.vidnoz.com/privacy.html"&gt; ${selfLoginTxt['privacy-policy']} &lt;/a&gt; ${selfLoginTxt['and']} &lt;a target="_blank" href="https://www.vidnoz.com/terms.html"&gt;${selfLoginTxt['terms']}&lt;/a&gt;.&lt;/p&gt;
                &lt;button class="pointer submit-btn login-register-btn bingClickBtn9" disabled&gt;&lt;span&gt; ${selfLoginTxt['sign-up']} &lt;/span&gt;&lt;/button&gt;
                &lt;p class="login-register-text login-register-last-text"&gt; ${selfLoginTxt['already-have-an-account']}&amp;nbsp;&lt;span class="pointer bingClickBtn10"&gt;${selfLoginTxt['sign-in']}&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-verify"&gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['verify-your-email']} &lt;/h4&gt;
                &lt;p class="login-verify-text login-verify-one"&gt; ${selfLoginTxt['your-vidnoz-ai-account-is-almost-ready']} &lt;/p&gt;
                &lt;p class="login-verify-text login-verify-two"&gt; ${selfLoginTxt['we-have-sent-a-6-digit-verification-code-to-your-email-please-check-it-soon-and-enter-the-verification-code-that-you-received-below-to-verify-your-email-and-activate-your-account']} &lt;/p&gt;
                &lt;div class="login-verify-input-group"&gt;
                    &lt;input type="text" maxlength="1"&gt;
                    &lt;input type="text" maxlength="1"&gt;
                    &lt;input type="text" maxlength="1"&gt;
                    &lt;input type="text" maxlength="1"&gt;
                    &lt;input type="text" maxlength="1"&gt;
                    &lt;input type="text" maxlength="1"&gt;
                &lt;/div&gt;
                &lt;p class="login-verify-error-msg"&gt; ${selfLoginTxt['invalid-code']} &lt;/p&gt;
                &lt;button class="pointer submit-btn login-verify-code-btn bingClickBtn11" data-btn="no-init"&gt;&lt;span&gt; ${selfLoginTxt['verify']} &lt;/span&gt;&lt;/button&gt;
                &lt;p class="login-verify-text login-verify-three"&gt; ${selfLoginTxt['you-might-need-to-check-your-spam-folder-if-you-dont-see-it-or']} &lt;/p&gt;
                &lt;button class="pointer submit-btn login-verify-btn bingClickBtn12" data-btn="no-init"&gt;&lt;span&gt; ${selfLoginTxt['resend-confirmation-email']} &lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-reset-pwd"&gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['reset-password']} &lt;/h4&gt;
                &lt;p class="login-reset-pwd-text"&gt; ${selfLoginTxt['please-enter-your-email-address-and-well-sen']} &lt;/p&gt;
                &lt;div class="login-reset-pwd-email-box error-tip-box"&gt;
                &lt;span&gt; ${selfLoginTxt['email-address']} &lt;/span&gt;
                &lt;input type="email" class="window-input login-reset-pwd-email" title=""&gt;
                &lt;p class="error-tip"&gt; ${selfLoginTxt['the-email-you-entered-is-incorrect-try-again']} &lt;/p&gt;
                &lt;/div&gt;
                &lt;button class="pointer submit-btn  login-reset-pwd-btn bingClickBtn13" disabled&gt;&lt;span&gt; ${selfLoginTxt['submit']} &lt;/span&gt;&lt;/button&gt;
                &lt;span class="login-reset-pwd-or"&gt;&lt;i&gt; ${selfLoginTxt['or']} &lt;/i&gt;&lt;/span&gt;
                &lt;button class="pointer login-reset-back-btn bingClickBtn14" data-btn="no-init"&gt;&lt;span&gt; ${selfLoginTxt['back-to-sign-in']} &lt;/span&gt;&lt;/button&gt;
                &lt;button class="pointer login-reset-back-btn login-reset-signup bingClickBtn15" data-btn="no-init"&gt;&lt;span&gt; ${selfLoginTxt['sign-up-for-free']} &lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-link"&gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['login-link']} &lt;/h4&gt;
                &lt;p class="login-link-text"&gt;&lt;span class="link-email"&gt;&lt;/span&gt; ${selfLoginTxt['already-exists-in-vidnoz-ai-please-log-in-this']} &lt;span class="link-type"&gt;&lt;/span&gt;.&lt;/p&gt;
                &lt;div class="login-link-pwd-box"&gt;
                &lt;span class="login-link-tips"&gt; ${selfLoginTxt['password']} &lt;/span&gt;
                &lt;div&gt;
                    &lt;input type="password" class="window-input login-link-pwd"&gt;
                    &lt;i class="pwd-eye bingClickBtn16" title="${selfLoginTxt['show-password']}"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;p class="pointer login-link-to-forgot bingClickBtn17"&gt; ${selfLoginTxt['forgot-password']} &lt;/p&gt;
                &lt;button class="pointer submit-btn  login-link-btn bingClickBtn18" disabled&gt;&lt;span&gt; ${selfLoginTxt['log-in-and-link']} &lt;/span&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!--  --&gt;
            &lt;div class="login-almost-here"&gt;
                &lt;img src="https://www.vidnoz.com/js/commonSignin/images/ico_send_email_in.svg" width="200" height="90"&gt;
                &lt;h4 class="window-title"&gt; ${selfLoginTxt['you-are-almost-here']} &lt;/h4&gt;
                &lt;p class="login-almost-here-text"&gt;${selfLoginTxt['please-enter-your-email-to-continue']}&lt;/p&gt;
                &lt;div class="login-almost-here-email-box error-tip-box"&gt;
                &lt;input type="email" class="window-input login-almost-here-email" placeholder="${selfLoginTxt['enter-your-email-here']}" title=""&gt;
                &lt;p class="error-tip"&gt; ${selfLoginTxt['invalid-email-address']} &lt;/p&gt;
                &lt;span class="error-interim-email-tip no-title"&gt;${selfLoginTxt['this-email-address-is-not-supported']}&lt;/span&gt;
                &lt;/div&gt;
                &lt;p class="login-almost-here-error-msg"&gt;&lt;/p&gt;
                &lt;button class="pointer submit-btn  login-almost-here-btn bingClickBtn19" disabled&gt;&lt;span&gt; ${selfLoginTxt['continue']} &lt;/span&gt;&lt;/button&gt;
                &lt;a href="https://www.vidnoz.com/privacy.html" target="_blank"&gt; ${selfLoginTxt['privacy-policy']} &lt;/a&gt;
            &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `;

        /*Bind some basic verification and rules*/
        this.firstUpdated();
        /*Clicks on the binding page*/
        this.toBindEvent();
        //Website button click to display login pop -up window
        loginButtonEvent()
    }

    //Login-Dialog-Body class different pop-ups add-on-class name ACCOUNT Register Success Verify Reset-PWD LINK (203 status code return type and mailbox) Almost
    //There are three ways to return to login successfully
    firstUpdated() {
        this.shadowRootEl = document.querySelector('.login-dialog')
        this.windowBody = this.shadowRootEl.querySelector('.login-dialog-body')
        this.loginInput = this.shadowRootEl.querySelector('.login-input')
        this.firstBtn = this.shadowRootEl.querySelector('.login-submit')
        this.loginAccountEmailInput = this.shadowRootEl.querySelector('.login-account-email')
        this.loginAccountPwd = this.shadowRootEl.querySelector('.login-account-pwd')
        this.loginAccountCode = this.shadowRootEl.querySelector('.login-account-code')
        this.loginAccountBtn = this.shadowRootEl.querySelector('.login-account-btn')
        this.loginRegisterEmailInput = this.shadowRootEl.querySelector('.login-register-email')
        this.loginRegisterFirstName = this.shadowRootEl.querySelector('.login-register-first-name')
        this.loginRegisterLastName = this.shadowRootEl.querySelector('.login-register-last-name')
        this.loginRegisterPwd = this.shadowRootEl.querySelector('.login-register-pwd')
        this.loginRegisterBtn = this.shadowRootEl.querySelector('.login-register-btn')
        this.loginResetPwdEmail = this.shadowRootEl.querySelector('.login-reset-pwd-email')
        this.loginResetPwdBtn = this.shadowRootEl.querySelector('.login-reset-pwd-btn')
        this.loginAlmostHereEmail = this.shadowRootEl.querySelector('.login-almost-here-email')
        this.loginAlmostHereBtn = this.shadowRootEl.querySelector('.login-almost-here-btn')
        this.loginLoginLinkPwd = this.shadowRootEl.querySelector('.login-link-pwd')
        this.loginLinkBtn = this.shadowRootEl.querySelector('.login-link-btn')
        this.verifyInputs = this.shadowRootEl.querySelectorAll('.login-verify-input-group input')
        this.checkbox = this.shadowRootEl.querySelector('.login-text .checkbox')
        this.checkboxTextBox = this.shadowRootEl.querySelector('.last-text')
        thirdPartyLogin(this)
        // this.getVerificationCode()
        //Set focusing on removing ERROR status
        this.inputList = [
            {
                inputDom: this.loginInput,
                btnDom: this.firstBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-input-box.error-tip-box')
            },
            {
                inputDom: this.loginAccountEmailInput,
                btnDom: this.loginAccountBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-account-email-box.error-tip-box')
            },
            {
                inputDom: this.loginAccountPwd,
                btnDom: this.loginAccountBtn
            },
            {
                inputDom: this.loginAccountCode,
                btnDom: this.loginAccountBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-account-code-input.error-tip-box')
            },
            {
                inputDom: this.loginRegisterEmailInput,
                btnDom: this.loginRegisterBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-register-email-box.error-tip-box')
            },
            {
                inputDom: this.loginRegisterFirstName,
                btnDom: this.loginRegisterBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-register-first-name-box.error-tip-box')
            },
            {
                inputDom: this.loginRegisterLastName,
                btnDom: this.loginRegisterBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-register-last-name-box.error-tip-box')
            },
            {
                inputDom: this.loginRegisterPwd,
                btnDom: this.loginRegisterBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-register-pwd-box.error-tip-box')
            },
            {
                inputDom: this.loginResetPwdEmail,
                btnDom: this.loginResetPwdBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-reset-pwd-email-box.error-tip-box')
            },
            {
                inputDom: this.loginAlmostHereEmail,
                btnDom: this.loginAlmostHereBtn,
                tipBoxDom: this.shadowRootEl.querySelector('.login-almost-here-email-box.error-tip-box')
            },
            {
                inputDom: this.loginLoginLinkPwd,
                btnDom: this.loginLinkBtn
            }
        ]
        this.inputList.map(item =&gt; {
            //this.inputfocus (item) // Focus
            this.inputPut(item) //Enter the button to set ash to remove the error state
            return false
        })

        //Forbidden space input
        $(this).keydown(function (e) {
            if (!e) e = window.event
            if (e.keyCode === 32) {
                return false
            }
        })

        this.loginInput.addEventListener('input', (e) =&gt; {
            const val = this.loginInput.value
            if (onCheckEmail(val)) {
                this.mainInputValue = val
            } else {
                this.mainInputValue = ''
            }
        })

        //Verify whether the qualified mailbox is registered
        this.loginInput.addEventListener('input', _debounce(() =&gt; {
            const val = this.loginInput.value
            if (onCheckEmail(val)) {
                sendEmailRequest({
                    data: val,
                    type: 'signin'
                }, this.shadowRootEl)
            }
        }))

        this.loginInput.addEventListener('blur', () =&gt; {
            const val = this.loginInput.value
            const tipBoxDom = this.loginInput.parentNode
            if (!onCheckEmail(val)) {
                this.loginInput.classList.add('error')
                tipBoxDom.classList.add('error')
            }
        })

        //Mailbox password login
        this.loginAccountEmailInput.addEventListener('input', () =&gt; {
            const val = this.loginAccountEmailInput.value
            if (onCheckEmail(val)) {
                this.changeAccountCheck('email')
            }
        })
        this.loginAccountEmailInput.addEventListener('blur', () =&gt; {
            const val = this.loginAccountEmailInput.value
            const tipBoxDom = this.loginAccountEmailInput.parentNode
            if (onCheckEmail(val)) {
                this.changeAccountCheck('email')
            } else {
                this.loginCheck.email = false
                this.loginAccountEmailInput.classList.add('error')
                tipBoxDom.classList.add('error')
            }
        })

        this.loginAccountPwd.addEventListener('input', () =&gt; {
            if (this.loginAccountPwd.value.length &gt;= 6) {
                this.changeAccountCheck('pwd')
            }
        })
        this.loginAccountPwd.addEventListener('blur', () =&gt; {
            if (this.loginAccountPwd.value.length &gt;= 6) {
                this.changeAccountCheck('pwd')
            } else {
                this.loginCheck.pwd = false
                // this.loginAccountPwd.classList.add('error')
            }
        })

        this.loginAccountCode.addEventListener('input', () =&gt; {
            const _code = this.loginAccountCode.value
            if (_code.length &lt; 4) return false
            _debounce(this.sendCodeRequest(_code))
        })

        this.loginAccountCode.addEventListener('blur', () =&gt; {
            if (this.loginAccountCode.value.length &lt; 4) {
                this.loginAccountCode.classList.add('error')
                this.loginAccountCode.parentNode.classList.add('error')
            }
        })

        // register
        this.loginRegisterEmailInput.addEventListener('input', (e) =&gt; {
            this.loginRegisterFirstName.removeAttribute('disabled')
            this.loginRegisterLastName.removeAttribute('disabled')
            this.loginRegisterPwd.removeAttribute('disabled')
            if (onCheckEmail(this.loginRegisterEmailInput.value)) {
                this.changeRegisterCheck('email')
            }
        })
        this.loginRegisterEmailInput.addEventListener('blur', () =&gt; {
            const _inputDom = this.loginRegisterEmailInput
            const val = _inputDom.value
            const tipBoxDom = _inputDom.parentNode
            if (onCheckEmail(val)) {
                this.changeRegisterCheck('email')
                _inputDom.classList.remove('error')
            } else {
                this.loginCheck.email = false
                _inputDom.classList.add('error')
                tipBoxDom.classList.add('error')
            }
        })
        this.loginRegisterFirstName.addEventListener('input', (e) =&gt; {
            if (this.loginRegisterFirstName.value.length) {
                this.changeRegisterCheck('firstName')
            }
        })
        this.loginRegisterFirstName.addEventListener('blur', () =&gt; {
            const _currentDom = this.loginRegisterFirstName
            const tipBoxDom = _currentDom.parentNode
            if (!_currentDom.value.length) {
                _currentDom.classList.add('error')
                tipBoxDom.classList.add('error')
                this.registerCheck.firstName = false
            } else {
                this.changeRegisterCheck('firstName')
                _currentDom.classList.remove('error')
                tipBoxDom.classList.remove('error')
            }
        })
        this.loginRegisterLastName.addEventListener('input', (e) =&gt; {
            if (this.loginRegisterLastName.value.length) {
                this.changeRegisterCheck('lastName')
            }
        })
        this.loginRegisterLastName.addEventListener('blur', () =&gt; {
            const _currentDom = this.loginRegisterLastName
            const tipBoxDom = _currentDom.parentNode
            if (!_currentDom.value.length) {
                _currentDom.classList.add('error')
                tipBoxDom.classList.add('error')
                this.registerCheck.lastName = false
            } else {
                this.changeRegisterCheck('lastName')
                _currentDom.classList.remove('error')
                tipBoxDom.classList.remove('error')
            }
        })
        this.loginRegisterPwd.addEventListener('input', (e) =&gt; {
            if (onCheckPassword(this.loginRegisterPwd.value)) {
                this.changeRegisterCheck('pwd')
            }
        })
        this.loginRegisterPwd.addEventListener('blur', () =&gt; {
            const _currentDom = this.loginRegisterPwd
            const tipBoxDom = _currentDom.parentNode.parentNode
            if (onCheckPassword(_currentDom.value)) {
                _currentDom.classList.remove('error')
                tipBoxDom.classList.remove('error')
                this.changeRegisterCheck('pwd')
            } else {
                this.registerCheck.pwd = false
                _currentDom.classList.add('error')
                tipBoxDom.classList.add('error')
            }
        })

        //Verify mailbox verification code
        this.verifyInputs.forEach((child, index) =&gt; {
            child.addEventListener('input', (e) =&gt; {
                this.shadowRootEl.querySelector('.login-verify-error-msg').style.visibility = 'hidden'
                child.value = child.value.replace(/\D/g, '')
                if (child.value.length &gt;= 1) {
                    index + 1 &lt;= this.verifyInputs.length - 1 &amp;&amp; this.verifyInputs[index + 1].focus()
                }
            })

            child.addEventListener('keydown', (e) =&gt; {
                if ((e.keyCode === 8 &amp;&amp; child.value === '') || (child.selectionStart === 0 &amp;&amp; e.keyCode === 8)) {
                    child.value &amp;&amp; e.preventDefault()
                    child.value = ''
                    index - 1 &gt;= 0 &amp;&amp; this.verifyInputs[index - 1].focus()
                }
            })
            //Paste verification code
            child.addEventListener('paste', e =&gt; {
                e.preventDefault()
                const clipboardData = e.clipboardData || window.clipboardData
                const pastedText = clipboardData.getData('text')
                for (let i = 0; i &lt; this.verifyInputs.length; i++) {
                    this.verifyInputs[i].value = pastedText[i] || ''
                }
                this.verifyInputs[0].dispatchEvent(new Event('input'))
                this.verifyInputs[pastedText.length &gt;= this.verifyInputs.length ? this.verifyInputs.length - 1 : pastedText.length].focus()
            })
        })
        // reset pwd
        this.loginResetPwdEmail.addEventListener('input', _debounce((e) =&gt; {
            const val = this.loginResetPwdEmail.value
            if (onCheckEmail(val)) {
                sendEmailRequest({
                    data: val,
                    type: 'resetPwd'
                }, this.shadowRootEl)
            }
        }))
        this.loginResetPwdEmail.addEventListener('blur', () =&gt; {
            const _inputDom = this.loginResetPwdEmail
            const val = _inputDom.value
            if (onCheckEmail(val)) {
                _inputDom.classList.remove('error')
            } else {
                _inputDom.parentNode.classList.add('error')
                _inputDom.classList.add('error')
                _inputDom.parentNode.querySelector('.error-tip').innerText = selfLoginTxt['invalid-email-address']
            }
        })

        // almost
        this.loginAlmostHereEmail.addEventListener('input', (e) =&gt; {
            this.shadowRootEl.querySelector('.login-almost-here-error-msg').style.visibility = 'hidden'
        })
        this.loginAlmostHereEmail.addEventListener('input', _debounce((e) =&gt; {
            const val = this.loginAlmostHereEmail.value
            if (onCheckEmail(val)) {
                this.loginAlmostHereBtn.removeAttribute('disabled')
            }
        }))
        this.loginAlmostHereEmail.addEventListener('blur', () =&gt; {
            const _inputDom = this.loginAlmostHereEmail
            const val = _inputDom.value
            if (onCheckEmail(val)) {
                this.loginAlmostHereBtn.removeAttribute('disabled')
            } else {
                _inputDom.parentNode.classList.add('error')
                _inputDom.classList.add('error')
                this.loginAlmostHereBtn.setAttribute('disabled', 'disabled')
            }
        })

        // link
        this.loginLoginLinkPwd.addEventListener('input', () =&gt; {
            const val = this.loginLoginLinkPwd.value
            if (val.trim().length &gt;= 6) {
                this.loginLinkBtn.removeAttribute('disabled')
            } else {
                this.loginLinkBtn.setAttribute('disabled', 'disabled')
            }
        })
        this.loginLoginLinkPwd.addEventListener('blur', () =&gt; {
            const _inputDom = this.loginLoginLinkPwd
            const val = _inputDom.value
            if (val.trim().length &gt;= 6) {
                _inputDom.classList.remove('error')
                this.loginLinkBtn.removeAttribute('disabled')
            } else {
                // _inputDom.classList.add('error')  
                this.loginLinkBtn.setAttribute('disabled', 'disabled')
            }
        })
        if (getEastEightEnglish()) {
            this.checkbox.addEventListener('click', () =&gt; {
                this.checkbox.classList.toggle('active');
            });
        }

    }

    toBindEvent() {
        this.shadowRootEl.querySelector('.login-close-btn').onclick = this.closeLoginDialog.bind(this);
        this.shadowRootEl.querySelector('.login-back-btn').onclick = this.historyBack.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn1').onclick = this.jumpFun.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn2').onclick = () =&gt; {
            this.toPath.bind(this)('account')
        };
        this.shadowRootEl.querySelector('.bingClickBtn3').onclick = this.eyeClick.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn3').onmouseenter = this.eyeOver.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn3').onmouseleave = this.eyeLeave.bind(this);

        this.shadowRootEl.querySelector('.bingClickBtn4').onclick = this.getVerificationCode.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn5').onclick = () =&gt; {
            this.toPath.bind(this)('reset-pwd')
        };

        this.shadowRootEl.querySelector('.bingClickBtn6').onclick = this.loginAccountSubmit.bind(this);

        this.shadowRootEl.querySelector('.bingClickBtn7').onclick = () =&gt; {
            this.toPath.bind(this)('register')
        };

        this.shadowRootEl.querySelector('.bingClickBtn8').onclick = this.eyeClick.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn8').onmouseenter = this.eyeOver.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn8').onmouseleave = this.eyeLeave.bind(this);

        this.shadowRootEl.querySelector('.bingClickBtn9').onclick = this.SubmitRegistration.bind(this);

        this.shadowRootEl.querySelector('.bingClickBtn10').onclick = () =&gt; {
            this.toPath.bind(this)('account')
        };

        this.shadowRootEl.querySelector('.bingClickBtn11').onclick = this.verifyCode.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn12').onclick = this.SendEmail.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn13').onclick = this.resetPwdSubmit.bind(this);

        this.shadowRootEl.querySelector('.bingClickBtn14').onclick = () =&gt; {
            this.toPath.bind(this)('account')
        };

        this.shadowRootEl.querySelector('.bingClickBtn15').onclick = () =&gt; {
            this.toPath.bind(this)('register')
        };

        this.shadowRootEl.querySelector('.bingClickBtn16').onclick = this.eyeClick.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn16').onmouseenter = this.eyeOver.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn16').onmouseleave = this.eyeLeave.bind(this);

        this.shadowRootEl.querySelector('.bingClickBtn17').onclick = () =&gt; {
            this.toPath.bind(this)('reset-pwd')
        };

        this.shadowRootEl.querySelector('.bingClickBtn18').onclick = this.loginLinkSubmit.bind(this);
        this.shadowRootEl.querySelector('.bingClickBtn19').onclick = this.almostHereSubmit.bind(this);

    }

    closeLoginDialog(e) {
        if (e?.target.classList.contains('login-close-btn')) {
            this.windowBody.classList.value.trim() === 'login-dialog-body' &amp;&amp; gtag('event', 'registerpop_close_official')
            this.windowBody.classList.contains('register') &amp;&amp; gtag('event', 'registerpop_email_close_official')
            this.windowBody.classList.contains('verify') &amp;&amp; gtag('event', 'registerpop_email_closeverify_official')
            this.windowBody.classList.contains('account') &amp;&amp; gtag('event', 'registerpop_login_close_official')
        }
        if (this.shadowRootEl) {
            this.shadowRootEl.style.display = 'none'
            this.dispatchEvent(new CustomEvent('closeLoginDialog'))
        }
        this.dispatchEvent(new CustomEvent('cancelbtnclick'))
        this.checkbox.classList.remove('active')
    }

    showLoginDialog(isWait = null) {
        wait = isWait;
        if (this.shadowRootEl) {
            this.shadowRootEl.style.display = 'flex'
        }
        this.initDialog()
        gtag('event', 'registerpop_show_official')
    }

    initDialog() {
        this.getVerificationCode()
        this.windowBody.classList = 'login-dialog-body'
        this.mainInputValue = ''
        this.shadowRootEl.querySelector('.login-almost-here-error-msg').innerHTML = ''
        this.shadowRootEl.querySelectorAll('input').forEach(child =&gt; {
            child.value = ''
            const inputEvent = new CustomEvent('input')
            child.dispatchEvent(inputEvent)
        })
        this.shadowRootEl.querySelectorAll('button:not([data-btn="no-init"])').forEach(child =&gt; {
            child.setAttribute('disabled', 'disabled')
            child.classList.remove('btn-loading')
        })
    }

    localInit(addClassName) {
        this.shadowRootEl.querySelector(`.${addClassName}`).querySelectorAll('input').forEach(child =&gt; {
            child.value = ''
            const inputEvent = new CustomEvent('input')
            child.dispatchEvent(inputEvent)
        })
        this.shadowRootEl.querySelector(`.${addClassName}`).querySelectorAll('button:not([data-btn="no-init"])').forEach(child =&gt; {
            child.setAttribute('disabled', 'disabled')
            child.classList.remove('btn-loading')
        })
    }

    historyBack() {
        if (this.history === 'reset-pwd') {
            if (this.resetBackLink) {
                this.history = 'link'
                this.resetBackLink = false
            } else {
                this.history = 'account'
            }
        } else if (this.history === 'verify') {
            if (this.isAccount === 'true') {
                this.isAccount = ''
                this.history = 'account'
            } else {
                this.history = 'register'
            }
        } else {
            this.history = ''
            if (!this.loginInput.value) {
                const inputEvent = new CustomEvent('input')
                this.loginInput.dispatchEvent(inputEvent)
            }
        }
        if (this.prePage === 'verify') {
            this.prePage = ''
            this.loginRegisterFirstName.setAttribute('disabled', 'disabled')
            this.loginRegisterLastName.setAttribute('disabled', 'disabled')
            this.loginRegisterPwd.setAttribute('disabled', 'disabled')
        } else {
            this.loginRegisterFirstName.removeAttribute('disabled')
            this.loginRegisterLastName.removeAttribute('disabled')
            this.loginRegisterPwd.removeAttribute('disabled')
        }
        this.windowBody.classList = `login-dialog-body ${this.history}`
    }

    toPath(path) {
        if (getEastEightEnglish()) {
            if (!this.checkbox.classList.contains('active')) {
                this.checkboxTextBox.classList.add('shake')
                setTimeout(() =&gt; {
                    this.checkboxTextBox.classList.remove('shake')
                }, 500)
                return
            }
        }
        // ga
        if (path === 'account') {
            this.windowBody.classList.value.trim() === 'login-dialog-body' &amp;&amp; gtag('event', 'registerpop_signin_official')
            this.windowBody.classList.contains('register') &amp;&amp; gtag('event', 'registerpop_email_sigin_official')
        }
        if (path === 'register') {
            this.windowBody.classList.contains('account') &amp;&amp; gtag('event', 'registerpop_login_register_official')
        }
        // ga
        if (path === 'reset-pwd' &amp;&amp; this.history === 'link') {
            this.resetBackLink = true
        }
        this.history = path
        if (path === 'reset-pwd') {
            let resetVal = ''
            if (this.windowBody.classList.contains('account')) {
                resetVal = this.loginAccountEmailInput.value
            } else if (this.windowBody.classList.contains('link')) {
                resetVal = this.linkEmail
            }
            if (onCheckEmail(resetVal)) {
                this.loginResetPwdEmail.value = resetVal
                this.loginResetPwdEmail.dispatchEvent(new CustomEvent('input'))
            }
        } else if (path === 'account') {
            this.localInit('login-account')
            this.loginCheck = {
                email: false,
                pwd: false,
                code: false
            }
            this.loginAccountEmailInput.value = this.mainInputValue
            this.changeAccountCheck('email')
        } else if (path === 'register') {
            this.localInit('login-register')
            this.registerCheck = {
                email: false,
                firstName: false,
                lastName: false,
                pwd: false
            }
            this.loginRegisterEmailInput.value = this.mainInputValue
            this.changeRegisterCheck('email')
        } else if (path === 'almost') {
            this.localInit('login-almost-here')
            this.shadowRootEl.querySelector('.login-almost-here-error-msg').style.visibility = 'hidden'
        } else if (path === 'verify') {
            this.verifyInputs.forEach(child =&gt; {
                child.value = ''
            })
            this.shadowRootEl.querySelector('.login-verify-error-msg').style.visibility = 'hidden'
        }
        if (path === 'verify') {
            this.prePage = 'verify'
            this.loginRegisterFirstName.setAttribute('disabled', 'disabled')
            this.loginRegisterLastName.setAttribute('disabled', 'disabled')
            this.loginRegisterPwd.setAttribute('disabled', 'disabled')
        } else {
            this.prePage = ''
            this.loginRegisterFirstName.removeAttribute('disabled')
            this.loginRegisterLastName.removeAttribute('disabled')
            this.loginRegisterPwd.removeAttribute('disabled')
        }

        this.windowBody.classList = `login-dialog-body ${path}`
    }

    jumpFun() {
        if (getEastEightEnglish()) {
            if (!this.checkbox.classList.contains('active')) {
                this.checkboxTextBox.classList.add('shake')
                setTimeout(() =&gt; {
                    this.checkboxTextBox.classList.remove('shake')
                }, 500)
                return
            }
        }
        // this.firstBtn.setAttribute('disabled', 'disabled')
        let btnAnchor = this.firstBtn.getAttribute('anchor')
        //Click in three cases 1. Go to the registration window 2. Account password login 3. Google Microsoft Facebook LinkedIn
        btnAnchor === 'register' &amp;&amp; gtag('event', 'registerpop_email_official')
        if (btnAnchor === 'register' || btnAnchor === 'account' || btnAnchor === 'apple') {
            btnAnchor = btnAnchor === 'apple' ? 'account' : btnAnchor
            this.toPath(btnAnchor)
        } else {
            if (detectDeviceType() === "mobile") {
                winRef = window.open("", "_blank");
            } else {
                winRef = window.open("", "_blank", windowFeatures);
            }
            const appLoginId = !isBlank(getUrlParam('loginId')) ? getUrlParam('loginId') : ''
            LogIn.bind(this)({
                type: btnAnchor,
                loginId: appLoginId,
                aff: getCookie('aff') ? JSON.parse(getCookie('aff')) : '',
                insur: getCookie('insur'),
                code: getUrlParam('code')
            })
        }
    }

    domAddClassName(queryClassName, addClassName) {
        const dom = this.shadowRootEl.querySelector(`.${queryClassName}`)
        if (dom) {
            dom.classList.add(addClassName)
        }
    }

    showSuccessWindow() {
        this.shadowRootEl.querySelector('.login-dialog-body').classList = 'login-dialog-body success'
    }

    loginSuccess(data = null) {
        typeof setHead === 'function' &amp;&amp; setHead()
        this.dispatchEvent(new CustomEvent('loginsuccess', {
            detail: data
        }))
        this.closeLoginDialog()
    }


    eyeClick(e) {
        const dom = e.target
        const inputDom = dom.parentNode.querySelector('input')
        if (dom.classList.contains('on')) {
            dom.classList.remove('on')
            inputDom.setAttribute('type', 'password')
            dom.setAttribute('title', selfLoginTxt['show-password'])
        } else {
            dom.setAttribute('title', selfLoginTxt['hide-password'])
            inputDom.setAttribute('type', 'text')
            dom.classList.add('on')
        }
        inputDom.focus()
        this.eyeOver(e)
    }

    //Solve the click error state flashing
    eyeOver(e) {
        const inputDom = e.target.parentNode.querySelector('input')
        //Determine whether to focus
        if (document.activeElement === inputDom) {
            inputDom.classList.add('eyeover')
            this.inputList.map(item =&gt; {
                if (item.inputDom === inputDom &amp;&amp; item.tipBoxDom) {
                    item.tipBoxDom.classList.add('eyeover')
                }
                return false
            })
        }
    }

    eyeLeave(e) {
        const inputDom = e.target.parentNode.querySelector('input')
        inputDom.classList.remove('eyeover')
        this.inputList.map(item =&gt; {
            if (item.inputDom === inputDom &amp;&amp; item.tipBoxDom) {
                item.tipBoxDom.classList.remove('eyeover')
            }
            return false
        })
    }

    getVerificationCode = _debounce(() =&gt; {
        jqAjaxPromise({
            url: '/api/user/code', type: 'POST'
        }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then((res) =&gt; {
                if (res.code === 200) {
                    $('#codepic').find('img').attr('src', res.data.img)
                    this.shadowRootEl.querySelector('.login-account-code-img-box img').setAttribute('src', res.data.img)
                    if (this.loginCheck.code) {
                        this.loginCheck.code = false
                        this.loginAccountCode.classList.add('error')
                        this.loginAccountCode.parentNode.classList.add('error')
                        this.loginAccountBtn.setAttribute('disabled', 'disabled')
                    }
                } else {
                    console.log('fail')
                }
            })
    })

    changeAccountCheck(type) {
        this.loginCheck[type] = true
        if (this.loginCheck.email &amp;&amp; this.loginCheck.pwd &amp;&amp; this.loginCheck.code) {
            this.loginAccountBtn.removeAttribute('disabled')
        }
    }

    //Verify whether the CODE input is correct
    sendCodeRequest(param) {
        jqAjaxPromise({ url: '/api/user/check-code', type: 'POST', data: { code: param } }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then((res) =&gt; {
                if (res.code === 200) {
                    if (containsVal(res.code === param)) {
                        this.changeAccountCheck('code')
                    } else {
                        this.loginCheck.code = false
                        this.loginAccountCode.classList.add('error')
                        this.loginAccountCode.parentNode.classList.add('error')
                    }
                } else {
                    this.loginCheck.code = false
                    this.loginAccountCode.classList.add('error')
                    this.loginAccountCode.parentNode.classList.add('error')
                }
            })
    }

    loginAccountSubmit(e) {
        gtag('event', 'registerpop_login_click_official')
        $('body').append(clientMask)
        const btnDom = e.currentTarget
        btnDom.classList.add('btn-loading')
        LoginSubmission.bind(this)({
            email: this.loginAccountEmailInput.value,
            password: this.loginAccountPwd.value,
            fromType: 1
        }, () =&gt; {
            btnDom.classList.remove('btn-loading')
            clientMask.remove()
        }, this.isTemplateType)
    }

    // register
    changeRegisterCheck(type) {
        this.registerCheck[type] = true
        if (this.registerCheck.email &amp;&amp; this.registerCheck.firstName &amp;&amp; this.registerCheck.lastName &amp;&amp; this.registerCheck.pwd) {
            this.loginRegisterBtn.removeAttribute('disabled')
        }
    }

    inputPut(item) {
        const input = item.inputDom
        const btn = item.btnDom
        const tipBoxDom = item.tipBoxDom
        input.addEventListener('input', () =&gt; {
            btn.setAttribute('disabled', 'disabled')
            input.classList.remove('error')
            if (tipBoxDom) {
                tipBoxDom.classList.remove('error', 'error-interim')
            }
        })
    }

    SubmitRegistration(e) {
        gtag('event', 'registerpop_email_click_official')
        $('body').append(clientMask)
        const btnClassList = e.currentTarget.classList
        btnClassList.add('btn-loading')
        const param = {
            email: this.loginRegisterEmailInput.value,
            first_name: this.loginRegisterFirstName.value,
            last_name: this.loginRegisterLastName.value,
            password: this.loginRegisterPwd.value,
            fromType: 1,
            aff: getCookie('aff') ? JSON.parse(getCookie('aff')) : '',
            insur: getCookie('insur'),
            code: getUrlParam('code'),
        }
        jqAjaxPromise({
            url: '/api/user/signup', type: 'POST', data: param
        }, () =&gt; { }, this.isTemplateType ? 'canva' : (isMobile() ? 'mobile' : 'web'))
            .then((res) =&gt; {
                if (res.code === 200) {
                    const userTraits = {
                        id: '',
                        email: param.email,
                        first_name: param.first_name,
                        last_name: param.last_name,
                        head_portrait: ''
                    }
                    setStorage('user_info', userTraits)
                    setCookie('user_info', JSON.stringify(userTraits), 30)
                    this.verifyEmail = param.email
                    this.toPath('verify')
                } else if (res.code === 1003) {
                    gtag('event', 'registerpop_email_failshow_official')
                    Modal({ iconType: 'hint', titleText: selfLoginTxt['registration-failed'], content: selfLoginTxt['registration-limit-exceeded-if-you-have-any-questions'] })
                } else if (res.code === 1006) {
                    this.verifyEmail = param.email
                    this.toPath('verify')
                } else if (res.code === 1008) {
                    this.shadowRootEl.querySelector('.login-register-email-box.error-tip-box').classList.add('error-interim')
                    this.shadowRootEl.querySelector('.login-register-email-box.error-tip-box input').classList.add('error')
                } else if (res.code === 400) {
                    gtag('event', 'registerpop_email_failshow_official')
                    Modal({ iconType: 'hint', titleText: selfLoginTxt['this-email-address-is-already-registered'] })
                } else {
                    console.log('fail')
                    gtag('event', 'registerpop_email_failshow_official')
                    Modal({ iconType: 'hint', titleText: selfLoginTxt['sign-up-failed-please-try-again-later'] })
                }
            }).catch(() =&gt; {
                gtag('event', 'registerpop_email_failshow_official')
                Modal({ iconType: 'hint', titleText: selfLoginTxt['sign-up-failed-please-try-again-later'] })
            }).finally(() =&gt; {
                btnClassList.remove('btn-loading')
                clientMask.remove()
            })
    }

    // verify email
    verifyCode(e) {
        gtag('event', 'registerpop_email_verify_official')
        $('body').append(clientMask)
        const btnClassList = e.currentTarget.classList
        btnClassList.add('btn-loading')
        const errorDom = this.shadowRootEl.querySelector('.login-verify-error-msg')
        let code = ''
        this.verifyInputs.forEach(child =&gt; {
            code += child.value
        })
        if (code.length &lt; 6) {
            errorDom.style.visibility = 'visible'
            btnClassList.remove('btn-loading')
            clientMask.remove()
            return
        }
        const appLoginId = !isBlank(getUrlParam('loginId')) ? getUrlParam('loginId') : ''
        let param = {
            email: this.verifyEmail,
            code,
            loginId: appLoginId
        }
        param = getNewParam(param)
        jqAjaxPromise({
            url: '/api/user/verify-code', type: 'POST', data: param
        }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then(async (res) =&gt; {
                // console.log(res);
                if (res.code === 200) {
                    errorDom.style.visibility = 'hidden'
                    const userTraits = {
                        id: res.data.id,
                        email: res.data.email,
                        first_name: res.data.first_name,
                        last_name: res.data.last_name,
                        head_portrait: res.data.head_portrait,
                        usertype: res.data.type,

                    }
                    setCookie('access_token', res.data.access_token, 30)
                    setCookie('refresh_token', res.data.access_token, 30)
                    setCookie('loginProduct', res.data.redirect_url, 30)
                    setCookie('fallBackLang', 'en', 30)

                    setStorage('user_info', userTraits)
                    setCookie('user_info', JSON.stringify(userTraits), 30)
                    setStorage('isReplace', true)

                    const resData = await jqAjaxPromise({ url: `/api/site/app-config?t=${new Date().getTime()}` })
                    setCookie('userCountryGradient', resData.data.user_country_gradient)

                    const toolParams = localStorage.getItem('toolsPosition')
                    const productToPagelocal = localStorage.getItem('productToPage')
                    if (judgeClient() === 'ios' &amp;&amp; ~~resData.data.user_country_gradient === 3 &amp;&amp; !noIosReplaceT3.includes(cataLogueAfter)) {
                        location.reload()
                        return
                    } else if (!toolParams &amp;&amp; !productToPagelocal) {
                        if (!toCurrentLangApp(localStorage.getItem('loginProductName'))) {
                            location.href = res.data.redirect_url
                        }
                    } else if (toolParams === 'true') {
                        location.reload()
                    }
                    this.toPath('success')
                    setTimeout(() =&gt; {
                        this.loginSuccess()
                    }, 2000)
                } else {
                    errorDom.style.visibility = 'visible'
                }
            }).catch(() =&gt; {
                console.log('fail')
                errorDom.style.visibility = 'visible'
            }).finally(() =&gt; {
                btnClassList.remove('btn-loading')
                clientMask.remove()
            })
    }

    SendEmail(e) {
        gtag('event', 'registerpop_email_resendverify_official')
        const btnClassList = e.currentTarget.classList
        btnClassList.add('btn-loading')
        const param = {
            email: this.verifyEmail,
            fromType: 1
        }
        jqAjaxPromise({
            url: '/api/user/resend-register-code', type: 'POST', data: param
        }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then((res) =&gt; {
                // console.log(res);
                if (res.code === 200) {
                    Modal({
                        iconType: 'right',
                        isClose: 'false',
                        titleText: `${selfLoginTxt['weve-sent-a-new-email-with-a-verification-link-to']} ${this.verifyEmail}`
                    })
                } else {
                    console.log('fail')
                }
            }).catch(() =&gt; {
                console.log('fail')
            }).finally(() =&gt; {
                btnClassList.remove('btn-loading')
            })
    }

    // reset pwd
    resetPwdSubmit(e) {
        const val = this.loginResetPwdEmail.value
        const btnClassList = e.currentTarget.classList
        btnClassList.add('btn-loading')
        jqAjaxPromise({
            url: '/api/user/reset-password', type: 'POST', data: { email: val, productName: localStorage.getItem('loginProductName') || 'ai' }
        }, () =&gt; { }, isMobile() ? 'mobile' : 'web').then((res) =&gt; {
            console.log(res)
            if (res.code === 200) {
                Modal({
                    iconType: 'right',
                    isClose: 'false',
                    titleText: `${selfLoginTxt['a-link-to-reset-your-password-has-been-sent-to']} ${val}. ${selfLoginTxt['please-check-your-inbox']}`
                })

                $('confirm-dialog').off('submit').on('submit', () =&gt; {
                    this.closeLoginDialog()
                })
            } else {
                console.log('fail')
            }
        }).finally(() =&gt; {
            btnClassList.remove('btn-loading')
        })
    }

    // almost here
    almostHereSubmit(e) {
        $("body").append(clientMask)
        const data = this.loginAlmostHereEmail.value
        const btnClassList = e.currentTarget.classList
        const errorDom = this.shadowRootEl.querySelector('.login-almost-here-error-msg')
        errorDom.innerText = ''
        btnClassList.add('btn-loading')
        jqAjaxPromise({ url: '/api/user/bind-email', type: 'POST', data: { email: data } }, () =&gt; { }, isMobile() ? 'mobile' : 'web')
            .then((res) =&gt; {
                if (res.code === 200) {
                    getLoginStatus.bind(this)(this.almostLoginId)
                    errorDom.style.visibility = 'hidden'
                } else {
                    if (res.code === 409) {
                        errorDom.innerText = selfLoginTxt['an-account-with-this-email-already-exists-please-try-a-different-email-address']
                    } else if (res.code === 1008) {
                        this.shadowRootEl.querySelector('.login-almost-here-email-box.error-tip-box').classList.add('error-interim')
                        this.shadowRootEl.querySelector('.login-almost-here-email-box.error-tip-box input').classList.add('error')
                    } else {
                        errorDom.innerText = selfLoginTxt['email-verification-failed-please-try-again-later']
                    }
                    clientMask.remove()
                    errorDom.style.visibility = 'visible'
                    btnClassList.remove('btn-loading')
                }
            }).catch(() =&gt; {
                errorDom.innerText = selfLoginTxt['email-verification-failed-please-try-again-later']
                errorDom.style.visibility = 'visible'
                btnClassList.remove('btn-loading')
                clientMask.remove()
            })
    }

    // login Link
    setLinkInfo(info) {
        const { email = '', type = '' } = info
        this.linkEmail = email
        this.linkType = type
        this.shadowRootEl.querySelector('.link-email').innerHTML = email
        this.shadowRootEl.querySelector('.link-type').innerHTML = type
    }

    loginLinkSubmit(e) {
        $('body').append(clientMask)
        const btnClassList = e.currentTarget.classList
        btnClassList.add('btn-loading')
        LoginSubmission.bind(this)({
            email: this.linkEmail,
            password: this.loginLoginLinkPwd.value,
            fromType: 1
        }, () =&gt; {
            btnClassList.remove('btn-loading')
            clientMask.remove()
        }, this.isTemplateType)
    }


}

//Register a custom component
customElements.define('my-component', MyComponent);
</pre></body></html>