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()