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

package/client/components/partner-info-card.ts

@@ -1,89 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-@customElement('partner-info-card')
-export class PartnerInfoCard extends LitElement {
-  static styles = [
-    css`
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        background-color: transparent;
-        font: var(--input-font);
-
-        flex: 1;
-      }
-      #vendors {
-        display: flex;
-        max-height: 45vh;
-        flex-direction: row;
-        background-color: var(--md-sys-color-surface-variant);
-        margin: 0;
-        padding: 0;
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        overflow: hidden;
-      }
-      [field-2column] {
-        overflow: auto;
-        flex: 1;
-        background-color: var(--md-sys-color-surface-variant);
-        padding: var(--spacing-medium);
-        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);
-      }
-      label {
-        display: flex;
-        flex-direction: column;
-
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-      @media screen and (max-width: 480px) {
-        [field] {
-          grid-column: span 2;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) partner: any
-
-  render() {
-    const partner = this.partner || {}
-
-    return html`
-      <div id="vendors">
-        <div field-2column>
-          <div field>
-            <label
-              >${i18next.t('label.name')}
-              <input type="text" name="name" readonly .value=${partner.name || ''} />
-            </label>
-          </div>
-
-          <div field>
-            <label
-              >${i18next.t('label.description')}
-              <input type="text" name="description" readonly .value=${partner.description || ''} />
-            </label>
-          </div>
-        </div>
-      </div>
-    `
-  }
-}

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

@@ -1,153 +0,0 @@
-import '@material/web/button/elevated-button.js'
-import './role-selector.js'
-
-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'
-import { ButtonContainerStyles } from '@operato/styles'
-
-import { RoleSelector } from './role-selector'
-
-@customElement('partner-role-editor')
-class PartnerRoleEditor extends localize(i18next)(LitElement) {
-  static styles = [
-    ButtonContainerStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-primary);
-        padding: var(--spacing-medium);
-        font: normal 15px var(--theme-font);
-        color: var(--md-sys-color-secondary);
-      }
-
-      md-elevated-button {
-        margin-right: var(--spacing-small);
-      }
-    `
-  ]
-
-  @property({ type: Object }) customer: any
-  @property({ type: Array }) roles: any[] = []
-  @property({ type: Array }) grantingRoles: any[] = []
-
-  @query('role-selector') roleSelector!: RoleSelector
-
-  render() {
-    const roles = this.roles || []
-    const grantingRoles = this.grantingRoles || []
-
-    return html`
-      <role-selector .roles="${roles}" .userRoles="${grantingRoles}"></role-selector>
-
-      <div class="button-container">
-        <md-elevated-button @click=${this.onSave}>${i18next.t('button.save')}</md-elevated-button>
-        <md-elevated-button @click=${this.onTerminateContract} danger
-          >${i18next.t('button.terminate contract')}</md-elevated-button
-        >
-      </div>
-    `
-  }
-
-  updated(changes) {
-    if (changes.has('customer')) {
-      this.refreshRoles()
-    }
-  }
-
-  async refreshRoles() {
-    const response = await client.query({
-      query: gql`
-        query roles($customerId: String!) {
-          roles {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-          grantingRoles(customerId: $customerId) {
-            id
-            role {
-              id
-              name
-              description
-            }
-          }
-        }
-      `,
-      variables: { customerId: this.customer.id },
-      context: gqlContext()
-    })
-
-    if (!response.errors?.length) {
-      this.roles = response.data.roles.items
-      this.grantingRoles = response.data.grantingRoles.map(grantingRole => grantingRole.role)
-    } else {
-      this.roles = []
-      this.grantingRoles = []
-    }
-  }
-
-  async onSave() {
-    const roles = this.roleSelector.selectedRoles()
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation grantRoles($customerId: String!, $roles: [RolePatch!]!) {
-          grantRoles(customerId: $customerId, roles: $roles)
-        }
-      `,
-      variables: { customerId: this.customer.id, roles },
-      context: gqlContext()
-    })
-
-    if (!response.errors?.length) {
-      this.showToast(i18next.t('text.data_updated_successfully'))
-    }
-  }
-
-  async onTerminateContract() {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.are_you_sure_to_terminate_contract'),
-        confirmButton: { text: i18next.t('button.terminate contract') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation terminateContract($partnerName: String!) {
-            terminateContract(partnerName: $partnerName)
-          }
-        `,
-        variables: { partnerName: this.customer.name },
-        context: gqlContext()
-      })
-
-      if (!response.errors?.length) {
-        const answer = this.dispatchEvent(new CustomEvent('contractTerminated'))
-
-        if (answer) {
-          await OxPrompt.open({
-            type: 'success',
-            title: i18next.t('text.completed'),
-            confirmButton: { text: i18next.t('button.confirm') }
-          })
-        }
-      }
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}

package/client/components/profile-component.ts

@@ -1,332 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-import '@operato/i18n/ox-i18n-selector.js'
-import './change-password'
-import './delete-user-popup'
-import './my-login-history'
-
-import { gql } from 'graphql-tag'
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { startRegistration } from '@simplewebauthn/browser'
-
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { notify, openPopup } from '@operato/layout'
-import { auth, getLanguages } from '@things-factory/auth-base/dist-client'
-
-const isAvailableWebauthn = 'PublicKeyCredential' in window
-@customElement('profile-component')
-export class ProfileComponent extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        background-color: var(--md-sys-color-background);
-        padding: 15px 0;
-      }
-      .wrap {
-        max-width: var(--profile-wrap-max-width, 400px);
-        margin: auto;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      *:focus {
-        outline: none;
-      }
-
-      input {
-        margin: var(--spacing-small) 0;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        padding: 9px;
-        border-radius: var(--border-radius);
-        font: var(--auth-input-field-font);
-        width: var(--auth-input-field-width);
-      }
-      input:focus {
-        border: 1px solid var(--focus-background-color);
-      }
-
-      .user {
-        background: url(/assets/images/icon-profile.png) center top no-repeat;
-        margin: var(--profile-icon-margin);
-        padding: 180px 20px 20px 20px;
-        color: var(--md-sys-color-secondary);
-        font: var(--header-bar-title);
-        text-align: center;
-      }
-
-      hr {
-        width: 100%;
-        border: dotted 1px rgba(0, 0, 0, 0.1);
-      }
-
-      .wrap * {
-        grid-column: span 2;
-      }
-
-      label {
-        font: bold 14px var(--theme-font);
-        color: var(--md-sys-color-primary);
-        text-transform: capitalize;
-        grid-column: 1;
-      }
-
-      .wrap *.inline {
-        grid-column: unset;
-      }
-
-      ox-i18n-selector {
-        --i18n-selector-field-width: var(--auth-input-field-width);
-        --i18n-selector-field-margin: var(--change-password-field-margin);
-        --i18n-selector-field-padding: var(--spacing-medium);
-        --i18n-selector-field-border-radius: var(--border-radius);
-        margin: var(--change-password-field-margin);
-      }
-
-      md-text-button {
-        text-transform: capitalize;
-      }
-
-      footer {
-        padding: 20px;
-        text-align: center;
-      }
-
-      footer p {
-        font-size: 14px;
-        margin-bottom: 5px;
-        color: var(--md-sys-color-on-background);
-      }
-
-      footer a {
-        color: var(--md-sys-color-primary);
-        text-decoration: none;
-        font-weight: bold;
-      }
-    `
-  ]
-
-  @property({ type: String }) userId?: string
-  @property({ type: String }) email?: string
-  @property({ type: String }) name?: string
-
-  @state() languages: { code: string; display: string }[] = []
-  @state() passwordRule: {
-    lowerCase?: boolean
-    upperCase?: boolean
-    digit?: boolean
-    specialCharacter?: boolean
-    allowRepeat?: boolean
-    useTightPattern?: boolean
-    useLoosePattern?: boolean
-    tightCharacterLength?: number
-    looseCharacterLength?: number
-  } = {}
-
-  @query('#name') nameEl!: HTMLInputElement
-  @query('#locale') localeEl!: HTMLInputElement
-
-  async connectedCallback(): Promise<void> {
-    super.connectedCallback()
-
-    const response = await client.query({
-      query: gql`
-        query {
-          passwordRule {
-            lowerCase
-            upperCase
-            digit
-            specialCharacter
-            allowRepeat
-            useTightPattern
-            useLoosePattern
-            tightCharacterLength
-            looseCharacterLength
-          }
-        }
-      `
-    })
-
-    this.passwordRule = response.data
-  }
-
-  async firstUpdated() {
-    auth.on('profile', ({ credential }) => {
-      this.setCredential(credential)
-    })
-
-    this.setCredential(auth.credential)
-
-    this.languages = await getLanguages()
-  }
-
-  setCredential(credential) {
-    if (credential) {
-      this.userId = credential.id
-      this.name = credential.name
-      this.email = credential.email
-    } else {
-      this.userId = ''
-      this.name = ''
-      this.email = ''
-    }
-  }
-
-  render() {
-    return html`
-      <div class="wrap">
-        <div class="user">${this.email || ''}</div>
-
-        <label for="name"><ox-i18n slot="title" msgid="label.name"></ox-i18n></label>
-        <input id="name" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />
-
-        <hr />
-
-        <label for="locale"><ox-i18n slot="title" msgid="label.language"></ox-i18n></label>
-        <ox-i18n-selector
-          id="locale"
-          @change=${e => this.onLocaleChanged(e.detail)}
-          value=${i18next.language || 'en-US'}
-          .languages=${this.languages}
-        ></ox-i18n-selector>
-
-        <hr />
-
-        <label for="change-password">
-          <ox-i18n msgid="label.password"></ox-i18n>
-        </label>
-
-        <change-password id="change-password" .passwordRule=${this.passwordRule}></change-password>
-
-        ${isAvailableWebauthn
-          ? html`
-              <md-text-button @click=${() => this.registerUser()}
-                >${i18next.t('button.security-key registration')}</md-text-button
-              >
-            `
-          : nothing}
-
-        <footer>
-          <p>
-            ${i18next.t('text.click login history')}
-            <a href="javascript:void(0);" @click=${this.openLoginHistory.bind(this)}
-              >${i18next.t('label.login_history')}</a
-            >
-          </p>
-        </footer>
-      </div>
-    `
-  }
-
-  async onNameChanged(name) {
-    if (!name) return
-
-    var oldName = this.name
-
-    try {
-      const message = await auth.updateProfile({
-        name
-      })
-
-      notify({
-        level: 'info',
-        message
-      })
-    } catch (e: any) {
-      this.nameEl.value = oldName || ''
-
-      notify({
-        level: 'error',
-        message: 'message' in e ? e.message : e
-      })
-    }
-  }
-
-  async onLocaleChanged(value) {
-    if (!value) return
-
-    var oldLocale = i18next.language
-
-    try {
-      const message = await auth.updateProfile({
-        locale: value
-      })
-
-      i18next.changeLanguage(value)
-
-      notify({
-        level: 'info',
-        message
-      })
-    } catch (e: any) {
-      this.localeEl.value = oldLocale
-
-      notify({
-        level: 'error',
-        message: 'message' in e ? e.message : e
-      })
-    }
-  }
-
-  openLoginHistory() {
-    openPopup(html` <my-login-history></my-login-history> `, {
-      title: i18next.t('label.login_history')
-    })
-  }
-
-  deleteUser() {
-    openPopup(html` <delete-user-popup></delete-user-popup> `, {
-      title: i18next.t('label.delete account')
-    })
-  }
-
-  async registerUser() {
-    try {
-      const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())
-      const attResp = await startRegistration(options)
-      const verification = await fetch('/auth/verify-registration', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(attResp)
-      }).then(res => res.json())
-
-      if (verification.verified) {
-        notify({
-          level: 'info',
-          message: i18next.t('text.user credential registered successfully')
-        })
-      } else {
-        console.error(await verification.text())
-
-        notify({
-          level: 'error',
-          message: i18next.t('error.user credential registeration not allowed')
-        })
-      }
-    } catch (error) {
-      notify({
-        level: 'error',
-        message: i18next.t('error.user credential registeration failed')
-      })
-    }
-  }
-
-  get applicationMeta() {
-    var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
-    var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
-    var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')
-
-    return {
-      icon: iconLink?.href || '',
-      title: titleMeta?.content || 'Things Factory',
-      description: descriptionMeta?.content || 'Reimagining Software'
-    }
-  }
-}

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

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