@things-factory/auth-ui 8.0.0-beta.1 → 8.0.0-beta.4

package/client/components/create-role.ts

@@ -1,123 +0,0 @@
-import '@material/web/textfield/filled-text-field.js'
-
-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('create-role')
-class CreateRole extends localize(i18next)(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);
-      text-transform: capitalize;
-    }
-
-    @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=description]') descriptionInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <md-filled-text-field
-        type="text"
-        name="name"
-        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
-      ></md-filled-text-field>
-      <md-filled-text-field
-        type="text"
-        name="description"
-        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
-      ></md-filled-text-field>
-
-      <md-outlined-button @click=${this.onCreateRole.bind(this)}
-        >${String(i18next.t('button.create'))}</md-outlined-button
-      >
-    `
-  }
-
-  async onCreateRole() {
-    let role: { name?: string; description?: string } = {}
-
-    const name = this.nameInput.value.trim()
-    const description = this.descriptionInput.value
-
-    if (!name) {
-      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
-    }
-
-    role.name = name
-    role.description = description
-
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation createRole($role: NewRole!) {
-            createRole(role: $role) {
-              name
-            }
-          }
-        `,
-        variables: { role },
-        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.data_uploaded_successfully'),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
-
-        this.nameInput.value = ''
-        this.descriptionInput.value = ''
-      }
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}

package/client/components/create-user.ts

@@ -1,117 +0,0 @@
-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'
-
-function capitalize(str) {
-  return str ? str.charAt(0).toUpperCase() + str.slice(1) : ''
-}
-
-@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 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=username]') usernameInput!: HTMLInputElement
-  @query('[name=email]') emailInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <md-filled-text-field
-        type="text"
-        name="username"
-        label=${capitalize(i18next.t('label.user-id'))}
-        pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
-        ><md-icon slot="leading-icon">badge</md-icon></md-filled-text-field
-      >
-
-      <md-filled-text-field
-        type="text"
-        name="name"
-        label=${capitalize(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-        ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
-      >
-
-      <md-filled-text-field type="email" name="email" label=${capitalize(i18next.t('field.email'))}
-        ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
-      >
-
-      <md-outlined-button @click=${this.onCreateUser.bind(this)}
-        >${capitalize(i18next.t('button.create'))}</md-outlined-button
-      >
-    `
-  }
-
-  async onCreateUser() {
-    try {
-      if (!this.usernameInput.value) {
-        throw new Error(i18next.t('error.value is empty', { value: 'name' }))
-      }
-
-      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 = {
-        username: this.usernameInput.value.trim(),
-        name: this.nameInput.value.trim(),
-        email: this.emailInput.value.trim()
-      }
-
-      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))
-
-      this.usernameInput.value = ''
-      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

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

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

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

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