66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
/**
|
|
* Root app component — routes between LockScreen and MainLayout.
|
|
*/
|
|
|
|
import { Component } from './components/component.js'
|
|
import { LockScreen } from './components/LockScreen.js'
|
|
import { MainLayout } from './components/MainLayout.js'
|
|
import { app } from './lib/stores/app.js'
|
|
|
|
export class App extends Component {
|
|
_lockScreen = null
|
|
_mainLayout = null
|
|
|
|
mount() {
|
|
super.mount()
|
|
|
|
// Set meta tags (preserve existing <style> and <script> tags from the build)
|
|
const head = document.head
|
|
// Only remove meta/link tags, keep style/script
|
|
head.querySelectorAll('meta, link').forEach(el => el.remove())
|
|
|
|
const charset = document.createElement('meta')
|
|
charset.setAttribute('charset', 'UTF-8')
|
|
head.appendChild(charset)
|
|
|
|
const viewport = document.createElement('meta')
|
|
viewport.setAttribute('name', 'viewport')
|
|
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0')
|
|
head.appendChild(viewport)
|
|
|
|
document.title = 'Password Vault'
|
|
|
|
// Subscribe to isUnlocked to swap views
|
|
this.subscribe(app, 'isUnlocked', (unlocked) => this.#swapView(unlocked))
|
|
|
|
// Initial render
|
|
this.#swapView(app.isUnlocked)
|
|
|
|
return this
|
|
}
|
|
|
|
#swapView(unlocked) {
|
|
// Destroy current view
|
|
if (this._lockScreen) { this._lockScreen.destroy(); this._lockScreen = null }
|
|
if (this._mainLayout) { this._mainLayout.destroy(); this._mainLayout = null }
|
|
|
|
// Clear container
|
|
if (this.container) this.container.innerHTML = ''
|
|
|
|
// Mount new view
|
|
if (unlocked) {
|
|
this._mainLayout = new MainLayout(this.container)
|
|
this._mainLayout.mount()
|
|
} else {
|
|
this._lockScreen = new LockScreen(this.container)
|
|
this._lockScreen.mount()
|
|
}
|
|
}
|
|
|
|
destroy() {
|
|
if (this._lockScreen) this._lockScreen.destroy()
|
|
if (this._mainLayout) this._mainLayout.destroy()
|
|
super.destroy()
|
|
}
|
|
}
|