@crombolo/backoffice-host 0.13.2 → 0.14.1

package/plugin/sign-in/sign-in-dialog.js

@@ -0,0 +1,127 @@
+/**
+ * The dialog shown when a session ends while the backoffice is open: crombolo's
+ * own, laid out as the login page is. Signing in opens the login page in a
+ * pop-up, as the client's dialog does, so what was on screen stays put.
+ *
+ * Closes once whichever comes first reports the session back: the sign-in it
+ * started, or another tab signing in.
+ */
+import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth'
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server'
+
+/** The identity provider the server's authorize endpoint knows; nothing displays it. */
+const PROVIDER = 'Umbraco'
+const LOGO = '/umbraco/management/api/v1/security/back-office/graphics/login-logo-alternative'
+
+export class CromboloSignInDialogElement extends UmbModalBaseElement {
+  static properties = {
+    _logo: { state: true },
+    _busy: { state: true },
+    _error: { state: true },
+  }
+
+  #auth
+  #closed = false
+
+  constructor() {
+    super()
+    this.consumeContext(UMB_SERVER_CONTEXT, (server) => {
+      this._logo = `${server?.getServerUrl() ?? ''}${LOGO}`
+    })
+    this.consumeContext(UMB_AUTH_CONTEXT, (auth) => {
+      this.#auth = auth
+      this.observe(auth?.isAuthorized, (authorized) => {
+        if (authorized) this.#close()
+      })
+    })
+  }
+
+  get #timedOut() {
+    return this.data?.userLoginState === 'timedOut'
+  }
+
+  #close() {
+    if (this.#closed) return
+    this.#closed = true
+    this.value = { success: true }
+    this._submitModal()
+  }
+
+  async #signIn() {
+    if (!this.#auth) return
+    this._busy = true
+    this._error = undefined
+    try {
+      // A pop-up when the session timed out, so the page underneath survives;
+      // otherwise the whole window goes to the login page.
+      await this.#auth.makeAuthorizationRequest(PROVIDER, !this.#timedOut)
+      if (this.#auth.getIsAuthorized()) this.#close()
+    } catch {
+      this._error = 'Signing in did not complete. Try again.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  render() {
+    return html`<div id="layout">
+      <uui-box id="card">
+        ${this._logo ? html`<img id="logo" src=${this._logo} alt="" />` : nothing}
+        <h1 class="uui-h3">${this.#timedOut ? 'Your session has ended' : 'Sign in'}</h1>
+        ${this.#timedOut ? html`<p>Sign in again to carry on where you left off.</p>` : nothing}
+        ${this._error ? html`<p id="error">${this._error}</p>` : nothing}
+        <uui-button
+          look="primary"
+          color="positive"
+          label="Sign in"
+          .state=${this._busy ? 'waiting' : undefined}
+          @click=${() => this.#signIn()}
+        ></uui-button>
+      </uui-box>
+    </div>`
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100vw;
+      height: 100vh;
+      background: var(--uui-color-surface-alt, #f4f4f4);
+    }
+    #layout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 16px;
+      box-sizing: border-box;
+    }
+    #card {
+      width: 100%;
+      max-width: 400px;
+    }
+    #logo {
+      display: block;
+      height: 48px;
+      margin-bottom: var(--uui-size-space-4, 12px);
+    }
+    h1 {
+      margin: 0 0 var(--uui-size-space-4, 12px);
+    }
+    p {
+      margin: 0 0 var(--uui-size-space-5, 18px);
+    }
+    #error {
+      color: var(--uui-color-danger, #d42054);
+    }
+    uui-button {
+      width: 100%;
+    }
+  `
+}
+
+customElements.define('crombolo-sign-in-dialog', CromboloSignInDialogElement)
+
+export default CromboloSignInDialogElement

package/plugin/sign-in/umbraco-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
+  "name": "Crombolo Sign-in Dialog",
+  "id": "Crombolo.SignInDialog",
+  "version": "0.14.1",
+  "allowPublicAccess": true,
+  "extensions": [
+    {
+      "type": "appEntryPoint",
+      "alias": "Crombolo.AppEntryPoint.SignInDialog",
+      "name": "Crombolo Sign-in Dialog",
+      "js": "/crombolo-plugin/sign-in/entry.js"
+    }
+  ]
+}

package/plugin/two-factor-setup.js

@@ -0,0 +1,147 @@
+/**
+ * Sets up an authenticator app for the signed-in user (story 032): the QR code,
+ * the first code to prove the app has it, then the recovery codes, shown once.
+ * Umbraco's own setup screen throws the recovery codes away, hence this one.
+ */
+
+import { UmbCurrentUserRepository } from '@umbraco-cms/backoffice/current-user'
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+
+const endpoint = (providerName) =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/management/api/v1/user/current/2fa/${encodeURIComponent(providerName)}`
+
+export default class CromboloTwoFactorSetupElement extends UmbLitElement {
+  static properties = {
+    providerName: { attribute: false },
+    displayName: { attribute: false },
+    close: { attribute: false },
+    _setup: { state: true },
+    _error: { state: true },
+    _codes: { state: true },
+    _busy: { state: true },
+  }
+
+  constructor() {
+    super()
+    this.providerName = ''
+    this.displayName = ''
+    this.close = () => {}
+    this._setup = undefined
+    this._error = undefined
+    this._codes = undefined
+    this._busy = false
+    this.#repository = new UmbCurrentUserRepository(this)
+  }
+
+  #repository
+
+  async firstUpdated() {
+    const response = await fetch(endpoint(this.providerName), {
+      credentials: 'include',
+      headers: { accept: 'application/json' },
+    })
+    const body = await response.json().catch(() => ({}))
+    if (!response.ok || !body.secret) {
+      this._error = body.detail ?? 'Two-factor sign-in cannot be set up right now.'
+      return
+    }
+    this._setup = body
+  }
+
+  async #submit(event) {
+    event.preventDefault()
+    const code = new FormData(event.target).get('code')?.toString().trim()
+    if (!code) return
+    this._busy = true
+    this._error = undefined
+    const response = await fetch(endpoint(this.providerName), {
+      method: 'POST',
+      credentials: 'include',
+      headers: { accept: 'application/json', 'content-type': 'application/json' },
+      body: JSON.stringify({ code, secret: this._setup.secret }),
+    })
+    const body = await response.json().catch(() => ({}))
+    this._busy = false
+    if (!response.ok) {
+      this._error = body.detail ?? 'That code is not right. Try the next one.'
+      return
+    }
+    this._codes = body.recoveryCodes ?? []
+  }
+
+  async #done() {
+    await this.#repository.requestMfaLoginProviders()
+    this.close()
+  }
+
+  #copy() {
+    navigator.clipboard?.writeText(this._codes.join('\n'))
+  }
+
+  render() {
+    return html`<umb-body-layout headline=${this.displayName || 'Authenticator app'}>
+      ${this._codes ? this.#renderCodes() : this.#renderSetup()}
+    </umb-body-layout>`
+  }
+
+  #renderSetup() {
+    if (!this._setup)
+      return this._error
+        ? html`<p class="error">${this._error}</p>
+            <div slot="actions"><uui-button label="Close" @click=${() => this.close()}></uui-button></div>`
+        : html`<uui-loader-bar></uui-loader-bar>`
+    return html`<form id="setup" @submit=${this.#submit} novalidate>
+        <p>Scan this code with your authenticator app, then enter the six-digit code it shows.</p>
+        <img class="qr" src=${this._setup.qrCodeSetupImageUrl} alt="QR code for your authenticator app" />
+        <p class="secret">Or enter this key by hand: <code>${this._setup.secret}</code></p>
+        <uui-form-layout-item>
+          <uui-label slot="label" for="code" required>Code from the app</uui-label>
+          <uui-input id="code" name="code" inputmode="numeric" autocomplete="one-time-code" label="Code from the app" required></uui-input>
+        </uui-form-layout-item>
+        ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
+      </form>
+      <div slot="actions">
+        <uui-button label="Cancel" @click=${() => this.close()}></uui-button>
+        <uui-button type="submit" form="setup" look="primary" color="positive" label="Turn on" .state=${this._busy ? 'waiting' : undefined}
+          @click=${() => this.renderRoot.querySelector('#setup')?.requestSubmit()}></uui-button>
+      </div>`
+  }
+
+  #renderCodes() {
+    return html`<p>Two-factor sign-in is on. Keep these recovery codes somewhere safe: each one
+        signs you in once if you lose your phone. They will not be shown again.</p>
+      <ul class="codes">${this._codes.map((code) => html`<li><code>${code}</code></li>`)}</ul>
+      <div slot="actions">
+        <uui-button label="Copy codes" @click=${this.#copy}></uui-button>
+        <uui-button look="primary" label="Done" @click=${this.#done}></uui-button>
+      </div>`
+  }
+
+  static styles = css`
+    .qr {
+      display: block;
+      width: 200px;
+      height: 200px;
+      margin: var(--uui-size-space-4) auto;
+      background: #fff;
+    }
+    .secret code,
+    .codes code {
+      font-family: monospace;
+      word-break: break-all;
+    }
+    .codes {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--uui-size-space-2);
+      padding: 0;
+      list-style: none;
+    }
+    .error {
+      color: var(--uui-color-danger);
+    }
+  `
+}
+
+customElements.define('crombolo-two-factor-setup', CromboloTwoFactorSetupElement)

package/plugin/umbraco-package.json

@@ -2,9 +2,17 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.13.2",
+  "version": "0.14.1",
   "allowPublicAccess": false,
   "extensions": [
+    {
+      "type": "mfaLoginProvider",
+      "alias": "Crombolo.MfaLoginProvider.Authenticator",
+      "name": "Crombolo Authenticator App",
+      "forProviderName": "UmbracoUserAppAuthenticator",
+      "element": "/crombolo-plugin/two-factor-setup.js",
+      "meta": { "label": "Authenticator app" }
+    },
     {
       "type": "sectionView",
       "alias": "Crombolo.SectionView.Bundles.Marketplace",
@@ -180,6 +188,24 @@
       "element": "/crombolo-plugin/read-only-banner.js",
       "weight": 1000
     },
+    {
+      "type": "headerApp",
+      "kind": "button",
+      "alias": "Crombolo.HeaderApp.Settings",
+      "name": "Crombolo Settings Header App",
+      "weight": 300,
+      "meta": {
+        "label": "Settings",
+        "icon": "icon-settings",
+        "href": "section/settings"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionUserPermission",
+          "match": "Umb.Section.Settings"
+        }
+      ]
+    },
     {
       "type": "workspaceFooterApp",
       "alias": "Crombolo.WorkspaceFooterApp.ElementTypeHint",
@@ -193,26 +219,6 @@
         }
       ]
     },
-    {
-      "type": "localization",
-      "alias": "Crombolo.Localization.EN",
-      "name": "Crombolo English Overrides",
-      "weight": 0,
-      "meta": {
-        "culture": "en"
-      },
-      "js": "/crombolo-plugin/branding/localization-en.js"
-    },
-    {
-      "type": "localization",
-      "alias": "Crombolo.Localization.EN_US",
-      "name": "Crombolo English (United States) Overrides",
-      "weight": 0,
-      "meta": {
-        "culture": "en-us"
-      },
-      "js": "/crombolo-plugin/branding/localization-en.js"
-    },
     {
       "type": "backofficeEntryPoint",
       "alias": "Crombolo.EntryPoint.Branding",
@@ -225,12 +231,6 @@
       "name": "Crombolo Help Menu",
       "js": "/crombolo-plugin/branding/help-menu.js"
     },
-    {
-      "type": "backofficeEntryPoint",
-      "alias": "Crombolo.EntryPoint.Sysinfo",
-      "name": "Crombolo System Information Branding",
-      "js": "/crombolo-plugin/branding/sysinfo.js"
-    },
     {
       "type": "section",
       "alias": "Crombolo.Section.Forms",

package/plugin/welcome-dashboard.js

@@ -13,8 +13,7 @@ const STEPS = [
   {
     title: 'Model the content',
     body: html`Open <strong>Settings → Content Types</strong> and describe a page: its
-      properties, its tabs, and which types may sit beneath it. This is the same
-      editor Umbraco ships, so anything you know about Umbraco document types applies.`,
+      properties, its tabs, and which types may sit beneath it.`,
   },
   {
     title: 'Write a template',
@@ -44,9 +43,7 @@ export default class CromboloWelcomeDashboardElement extends UmbLitElement {
       <uui-box headline="Welcome to Crombolo">
         <p class="lede">
           Crombolo is a content management system that runs on
-          <strong>Bun and TypeScript</strong>. It serves the real Umbraco backoffice you
-          are looking at now and follows Umbraco's API contract, so the editing
-          experience is Umbraco's — while the server, the templates and the schema are
+          <strong>Bun and TypeScript</strong>: the server, the templates and the schema are
           TypeScript, and the database is SQLite or Postgres.
         </p>
         <p class="lede">