@things-factory/auth-ui 8.0.0-beta.9 → 8.0.2

package/client/components/role-edit-form.ts

@@ -0,0 +1,92 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('role-edit-form')
+class RoleEditForm extends localize(i18next)(LitElement) {
+  static styles = css`
+    [field-2column] {
+      border-radius: var(--border-radius);
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 5px 15px;
+      clear: both;
+      max-width: var(--input-container-max-width);
+    }
+    [field] {
+      display: flex;
+      flex-direction: column;
+      padding-bottom: var(--spacing-medium);
+    }
+    input {
+      border: var(--border-dim-color);
+      border-radius: var(--border-radius);
+      margin: var(--input-margin);
+      padding: var(--input-padding);
+      min-width: 250px;
+      font: var(--input-font);
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+      font: var(--label-font);
+      color: var(--md-sys-color-on-primary);
+      text-transform: var(--label-text-transform);
+    }
+    @media screen and (max-width: 480px) {
+      [field] {
+        grid-column: span 2;
+      }
+    }
+  `
+  @property({ type: Object }) role: any
+
+  render() {
+    const role = this.role || { name: '', description: '' }
+
+    return html`
+      <form field-2column @input="${this.dispatchRoleChanged.bind(this)}">
+        <div field>
+          <label
+            >role name
+            <input name="name" value="${role.name}" @click="${e => e.stopPropagation()}" />
+          </label>
+        </div>
+
+        <div field>
+          <label
+            >role description
+            <input name="description" .value="${role.description}" @click="${e => e.stopPropagation()}" />
+          </label>
+        </div>
+      </form>
+    `
+  }
+
+  @query('input[name=name]') nameInput!: HTMLInputElement
+  @query('input[name=description]') descriptionInput!: HTMLInputElement
+
+  getRole() {
+    const name = this.nameInput.value
+    const description = this.descriptionInput.value
+
+    if (!name) {
+      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
+    }
+
+    return { name, description }
+  }
+
+  dispatchRoleChanged() {
+    this.dispatchEvent(
+      new CustomEvent('roleChanged', {
+        detail: this.getRole()
+      })
+    )
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}

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

@@ -0,0 +1,267 @@
+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

@@ -0,0 +1,102 @@
+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 }
+      })
+  }
+}