add custom app w/ login page

3 years ago · 5bfc5bbb22
1 changed files with 127 additions and 0 deletions
--- a/app.js
+++ b/app.js
@ -0,0 +1,127 @@
 import { Storage } from "/storage/storage.js"
 import { Layout } from "/components/layout.js"
 import { Page } from "/components/page.js"
 import { PageActions } from "/components/page-actions.js"
 import { FileGroupPage } from "/components/file-group-page.js"
 import { Header } from "/components/header.js"
 import { NavMenu } from "/components/nav-menu.js"
 import { Dialog } from "/dialog/dialog.js"
 import { ButtonGroup } from "/forms/button-group.js"
 import { Dropdown } from "/menu/dropdown.js"
 import { NetworkSettings } from "/settings/network-settings.js"
 import { PageSettings } from "/settings/page-settings.js"
 import { Connections } from "/settings/connections.js"
 import { ConnectionEdit } from "/settings/connection-edit.js"
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
 customElements.define('m-page-actions', PageActions)
 customElements.define(
  'm-settings-network-settings', NetworkSettings
 )
 customElements.define(
  'm-settings-page-settings', PageSettings
 )
 customElements.define(
  'm-settings-connections', Connections
 )
 customElements.define(
  'm-settings-connection-edit', ConnectionEdit
 )
 customElements.define(
  'm-file-group-page', FileGroupPage
 )
 customElements.define('m-header', Header)
 customElements.define('m-nav-menu', NavMenu)
 customElements.define('m-dialog', Dialog)
 customElements.define(
  'm-forms-button-group', ButtonGroup
 )
 customElements.define(
  'm-menu-dropdown', Dropdown
 )
 const signInHtml = `<!doctype html>
 <html>
  <head>
    <title>Sign In</title>
    <base target="_top">
  </head>
  <body>
    <p>
      <a href="/macchiato/api/auth">
        Sign In
      </a>
    </p>
  </body>
 </html>`
 const authPage = JSON.stringify({
  type: 'm-file-group',
  files: [
    {
      name: 'index.html',
      data: signInHtml,
    },
  ],
 })
 class Setup {
  constructor() {
    this.layout = document.createElement(
      'm-layout'
    )
    this.layout.storage = new Storage()
    this.layout.storage.addPlugin(path => {
      if (path === '/macchiato/auth') {
        return authPage
      }
    })
  }
  async runWithSw() {
    navigator.serviceWorker.addEventListener(
      'controllerchange',
      () => {
        if (this.registration.active) {
          window.location.reload(true)
        }
      }
    )
    await this.register()
    this.load()
  }
  async runWithoutSw() {
    this.layout.csp = undefined
    this.layout.header.menu.handleLinks = true
    document.body.appendChild(this.layout)
  }
  async register() {
    try {
      this.registration =
        await navigator.serviceWorker.register(
          '/sw.js',
          {scope: '/'}
        )
      if (this.registration.waiting) {
        this.registration.active.postMessage(['skipWaiting'])
      }
    } catch (err) {
      console.error(
        'error registering service worker', err
      )
    }
  }
  load() {
    if (this.registration.active) {
      document.body.appendChild(
        this.layout
      )
    }
  }
 }
 new Setup().runWithSw()