2021-11-08 00:25:27 +02:00
|
|
|
class LoginPrompt {
|
|
|
|
constructor() {
|
|
|
|
this.element = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
mountOn(target) {
|
|
|
|
if (this.element)
|
|
|
|
return; // Already mounted
|
|
|
|
|
|
|
|
this.element = document.createRange().createContextualFragment(`
|
2022-08-26 15:56:42 +03:00
|
|
|
<div class="Card Card-ui-bottom Card-centered-text">
|
2021-11-08 00:25:27 +02:00
|
|
|
<h2>Login</h2>
|
|
|
|
<p>You need to enter the login code before you can start controlling your device.</p>
|
|
|
|
<br>
|
|
|
|
<div class="full-width">
|
|
|
|
<input type="password" id="code-input" class="input full-width" placeholder="Code">
|
|
|
|
<br>
|
|
|
|
<button id="continue-button" class="button-default full-width">Continue</button>
|
|
|
|
</div>
|
|
|
|
</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;
|