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

package/client/components/ownership-transfer-popup.ts

@@ -0,0 +1,110 @@
+import '@material/web/button/elevated-button.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'
+
+@customElement('ownership-transfer-popup')
+class OwnershipTransferPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+      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);
+      }
+      .input-container {
+        margin: auto;
+        display: flex;
+      }
+      .input-container md-elevated-button {
+        margin: auto 0px auto var(--spacing-large);
+      }
+    `
+  ]
+
+  @property({ type: Object }) user: any
+
+  @query('input[name=email]') emailInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <div class="container">
+        <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>
+        <div class="input-container">
+          <input name="email" />
+          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>
+        </div>
+      </div>
+    `
+  }
+
+  async transferOwnership() {
+    if (!this.doubleCheckEmail()) {
+      this.showToast(i18next.t('text.email is not matched'))
+
+      return
+    }
+
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_transfer_owner'),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation transferOwner($email: EmailAddress!) {
+            transferOwner(email: $email)
+          }
+        `,
+        variables: { email: this.user.email },
+        context: gqlContext()
+      })
+
+      if (!response.errors?.length) {
+        await OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.owner_transfer_completed'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        history.back()
+
+        this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))
+      }
+    } else {
+      history.back()
+    }
+  }
+
+  doubleCheckEmail() {
+    return this.emailInput.value === this.user.email
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}

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

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

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

@@ -0,0 +1,332 @@
+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'
+    }
+  }
+}