@crombolo/backoffice-host 0.0.0-stage → 0.9.1

package/plugin/branding/query-builder.js

@@ -0,0 +1,28 @@
+/**
+ * The template editor's query builder writes TypeScript, so it should not say
+ * it wrote C#.
+ *
+ * The modal hard-codes `language="C#"` on the code block it previews the
+ * snippet in (`query-builder-modal.element.js`). The element is vendored, so
+ * the label is corrected after each render rather than by replacing the modal:
+ * the rest of it — the pickers, the filters, the sample results — is exactly
+ * what we want, and a fork of it would be a fork to maintain.
+ */
+const TAG = 'umb-template-query-builder-modal'
+const LANGUAGE = 'TypeScript'
+
+export const onInit = async () => {
+  // The modal is registered lazily, so the class may not be defined until the
+  // editor opens it.
+  const element = await customElements.whenDefined(TAG)
+  const prototype = element.prototype
+  const updated = prototype.updated
+  prototype.updated = function patched(changed) {
+    updated?.call(this, changed)
+    const block = this.shadowRoot?.querySelector('umb-code-block')
+    if (block && block.getAttribute('language') !== LANGUAGE) {
+      block.setAttribute('language', LANGUAGE)
+      block.language = LANGUAGE
+    }
+  }
+}

package/plugin/branding/sign-in.js

@@ -0,0 +1,80 @@
+/**
+ * The button on the client's own sign-in screen.
+ *
+ * `umb-auth-view` draws one button per registered `authProvider`, and the
+ * vendored manifest contributes `Umb.AuthProviders.Umbraco` — label `Umbraco`,
+ * icon `icon-umbraco` — which the default button renders through
+ * `login_signInWith` as "Sign in with Umbraco" under the Umbraco mark. There is
+ * one way into this backoffice, so the button names no product at all.
+ *
+ * **Re-registered rather than replaced through `overwrites`.** The registry
+ * resolves `overwrites` where an extension is *rendered*, not in `byType`, and
+ * `app-auth.controller.js` reads `byType('authProvider')` to decide whether to
+ * draw this screen at all: with exactly one provider it skips it and sends the
+ * browser straight to the login page. An `overwrites` manifest would leave two
+ * providers in that list and so introduce a screen that signing in does not
+ * currently show.
+ *
+ * That same count is why the screen below is reached by a session timing out
+ * rather than by signing in: a logged-out visitor is redirected before it
+ * renders.
+ *
+ * `forProviderName` stays `Umbraco`. It is the identity provider the server's
+ * authorize endpoint knows, and the view hides a provider by that name when
+ * local login is disabled (`umb-auth-view.element.js`). Nothing displays it.
+ */
+import { css, html, LitElement } from '@umbraco-cms/backoffice/external/lit'
+import '@umbraco-cms/backoffice/external/uui'
+
+const TAG = 'crombolo-auth-provider'
+const VENDORED = 'Umb.AuthProviders.Umbraco'
+
+/**
+ * English, like the login page's own buttons (`assets/login.js`). The two
+ * screens are the same step and should use the same word for it, which matters
+ * more here than half-translating one of them.
+ */
+const LABEL = 'Sign in'
+
+class CromboloAuthProviderElement extends LitElement {
+  static properties = {
+    manifest: { attribute: false },
+    userLoginState: { attribute: false },
+    onSubmit: { attribute: false },
+  }
+
+  render() {
+    return html`<uui-button
+      type="button"
+      look="primary"
+      color="positive"
+      label=${LABEL}
+      @click=${() => this.onSubmit?.(this.manifest)}>
+      ${LABEL}
+    </uui-button>`
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+    uui-button {
+      width: 100%;
+    }
+  `
+}
+
+if (!customElements.get(TAG)) customElements.define(TAG, CromboloAuthProviderElement)
+
+export const onInit = (_host, extensionRegistry) => {
+  extensionRegistry.unregister(VENDORED)
+  extensionRegistry.register({
+    type: 'authProvider',
+    alias: 'Crombolo.AuthProvider.SignIn',
+    name: 'Crombolo Sign-in Provider',
+    forProviderName: 'Umbraco',
+    elementName: TAG,
+    weight: 1000,
+    meta: { label: LABEL },
+  })
+}

package/plugin/branding/sysinfo.js

@@ -0,0 +1,89 @@
+/**
+ * The System information modal, reached from the header logo popover.
+ *
+ * It names the product in four places that no localisation key covers: three
+ * row labels built as plain strings in `sysinfo.element.js`, and the heading it
+ * puts above the text it copies to the clipboard.
+ *
+ * The rows are corrected at their source rather than in the DOM. The element
+ * assembles every row into one string and assigns it to `_systemInformation`, a
+ * lit reactive property, so wrapping that property's setter corrects the rows
+ * before they are ever rendered — no observer, and no reaching into a shadow
+ * root. The clipboard heading is prepended inside a private method that nothing
+ * can reach, so that one is taken on the way out to the clipboard instead.
+ */
+
+/**
+ * The exact phrases to correct. Spelled out rather than replacing the product
+ * name wherever it appears, because the same text carries the browser's user
+ * agent and the current URL — a blanket replacement would rewrite whatever a
+ * site happens to have in its address.
+ */
+const PHRASES = [
+  'Umbraco build version',
+  'Umbraco assembly version',
+  'Umbraco client version',
+  'Umbraco system information',
+]
+
+/** A fixed point: its own output contains none of the phrases, so re-applying it changes nothing. */
+export function rebrandSysinfo(text) {
+  if (typeof text !== 'string') return text
+  let corrected = text
+  for (const phrase of PHRASES) {
+    corrected = corrected.replaceAll(phrase, phrase.replace('Umbraco', 'Crombolo'))
+  }
+  return corrected
+}
+
+/** True when the string is the modal's clipboard payload rather than someone's own copy. */
+export function isSysinfoClipboardText(text) {
+  return typeof text === 'string' && text.includes('Umbraco system information')
+}
+
+/**
+ * Wraps the reactive property's setter. Does nothing at all if the accessor is
+ * not where lit puts it, so an upstream change costs the correction and never
+ * an error.
+ */
+function patchRows(element) {
+  const accessor = Object.getOwnPropertyDescriptor(element?.prototype ?? {}, '_systemInformation')
+  if (!accessor?.get || !accessor?.set) return false
+  Object.defineProperty(element.prototype, '_systemInformation', {
+    ...accessor,
+    get() {
+      return accessor.get.call(this)
+    },
+    set(value) {
+      accessor.set.call(this, rebrandSysinfo(value))
+    },
+  })
+  return true
+}
+
+/**
+ * Corrects the heading on its way to the clipboard. Installed only once the
+ * modal's element exists — so a session that never opens System information
+ * never patches anything — and it passes every other string through untouched.
+ */
+function patchClipboard() {
+  const clipboard = navigator.clipboard
+  if (typeof clipboard?.writeText !== 'function') return
+  const write = clipboard.writeText.bind(clipboard)
+  try {
+    clipboard.writeText = (text) =>
+      write(isSysinfoClipboardText(text) ? rebrandSysinfo(text) : text)
+  } catch {
+    // A read-only `writeText` leaves the copied heading stale, which is the
+    // one thing here worth less than a working copy button.
+  }
+}
+
+export const onInit = () => {
+  customElements
+    .whenDefined('umb-sysinfo')
+    .then((element) => {
+      if (patchRows(element)) patchClipboard()
+    })
+    .catch(() => {})
+}

package/plugin/branding/theme.css

@@ -0,0 +1,102 @@
+/*
+ * Crombolo's colour scheme: white surfaces, terracotta accents taken from the logo.
+ *
+ * Loaded by both shells immediately after the vendored `light.css`, rather than
+ * registered as a `theme` extension, so it reaches the login page too — the
+ * login shell never boots the extension registry.
+ *
+ * The Dark and High contrast themes are unaffected: the theme context appends
+ * their stylesheet to `<head>` *after* this one, and both redefine every token
+ * set below, so picking one still gets a coherent palette rather than a mix.
+ */
+:root {
+  --crombolo-orange: #da987c;
+  /* Lighter: a hover fill, never text. */
+  --crombolo-orange-light: #e2ae98;
+  /* Deep enough for a focus ring against white. */
+  --crombolo-orange-deep: #cb6f48;
+  /* The darkest of the three, and the only one that clears AA as body text. */
+  --crombolo-orange-text: #974b2b;
+  --crombolo-cocoa: #54321f;
+  --crombolo-cream: #fff7ea;
+
+  /*
+   * `light.css` routes default, selected and interactive-emphasis through the
+   * violet-blue palette, so swapping the palette carries all of them at once.
+   */
+  --uui-palette-violet-blue: var(--crombolo-orange);
+  --uui-palette-violet-blue-light: var(--crombolo-orange-light);
+  --uui-palette-violet-blue-dark: var(--crombolo-orange-text);
+  --uui-palette-violet-blue-dimmed: #bd8b75;
+
+  /*
+   * Dark ink rather than orange. This palette is where the client's text and
+   * icon colours come from (`--uui-color-interactive`), so an orange here would
+   * tint the whole interface and fail contrast on white.
+   */
+  --uui-palette-space-cadet: var(--crombolo-cocoa);
+  --uui-palette-space-cadet-light: #704329;
+  --uui-palette-space-cadet-dark: #25160e;
+  --uui-palette-space-cadet-dimmed: #8a6c5c;
+
+  /* The "current item" marker, warmed from pink to the same orange family. */
+  --uui-palette-spanish-pink: #fdebd4;
+  --uui-palette-spanish-pink-light: #fef4e7;
+  --uui-palette-spanish-pink-dark: #ebc7b8;
+  --uui-palette-spanish-pink-dimmed: #f3e3ce;
+
+  /* Backs the app background, the alt surface and the disabled fill. */
+  --uui-palette-sand: var(--crombolo-cream);
+  --uui-palette-sand-light: #fff;
+  --uui-palette-sand-dark: #f4e9d7;
+  --uui-palette-sand-dimmed: #f7efe3;
+
+  --uui-palette-white: #fffefc;
+  --uui-palette-white-light: #fff;
+  --uui-palette-white-dark: #fffaf2;
+  --uui-palette-white-dimmed: #f4ede1;
+
+  /*
+   * The accent is light, so what sits on it has to be dark. Stock `light.css`
+   * puts white on the accent, which against this orange is about 2.4:1; cocoa
+   * on the same fill is 4.7:1.
+   */
+  --uui-color-default-contrast: var(--crombolo-cocoa);
+  --uui-color-selected-contrast: var(--crombolo-cocoa);
+
+  /* An orange header bar, with its own text dark for the same reason. */
+  --uui-color-header-surface: var(--crombolo-orange);
+  --uui-color-header-contrast: rgb(84 50 31 / 80%);
+  --uui-color-header-contrast-emphasis: var(--crombolo-cocoa);
+
+  /* Pure white panels on a warm off-white page, so cards still separate. */
+  --uui-color-background: var(--crombolo-cream);
+  --uui-color-surface: #fff;
+  --uui-color-surface-alt: var(--crombolo-cream);
+  --uui-color-surface-emphasis: #fffaf2;
+
+  --uui-color-focus: var(--crombolo-orange-deep);
+
+  /* Hover text on an unfilled interactive element: the palette's light orange
+     would be 2:1 here, so it takes the text-weight orange instead. */
+  --uui-color-interactive-emphasis: var(--crombolo-orange-text);
+
+  --uui-color-border: #e7dcd2;
+  --uui-color-border-standalone: #cdbcac;
+  --uui-color-border-emphasis: #ab9684;
+  --uui-color-divider: #f8f2ec;
+  --uui-color-divider-standalone: #efe5db;
+  --uui-color-divider-emphasis: #ddcdbe;
+}
+
+/*
+ * The two pink strokes `umb-auth-view` draws across its illustration panel
+ * (`#curve-top`, `#curve-bottom`). They are Umbraco's own flourish and carry no
+ * meaning, so the panel is left to the backdrop alone. Both of these are the
+ * element's own hooks, read off `:host` and so inherited from here — which is
+ * the only way to reach them, the panel being inside a shadow root.
+ */
+:root {
+  --umb-login-curves-display: none;
+  --umb-login-curves-color: transparent;
+}

package/plugin/bundles-client.js

@@ -0,0 +1,34 @@
+/**
+ * Reads and drives the Bundles endpoints the server keeps at
+ * <backoffice>/crombolo/api/bundles/*. The session cookie carries the auth.
+ */
+const base = () => {
+  const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  return `${href.replace(/\/$/, '')}/crombolo/api/bundles`
+}
+
+const json = async (path, init) => {
+  const response = await fetch(`${base()}${path}`, {
+    credentials: 'include',
+    headers: {
+      accept: 'application/json',
+      ...(init?.body ? { 'content-type': 'application/json' } : {}),
+    },
+    ...init,
+  })
+  const body = await response.json().catch(() => ({}))
+  if (!response.ok && response.status !== 400)
+    throw new Error(`bundles responded ${response.status}`)
+  return body
+}
+
+export const searchMarketplace = (query) =>
+  json(`/marketplace${query ? `?q=${encodeURIComponent(query)}` : ''}`)
+
+export const listInstalled = () => json('/installed')
+
+export const installBundle = (name, version) =>
+  json('/install', { method: 'POST', body: JSON.stringify({ name, version }) })
+
+export const uninstallBundle = (name) =>
+  json('/uninstall', { method: 'POST', body: JSON.stringify({ name }) })

package/plugin/bundles-created-overview.js

@@ -0,0 +1,150 @@
+/**
+ * The list of bundles that have been defined, inside the Created view.
+ *
+ * Reads through `UmbPackageRepository` rather than this plugin's own endpoints:
+ * the definitions are the Management API's nine `package` operations, which are
+ * contract-fixed and bearer-authenticated, and the repository already carries
+ * the client's token. The plugin's `/crombolo/api/bundles` routes are a
+ * different thing — installed npm bundles, on the session cookie.
+ */
+
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { umbConfirmModal } from '@umbraco-cms/backoffice/modal'
+import { UmbPackageRepository } from '@umbraco-cms/backoffice/package'
+
+const TAKE = 10
+
+/** Where the builder lives, which is Umbraco's route and not ours to rename. */
+export const BUILDER_PATH = 'section/packages/view/created/package-builder'
+
+export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement {
+  static properties = {
+    _items: { state: true },
+    _loading: { state: true },
+    _total: { state: true },
+    _page: { state: true },
+  }
+
+  #repository = new UmbPackageRepository(this)
+
+  constructor() {
+    super()
+    this._items = []
+    this._loading = true
+    this._total = 0
+    this._page = 1
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    this._loading = true
+    const skip = this._page * TAKE - TAKE
+    const data = await this.#repository.getCreatedPackages({ skip, take: TAKE })
+    this._items = data?.items ?? []
+    this._total = data?.total ?? 0
+    this._loading = false
+  }
+
+  #onPageChange(event) {
+    const current = event.target.current
+    if (current === this._page) return
+    this._page = current
+    this.#load()
+  }
+
+  async #remove(item) {
+    if (!item.unique) return
+    await umbConfirmModal(this, {
+      color: 'danger',
+      headline: `Remove ${item.name}?`,
+      content: 'Are you sure you want to delete this bundle?',
+      confirmLabel: '#general_delete',
+    })
+    if (!(await this.#repository.deleteCreatedPackage(item.unique))) return
+    this._items = this._items.filter((other) => other.unique !== item.unique)
+    this._total = Math.max(0, this._total - 1)
+  }
+
+  #open(item) {
+    if (!item.unique) return
+    window.history.pushState({}, '', `${BUILDER_PATH}/edit/${item.unique}`)
+  }
+
+  #renderPagination() {
+    const pages = Math.ceil(this._total / TAKE)
+    if (pages <= 1) return nothing
+    return html`
+      <div id="pages">
+        <uui-pagination
+          .total=${pages}
+          .current=${this._page}
+          @change=${this.#onPageChange}></uui-pagination>
+      </div>
+    `
+  }
+
+  render() {
+    // The button stays put while the list loads, as it does upstream: it is the
+    // only way to reach the builder, and a loader that hides it makes the view
+    // look empty on every page change.
+    return html`
+      <uui-button
+        look="primary"
+        href=${`${BUILDER_PATH}/create`}
+        label=${this.localize.term('packager_createPackage')}></uui-button>
+      ${
+        this._loading
+          ? html`<div id="loader"><uui-loader></uui-loader></div>`
+          : this._items.length === 0
+            ? html`<h2 id="empty">${this.localize.term('packager_noPackagesCreated')}</h2>`
+            : html`
+            <uui-box headline="Created bundles" style="--uui-box-default-padding:0;">
+              <uui-ref-list>
+                ${repeat(
+                  this._items,
+                  (item) => item.unique,
+                  (item) => html`
+                    <uui-ref-node name=${item.name} @open=${() => this.#open(item)}>
+                      <uui-action-bar slot="actions">
+                        <uui-button
+                          @click=${() => this.#remove(item)}
+                          label=${this.localize.term('general_delete')}></uui-button>
+                      </uui-action-bar>
+                    </uui-ref-node>
+                  `,
+                )}
+              </uui-ref-list>
+            </uui-box>
+          `
+      }
+      ${this.#renderPagination()}
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1);
+    }
+    uui-box {
+      margin: var(--uui-size-space-5) 0;
+      padding-bottom: var(--uui-size-space-1);
+    }
+    #loader,
+    #pages {
+      display: flex;
+      justify-content: center;
+    }
+    #empty {
+      text-align: center;
+      opacity: 0.6;
+    }
+  `
+}
+
+customElements.define('crombolo-bundles-created-overview', CromboloBundlesCreatedOverviewElement)

package/plugin/bundles-created.js

@@ -0,0 +1,70 @@
+/**
+ * The Created view, in place of Umbraco's.
+ *
+ * Its manifest declares `overwrites: ['Umb.SectionView.Packages.Builder']`.
+ * Umbraco's view is a router, not a screen: it mounts its own overview at
+ * `overview` and every `package-builder` workspace at `package-builder/create`
+ * and `package-builder/edit/:unique`. Those two routes are the only way to
+ * reach the builder, so this reproduces them exactly — replacing the view
+ * without them would have left the builder unreachable rather than renamed.
+ *
+ * What changes is the overview, which is ours and says bundle.
+ */
+import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api'
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'
+import { html } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+
+/** The entity type Umbraco's builder workspace declares, and the route segment. */
+export const BUILDER_ENTITY_TYPE = 'package-builder'
+
+export default class CromboloBundlesCreatedElement extends UmbLitElement {
+  static properties = {
+    _routes: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._routes = []
+    this.observe(
+      umbExtensionsRegistry.byTypeAndFilter(
+        'workspace',
+        (workspace) => workspace.meta?.entityType === BUILDER_ENTITY_TYPE,
+      ),
+      (workspaces) => {
+        this._routes = routesFor(workspaces ?? [])
+      },
+      null,
+    )
+  }
+
+  render() {
+    return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`
+  }
+}
+
+/** Umbraco's own route table, with our overview in place of its own. */
+export function routesFor(workspaces) {
+  const routes = [{ path: 'overview', component: () => import('./bundles-created-overview.js') }]
+  for (const workspace of workspaces) {
+    routes.push({
+      path: `${workspace.meta.entityType}/edit/:unique`,
+      component: () => createExtensionElement(workspace),
+      setup: (component, info) => {
+        if (component) component.entityUnique = info.match.params.unique
+      },
+    })
+    routes.push({
+      path: `${workspace.meta.entityType}/create`,
+      component: () => createExtensionElement(workspace),
+    })
+  }
+  routes.push({ path: '', pathMatch: 'full', redirectTo: 'overview' })
+  routes.push({
+    path: '**',
+    component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+  })
+  return routes
+}
+
+customElements.define('crombolo-bundles-created', CromboloBundlesCreatedElement)