@crombolo/backoffice-host 0.14.1 → 0.15.0

package/assets/device.js

@@ -0,0 +1,180 @@
+/**
+ * The page a person approves a command-line sign-in on (story 107, RFC 8628).
+ * The `crombolo` command shows a code and opens this page; the person, already
+ * signed in here, checks the code matches and allows it — or declines.
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import '@umbraco-cms/backoffice/external/uui'
+
+const API = '/umbraco/management/api/v1/security/back-office'
+
+class CromboloDeviceElement extends LitElement {
+  static properties = {
+    userCode: { type: String, attribute: 'user-code' },
+    logoImage: { type: String, attribute: 'logo-image' },
+    _pending: { state: true },
+    _error: { state: true },
+    _done: { state: true },
+    _busy: { state: true },
+  }
+
+  constructor() {
+    super()
+    this.userCode = ''
+    this.logoImage = ''
+    this._pending = undefined
+    this._error = ''
+    this._done = ''
+    this._busy = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    if (this.userCode) this.#look(this.userCode)
+  }
+
+  async #look(code) {
+    this._error = ''
+    this._busy = true
+    try {
+      const response = await fetch(`${API}/device/pending?user_code=${encodeURIComponent(code)}`, {
+        credentials: 'include',
+      })
+      if (response.ok) {
+        this._pending = await response.json()
+        return
+      }
+      const problem = await response.json().catch(() => ({}))
+      this._error = problem.detail ?? problem.title ?? 'That code is not waiting.'
+    } catch {
+      this._error = 'Could not reach the server.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  async #decide(approve) {
+    this._busy = true
+    try {
+      const response = await fetch(`${API}/device/decide`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ userCode: this._pending.userCode, approve }),
+      })
+      if (!response.ok) {
+        this._error = 'That code is no longer waiting. Start the sign-in again.'
+        this._pending = undefined
+        return
+      }
+      this._done = approve
+        ? 'Signed in. You can close this window and go back to your terminal.'
+        : 'Declined. Nothing was signed in.'
+    } catch {
+      this._error = 'Could not reach the server.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  #submitCode(event) {
+    event.preventDefault()
+    const code = event.target.elements.code.value.trim()
+    if (code) this.#look(code)
+  }
+
+  #body() {
+    if (this._done) return html`<p id="notice" role="status">${this._done}</p>`
+    if (this._pending)
+      return html`
+        <p>
+          ${this._pending.clientName ?? 'A command line'} is asking to sign in as you. Check that this
+          code matches the one it shows:
+        </p>
+        <p id="code">${this._pending.userCode}</p>
+        ${this._error ? html`<p id="error" role="alert">${this._error}</p>` : nothing}
+        <div id="actions">
+          <uui-button look="primary" color="positive" label="Allow" .state=${this._busy ? 'waiting' : undefined}
+            @click=${() => this.#decide(true)}></uui-button>
+          <uui-button look="outline" label="Decline" @click=${() => this.#decide(false)}></uui-button>
+        </div>`
+    return html`
+      <form @submit=${this.#submitCode}>
+        <uui-form-layout-item>
+          <uui-label for="code" slot="label" required>The code your terminal shows</uui-label>
+          <uui-input id="code" name="code" autocomplete="off" required .value=${this.userCode ?? ''}></uui-input>
+        </uui-form-layout-item>
+        ${this._error ? html`<p id="error" role="alert">${this._error}</p>` : nothing}
+        <uui-button type="submit" look="primary" label="Continue" .state=${this._busy ? 'waiting' : undefined}></uui-button>
+      </form>`
+  }
+
+  render() {
+    return html`
+      <div id="layout">
+        <uui-box id="card">
+          ${this.logoImage ? html`<img id="logo" src=${this.logoImage} alt="" />` : nothing}
+          <h1 class="uui-h3">Sign in from your terminal</h1>
+          ${this.#body()}
+        </uui-box>
+      </div>
+    `
+  }
+
+  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: 420px;
+    }
+    #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%;
+    }
+    #code {
+      font-family: monospace;
+      font-size: 1.75rem;
+      letter-spacing: 0.15em;
+      text-align: center;
+      margin: var(--uui-size-space-4, 12px) 0;
+    }
+    #actions {
+      display: flex;
+      gap: var(--uui-size-space-3, 9px);
+    }
+    #error {
+      margin: 0;
+      color: var(--uui-color-danger, #d42054);
+    }
+    #notice {
+      margin: 0;
+      color: var(--uui-color-positive, #0b8152);
+    }
+  `
+}
+
+customElements.define('crombolo-device', CromboloDeviceElement)

package/assets/remote-approval.js

@@ -0,0 +1,134 @@
+/**
+ * The page a push to a protected environment is approved on (story 107). The
+ * person who pushed shares its link; someone else allowed to push here looks at
+ * who sent it and when, and approves or declines it.
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import '@umbraco-cms/backoffice/external/uui'
+
+const API = '/umbraco/remote/v1/jobs'
+
+class CromboloRemoteApprovalElement extends LitElement {
+  static properties = {
+    job: { type: String },
+    logoImage: { type: String, attribute: 'logo-image' },
+    _job: { state: true },
+    _error: { state: true },
+    _busy: { state: true },
+  }
+
+  constructor() {
+    super()
+    this.job = ''
+    this.logoImage = ''
+    this._job = undefined
+    this._error = ''
+    this._busy = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    const response = await fetch(`${API}/${encodeURIComponent(this.job)}`, {
+      credentials: 'include',
+    })
+    const body = await response.json().catch(() => ({}))
+    if (!response.ok) {
+      this._error = body.title ?? 'There is no such push.'
+      return
+    }
+    this._job = body
+  }
+
+  async #decide(approve) {
+    this._busy = true
+    this._error = ''
+    const response = await fetch(
+      `${API}/${encodeURIComponent(this.job)}/${approve ? 'approve' : 'decline'}`,
+      {
+        method: 'POST',
+        credentials: 'include',
+      },
+    )
+    const body = await response.json().catch(() => ({}))
+    this._busy = false
+    if (!response.ok) {
+      this._error = body.title ?? 'That could not be done.'
+      return
+    }
+    this._job = body
+  }
+
+  #body() {
+    const job = this._job
+    if (!job)
+      return this._error ? html`<p id="error">${this._error}</p>` : html`<uui-loader></uui-loader>`
+    const when = new Date(job.createdAt).toLocaleString()
+    if (job.state !== 'approval-required')
+      return html`<p>
+        ${job.state === 'refused' ? (job.problem?.title ?? 'This push was declined.') : 'This push has been decided.'}
+      </p>`
+    return html`
+      <p>
+        <strong>${job.requestedBy}</strong> wants to replace <strong>${job.environment}</strong> with a copy of their
+        site, sent ${when}. Everything on ${job.environment} that is not in it goes to the recycle bin, and a backup is
+        taken first.
+      </p>
+      ${this._error ? html`<p id="error" role="alert">${this._error}</p>` : nothing}
+      <div id="actions">
+        <uui-button look="primary" color="positive" label="Approve" .state=${this._busy ? 'waiting' : undefined}
+          @click=${() => this.#decide(true)}></uui-button>
+        <uui-button look="outline" color="danger" label="Decline" @click=${() => this.#decide(false)}></uui-button>
+      </div>`
+  }
+
+  render() {
+    return html`<div id="layout">
+      <uui-box id="card">
+        ${this.logoImage ? html`<img id="logo" src=${this.logoImage} alt="" />` : nothing}
+        <h1 class="uui-h3">Approve a push</h1>
+        ${this.#body()}
+      </uui-box>
+    </div>`
+  }
+
+  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: 480px;
+    }
+    #logo {
+      display: block;
+      height: 48px;
+      margin-bottom: var(--uui-size-space-4, 12px);
+    }
+    h1 {
+      margin: 0 0 var(--uui-size-space-5, 18px);
+    }
+    #actions {
+      display: flex;
+      gap: var(--uui-size-space-3, 9px);
+    }
+    #error {
+      color: var(--uui-color-danger, #d42054);
+    }
+  `
+}
+
+customElements.define('crombolo-remote-approval', CromboloRemoteApprovalElement)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.14.1",
+    "@crombolo/core": "0.15.0",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/branding/localization-en.js

@@ -46,6 +46,9 @@ export default {
       "Hello there and welcome to Crombolo! In just 1 minute you'll be good to go, we just need you to setup a password and add a picture for your avatar.",
     userinviteExpiredMessage:
       'Welcome to Crombolo! Unfortunately your invite has expired. Please contact your administrator to get a new one.',
+
+    // The heading over the remote permissions (story 107) in a user group.
+    'permissionsEntityGroup_crombolo-remote': 'Moving whole sites',
   },
   general: {
     umbracoInfo: 'Crombolo info',

package/plugin/branding/theme-dark.css

@@ -0,0 +1,61 @@
+/*
+ * Crombolo's dark mode (story 049): the vendored `dark.css` for every token,
+ * warmed to the brand — cocoa surfaces, cream text, terracotta accents.
+ *
+ * The theme context appends this after `theme.css` when Dark is chosen, so it
+ * overrides the light palette. `/umbraco/backoffice/…` is served wherever the
+ * back office is mounted, which is why the import can name it outright.
+ * `tests/theme.test.ts` checks the contrast of every pair below.
+ */
+@import url("/umbraco/backoffice/css/dark.css");
+
+:root {
+  --crombolo-orange: #da987c;
+  --crombolo-orange-light: #e2ae98;
+  --crombolo-ink: #f6ede4;
+  --crombolo-ink-dimmed: #c9b5a5;
+  --crombolo-night: #1f1813;
+  --crombolo-night-surface: #2a211b;
+  --crombolo-night-alt: #342922;
+  --crombolo-night-header: #2b1d15;
+  --crombolo-cocoa-deep: #25160e;
+
+  --uui-color-background: var(--crombolo-night);
+  --uui-color-surface: var(--crombolo-night-surface);
+  --uui-color-surface-alt: var(--crombolo-night-alt);
+  --uui-color-surface-emphasis: #30261f;
+  --uui-color-text: var(--crombolo-ink);
+  --uui-color-text-alt: var(--crombolo-ink-dimmed);
+  --uui-color-interactive: var(--crombolo-ink);
+  --uui-color-interactive-emphasis: var(--crombolo-orange-light);
+
+  /* The accent is light, so what sits on it is dark, as in the light mode. */
+  --uui-color-default: var(--crombolo-orange);
+  --uui-color-default-emphasis: var(--crombolo-orange-light);
+  --uui-color-default-standalone: var(--crombolo-orange);
+  --uui-color-default-contrast: var(--crombolo-cocoa-deep);
+  --uui-color-selected: var(--crombolo-orange);
+  --uui-color-selected-emphasis: var(--crombolo-orange-light);
+  --uui-color-selected-standalone: var(--crombolo-orange);
+  --uui-color-selected-contrast: var(--crombolo-cocoa-deep);
+  --uui-color-current: var(--crombolo-orange);
+  --uui-color-current-emphasis: var(--crombolo-orange-light);
+  --uui-color-current-contrast: var(--crombolo-cocoa-deep);
+  --uui-color-focus: var(--crombolo-orange);
+
+  /* A dark header with cream text; the active section's marker is the accent. */
+  --uui-color-header-surface: var(--crombolo-night-header);
+  --uui-color-header-contrast: rgb(246 237 228 / 80%);
+  --uui-color-header-contrast-emphasis: var(--crombolo-ink);
+  --crombolo-header-current: var(--crombolo-orange);
+
+  /* The SEO view's search-result preview, in Google's dark-mode link blue. */
+  --crombolo-snippet-title: #8ab4f8;
+
+  --uui-color-border: #4a3b31;
+  --uui-color-border-standalone: #8b7564;
+  --uui-color-border-emphasis: #a38c7a;
+  --uui-color-divider: #3a2e26;
+  --uui-color-divider-standalone: #4a3b31;
+  --uui-color-divider-emphasis: #5a4638;
+}

package/plugin/branding/theme-system.css

@@ -0,0 +1,6 @@
+/*
+ * "Match my system" (story 049): the dark mode while the computer asks for
+ * dark, and the light one otherwise — including a change made while the back
+ * office is open, which the media query follows by itself.
+ */
+@import url("./theme-dark.css") (prefers-color-scheme: dark);

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/seo/document-view.js

@@ -122,7 +122,8 @@ export default class CromboloSeoDocumentViewElement extends UmbLitElement {
       overflow-wrap: anywhere;
     }
     .snippet .title {
-      color: #1a0dab;
+      /* A search result's link blue: Google's own, light and dark. */
+      color: var(--crombolo-snippet-title, #1a0dab);
       font-size: 20px;
       margin: 4px 0;
     }

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "allowPublicAccess": false,
   "extensions": [
     {

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

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Sign-in Dialog",
   "id": "Crombolo.SignInDialog",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/signed-in-devices.js

@@ -0,0 +1,90 @@
+/**
+ * The terminals signed in as the current person (story 107), in their profile:
+ * each one named, when it signed in and was last used, and signed out from here.
+ */
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+
+const API = '/umbraco/management/api/v1/security/back-office/devices'
+
+const when = (iso) => (iso ? new Date(iso).toLocaleString() : '—')
+
+export default class CromboloSignedInDevicesElement extends UmbLitElement {
+  static properties = { _devices: { state: true }, _error: { state: true } }
+
+  constructor() {
+    super()
+    this._devices = undefined
+    this._error = ''
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    try {
+      const response = await fetch(API, { credentials: 'include' })
+      this._devices = response.ok ? await response.json() : []
+    } catch {
+      this._error = 'Could not load your signed-in devices.'
+    }
+  }
+
+  async #signOut(id) {
+    const response = await fetch(`${API}/${id}`, { method: 'DELETE', credentials: 'include' })
+    if (!response.ok) this._error = 'That device could not be signed out.'
+    await this.#load()
+  }
+
+  render() {
+    if (!this._devices) return nothing
+    return html`<uui-box headline="Signed-in devices">
+      ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
+      ${
+        this._devices.length === 0
+          ? html`<p>No terminals are signed in as you.</p>`
+          : html`<ul>
+              ${this._devices.map(
+                (device) => html`<li>
+                  <div>
+                    <strong>${device.name ?? 'A terminal'}</strong>
+                    <small>signed in ${when(device.signedInAt)}, last used ${when(device.lastUsedAt)}</small>
+                  </div>
+                  <uui-button look="secondary" label="Sign out" @click=${() => this.#signOut(device.id)}></uui-button>
+                </li>`,
+              )}
+            </ul>`
+      }
+    </uui-box>`
+  }
+
+  static styles = css`
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--uui-size-space-4);
+      padding: var(--uui-size-space-3) 0;
+      border-bottom: 1px solid var(--uui-color-divider);
+    }
+    li div {
+      display: flex;
+      flex-direction: column;
+    }
+    small {
+      color: var(--uui-color-text-alt);
+    }
+    .error {
+      color: var(--uui-color-danger);
+    }
+  `
+}
+
+customElements.define('crombolo-signed-in-devices', CromboloSignedInDevicesElement)

package/plugin/theme-switch.js

@@ -0,0 +1,134 @@
+/**
+ * Light, dark or the computer's choice, from the header (story 049).
+ *
+ * The choice is Umbraco's theme context's — it links the stylesheet and keeps
+ * the alias in `localStorage` for the shell's early script to apply before the
+ * next paint. This adds the menu, and keeps the choice for the person in user
+ * data, so it follows them to another browser.
+ */
+import { css, html } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes'
+
+const USER_DATA = '/umbraco/management/api/v1/user-data'
+const GROUP = 'crombolo'
+const IDENTIFIER = 'theme'
+const EARLY = 'crombolo-early-theme'
+
+const CHOICES = [
+  { alias: 'umb-light-theme', label: 'Light', icon: 'icon-sunny' },
+  { alias: 'Crombolo.Theme.Dark', label: 'Dark', icon: 'icon-contrast' },
+  { alias: 'Crombolo.Theme.System', label: 'Match my system', icon: 'icon-lightbulb' },
+]
+
+export default class CromboloThemeSwitchElement extends UmbLitElement {
+  static properties = { _alias: { state: true } }
+
+  #context
+  #savedKey
+
+  constructor() {
+    super()
+    this._alias = 'umb-light-theme'
+    this.consumeContext(UMB_THEME_CONTEXT, (context) => {
+      this.#context = context
+      this.observe(context.theme, (alias) => {
+        this._alias = alias || 'umb-light-theme'
+        // The shell's early stylesheet stood in until the context took over;
+        // once the choice differs from it, it would only fight the new one.
+        const early = document.getElementById(EARLY)
+        if (early && early.dataset.theme !== this._alias) early.remove()
+      })
+      this.#restore()
+    })
+  }
+
+  /** The person's saved choice, when this browser's differs from it. */
+  async #restore() {
+    try {
+      const query = new URLSearchParams({ groups: GROUP, identifiers: IDENTIFIER, take: '1' })
+      const response = await fetch(`${USER_DATA}?${query}`, { credentials: 'include' })
+      if (!response.ok) return
+      const found = (await response.json()).items?.[0]
+      if (!found) return
+      this.#savedKey = found.key
+      if (found.value && found.value !== this._alias) this.#context?.setThemeByAlias(found.value)
+    } catch {
+      // This browser's choice stands.
+    }
+  }
+
+  async #save(alias) {
+    const body = { group: GROUP, identifier: IDENTIFIER, value: alias }
+    try {
+      if (this.#savedKey) {
+        await fetch(USER_DATA, {
+          method: 'PUT',
+          credentials: 'include',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ ...body, key: this.#savedKey }),
+        })
+        return
+      }
+      const response = await fetch(USER_DATA, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      this.#savedKey = response.headers.get('umb-generated-resource') ?? undefined
+    } catch {
+      // Kept in this browser regardless; another will start from its own.
+    }
+  }
+
+  #choose(alias) {
+    this.#context?.setThemeByAlias(alias)
+    this.#save(alias)
+    this.renderRoot.querySelector('#crombolo-theme-menu')?.hidePopover?.()
+  }
+
+  render() {
+    const current = CHOICES.find((choice) => choice.alias === this._alias) ?? CHOICES[0]
+    return html`
+      <uui-button
+        compact
+        look="primary"
+        label="Light or dark: ${current.label}"
+        popovertarget="crombolo-theme-menu">
+        <umb-icon name=${current.icon}></umb-icon>
+      </uui-button>
+      <uui-popover-container id="crombolo-theme-menu" placement="bottom-end">
+        <umb-popover-layout>
+          ${CHOICES.map(
+            (choice) => html`<uui-menu-item
+                label=${choice.label}
+                ?active=${choice.alias === this._alias}
+                @click-label=${() => this.#choose(choice.alias)}>
+                <umb-icon slot="icon" name=${choice.icon}></umb-icon>
+              </uui-menu-item>`,
+          )}
+        </umb-popover-layout>
+      </uui-popover-container>
+    `
+  }
+
+  static styles = css`
+    uui-button {
+      font-size: 18px;
+      --uui-button-background-color: var(--umb-header-app-button-background-color, transparent);
+      --uui-button-background-color-hover: var(
+        --umb-header-app-button-background-color-hover,
+        var(--uui-color-emphasis)
+      );
+    }
+    :host {
+      --uui-menu-item-flat-structure: 1;
+    }
+    umb-popover-layout {
+      min-width: 12rem;
+    }
+  `
+}
+
+customElements.define('crombolo-theme-switch', CromboloThemeSwitchElement)

package/plugin/two-factor-setup.js

@@ -124,6 +124,7 @@ export default class CromboloTwoFactorSetupElement extends UmbLitElement {
       width: 200px;
       height: 200px;
       margin: var(--uui-size-space-4) auto;
+      /* White in every mode: a scanner reads dark modules on a light ground. */
       background: #fff;
     }
     .secret code,

package/plugin/umbraco-package.json

@@ -2,16 +2,95 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "allowPublicAccess": false,
   "extensions": [
+    {
+      "type": "theme",
+      "alias": "Crombolo.Theme.Dark",
+      "name": "Dark",
+      "css": "/crombolo-plugin/branding/theme-dark.css",
+      "weight": 200,
+      "overwrites": "umb-dark-theme"
+    },
+    {
+      "type": "theme",
+      "alias": "Crombolo.Theme.System",
+      "name": "Match my system",
+      "css": "/crombolo-plugin/branding/theme-system.css",
+      "weight": 250
+    },
+    {
+      "type": "headerApp",
+      "alias": "Crombolo.HeaderApp.Theme",
+      "name": "Light or dark",
+      "element": "/crombolo-plugin/theme-switch.js",
+      "weight": 850
+    },
+    {
+      "type": "entityUserPermission",
+      "alias": "Crombolo.UserPermission.Remote.Pull",
+      "name": "Crombolo Remote Pull Permission",
+      "forEntityTypes": ["crombolo-remote"],
+      "meta": {
+        "verbs": ["Crombolo.Remote.Pull"],
+        "label": "Pull a copy",
+        "description": "Download a copy of this site to work on, with members and users anonymised"
+      }
+    },
+    {
+      "type": "entityUserPermission",
+      "alias": "Crombolo.UserPermission.Remote.PullFull",
+      "name": "Crombolo Remote PullFull Permission",
+      "forEntityTypes": ["crombolo-remote"],
+      "meta": {
+        "verbs": ["Crombolo.Remote.PullFull"],
+        "label": "Pull a full copy",
+        "description": "Download a copy that includes members and users, sealed with a passphrase"
+      }
+    },
+    {
+      "type": "entityUserPermission",
+      "alias": "Crombolo.UserPermission.Remote.Push",
+      "name": "Crombolo Remote Push Permission",
+      "forEntityTypes": ["crombolo-remote"],
+      "meta": {
+        "verbs": ["Crombolo.Remote.Push"],
+        "label": "Push",
+        "description": "Replace this site with a copy sent from a terminal"
+      }
+    },
+    {
+      "type": "entityUserPermission",
+      "alias": "Crombolo.UserPermission.Remote.PushProtected",
+      "name": "Crombolo Remote PushProtected Permission",
+      "forEntityTypes": ["crombolo-remote"],
+      "meta": {
+        "verbs": ["Crombolo.Remote.PushProtected"],
+        "label": "Push to a protected site",
+        "description": "Replace a site people rely on, and approve or decline other people's pushes to it"
+      }
+    },
+    {
+      "type": "userProfileApp",
+      "alias": "Crombolo.UserProfileApp.SignedInDevices",
+      "name": "Crombolo Signed-in Devices",
+      "element": "/crombolo-plugin/signed-in-devices.js",
+      "weight": 100,
+      "meta": {
+        "label": "Signed-in devices",
+        "pathname": "devices"
+      }
+    },
     {
       "type": "mfaLoginProvider",
       "alias": "Crombolo.MfaLoginProvider.Authenticator",
       "name": "Crombolo Authenticator App",
       "forProviderName": "UmbracoUserAppAuthenticator",
       "element": "/crombolo-plugin/two-factor-setup.js",
-      "meta": { "label": "Authenticator app" }
+      "meta": {
+        "label": "Authenticator app"
+      }
     },
     {
       "type": "sectionView",

package/plugin/welcome-dashboard.js

@@ -31,8 +31,8 @@ const STEPS = [
   {
     title: 'Keep the schema in the repository',
     body: html`Content types, data types and templates are also files:
-      <code>schema/*.toml</code>. <code>crombolo schema sync</code> writes changes made in
-      the backoffice back out, and <code>crombolo schema check</code> tells you whether a
+      <code>schema/*.toml</code>. <code>crombolo types sync</code> writes changes made in
+      the backoffice back out, and <code>crombolo types check</code> tells you whether a
       database matches. Schema travels through Git, not a database export.`,
   },
 ]

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './manifests.ts'
 export * from './paths.ts'
 export * from './shell.ts'
 export * from './static.ts'
+export * from './theme-early.ts'

package/src/login-assets.ts

@@ -13,6 +13,9 @@ export function resolveLoginAsset(backOfficePath: string, pathname: string): str
   const prefix = `${backOfficePath}/login/`
   if (!pathname.startsWith(prefix)) return undefined
   const name = pathname.slice(prefix.length)
-  // Only the files we ship; no traversal, no directory listing.
-  return name === 'login.js' ? join(LOGIN_ASSET_DIR, 'login.js') : undefined
+  // Only the files we ship; no traversal, no directory listing. `device.js` and
+  // `remote-approval.js` are the pages a sign-in and a push are approved on (story 107).
+  return ['login.js', 'device.js', 'remote-approval.js'].includes(name)
+    ? join(LOGIN_ASSET_DIR, name)
+    : undefined
 }

package/src/shell.ts

@@ -9,6 +9,7 @@
 import { MANAGEMENT_API_PATH } from '@crombolo/core'
 import type { PackageManifestImportmap } from './manifests.ts'
 import type { BackOfficePaths } from './paths.ts'
+import { earlyThemeScript } from './theme-early.ts'
 
 export interface ShellSettings {
   /** GlobalSettings.DefaultUILanguage — the initial UI language. */
@@ -81,6 +82,7 @@ export function renderBackOfficeShell(
   <link rel="stylesheet" href="${assets}/css/umb-css.css" />
   <link rel="stylesheet" href="${assets}/css/light.css" />
   <link rel="stylesheet" href="${paths.pluginPath}/branding/theme.css" />
+  <script>${earlyThemeScript(paths)}</script>
   <script type="importmap">
 ${JSON.stringify(importmap, null, 2)}
   </script>
@@ -117,7 +119,8 @@ export function renderLoginShell(
   <title>${escapeHtml(settings.title)}</title>
   <link rel="stylesheet" href="${assets}/css/light.css" />
   <link rel="stylesheet" href="${paths.pluginPath}/branding/theme.css" />
-  <style>body { margin: 0; padding: 0; background-color: #fff7ea; }</style>
+  <script>${earlyThemeScript(paths)}</script>
+  <style>body { margin: 0; padding: 0; background-color: var(--uui-color-background, #fff7ea); }</style>
   <script type="importmap">
 ${JSON.stringify(importmap, null, 2)}
   </script>
@@ -140,3 +143,65 @@ ${noscript(`${graphics}/login-logo-alternative`)}
 </html>
 `
 }
+
+/**
+ * A page of its own beside the backoffice, for a signed-in person: approving a
+ * command-line sign-in or a protected push (story 107). `element` is the custom
+ * element's opening and closing tags, attributes already escaped.
+ */
+export function renderStandaloneShell(
+  paths: BackOfficePaths,
+  importmap: PackageManifestImportmap,
+  settings: { title: string; script: string; element: string },
+): string {
+  const assets = paths.assetsPath
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <base href="${paths.backOfficePath}/" />
+  <link rel="icon" type="image/svg+xml" href="${assets}/assets/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex, nofollow" />
+  <title>${escapeHtml(settings.title)}</title>
+  <link rel="stylesheet" href="${assets}/css/light.css" />
+  <link rel="stylesheet" href="${paths.pluginPath}/branding/theme.css" />
+  <script>${earlyThemeScript(paths)}</script>
+  <style>body { margin: 0; padding: 0; background-color: var(--uui-color-background, #fff7ea); }</style>
+  <script type="importmap">
+${JSON.stringify(importmap, null, 2)}
+  </script>
+  <script type="module" src="${paths.backOfficePath}/login/${settings.script}"></script>
+</head>
+<body class="uui-font uui-text" style="margin: 0; padding: 0; overflow: hidden">
+${settings.element}
+</body>
+</html>
+`
+}
+
+/** The page a command-line sign-in is approved on: the person is signed in already. */
+export function renderDeviceShell(
+  paths: BackOfficePaths,
+  importmap: PackageManifestImportmap,
+  settings: { title: string; userCode?: string },
+): string {
+  return renderStandaloneShell(paths, importmap, {
+    title: settings.title,
+    script: 'device.js',
+    element: `<crombolo-device user-code="${escapeHtml(settings.userCode ?? '')}" logo-image="${MANAGEMENT_API_PATH}/security/back-office/graphics/login-logo-alternative"></crombolo-device>`,
+  })
+}
+
+/** The page a push to a protected environment is approved or declined on. */
+export function renderRemoteApprovalShell(
+  paths: BackOfficePaths,
+  importmap: PackageManifestImportmap,
+  settings: { title: string; job: string },
+): string {
+  return renderStandaloneShell(paths, importmap, {
+    title: settings.title,
+    script: 'remote-approval.js',
+    element: `<crombolo-remote-approval job="${escapeHtml(settings.job)}" logo-image="${MANAGEMENT_API_PATH}/security/back-office/graphics/login-logo-alternative"></crombolo-remote-approval>`,
+  })
+}

package/src/theme-early.ts

@@ -0,0 +1,50 @@
+/**
+ * The back office's light or dark mode, applied before the first paint
+ * (story 049). Umbraco's theme context keeps the choice in `localStorage` and
+ * applies it once the client has booted, so a reload painted light first; and
+ * the login shell boots no theme context at all. This inline script reads the
+ * same key and links the same stylesheet at once.
+ */
+import type { BackOfficePaths } from './paths.ts'
+
+/** The key Umbraco's theme context keeps the choice under. */
+export const THEME_STORAGE_KEY = 'umb-theme-alias'
+
+export const THEME_DARK = 'Crombolo.Theme.Dark'
+export const THEME_SYSTEM = 'Crombolo.Theme.System'
+
+/** Umbraco's own dark, which crombolo's replaces: a browser that chose it gets the new one. */
+const RENAMED: Record<string, string> = { 'umb-dark-theme': THEME_DARK }
+
+export const EARLY_THEME_ID = 'crombolo-early-theme'
+
+/** Each choice's stylesheet; light, or nothing chosen, needs none beyond the shell's own. */
+export function themeStylesheets(paths: BackOfficePaths): Record<string, string> {
+  return {
+    [THEME_DARK]: `${paths.pluginPath}/branding/theme-dark.css`,
+    [THEME_SYSTEM]: `${paths.pluginPath}/branding/theme-system.css`,
+    'umb-high-contrast-theme': `${paths.assetsPath}/css/high-contrast.css`,
+  }
+}
+
+/** The inline script, as the shells embed it. It fails quietly: light is a fine fallback. */
+export function earlyThemeScript(paths: BackOfficePaths): string {
+  const sheets = JSON.stringify(themeStylesheets(paths))
+  const renamed = JSON.stringify(RENAMED)
+  return `(function () {
+  try {
+    var key = ${JSON.stringify(THEME_STORAGE_KEY)};
+    var alias = localStorage.getItem(key);
+    var renamed = ${renamed};
+    if (alias && renamed[alias]) { alias = renamed[alias]; localStorage.setItem(key, alias); }
+    var href = alias ? ${sheets}[alias] : undefined;
+    if (!href) return;
+    var link = document.createElement('link');
+    link.id = ${JSON.stringify(EARLY_THEME_ID)};
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.setAttribute('data-theme', alias);
+    document.head.appendChild(link);
+  } catch (error) {}
+})();`
+}