@things-factory/auth-ui 10.1.215 → 10.1.219

package/dist-client/components/password-setup-link-popup.js

@@ -0,0 +1,254 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@operato/popup/ox-popup-actions.js';
+import gql from 'graphql-tag';
+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 { openPopup } from '@operato/layout';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
+/**
+ * Issuing a password setup link - the one way a person gets a password here that an administrator did not set
+ * (ADR-0161).
+ *
+ * ── Before ───────────────────────────────────────────────────────────────────
+ * What happens is said before it happens: the password the account has stops working and its open sessions end, and
+ * the link works once, for 48 hours, and asks for the address. Then the administrator picks how it travels - by mail,
+ * or copied and handed over by them.
+ *
+ * ── After ────────────────────────────────────────────────────────────────────
+ * A copied link is on screen **only now**: the server keeps its hash and nothing else, and there is no way to read it
+ * again. Losing it means issuing another, which retires this one.
+ *
+ * The user detail, the add-user flow and the old role editor all open this one popup (`openPasswordSetupLink`).
+ */
+let PasswordSetupLinkPopup = class PasswordSetupLinkPopup extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mail = true;
+        this.issuing = false;
+        this.message = '';
+        this.copied = false;
+    }
+    static { this.styles = [
+        CommonPopupStyles,
+        PopupBodyStyles,
+        FormFieldStyles,
+        PopupFieldStyles,
+        css `
+      [ways] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
+
+      [ways] legend {
+        margin-bottom: var(--spacing-small, 4px);
+        padding: 0;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
+      }
+
+      [ways] label {
+        display: flex;
+        align-items: baseline;
+        gap: var(--spacing-medium, 8px);
+      }
+
+      [ways] [desc] {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
+      }
+
+      [copy-row] {
+        display: flex;
+        gap: var(--spacing-medium, 8px);
+        align-items: center;
+      }
+
+      [copy-row] input {
+        flex: 1;
+        min-width: 0;
+      }
+
+      /* Controls in a popup follow the card - pills (CommonPopupStyles holds that only inside the action row). */
+      [copy-row] md-outlined-button {
+        --md-outlined-button-container-height: var(--popup-action-height, 32px);
+        --md-outlined-button-container-shape: var(--popup-control-radius);
+      }
+    `
+    ]; }
+    render() {
+        const user = this.user || {};
+        return html `
+      <div class="body">
+        <div class="what">${user.name || user.username || user.email} · ${user.email}</div>
+        ${this.issued ? this.renderIssued() : this.renderChoice(user)}
+      </div>
+
+      <ox-popup-actions>
+        ${this.issued
+            ? nothing
+            : html `<md-text-button slot="cancel" @click=${() => this.close()}>${i18next.t('button.cancel')}</md-text-button>`}
+        <!-- Issued, the one thing left is to close: the link cannot be read again, so nothing here takes it back. -->
+        <md-filled-button
+          slot="confirm"
+          ?disabled=${this.issuing}
+          @click=${() => (this.issued ? this.close() : this.issue())}
+        >
+          ${this.issued ? i18next.t('button.close') : i18next.t('button.issue link')}
+        </md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+    renderChoice(user) {
+        const waiting = user.status === 'password_reset_required';
+        return html `
+      <div class="note">
+        ${waiting
+            ? i18next.t('text.a new link retires the last one')
+            : i18next.t('text.the current password stops and sessions end')}
+        ${i18next.t('text.the link works once for 48 hours and asks for the address')}
+      </div>
+
+      <fieldset ways>
+        <legend>${i18next.t('label.how the link travels')}</legend>
+        <label>
+          <input type="radio" name="way" .checked=${this.mail} @change=${() => (this.mail = true)} />
+          <span>${i18next.t('label.send by mail')}</span>
+          <span desc>${user.email}</span>
+        </label>
+        <label>
+          <input type="radio" name="way" .checked=${!this.mail} @change=${() => (this.mail = false)} />
+          <span>${i18next.t('label.copy the link')}</span>
+          <span desc>${i18next.t('text.hand it over yourself')}</span>
+        </label>
+      </fieldset>
+
+      ${this.message ? html `<div class="failure">${this.message}</div>` : nothing}
+    `;
+    }
+    renderIssued() {
+        const { link, mailedTo, expiresAt } = this.issued;
+        const until = new Date(expiresAt).toLocaleString(i18next.language);
+        if (mailedTo) {
+            return html `<div class="note">${i18next.t('text.the link was mailed to x until y', { x: mailedTo, y: until })}</div>`;
+        }
+        return html `
+      <label class="field">
+        <span>${i18next.t('title.password setup link')}</span>
+        <div copy-row>
+          <input name="link" readonly .value=${link || ''} @focus=${(e) => e.target.select()} />
+          <md-outlined-button @click=${() => this.copy()}>
+            ${this.copied ? i18next.t('button.copied') : i18next.t('button.copy')}
+          </md-outlined-button>
+        </div>
+      </label>
+      <div class="note">${i18next.t('text.this link is shown only now until y', { y: until })}</div>
+    `;
+    }
+    async issue() {
+        const username = this.user?.username || this.user?.email;
+        if (!username || this.issuing) {
+            return;
+        }
+        this.issuing = true;
+        this.message = '';
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($username: String!, $mail: Boolean!) {
+            issuePasswordSetupLink(username: $username, mail: $mail) {
+              link
+              mailedTo
+              expiresAt
+            }
+          }
+        `,
+                variables: { username, mail: this.mail },
+                context: gqlContext()
+            });
+            if (response.errors?.length) {
+                this.message = response.errors[0]?.message;
+                return;
+            }
+            this.issued = response.data?.issuePasswordSetupLink;
+            this.dispatchEvent(new CustomEvent('password-setup-issued', { bubbles: true, composed: true }));
+        }
+        catch (e) {
+            this.message = e?.message || String(e);
+        }
+        finally {
+            this.issuing = false;
+        }
+    }
+    async copy() {
+        const link = this.issued?.link;
+        if (!link) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(link);
+            this.copied = true;
+        }
+        catch (e) {
+            /* No clipboard (an insecure origin, a refused permission): leave the link selected for the person to copy. */
+            const input = this.renderRoot.querySelector('input[name=link]');
+            input?.select();
+        }
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent('close'));
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PasswordSetupLinkPopup.prototype, "user", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], PasswordSetupLinkPopup.prototype, "mail", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], PasswordSetupLinkPopup.prototype, "issuing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PasswordSetupLinkPopup.prototype, "issued", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], PasswordSetupLinkPopup.prototype, "message", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], PasswordSetupLinkPopup.prototype, "copied", void 0);
+PasswordSetupLinkPopup = __decorate([
+    customElement('password-setup-link-popup')
+], PasswordSetupLinkPopup);
+export { PasswordSetupLinkPopup };
+/**
+ * Open the popup for `user`. `onIssued` runs once a link was issued - the account is now waiting, so a list showing
+ * its status reads it again.
+ */
+export function openPasswordSetupLink(user, { onIssued } = {}) {
+    const popup = openPopup(html `<password-setup-link-popup
+      .user=${user}
+      @close=${() => popup.close()}
+      @password-setup-issued=${() => onIssued?.()}
+    ></password-setup-link-popup>`, {
+        backdrop: true,
+        size: 'medium',
+        title: i18next.t('title.password setup link')
+    });
+    return popup;
+}
+//# sourceMappingURL=password-setup-link-popup.js.map

package/dist-client/components/password-setup-link-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-setup-link-popup.js","sourceRoot":"","sources":["../../client/components/password-setup-link-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@operato/popup/ox-popup-actions.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 { openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\n/**\n * Issuing a password setup link - the one way a person gets a password here that an administrator did not set\n * (ADR-0161).\n *\n * ── Before ───────────────────────────────────────────────────────────────────\n * What happens is said before it happens: the password the account has stops working and its open sessions end, and\n * the link works once, for 48 hours, and asks for the address. Then the administrator picks how it travels - by mail,\n * or copied and handed over by them.\n *\n * ── After ────────────────────────────────────────────────────────────────────\n * A copied link is on screen **only now**: the server keeps its hash and nothing else, and there is no way to read it\n * again. Losing it means issuing another, which retires this one.\n *\n * The user detail, the add-user flow and the old role editor all open this one popup (`openPasswordSetupLink`).\n */\n@customElement('password-setup-link-popup')\nexport class PasswordSetupLinkPopup extends localize(i18next)(LitElement) {\n  static styles: CSSResultGroup = [\n    CommonPopupStyles,\n    PopupBodyStyles,\n    FormFieldStyles,\n    PopupFieldStyles,\n    css`\n      [ways] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      [ways] legend {\n        margin-bottom: var(--spacing-small, 4px);\n        padding: 0;\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 11.5px);\n      }\n\n      [ways] label {\n        display: flex;\n        align-items: baseline;\n        gap: var(--spacing-medium, 8px);\n      }\n\n      [ways] [desc] {\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 11.5px);\n      }\n\n      [copy-row] {\n        display: flex;\n        gap: var(--spacing-medium, 8px);\n        align-items: center;\n      }\n\n      [copy-row] input {\n        flex: 1;\n        min-width: 0;\n      }\n\n      /* Controls in a popup follow the card - pills (CommonPopupStyles holds that only inside the action row). */\n      [copy-row] md-outlined-button {\n        --md-outlined-button-container-height: var(--popup-action-height, 32px);\n        --md-outlined-button-container-shape: var(--popup-control-radius);\n      }\n    `\n  ]\n\n  /** The person: `username` (or `email`), `email`, `name`, `status`. */\n  @property({ type: Object }) user: any\n\n  @state() private mail: boolean = true\n  @state() private issuing: boolean = false\n  @state() private issued?: { link?: string; mailedTo?: string; expiresAt: string }\n  @state() private message: string = ''\n  @state() private copied: boolean = false\n\n  render() {\n    const user = this.user || {}\n\n    return html`\n      <div class=\"body\">\n        <div class=\"what\">${user.name || user.username || user.email} · ${user.email}</div>\n        ${this.issued ? this.renderIssued() : this.renderChoice(user)}\n      </div>\n\n      <ox-popup-actions>\n        ${this.issued\n          ? nothing\n          : html`<md-text-button slot=\"cancel\" @click=${() => this.close()}>${i18next.t('button.cancel')}</md-text-button>`}\n        <!-- Issued, the one thing left is to close: the link cannot be read again, so nothing here takes it back. -->\n        <md-filled-button\n          slot=\"confirm\"\n          ?disabled=${this.issuing}\n          @click=${() => (this.issued ? this.close() : this.issue())}\n        >\n          ${this.issued ? i18next.t('button.close') : i18next.t('button.issue link')}\n        </md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  private renderChoice(user: any) {\n    const waiting = user.status === 'password_reset_required'\n\n    return html`\n      <div class=\"note\">\n        ${waiting\n          ? i18next.t('text.a new link retires the last one')\n          : i18next.t('text.the current password stops and sessions end')}\n        ${i18next.t('text.the link works once for 48 hours and asks for the address')}\n      </div>\n\n      <fieldset ways>\n        <legend>${i18next.t('label.how the link travels')}</legend>\n        <label>\n          <input type=\"radio\" name=\"way\" .checked=${this.mail} @change=${() => (this.mail = true)} />\n          <span>${i18next.t('label.send by mail')}</span>\n          <span desc>${user.email}</span>\n        </label>\n        <label>\n          <input type=\"radio\" name=\"way\" .checked=${!this.mail} @change=${() => (this.mail = false)} />\n          <span>${i18next.t('label.copy the link')}</span>\n          <span desc>${i18next.t('text.hand it over yourself')}</span>\n        </label>\n      </fieldset>\n\n      ${this.message ? html`<div class=\"failure\">${this.message}</div>` : nothing}\n    `\n  }\n\n  private renderIssued() {\n    const { link, mailedTo, expiresAt } = this.issued!\n    const until = new Date(expiresAt).toLocaleString(i18next.language)\n\n    if (mailedTo) {\n      return html`<div class=\"note\">${i18next.t('text.the link was mailed to x until y', { x: mailedTo, y: until })}</div>`\n    }\n\n    return html`\n      <label class=\"field\">\n        <span>${i18next.t('title.password setup link')}</span>\n        <div copy-row>\n          <input name=\"link\" readonly .value=${link || ''} @focus=${(e: Event) => (e.target as HTMLInputElement).select()} />\n          <md-outlined-button @click=${() => this.copy()}>\n            ${this.copied ? i18next.t('button.copied') : i18next.t('button.copy')}\n          </md-outlined-button>\n        </div>\n      </label>\n      <div class=\"note\">${i18next.t('text.this link is shown only now until y', { y: until })}</div>\n    `\n  }\n\n  private async issue() {\n    const username = this.user?.username || this.user?.email\n    if (!username || this.issuing) {\n      return\n    }\n\n    this.issuing = true\n    this.message = ''\n\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($username: String!, $mail: Boolean!) {\n            issuePasswordSetupLink(username: $username, mail: $mail) {\n              link\n              mailedTo\n              expiresAt\n            }\n          }\n        `,\n        variables: { username, mail: this.mail },\n        context: gqlContext()\n      })\n\n      if (response.errors?.length) {\n        this.message = response.errors[0]?.message\n        return\n      }\n\n      this.issued = response.data?.issuePasswordSetupLink\n      this.dispatchEvent(new CustomEvent('password-setup-issued', { bubbles: true, composed: true }))\n    } catch (e: any) {\n      this.message = e?.message || String(e)\n    } finally {\n      this.issuing = false\n    }\n  }\n\n  private async copy() {\n    const link = this.issued?.link\n    if (!link) {\n      return\n    }\n\n    try {\n      await navigator.clipboard.writeText(link)\n      this.copied = true\n    } catch (e) {\n      /* No clipboard (an insecure origin, a refused permission): leave the link selected for the person to copy. */\n      const input = this.renderRoot.querySelector('input[name=link]') as HTMLInputElement | null\n      input?.select()\n    }\n  }\n\n  private close() {\n    this.dispatchEvent(new CustomEvent('close'))\n  }\n}\n\n/**\n * Open the popup for `user`. `onIssued` runs once a link was issued - the account is now waiting, so a list showing\n * its status reads it again.\n */\nexport function openPasswordSetupLink(user: any, { onIssued }: { onIssued?: () => void } = {}) {\n  const popup = openPopup(\n    html`<password-setup-link-popup\n      .user=${user}\n      @close=${() => popup.close()}\n      @password-setup-issued=${() => onIssued?.()}\n    ></password-setup-link-popup>`,\n    {\n      backdrop: true,\n      size: 'medium',\n      title: i18next.t('title.password setup link')\n    }\n  )\n\n  return popup\n}\n"]}

package/dist-client/components/user-detail.d.ts

@@ -1,7 +1,8 @@
 import '@material/web/icon/icon.js';
-import '@material/web/button/elevated-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
 import '@material/web/button/outlined-button.js';
-import '@material/web/checkbox/checkbox.js';
+import '@operato/popup/ox-popup-actions.js';
 import './ownership-transfer-popup.js';
 import { LitElement } from 'lit';
 import type { CSSResultGroup } from 'lit';
@@ -40,15 +41,13 @@ export declare class UserDetail extends UserDetail_base {
     private canManage;
     private canOwn;
     private myEmail;
-    /** 기본 비밀번호가 설정돼 있지 않으면 초기화는 서버에서 던진다 — 단추를 내주지 않는다. */
-    private defaultPasswordConfigured;
     /**
-     * 이 사람의 비밀번호를 이 도메인이 초기화해도 되는가 — 서버 규칙(`password-reset-rule.ts`)의 답.
+     * 이 사람에게 이 도메인이 비밀번호 설정 링크를 발급해도 되는가 — 서버 규칙(`password-reset-rule.ts`)의 답.
      *
      * 비밀번호는 계정 하나에 하나다. 다른 도메인에서도 일하는 사람, 어느 도메인이든 오너인 사람
-     * (수퍼유저 포함)은 이 도메인이 초기화하지 않는다. 기본 비밀번호를 아는 누구나 그 계정을 가져갈 수 있다.
+     * (수퍼유저 포함)의 비밀번호는 이 도메인이 거두지 않는다(ADR-0161 결정 4).
      */
-    private passwordResettable;
+    private setupLinkIssuable;
     /**
      * 이 도메인(과 부모)의 역할 id.
      *
@@ -63,20 +62,17 @@ export declare class UserDetail extends UserDetail_base {
     private get savable();
     render(): import("lit-html").TemplateResult<1>;
     /**
-     * 되돌릴 수 없는 조치.
+     * 되돌릴 수 없는 조치 — 단추 줄의 왼쪽 끝, 빨간 글자(page-standard §8, `ox-popup-actions` 의 `start`).
      *
-     * ── 왜 아래에 따로 두나 ─────────────────────────────────────────────────────
      * 옛 화면은 저장·소유권 이전·초기화·제외·비활성화를 **한 줄에 나란히** 뒀다. 매일 누르는
-     * 「저장」 옆에 한 번 누르면 끝인 「제외」가 같은 크기로 있었다.
-     *
-     * 그래서 선을 하나 긋고, 위는 채운 단추(주 동작), 아래는 테두리 단추로 둔다. 색은
-     * error 짝으로 글자에만 쓴다 — 면을 다 칠하면 「지금 문제가 있다」로 읽힌다.
+     * 「저장」 옆에 한 번 누르면 끝인 「제외」가 같은 크기로 있었다. 단추 줄이 그 거리를 맡는다 —
+     * 저장은 오른쪽 끝, 이것들은 왼쪽 끝이고, 색은 글자에만 쓴다.
      *
      * ── 무엇을 언제 내주나 ──────────────────────────────────────────────────────
      * 조건은 전부 **서버가 실제로 던지는 것**을 그대로 옮긴 것이다. 눌리는 단추를 보여 주고
      * 서버가 거절하면 그것은 안내가 아니라 오류다.
      *
-     *   비밀번호 초기화  기본 비밀번호가 설정돼 있고, 내가 아니다
+     *   비밀번호 설정 링크  서버가 된다고 하고(`mayIssuePasswordSetupLink`), 내가 아니다
      *   소유권 이전      활성 상태고, 소유자가 아니고, 이 도메인에 역할이 하나라도 있다
      *   도메인에서 제외  소유자가 아니고, 내가 아니다
      *
@@ -84,9 +80,9 @@ export declare class UserDetail extends UserDetail_base {
      * `deleteDomainUser` 는 계정을 지우지 않는다 — **이 도메인에서만 뗀다**(서버 설명도 그렇게
      * 적혀 있다). 옛 화면의 「사용자 삭제」는 하지 않는 일을 말하고 있었다.
      */
-    private renderDangerZone;
+    private renderIrreversible;
     /**
-     * 계정 상태와, 그것을 되돌리는 단추.
+     * 계정 상태 한 줄과, 그것을 바꾸는 단추를 그 줄 끝에(page-standard §8 「줄 하나」).
      *
      * **잠금 해제와 활성화는 서버에서 같은 것이다** — `activateUser` 가 `failCount` 를 0 으로
      * 두고 `ACTIVATED` 로 되돌린다. 그래서 부르는 것은 하나이고, **글자만 상황에 맞춰 바꾼다.**
@@ -94,24 +90,19 @@ export declare class UserDetail extends UserDetail_base {
      *
      * 비활성화는 소유자와 나 자신에게는 내주지 않는다. 서버도 같은 것을 막지만
      * (`inactivateUser` 가 소유자·admin 을 거절한다), **화면이 눌리는 단추를 보여 주고 서버가
-     * 거절하면 그것은 안내가 아니라 오류다.**
+     * 거절하면 그것은 안내가 아니라 오류다.** 되돌릴 수 있으므로 빨간 글자가 아니다.
      */
     private renderAccountState;
+    private renderStateAction;
     private renderRoles;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private applyMe;
-    /**
-     * 서버 지시자에 적힌 인자를 그대로 되묻는다.
-     *
-     * 기본 비밀번호 여부도 여기서 함께 읽는다. 서버에 같은 답을 주는 질의가 둘 있는데
-     * (`checkDefaultPassword` 와 `checkResettablePasswordToDefault` — 둘 다
-     * `Boolean(defaultPassword)`), 하나만 쓴다.
-     */
+    /** 서버 지시자에 적힌 인자를 그대로 되묻는다. */
     private checkGates;
     updated(changes: Map<string, unknown>): void;
     /** 관리 권한이 없으면 서버가 이 질의를 거절한다 — 그때도 단추는 없다. */
-    private fetchPasswordResettable;
+    private fetchSetupLinkIssuable;
     /**
      * 부여할 수 있는 역할을 읽는다.
      *
@@ -128,13 +119,12 @@ export declare class UserDetail extends UserDetail_base {
     private onActivate;
     private onInactivate;
     /**
-     * 비밀번호를 기본값으로 되돌린다.
+     * 비밀번호 설정 링크를 발급한다 — 관리자는 비밀번호를 정하지 않는다(ADR-0161).
      *
-     * **무엇이 되는지 사람이 알 수 있게 말한다.** 「초기화하시겠습니까」는 그 뒤에 무엇을 알려
-     * 줘야 하는지를 안 말한다 — 초기화된 비밀번호는 관리자가 상대에게 따로 전해야 한다(서버가
-     * 메일을 보내지 않는다).
+     * 무엇이 일어나는지 · 어떻게 전할지는 그 팝업이 말하고 묻는다. 발급되면 계정이 「설정 대기」가 되므로
+     * 목록을 다시 읽게 알린다(`user-updated`).
      */
-    private onResetPassword;
+    private onPasswordSetup;
     /**
      * 이 도메인에서만 뗀다 — 계정은 남는다.
      *