@things-factory/auth-ui 10.1.13 → 10.1.17

package/dist-client/components/role-template-picker.js

@@ -5,12 +5,13 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { client, gqlContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
+import { axisLabel } from '../utils/privilege-axis.js';
 import { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
-const AXIS_LABEL = {
-    query: 'label.read',
-    mutation: 'label.write',
-    execute: 'label.execute'
-};
+/*
+ * The axis vocabulary lives in `utils/privilege-axis.ts` now — one table, not the copy that
+ * used to sit here beside an identical one in `role-privilege-page.ts`. It also stopped
+ * translating `query`/`mutation` into 「읽기」/「쓰기」; that file says why.
+ */
 /**
  * The module, in words people use.
  *
@@ -22,9 +23,6 @@ const AXIS_LABEL = {
 function moduleLabel(category) {
     return i18next.t(`privilege.category.${category}`, { defaultValue: category });
 }
-function axisLabel(axis) {
-    return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis;
-}
 /** Stable order inside a group, by the name a person actually reads. */
 function byName(a, b) {
     return moduleLabel(a.category).localeCompare(moduleLabel(b.category));

package/dist-client/components/role-template-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"role-template-picker.js","sourceRoot":"","sources":["../../client/components/role-template-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { CSSResultGroup } from 'lit'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles'\n\ntype GrantView = { category: string; axes: string[]; missingAxes: string[] }\ntype TemplateView = {\n  id: string\n  name: string\n  description?: string\n  grants: GrantView[]\n  privilegeCount: number\n  missingCount: number\n  defaultNameTaken: boolean\n  grantsNothingDeliberately: boolean\n}\n\nconst AXIS_LABEL: Record<string, string> = {\n  query: 'label.read',\n  mutation: 'label.write',\n  execute: 'label.execute'\n}\n\n/**\n * The module, in words people use.\n *\n * Same rule as the role privilege page (`moduleLabel` there): use\n * `privilege.category.<category>` when it exists and **fall back to the code word**. Not\n * inventing one is the point — a made-up name would read as product vocabulary and hide\n * from the UX lane that the sentence is still missing.\n */\nfunction moduleLabel(category: string): string {\n  return i18next.t(`privilege.category.${category}`, { defaultValue: category })\n}\n\nfunction axisLabel(axis: string): string {\n  return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis\n}\n\n/** Stable order inside a group, by the name a person actually reads. */\nfunction byName(a: GrantView, b: GrantView): number {\n  return moduleLabel(a.category).localeCompare(moduleLabel(b.category))\n}\n\n/**\n * Starting a role.\n *\n * ── Why this stands where the blank row used to ──────────────────────────────\n * A new plant has no roles, and the old answer to \"make one\" was an empty line waiting for\n * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a\n * quality inspector, and that is a judgement the product has made and the plant has not.\n *\n * miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven\n * approval doors standing empty because there is nothing to route them to. Read from\n * inside, that looks like a plant that has not decided. It is a plant with nothing to\n * decide from.\n *\n * ── Both doors, in one place ─────────────────────────────────────────────────\n * The templates come first and the blank name last, because the order is what teaches: a\n * plant that sees \"quality inspector, 7 privileges\" learns what a seat looks like before\n * it is asked to invent one. Hiding the blank door would be worse, though — the seats a\n * factory actually has (\"night shift lead\", \"outside inspector\") are its own, and the\n * product does not know them.\n *\n * ── Why the name is editable ─────────────────────────────────────────────────\n * The template knows the seat exists; it does not know what the people there call it. And\n * because a role is also what an approval line points at, the same seat is sometimes\n * needed twice — a day and a night inspector hold the same privileges and take different\n * approvals. A fixed name would allow each template exactly once per domain.\n */\n@customElement('role-template-picker')\nexport class RoleTemplatePicker extends localize(i18next)(LitElement) {\n  static styles: CSSResultGroup = [\n    ScrollbarStyles,\n    /*\n     * Native controls, styled by the shared block.\n     *\n     * This used `md-filled-text-field` and the Material buttons until the user looked at it\n     * (2026-09-11): \"too big, and the style does not fit.\" They are right — a filled field\n     * with a floating label is a form control from a different density than the pills,\n     * chips and 30px rows this product uses everywhere else.\n     *\n     * `FormFieldStyles` exists precisely for this: a component draws its input inside its\n     * own shadow root, where the theme stylesheet cannot reach, so the token wiring has to\n     * be declared per component. It goes first so local rules below can override it.\n     */\n    FormFieldStyles,\n    /* The popup footer already has a convention — plain buttons, pill on pointer devices. */\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        color: var(--md-sys-color-on-surface);\n        height: 100%;\n        overflow: hidden;\n      }\n\n      [body] {\n        display: grid;\n        grid-template-columns: minmax(240px, 320px) 1fr;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px);\n        flex: 1;\n        min-height: 0;\n      }\n\n      [panel] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--md-sys-shape-corner-medium, 8px);\n        overflow: hidden;\n      }\n\n      [panel] > header {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n        font-size: var(--fontsize-small, 13px);\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: var(--md-sys-color-surface-container);\n      }\n\n      [count] {\n        color: var(--md-sys-color-primary);\n        font-weight: 600;\n      }\n\n      ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      li[seat] {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n        cursor: pointer;\n      }\n\n      li[seat]:hover {\n        background-color: var(--md-sys-color-surface-container-high);\n      }\n\n      li[seat][selected] {\n        background-color: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      li[seat] [title-row] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      li[seat] [name] {\n        font-weight: 600;\n      }\n\n      li[seat] small {\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--fontsize-small, 12px);\n      }\n\n      li[seat][selected] small {\n        color: inherit;\n      }\n\n      [tag] {\n        font-size: var(--fontsize-smaller, 11px);\n        padding: 0 6px;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        background-color: var(--md-sys-color-surface-container-highest);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [tag][warn] {\n        background-color: var(--md-sys-color-error-container);\n        color: var(--md-sys-color-on-error-container);\n      }\n\n      [detail] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-large, 14px);\n        padding: var(--spacing-large, 14px);\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      /* 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. */\n      [note],\n      label[field] small {\n        margin: 0;\n        font-size: var(--fontsize-small, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n        line-height: 1.5;\n      }\n\n      dl[grants] {\n        display: grid;\n        grid-template-columns: minmax(8em, max-content) 1fr;\n        /* 줄 사이가 2px 이었다. 이름이 위아래로 붙어 한 덩어리로 읽혔다. */\n        gap: 6px var(--spacing-large, 14px);\n        margin: 0;\n        align-items: baseline;\n      }\n\n      /*\n       * 모듈 이름이 **기준선**이다 — 굵기로 두 칸이 저절로 갈린다.\n       *\n       * 처음엔 거꾸로였다: 이름을 흐리게 두고 「쓰기」를 굵게 했더니, 눈이 먼저 닿는 것이\n       * 오른쪽 칸이 되어 왼쪽이 뭘 말하는지 훑어지지 않았다. 사람이 이 표에서 찾는 것은\n       * 「이 자리가 **어느 모듈**을 여나」이고, 읽기냐 쓰기냐는 그 다음이다.\n       */\n      dl[grants] dt {\n        color: var(--md-sys-color-on-surface);\n        font-size: var(--fontsize-small, 13px);\n        font-weight: 600;\n      }\n\n      dl[grants] dd {\n        margin: 0;\n        display: flex;\n        flex-wrap: wrap;\n        /* 낱말 사이 가운뎃점 — 「읽기 쓰기」가 한 낱말로 붙어 보이던 것을 가른다. */\n        gap: 0 6px;\n      }\n\n      dl[grants] dd [axis] + [axis]::before {\n        content: '·';\n        margin-right: 6px;\n        color: var(--md-sys-color-outline);\n      }\n\n      [axis] {\n        font-size: var(--fontsize-small, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [axis][missing] {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      [empty] {\n        margin: auto;\n        text-align: center;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--fontsize-small, 13px);\n        padding: var(--spacing-large, 16px);\n      }\n\n      /* 자리 배치만 더한다 — 모양은 CommonHeaderStyles 의 .footer 가 갖는다. */\n      .footer {\n        justify-content: flex-end;\n      }\n    `\n  ]\n\n  @property({ type: Object }) page?: any\n\n  @state() private templates: TemplateView[] = []\n  @state() private selected?: TemplateView\n  /** `undefined` means \"the blank door\" — name the seat yourself. */\n  @state() private scratch = false\n  @state() private name = ''\n  @state() private description = ''\n\n  async connectedCallback() {\n    super.connectedCallback()\n    await this.fetchTemplates()\n  }\n\n  private async fetchTemplates() {\n    const response = await client.query({\n      query: gql`\n        query {\n          roleTemplates {\n            id\n            name\n            description\n            privilegeCount\n            missingCount\n            defaultNameTaken\n            grantsNothingDeliberately\n            grants {\n              category\n              axes\n              missingAxes\n            }\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    /*\n     * A GraphQL error arrives as `data: null` with `errors` set, and `?? []` would draw\n     * that as \"this installation offers nothing\" — a refusal made to look like an answer.\n     */\n    if (response.errors?.length) {\n      document.dispatchEvent(\n        new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n      )\n      return\n    }\n\n    this.templates = response.data?.roleTemplates || []\n  }\n\n  render() {\n    return html`\n      <div body>\n        <div panel>\n          <header>\n            ${i18next.t('field.seat')}\n            <span count>${this.templates.length}</span>\n          </header>\n          <ul>\n            ${this.templates.map(\n              template => html`\n                <li seat ?selected=${!this.scratch && this.selected?.id === template.id} @click=${() => this.pick(template)}>\n                  <div title-row>\n                    <span name>${template.name}</span>\n                    ${template.defaultNameTaken\n                      ? html`<span tag>${i18next.t('text.already in this domain')}</span>`\n                      : nothing}\n                    ${template.missingCount\n                      ? html`<span tag warn>${i18next.t('text.x not here', { x: template.missingCount })}</span>`\n                      : nothing}\n                  </div>\n                  <small>${this.summarize(template)}</small>\n                </li>\n              `\n            )}\n            <li seat ?selected=${this.scratch} @click=${() => this.pickScratch()}>\n              <div title-row>\n                <md-icon>edit</md-icon>\n                <span name>${i18next.t('button.name it yourself')}</span>\n              </div>\n              <small>${i18next.t('text.start from a blank seat')}</small>\n            </li>\n          </ul>\n        </div>\n\n        <div panel>${this.renderDetail()}</div>\n      </div>\n\n      <div class=\"footer\">\n        <button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</button>\n        <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  /**\n   * What the seat opens, in one line — **counted, not interpreted.**\n   *\n   * This briefly said \"changes 6 · only sees 8\", which read well and was not something the\n   * data supports: the privilege axis is an unconstrained string and its name does not\n   * determine what the resolver behind it does. Counting is safe; grouping by meaning was\n   * not. See `renderOpens`.\n   *\n   * \"0 privileges\" is still two different facts and must not be merged: granting nothing\n   * on purpose is an approval seat, and a template whose grants are all missing here is a\n   * defect (`missingCount`).\n   */\n  private summarize(template: TemplateView) {\n    if (template.grantsNothingDeliberately) {\n      return i18next.t('text.opens nothing, receives approvals')\n    }\n\n    return i18next.t('text.x modules y privileges', {\n      x: template.grants.filter(grant => grant.axes.length).length,\n      y: template.privilegeCount\n    })\n  }\n\n  private renderDetail() {\n    if (this.scratch) {\n      return html`\n        <header>${i18next.t('button.name it yourself')}</header>\n        <div detail>\n          <label field>\n            ${i18next.t('field.name')}\n            <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n          </label>\n          <label field>\n            ${i18next.t('field.description')}\n            <input .value=${this.description} @input=${(e: any) => (this.description = e.target.value)} />\n          </label>\n          <small>${i18next.t('text.a blank seat opens nothing until you give it privileges')}</small>\n        </div>\n      `\n    }\n\n    if (!this.selected) {\n      return html`<div empty>${i18next.t('text.pick a seat to see what it opens')}</div>`\n    }\n\n    const template = this.selected\n\n    return html`\n      <header>${template.name}</header>\n      <div detail>\n        <label field>\n          ${i18next.t('field.name')}\n          <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n          <small>${i18next.t('text.this plant may call the seat what it likes')}</small>\n        </label>\n        ${template.defaultNameTaken && this.name === template.name\n          ? html`<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`\n          : nothing}\n        ${this.renderOpens(template)}\n      </div>\n    `\n  }\n\n  /**\n   * 이 자리가 무엇을 여나 — **선언된 것만.**\n   *\n   * ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):\n   * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」\n   *\n   * 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.\n   *\n   *  ① `@privilege(privilege:)` 는 **제약 없는 문자열**이다(지시자 선언이 `privilege: String`\n   *     이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 **오늘\n   *     그렇게 쓴 것**이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,\n   *     처음 보는 값은 **알아서가 아니라 query 가 아니라서** 「바꿀 수 있는 것」으로 떨어졌다.\n   *  ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,\n   *     그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 **읽는** 질의에\n   *     `privilege: \"mutation\"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가\n   *     아니라 **어느 문을 지나야 하나**의 이름이다.\n   *\n   * 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것\n   * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.\n   */\n  private renderOpens(template: TemplateView) {\n    if (template.grantsNothingDeliberately) {\n      return html`<p note>${i18next.t('text.opens nothing, receives approvals')}</p>`\n    }\n\n    return html`\n      <dl grants>\n        ${[...template.grants].sort(byName).map(\n          grant => html`\n            <dt>${moduleLabel(grant.category)}</dt>\n            <dd>\n              ${grant.axes.map(axis => html`<span axis>${axisLabel(axis)}</span>`)}\n              ${grant.missingAxes.map(axis => html`<span axis missing>${axisLabel(axis)}</span>`)}\n            </dd>\n          `\n        )}\n      </dl>\n      ${template.missingCount\n        ? html`<p note>${i18next.t('text.struck through are not installed here')}</p>`\n        : nothing}\n    `\n  }\n\n  private pick(template: TemplateView) {\n    this.scratch = false\n    this.selected = template\n    this.name = template.name\n  }\n\n  private pickScratch() {\n    this.scratch = true\n    this.selected = undefined\n    this.name = ''\n  }\n\n  private canCreate() {\n    return Boolean(this.name.trim()) && (this.scratch || Boolean(this.selected))\n  }\n\n  private async create() {\n    const created = this.scratch\n      ? await this.page?.createBlankRole?.(this.name.trim(), this.description.trim())\n      : await this.page?.createFromTemplate?.(this.selected!.id, this.name.trim())\n\n    if (created) {\n      this.dispatchEvent(new CustomEvent('close'))\n    }\n  }\n}\n"]}
+{"version":3,"file":"role-template-picker.js","sourceRoot":"","sources":["../../client/components/role-template-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { CSSResultGroup } from 'lit'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { axisLabel } from '../utils/privilege-axis.js'\nimport { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles'\n\ntype GrantView = { category: string; axes: string[]; missingAxes: string[] }\ntype TemplateView = {\n  id: string\n  name: string\n  description?: string\n  grants: GrantView[]\n  privilegeCount: number\n  missingCount: number\n  defaultNameTaken: boolean\n  grantsNothingDeliberately: boolean\n}\n\n/*\n * The axis vocabulary lives in `utils/privilege-axis.ts` now — one table, not the copy that\n * used to sit here beside an identical one in `role-privilege-page.ts`. It also stopped\n * translating `query`/`mutation` into 「읽기」/「쓰기」; that file says why.\n */\n\n/**\n * The module, in words people use.\n *\n * Same rule as the role privilege page (`moduleLabel` there): use\n * `privilege.category.<category>` when it exists and **fall back to the code word**. Not\n * inventing one is the point — a made-up name would read as product vocabulary and hide\n * from the UX lane that the sentence is still missing.\n */\nfunction moduleLabel(category: string): string {\n  return i18next.t(`privilege.category.${category}`, { defaultValue: category })\n}\n\n/** Stable order inside a group, by the name a person actually reads. */\nfunction byName(a: GrantView, b: GrantView): number {\n  return moduleLabel(a.category).localeCompare(moduleLabel(b.category))\n}\n\n/**\n * Starting a role.\n *\n * ── Why this stands where the blank row used to ──────────────────────────────\n * A new plant has no roles, and the old answer to \"make one\" was an empty line waiting for\n * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a\n * quality inspector, and that is a judgement the product has made and the plant has not.\n *\n * miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven\n * approval doors standing empty because there is nothing to route them to. Read from\n * inside, that looks like a plant that has not decided. It is a plant with nothing to\n * decide from.\n *\n * ── Both doors, in one place ─────────────────────────────────────────────────\n * The templates come first and the blank name last, because the order is what teaches: a\n * plant that sees \"quality inspector, 7 privileges\" learns what a seat looks like before\n * it is asked to invent one. Hiding the blank door would be worse, though — the seats a\n * factory actually has (\"night shift lead\", \"outside inspector\") are its own, and the\n * product does not know them.\n *\n * ── Why the name is editable ─────────────────────────────────────────────────\n * The template knows the seat exists; it does not know what the people there call it. And\n * because a role is also what an approval line points at, the same seat is sometimes\n * needed twice — a day and a night inspector hold the same privileges and take different\n * approvals. A fixed name would allow each template exactly once per domain.\n */\n@customElement('role-template-picker')\nexport class RoleTemplatePicker extends localize(i18next)(LitElement) {\n  static styles: CSSResultGroup = [\n    ScrollbarStyles,\n    /*\n     * Native controls, styled by the shared block.\n     *\n     * This used `md-filled-text-field` and the Material buttons until the user looked at it\n     * (2026-09-11): \"too big, and the style does not fit.\" They are right — a filled field\n     * with a floating label is a form control from a different density than the pills,\n     * chips and 30px rows this product uses everywhere else.\n     *\n     * `FormFieldStyles` exists precisely for this: a component draws its input inside its\n     * own shadow root, where the theme stylesheet cannot reach, so the token wiring has to\n     * be declared per component. It goes first so local rules below can override it.\n     */\n    FormFieldStyles,\n    /* The popup footer already has a convention — plain buttons, pill on pointer devices. */\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        color: var(--md-sys-color-on-surface);\n        height: 100%;\n        overflow: hidden;\n      }\n\n      [body] {\n        display: grid;\n        grid-template-columns: minmax(240px, 320px) 1fr;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px);\n        flex: 1;\n        min-height: 0;\n      }\n\n      [panel] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--md-sys-shape-corner-medium, 8px);\n        overflow: hidden;\n      }\n\n      [panel] > header {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n        font-size: var(--fontsize-small, 13px);\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: var(--md-sys-color-surface-container);\n      }\n\n      [count] {\n        color: var(--md-sys-color-primary);\n        font-weight: 600;\n      }\n\n      ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      li[seat] {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n        cursor: pointer;\n      }\n\n      li[seat]:hover {\n        background-color: var(--md-sys-color-surface-container-high);\n      }\n\n      li[seat][selected] {\n        background-color: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      li[seat] [title-row] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      li[seat] [name] {\n        font-weight: 600;\n      }\n\n      li[seat] small {\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--fontsize-small, 12px);\n      }\n\n      li[seat][selected] small {\n        color: inherit;\n      }\n\n      [tag] {\n        font-size: var(--fontsize-smaller, 11px);\n        padding: 0 6px;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        background-color: var(--md-sys-color-surface-container-highest);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [tag][warn] {\n        background-color: var(--md-sys-color-error-container);\n        color: var(--md-sys-color-on-error-container);\n      }\n\n      [detail] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-large, 14px);\n        padding: var(--spacing-large, 14px);\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      /* 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. */\n      [note],\n      label[field] small {\n        margin: 0;\n        font-size: var(--fontsize-small, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n        line-height: 1.5;\n      }\n\n      dl[grants] {\n        display: grid;\n        grid-template-columns: minmax(8em, max-content) 1fr;\n        /* 줄 사이가 2px 이었다. 이름이 위아래로 붙어 한 덩어리로 읽혔다. */\n        gap: 6px var(--spacing-large, 14px);\n        margin: 0;\n        align-items: baseline;\n      }\n\n      /*\n       * 모듈 이름이 **기준선**이다 — 굵기로 두 칸이 저절로 갈린다.\n       *\n       * 처음엔 거꾸로였다: 이름을 흐리게 두고 「쓰기」를 굵게 했더니, 눈이 먼저 닿는 것이\n       * 오른쪽 칸이 되어 왼쪽이 뭘 말하는지 훑어지지 않았다. 사람이 이 표에서 찾는 것은\n       * 「이 자리가 **어느 모듈**을 여나」이고, 읽기냐 쓰기냐는 그 다음이다.\n       */\n      dl[grants] dt {\n        color: var(--md-sys-color-on-surface);\n        font-size: var(--fontsize-small, 13px);\n        font-weight: 600;\n      }\n\n      dl[grants] dd {\n        margin: 0;\n        display: flex;\n        flex-wrap: wrap;\n        /* 낱말 사이 가운뎃점 — 「읽기 쓰기」가 한 낱말로 붙어 보이던 것을 가른다. */\n        gap: 0 6px;\n      }\n\n      dl[grants] dd [axis] + [axis]::before {\n        content: '·';\n        margin-right: 6px;\n        color: var(--md-sys-color-outline);\n      }\n\n      [axis] {\n        font-size: var(--fontsize-small, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [axis][missing] {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      [empty] {\n        margin: auto;\n        text-align: center;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--fontsize-small, 13px);\n        padding: var(--spacing-large, 16px);\n      }\n\n      /* 자리 배치만 더한다 — 모양은 CommonHeaderStyles 의 .footer 가 갖는다. */\n      .footer {\n        justify-content: flex-end;\n      }\n    `\n  ]\n\n  @property({ type: Object }) page?: any\n\n  @state() private templates: TemplateView[] = []\n  @state() private selected?: TemplateView\n  /** `undefined` means \"the blank door\" — name the seat yourself. */\n  @state() private scratch = false\n  @state() private name = ''\n  @state() private description = ''\n\n  async connectedCallback() {\n    super.connectedCallback()\n    await this.fetchTemplates()\n  }\n\n  private async fetchTemplates() {\n    const response = await client.query({\n      query: gql`\n        query {\n          roleTemplates {\n            id\n            name\n            description\n            privilegeCount\n            missingCount\n            defaultNameTaken\n            grantsNothingDeliberately\n            grants {\n              category\n              axes\n              missingAxes\n            }\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    /*\n     * A GraphQL error arrives as `data: null` with `errors` set, and `?? []` would draw\n     * that as \"this installation offers nothing\" — a refusal made to look like an answer.\n     */\n    if (response.errors?.length) {\n      document.dispatchEvent(\n        new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n      )\n      return\n    }\n\n    this.templates = response.data?.roleTemplates || []\n  }\n\n  render() {\n    return html`\n      <div body>\n        <div panel>\n          <header>\n            ${i18next.t('field.seat')}\n            <span count>${this.templates.length}</span>\n          </header>\n          <ul>\n            ${this.templates.map(\n              template => html`\n                <li seat ?selected=${!this.scratch && this.selected?.id === template.id} @click=${() => this.pick(template)}>\n                  <div title-row>\n                    <span name>${template.name}</span>\n                    ${template.defaultNameTaken\n                      ? html`<span tag>${i18next.t('text.already in this domain')}</span>`\n                      : nothing}\n                    ${template.missingCount\n                      ? html`<span tag warn>${i18next.t('text.x not here', { x: template.missingCount })}</span>`\n                      : nothing}\n                  </div>\n                  <small>${this.summarize(template)}</small>\n                </li>\n              `\n            )}\n            <li seat ?selected=${this.scratch} @click=${() => this.pickScratch()}>\n              <div title-row>\n                <md-icon>edit</md-icon>\n                <span name>${i18next.t('button.name it yourself')}</span>\n              </div>\n              <small>${i18next.t('text.start from a blank seat')}</small>\n            </li>\n          </ul>\n        </div>\n\n        <div panel>${this.renderDetail()}</div>\n      </div>\n\n      <div class=\"footer\">\n        <button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</button>\n        <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  /**\n   * What the seat opens, in one line — **counted, not interpreted.**\n   *\n   * This briefly said \"changes 6 · only sees 8\", which read well and was not something the\n   * data supports: the privilege axis is an unconstrained string and its name does not\n   * determine what the resolver behind it does. Counting is safe; grouping by meaning was\n   * not. See `renderOpens`.\n   *\n   * \"0 privileges\" is still two different facts and must not be merged: granting nothing\n   * on purpose is an approval seat, and a template whose grants are all missing here is a\n   * defect (`missingCount`).\n   */\n  private summarize(template: TemplateView) {\n    if (template.grantsNothingDeliberately) {\n      return i18next.t('text.opens nothing, receives approvals')\n    }\n\n    return i18next.t('text.x modules y privileges', {\n      x: template.grants.filter(grant => grant.axes.length).length,\n      y: template.privilegeCount\n    })\n  }\n\n  private renderDetail() {\n    if (this.scratch) {\n      return html`\n        <header>${i18next.t('button.name it yourself')}</header>\n        <div detail>\n          <label field>\n            ${i18next.t('field.name')}\n            <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n          </label>\n          <label field>\n            ${i18next.t('field.description')}\n            <input .value=${this.description} @input=${(e: any) => (this.description = e.target.value)} />\n          </label>\n          <small>${i18next.t('text.a blank seat opens nothing until you give it privileges')}</small>\n        </div>\n      `\n    }\n\n    if (!this.selected) {\n      return html`<div empty>${i18next.t('text.pick a seat to see what it opens')}</div>`\n    }\n\n    const template = this.selected\n\n    return html`\n      <header>${template.name}</header>\n      <div detail>\n        <label field>\n          ${i18next.t('field.name')}\n          <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n          <small>${i18next.t('text.this plant may call the seat what it likes')}</small>\n        </label>\n        ${template.defaultNameTaken && this.name === template.name\n          ? html`<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`\n          : nothing}\n        ${this.renderOpens(template)}\n      </div>\n    `\n  }\n\n  /**\n   * 이 자리가 무엇을 여나 — **선언된 것만.**\n   *\n   * ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):\n   * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」\n   *\n   * 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.\n   *\n   *  ① `@privilege(privilege:)` 는 **제약 없는 문자열**이다(지시자 선언이 `privilege: String`\n   *     이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 **오늘\n   *     그렇게 쓴 것**이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,\n   *     처음 보는 값은 **알아서가 아니라 query 가 아니라서** 「바꿀 수 있는 것」으로 떨어졌다.\n   *  ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,\n   *     그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 **읽는** 질의에\n   *     `privilege: \"mutation\"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가\n   *     아니라 **어느 문을 지나야 하나**의 이름이다.\n   *\n   * 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것\n   * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.\n   */\n  private renderOpens(template: TemplateView) {\n    if (template.grantsNothingDeliberately) {\n      return html`<p note>${i18next.t('text.opens nothing, receives approvals')}</p>`\n    }\n\n    return html`\n      <dl grants>\n        ${[...template.grants].sort(byName).map(\n          grant => html`\n            <dt>${moduleLabel(grant.category)}</dt>\n            <dd>\n              ${grant.axes.map(axis => html`<span axis>${axisLabel(axis)}</span>`)}\n              ${grant.missingAxes.map(axis => html`<span axis missing>${axisLabel(axis)}</span>`)}\n            </dd>\n          `\n        )}\n      </dl>\n      ${template.missingCount\n        ? html`<p note>${i18next.t('text.struck through are not installed here')}</p>`\n        : nothing}\n    `\n  }\n\n  private pick(template: TemplateView) {\n    this.scratch = false\n    this.selected = template\n    this.name = template.name\n  }\n\n  private pickScratch() {\n    this.scratch = true\n    this.selected = undefined\n    this.name = ''\n  }\n\n  private canCreate() {\n    return Boolean(this.name.trim()) && (this.scratch || Boolean(this.selected))\n  }\n\n  private async create() {\n    const created = this.scratch\n      ? await this.page?.createBlankRole?.(this.name.trim(), this.description.trim())\n      : await this.page?.createFromTemplate?.(this.selected!.id, this.name.trim())\n\n    if (created) {\n      this.dispatchEvent(new CustomEvent('close'))\n    }\n  }\n}\n"]}

package/dist-client/components/secret-field.d.ts

@@ -0,0 +1,35 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+declare const SecretField_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * A credential the reader is meant to copy once.
+ *
+ * ── Why this is not a readonly input ─────────────────────────────────────────
+ * The app binding and appliance detail screens printed refresh and access tokens into
+ * `<input readonly>` in plain text, from the moment the page opened. The reader needs the
+ * value exactly once — to paste it into the thing being set up — and for the rest of the
+ * time the screen is open it is just a credential sitting on a display.
+ *
+ * So the value is masked, copying does not require revealing it, and revealing is something
+ * the reader does on purpose. `utils/secret-display.ts` holds the rules, with tests: the mask
+ * is a fixed width so it does not leak the length, and an absent secret shows nothing rather
+ * than dots over a token nobody issued.
+ *
+ * ── Copy without reveal ──────────────────────────────────────────────────────
+ * The common case is "paste this into the other system", and it does not need the value on
+ * screen at all. Reveal exists for the other case — checking that the value matches what the
+ * other side already has — and the reader chooses it.
+ *
+ * `navigator.clipboard` needs a secure context. On a plain-http deployment it is absent, and
+ * the button says so instead of failing quietly, because a copy that silently did nothing
+ * would leave the reader pasting whatever was in the clipboard before.
+ */
+export declare class SecretField extends SecretField_base {
+    static styles: import("lit").CSSResult[];
+    /** The credential. Absent means none has been issued. */
+    value?: string;
+    private revealed;
+    render(): import("lit-html").TemplateResult<1>;
+    private copy;
+}
+export {};

package/dist-client/components/secret-field.js

@@ -0,0 +1,149 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { hasSecret, shownSecret } from '../utils/secret-display.js';
+/**
+ * A credential the reader is meant to copy once.
+ *
+ * ── Why this is not a readonly input ─────────────────────────────────────────
+ * The app binding and appliance detail screens printed refresh and access tokens into
+ * `<input readonly>` in plain text, from the moment the page opened. The reader needs the
+ * value exactly once — to paste it into the thing being set up — and for the rest of the
+ * time the screen is open it is just a credential sitting on a display.
+ *
+ * So the value is masked, copying does not require revealing it, and revealing is something
+ * the reader does on purpose. `utils/secret-display.ts` holds the rules, with tests: the mask
+ * is a fixed width so it does not leak the length, and an absent secret shows nothing rather
+ * than dots over a token nobody issued.
+ *
+ * ── Copy without reveal ──────────────────────────────────────────────────────
+ * The common case is "paste this into the other system", and it does not need the value on
+ * screen at all. Reveal exists for the other case — checking that the value matches what the
+ * other side already has — and the reader chooses it.
+ *
+ * `navigator.clipboard` needs a secure context. On a plain-http deployment it is absent, and
+ * the button says so instead of failing quietly, because a copy that silently did nothing
+ * would leave the reader pasting whatever was in the clipboard before.
+ */
+let SecretField = class SecretField extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.revealed = false;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+        font-family: var(--theme-mono-font, monospace);
+        padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-small, 5px);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      input[empty] {
+        font-family: inherit;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--spacing-small, 4px);
+        border: none;
+        border-radius: var(--md-sys-shape-corner-small, 5px);
+        background-color: transparent;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+      }
+
+      button:hover:not([disabled]) {
+        background-color: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      /*
+        A button that cannot act says so before it is pressed. Leaving it live over an absent
+        token means the reader presses it, nothing happens, and they cannot tell a broken
+        screen from a credential that was never issued.
+      */
+      button[disabled] {
+        opacity: 0.38;
+        cursor: default;
+      }
+
+      md-icon {
+        --md-icon-size: 18px;
+      }
+    `
+    ]; }
+    render() {
+        const present = hasSecret(this.value);
+        return html `
+      <input
+        type="text"
+        readonly
+        ?empty=${!present}
+        .value=${present ? shownSecret(this.value, this.revealed) : i18next.t('text.not issued')}
+      />
+
+      <button
+        ?disabled=${!present}
+        title=${this.revealed ? i18next.t('button.hide') : i18next.t('button.reveal')}
+        @click=${() => (this.revealed = !this.revealed)}
+      >
+        <md-icon>${this.revealed ? 'visibility_off' : 'visibility'}</md-icon>
+      </button>
+
+      <button ?disabled=${!present} title=${i18next.t('button.copy')} @click=${this.copy}>
+        <md-icon>content_copy</md-icon>
+      </button>
+    `;
+    }
+    async copy() {
+        if (!hasSecret(this.value)) {
+            return;
+        }
+        /*
+          Absent outside a secure context. Saying so beats failing quietly — a copy that did
+          nothing leaves the reader pasting whatever was in the clipboard before, and blaming
+          the other system when it does not work.
+        */
+        if (!navigator.clipboard?.writeText) {
+            notify({ level: 'error', message: i18next.t('text.copying needs a secure connection') });
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(this.value);
+            notify({ message: i18next.t('text.copied') });
+        }
+        catch (e) {
+            notify({ level: 'error', message: i18next.t('text.copying needs a secure connection') });
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SecretField.prototype, "value", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], SecretField.prototype, "revealed", void 0);
+SecretField = __decorate([
+    customElement('secret-field')
+], SecretField);
+export { SecretField };
+//# sourceMappingURL=secret-field.js.map

package/dist-client/components/secret-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-field.js","sourceRoot":"","sources":["../../client/components/secret-field.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAvD;;QA6DY,aAAQ,GAAY,KAAK,CAAA;IAiD5C,CAAC;aA7GQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;KACF,AAvDY,CAuDZ;IAOD,MAAM;QACJ,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAErC,OAAO,IAAI,CAAA;;;;iBAIE,CAAC,OAAO;iBACR,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;;;;oBAI5E,CAAC,OAAO;gBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;iBACpE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;;mBAEpC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY;;;0BAGxC,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,IAAI,CAAC,IAAI;;;KAGnF,CAAA;IACH,CAAC;IAEO,KAAK,CAAC,IAAI;QAChB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAM;QACR,CAAC;QAED;;;;UAIE;QACF,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC;YACpC,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,EAAE,CAAC,CAAA;YACxF,OAAM;QACR,CAAC;QAED,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAM,CAAC,CAAA;YAChD,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CAAA;QAC/C,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,EAAE,CAAC,CAAA;QAC1F,CAAC;IACH,CAAC;;AAlD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAe;AAEzB;IAAhB,KAAK,EAAE;;6CAAkC;AA7D/B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA8GvB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { hasSecret, shownSecret } from '../utils/secret-display.js'\n\n/**\n * A credential the reader is meant to copy once.\n *\n * ── Why this is not a readonly input ─────────────────────────────────────────\n * The app binding and appliance detail screens printed refresh and access tokens into\n * `<input readonly>` in plain text, from the moment the page opened. The reader needs the\n * value exactly once — to paste it into the thing being set up — and for the rest of the\n * time the screen is open it is just a credential sitting on a display.\n *\n * So the value is masked, copying does not require revealing it, and revealing is something\n * the reader does on purpose. `utils/secret-display.ts` holds the rules, with tests: the mask\n * is a fixed width so it does not leak the length, and an absent secret shows nothing rather\n * than dots over a token nobody issued.\n *\n * ── Copy without reveal ──────────────────────────────────────────────────────\n * The common case is \"paste this into the other system\", and it does not need the value on\n * screen at all. Reveal exists for the other case — checking that the value matches what the\n * other side already has — and the reader chooses it.\n *\n * `navigator.clipboard` needs a secure context. On a plain-http deployment it is absent, and\n * the button says so instead of failing quietly, because a copy that silently did nothing\n * would leave the reader pasting whatever was in the clipboard before.\n */\n@customElement('secret-field')\nexport class SecretField extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n      }\n\n      input {\n        flex: 1;\n        min-width: 0;\n        font-family: var(--theme-mono-font, monospace);\n        padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--md-sys-shape-corner-small, 5px);\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      input[empty] {\n        font-family: inherit;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      button {\n        display: inline-flex;\n        align-items: center;\n        padding: var(--spacing-small, 4px);\n        border: none;\n        border-radius: var(--md-sys-shape-corner-small, 5px);\n        background-color: transparent;\n        color: var(--md-sys-color-on-surface-variant);\n        cursor: pointer;\n      }\n\n      button:hover:not([disabled]) {\n        background-color: var(--md-sys-color-surface-variant);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /*\n        A button that cannot act says so before it is pressed. Leaving it live over an absent\n        token means the reader presses it, nothing happens, and they cannot tell a broken\n        screen from a credential that was never issued.\n      */\n      button[disabled] {\n        opacity: 0.38;\n        cursor: default;\n      }\n\n      md-icon {\n        --md-icon-size: 18px;\n      }\n    `\n  ]\n\n  /** The credential. Absent means none has been issued. */\n  @property({ type: String }) value?: string\n\n  @state() private revealed: boolean = false\n\n  render() {\n    const present = hasSecret(this.value)\n\n    return html`\n      <input\n        type=\"text\"\n        readonly\n        ?empty=${!present}\n        .value=${present ? shownSecret(this.value, this.revealed) : i18next.t('text.not issued')}\n      />\n\n      <button\n        ?disabled=${!present}\n        title=${this.revealed ? i18next.t('button.hide') : i18next.t('button.reveal')}\n        @click=${() => (this.revealed = !this.revealed)}\n      >\n        <md-icon>${this.revealed ? 'visibility_off' : 'visibility'}</md-icon>\n      </button>\n\n      <button ?disabled=${!present} title=${i18next.t('button.copy')} @click=${this.copy}>\n        <md-icon>content_copy</md-icon>\n      </button>\n    `\n  }\n\n  private async copy() {\n    if (!hasSecret(this.value)) {\n      return\n    }\n\n    /*\n      Absent outside a secure context. Saying so beats failing quietly — a copy that did\n      nothing leaves the reader pasting whatever was in the clipboard before, and blaming\n      the other system when it does not work.\n    */\n    if (!navigator.clipboard?.writeText) {\n      notify({ level: 'error', message: i18next.t('text.copying needs a secure connection') })\n      return\n    }\n\n    try {\n      await navigator.clipboard.writeText(this.value!)\n      notify({ message: i18next.t('text.copied') })\n    } catch (e) {\n      notify({ level: 'error', message: i18next.t('text.copying needs a secure connection') })\n    }\n  }\n}\n"]}

package/dist-client/pages/app-binding/app-binding-list-query.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-client/pages/app-binding/app-binding-list-query.test.js

@@ -0,0 +1,46 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+/**
+ * The bound-applications list must not ask for the refresh token.
+ *
+ * `AppBinding.refreshToken` is not a hash of anything. `oauth2-server.ts` writes the refresh
+ * token into the `password` column verbatim, and the field re-exposes that column under a
+ * friendlier name. Whoever holds it can exchange it for access tokens.
+ *
+ * The field carries its own `@privilege(category: "security", privilege: "query",
+ * domainOwnerGranted: true)`, so the server will not hand it to just anyone — but the people
+ * it *will* hand it to are the ones most likely to have this screen open on a shared display.
+ * A credential in a grid cell is a credential in plain text beside a name, in every
+ * screenshot and every shoulder-glance.
+ *
+ * ⚠ Comments are stripped before searching. The prose above names `refreshToken` four times
+ * explaining why it is absent; searching the raw file would find the explanation and pass
+ * over a query that really asks for it.
+ */
+function source(name) {
+    const text = readFileSync(join(__dirname, name), 'utf-8');
+    return text.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^[ \t]*\/\/.*$/gm, '');
+}
+describe('the bound applications list query', () => {
+    it('does not ask for the refresh token', () => {
+        expect(source('./app-bindings.ts')).not.toContain('refreshToken');
+    });
+    it('asks for the fields the columns render', () => {
+        const text = source('./app-bindings.ts');
+        for (const field of ['name', 'email', 'status', 'scope', 'updatedAt', 'application']) {
+            expect(text).toContain(field);
+        }
+    });
+    it('passes the grist options through, so paging and sorting reach the server', () => {
+        /*
+         * Worth asserting here in particular: the server paged before it filtered until
+         * dde62cd6a1, so this screen had no paging to pass through and the habit of not passing
+         * it could easily survive the fix.
+         */
+        const text = source('./app-bindings.ts');
+        expect(text).toContain('$pagination: Pagination');
+        expect(text).toContain('$sortings: [Sorting!]');
+        expect(text).toContain('$filters: [Filter!]');
+    });
+});
+//# sourceMappingURL=app-binding-list-query.test.js.map

package/dist-client/pages/app-binding/app-binding-list-query.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-binding-list-query.test.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding-list-query.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAE3B;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,MAAM,CAAC,IAAY;IAC1B,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,CAAA;IAEzD,OAAO,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;AAC9E,CAAC;AAED,QAAQ,CAAC,mCAAmC,EAAE,GAAG,EAAE;IACjD,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACnE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAA;QAExC,KAAK,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,CAAC,EAAE,CAAC;YACrF,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QAC/B,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0EAA0E,EAAE,GAAG,EAAE;QAClF;;;;WAIG;QACH,MAAM,IAAI,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAA;QAExC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAA;QACjD,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;QAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { readFileSync } from 'fs'\nimport { join } from 'path'\n\n/**\n * The bound-applications list must not ask for the refresh token.\n *\n * `AppBinding.refreshToken` is not a hash of anything. `oauth2-server.ts` writes the refresh\n * token into the `password` column verbatim, and the field re-exposes that column under a\n * friendlier name. Whoever holds it can exchange it for access tokens.\n *\n * The field carries its own `@privilege(category: \"security\", privilege: \"query\",\n * domainOwnerGranted: true)`, so the server will not hand it to just anyone — but the people\n * it *will* hand it to are the ones most likely to have this screen open on a shared display.\n * A credential in a grid cell is a credential in plain text beside a name, in every\n * screenshot and every shoulder-glance.\n *\n * ⚠ Comments are stripped before searching. The prose above names `refreshToken` four times\n * explaining why it is absent; searching the raw file would find the explanation and pass\n * over a query that really asks for it.\n */\nfunction source(name: string): string {\n  const text = readFileSync(join(__dirname, name), 'utf-8')\n\n  return text.replace(/\\/\\*[\\s\\S]*?\\*\\//g, '').replace(/^[ \\t]*\\/\\/.*$/gm, '')\n}\n\ndescribe('the bound applications list query', () => {\n  it('does not ask for the refresh token', () => {\n    expect(source('./app-bindings.ts')).not.toContain('refreshToken')\n  })\n\n  it('asks for the fields the columns render', () => {\n    const text = source('./app-bindings.ts')\n\n    for (const field of ['name', 'email', 'status', 'scope', 'updatedAt', 'application']) {\n      expect(text).toContain(field)\n    }\n  })\n\n  it('passes the grist options through, so paging and sorting reach the server', () => {\n    /*\n     * Worth asserting here in particular: the server paged before it filtered until\n     * dde62cd6a1, so this screen had no paging to pass through and the habit of not passing\n     * it could easily survive the fix.\n     */\n    const text = source('./app-bindings.ts')\n\n    expect(text).toContain('$pagination: Pagination')\n    expect(text).toContain('$sortings: [Sorting!]')\n    expect(text).toContain('$filters: [Filter!]')\n  })\n})\n"]}

package/dist-client/pages/app-binding/app-binding.d.ts

@@ -1 +1,2 @@
 import '@material/web/icon/icon.js';
+import '../../components/secret-field.js';

package/dist-client/pages/app-binding/app-binding.js

@@ -6,7 +6,9 @@ import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { asyncReplace } from 'lit/directives/async-replace.js';
 import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
 import { navigate, PageView } from '@operato/shell';
+import '../../components/secret-field.js';
 import { parseJwt, sleep } from '@operato/utils';
 let AppBinding = class AppBinding extends PageView {
     static { this.styles = [
@@ -213,24 +215,22 @@ let AppBinding = class AppBinding extends PageView {
             <legend>binding credential</legend>
             <div field-2column>
               <div field grid-span>
-                <label for="access-token">access token</label>
-                <input id="access-token" type="text" .value=${this.accessToken || ''} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
+                <label for="access-token">${i18next.t('label.access token')}</label>
+                <secret-field id="access-token" .value=${this.accessToken || ''}></secret-field>
                 ${accessTokenExp
             ? html `<div input-hint>
-                      expired in ${new Date(accessTokenExp).toLocaleString()} :
+                      ${i18next.t('text.expires at x', { x: new Date(accessTokenExp).toLocaleString() })} ·
                       ${asyncReplace(this.expTimer(accessTokenExp))}
                     </div>`
             : html ``}
               </div>
 
               <div field grid-span>
-                <label for="refresh-token">refresh token</label>
-                <input id="refresh-token" type="text" .value=${binding.refreshToken || ''} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
+                <label for="refresh-token">${i18next.t('label.refresh token')}</label>
+                <secret-field id="refresh-token" .value=${binding.refreshToken || ''}></secret-field>
                 ${refreshTokenExp
             ? html `<div input-hint>
-                      expired in ${new Date(refreshTokenExp).toLocaleString()} :
+                      ${i18next.t('text.expires at x', { x: new Date(refreshTokenExp).toLocaleString() })} ·
                       ${asyncReplace(this.expTimer(refreshTokenExp))}
                     </div>`
             : html ``}

package/dist-client/pages/app-binding/app-binding.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('app-binding-page')\nclass AppBinding extends PageView {   static styles = [\n    css`\n      :host {         display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n\n        position: relative;\n\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n }\n\n      h2 {         margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n }\n\n      [page-description] {         margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n }\n\n      [icon] {         position: absolute;\n        top: 10px;\n        right: 10px;\n\n        max-width: 80px;\n }\n\n      [icon] img {         max-width: 100%;\n        max-height: 100%;\n }\n\n      [fieldset-container] {         background-color: var(--md-sys-color-surface);\n        margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n        padding: var(--spacing-medium);\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n\n        label {           font: var(--label-font);\n          color: var(--label-color, var(--md-sys-color-on-surface));\n          text-transform: var(--label-text-transform);\n }\n        input {\n          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n          color: var(--input-field-color, var(--md-sys-color-on-surface));\n          border: var(--border-dim-color);\n          border-radius: var(--border-radius);\n          margin: var(--input-margin);\n          padding: var(--input-padding);\n          font: var(--input-font);\n\n          flex: 1;\n }\n        select:focus,\n        input:focus,\n        button {           outline: none;\n }\n        form {           max-width: var(--content-container-max-width);\n }\n }\n\n      [fieldset-container] fieldset {         margin: 0;\n        margin-top: -15px;\n }\n\n      fieldset {         border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        margin: var(--fieldset-margin);\n        padding: var(--fieldset-padding);\n }\n\n      legend {         padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n }\n\n      [field-2column] {         display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n }\n\n      [field] {         display: flex;\n        flex-direction: column;\n        position: relative;\n }\n\n      [grid-span] {         grid-column: span 2;\n }\n\n      button,\n      [button-in-field] {         background-color: var(--button-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        padding: var(--button-padding);\n        color: var(--button-color);\n        font: var(--button-font);\n        text-transform: var(--button-text-transform);\n\n        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n        float: right;\n        text-decoration: none;\n }\n\n      button:hover {         border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n }\n\n      [button-in-field] {         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n        position: absolute;\n        top: 12px;\n        right: 0;\n        max-height: 36px;\n }\n\n      [input-hint] {         font: var(--input-hint-font);\n        color: var(--input-hint-color);\n }\n\n      @media screen and (max-width: 480px) {         [field] {           grid-column: span 2;\n }\n }\n    `\n  ]\n\n  @property({ type: Object }) appbinding: any\n  @property({ type: String }) accessToken?: string\n\n  @state() _refreshTokenInfo: any\n  @state() _accessTokenInfo: any\n\n  private clipboard?: Clipboard\n\n  get context() {     return {       title: {         icon: 'link',\n        text: this.appbinding.name\n }\n }\n }\n\n  render() {     var binding = this.appbinding || {}\n    var app = this.appbinding?.application || {}\n    var refreshTokenExp = this._refreshTokenInfo?.exp\n    var accessTokenExp = this._accessTokenInfo?.exp\n\n    return html`\n      <div>\n        <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>\n        <p page-description>${app.description}</p>\n      </div>\n\n      ${app.icon\n        ? html`\n            <div icon>\n              <img src=${app.icon} />\n            </div>\n          `\n        : html``}\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>application</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"app-name\">app name</label>\n                <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"app-description\">description</label>\n                <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n              </div>\n\n              <div field>\n                <label for=\"contact-email\">contact email</label>\n                <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"id\">id</label>\n                <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"name\">name</label>\n                <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n              </div>\n\n              <div field>\n                <label for=\"status\">status</label>\n                <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n              </div>\n\n              <div field>\n                <label for=\"scope\">scope</label>\n                <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding credential</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"access-token\">access token</label>\n                <input id=\"access-token\" type=\"text\" .value=${this.accessToken || ''} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                ${accessTokenExp\n                  ? html`<div input-hint>\n                      expired in ${new Date(accessTokenExp).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(accessTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n\n              <div field grid-span>\n                <label for=\"refresh-token\">refresh token</label>\n                <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken || ''} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                ${refreshTokenExp\n                  ? html`<div input-hint>\n                      expired in ${new Date(refreshTokenExp).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(refreshTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n        <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n      </form>\n    `\n }\n\n  async *expTimer(exp) {     const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {       var remain = Math.floor(Number(exp) - Date.now() / 1000)\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n      await sleep(1000)\n }\n }\n\n  firstUpdated() {     const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n    this.clipboard = new Clipboard(copybuttons, {       target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n  updated(changes) {     /*\n     * If this page properties are changed, this callback will be invoked.\n     * This callback will be called back only when this page is activated.\n     */\n    if (changes.has('appbinding')) {       const { refreshToken } = this.appbinding || {}\n      this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\n }\n\n    if (changes.has('accessToken')) {       this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n  async pageUpdated(changes, lifecycle, before) {     if (this.active) {       /*\n       * this page is activated\n       */\n      await this.fetchAppBinding()\n } else {       /* this page is deactivated */\n }\n }\n\n  async fetchAppBinding() {     const response = await client.query({       query: gql`\n        query ($id: String!) {           appBinding(id: $id) {             id\n            name\n            description\n            email\n            scope\n            status\n            application {               id\n              name\n              description\n              email\n              icon\n }\n            refreshToken\n }\n }\n      `,\n      variables: {         id: this.lifecycle.resourceId\n }\n })\n\n    this.appbinding = response.data.appBinding\n }\n\n  async deleteAppBinding(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           deleteAppBinding(id: $id)\n }\n      `,\n      variables: {         id\n }\n })\n\n    const result = response.data.deleteAppBinding\n    if (result) {       console.log('delete sucess')\n      navigate(`app-bindings`)\n } else {       console.error('delete fail')\n }\n }\n\n  async renewApplicationAccessToken(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           renewApplicationAccessToken(id: $id) {             accessToken\n            refreshToken\n }\n }\n      `,\n      variables: {         id\n }\n })\n\n    if (response.errors) {       console.error('renew application access token fail')\n } else {       const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n      this.accessToken = accessToken\n      this.appbinding = {         ...this.appbinding,\n        refreshToken\n }\n }\n }\n}\n"]}
+{"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\n\nimport '../../components/secret-field.js'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('app-binding-page')\nclass AppBinding extends PageView {   static styles = [\n    css`\n      :host {         display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n\n        position: relative;\n\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n }\n\n      h2 {         margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n }\n\n      [page-description] {         margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n }\n\n      [icon] {         position: absolute;\n        top: 10px;\n        right: 10px;\n\n        max-width: 80px;\n }\n\n      [icon] img {         max-width: 100%;\n        max-height: 100%;\n }\n\n      [fieldset-container] {         background-color: var(--md-sys-color-surface);\n        margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n        padding: var(--spacing-medium);\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n\n        label {           font: var(--label-font);\n          color: var(--label-color, var(--md-sys-color-on-surface));\n          text-transform: var(--label-text-transform);\n }\n        input {\n          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n          color: var(--input-field-color, var(--md-sys-color-on-surface));\n          border: var(--border-dim-color);\n          border-radius: var(--border-radius);\n          margin: var(--input-margin);\n          padding: var(--input-padding);\n          font: var(--input-font);\n\n          flex: 1;\n }\n        select:focus,\n        input:focus,\n        button {           outline: none;\n }\n        form {           max-width: var(--content-container-max-width);\n }\n }\n\n      [fieldset-container] fieldset {         margin: 0;\n        margin-top: -15px;\n }\n\n      fieldset {         border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        margin: var(--fieldset-margin);\n        padding: var(--fieldset-padding);\n }\n\n      legend {         padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n }\n\n      [field-2column] {         display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n }\n\n      [field] {         display: flex;\n        flex-direction: column;\n        position: relative;\n }\n\n      [grid-span] {         grid-column: span 2;\n }\n\n      button,\n      [button-in-field] {         background-color: var(--button-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        padding: var(--button-padding);\n        color: var(--button-color);\n        font: var(--button-font);\n        text-transform: var(--button-text-transform);\n\n        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n        float: right;\n        text-decoration: none;\n }\n\n      button:hover {         border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n }\n\n      [button-in-field] {         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n        position: absolute;\n        top: 12px;\n        right: 0;\n        max-height: 36px;\n }\n\n      [input-hint] {         font: var(--input-hint-font);\n        color: var(--input-hint-color);\n }\n\n      @media screen and (max-width: 480px) {         [field] {           grid-column: span 2;\n }\n }\n    `\n  ]\n\n  @property({ type: Object }) appbinding: any\n  @property({ type: String }) accessToken?: string\n\n  @state() _refreshTokenInfo: any\n  @state() _accessTokenInfo: any\n\n  private clipboard?: Clipboard\n\n  get context() {     return {       title: {         icon: 'link',\n        text: this.appbinding.name\n }\n }\n }\n\n  render() {     var binding = this.appbinding || {}\n    var app = this.appbinding?.application || {}\n    var refreshTokenExp = this._refreshTokenInfo?.exp\n    var accessTokenExp = this._accessTokenInfo?.exp\n\n    return html`\n      <div>\n        <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>\n        <p page-description>${app.description}</p>\n      </div>\n\n      ${app.icon\n        ? html`\n            <div icon>\n              <img src=${app.icon} />\n            </div>\n          `\n        : html``}\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>application</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"app-name\">app name</label>\n                <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"app-description\">description</label>\n                <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n              </div>\n\n              <div field>\n                <label for=\"contact-email\">contact email</label>\n                <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"id\">id</label>\n                <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"name\">name</label>\n                <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n              </div>\n\n              <div field>\n                <label for=\"status\">status</label>\n                <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n              </div>\n\n              <div field>\n                <label for=\"scope\">scope</label>\n                <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding credential</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"access-token\">${i18next.t('label.access token')}</label>\n                <secret-field id=\"access-token\" .value=${this.accessToken || ''}></secret-field>\n                ${accessTokenExp\n                  ? html`<div input-hint>\n                      ${i18next.t('text.expires at x', { x: new Date(accessTokenExp).toLocaleString() })} ·\n                      ${asyncReplace(this.expTimer(accessTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n\n              <div field grid-span>\n                <label for=\"refresh-token\">${i18next.t('label.refresh token')}</label>\n                <secret-field id=\"refresh-token\" .value=${binding.refreshToken || ''}></secret-field>\n                ${refreshTokenExp\n                  ? html`<div input-hint>\n                      ${i18next.t('text.expires at x', { x: new Date(refreshTokenExp).toLocaleString() })} ·\n                      ${asyncReplace(this.expTimer(refreshTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n        <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n      </form>\n    `\n }\n\n  async *expTimer(exp) {     const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {       var remain = Math.floor(Number(exp) - Date.now() / 1000)\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n      await sleep(1000)\n }\n }\n\n  firstUpdated() {     const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n    this.clipboard = new Clipboard(copybuttons, {       target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n  updated(changes) {     /*\n     * If this page properties are changed, this callback will be invoked.\n     * This callback will be called back only when this page is activated.\n     */\n    if (changes.has('appbinding')) {       const { refreshToken } = this.appbinding || {}\n      this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\n }\n\n    if (changes.has('accessToken')) {       this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n  async pageUpdated(changes, lifecycle, before) {     if (this.active) {       /*\n       * this page is activated\n       */\n      await this.fetchAppBinding()\n } else {       /* this page is deactivated */\n }\n }\n\n  async fetchAppBinding() {     const response = await client.query({       query: gql`\n        query ($id: String!) {           appBinding(id: $id) {             id\n            name\n            description\n            email\n            scope\n            status\n            application {               id\n              name\n              description\n              email\n              icon\n }\n            refreshToken\n }\n }\n      `,\n      variables: {         id: this.lifecycle.resourceId\n }\n })\n\n    this.appbinding = response.data.appBinding\n }\n\n  async deleteAppBinding(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           deleteAppBinding(id: $id)\n }\n      `,\n      variables: {         id\n }\n })\n\n    const result = response.data.deleteAppBinding\n    if (result) {       console.log('delete sucess')\n      navigate(`app-bindings`)\n } else {       console.error('delete fail')\n }\n }\n\n  async renewApplicationAccessToken(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           renewApplicationAccessToken(id: $id) {             accessToken\n            refreshToken\n }\n }\n      `,\n      variables: {         id\n }\n })\n\n    if (response.errors) {       console.error('renew application access token fail')\n } else {       const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n      this.accessToken = accessToken\n      this.appbinding = {         ...this.appbinding,\n        refreshToken\n }\n }\n }\n}\n"]}

package/dist-client/pages/app-binding/app-bindings.d.ts

@@ -1,2 +1,63 @@
-import '@material/web/button/elevated-button.js';
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/context/ox-context-page-toolbar.js';
+import type { FetchOption } from '@operato/data-grist';
+import { PageView } from '@operato/shell';
+declare const AppBindings_base: (new (...args: any[]) => {
+    __preferenceProviders: {
+        [element: string]: import("@operato/p13n").PagePreferenceProvider;
+    };
+    getPagePreferenceProvider(element: string): import("@operato/p13n").PagePreferenceProvider | undefined;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * Applications bound to this domain.
+ *
+ * A binding is a `User` row with `userType: 'application'` — the account an application signs
+ * in as. The list shows who it is and what it may do; what it signs in *with* is elsewhere.
+ *
+ * ── The server answers honestly now ──────────────────────────────────────────
+ * Until dde62cd6a1 this query paged before it filtered: the database took a page of users of
+ * every type, JavaScript kept the applications among them, and the total reported how many
+ * survived that one page. A grid told there were three when there were thirty never offered a
+ * second page. Wiring paging up was pointless until that was fixed; it works now.
+ *
+ * ── ⚠ The refresh token is not asked for, and a test holds that ──────────────
+ * AppBinding's refresh token is the application's actual credential — oauth2-server.ts writes
+ * it into the password column verbatim, not hashed — and the field carries its own
+ * privilege directive for security:query.
+ *
+ * A credential that can be exchanged for access tokens does not belong in a grid cell, where
+ * it sits in plain text beside a name for anyone who can open the screen, and in any
+ * screenshot of it. `app-binding-list-query.test.ts` fails if the word appears here.
+ */
+export declare class AppBindings extends AppBindings_base {
+    static styles: import("lit").CSSResult[];
+    active: boolean;
+    config: any;
+    mode: 'CARD' | 'LIST' | 'GRID';
+    /** The last fetch did not answer. Distinct from answering with nothing. */
+    failed: boolean;
+    private grist;
+    get context(): {
+        title: string;
+        help: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        actions: {
+            title: string;
+            action: () => void;
+            icon: string;
+        }[];
+        toolbar: boolean;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(): Promise<void>;
+    pageUpdated(_changes: any, _lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: number;
+        records: any[];
+    }>;
+}
+export {};