npm - @crombolo/backoffice-host - Versions diffs - 0.16.0 → 0.18.0 - Mend

@crombolo/backoffice-host 0.16.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/package.json +2 -2
package/plugin/assistant/umbraco-package.json +1 -1
package/plugin/branding/branding.js +93 -0
package/plugin/branding/logo-header-dark.svg +1 -0
package/plugin/branding/logo-surface-dark.svg +1 -0
package/plugin/forms-client.js +3 -0
package/plugin/forms-overview.js +187 -2
package/plugin/forms-workflows.js +147 -0
package/plugin/localizations/umbraco-package.json +1 -1
package/plugin/notifications-dialog.js +62 -0
package/plugin/seo/umbraco-package.json +1 -1
package/plugin/sign-in/umbraco-package.json +1 -1
package/plugin/umbraco-package.json +7 -1
package/src/graphics.ts +7 -0
package/src/theme-early.ts +18 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.16.0",
+  "version": "0.18.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.16.0",
+    "@crombolo/core": "0.18.0",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json CHANGED Viewed

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

package/plugin/branding/branding.js CHANGED Viewed

@@ -70,8 +70,101 @@ function correctLogoLink() {
   return true
 }
+/** Where Umbraco's theme context keeps the choice, as the shells' early script reads it. */
+const THEME_KEY = 'umb-theme-alias'
+/** Whether a theme choice paints the back office dark: Dark, or Match my system on a dark computer. */
+export function isDarkTheme(alias, prefersDark) {
+  return (
+    alias === 'Crombolo.Theme.Dark' ||
+    alias === 'umb-dark-theme' ||
+    (alias === 'Crombolo.Theme.System' && Boolean(prefersDark))
+  )
+}
+const GRAPHIC =
+  /(\/security\/back-office\/graphics\/)(logo|logo-alternative|login-logo|login-logo-alternative)(-dark)?$/
+/**
+ * A logo's address for the theme: the cream-lettered `-dark` variant on a dark
+ * theme, the plain one otherwise. Anything that is not one of the logos comes
+ * back as it was.
+ */
+export function themedLogoUrl(src, dark) {
+  const match = GRAPHIC.exec(src ?? '')
+  if (!match) return src
+  return `${src.slice(0, match.index)}${match[1]}${match[2]}${dark ? '-dark' : ''}`
+}
+const prefersDark = () => {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  } catch {
+    return false
+  }
+}
+const storedTheme = () => {
+  try {
+    return localStorage.getItem(THEME_KEY)
+  } catch {
+    return null
+  }
+}
+/**
+ * The header's logo, and the wordmark in its popover, in the theme's colours.
+ *
+ * `umb-app-logo` picks its graphic from Umbraco's own theme names, and the
+ * header pins it to the one drawn for an orange bar, so its cocoa lettering
+ * vanished on the dark header. Like the link above, this reaches into the
+ * vendored element and does nothing if it is not what it was.
+ */
+function applyThemedLogos() {
+  const dark = isDarkTheme(storedTheme(), prefersDark())
+  const header = deepQuery('umb-backoffice-header-logo')?.shadowRoot
+  const mark = header?.querySelector('umb-app-logo')?.shadowRoot?.querySelector('img')
+  if (!mark) return false
+  const src = mark.getAttribute('src')
+  const next = themedLogoUrl(src, dark)
+  if (next !== src) mark.setAttribute('src', next)
+  const popover = header.querySelector('img#logo')
+  if (popover) {
+    popover.dataset.lightSrc ??= popover.getAttribute('src') ?? ''
+    const wanted = dark
+      ? next.replace(/graphics\/logo-dark$/, 'graphics/logo-alternative-dark')
+      : popover.dataset.lightSrc
+    if (popover.getAttribute('src') !== wanted) popover.setAttribute('src', wanted)
+  }
+  return true
+}
+/** Applies the logos now and on every change of theme: the menu, another tab, or the computer's. */
+function followTheme() {
+  const apply = () => setTimeout(applyThemedLogos, 0)
+  // The theme context swaps the theme's stylesheet in the head when the choice changes.
+  new MutationObserver(apply).observe(document.head, { childList: true })
+  window.addEventListener('storage', (event) => {
+    if (event.key === THEME_KEY) apply()
+  })
+  try {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', apply)
+  } catch {
+    // Without media queries, Match my system stays light.
+  }
+}
 export const onInit = () => {
   const brand = brandName()
+  let themed = false
+  const logos = setInterval(() => {
+    if (applyThemedLogos() && !themed) {
+      themed = true
+      clearInterval(logos)
+      followTheme()
+    }
+  }, 250)
+  setTimeout(() => clearInterval(logos), 30_000)
   const correct = () => {
     const corrected = brandedTitle(document.title, brand)
     if (corrected !== document.title) document.title = corrected

package/plugin/branding/logo-header-dark.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="81.25 269.75 1022.75 237.5" role="img" aria-label="crombolo"><circle cx="200" cy="388.5" r="116.75" fill="#cb6f48"/><path transform="matrix(0.025 0 0 -0.025 75 516)" d="M4285 8205 c-459 -94 -647 -159 -1014 -349 -249 -130 -544 -347 -669 -494 -26 -30 -82 -96 -125 -145 -218 -254 -207 -378 24 -266 295 143 924 329 1113 329 19 0 78 9 131 20 128 26 792 30 910 5 39 -8 108 -20 155 -25 378 -43 1093 -273 1364 -438 45 -27 114 -66 153 -86 91 -45 440 -278 525 -349 35 -29 91 -74 124 -100 651 -496 1244 -1578 1303 -2379 13 -165 47 -197 125 -115 86 90 236 513 236 663 0 23 9 86 20 139 25 122 27 345 4 450 -8 39 -19 111 -24 162 -50 500 -394 1231 -774 1648 -50 55 -116 130 -145 167 -30 37 -81 89 -115 115 -33 26 -114 96 -178 155 -117 106 -442 334 -560 394 -29 14 -100 55 -158 89 -97 59 -240 123 -516 231 -122 47 -541 156 -671 174 -45 6 -112 17 -150 25 -152 32 -900 19 -1088 -20z M3300 6458 c-58 -11 -142 -26 -186 -34 -80 -14 -243 -58 -414 -111 -742 -234 -1299 -909 -1300 -1575 0 -312 82 -391 218 -208 298 402 1010 790 1450 790 17 0 74 9 127 20 79 16 136 20 305 20 168 0 228 -4 310 -20 56 -11 124 -20 152 -20 406 0 1286 -389 1680 -742 56 -52 133 -117 171 -147 37 -29 88 -81 114 -115 26 -33 75 -92 108 -131 303 -346 645 -1054 645 -1336 0 -14 9 -68 20 -120 23 -111 27 -371 8 -505 -22 -155 37 -185 183 -93 657 414 699 1621 89 2594 -137 218 -431 585 -518 647 -11 7 -75 66 -144 130 -138 130 -157 146 -338 273 -329 233 -595 368 -985 501 -208 72 -585 164 -670 164 -18 0 -79 9 -135 20 -147 29 -730 28 -890 -2z M2909 4331 c-921 -186 -1424 -895 -1087 -1533 105 -199 210 -222 296 -65 284 517 979 758 1655 572 241 -66 501 -192 647 -314 25 -21 78 -64 119 -97 262 -210 502 -618 586 -998 64 -293 346 -107 440 291 45 189 45 192 -20 531 -50 262 -304 691 -560 947 -304 304 -848 601 -1190 650 -28 4 -90 16 -140 26 -153 32 -566 26 -746 -10z" fill="#fdebd4"/><path transform="matrix(0.025 0 0 -0.025 340 470)" d="M17231 5945 c-168 -47 -253 -129 -320 -310 -32 -87 -48 -4483 -16 -4609 116 -459 691 -531 916 -115 64 119 84 124 184 38 765 -661 1980 -322 2461 686 211 443 246 966 103 1527 -156 616 -774 1208 -1325 1273 -33 4 -103 16 -157 26 -288 56 -760 -83 -1009 -295 -193 -166 -188 -183 -188 699 0 837 0 835 -144 974 -117 112 -326 156 -505 106z m1804 -2497 c449 -160 700 -668 575 -1164 -177 -708 -937 -952 -1444 -465 -535 516 -283 1523 414 1655 84 16 386 -2 455 -26z M25519 5946 c-139 -37 -259 -165 -328 -351 -41 -109 -46 -4365 -6 -4534 132 -554 862 -581 1000 -36 23 90 23 4460 0 4550 -76 297 -358 454 -666 371z M2125 4445 c-485 -100 -723 -223 -1037 -540 -245 -245 -338 -398 -452 -740 -219 -652 -94 -1396 311 -1852 46 -52 91 -105 99 -119 9 -13 66 -65 128 -116 295 -246 613 -393 943 -438 45 -6 112 -17 150 -25 103 -22 324 -19 463 5 63 12 153 28 200 36 766 137 1266 828 868 1200 -185 173 -405 157 -681 -48 -184 -137 -210 -151 -367 -204 -503 -170 -1103 189 -1182 706 -5 36 -16 102 -24 148 -41 249 136 680 339 823 406 286 884 272 1252 -37 290 -244 676 -128 770 231 147 567 -919 1148 -1780 970z M8460 4464 c-36 -7 -103 -19 -150 -25 -91 -12 -407 -112 -494 -156 -129 -66 -499 -343 -532 -399 -6 -11 -42 -55 -79 -99 -429 -503 -572 -1318 -336 -1911 86 -219 195 -419 289 -532 31 -38 78 -96 104 -130 27 -34 76 -83 110 -110 33 -26 95 -75 137 -110 521 -432 1453 -504 2071 -160 1479 825 1219 3159 -397 3572 -283 73 -560 96 -723 60z m423 -999 c75 -19 211 -88 326 -165 370 -248 476 -916 208 -1315 -457 -679 -1424 -500 -1628 302 -176 689 438 1349 1094 1178z M14940 4464 c-36 -7 -103 -19 -150 -25 -248 -33 -455 -137 -665 -334 -169 -159 -170 -159 -345 12 -176 172 -279 233 -485 290 -166 46 -660 43 -790 -6 -164 -60 -274 -124 -384 -221 -145 -128 -166 -128 -235 -1 -213 388 -797 302 -911 -134 -23 -89 -23 -2930 0 -3020 95 -368 575 -518 841 -264 148 142 144 114 144 1134 0 920 5 998 81 1200 165 442 803 510 1016 109 102 -194 97 -136 103 -1204 5 -965 5 -965 27 -1024 183 -481 916 -433 973 64 5 47 15 101 22 120 9 26 14 263 18 940 5 905 5 905 31 975 152 410 629 539 935 252 186 -173 188 -189 194 -1342 5 -980 5 -980 28 -1037 169 -418 775 -418 944 0 39 97 41 2271 2 2435 -92 387 -272 671 -547 865 -212 150 -645 260 -847 216z M22565 4445 c-282 -58 -363 -84 -555 -180 -506 -253 -953 -845 -1009 -1339 -6 -44 -17 -110 -25 -146 -60 -251 31 -828 177 -1115 199 -393 460 -651 865 -854 141 -71 383 -156 468 -166 33 -3 103 -15 156 -26 302 -60 757 21 1108 196 1042 522 1348 1936 628 2907 -416 563 -1157 859 -1813 723z m590 -997 c396 -142 605 -458 605 -913 0 -803 -753 -1231 -1403 -798 -576 383 -505 1340 123 1662 174 90 496 113 675 49z M28340 4464 c-35 -7 -101 -19 -145 -24 -484 -66 -963 -375 -1258 -815 -156 -233 -278 -547 -298 -765 -5 -58 -16 -132 -24 -165 -21 -87 -19 -270 5 -375 11 -47 20 -101 20 -120 2 -368 398 -997 793 -1261 386 -258 945 -393 1324 -320 54 10 124 22 157 26 709 84 1433 881 1486 1640 5 66 14 136 19 155 6 19 11 64 11 100 0 36 -5 81 -11 100 -5 19 -14 89 -19 155 -33 469 -342 1002 -764 1317 -216 162 -535 294 -793 328 -45 6 -112 17 -150 25 -85 18 -267 18 -353 -1z m455 -1016 c875 -312 832 -1609 -60 -1855 -748 -206 -1382 660 -1017 1392 121 243 374 442 622 489 84 16 386 -2 455 -26z M6060 4425 c-214 -48 -298 -92 -455 -240 -164 -154 -183 -157 -249 -36 -238 434 -814 353 -931 -130 -41 -171 -35 -2904 7 -3017 184 -495 793 -495 976 0 27 73 27 73 32 918 5 845 5 845 49 970 126 362 303 489 706 509 311 16 439 111 521 388 118 400 -226 735 -656 638z" fill="#f6ede4"/></svg>

package/plugin/branding/logo-surface-dark.svg ADDED Viewed

@@ -0,0 +1 @@

package/plugin/forms-client.js CHANGED Viewed

@@ -30,6 +30,9 @@ export const listForms = async () => (await call('')).body.items ?? []
 /** The field and workflow types this site has, built in and from its bundles. */
 export const listFormTypes = async () => (await call('/available-types')).body
+/** The site's e-mail templates, for a Send email workflow's "E-mail design". */
+export const listEmailTemplates = async () => (await call('/email-templates')).body.items ?? []
 export const readForm = async (key) => (await call(`/${encodeURIComponent(key)}`)).body
 export const saveForm = (definition) =>

package/plugin/forms-overview.js CHANGED Viewed

@@ -17,6 +17,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
 import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'
 import {
   deleteForm,
+  listEmailTemplates,
   listForms,
   listFormTypes,
   previewChoices,
@@ -40,6 +41,17 @@ import {
   setPageCaption,
   withLayout,
 } from './forms-layout.js'
+import {
+  addWorkflow,
+  describeProblemPath,
+  removeWorkflow,
+  setWorkflowName,
+  setWorkflowSetting,
+  setWorkflowTrigger,
+  setWorkflowType,
+  switchValue,
+  workflowSettings,
+} from './forms-workflows.js'
 /** What a preview depends on, so it survives a layout change that copies the field. */
 const sourceKey = (source) => `${source.kind}|${source.parent}`
@@ -60,6 +72,8 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     _busy: { state: true },
     _choices: { state: true },
     _types: { state: true },
+    _workflowTypes: { state: true },
+    _designs: { state: true },
   }
   #notifications
@@ -78,6 +92,10 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     this._choices = new Map()
     /** Field types by name, as the server has them: built in and from bundles. */
     this._types = new Map()
+    /** Workflow types by name, likewise. */
+    this._workflowTypes = new Map()
+    /** The site's e-mail templates, for a Send email workflow's design. */
+    this._designs = []
   }
   connectedCallback() {
@@ -87,9 +105,16 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
   async #load() {
     try {
-      const [forms, types] = await Promise.all([listForms(), listFormTypes()])
+      const [forms, types, designs] = await Promise.all([
+        listForms(),
+        listFormTypes(),
+        // The picker can still offer Standard without them.
+        listEmailTemplates().catch(() => []),
+      ])
       this._forms = forms
       this._types = new Map(types.fields.map((info) => [info.type, info]))
+      this._workflowTypes = new Map(types.workflows.map((info) => [info.type, info]))
+      this._designs = designs
     } catch (error) {
       this._forms = []
       this._notice = error.message
@@ -484,6 +509,137 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
         </uui-table>`
   }
+  /** What happens after someone sends the form: each workflow with its settings. */
+  #workflows() {
+    const form = this._editing
+    const workflows = form.workflows ?? []
+    const types = [...this._workflowTypes.values()]
+    return html`<uui-box headline="Workflows" class="workflows">
+      <p class="offered">What happens after someone sends this form.</p>
+      ${
+        workflows.length === 0
+          ? html`<p>Nothing happens yet${form.storeEntries === false ? '' : ' beyond keeping the entry'}.</p>`
+          : nothing
+      }
+      ${repeat(
+        workflows,
+        (workflow, index) => workflow.key ?? index,
+        (
+          workflow,
+          index,
+        ) => html`<section class="workflow" aria-label=${workflow.name || `Workflow ${index + 1}`}>
+          <div class="bar">
+            <uui-input
+              label="Workflow name"
+              placeholder="Name"
+              .value=${workflow.name ?? ''}
+              @change=${(event) => this.#apply(setWorkflowName, index, event.target.value)}
+            ></uui-input>
+            <select
+              aria-label="What it does"
+              @change=${(event) => this.#apply(setWorkflowType, index, event.target.value)}
+            >
+              ${types.map(
+                (info) =>
+                  html`<option value=${info.type} ?selected=${info.type === workflow.type}>${info.label}</option>`,
+              )}
+            </select>
+            <select
+              aria-label="When it runs"
+              @change=${(event) => this.#apply(setWorkflowTrigger, index, event.target.value)}
+            >
+              <option value="submit" ?selected=${workflow.on !== 'approve'}>When the form is sent</option>
+              <option value="approve" ?selected=${workflow.on === 'approve'}>When an entry is approved</option>
+            </select>
+            <uui-button compact look="secondary" color="danger" label="Remove workflow"
+              @click=${() => {
+                if (!confirm(`Remove the workflow "${workflow.name || 'untitled'}"?`)) return
+                this.#apply(removeWorkflow, index)
+              }}></uui-button>
+          </div>
+          ${this.#workflowSettings(workflow, index)}
+        </section>`,
+      )}
+      <uui-button
+        look="secondary"
+        label="Add a workflow"
+        @click=${() => {
+          const first = this._workflowTypes.get('sendEmail') ?? types[0]
+          if (first) this.#apply(addWorkflow, first.type, first.label)
+        }}
+      ></uui-button>
+    </uui-box>`
+  }
+  #workflowSettings(workflow, index) {
+    const settings = workflowSettings(workflow.type, this._workflowTypes.get(workflow.type))
+    if (settings.length === 0) return nothing
+    const write = (key, value) => this.#apply(setWorkflowSetting, index, key, value)
+    return html`<div class="workflow-settings">
+      ${settings.map((setting) => {
+        const value = workflow.settings?.[setting.key]
+        const label = `${setting.label}${setting.required ? ' *' : ''}`
+        const hint = setting.description
+          ? html`<small class="offered">${setting.description}</small>`
+          : nothing
+        if (setting.kind === 'boolean')
+          return html`<div class="switch">
+            <uui-toggle
+              label=${label}
+              .checked=${value === undefined ? setting.defaultValue === true : value === true}
+              @change=${(event) => write(setting.key, switchValue(setting, event.target.checked))}
+            ></uui-toggle>
+            ${hint}
+          </div>`
+        if (setting.kind === 'design') {
+          const known = this._designs.some((design) => design.alias === value)
+          return html`<label>
+            <span>${label}</span>
+            <select
+              aria-label=${setting.label}
+              @change=${(event) => write(setting.key, event.target.value || undefined)}
+            >
+              <option value="" ?selected=${!value}>Standard</option>
+              ${this._designs.map(
+                (design) =>
+                  html`<option value=${design.alias} ?selected=${design.alias === value}>${design.name}</option>`,
+              )}
+              ${
+                value && !known
+                  ? html`<option value=${value} selected>${value} (not found)</option>`
+                  : nothing
+              }
+            </select>
+            ${hint}
+          </label>`
+        }
+        return html`<label>
+          <span>${label}</span>
+          <uui-input
+            label=${setting.label}
+            type=${setting.kind === 'number' ? 'number' : 'text'}
+            .value=${value === undefined ? '' : Array.isArray(value) ? value.join(', ') : String(value)}
+            @change=${(event) => {
+              const raw = event.target.value.trim()
+              if (raw === '') return write(setting.key, undefined)
+              if (setting.kind === 'number') return write(setting.key, Number(raw))
+              if (setting.kind === 'list')
+                return write(
+                  setting.key,
+                  raw
+                    .split(',')
+                    .map((item) => item.trim())
+                    .filter(Boolean),
+                )
+              write(setting.key, raw)
+            }}
+          ></uui-input>
+          ${hint}
+        </label>`
+      })}
+    </div>`
+  }
   #touch() {
     // Lit tracks the reference, not what is inside it.
     this._editing = { ...this._editing }
@@ -636,12 +792,22 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
           <uui-button look="secondary" label="Add a page" @click=${() => this.#apply(addPage)}></uui-button>
         </div>
       </uui-box>
+      ${this.#workflows()}
       ${
         this._problems.length > 0
           ? html`<div class="problems" role="alert">
               <p>This form was not saved:</p>
               <ul>
-                ${this._problems.map((problem) => html`<li>${problem.path ? html`<code>${problem.path}</code> ` : nothing}${problem.message}</li>`)}
+                ${this._problems.map((problem) => {
+                  const where = describeProblemPath(form, problem.path, this._workflowTypes)
+                  return html`<li>${
+                    !where
+                      ? nothing
+                      : where === problem.path
+                        ? html`<code>${where}</code> `
+                        : html`<strong>${where}</strong>: `
+                  }${problem.message}</li>`
+                })}
               </ul>
             </div>`
           : nothing
@@ -712,6 +878,25 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
       color: var(--uui-color-text-alt, #555);
       font-size: 0.9em;
     }
+    .workflows {
+      margin-top: var(--uui-size-layout-1, 24px);
+    }
+    .workflow {
+      border: 1px solid var(--uui-color-border, #ddd);
+      border-radius: var(--uui-border-radius, 3px);
+      padding: var(--uui-size-space-4, 12px);
+      margin: var(--uui-size-space-4, 12px) 0;
+    }
+    .workflow-settings {
+      display: grid;
+      gap: var(--uui-size-space-3, 9px);
+      max-width: 60ch;
+    }
+    .workflow-settings label,
+    .workflow-settings .switch {
+      display: grid;
+      gap: 2px;
+    }
     :host {
       display: block;
       height: 100%;

package/plugin/forms-workflows.js ADDED Viewed

@@ -0,0 +1,147 @@
+/**
+ * The forms designer's workflow operations: adding, retyping and removing a
+ * form's workflows, and what each built-in type asks for. Pure, so each is
+ * tested on its own (tests/forms-designer-workflows.test.ts).
+ *
+ * Every operation returns a new form. A setting the designer draws no field for
+ * (`cc`, `body`, `map` and the rest) is kept as the file has it.
+ */
+/**
+ * The settings the designer offers for the built-in types, in the shape a
+ * bundle's type declares them. `design` is the e-mail design picker.
+ */
+export const BUILT_IN_WORKFLOW_SETTINGS = {
+  sendEmail: [
+    {
+      key: 'to',
+      label: 'Send to',
+      kind: 'text',
+      required: true,
+      description:
+        'One or more addresses, separated by commas. An alias in braces, such as {email}, puts in that answer.',
+    },
+    { key: 'subject', label: 'Subject', kind: 'text', required: true },
+    { key: 'reply-to', label: 'Reply to', kind: 'text' },
+    {
+      key: 'template',
+      label: 'E-mail design',
+      kind: 'design',
+      description: 'Standard lists each question with its answer.',
+    },
+    { key: 'attach-uploads', label: 'Attach uploaded files', kind: 'boolean' },
+    {
+      key: 'include-sensitive',
+      label: 'Include sensitive answers',
+      kind: 'boolean',
+      description: 'Left off, answers to fields marked sensitive are not sent.',
+    },
+  ],
+  saveAsContent: [
+    { key: 'content-type', label: 'Document type alias', kind: 'text', required: true },
+    {
+      key: 'parent',
+      label: 'Create under',
+      kind: 'text',
+      required: true,
+      description: "The parent page's key, or root for the top of the tree.",
+    },
+    { key: 'name-field', label: 'Name it from the field', kind: 'text' },
+    { key: 'publish', label: 'Publish straight away', kind: 'boolean' },
+  ],
+  sendToUrl: [
+    { key: 'url', label: 'Address', kind: 'text', required: true },
+    {
+      key: 'include-standard-fields',
+      label: "Include the form's name and when it was sent",
+      kind: 'boolean',
+      defaultValue: true,
+    },
+  ],
+}
+/**
+ * What a switch writes: nothing when it matches the default, so a flag that is
+ * off by default is absent rather than `false`, and one on by default the reverse.
+ */
+export const switchValue = (setting, checked) =>
+  checked === (setting.defaultValue === true) ? undefined : checked
+/** The fields to draw for a workflow type: the built-in table, or what a bundle declares. */
+export const workflowSettings = (type, info) =>
+  BUILT_IN_WORKFLOW_SETTINGS[type] ?? info?.settings ?? []
+/** A name no other workflow on the form has, from the type's label. */
+export function uniqueWorkflowName(form, label) {
+  const taken = new Set((form.workflows ?? []).map((workflow) => workflow.name.toLowerCase()))
+  if (!taken.has(label.toLowerCase())) return label
+  for (let n = 2; ; n++) if (!taken.has(`${label} ${n}`.toLowerCase())) return `${label} ${n}`
+}
+export function addWorkflow(form, type, label) {
+  const workflow = {
+    key: crypto.randomUUID(),
+    type,
+    name: uniqueWorkflowName(form, label),
+    on: 'submit',
+    settings: {},
+  }
+  return { ...form, workflows: [...(form.workflows ?? []), workflow] }
+}
+export function removeWorkflow(form, index) {
+  return { ...form, workflows: form.workflows.filter((_, at) => at !== index) }
+}
+const replace = (form, index, change) => ({
+  ...form,
+  workflows: form.workflows.map((workflow, at) =>
+    at === index ? { ...workflow, ...change(workflow) } : workflow,
+  ),
+})
+/** A new type takes none of the old one's settings: they would be refused as unknown. */
+export const setWorkflowType = (form, index, type) =>
+  replace(form, index, () => ({ type, settings: {} }))
+export const setWorkflowName = (form, index, name) => replace(form, index, () => ({ name }))
+export const setWorkflowTrigger = (form, index, on) =>
+  replace(form, index, () => ({ on: on === 'approve' ? 'approve' : 'submit' }))
+/** An empty text or `undefined` removes the setting, so the file stays as short as it can. */
+export const setWorkflowSetting = (form, index, key, value) =>
+  replace(form, index, (workflow) => {
+    const settings = { ...workflow.settings }
+    if (value === undefined || value === '') delete settings[key]
+    else settings[key] = value
+    return { settings }
+  })
+/** Settings only the file sets, named as a person would say them when one is refused. */
+const FILE_ONLY_LABELS = {
+  body: 'Message text',
+  cc: 'Copy to',
+  bcc: 'Blind copy to',
+  from: 'Send from',
+}
+/**
+ * Where a problem the server found is, in words: "Tell the team: E-mail design"
+ * for `workflow[0].settings.template`. A path elsewhere in the form is left as
+ * it is.
+ */
+export function describeProblemPath(form, path, types = new Map()) {
+  const found = /^workflow\[(\d+)\](?:\.settings(?:\.([\w-]+))?|\.(name|on))?/.exec(path ?? '')
+  if (!found) return path
+  const index = Number(found[1])
+  const workflow = form.workflows?.[index]
+  const name = workflow?.name || `Workflow ${index + 1}`
+  if (found[3] === 'name') return `${name}: Name`
+  if (found[3] === 'on') return `${name}: When it runs`
+  if (!found[2]) return name
+  const setting = workflowSettings(workflow?.type, types.get(workflow?.type)).find(
+    (candidate) => candidate.key === found[2],
+  )
+  return `${name}: ${setting?.label ?? FILE_ONLY_LABELS[found[2]] ?? found[2]}`
+}

package/plugin/localizations/umbraco-package.json CHANGED Viewed

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

package/plugin/notifications-dialog.js ADDED Viewed

@@ -0,0 +1,62 @@
+/**
+ * Umbraco's notifications dialog, on a site that cannot send e-mail (story
+ * 045): a banner saying so, and every toggle disabled, rather than choices
+ * saved for e-mails that never come.
+ *
+ * The dialog is not an extension point and its class is not exported, so it is
+ * patched rather than replaced, as the log viewer's menu is: once the element
+ * is defined, each update disables its toggles and Save and puts the banner
+ * above them. `tests/notifications-dialog.test.ts` pins the vendored dialog
+ * this relies on, so a re-vendor that moves it fails the suite rather than the
+ * editor. The server refuses a new subscription regardless.
+ */
+const TAG = 'umb-document-notifications-modal'
+export const BANNER_CLASS = 'crombolo-notifications-unavailable'
+export const UNAVAILABLE =
+  "This site can't send e-mail yet, so it can't tell you when this page changes. Ask an administrator to set up e-mail, then come back to choose what to hear about."
+/** Whether this site can send notification e-mails; asked once per page load. */
+let answer
+export function canSendNotifications(fetcher = fetch) {
+  answer ??= (async () => {
+    const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+    const response = await fetcher(`${href.replace(/\/$/, '')}/crombolo/api/email`, {
+      credentials: 'include',
+      headers: { accept: 'application/json' },
+    })
+    // Unknown is not unavailable: Umbraco's dialog stays as it is.
+    if (!response.ok) return true
+    return (await response.json()).canSendNotifications !== false
+  })().catch(() => true)
+  return answer
+}
+/** Disables the dialog's choices and says why. Safe to call on every update. */
+export function markUnavailable(root, message = UNAVAILABLE) {
+  for (const toggle of root.querySelectorAll('uui-toggle')) toggle.disabled = true
+  for (const button of root.querySelectorAll('uui-button[color="positive"]')) button.disabled = true
+  const box = root.querySelector('uui-box')
+  if (!box || box.querySelector(`.${BANNER_CLASS}`)) return
+  const banner = box.ownerDocument.createElement('p')
+  banner.className = BANNER_CLASS
+  banner.setAttribute('role', 'status')
+  banner.setAttribute(
+    'style',
+    'margin: 0 0 var(--uui-size-space-4); color: var(--uui-color-text-alt);',
+  )
+  banner.textContent = message
+  box.prepend(banner)
+}
+export const onInit = async () => {
+  // The dialog is loaded the first time someone opens it.
+  const element = await customElements.whenDefined(TAG)
+  const prototype = element.prototype
+  const original = prototype.updated
+  prototype.updated = function patched(changed) {
+    original?.call(this, changed)
+    void canSendNotifications().then((ok) => {
+      if (!ok && this.renderRoot) markUnavailable(this.renderRoot)
+    })
+  }
+}

package/plugin/seo/umbraco-package.json CHANGED Viewed

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

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

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

package/plugin/umbraco-package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "allowPublicAccess": false,
   "extensions": [
     {
@@ -418,6 +418,12 @@
       "name": "Crombolo Log Viewer Search Menu",
       "js": "/crombolo-plugin/branding/log-viewer-menu.js"
     },
+    {
+      "type": "backofficeEntryPoint",
+      "alias": "Crombolo.EntryPoint.NotificationsDialog",
+      "name": "Crombolo Notifications Dialog Without E-mail",
+      "js": "/crombolo-plugin/notifications-dialog.js"
+    },
     {
       "type": "globalContext",
       "alias": "Crombolo.GlobalContext.Icons",

package/src/graphics.ts CHANGED Viewed

@@ -27,6 +27,13 @@ const GRAPHICS: Record<string, string> = {
   'logo-alternative': 'branding/logo-surface.svg',
   'login-logo': 'branding/logo-header.svg',
   'login-logo-alternative': 'branding/logo-surface.svg',
+  // The same marks with cream lettering, for the dark theme. The client asks
+  // for the plain names whatever the theme, so the plugin and the shells'
+  // early script swap these in (`branding.js`, `theme-early.ts`).
+  'logo-dark': 'branding/logo-header-dark.svg',
+  'logo-alternative-dark': 'branding/logo-surface-dark.svg',
+  'login-logo-dark': 'branding/logo-header-dark.svg',
+  'login-logo-alternative-dark': 'branding/logo-surface-dark.svg',
   'login-background': 'branding/backdrop.svg',
 }

package/src/theme-early.ts CHANGED Viewed

@@ -3,7 +3,8 @@
  * (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.
+ * same key and links the same stylesheet at once, and on a dark theme points
+ * the sign-in screens' logos at their cream-lettered variants.
  */
 import type { BackOfficePaths } from './paths.ts'
@@ -27,6 +28,9 @@ export function themeStylesheets(paths: BackOfficePaths): Record<string, string>
   }
 }
+/** The sign-in screens' logos, which get their cream-lettered `-dark` variant on a dark theme. */
+const LOGO_PATTERN = String.raw`/\/graphics\/(login-logo|login-logo-alternative|logo|logo-alternative)$/`
 /** 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))
@@ -37,6 +41,19 @@ export function earlyThemeScript(paths: BackOfficePaths): string {
     var alias = localStorage.getItem(key);
     var renamed = ${renamed};
     if (alias && renamed[alias]) { alias = renamed[alias]; localStorage.setItem(key, alias); }
+    var dark = alias === ${JSON.stringify(THEME_DARK)} ||
+      (alias === ${JSON.stringify(THEME_SYSTEM)} && typeof matchMedia === 'function' &&
+        matchMedia('(prefers-color-scheme: dark)').matches);
+    if (dark) document.addEventListener('DOMContentLoaded', function () {
+      var named = ['logo-image', 'logo-image-alternative'];
+      var found = document.querySelectorAll('[logo-image], [logo-image-alternative]');
+      for (var i = 0; i < found.length; i++) {
+        for (var j = 0; j < named.length; j++) {
+          var value = found[i].getAttribute(named[j]);
+          if (value && ${LOGO_PATTERN}.test(value)) found[i].setAttribute(named[j], value + '-dark');
+        }
+      }
+    });
     var href = alias ? ${sheets}[alias] : undefined;
     if (!href) return;
     var link = document.createElement('link');