@things-factory/auth-ui 10.1.215 → 10.1.219

package/dist-client/components/user-detail.js

@@ -1,9 +1,12 @@
 import { __decorate, __metadata } from "tslib";
 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 { statusRenderer } from './user-status-renderer.js';
+import { openPasswordSetupLink } from './password-setup-link-popup.js';
 import gql from 'graphql-tag';
 import { lockedParentRoles } from '../utils/role-origin.js';
 import { css, html, LitElement, nothing } from 'lit';
@@ -13,7 +16,7 @@ import { i18next, localize } from '@operato/i18n';
 import { openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { InheritedValueType, store } from '@operato/shell';
-import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles } from '@operato/styles';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client';
 /**
  * 한 사람의 역할을 고치는 자리.
@@ -68,15 +71,13 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
         this.canManage = false;
         this.canOwn = false;
         this.myEmail = '';
-        /** 기본 비밀번호가 설정돼 있지 않으면 초기화는 서버에서 던진다 — 단추를 내주지 않는다. */
-        this.defaultPasswordConfigured = false;
         /**
-         * 이 사람의 비밀번호를 이 도메인이 초기화해도 되는가 — 서버 규칙(`password-reset-rule.ts`)의 답.
+         * 이 사람에게 이 도메인이 비밀번호 설정 링크를 발급해도 되는가 — 서버 규칙(`password-reset-rule.ts`)의 답.
          *
          * 비밀번호는 계정 하나에 하나다. 다른 도메인에서도 일하는 사람, 어느 도메인이든 오너인 사람
-         * (수퍼유저 포함)은 이 도메인이 초기화하지 않는다. 기본 비밀번호를 아는 누구나 그 계정을 가져갈 수 있다.
+         * (수퍼유저 포함)의 비밀번호는 이 도메인이 거두지 않는다(ADR-0161 결정 4).
          */
-        this.passwordResettable = false;
+        this.setupLinkIssuable = false;
         /**
          * 이 도메인(과 부모)의 역할 id.
          *
@@ -88,36 +89,37 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
         /** The parent domain's roles this person may not change here - locked, with the reason under the list. */
         this.locked = new Set();
     }
+    /*
+     * 팝업의 집 모양을 그대로 쓴다(page-standard §7·§8) — 본문만 스크롤하고 단추 줄은 `ox-popup-actions`
+     * 하나다. 제목은 이 팝업이 무엇인지(사용자 상세 정보)를 말하고, 누구인지는 대상 띠(`.what`)가 말한다.
+     */
     static { this.styles = [
-        ScrollbarStyles,
-        ButtonContainerStyles,
+        CommonPopupStyles,
+        PopupBodyStyles,
+        FormFieldStyles,
         css `
-      :host {
+      /* 상태 한 줄 — 그 줄에 대한 동작은 줄 끝에 둔다(§8 「줄 하나」). */
+      [state-line] {
         display: flex;
-        flex-direction: column;
+        align-items: center;
         gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-large, 12px);
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        overflow: auto;
       }
 
-      [headline] {
-        font: var(--headline-font, inherit);
-        font-size: 1.05rem;
-        font-weight: 600;
+      [state-line] [label],
+      [group-label] {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
       }
 
-      [sub] {
-        color: var(--md-sys-color-on-surface-variant);
-        font-size: 0.85rem;
+      /* 팝업 안의 컨트롤은 담는 카드를 따라 알약이다 — 공용 규칙은 단추 줄 안에만 걸린다. */
+      [state-line] md-outlined-button {
+        margin-left: auto;
+        --md-outlined-button-container-height: var(--popup-action-height, 32px);
+        --md-outlined-button-container-shape: var(--popup-control-radius);
       }
 
-      [section] {
+      [group-label] {
         margin-top: var(--spacing-medium, 8px);
-        color: var(--md-sys-color-on-surface-variant);
-        font-size: 0.8rem;
-        text-transform: capitalize;
       }
 
       ul[roles] {
@@ -132,48 +134,18 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
       ul[roles] li {
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: 5px 2px;
+        gap: var(--spacing-medium, 8px);
+        padding: 3px 0;
       }
 
       ul[roles] li [desc] {
-        color: var(--md-sys-color-on-surface-variant);
-        font-size: 0.8rem;
-      }
-
-      /*
-        색은 짝으로 쓰고, 「무엇이 나를 기다리나」에만 쓴다.
-        소유자 안내는 조치가 필요한 것이 아니라 사실이므로 조용한 면을 쓴다.
-      */
-      [note] {
-        padding: 8px 10px;
-        border-radius: var(--md-sys-shape-corner-small, 6px);
-        font-size: 0.82rem;
-        background-color: var(--md-sys-color-surface-variant);
-        color: var(--md-sys-color-on-surface-variant);
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
       }
 
-      [note][attention] {
-        background-color: var(--md-sys-color-error-container);
-        color: var(--md-sys-color-on-error-container);
-      }
-
-      /*
-        되돌릴 수 없는 조치 — 선으로 갈라 두고, 색은 글자에만 쓴다.
-        면을 error 로 칠하면 「지금 문제가 있다」로 읽힌다.
-      */
-      [danger-zone] {
-        margin-top: var(--spacing-large, 12px);
-        border-top: 1px solid var(--md-sys-color-outline-variant);
-        padding-top: var(--spacing-small, 4px);
-      }
-
-      [danger-zone] md-outlined-button {
-        --md-outlined-button-label-text-color: var(--md-sys-color-error);
-        --md-outlined-button-outline-color: var(--md-sys-color-outline-variant);
-        --md-outlined-button-hover-label-text-color: var(--md-sys-color-error);
-        --md-outlined-button-hover-state-layer-color: var(--md-sys-color-error);
-        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-error);
+      .note md-icon {
+        --md-icon-size: 16px;
+        vertical-align: -3px;
       }
     `
     ]; }
@@ -194,47 +166,44 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
     render() {
         const user = this.user || {};
         return html `
-      <div headline>${user.name || user.username || user.email}</div>
-      <div sub>${user.email}</div>
+      <div class="body">
+        <div class="what">${user.name || user.username || user.email} · ${user.email}</div>
 
-      ${user.owner
-            ? html `<div note>
-              <md-icon style="--md-icon-size: 16px; vertical-align: -3px;">supervisor_account</md-icon>
-              ${i18next.t('text.owner opens everything without a role')}
-            </div>`
+        ${user.owner
+            ? html `<div class="note">
+                <md-icon>supervisor_account</md-icon>
+                ${i18next.t('text.owner opens everything without a role')}
+              </div>`
             : nothing}
-      ${this.renderAccountState(user)}
-
-      <div section>${i18next.t('field.roles')}</div>
-      ${this.renderRoles()}
+        ${this.renderAccountState(user)}
 
-      <div class="button-container">
-        <md-elevated-button ?disabled=${!this.savable} @click=${() => this.onSave()}>
-          ${i18next.t('button.save')}
-        </md-elevated-button>
-        <md-elevated-button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>
-          ${i18next.t('button.cancel')}
-        </md-elevated-button>
+        <div group-label>${i18next.t('field.roles')}</div>
+        ${this.renderRoles()}
       </div>
 
-      ${this.renderDangerZone(user)}
+      <ox-popup-actions>
+        ${this.renderIrreversible(user)}
+        <md-text-button slot="cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>
+          ${i18next.t('button.cancel')}
+        </md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${!this.savable} @click=${() => this.onSave()}>
+          ${i18next.t('button.save')}
+        </md-filled-button>
+      </ox-popup-actions>
     `;
     }
     /**
-     * 되돌릴 수 없는 조치.
+     * 되돌릴 수 없는 조치 — 단추 줄의 왼쪽 끝, 빨간 글자(page-standard §8, `ox-popup-actions` 의 `start`).
      *
-     * ── 왜 아래에 따로 두나 ─────────────────────────────────────────────────────
      * 옛 화면은 저장·소유권 이전·초기화·제외·비활성화를 **한 줄에 나란히** 뒀다. 매일 누르는
-     * 「저장」 옆에 한 번 누르면 끝인 「제외」가 같은 크기로 있었다.
-     *
-     * 그래서 선을 하나 긋고, 위는 채운 단추(주 동작), 아래는 테두리 단추로 둔다. 색은
-     * error 짝으로 글자에만 쓴다 — 면을 다 칠하면 「지금 문제가 있다」로 읽힌다.
+     * 「저장」 옆에 한 번 누르면 끝인 「제외」가 같은 크기로 있었다. 단추 줄이 그 거리를 맡는다 —
+     * 저장은 오른쪽 끝, 이것들은 왼쪽 끝이고, 색은 글자에만 쓴다.
      *
      * ── 무엇을 언제 내주나 ──────────────────────────────────────────────────────
      * 조건은 전부 **서버가 실제로 던지는 것**을 그대로 옮긴 것이다. 눌리는 단추를 보여 주고
      * 서버가 거절하면 그것은 안내가 아니라 오류다.
      *
-     *   비밀번호 초기화  기본 비밀번호가 설정돼 있고, 내가 아니다
+     *   비밀번호 설정 링크  서버가 된다고 하고(`mayIssuePasswordSetupLink`), 내가 아니다
      *   소유권 이전      활성 상태고, 소유자가 아니고, 이 도메인에 역할이 하나라도 있다
      *   도메인에서 제외  소유자가 아니고, 내가 아니다
      *
@@ -242,42 +211,36 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
      * `deleteDomainUser` 는 계정을 지우지 않는다 — **이 도메인에서만 뗀다**(서버 설명도 그렇게
      * 적혀 있다). 옛 화면의 「사용자 삭제」는 하지 않는 일을 말하고 있었다.
      */
-    renderDangerZone(user) {
+    renderIrreversible(user) {
         const me = this.myEmail && user.email === this.myEmail;
-        const resettable = this.canManage && this.defaultPasswordConfigured && this.passwordResettable && !me;
+        const resettable = this.canManage && this.setupLinkIssuable && !me;
         const transferable = this.canOwn &&
             !user.owner &&
             user.status === 'activated' &&
             (user.roles || []).some((role) => this.domainRoleIds.has(role.id));
         const removable = this.canManage && !user.owner && !me;
-        if (!resettable && !transferable && !removable) {
-            return nothing;
-        }
         return html `
-      <div danger-zone>
-        <div section>${i18next.t('text.cannot be undone')}</div>
-        <div class="button-container">
-          ${resettable
-            ? html `<md-outlined-button @click=${() => this.onResetPassword()}>
-                  ${i18next.t('title.reset password')}
-                </md-outlined-button>`
+      ${resettable
+            ? html `<md-text-button slot="start" destructive @click=${() => this.onPasswordSetup()}>
+              ${user.status === 'password_reset_required'
+                ? i18next.t('button.reissue setup link')
+                : i18next.t('button.password reset link')}
+            </md-text-button>`
             : nothing}
-          ${transferable
-            ? html `<md-outlined-button @click=${() => this.onTransfer()}>
-                  ${i18next.t('button.transfer owner')}
-                </md-outlined-button>`
+      ${transferable
+            ? html `<md-text-button slot="start" destructive @click=${() => this.onTransfer()}>
+              ${i18next.t('button.transfer owner')}
+            </md-text-button>`
             : nothing}
-          ${removable
-            ? html `<md-outlined-button @click=${() => this.onRemoveFromDomain()}>
-                  ${i18next.t('button.remove from domain')}
-                </md-outlined-button>`
+      ${removable
+            ? html `<md-text-button slot="start" destructive @click=${() => this.onRemoveFromDomain()}>
+              ${i18next.t('button.remove from domain')}
+            </md-text-button>`
             : nothing}
-        </div>
-      </div>
     `;
     }
     /**
-     * 계정 상태와, 그것을 되돌리는 단추.
+     * 계정 상태 한 줄과, 그것을 바꾸는 단추를 그 줄 끝에(page-standard §8 「줄 하나」).
      *
      * **잠금 해제와 활성화는 서버에서 같은 것이다** — `activateUser` 가 `failCount` 를 0 으로
      * 두고 `ACTIVATED` 로 되돌린다. 그래서 부르는 것은 하나이고, **글자만 상황에 맞춰 바꾼다.**
@@ -285,61 +248,66 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
      *
      * 비활성화는 소유자와 나 자신에게는 내주지 않는다. 서버도 같은 것을 막지만
      * (`inactivateUser` 가 소유자·admin 을 거절한다), **화면이 눌리는 단추를 보여 주고 서버가
-     * 거절하면 그것은 안내가 아니라 오류다.**
+     * 거절하면 그것은 안내가 아니라 오류다.** 되돌릴 수 있으므로 빨간 글자가 아니다.
      */
     renderAccountState(user) {
-        const status = user.status;
         if (!this.canManage) {
             return nothing;
         }
+        return html `
+      <div state-line>
+        <span label>${i18next.t('field.status')}</span>
+        ${statusRenderer(() => 0)(user.status, null, user)} ${this.renderStateAction(user)}
+      </div>
+    `;
+    }
+    renderStateAction(user) {
+        const status = user.status;
         if (status === 'locked') {
-            return html `<div class="button-container">
-        <md-elevated-button @click=${() => this.onActivate()}> ${i18next.t('button.unlock')} </md-elevated-button>
-      </div>`;
+            return html `<md-outlined-button @click=${() => this.onActivate()}>${i18next.t('button.unlock')}</md-outlined-button>`;
+        }
+        /* 설정 대기는 활성화로 열리지 않는다 — 본인이 설정 링크로 연다(단추 줄의 설정 링크). */
+        if (status === 'password_reset_required') {
+            return nothing;
         }
         if (status !== 'activated') {
-            return html `<div class="button-container">
-        <md-elevated-button @click=${() => this.onActivate()}> ${i18next.t('button.activate')} </md-elevated-button>
-      </div>`;
+            return html `<md-outlined-button @click=${() => this.onActivate()}>${i18next.t('button.activate')}</md-outlined-button>`;
         }
         /* 활성 상태 — 되돌릴 수 있는 사람에게만, 그리고 자기 자신과 소유자에게는 안 준다. */
         if (user.owner || (this.myEmail && user.email === this.myEmail)) {
             return nothing;
         }
-        return html `<div class="button-container">
-      <md-elevated-button danger @click=${() => this.onInactivate()}>
-        ${i18next.t('button.deactivate')}
-      </md-elevated-button>
-    </div>`;
+        return html `<md-outlined-button @click=${() => this.onInactivate()}>${i18next.t('button.deactivate')}</md-outlined-button>`;
     }
     renderRoles() {
         if (this.loading) {
-            return html `<div sub>${i18next.t('text.loading')}</div>`;
+            return html `<div class="note">${i18next.t('text.loading')}</div>`;
         }
         if (!this.availableRoles.length) {
             /*
              * 「역할이 없다」와 「못 읽었다」는 다른 말이다. 여기까지 왔다는 것은 읽었다는 뜻이므로
-             * 없는 것이 맞고, 그때는 무엇을 해야 하는지를 말한다.
+             * 없는 것이 맞고, 그때는 무엇을 해야 하는지를 말한다. 저장을 막고 있으므로 실패 모양이다.
              */
-            return html `<div note attention>${i18next.t('text.no role defined in this domain')}</div>`;
+            return html `<div class="failure">${i18next.t('text.no role defined in this domain')}</div>`;
         }
         return html `
       <ul roles>
         ${this.availableRoles.map(role => html `
             <li>
-              <md-checkbox
+              <input
+                type="checkbox"
                 id="role-${role.id}"
                 .checked=${this.selected.has(role.id)}
                 ?disabled=${this.locked.has(role.id)}
                 @change=${(e) => this.onToggle(role.id, e.target.checked)}
-              ></md-checkbox>
+              />
               <label for="role-${role.id}">${role.name}</label>
               ${role.description ? html `<span desc>${role.description}</span>` : nothing}
             </li>
           `)}
       </ul>
       ${this.availableRoles.some(role => this.locked.has(role.id))
-            ? html `<div note>${i18next.t('text.parent roles are changed by the parent domain')}</div>`
+            ? html `<div class="note">${i18next.t('text.parent roles are changed by the parent domain')}</div>`
             : nothing}
     `;
     }
@@ -357,36 +325,21 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
         const me = store.getState().auth?.user || {};
         this.myEmail = me.email || '';
     }
-    /**
-     * 서버 지시자에 적힌 인자를 그대로 되묻는다.
-     *
-     * 기본 비밀번호 여부도 여기서 함께 읽는다. 서버에 같은 답을 주는 질의가 둘 있는데
-     * (`checkDefaultPassword` 와 `checkResettablePasswordToDefault` — 둘 다
-     * `Boolean(defaultPassword)`), 하나만 쓴다.
-     */
+    /** 서버 지시자에 적힌 인자를 그대로 되묻는다. */
     async checkGates() {
         this.canManage = Boolean(await hasPrivilege({ category: 'user', privilege: 'mutation', domainOwnerGranted: true }));
         this.canOwn = Boolean(await hasPrivilege({ domainOwnerGranted: true, superUserGranted: true }));
-        const response = await client.query({
-            query: gql `
-        query {
-          checkDefaultPassword
-        }
-      `,
-            context: gqlContext()
-        });
-        this.defaultPasswordConfigured = Boolean(response.data?.checkDefaultPassword);
     }
     updated(changes) {
         if (changes.has('user')) {
             this.fetch();
-            this.fetchPasswordResettable();
+            this.fetchSetupLinkIssuable();
         }
     }
     /** 관리 권한이 없으면 서버가 이 질의를 거절한다 — 그때도 단추는 없다. */
-    async fetchPasswordResettable() {
+    async fetchSetupLinkIssuable() {
         const id = this.user?.id;
-        this.passwordResettable = false;
+        this.setupLinkIssuable = false;
         if (!id) {
             return;
         }
@@ -394,16 +347,16 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
             const response = await client.query({
                 query: gql `
           query ($id: String!) {
-            mayResetPasswordToDefault(id: $id)
+            mayIssuePasswordSetupLink(id: $id)
           }
         `,
                 variables: { id },
                 context: gqlContext()
             });
-            this.passwordResettable = this.user?.id === id && response.data?.mayResetPasswordToDefault === true;
+            this.setupLinkIssuable = this.user?.id === id && response.data?.mayIssuePasswordSetupLink === true;
         }
         catch (e) {
-            this.passwordResettable = false;
+            this.setupLinkIssuable = false;
         }
     }
     /**
@@ -481,36 +434,15 @@ let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
     `);
     }
     /**
-     * 비밀번호를 기본값으로 되돌린다.
+     * 비밀번호 설정 링크를 발급한다 — 관리자는 비밀번호를 정하지 않는다(ADR-0161).
      *
-     * **무엇이 되는지 사람이 알 수 있게 말한다.** 「초기화하시겠습니까」는 그 뒤에 무엇을 알려
-     * 줘야 하는지를 안 말한다 — 초기화된 비밀번호는 관리자가 상대에게 따로 전해야 한다(서버가
-     * 메일을 보내지 않는다).
+     * 무엇이 일어나는지 · 어떻게 전할지는 그 팝업이 말하고 묻는다. 발급되면 계정이 「설정 대기」가 되므로
+     * 목록을 다시 읽게 알린다(`user-updated`).
      */
-    async onResetPassword() {
-        const confirmed = await OxPrompt.open({
-            type: 'warning',
-            title: i18next.t('title.reset password'),
-            text: i18next.t('text.password becomes the default and must be told to them'),
-            confirmButton: { text: i18next.t('button.confirm') },
-            cancelButton: { text: i18next.t('button.cancel') }
+    onPasswordSetup() {
+        openPasswordSetupLink(this.user, {
+            onIssued: () => this.dispatchEvent(new CustomEvent('user-updated', { detail: this.user, bubbles: true, composed: true }))
         });
-        if (!confirmed) {
-            return;
-        }
-        const done = await this.runUserMutation(gql `
-        mutation ($username: String!) {
-          resetPasswordToDefault(username: $username)
-        }
-      `, { notify: false });
-        if (done) {
-            await OxPrompt.open({
-                type: 'success',
-                title: i18next.t('text.completed'),
-                text: i18next.t('text.password reset succeed'),
-                confirmButton: { text: i18next.t('button.confirm') }
-            });
-        }
     }
     /**
      * 이 도메인에서만 뗀다 — 계정은 남는다.
@@ -665,11 +597,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Boolean)
-], UserDetail.prototype, "defaultPasswordConfigured", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], UserDetail.prototype, "passwordResettable", void 0);
+], UserDetail.prototype, "setupLinkIssuable", void 0);
 __decorate([
     state(),
     __metadata("design:type", Set)