@things-factory/auth-ui 7.0.0-alpha.8 → 7.0.0

package/dist-client/pages/profile.js.map

@@ -1 +1 @@
-{"version":3,"file":"profile.js","sourceRoot":"","sources":["../../client/pages/profile.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAY1D,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;SACtC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,2CAA2C,CAAA;IACxD,CAAC;;AAnBM,kBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;KAMF;CACF,CAAA;AAVU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAqBvB;SArBY,WAAW","sourcesContent":["import '../components/profile-component'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('auth-profile')\nexport class AuthProfile extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        background-color: var(--main-section-background-color);\n        overflow-y: auto;\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: i18next.t('text.auth profile')\n    }\n  }\n\n  render() {\n    return html` <profile-component></profile-component> `\n  }\n}\n"]}
+{"version":3,"file":"profile.js","sourceRoot":"","sources":["../../client/pages/profile.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAY1D,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;SACtC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,2CAA2C,CAAA;IACxD,CAAC;;AAnBM,kBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;KAMF;CACF,AATY,CASZ;AAVU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAqBvB","sourcesContent":["import '../components/profile-component'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('auth-profile')\nexport class AuthProfile extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        background-color: var(--md-sys-color-background);\n        overflow-y: auto;\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: i18next.t('text.auth profile')\n    }\n  }\n\n  render() {\n    return html` <profile-component></profile-component> `\n  }\n}\n"]}

package/dist-client/pages/role/role-management.js

@@ -9,7 +9,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin.js';
 import { client, gqlContext } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
-import { PageView, store } from '@operato/shell';
+import { InheritedValueType, PageView, store } from '@operato/shell';
 let RoleManagement = class RoleManagement extends connect(store)(PageView) {
     constructor() {
         super(...arguments);
@@ -38,8 +38,8 @@ let RoleManagement = class RoleManagement extends connect(store)(PageView) {
         <quick-find-list
           .data="${data}"
           .openHeaderRenderer=${role => html `
-              <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
-            `}
+            <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
+          `}
           .contentRenderer="${(role, _currentTabKey) => html `
             <role-privilege-editor
               .updateRoleObj=${this.updateRoleObj || {}}
@@ -64,8 +64,8 @@ let RoleManagement = class RoleManagement extends connect(store)(PageView) {
     async fetchRoles() {
         const response = await client.query({
             query: gql `
-        query roles($sortings: [Sorting!]) {
-          roles(sortings: $sortings) {
+        query roles($sortings: [Sorting!], $inherited: InheritedValueType) {
+          roles(sortings: $sortings, inherited: $inherited) {
             items {
               id
               name
@@ -79,7 +79,10 @@ let RoleManagement = class RoleManagement extends connect(store)(PageView) {
           }
         }
       `,
-            variables: { sortings: [{ name: 'name' }] },
+            variables: {
+                sortings: [{ name: 'name' }],
+                inherited: InheritedValueType.Only
+            },
             context: gqlContext()
         });
         return response.data.roles.items;
@@ -90,8 +93,8 @@ RoleManagement.styles = [
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
@@ -108,11 +111,11 @@ RoleManagement.styles = [
       #roles-privileges {
         flex: 1;
         display: flex;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         max-width: var(--content-container-max-width);
         flex-direction: row;
         overflow: auto;
-        border-top: var(--border-dark-color);
+        border-top: var(--border-dim-color);
       }
     `
 ];

package/dist-client/pages/role/role-management.js.map

@@ -1 +1 @@
-{"version":3,"file":"role-management.js","sourceRoot":"","sources":["../../../client/pages/role/role-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/component-ui'\nimport '../../components/create-role'\nimport '../../components/role-edit-form'\nimport '../../components/role-privilege-editor'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { PageView, store } from '@operato/shell'\n\n@customElement('role-management')\nclass RoleManagement extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n        overflow: auto;\n      }\n\n      [subtitle] {\n        padding: var(--subtitle-padding);\n        font: var(--subtitle-font);\n        color: var(--subtitle-text-color);\n      }\n\n      input {\n        display: block;\n      }\n\n      #roles-privileges {\n        flex: 1;\n        display: flex;\n        margin-top: var(--margin-default);\n        max-width: var(--content-container-max-width);\n        flex-direction: row;\n        overflow: auto;\n        border-top: var(--border-dark-color);\n      }\n    `\n  ]\n\n  @property({ type: String }) title: string = ''\n  @property({ type: Object }) role: any\n  @property({ type: Array }) roles: any[] = []\n  @property({ type: Object }) updateRoleObj: any\n\n  get context() {\n    return {\n      title: i18next.t('text.role_management'),\n      help: 'auth/roles'\n    }\n  }\n\n  render() {\n    const data = {\n      roles: this.roles || []\n    }\n\n    return html`\n      <create-role\n        @fetch-roles=${async () => {\n          this.roles = await this.fetchRoles()\n        }}\n      ></create-role>\n\n      <div subtitle>${i18next.t('text.registered roles')}</div>\n      <div id=\"roles-privileges\">\n        <quick-find-list\n          .data=\"${data}\"\n          .openHeaderRenderer=${role =>\n            html`\n              <role-edit-form .role=\"${role}\" @roleChanged=\"${e => (this.updateRoleObj = e.detail)}\"></role-edit-form>\n            `}\n          .contentRenderer=\"${(role, _currentTabKey) => html`\n            <role-privilege-editor\n              .updateRoleObj=${this.updateRoleObj || {}}\n              .role=${role}\n              @fetch-roles=${async () => {\n                this.roles = await this.fetchRoles()\n                await this.updateComplete\n                this.quickFindList.openByKey(role.id)\n              }}\n            ></role-privilege-editor>\n          `}\"\n        ></quick-find-list>\n      </div>\n    `\n  }\n\n  @query('quick-find-list') quickFindList!: HTMLElement & { openByKey: (roleId: string) => void }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.roles = await this.fetchRoles()\n      this.role = this.roles && this.roles[0]\n    }\n  }\n\n  async fetchRoles() {\n    const response = await client.query({\n      query: gql`\n        query roles($sortings: [Sorting!]) {\n          roles(sortings: $sortings) {\n            items {\n              id\n              name\n              description\n              privileges {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: { sortings: [{ name: 'name' }] },\n      context: gqlContext()\n    })\n\n    return response.data.roles.items\n  }\n}\n"]}
+{"version":3,"file":"role-management.js","sourceRoot":"","sources":["../../../client/pages/role/role-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/component-ui'\nimport '../../components/create-role'\nimport '../../components/role-edit-form'\nimport '../../components/role-privilege-editor'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { InheritedValueType, PageView, store } from '@operato/shell'\n\n@customElement('role-management')\nclass RoleManagement extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n        overflow: auto;\n      }\n\n      [subtitle] {\n        padding: var(--subtitle-padding);\n        font: var(--subtitle-font);\n        color: var(--subtitle-text-color);\n      }\n\n      input {\n        display: block;\n      }\n\n      #roles-privileges {\n        flex: 1;\n        display: flex;\n        margin-top: var(--spacing-medium);\n        max-width: var(--content-container-max-width);\n        flex-direction: row;\n        overflow: auto;\n        border-top: var(--border-dim-color);\n      }\n    `\n  ]\n\n  @property({ type: String }) title: string = ''\n  @property({ type: Object }) role: any\n  @property({ type: Array }) roles: any[] = []\n  @property({ type: Object }) updateRoleObj: any\n\n  get context() {\n    return {\n      title: i18next.t('text.role_management'),\n      help: 'auth/roles'\n    }\n  }\n\n  render() {\n    const data = {\n      roles: this.roles || []\n    }\n\n    return html`\n      <create-role\n        @fetch-roles=${async () => {\n          this.roles = await this.fetchRoles()\n        }}\n      ></create-role>\n\n      <div subtitle>${i18next.t('text.registered roles')}</div>\n      <div id=\"roles-privileges\">\n        <quick-find-list\n          .data=\"${data}\"\n          .openHeaderRenderer=${role => html`\n            <role-edit-form .role=\"${role}\" @roleChanged=\"${e => (this.updateRoleObj = e.detail)}\"></role-edit-form>\n          `}\n          .contentRenderer=\"${(role, _currentTabKey) => html`\n            <role-privilege-editor\n              .updateRoleObj=${this.updateRoleObj || {}}\n              .role=${role}\n              @fetch-roles=${async () => {\n                this.roles = await this.fetchRoles()\n                await this.updateComplete\n                this.quickFindList.openByKey(role.id)\n              }}\n            ></role-privilege-editor>\n          `}\"\n        ></quick-find-list>\n      </div>\n    `\n  }\n\n  @query('quick-find-list') quickFindList!: HTMLElement & { openByKey: (roleId: string) => void }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.roles = await this.fetchRoles()\n      this.role = this.roles && this.roles[0]\n    }\n  }\n\n  async fetchRoles() {\n    const response = await client.query({\n      query: gql`\n        query roles($sortings: [Sorting!], $inherited: InheritedValueType) {\n          roles(sortings: $sortings, inherited: $inherited) {\n            items {\n              id\n              name\n              description\n              privileges {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: { \n        sortings: [{ name: 'name' }],\n        inherited: InheritedValueType.Only\n      },\n      context: gqlContext()\n    })\n\n    return response.data.roles.items\n  }\n}\n"]}

package/dist-client/pages/user/user-management.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import '@things-factory/component-ui';
 import '../../components/invite-user';
 import '../../components/ownership-transfer-popup';

package/dist-client/pages/user/user-management.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@things-factory/component-ui';
 import '../../components/invite-user';
 import '../../components/ownership-transfer-popup';
@@ -68,10 +69,10 @@ let UserManagement = class UserManagement extends PageView {
             return html `
             ${!user.activated
                 ? html `
-                  <mwc-icon>do_disturb</mwc-icon>
+                  <md-icon>do_disturb</md-icon>
                   ${user.name}
                 `
-                : html ` ${user.owner ? html ` <mwc-icon>supervisor_account</mwc-icon> ` : ''} ${user.name} `}
+                : html ` ${user.owner ? html ` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `}
           `;
         }}
         .contentRenderer=${user => html ` <user-role-editor
@@ -181,14 +182,14 @@ UserManagement.styles = [
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
       @media screen and (max-width: 600px) {
         :host {
-          padding: var(--padding-narrow);
+          padding: var(--spacing-small);
         }
       }
     `

package/dist-client/pages/user/user-management.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-management.js","sourceRoot":"","sources":["../../../client/pages/user/user-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/component-ui'\nimport '../../components/invite-user'\nimport '../../components/ownership-transfer-popup'\nimport '../../components/user-role-editor'\nimport '../../components/create-user'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('user-management')\nclass UserManagement extends PageView {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n        overflow: auto;\n      }\n\n      @media screen and (max-width: 600px) {\n        :host {\n          padding: var(--padding-narrow);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) domainUsers: any[] = []\n  @property({ type: Object }) owner: any\n  @property({ type: String }) currentTab: string = ''\n  @property({ type: Boolean }) passwordResettable: boolean = false\n  @property({ type: Boolean }) userCreatable: boolean = false\n\n  @query('#user-list') userListElement!: HTMLElement & { close: () => void }\n\n  get context() {\n    return {\n      title: i18next.t('text.user management'),\n      help: 'auth/users'\n    }\n  }\n\n  render() {\n    const groupingUser = (this.domainUsers || []).reduce(\n      (groupingUser, user) => {\n        const userType = user.userType\n        if (!groupingUser[userType]) {\n          groupingUser[userType] = []\n        }\n        user.activated = user.status === 'activated'\n        groupingUser[userType].push(user)\n\n        return groupingUser\n      },\n      {\n        admin: [],\n        user: [],\n        application: [],\n        appliance: []\n      }\n    )\n\n    const USER_TYPES = {\n      USER: i18next.t('label.user'),\n      APPLICATION: i18next.t('label.application'),\n      APPLIANCE: i18next.t('text.appliance')\n    }\n\n    const userSet = {\n      [USER_TYPES.USER]: [...groupingUser.user, ...groupingUser.admin],\n      [USER_TYPES.APPLICATION]: groupingUser.application,\n      [USER_TYPES.APPLIANCE]: groupingUser.appliance\n    }\n\n    return html`\n      ${this.userCreatable\n        ? html`<create-user\n            @create-user=${async event => {\n              const user = event.detail\n              user.userType = 'user'\n\n              await this.createUser(user)\n            }}\n          ></create-user>`\n        : ''}\n      <quick-find-list\n        id=\"user-list\"\n        .data=${userSet}\n        @tabChanged=${e => (this.currentTab = e.detail.currentTabKey)}\n        .headerRenderer=${user => {\n          return html`\n            ${!user.activated\n              ? html`\n                  <mwc-icon>do_disturb</mwc-icon>\n                  ${user.name}\n                `\n              : html` ${user.owner ? html` <mwc-icon>supervisor_account</mwc-icon> ` : ''} ${user.name} `}\n          `\n        }}\n        .contentRenderer=${user =>\n          html` <user-role-editor\n            .user=${user}\n            .domainOwner=${this.owner}\n            .activate=${user.activated}\n            @userUpdated=${this.refreshUsers.bind(this)}\n            @ownershipTransferred=${this.refreshUsers.bind(this)}\n            .passwordResettable=${this.passwordResettable}\n          ></user-role-editor>`}\n      ></quick-find-list>\n\n      ${this.currentTab === USER_TYPES.USER\n        ? html`<invite-user @invitationCompleted=${this.refreshUsers.bind(this)}></invite-user>`\n        : ''}\n    `\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.refreshUsers()\n      this.checkPasswordResettable()\n      this.checkUserCreatable()\n    }\n  }\n\n  async refreshUsers() {\n    const domainUsersResp = await client.query({\n      query: gql`\n        query {\n          users {\n            items {\n              id\n              name\n              email\n              userType\n              status\n              owner\n            }\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    if (!domainUsersResp.errors?.length) {\n      this.domainUsers = domainUsersResp.data.users.items || []\n      this.owner = this.domainUsers.filter(user => user.owner)[0] || {}\n      this.userListElement?.close()\n    }\n  }\n\n  async checkPasswordResettable() {\n    const response = await client.query({\n      query: gql`\n        query {\n          checkResettablePasswordToDefault\n        }\n      `\n    })\n\n    if (!response.errors) {\n      this.passwordResettable = response.data.checkResettablePasswordToDefault\n    }\n  }\n\n  async checkUserCreatable() {\n    const response = await client.query({\n      query: gql`\n        query {\n          checkDefaultPassword\n        }\n      `\n    })\n\n    if (!response.errors) {\n      this.userCreatable = response.data.checkDefaultPassword\n    }\n  }\n\n  async createUser(user) {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.are_you_sure_to_x_user', { x: i18next.t('button.create') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation createUser($user: NewUser!) {\n            createUser(user: $user) {\n              name\n            }\n          }\n        `,\n        variables: { user },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await OxPrompt.open({\n          title: i18next.t('text.completed'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        await this.refreshUsers()\n      }\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"user-management.js","sourceRoot":"","sources":["../../../client/pages/user/user-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@things-factory/component-ui'\nimport '../../components/invite-user'\nimport '../../components/ownership-transfer-popup'\nimport '../../components/user-role-editor'\nimport '../../components/create-user'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('user-management')\nclass UserManagement extends PageView {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n        overflow: auto;\n      }\n\n      @media screen and (max-width: 600px) {\n        :host {\n          padding: var(--spacing-small);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) domainUsers: any[] = []\n  @property({ type: Object }) owner: any\n  @property({ type: String }) currentTab: string = ''\n  @property({ type: Boolean }) passwordResettable: boolean = false\n  @property({ type: Boolean }) userCreatable: boolean = false\n\n  @query('#user-list') userListElement!: HTMLElement & { close: () => void }\n\n  get context() {\n    return {\n      title: i18next.t('text.user management'),\n      help: 'auth/users'\n    }\n  }\n\n  render() {\n    const groupingUser = (this.domainUsers || []).reduce(\n      (groupingUser, user) => {\n        const userType = user.userType\n        if (!groupingUser[userType]) {\n          groupingUser[userType] = []\n        }\n        user.activated = user.status === 'activated'\n        groupingUser[userType].push(user)\n\n        return groupingUser\n      },\n      {\n        admin: [],\n        user: [],\n        application: [],\n        appliance: []\n      }\n    )\n\n    const USER_TYPES = {\n      USER: i18next.t('label.user'),\n      APPLICATION: i18next.t('label.application'),\n      APPLIANCE: i18next.t('text.appliance')\n    }\n\n    const userSet = {\n      [USER_TYPES.USER]: [...groupingUser.user, ...groupingUser.admin],\n      [USER_TYPES.APPLICATION]: groupingUser.application,\n      [USER_TYPES.APPLIANCE]: groupingUser.appliance\n    }\n\n    return html`\n      ${this.userCreatable\n        ? html`<create-user\n            @create-user=${async event => {\n              const user = event.detail\n              user.userType = 'user'\n\n              await this.createUser(user)\n            }}\n          ></create-user>`\n        : ''}\n      <quick-find-list\n        id=\"user-list\"\n        .data=${userSet}\n        @tabChanged=${e => (this.currentTab = e.detail.currentTabKey)}\n        .headerRenderer=${user => {\n          return html`\n            ${!user.activated\n              ? html`\n                  <md-icon>do_disturb</md-icon>\n                  ${user.name}\n                `\n              : html` ${user.owner ? html` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `}\n          `\n        }}\n        .contentRenderer=${user =>\n          html` <user-role-editor\n            .user=${user}\n            .domainOwner=${this.owner}\n            .activate=${user.activated}\n            @userUpdated=${this.refreshUsers.bind(this)}\n            @ownershipTransferred=${this.refreshUsers.bind(this)}\n            .passwordResettable=${this.passwordResettable}\n          ></user-role-editor>`}\n      ></quick-find-list>\n\n      ${this.currentTab === USER_TYPES.USER\n        ? html`<invite-user @invitationCompleted=${this.refreshUsers.bind(this)}></invite-user>`\n        : ''}\n    `\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.refreshUsers()\n      this.checkPasswordResettable()\n      this.checkUserCreatable()\n    }\n  }\n\n  async refreshUsers() {\n    const domainUsersResp = await client.query({\n      query: gql`\n        query {\n          users {\n            items {\n              id\n              name\n              email\n              userType\n              status\n              owner\n            }\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    if (!domainUsersResp.errors?.length) {\n      this.domainUsers = domainUsersResp.data.users.items || []\n      this.owner = this.domainUsers.filter(user => user.owner)[0] || {}\n      this.userListElement?.close()\n    }\n  }\n\n  async checkPasswordResettable() {\n    const response = await client.query({\n      query: gql`\n        query {\n          checkResettablePasswordToDefault\n        }\n      `\n    })\n\n    if (!response.errors) {\n      this.passwordResettable = response.data.checkResettablePasswordToDefault\n    }\n  }\n\n  async checkUserCreatable() {\n    const response = await client.query({\n      query: gql`\n        query {\n          checkDefaultPassword\n        }\n      `\n    })\n\n    if (!response.errors) {\n      this.userCreatable = response.data.checkDefaultPassword\n    }\n  }\n\n  async createUser(user) {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.are_you_sure_to_x_user', { x: i18next.t('button.create') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation createUser($user: NewUser!) {\n            createUser(user: $user) {\n              name\n            }\n          }\n        `,\n        variables: { user },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await OxPrompt.open({\n          title: i18next.t('text.completed'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        await this.refreshUsers()\n      }\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}

package/dist-client/route.js.map

@@ -1 +1 @@
-{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI;IAChC,QAAQ,IAAI,EAAE;QACZ,KAAK,SAAS;YACZ,MAAM;YACJ,2BAA2B;YAC3B,iCAAiC;YACjC,oBAAoB,CACrB,CAAA;YACD,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,4BAA4B,CAAC,CAAA;YACpC,OAAO,IAAI,CAAA;QAEb,KAAK,aAAa;YAChB,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,aAAa;YAChB,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,wBAAwB,CAAC,CAAA;YAChC,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,6BAA6B,CAAC,CAAA;YACrC,OAAO,IAAI,CAAA;QAEb,KAAK,OAAO;YACV,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,OAAO;YACV,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,UAAU;YACb,MAAM,CAAC,oCAAoC,CAAC,CAAA;YAC5C,OAAO,IAAI,CAAA;QAEb,KAAK,SAAS;YACZ,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,YAAY;YACf,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,mDAAmD,CAAC,CAAA;YAC3D,OAAO,IAAI,CAAA;KACd;AACH,CAAC","sourcesContent":["export default function route(page) {\n  switch (page) {\n    case 'profile':\n      import(\n        /* webpackPrefetch: true */\n        /* webpackChunkName: \"profile\" */\n        './pages/profile.js'\n      )\n      return page\n\n    case 'appliance-register':\n      import('./pages/appliance/register')\n      return page\n\n    case 'application':\n      import('./pages/application/application')\n      return page\n\n    case 'applications':\n      import('./pages/application/applications')\n      return page\n\n    case 'application-register':\n      import('./pages/application/register')\n      return page\n\n    case 'app-bindings':\n      import('./pages/app-binding/app-bindings')\n      return page\n\n    case 'app-binding':\n      import('./pages/app-binding/app-binding')\n      return page\n\n    case 'appliance-home':\n      import('./pages/appliance/home')\n      return page\n\n    case 'appliance':\n      import('./pages/appliance/appliance')\n      return page\n\n    case 'roles':\n      import('./pages/role/role-management')\n      return page\n\n    case 'users':\n      import('./pages/user/user-management')\n      return page\n\n    case 'partners':\n      import('./pages/partner/partner-management')\n      return page\n\n    case 'domains':\n      import('./pages/domain/domain-management')\n      return page\n\n    case 'attributes':\n      import('./pages/attribute/attribute-set-management.js')\n      return page\n\n    case 'auth-providers':\n      import('./pages/auth-provider/auth-provider-management.js')\n      return page\n  }\n}\n"]}
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI;IAChC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,MAAM;YACJ,2BAA2B;YAC3B,iCAAiC;YACjC,oBAAoB,CACrB,CAAA;YACD,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,4BAA4B,CAAC,CAAA;YACpC,OAAO,IAAI,CAAA;QAEb,KAAK,aAAa;YAChB,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,aAAa;YAChB,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,wBAAwB,CAAC,CAAA;YAChC,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,6BAA6B,CAAC,CAAA;YACrC,OAAO,IAAI,CAAA;QAEb,KAAK,OAAO;YACV,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,OAAO;YACV,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,UAAU;YACb,MAAM,CAAC,oCAAoC,CAAC,CAAA;YAC5C,OAAO,IAAI,CAAA;QAEb,KAAK,SAAS;YACZ,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,YAAY;YACf,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,mDAAmD,CAAC,CAAA;YAC3D,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page) {\n  switch (page) {\n    case 'profile':\n      import(\n        /* webpackPrefetch: true */\n        /* webpackChunkName: \"profile\" */\n        './pages/profile.js'\n      )\n      return page\n\n    case 'appliance-register':\n      import('./pages/appliance/register')\n      return page\n\n    case 'application':\n      import('./pages/application/application')\n      return page\n\n    case 'applications':\n      import('./pages/application/applications')\n      return page\n\n    case 'application-register':\n      import('./pages/application/register')\n      return page\n\n    case 'app-bindings':\n      import('./pages/app-binding/app-bindings')\n      return page\n\n    case 'app-binding':\n      import('./pages/app-binding/app-binding')\n      return page\n\n    case 'appliance-home':\n      import('./pages/appliance/home')\n      return page\n\n    case 'appliance':\n      import('./pages/appliance/appliance')\n      return page\n\n    case 'roles':\n      import('./pages/role/role-management')\n      return page\n\n    case 'users':\n      import('./pages/user/user-management')\n      return page\n\n    case 'partners':\n      import('./pages/partner/partner-management')\n      return page\n\n    case 'domains':\n      import('./pages/domain/domain-management')\n      return page\n\n    case 'attributes':\n      import('./pages/attribute/attribute-set-management.js')\n      return page\n\n    case 'auth-providers':\n      import('./pages/auth-provider/auth-provider-management.js')\n      return page\n  }\n}\n"]}

package/dist-client/themes/auth-theme.css

@@ -1,22 +1,19 @@
 body {
   /* login page style*/
-  --auth-background: var(--primary-color);
   --auth-brand-name: bold 20px var(--theme-font);
   --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   --auth-brand-welcome-msg: normal 12px var(--theme-font);
 
-  --auth-title-color: var(--theme-white-color);
   --auth-title-font: bold 32px var(--theme-font);
-  --auth-description-color: var(--secondary-text-color);
   --auth-description-font: normal 12px var(--theme-font);
   --auth-description-padding: 5px 5px 15px 5px;
 
   --auth-input-font: normal 18px/24px var(--theme-font);
-  --auth-input-border: 1px solid var(--opacity-dark-color);
-  --auth-input-border-light: 1px solid var(--opacity-light-color);
-  --auth-input-color: var(--theme-white-color);
+  --auth-input-border: 1px solid rgba(0, 0, 0, 0.4);
+  --auth-input-border-light: 1px solid rgba(255, 255, 255, 0.8);
+  --auth-input-color: var(--md-sys-color-on-primary);
 
-  --auth-button-background-color: var(--theme-white-color);
+  --auth-button-background-color: var(--md-sys-color-surface-variant);
   --auth-button-background-focus-color: var(--status-success-color);
   --auth-button-font: bold 20px var(--theme-font);
   --auth-button-padding: 9px 12px 7px 12px;
@@ -42,11 +39,11 @@ body {
   --auth-special-page-padding: 250px 0 100px 0;
 
   /* domain select page style*/
-  --checkin-background-color: var(--main-section-background-color);
+  --checkin-background-color: var(--md-sys-color-background);
   --checkin-header-height: 45px;
-  --checkin-header-background-color: var(--primary-color);
+  --checkin-header-background-color: var(--md-sys-color-primary);
   --checkin-header-title-font: bold 19px var(--theme-font);
-  --checkin-header-title-color: var(--theme-white-color);
+  --checkin-header-title-color: var(--md-sys-color-on-primary);
   --checkin-wrap-max-width: 500px;
   --checkin-wrap-padding: var(--padding-wide);
 }