@things-factory/auth-ui 8.0.0 → 9.0.0-beta.3

package/client/components/role-privilege-editor.ts

@@ -1,267 +0,0 @@
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import { ButtonContainerStyles } from '@operato/styles'
-
-@customElement('role-privilege-editor')
-class RolePrivilegeEditor extends localize(i18next)(LitElement) {
-  static styles = [
-    ButtonContainerStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-primary);
-        font: normal 15px var(--theme-font);
-        color: var(--md-sys-color-secondary);
-      }
-      div {
-        margin: var(--spacing-medium);
-      }
-
-      div[users] {
-        margin: 0;
-        background-color: var(--md-sys-color-surface-variant);
-      }
-
-      div[titler] {
-        color: var(--md-sys-color-secondary);
-        font: bold 1.2em var(--theme-font);
-        text-transform: capitalize;
-      }
-
-      ul {
-        flex: 1;
-        background-color: var(--md-sys-color-surface-variant);
-        overflow: auto;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        padding: var(--spacing-medium);
-        list-style: none;
-        border: 1px dashed rgba(0, 0, 0, 0.1);
-        border-width: 1px 0;
-      }
-
-      input[type='checkbox'] {
-        display: inline;
-      }
-
-      li {
-        padding: var(--spacing-small);
-      }
-
-      #checkAll,
-      [for='checkAll'] {
-        margin-bottom: var(--spacing-medium);
-        padding-bottom: var(--spacing-small);
-        font-weight: bold;
-      }
-
-      md-elevated-button {
-        margin: 5px;
-        background-color: var(--md-sys-color-surface-variant);
-      }
-
-      md-outlined-button {
-        background-color: var(--md-sys-color-surface-variant);
-      }
-
-      @media screen and (max-width: 480px) {
-        ul {
-          grid-template-columns: 1fr;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) role: any
-  @property({ type: Array }) allPrivileges: any[] = []
-  @property({ type: Object }) updateRoleObj: any
-
-  @state() privileges: { id: string; description: string }[] = []
-  @state() users: { /* id: string; username: string; */ name: string; email: string }[] = []
-
-  render() {
-    const allPrivileges = this.allPrivileges || []
-    const privileges = this.privileges || []
-    const users = this.users || []
-
-    return html`
-      <div titler>${String(i18next.t('label.user'))}</div>
-
-      <div users>${users.map(user => html`<div>${user.name} (${user.email})</div>`)}</div>
-
-      <div titler>${String(i18next.t('field.privileges'))}</div>
-
-      <div>
-        <input id="checkAll" type="checkbox" @change=${e => this.oncheckAll(e)} />
-        <label for="checkAll">Check all</label>
-      </div>
-
-      <ul privileges>
-        ${allPrivileges.map(
-          privilege => html`
-            <li>
-              <input
-                type="checkbox"
-                id="${privilege.id}"
-                .checked=${privileges.map(p => p.id).indexOf(privilege.id) > -1}
-                .data-privilege=${privilege}
-              />
-              <label for="${privilege.id}">${privilege.description}</label>
-            </li>
-          `
-        )}
-      </ul>
-
-      <div class="button-container">
-        <md-elevated-button @click=${e => this.onSave()}>${String(i18next.t('button.save'))}</md-elevated-button>
-        <md-elevated-button @click=${e => this.onDeleteRole()} danger
-          >${String(i18next.t('button.delete role'))}</md-elevated-button
-        >
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    this.allPrivileges = await this.fetchPrivileges()
-  }
-
-  async updated(changes) {
-    if (changes.has('role')) {
-      await this.fetchPrivilegesOnRole(this.role.name)
-    }
-  }
-
-  checkAll(checked) {
-    Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(
-      checkbox => ((checkbox as HTMLInputElement).checked = checked)
-    )
-  }
-
-  oncheckAll(e) {
-    this.checkAll(e.target.checked)
-  }
-
-  async onSave() {
-    const updateRoleObj = this.updateRoleObj
-    const privileges = Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]:checked')).map(
-      e => e['data-privilege']
-    )
-
-    const patch = { ...updateRoleObj, privileges: privileges }
-
-    if (this.role) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($id: String!, $patch: RolePatch!) {
-            updateRole(id: $id, patch: $patch) {
-              id
-              name
-              description
-              privileges {
-                id
-                description
-              }
-            }
-          }
-        `,
-        variables: { id: this.role.id, patch },
-        context: gqlContext()
-      })
-
-      if (!response.errors) {
-        await this.dispatchEvent(new CustomEvent('fetch-roles'))
-        this.showToast(i18next.t('text.data_updated_successfully'))
-      }
-    }
-  }
-
-  async onDeleteRole() {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.are_you_sure_to_delete_x', { x: i18next.t('label.role') }),
-        confirmButton: { text: i18next.t('button.delete') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($id: String!) {
-            deleteRole(id: $id)
-          }
-        `,
-        variables: { id: this.role.id },
-        context: gqlContext()
-      })
-
-      if (!response.errors) {
-        await this.dispatchEvent(new CustomEvent('fetch-roles'))
-
-        await OxPrompt.open({
-          type: 'success',
-          title: i18next.t('text.completed'),
-          text: i18next.t('text.x_deleted_successfully', { x: i18next.t('label.role') }),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
-      }
-    }
-  }
-
-  async fetchPrivileges() {
-    const response = await client.query({
-      query: gql`
-        query privileges {
-          privileges {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-        }
-      `
-    })
-
-    return response.data.privileges.items
-  }
-
-  async fetchPrivilegesOnRole(name) {
-    const response = await client.query({
-      query: gql`
-        query ($name: String!) {
-          role(name: $name) {
-            id
-            name
-            privileges {
-              id
-              description
-            }
-            users {
-              name
-              email
-            }
-          }
-        }
-      `,
-      variables: { name },
-      context: gqlContext()
-    })
-
-    this.privileges = response.data.role?.privileges
-    this.users = response.data.role?.users
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}

package/client/components/role-selector.ts

@@ -1,102 +0,0 @@
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('role-selector')
-export class RoleSelector extends LitElement {
-  static styles = [
-    css`
-      [subtitle] {
-        margin: 0;
-        padding: var(--subtitle-padding);
-        font: var(--subtitle-font);
-        color: var(--subtitle-text-color);
-      }
-      div {
-        margin: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
-      }
-      ul {
-        flex: 1;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        column-gap: 20px;
-        overflow: auto;
-        margin: 0;
-        padding: var(--spacing-medium);
-        list-style: none;
-        border: 1px dashed rgba(0, 0, 0, 0.1);
-        border-width: 1px 0;
-      }
-      input[type='checkbox'] {
-        display: inline;
-      }
-      label {
-        padding-left: var(--spacing-small);
-        text-transform: capitalize;
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-      }
-      li {
-        padding: var(--spacing-small);
-      }
-      #checkAll,
-      [for='checkAll'] {
-        margin-bottom: var(--spacing-medium);
-        padding-bottom: var(--spacing-small);
-        font-weight: bold;
-      }
-    `
-  ]
-
-  @property({ type: String }) roleCategory: string = 'Roles'
-  @property({ type: Object }) user: any = {}
-  @property({ type: Array }) roles: any[] = []
-  @property({ type: Array }) userRoles: any[] = []
-
-  render() {
-    const userRoleIds = (this.userRoles || []).map(userRole => userRole.id)
-
-    return html`
-      ${this.roles.length
-        ? html`
-            <div>
-              ${this.roleCategory ? html`<h3 subtitle>${this.roleCategory}</h3>` : nothing}
-              <input id="checkAll" type="checkbox" @change=${this.checkAll.bind(this)} />
-              <label for="checkAll">Check all</label>
-            </div>
-
-            <ul roles>
-              ${this.roles.map(
-                role => html`
-                  <li>
-                    <input
-                      id="${role.id}"
-                      type="checkbox"
-                      .checked=${userRoleIds.indexOf(role.id) >= 0}
-                      .data-role=${role}
-                    />
-                    <label for="${role.id}">${role.name}</label>
-                  </li>
-                `
-              )}
-            </ul>
-          `
-        : ''}
-    `
-  }
-
-  checkAll(e) {
-    const checked = e.currentTarget.checked
-    Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]')).forEach(
-      checkbox => ((checkbox as HTMLInputElement).checked = checked)
-    )
-  }
-
-  selectedRoles() {
-    return Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]'))
-      .filter(input => (input as HTMLInputElement).checked)
-      .map(input => {
-        const { id, name } = input['data-role']
-        return { id, name }
-      })
-  }
-}