@things-factory/auth-ui 10.1.4 → 10.1.7

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

@@ -0,0 +1,631 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/checkbox/checkbox.js';
+import './ownership-transfer-popup.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 { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { InheritedValueType, store } from '@operato/shell';
+import { ButtonContainerStyles } from '@operato/styles';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
+/**
+ * 한 사람의 역할을 고치는 자리.
+ *
+ * ── 담는 그릇을 모른다 ──────────────────────────────────────────────────────
+ * 팝업이든 서랍이든 그 안에 들어간다. 그래서 여기서는 **아무것도 열거나 닫지 않고** 두 가지만
+ * 알린다 — 저장이 끝났다(`user-updated`), 닫아 달라(`close`). 그릇이 어느 것이 될지는 아직
+ * 정해지지 않았고, 그 결정이 이 파일을 바꾸지 않게 한다.
+ *
+ * ── 옛 화면이 하던 것 (`components/user-role-editor.ts`) ────────────────────
+ * 저장할 때 `querySelectorAll('role-selector')` 로 **화면을 훑어** 「가능한 역할 전부」와
+ * 「고른 역할」을 만들어 보냈다.
+ *
+ * `updateUserRoles` 의 계약은 이렇다 — `availableRoles` 는 **부르는 쪽이 책임지는 범위**이고,
+ * 그 범위 안의 역할을 일단 다 뗀 다음 `selectedRoles` 를 다시 붙인다. 범위 밖의 역할은
+ * 건드리지 않는다(`user-mutation.ts` 의 `updateUserRoles`).
+ *
+ * 계약 자체는 옳다 — 화면이 일부만 편집할 수 있게 해 준다. 잘못된 것은 **그 범위를 DOM 에서
+ * 만든 것**이다. 목록이 늦게 오거나 잘려 있으면 화면은 그것을 모른 채 좁은 범위를 보내고,
+ * 안 보낸 역할이 어떻게 되는지가 그날의 렌더링에 달린다.
+ *
+ * 여기서는 범위를 **상태에서** 만든다. 읽어 온 목록이 곧 범위이고, 아직 못 읽었으면 저장하지
+ * 않는다.
+ */
+let UserDetail = class UserDetail extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.availableRoles = [];
+        this.selected = new Set();
+        this.loading = true;
+        this.saving = false;
+        /*
+         * **내가 이 도메인에서 무엇을 할 수 있나 — 서버 선언을 그대로 되묻는다.**
+         *
+         * `/auth/profile` 이 `privileges`·`owner`·`super` 를 전부 담아 주고, `hasPrivilege`
+         * (`auth-base/client/profiled.ts`)가 서버의 `checkPermission` 과 같은 규칙으로 그것을 판정한다
+         * — 안전하지 않은 IP 에서 소유권 우회를 빼는 것까지 같다. 그래서 **서버 지시자에 적힌 인자를
+         * 그대로 넘기는 것**이 화면과 문을 어긋나지 않게 하는 방법이다.
+         *
+         * 옛 화면은 이것을 두고 `me.email === domainOwner.email` 로 판정했다 — 목록에서 뽑은 대표
+         * 소유자 한 명과 견주는 것이라 **공동 소유자가 자기 권한을 잃었고**, `user:mutation` 을 역할로
+         * 받은 사람은 아예 단추를 못 봤다.
+         *
+         * 둘이 다른 선언을 쓴다.
+         *
+         *   활성/비활성·초기화·제외  user:mutation + domainOwnerGranted
+         *   소유권 이전              domainOwnerGranted + superUserGranted  (권한 쌍이 없다)
+         *
+         * ⚠ 수퍼유저가 자동으로 다 통과하지 않는다 — `checkPermission` 은 지시자가
+         * `superUserGranted` 를 선언한 곳에서만 그것을 본다. 그래서 위 둘을 뭉치면 안 된다.
+         */
+        this.canManage = false;
+        this.canOwn = false;
+        this.myEmail = '';
+        /** 기본 비밀번호가 설정돼 있지 않으면 초기화는 서버에서 던진다 — 단추를 내주지 않는다. */
+        this.defaultPasswordConfigured = false;
+        /**
+         * 이 도메인(과 부모)의 역할 id.
+         *
+         * 소유권 이전은 **받는 사람이 이 도메인에 역할을 하나라도 가질 때만** 된다
+         * (`transferOwner` 가 상속 역할까지 자격으로 인정하고, 그 밖은 던진다). 파트너십으로 넘어온
+         * 역할은 자격이 아니므로 `availableRoles`(합친 것)로는 판정할 수 없다.
+         */
+        this.domainRoleIds = new Set();
+    }
+    static { this.styles = [
+        ButtonContainerStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        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;
+      }
+
+      [sub] {
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.85rem;
+      }
+
+      [section] {
+        margin-top: var(--spacing-medium, 8px);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.8rem;
+        text-transform: capitalize;
+      }
+
+      ul[roles] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      ul[roles] li {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 5px 2px;
+      }
+
+      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);
+      }
+
+      [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);
+      }
+    `
+    ]; }
+    /*
+     * **저장할 수 있나 — 단추와 처리기가 같은 답을 본다.**
+     *
+     * 셋을 갈라야 한다. 화면에서 갈라 놓고 저장에서 뭉치면, 「아직 못 읽었다」와 「읽었는데
+     * 역할이 없다」가 똑같이 **눌러도 아무 일이 없는 단추**가 된다. 그것이 조용히 되돌아가는
+     * 자리이고, 사람은 저장이 됐는지 안 됐는지 알 수 없다.
+     *
+     *   못 읽었다        아직 범위를 모른다 — 눌리면 안 된다
+     *   역할이 0개        보낼 것이 없다 — 눌리면 안 되고, 무엇을 해야 하는지는 목록 자리가 말한다
+     *   읽었고 있다       저장한다
+     */
+    get savable() {
+        return !this.loading && !this.saving && this.availableRoles.length > 0;
+    }
+    render() {
+        const user = this.user || {};
+        return html `
+      <div headline>${user.name || user.username || user.email}</div>
+      <div sub>${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>`
+            : nothing}
+      ${this.renderAccountState(user)}
+
+      <div section>${i18next.t('field.roles')}</div>
+      ${this.renderRoles()}
+
+      <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>
+
+      ${this.renderDangerZone(user)}
+    `;
+    }
+    /**
+     * 되돌릴 수 없는 조치.
+     *
+     * ── 왜 아래에 따로 두나 ─────────────────────────────────────────────────────
+     * 옛 화면은 저장·소유권 이전·초기화·제외·비활성화를 **한 줄에 나란히** 뒀다. 매일 누르는
+     * 「저장」 옆에 한 번 누르면 끝인 「제외」가 같은 크기로 있었다.
+     *
+     * 그래서 선을 하나 긋고, 위는 채운 단추(주 동작), 아래는 테두리 단추로 둔다. 색은
+     * error 짝으로 글자에만 쓴다 — 면을 다 칠하면 「지금 문제가 있다」로 읽힌다.
+     *
+     * ── 무엇을 언제 내주나 ──────────────────────────────────────────────────────
+     * 조건은 전부 **서버가 실제로 던지는 것**을 그대로 옮긴 것이다. 눌리는 단추를 보여 주고
+     * 서버가 거절하면 그것은 안내가 아니라 오류다.
+     *
+     *   비밀번호 초기화  기본 비밀번호가 설정돼 있고, 내가 아니다
+     *   소유권 이전      활성 상태고, 소유자가 아니고, 이 도메인에 역할이 하나라도 있다
+     *   도메인에서 제외  소유자가 아니고, 내가 아니다
+     *
+     * ── 이름 ────────────────────────────────────────────────────────────────────
+     * `deleteDomainUser` 는 계정을 지우지 않는다 — **이 도메인에서만 뗀다**(서버 설명도 그렇게
+     * 적혀 있다). 옛 화면의 「사용자 삭제」는 하지 않는 일을 말하고 있었다.
+     */
+    renderDangerZone(user) {
+        const me = this.myEmail && user.email === this.myEmail;
+        const resettable = this.canManage && this.defaultPasswordConfigured && !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>`
+            : nothing}
+          ${transferable
+            ? html `<md-outlined-button @click=${() => this.onTransfer()}>
+                ${i18next.t('button.transfer owner')}
+              </md-outlined-button>`
+            : nothing}
+          ${removable
+            ? html `<md-outlined-button @click=${() => this.onRemoveFromDomain()}>
+                ${i18next.t('button.remove from domain')}
+              </md-outlined-button>`
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * 계정 상태와, 그것을 되돌리는 단추.
+     *
+     * **잠금 해제와 활성화는 서버에서 같은 것이다** — `activateUser` 가 `failCount` 를 0 으로
+     * 두고 `ACTIVATED` 로 되돌린다. 그래서 부르는 것은 하나이고, **글자만 상황에 맞춰 바꾼다.**
+     * 잠긴 사람에게 「활성화」라고 하면 무슨 일이 일어나는지 알 수 없다.
+     *
+     * 비활성화는 소유자와 나 자신에게는 내주지 않는다. 서버도 같은 것을 막지만
+     * (`inactivateUser` 가 소유자·admin 을 거절한다), **화면이 눌리는 단추를 보여 주고 서버가
+     * 거절하면 그것은 안내가 아니라 오류다.**
+     */
+    renderAccountState(user) {
+        const status = user.status;
+        if (!this.canManage) {
+            return nothing;
+        }
+        if (status === 'locked') {
+            return html `<div class="button-container">
+        <md-elevated-button @click=${() => this.onActivate()}> ${i18next.t('button.unlock')} </md-elevated-button>
+      </div>`;
+        }
+        if (status !== 'activated') {
+            return html `<div class="button-container">
+        <md-elevated-button @click=${() => this.onActivate()}> ${i18next.t('button.activate')} </md-elevated-button>
+      </div>`;
+        }
+        /* 활성 상태 — 되돌릴 수 있는 사람에게만, 그리고 자기 자신과 소유자에게는 안 준다. */
+        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>`;
+    }
+    renderRoles() {
+        if (this.loading) {
+            return html `<div sub>${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 `
+      <ul roles>
+        ${this.availableRoles.map(role => html `
+            <li>
+              <md-checkbox
+                id="role-${role.id}"
+                .checked=${this.selected.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>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.applyMe();
+        this.unsubscribe = store.subscribe(() => this.applyMe());
+        this.checkGates();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribe?.();
+    }
+    applyMe() {
+        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();
+        }
+    }
+    /**
+     * 부여할 수 있는 역할을 읽는다.
+     *
+     * **이 사람이 지금 가진 역할은 다시 묻지 않는다** — 목록이 이미 실어 왔다(`user.roles`).
+     * 옛 화면은 email 로 사용자를 다시 찾았는데, 역할 이름과 달리 email 은 유일하긴 해도
+     * 손에 든 `id` 를 두고 다른 열쇠로 같은 사람을 찾는 것이었다. 안 물으면 그 문제가 없다.
+     *
+     * **이 도메인의 역할과 파트너십으로 넘어온 역할을 한 목록으로 합친다.** 옛 화면은 그 둘을
+     * 따로 그리고 저장할 때 화면에서 다시 모았는데, 합치는 자리가 화면이면 화면이 못 그린 것은
+     * 저장에서도 빠진다.
+     */
+    async fetch() {
+        const user = this.user;
+        if (!user?.id) {
+            return;
+        }
+        this.loading = true;
+        const response = await client.query({
+            query: gql `
+        query ($inherited: InheritedValueType) {
+          roles(inherited: $inherited) {
+            items {
+              id
+              name
+              description
+            }
+          }
+          grantedRoles {
+            role {
+              id
+              name
+              description
+            }
+          }
+        }
+      `,
+            variables: { inherited: InheritedValueType.Include },
+            context: gqlContext()
+        });
+        const roles = response.data?.roles?.items || [];
+        const granted = (response.data?.grantedRoles || []).map((g) => g.role).filter(Boolean);
+        /* 같은 역할이 두 경로로 올 수 있다 — id 로 한 번만 담는다. */
+        const byId = new Map();
+        for (const role of [...roles, ...granted]) {
+            byId.set(role.id, role);
+        }
+        this.availableRoles = [...byId.values()];
+        /* 소유권 이전 자격은 **이 도메인(과 부모)의 역할**만 인정한다 — 합친 목록으로는 못 본다. */
+        this.domainRoleIds = new Set(roles.map((role) => role.id));
+        this.selected = new Set((user.roles || []).map((r) => r.id));
+        this.loading = false;
+    }
+    /** 잠금 해제와 활성화가 같은 부름이다 — 서버가 `failCount` 도 0 으로 되돌린다. */
+    async onActivate() {
+        await this.runUserMutation(gql `
+      mutation ($username: String!) {
+        activateUser(username: $username)
+      }
+    `);
+    }
+    async onInactivate() {
+        await this.runUserMutation(gql `
+      mutation ($username: String!) {
+        inactivateUser(username: $username)
+      }
+    `);
+    }
+    /**
+     * 비밀번호를 기본값으로 되돌린다.
+     *
+     * **무엇이 되는지 사람이 알 수 있게 말한다.** 「초기화하시겠습니까」는 그 뒤에 무엇을 알려
+     * 줘야 하는지를 안 말한다 — 초기화된 비밀번호는 관리자가 상대에게 따로 전해야 한다(서버가
+     * 메일을 보내지 않는다).
+     */
+    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') }
+        });
+        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') }
+            });
+        }
+    }
+    /**
+     * 이 도메인에서만 뗀다 — 계정은 남는다.
+     *
+     * 그래서 확인 문구도 「지웁니다」가 아니다. 이 사람은 다른 도메인에서 계속 일할 수 있고,
+     * 다시 부르면 된다.
+     */
+    async onRemoveFromDomain() {
+        const user = this.user || {};
+        const confirmed = await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.remove from domain'),
+            text: i18next.t('text.they lose access to this domain but keep the account'),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (!confirmed) {
+            return;
+        }
+        const done = await this.runUserMutation(gql `
+      mutation ($username: String!) {
+        deleteDomainUser(username: $username)
+      }
+    `);
+        if (done) {
+            /* 이 사람은 이제 목록에 없다 — 상세를 열어 둘 이유가 없다. */
+            this.dispatchEvent(new CustomEvent('close'));
+        }
+    }
+    /**
+     * 소유권을 넘긴다.
+     *
+     * 이미 있는 `ownership-transfer-popup` 을 그대로 쓴다 — 그 안에 **이메일을 다시 적게 하는**
+     * 확인이 들어 있다. 되돌릴 수 없는 것 중에서 유일하게 두 단계인 것이고, 그 판단이 맞다.
+     */
+    onTransfer() {
+        const popup = openPopup(html `<ownership-transfer-popup
+        .user=${this.user}
+        @ownershipTransferred=${() => {
+            popup.close();
+            this.dispatchEvent(new CustomEvent('user-updated', { detail: this.user, bubbles: true, composed: true }));
+        }}
+      ></ownership-transfer-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.owner_transfer')
+        });
+    }
+    async runUserMutation(mutation, { notify = true } = {}) {
+        const username = this.user?.username || this.user?.email;
+        if (!username || this.saving) {
+            return false;
+        }
+        this.saving = true;
+        try {
+            const response = await client.mutate({ mutation, variables: { username }, context: gqlContext() });
+            if (response.errors) {
+                return false;
+            }
+            /*
+             * 비밀번호 초기화만 목록을 바꾸지 않는다 — 상태도 역할도 그대로다. 그때 목록을 다시
+             * 읽으면 아무것도 안 달라진 화면이 깜빡이고, 사람은 뭐가 됐는지 더 모르게 된다.
+             */
+            if (notify) {
+                this.dispatchEvent(new CustomEvent('user-updated', { detail: this.user, bubbles: true, composed: true }));
+            }
+            return true;
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+    onToggle(id, checked) {
+        const next = new Set(this.selected);
+        checked ? next.add(id) : next.delete(id);
+        this.selected = next;
+    }
+    /**
+     * **범위를 상태에서 만든다.** 읽어 온 목록이 곧 `availableRoles` 다.
+     *
+     * 빈 범위를 보내면 서버는 「뗄 것이 없다」로 읽어 아무것도 안 한다 — 우연히 무해한 것이지
+     * 뜻한 바가 아니므로, 그 경우는 여기까지 오지 않는다(`savable`).
+     */
+    async onSave() {
+        /* 단추가 이미 막고 있다 — 여기 걸리면 단추와 이 자리가 어긋난 것이다. */
+        if (!this.savable) {
+            return;
+        }
+        const user = this.user;
+        const username = user?.username || user?.email;
+        if (!username) {
+            return;
+        }
+        this.saving = true;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($username: String!, $availableRoles: [ObjectRef!]!, $selectedRoles: [ObjectRef!]!) {
+            updateUserRoles(username: $username, availableRoles: $availableRoles, selectedRoles: $selectedRoles) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    username,
+                    availableRoles: this.availableRoles.map(role => ({ id: role.id })),
+                    selectedRoles: this.availableRoles.filter(role => this.selected.has(role.id)).map(role => ({ id: role.id }))
+                },
+                context: gqlContext()
+            });
+            if (!response.errors) {
+                this.dispatchEvent(new CustomEvent('user-updated', { detail: user, bubbles: true, composed: true }));
+            }
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], UserDetail.prototype, "user", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], UserDetail.prototype, "availableRoles", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Set)
+], UserDetail.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], UserDetail.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], UserDetail.prototype, "saving", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], UserDetail.prototype, "canManage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], UserDetail.prototype, "canOwn", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], UserDetail.prototype, "myEmail", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], UserDetail.prototype, "defaultPasswordConfigured", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Set)
+], UserDetail.prototype, "domainRoleIds", void 0);
+UserDetail = __decorate([
+    customElement('user-detail')
+], UserDetail);
+export { UserDetail };
+//# sourceMappingURL=user-detail.js.map