class LoginPrompt {
    constructor() {
        this.element = null;
    }

    mountOn(target) {
        if (this.element)
            return; // Already mounted
        
        this.element = document.createRange().createContextualFragment(`
            <div class="Card Card-ui-bottom LoginPrompt">
                <h2>Login</h2>
                <input type="password" id="code-input" class="input full-width" placeholder="Code">
                <button id="continue-button" class="button-default full-width">Continue</button>
            </div>
        `).children[0];

        this.element.querySelector("#continue-button").addEventListener("click", () => {
            if (this.onPasswordSubmitted)
                this.onPasswordSubmitted(this.element.querySelector("#code-input").value);
        });

        target.appendChild(this.element);
    }

    unmount() {
        if (!this.element)
            return; // Already unmounted

        this.element.parentElement.removeChild(this.element);
        this.element = null;
    }
}

export default LoginPrompt;