@crombolo/backoffice-host 0.0.0-stage → 0.9.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kineco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,69 @@
+crombolo
+Copyright (c) 2026 Kineco
+
+This product includes third-party software. crombolo is an independent project.
+It is not affiliated with, endorsed by, or sponsored by Umbraco A/S, which owns
+the Umbraco trademark.
+
+There are three places third-party material is redistributed, rather than merely
+depended on:
+
+  @crombolo/backoffice-dist   the built Umbraco backoffice and the browser
+                              packages bundled into it, produced by
+                              `bun run vendor:backoffice`
+  @crombolo/backoffice-dist   three CSS files copied unmodified from the Umbraco
+                              client source tree
+  @crombolo/contracts         the Umbraco Management API OpenAPI document,
+                              copied unmodified
+
+No Umbraco trademark is redistributed. The Umbraco wordmark, the "U" roundel
+favicon and the installer illustration are deliberately not carried in this
+repository: MIT grants copyright permission and says nothing about trademarks, so
+crombolo's own marks are served at those paths instead. See `BRANDED_ASSETS` in
+`@crombolo/backoffice-host`.
+
+The Umbraco backoffice
+----------------------
+@umbraco-cms/backoffice 18.2.0 — MIT — https://github.com/umbraco/Umbraco-CMS
+@umbraco-ui/uui 2.0.2 — MIT — https://github.com/umbraco/Umbraco.UI
+
+Static files from the Umbraco client source tree
+------------------------------------------------
+css/umb-css.css, css/rte-content.css, css/umbraco-blockgridlayout.css
+  — copied unmodified from Umbraco-CMS release-18.2.0 — MIT
+  — https://github.com/umbraco/Umbraco-CMS
+Shipped in @crombolo/backoffice-dist under `upstream-static/`.
+
+`rte-content.css` itself carries Tiptap's default editor styles, copied from
+tiptap v2.11.7 (MIT); the file records this in its own header.
+
+The Umbraco Management API contract
+-----------------------------------
+OpenApi.json — copied unmodified from Umbraco-CMS release-18.2.0
+  (src/Umbraco.Cms.Api.Management/OpenApi.json) — MIT
+  — https://github.com/umbraco/Umbraco-CMS
+Shipped in @crombolo/contracts, which also ships the TypeScript types generated
+from it.
+
+Browser runtime dependencies bundled into the backoffice build
+--------------------------------------------------------------
+@heximal/expressions 0.1.5 — BSD-3-Clause
+@microsoft/signalr 10.0.11 — MIT
+@tiptap/* 3.31.3 — MIT
+diff 9.0.0 — BSD-3-Clause
+dompurify 3.4.16 — Apache-2.0, elected from "MPL-2.0 OR Apache-2.0"
+element-internals-polyfill 3.0.2 — MIT
+lit 3.3.3 — BSD-3-Clause
+luxon 3.7.2 — MIT
+marked 18.0.14 — MIT
+monaco-editor 0.57.0 — MIT
+rxjs 7.8.2 — Apache-2.0
+uuid 14.0.2 — MIT
+
+dompurify is offered under either licence; Apache-2.0 is elected here, so no
+MPL-2.0 obligation attaches to the copy bundled into the backoffice build. Of the
+Apache-2.0 packages above, none ships a NOTICE file of its own, so Apache-2.0
+section 4(d) adds nothing to this file.
+
+Each package's own licence text ships inside its npm distribution and applies
+unchanged to the copies bundled here.

package/assets/login.js

@@ -0,0 +1,352 @@
+/**
+ * Crombolo login page.
+ *
+ * Umbraco's own login screen ships as a separate, unpublished npm package, so
+ * this is our equivalent, built from the component library that IS published
+ * (@umbraco-cms/backoffice/external/uui) and resolved through the import map the
+ * page embeds. It posts to the same endpoint Umbraco's does and then returns to
+ * the authorize URL that sent us here. It also serves the two links a user may
+ * be sent, as Umbraco's does: `?flow=invite-user` to choose a first password and
+ * `?flow=reset-password` to choose a new one, plus the request for a reset link.
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import '@umbraco-cms/backoffice/external/uui'
+
+/**
+ * Where to go once signed in, if that is somewhere on this site.
+ *
+ * The server reduces `returnUrl` to a local path before it reaches the attribute,
+ * so this is the second lock rather than the only one — worth having because this
+ * navigation happens the instant a session exists, which is the most valuable
+ * moment to send someone elsewhere. Resolving against this origin is what catches
+ * `//host` and `/\host`; a browser reads both as leaving the site while a text
+ * check reads them as local.
+ */
+function localTarget(value, fallback) {
+  if (!value) return fallback
+  try {
+    const resolved = new URL(value, window.location.origin)
+    if (resolved.origin !== window.location.origin) return fallback
+    return `${resolved.pathname}${resolved.search}${resolved.hash}`
+  } catch {
+    return fallback
+  }
+}
+
+class CromboloLoginElement extends LitElement {
+  static properties = {
+    returnUrl: { type: String, attribute: 'return-url' },
+    logoImage: { type: String, attribute: 'logo-image-alternative' },
+    usernameIsEmail: { type: Boolean, attribute: 'username-is-email' },
+    allowPasswordReset: { type: Boolean, attribute: 'allow-password-reset' },
+    _busy: { state: true },
+    _error: { state: true },
+    _view: { state: true },
+    _notice: { state: true },
+  }
+
+  constructor() {
+    super()
+    this.returnUrl = ''
+    this.logoImage = ''
+    this.usernameIsEmail = true
+    this.allowPasswordReset = false
+    this._busy = false
+    this._error = ''
+    this._notice = ''
+    const params = new URLSearchParams(window.location.search)
+    const flow = params.get('flow')
+    this._link =
+      flow === 'invite-user'
+        ? { kind: 'invite', user: params.get('userId'), code: params.get('inviteCode') }
+        : flow === 'reset-password'
+          ? { kind: 'reset', user: params.get('userId'), code: params.get('resetCode') }
+          : undefined
+    this._view = this._link ? 'checking' : 'login'
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    if (this._link) this.#checkLink()
+  }
+
+  async #post(path, body) {
+    return fetch(`/umbraco/management/api/v1${path}`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+  }
+
+  async #checkLink() {
+    const { kind, user, code } = this._link
+    const response =
+      kind === 'invite'
+        ? await this.#post('/user/invite/verify', { user: { id: user }, token: code })
+        : await this.#post('/security/forgot-password/verify', {
+            user: { id: user },
+            resetCode: code,
+          })
+    if (response.ok) {
+      this._view = 'new-password'
+      return
+    }
+    this._view = 'login'
+    this._error =
+      kind === 'invite'
+        ? 'This invitation is no longer valid. Ask for a new one.'
+        : 'This reset link is no longer valid. Ask for a new one.'
+  }
+
+  async #setPassword(event) {
+    event.preventDefault()
+    if (this._busy) return
+    const form = event.target
+    const password = form.elements.password.value
+    if (password !== form.elements.confirm.value) {
+      this._error = 'The passwords do not match.'
+      return
+    }
+    const { kind, user, code } = this._link
+    this._busy = true
+    this._error = ''
+    try {
+      const response =
+        kind === 'invite'
+          ? await this.#post('/user/invite/create-password', {
+              user: { id: user },
+              token: code,
+              password,
+            })
+          : await this.#post('/security/forgot-password/reset', {
+              user: { id: user },
+              resetCode: code,
+              password,
+            })
+      if (response.ok) {
+        this._view = 'login'
+        this._notice = 'Your password is set. Sign in with it now.'
+        return
+      }
+      const problem = await response.json().catch(() => ({}))
+      this._error = problem.detail ?? 'The password could not be set.'
+    } catch {
+      this._error = 'Could not reach the server.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  async #requestReset(event) {
+    event.preventDefault()
+    if (this._busy) return
+    const email = event.target.elements.email.value.trim()
+    if (!email) return
+    this._busy = true
+    try {
+      await this.#post('/security/forgot-password', { email })
+      this._view = 'login'
+      this._notice = 'If that address belongs to an account, a reset link is on its way.'
+    } catch {
+      this._error = 'Could not reach the server.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  async #submit(event) {
+    event.preventDefault()
+    if (this._busy) return
+    const form = event.target
+    const username = form.elements.username.value.trim()
+    const password = form.elements.password.value
+    if (!username || !password) {
+      this._error = 'Enter your credentials to sign in.'
+      return
+    }
+
+    this._busy = true
+    this._error = ''
+    try {
+      const response = await fetch('/umbraco/management/api/v1/security/back-office/login', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      })
+
+      if (response.ok) {
+        // Back to the authorize endpoint, which now sees a session cookie.
+        window.location.href = localTarget(this.returnUrl, '/umbraco')
+        return
+      }
+      if (response.status === 402) {
+        this._error = 'This account requires two-factor authentication, which is not yet supported.'
+      } else if (response.status === 403) {
+        this._error = 'This account is locked or not approved.'
+      } else if (response.status === 401) {
+        this._error = 'Those credentials were not recognised.'
+      } else {
+        this._error = 'Sign-in failed. Please try again.'
+      }
+    } catch {
+      this._error = 'Could not reach the server.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  #messages() {
+    return html`${this._notice ? html`<p id="notice" role="status">${this._notice}</p>` : nothing}
+    ${this._error ? html`<p id="error" role="alert">${this._error}</p>` : nothing}`
+  }
+
+  #newPasswordForm() {
+    return html`
+      <h1 class="uui-h3">${this._link?.kind === 'invite' ? 'Choose your password' : 'Choose a new password'}</h1>
+      <form @submit=${this.#setPassword}>
+        <uui-form-layout-item>
+          <uui-label for="password" slot="label" required>Password</uui-label>
+          <uui-input id="password" name="password" type="password" autocomplete="new-password" required></uui-input>
+        </uui-form-layout-item>
+        <uui-form-layout-item>
+          <uui-label for="confirm" slot="label" required>Confirm password</uui-label>
+          <uui-input id="confirm" name="confirm" type="password" autocomplete="new-password" required></uui-input>
+        </uui-form-layout-item>
+        ${this.#messages()}
+        <uui-button type="submit" look="primary" color="positive" .state=${this._busy ? 'waiting' : undefined} label="Set password"></uui-button>
+      </form>
+    `
+  }
+
+  #resetRequestForm() {
+    return html`
+      <h1 class="uui-h3">Forgotten password</h1>
+      <form @submit=${this.#requestReset}>
+        <uui-form-layout-item>
+          <uui-label for="email" slot="label" required>Email</uui-label>
+          <uui-input id="email" name="email" type="email" autocomplete="email" required></uui-input>
+        </uui-form-layout-item>
+        ${this.#messages()}
+        <uui-button type="submit" look="primary" .state=${this._busy ? 'waiting' : undefined} label="Send reset link"></uui-button>
+        <uui-button look="link" label="Back to sign in" @click=${() => {
+          this._view = 'login'
+        }}></uui-button>
+      </form>
+    `
+  }
+
+  render() {
+    const body =
+      this._view === 'checking'
+        ? html`<uui-loader></uui-loader>`
+        : this._view === 'new-password'
+          ? this.#newPasswordForm()
+          : this._view === 'forgot'
+            ? this.#resetRequestForm()
+            : this.#loginForm()
+    return html`
+      <div id="layout">
+        <uui-box id="card">
+          ${this.logoImage ? html`<img id="logo" src=${this.logoImage} alt="crombolo" />` : nothing}
+          ${body}
+        </uui-box>
+      </div>
+    `
+  }
+
+  #loginForm() {
+    return html`
+          <h1 class="uui-h3">Sign in</h1>
+          <form @submit=${this.#submit}>
+            <uui-form-layout-item>
+              <uui-label for="username" slot="label" required>
+                ${this.usernameIsEmail ? 'Email' : 'Username'}
+              </uui-label>
+              <uui-input
+                id="username"
+                name="username"
+                type=${this.usernameIsEmail ? 'email' : 'text'}
+                autocomplete="username"
+                required
+                ?disabled=${this._busy}></uui-input>
+            </uui-form-layout-item>
+
+            <uui-form-layout-item>
+              <uui-label for="password" slot="label" required>Password</uui-label>
+              <uui-input
+                id="password"
+                name="password"
+                type="password"
+                autocomplete="current-password"
+                required
+                ?disabled=${this._busy}></uui-input>
+            </uui-form-layout-item>
+
+            ${this.#messages()}
+
+            <uui-button
+              type="submit"
+              look="primary"
+              color="positive"
+              .state=${this._busy ? 'waiting' : undefined}
+              label="Sign in"></uui-button>
+            ${
+              this.allowPasswordReset
+                ? html`<uui-button look="link" label="Forgotten password?" @click=${() => {
+                    this._error = ''
+                    this._view = 'forgot'
+                  }}></uui-button>`
+                : nothing
+            }
+          </form>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      min-height: 100vh;
+      background: var(--uui-color-surface-alt, #f4f4f4);
+    }
+    #layout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      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-5, 18px);
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--uui-size-space-4, 12px);
+    }
+    uui-input {
+      width: 100%;
+    }
+    #error {
+      margin: 0;
+      color: var(--uui-color-danger, #d42054);
+    }
+    #notice {
+      margin: 0;
+      color: var(--uui-color-positive, #0b8152);
+    }
+  `
+}
+
+customElements.define('crombolo-login', CromboloLoginElement)

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.9.1",
+  "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
+  "license": "MIT",
+  "author": "Crombolo",
+  "homepage": "https://github.com/kineco-au/crombolo-cms#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kineco-au/crombolo-cms.git",
+    "directory": "packages/backoffice-host"
+  },
+  "bugs": {
+    "url": "https://github.com/kineco-au/crombolo-cms/issues"
+  },
+  "engines": {
+    "bun": ">=1.3.0"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./branding": "./src/branding.ts"
+  },
+  "files": [
+    "assets",
+    "plugin",
+    "src",
+    "NOTICE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@crombolo/core": "0.9.1",
+    "@crombolo/backoffice-dist": "18.2.0"
+  }
+}

package/plugin/assistant/client.js

@@ -0,0 +1,53 @@
+/**
+ * Talks to the assistant endpoints under <backoffice>/crombolo/api/assistant.
+ * The session cookie carries the identity, so there is no token handling here —
+ * and the server re-issues every CMS call as that same user.
+ */
+function base() {
+  const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  return `${href.replace(/\/$/, '')}/crombolo/api/assistant`
+}
+
+async function send(path, init = {}) {
+  const response = await fetch(`${base()}${path}`, {
+    credentials: 'include',
+    headers: { accept: 'application/json', ...(init.headers ?? {}) },
+    ...init,
+  })
+  const text = await response.text()
+  const body = text === '' ? undefined : JSON.parse(text)
+  if (!response.ok) {
+    const error = new Error(body?.error ?? `The assistant responded ${response.status}`)
+    error.body = body
+    throw error
+  }
+  return body
+}
+
+const json = (method, body) => ({
+  method,
+  headers: { 'content-type': 'application/json' },
+  body: JSON.stringify(body),
+})
+
+export const ask = (message, { changesetKey, history, viewing } = {}) =>
+  send('/chat', json('POST', { message, changesetKey, history, viewing }))
+
+export const changesets = () => send('/changesets')
+
+/** Whether the model is usable. `refresh` asks the provider again, model included. */
+export const status = (refresh = false) => send(`/status${refresh ? '?refresh=1' : ''}`)
+
+/** One proposal in full, body included — what the editing pane works on. */
+export const change = (key) => send(`/changes/${key}`)
+
+/** Replaces what approving would send. The kind and its parameters do not move. */
+export const edit = (key, body) => send(`/changes/${key}`, json('PUT', { body }))
+
+/** The proposal against what is there now, read fresh so a stale one says so. */
+export const diff = (key) => send(`/changes/${key}/diff`)
+
+/** Approving is the only thing here that changes the CMS, and only a person calls it. */
+export const approve = (key) => send(`/changes/${key}/approve`, { method: 'POST' })
+
+export const discard = (key) => send(`/changes/${key}/discard`, { method: 'POST' })