@crombolo/backoffice-host 0.13.2 → 0.14.4

package/plugin/localizations/sv.js

@@ -3,26 +3,6 @@
 // plugin/branding/localization-en.js curates, and "content type" where
 // Umbraco says "document type".
 export default {
-  "login": {
-    "userInviteWelcomeMessage": "Hej och välkommen till Crombolo! Inom bara 1 minut är du redo att börja, vi behöver bara att du ställer in ett lösenord.",
-    "userInviteExpiredMessage": "Välkommen till Crombolo! Tyvärr har din inbjudan gått ut. Vänligen kontakta din administratör och be dem skicka den igen."
-  },
-  "user": {
-    "changePasswordDescription": "Du kan byta ditt lösenord för Crombolo backoffice genom att fylla i nedanstående formulär och klicka på knappen \"Ändra lösenord\".",
-    "createUserHelp": "Skapa nya användare för att ge dom åtkomst till Crombolo. När en ny användare skapas kommer ett lösenord genereras som du kan dela med användaren.",
-    "inviteUserHelp": "Bjud in nya användare för att ge dom åtkomst till Crombolo. Ett e-postmeddelande kommer skikcas till användaren med information om hur man loggar in i Crombolo. Inbjudningar är giltiga i 72 timmar.",
-    "noConsole": "Inaktivera tillgång till Crombolo",
-    "documentType": "Innehållstyp"
-  },
-  "visuallyHiddenTexts": {
-    "searchOverlayTitle": "Sök i Crombolo backoffice"
-  },
-  "paste": {
-    "errorMessage": "Texten du försöker klistra in innehåller specialtecken och/eller formateringstaggar. Detta kan bero på att texten kommer från t.ex. Microsoft Word. Crombolo kan ta bort specialtecken och formateringstaggar automatiskt så att innehållet lämpar sig bättre för webbpublicering."
-  },
-  "dashboard": {
-    "nothinghappens": "Om Crombolo inte öppnas kan det bero på att du måste tillåta poppuppfönster att öppnas från denna webbplats"
-  },
   "actions": {
     "changeDocType": "Ändra innehållstyp",
     "exportDocumentType": "Exportera innehållstyp",
@@ -42,5 +22,8 @@ export default {
   },
   "treeHeaders": {
     "documentTypes": "Innehållstyper"
+  },
+  "user": {
+    "documentType": "Innehållstyp"
   }
 }

package/plugin/localizations/tr.js

@@ -3,32 +3,6 @@
 // plugin/branding/localization-en.js curates, and "content type" where
 // Umbraco says "document type".
 export default {
-  "user": {
-    "changePasswordDescription": "Aşağıdaki formu doldurarak ve 'Şifreyi Değiştir' düğmesini tıklayarak Crombolo Arka Ofisine erişim şifrenizi değiştirebilirsiniz",
-    "createUserHelp": "Crombolo'ya erişim sağlamak için yeni kullanıcılar oluşturun. Yeni bir kullanıcı oluşturulduğunda, kullanıcıyla paylaşabileceğiniz bir şifre oluşturulacaktır.",
-    "inviteUserHelp": "Yeni kullanıcıları Crombolo'ya erişim vermeleri için davet edin. Kullanıcıya, Crombolo'da nasıl oturum açılacağına dair bilgiler içeren bir davet e-postası gönderilecektir. Davetler 72 saat sürer.",
-    "noConsole": "Crombolo Erişimini Devre Dışı Bırak",
-    "userCreatedSuccessHelp": "Yeni kullanıcı başarıyla oluşturuldu. Crombolo'da oturum açmak için aşağıdaki şifreyi kullanın.",
-    "userInvitedSuccessHelp": "Yeni kullanıcıya, Crombolo'da nasıl oturum açılacağına ilişkin ayrıntıları içeren bir davetiye gönderildi.",
-    "userinviteWelcomeMessage": "Merhabalar, Crombolo'ya hoş geldiniz! Sadece 1 dakika içinde hazır olacaksınız, sadece bir şifre belirlemeniz.",
-    "userinviteExpiredMessage": "Crombolo'ya hoş geldiniz! Maalesef davetinizin süresi doldu. Lütfen yöneticinizle iletişime geçin ve yeniden göndermesini isteyin.",
-    "documentType": "İçerik Türü"
-  },
-  "languages": {
-    "defaultLanguageHelp": "Bir Crombolo sitesinde yalnızca bir varsayılan dil ayarı olabilir."
-  },
-  "paste": {
-    "errorMessage": "Yapıştırmaya çalıştığınız metin özel karakterler veya biçimlendirme içeriyor. Bunun nedeni Microsoft Word'den metin kopyalanması olabilir. Crombolo, özel karakterleri veya biçimlendirmeyi otomatik olarak kaldırabilir, böylece yapıştırılan içerik web için daha uygun olacaktır."
-  },
-  "dashboard": {
-    "nothinghappens": "Crombolo açılmıyorsa, bu siteden pop-up'lara izin vermeniz gerekebilir"
-  },
-  "logViewer": {
-    "searchUmbracoSource": "Crombolo Kaynağını Ara",
-    "searchWithinUmbracoSourceCodeOnGithub": "Github'da Crombolo kaynak kodu içinde arama",
-    "searchUmbracoIssues": "Crombolo Sorunlarını Ara",
-    "searchUmbracoIssuesOnGithub": "Github'da Crombolo Sorunlarını Ara"
-  },
   "actions": {
     "changeDocType": "İçerik Türünü Değiştir",
     "exportDocumentType": "İçerik Türünü Dışa Aktar",
@@ -70,6 +44,9 @@ export default {
   "treeHeaders": {
     "documentTypes": "İçerik Türleri"
   },
+  "user": {
+    "documentType": "İçerik Türü"
+  },
   "references": {
     "labelUsedByDocumentTypes": "İçerik Türlerinde Kullanılır"
   },

package/plugin/localizations/uk.js

@@ -3,15 +3,6 @@
 // plugin/branding/localization-en.js curates, and "content type" where
 // Umbraco says "document type".
 export default {
-  "user": {
-    "changePasswordDescription": "Ви можете змінити свій пароль для доступу до адміністративної панелі Crombolo, заповнивши нижченаведені поля та натиснувши кнопку 'Змінити пароль'",
-    "createUserHelp": "Створюйте нових користувачів, яким потрібний доступ до адміністративної панелі Crombolo. При створенні користувача генерується новий первинний пароль, який потрібно повідомити користувачеві.",
-    "inviteUserHelp": "Запросіть нових користувачів, яким потрібний доступ до адміністративної панелі Crombolo. Запрошеному буде надіслано електронного листа з інструкціями щодо доступу до Crombolo.",
-    "noConsole": "Вимкнути доступ до адміністративної панелі Crombolo",
-    "userInvitedSuccessHelp": "Новому користувачеві було надіслано запрошення, яке містить інструкції для входу в панель Crombolo.",
-    "userinviteWelcomeMessage": "Привіт і ласкаво просимо до Crombolo! Все буде готове протягом декількох хвилин, нам потрібно задати пароль для входу.",
-    "documentType": "Тип контенту"
-  },
   "actions": {
     "changeDocType": "Змінити тип контенту"
   },
@@ -42,5 +33,8 @@ export default {
   },
   "treeHeaders": {
     "documentTypes": "Типи контенту"
+  },
+  "user": {
+    "documentType": "Тип контенту"
   }
 }

package/plugin/localizations/umbraco-package.json

@@ -2,9 +2,29 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.13.2",
-  "allowPublicAccess": false,
+  "version": "0.14.4",
+  "allowPublicAccess": true,
   "extensions": [
+    {
+      "type": "localization",
+      "alias": "Crombolo.Localization.EN",
+      "name": "Crombolo English Overrides",
+      "weight": 0,
+      "meta": {
+        "culture": "en"
+      },
+      "js": "/crombolo-plugin/branding/localization-en.js"
+    },
+    {
+      "type": "localization",
+      "alias": "Crombolo.Localization.EN_US",
+      "name": "Crombolo English (United States) Overrides",
+      "weight": 0,
+      "meta": {
+        "culture": "en-us"
+      },
+      "js": "/crombolo-plugin/branding/localization-en.js"
+    },
     {
       "type": "localization",
       "alias": "Crombolo.Localization.Overrides.AR",

package/plugin/localizations/vi.js

@@ -3,48 +3,6 @@
 // plugin/branding/localization-en.js curates, and "content type" where
 // Umbraco says "document type".
 export default {
-  "login": {
-    "instruction": "Đăng nhập vào Crombolo"
-  },
-  "user": {
-    "changePasswordDescription": "Bạn có thể thay đổi mật khẩu của mình để truy cập vào Crombolo backoffice bằng cách điền vào mẫu dưới đây và nhấp vào nút 'Đổi mật khẩu'",
-    "createUserHelp": "Tạo người dùng mới để cấp quyền truy cập cho họ vào Crombolo. Khi một người dùng mới được tạo, một mật khẩu sẽ được tạo ra mà bạn có thể chia sẻ với người dùng đó.",
-    "inviteUserHelp": "Mời người dùng mới để cấp quyền truy cập cho họ vào Crombolo. Một email mời sẽ được gửi đến người dùng với thông tin về cách đăng nhập vào Crombolo. Thời gian hiệu lực của lời mời là 72 giờ.",
-    "noConsole": "Vô hiệu hóa quyền truy cập Crombolo",
-    "userCreatedSuccessHelp": "Người dùng mới đã được tạo thành công. Để đăng nhập vào Crombolo, hãy sử dụng mật khẩu bên dưới.",
-    "userInvitedSuccessHelp": "Một lời mời đã được gửi đến người dùng mới với thông tin chi tiết về cách đăng nhập vào Crombolo.",
-    "userinviteWelcomeMessage": "Xin chào và chào mừng bạn đến với Crombolo! Chỉ trong 1 phút, bạn sẽ sẵn sàng sử dụng. Chúng tôi chỉ cần bạn tạo mật khẩu và thêm hình đại diện cho tài khoản.",
-    "userinviteExpiredMessage": "Chào mừng bạn đến với Crombolo! Rất tiếc, lời mời của bạn đã hết hạn. Vui lòng liên hệ với quản trị viên của bạn và yêu cầu họ gửi lại lời mời.",
-    "documentType": "Loại nội dung"
-  },
-  "general": {
-    "umbracoInfo": "Thông tin Crombolo"
-  },
-  "buttons": {
-    "viewSystemDetails": "Xem thông tin hệ thống Crombolo CMS và số phiên bản"
-  },
-  "visuallyHiddenTexts": {
-    "searchOverlayTitle": "Tìm kiếm trong Crombolo backoffice"
-  },
-  "languages": {
-    "defaultLanguageHelp": "Một trang Crombolo chỉ có thể có một ngôn ngữ mặc định được thiết lập."
-  },
-  "paste": {
-    "errorMessage": "Văn bản bạn đang cố dán chứa các ký tự hoặc định dạng đặc biệt. Điều này có thể do việc sao chép văn bản từ Microsoft Word. Crombolo có thể tự động loại bỏ các ký tự hoặc định dạng đặc biệt, vì vậy nội dung được dán sẽ phù hợp hơn với web."
-  },
-  "dashboard": {
-    "nothinghappens": "Nếu Crombolo không mở, bạn có thể cần cho phép cửa sổ bật lên từ trang này"
-  },
-  "logViewer": {
-    "searchUmbracoSource": "Tìm kiếm mã nguồn Crombolo",
-    "searchWithinUmbracoSourceCodeOnGithub": "Tìm trong mã nguồn Crombolo trên GitHub",
-    "searchUmbracoIssues": "Tìm kiếm vấn đề của Crombolo",
-    "searchUmbracoIssuesOnGithub": "Tìm vấn đề của Crombolo trên GitHub"
-  },
-  "defaultdialogs": {
-    "linkYourConfirm": "Bạn sắp liên kết tài khoản Crombolo và {0} của mình và bạn sẽ được chuyển hướng đến {0} để xác nhận.",
-    "unLinkYourConfirm": "Bạn sắp hủy liên kết tài khoản Crombolo và {0} của mình và bạn sẽ bị đăng xuất."
-  },
   "actions": {
     "changeDocType": "Thay đổi loại nội dung",
     "exportDocumentType": "Xuất khẩu loại nội dung",
@@ -94,6 +52,9 @@ export default {
   "treeHeaders": {
     "documentTypes": "Loại nội dung"
   },
+  "user": {
+    "documentType": "Loại nội dung"
+  },
   "references": {
     "labelUsedByDocumentTypes": "Được sử dụng trong các Loại Nội dung"
   },

package/plugin/localizations/zh-tw.js

@@ -3,12 +3,6 @@
 // plugin/branding/localization-en.js curates, and "content type" where
 // Umbraco says "document type".
 export default {
-  "paste": {
-    "errorMessage": "您所粘貼的文本含有特殊字元或格式，Crombolo將清除以適應網頁。"
-  },
-  "dashboard": {
-    "nothinghappens": "如果Crombolo沒有打開，您可能需要允許彈出式視窗。"
-  },
   "actions": {
     "changeDocType": "改變內容類型",
     "exportDocumentType": "匯出內容類型",

package/plugin/localizations/zh.js

@@ -3,12 +3,6 @@
 // plugin/branding/localization-en.js curates, and "content type" where
 // Umbraco says "document type".
 export default {
-  "paste": {
-    "errorMessage": "您所粘贴的文本含有特殊字符或格式，Crombolo将清除以适应网页。"
-  },
-  "dashboard": {
-    "nothinghappens": "如果Crombolo没有打开，您可能需要允许弹出式窗口。"
-  },
   "actions": {
     "changeDocType": "改变内容类型",
     "exportDocumentType": "导出内容类型",

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.13.2",
+  "version": "0.14.4",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/sign-in/entry.js

@@ -0,0 +1,20 @@
+/**
+ * Puts crombolo's sign-in dialog in place of the client's. The client opens
+ * `Umb.Modal.AppAuth` when a session ends while the backoffice is open, and
+ * draws it before any private manifest has loaded — so it is replaced from a
+ * public app entry point, which the client runs before it routes.
+ *
+ * Re-registered under the same alias rather than through `overwrites`: the
+ * modal is looked up with `byTypeAndAlias`, which does not resolve overwrites.
+ */
+export const DIALOG_ALIAS = 'Umb.Modal.AppAuth'
+
+export const onInit = (_host, extensionRegistry) => {
+  extensionRegistry.unregister(DIALOG_ALIAS)
+  extensionRegistry.register({
+    type: 'modal',
+    alias: DIALOG_ALIAS,
+    name: 'Crombolo Sign-in Dialog',
+    element: () => import('./sign-in-dialog.js'),
+  })
+}

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

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

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

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

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/two-factor-setup.js

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