41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
|
class LoginPrompt {
|
||
|
|
constructor() {
|
||
|
|
this.element = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
mountOn(target) {
|
||
|
|
if (this.element)
|
||
|
|
return; // Already mounted
|
||
|
|
|
||
|
|
this.element = document.createRange().createContextualFragment(`
|
||
|
|
<div class="card small-card center-text">
|
||
|
|
<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;
|