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

package/client/components/create-user.ts

@@ -0,0 +1,95 @@
+import '@material/web/button/outlined-button.js'
+import '@material/web/textfield/filled-text-field.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+@customElement('create-user')
+class CreateUser extends LitElement {
+  static styles = css`
+    :host {
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+
+      display: grid;
+      grid-template-columns: 1fr 2fr auto;
+      gap: 5px 15px;
+      clear: both;
+      max-width: var(--input-container-max-width);
+
+      align-items: center;
+    }
+
+    md-outlined-button {
+      margin: var(--input-margin);
+    }
+
+    @media screen and (max-width: 480px) {
+      :host {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      md-outlined-button {
+        grid-column: span 2;
+
+        margin: var(--input-margin);
+      }
+    }
+  `
+
+  @query('[name=name]') nameInput!: HTMLInputElement
+  @query('[name=email]') emailInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <md-filled-text-field
+        type="text"
+        name="name"
+        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
+      ></md-filled-text-field>
+
+      <md-filled-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-filled-text-field>
+
+      <md-outlined-button @click=${this.onCreateUser.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
+    `
+  }
+
+  async onCreateUser() {
+    try {
+      if (!this.emailInput.checkValidity()) {
+        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
+      }
+
+      if (!this.nameInput.value) {
+        throw new Error(i18next.t('error.value is empty', { value: 'name' }))
+      }
+
+      const user = {
+        name: this.nameInput.value.trim(),
+        email: this.emailInput.value.trim()
+      }
+
+      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))
+
+      this.nameInput.value = ''
+      this.emailInput.value = ''
+    } catch (e: any) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: 'message' in e ? e.message : e
+          }
+        })
+      )
+    }
+  }
+}

package/client/components/credential-manager.ts

@@ -0,0 +1,64 @@
+import gql from 'graphql-tag'
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+
+@customElement('credential-manager')
+export class CredentialManager extends LitElement {
+  @property({ type: Array }) credentials: {
+    credentialId: string
+  }[] = []
+
+  static styles = css`
+    div {
+      margin: 20px;
+    }
+    button {
+      margin: 5px;
+    }
+  `
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.fetchCredentials()
+  }
+
+  async fetchCredentials() {
+    const response = await fetch('/auth/credentials', {
+      method: 'GET',
+      credentials: 'include'
+    })
+    this.credentials = await response.json()
+  }
+
+  async deleteCredential(credentialId: string) {
+    const response = await fetch(`/credentials/${credentialId}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+    if (response.ok) {
+      this.fetchCredentials()
+    } else {
+      console.error('Failed to delete credential')
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <h2>Manage Your WebAuthn Credentials</h2>
+        <ul>
+          ${this.credentials.map(
+            credential => html`
+              <li>
+                ${credential.credentialId}
+                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>
+              </li>
+            `
+          )}
+        </ul>
+      </div>
+    `
+  }
+}

package/client/components/delete-user-popup.ts

@@ -0,0 +1,117 @@
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+
+@customElement('delete-user-popup')
+export class DeleteUserPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        color: var(--popup-content-color);
+        background-color: var(--popup-content-background-color);
+        padding: var(--popup-content-padding);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+      *:focus {
+        outline: none;
+      }
+
+      label {
+        font: bold 14px var(--theme-font);
+        color: var(--md-sys-color-primary);
+      }
+
+      input {
+        border: var(--change-password-field-border);
+        border-radius: var(--change-password-field-border-radius);
+        padding: var(--change-password-field-padding);
+
+        font: var(--change-password-field-font);
+        width: var(--change-password-field-width);
+      }
+      input:focus {
+        border: 1px solid var(--focus-background-color);
+      }
+
+      div.field {
+        padding-bottom: 10px;
+      }
+
+      ::placeholder {
+        font-size: 0.8rem;
+        text-transform: capitalize;
+      }
+
+      button {
+        background-color: var(--status-danger-color, #d14946);
+        margin: 2px 2px 10px 2px;
+        height: var(--button-height, 28px);
+        color: var(--button-color, #fff);
+        font: var(--button-font);
+        border-radius: var(--button-radius, 5px);
+        border: var(--button-border, 1px solid transparent);
+        line-height: 1.5;
+      }
+      button:hover,
+      button:active {
+        background-color: var(--button-active-background-color, #22a6a7);
+        border: var(--button-active-border);
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <h1><ox-i18n msgid="label.delete account"></ox-i18n></h1>
+      <span><ox-i18n msgid="text.delete account warning message"></ox-i18n></span>
+      <form @submit=${e => this.submit(e)}>
+        <div class="field">
+          <label for="email"><ox-i18n msgid="label.email"></ox-i18n></label>
+          <input id="email" type="email" name="email" autocapitalize="off" required />
+          <label for="password"><ox-i18n msgid="label.password"></ox-i18n></label>
+          <input id="password" type="password" name="password" required />
+        </div>
+
+        <button class="ui button" type="submit"><ox-i18n msgid="label.delete account"></ox-i18n></button>
+      </form>
+    `
+  }
+
+  async submit(e: Event) {
+    e.preventDefault()
+
+    const form = e.target as HTMLFormElement
+
+    var params = {}
+    new FormData(form).forEach((value, key) => {
+      params[key] = value
+    })
+
+    try {
+      const message = await auth.deleteUser(params)
+      notify({
+        level: 'info',
+        message
+      })
+
+      auth.signout()
+    } catch (e: any) {
+      form.reset()
+
+      notify({
+        level: 'error',
+        message: 'message' in e ? e.message : e
+      })
+    }
+  }
+}

package/client/components/domain-switch.ts

@@ -0,0 +1,127 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('domain-switch')
+export class DomainSwitch extends connect(store)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        max-width: 100%;
+        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
+        border-bottom: var(--border-dim-color);
+      }
+
+      :host * {
+        vertical-align: middle;
+      }
+
+      div {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        padding: var(--spacing-small);
+      }
+
+      md-icon {
+        background-color: var(--md-sys-color-primary, rgb(46 121 190));
+        margin-right: var(--spacing-small);
+        padding: 2px;
+        border-radius: 50%;
+        font-size: var(--fontsize-large);
+        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));
+      }
+      span,
+      select {
+        flex: 1;
+        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
+        font: bold 14px/20px var(--theme-font);
+      }
+
+      select {
+        border: none;
+        background-color: transparent;
+      }
+
+      select:focus {
+        outline: 0;
+      }
+      :host([dark]) {
+        background-color: rgba(0, 0, 0, 0.2);
+        padding: 0 !important;
+        border-bottom: none;
+      }
+      :host([dark]) md-icon {
+        background-color: var(--secondary-text-color);
+        margin: 1px 4px 0px 0px;
+        padding: 1px 2px;
+        border-radius: 50%;
+        line-height: 19px;
+      }
+      :host([dark]) span,
+      :host([dark]) select {
+        color: var(--md-sys-color-on-primary);
+        font: bold 13px/13px var(--theme-font);
+      }
+      :host([dark]) option {
+        background-color: var(--primary-color, #585858);
+        color: var(--md-sys-color-on-primary, #fff);
+      }
+      :host([dark]) span {
+        line-height: 23px;
+      }
+
+      :host([rounded-corner]) {
+        height: 30px;
+        border-radius: 20px;
+        border: var(--border-dim-color);
+      }
+      :host([rounded-corner]) div {
+        padding: var(--spacing-small) var(--spacing-medium);
+      }
+    `
+  ]
+
+  @property({ type: Array }) domains: any[] = []
+  @property({ type: Object }) domain: any
+  @property({ type: String, attribute: true }) attrname: string = 'name'
+  @property({ type: String, attribute: true }) icon?: string
+
+  render() {
+    const domains = this.domains || []
+    const domain = this.domain || {}
+    const attrname = this.attrname || 'name'
+
+    return html`
+      <div>
+        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}
+        ${domains.length <= 1
+          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `
+          : html`
+              <select
+                .value=${domain.subdomain}
+                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
+              >
+                ${domains.map(
+                  d => html`
+                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>
+                  `
+                )}
+              </select>
+            `}
+      </div>
+    `
+  }
+
+  stateChanged(state) {
+    this.domains = state.app.domains
+    this.domain = state.app.domain
+  }
+}

package/client/components/invite-customer.ts

@@ -0,0 +1,104 @@
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { client, gqlContext } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+@customElement('invite-customer')
+class InviteCustomer extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      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);
+      }
+      md-outlined-button {
+        margin: var(--input-margin);
+      }
+      @media screen and (max-width: 480px) {
+        div {
+          display: grid;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Array }) customers: any[] = []
+
+  @query('input#customer-name') customerNameInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <div>
+        <input id="customer-name" required />
+        <md-outlined-button @click=${this.invite.bind(this)}>
+          <md-icon slot="icon">group_add</md-icon>
+          ${String(i18next.t('label.invite customer'))}
+        </md-outlined-button>
+      </div>
+    `
+  }
+
+  async invite() {
+    try {
+      if (!this.customerNameInput.value)
+        throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
+
+      if (this.customers.find(c => c.name?.toLowerCase() === this.customerNameInput.value.toLowerCase())) {
+        throw new Error(
+          i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') })
+        )
+      }
+
+      if (
+        await OxPrompt.open({
+          title: i18next.t('text.are_you_sure'),
+          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),
+          confirmButton: { text: i18next.t('button.confirm') },
+          cancelButton: { text: i18next.t('button.cancel') }
+        })
+      ) {
+        const customerDomainName = this.customerNameInput.value
+
+        const response = await client.mutate({
+          mutation: gql`
+            mutation inviteCustomer($customerDomainName: String!) {
+              inviteCustomer(customerDomainName: $customerDomainName)
+            }
+          `,
+          variables: { customerDomainName },
+          context: gqlContext()
+        })
+
+        if (!response.errors) {
+          const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))
+
+          if (answer) {
+            await OxPrompt.open({
+              type: 'success',
+              title: i18next.t('text.completed'),
+              confirmButton: { text: i18next.t('button.confirm') }
+            })
+          }
+
+          this.customerNameInput.value = ''
+        }
+      }
+    } catch (e: any) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: 'message' in e ? e.message : e
+          }
+        })
+      )
+    }
+  }
+}

package/client/components/invite-user.ts

@@ -0,0 +1,96 @@
+import './user-role-editor'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
+
+import { client, gqlContext } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+@customElement('invite-user')
+class InviteUser extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+    }
+
+    input {
+      flex: 1;
+
+      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);
+    }
+
+    md-outlined-button {
+      margin: var(--input-margin);
+      text-transform: capitalize;
+    }
+  `
+
+  @query('input[name=email]') emailInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <input name="email" type="email" required name="invite-email" autocapitalize="off" />
+      <md-outlined-button @click=${this.invite.bind(this)}>
+        <md-icon slot="icon">group_add</md-icon>${String(i18next.t('label.invite user'))}
+      </md-outlined-button>
+    `
+  }
+
+  async invite() {
+    try {
+      if (!this.emailInput.checkValidity()) {
+        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
+      }
+
+      if (
+        await OxPrompt.open({
+          title: i18next.t('text.are_you_sure'),
+          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),
+          confirmButton: { text: i18next.t('button.confirm') },
+          cancelButton: { text: i18next.t('button.cancel') }
+        })
+      ) {
+        await this.inviteUser(this.emailInput.value)
+
+        this.dispatchEvent(new CustomEvent('invitationCompleted'))
+      }
+    } catch (e: any) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: 'message' in e ? e.message : e
+          }
+        })
+      )
+    }
+  }
+
+  async inviteUser(email) {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation inviteUser($email: EmailAddress!) {
+          inviteUser(email: $email)
+        }
+      `,
+      variables: { email },
+      context: gqlContext()
+    })
+
+    if (!response.errors) {
+      await OxPrompt.open({
+        title: i18next.t('text.completed'),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+
+      this.emailInput.value = ''
+    }
+  }
+}

package/client/components/my-login-history.ts

@@ -0,0 +1,101 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+@customElement('my-login-history')
+class MyLoginHistory extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--md-sys-color-background);
+      padding: var(--spacing-large);
+      overflow: auto;
+    }
+    ox-grist {
+      flex: 1;
+    }
+  `
+
+  @property({ type: Array }) histories: any[] = []
+  @property({ type: Number }) limit?: number
+
+  render() {
+    if (!this.histories?.length) return html``
+
+    const config = {
+      rows: { appendable: false },
+      pagination: { infinite: true },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'object',
+          name: 'accessDomain',
+          header: i18next.t('field.domain'),
+          record: { editable: false },
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'accessedAt',
+          header: i18next.t('field.accessed-at'),
+          record: { editable: false },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'accessorIp',
+          header: i18next.t('field.ip_address'),
+          record: { editable: false },
+          width: 200
+        }
+      ]
+    }
+
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${config}
+        .data="${{ records: this.histories }}"
+      ></ox-grist>
+    `
+  }
+
+  firstUpdated() {
+    this.fetchLoginHistories()
+  }
+
+  async fetchLoginHistories() {
+    try {
+      const response = await client.query({
+        query: gql`
+          query myLoginHistories($limit: Float!) {
+            myLoginHistories(limit: $limit) {
+              accessDomain {
+                name
+              }
+              accessorIp
+              accessedAt
+            }
+          }
+        `,
+        variables: { limit: this.limit || 10 }
+      })
+
+      if (response.errors?.length) return
+      this.histories = response.data.myLoginHistories
+    } catch (e: any) {
+      this.showToast('message' in e ? e.message : e)
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
+  }
+}