@things-factory/auth-ui 7.0.1-alpha.10 → 7.0.1-alpha.100

package/client/components/create-role.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-textfield'
+import '@material/web/textfield/filled-text-field.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -12,7 +12,7 @@ import { OxPrompt } from '@operato/popup/ox-prompt.js'
 class CreateRole extends localize(i18next)(LitElement) {
   static styles = css`
     :host {
-      --mdc-text-field-fill-color: var(--theme-white-color);
+      --md-text-field-fill-color: var(--theme-white-color);
       background-color: var(--theme-white-color);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);
@@ -28,7 +28,7 @@ class CreateRole extends localize(i18next)(LitElement) {
       align-items: center;
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
 
@@ -37,7 +37,7 @@ class CreateRole extends localize(i18next)(LitElement) {
         grid-template-columns: 1fr 1fr;
       }
 
-      mwc-button {
+      md-outlined-button {
         grid-column: span 2;
 
         margin: var(--input-margin);
@@ -50,22 +50,10 @@ class CreateRole extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <mwc-textfield
-        type="text"
-        name="name"
-        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
-      ></mwc-textfield>
-      <mwc-textfield
-        type="text"
-        name="description"
-        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
-      ></mwc-textfield>
-
-      <mwc-button
-        @click=${this.onCreateRole.bind(this)}
-        outlined
-        label=${String(i18next.t('button.create'))}
-      ></mwc-button>
+      <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>
     `
   }
 

package/client/components/create-user.ts

@@ -7,7 +7,7 @@ import { i18next } from '@operato/i18n'
 class CreateUser extends LitElement {
   static styles = css`
     :host {
-      --mdc-text-field-fill-color: var(--theme-white-color);
+      --md-text-field-fill-color: var(--theme-white-color);
       background-color: var(--theme-white-color);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);
@@ -23,7 +23,7 @@ class CreateUser extends LitElement {
       align-items: center;
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
 
@@ -32,7 +32,7 @@ class CreateUser extends LitElement {
         grid-template-columns: 1fr 1fr;
       }
 
-      mwc-button {
+      md-outlined-button {
         grid-column: span 2;
 
         margin: var(--input-margin);
@@ -45,19 +45,11 @@ class CreateUser extends LitElement {
 
   render() {
     return html`
-      <mwc-textfield
-        type="text"
-        name="name"
-        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-      ></mwc-textfield>
-
-      <mwc-textfield type="email" name="email" label=${String(i18next.t('field.email'))}></mwc-textfield>
-
-      <mwc-button
-        @click=${this.onCreateUser.bind(this)}
-        outlined
-        label=${String(i18next.t('button.create'))}
-      ></mwc-button>
+      <md-outlined-text-field type="text" name="name" label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}></md-outlined-text-field>
+
+      <md-outlined-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-outlined-text-field>
+
+      <md-outlined-button @click=${this.onCreateUser.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>
     `
   }
 

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

@@ -5,7 +5,7 @@ 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'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 
 @customElement('delete-user-popup')
 export class DeleteUserPopup extends localize(i18next)(LitElement) {

package/client/components/domain-switch.ts

@@ -1,4 +1,6 @@
-import { css, html, LitElement } from 'lit'
+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'
 
@@ -28,7 +30,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         padding: var(--padding-default);
       }
 
-      mwc-icon {
+      md-icon {
         background-color: rgba(var(--primary-color-rgb), 0.8);
         margin-right: var(--margin-narrow);
         padding: 2px;
@@ -56,7 +58,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         padding: 0 !important;
         border-bottom: none;
       }
-      :host([dark]) mwc-icon {
+      :host([dark]) md-icon {
         background-color: var(--secondary-text-color);
         margin: 1px 4px 0px 0px;
         padding: 1px 2px;
@@ -90,6 +92,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
   @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 || []
@@ -98,7 +101,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
 
     return html`
       <div>
-        <mwc-icon>outlined_flag</mwc-icon>
+        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}
         ${domains.length <= 1
           ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `
           : html`

package/client/components/invite-customer.ts

@@ -1,5 +1,3 @@
-import '@things-factory/auth-ui'
-
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -20,7 +18,7 @@ class InviteCustomer extends localize(i18next)(LitElement) {
         min-width: 250px;
         font: var(--input-font);
       }
-      mwc-button {
+      md-outlined-button {
         margin: var(--input-margin);
       }
       @media screen and (max-width: 480px) {
@@ -39,25 +37,20 @@ class InviteCustomer extends localize(i18next)(LitElement) {
     return html`
       <div>
         <input id="customer-name" required />
-        <mwc-button
-          @click=${this.invite.bind(this)}
-          outlined
-          icon="group_add"
-          label=${String(i18next.t('label.invite customer'))}
-        ></mwc-button>
+        <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.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') })
-        )
+        throw new Error(i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') }))
       }
 
       if (

package/client/components/invite-user.ts

@@ -26,7 +26,7 @@ class InviteUser extends localize(i18next)(LitElement) {
       font: var(--input-font);
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
   `
@@ -36,12 +36,7 @@ class InviteUser extends localize(i18next)(LitElement) {
   render() {
     return html`
       <input name="email" type="email" required name="invite-email" autocapitalize="off" />
-      <mwc-button
-        @click=${this.invite.bind(this)}
-        outlined
-        icon="group_add"
-        label=${String(i18next.t('label.invite user'))}
-      ></mwc-button>
+      <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>
     `
   }
 

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

@@ -14,7 +14,7 @@ class MyLoginHistory extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
+      background-color: var(--md-sys-color-background);
       padding: var(--padding-wide);
       overflow: auto;
     }

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

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -15,7 +15,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
         overflow: auto;
       }
@@ -36,7 +36,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         margin: auto;
         display: flex;
       }
-      .input-container mwc-button {
+      .input-container md-elevated-button {
         margin: auto 0px auto var(--padding-wide);
       }
     `
@@ -52,7 +52,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>
         <div class="input-container">
           <input name="email" />
-          <mwc-button raised @click=${this.transferOwnership}>${i18next.t('button.confirm')}</mwc-button>
+          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>
         </div>
       </div>
     `

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

@@ -1,5 +1,5 @@
-import '@material/mwc-icon'
-import '@things-factory/auth-ui'
+import '@material/web/button/elevated-button.js'
+import './role-selector.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -8,12 +8,14 @@ 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;
@@ -24,16 +26,13 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
         font: normal 15px var(--theme-font);
         color: var(--secondary-color);
       }
-      [buttons] {
-        margin: 0;
-        padding: var(--padding-default);
-        background-color: rgba(var(--primary-color-rgb), 0.2);
-      }
-      mwc-button {
+
+      md-elevated-button {
         margin-right: var(--padding-narrow);
       }
+
       [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+        --md-theme-primary: var(--md-danger-button-primary-color);
       }
     `
   ]
@@ -51,14 +50,9 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
     return html`
       <role-selector .roles="${roles}" .userRoles="${grantingRoles}"></role-selector>
 
-      <div buttons>
-        <mwc-button @click=${this.onSave} raised label="${i18next.t('button.save')}"></mwc-button>
-        <mwc-button
-          @click=${this.onTerminateContract}
-          raised
-          danger
-          label="${i18next.t('button.terminate contract')}"
-        ></mwc-button>
+      <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>
     `
   }

package/client/components/profile-component.ts

@@ -4,20 +4,22 @@ import './change-password'
 import './delete-user-popup'
 import './my-login-history'
 
-import { css, html, LitElement } from 'lit'
+import base64url from 'base64url'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 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(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: 15px 0;
       }
       .wrap {
@@ -36,12 +38,12 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       }
 
       input {
-        margin: var(--change-password-field-margin);
-        border: var(--input-field-border);
-        padding: var(--input-padding);
+        margin: var(--margin-narrow) 0;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        padding: 9px;
         border-radius: var(--border-radius);
-        font: var(--input-font);
-        width: var(--change-password-field-width);
+        font: var(--auth-input-field-font);
+        width: var(--auth-input-field-width);
       }
       input:focus {
         border: 1px solid var(--focus-background-color);
@@ -85,7 +87,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       }
 
       [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+        --md-theme-primary: var(--md-danger-button-primary-color);
       }
 
       footer {
@@ -106,6 +108,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     `
   ]
 
+  @property({ type: String }) userId?: string
   @property({ type: String }) email?: string
   @property({ type: String }) name?: string
 
@@ -126,9 +129,11 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
   setCredential(credential) {
     if (credential) {
+      this.userId = credential.id
       this.name = credential.name
       this.email = credential.email
     } else {
+      this.userId = ''
       this.name = ''
       this.email = ''
     }
@@ -160,6 +165,14 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
         <change-password id="change-password"></change-password>
 
+        ${isAvailableWebauthn
+          ? html`
+              <md-text-button @click=${() => this.registerWebAuthn()}
+                >${i18next.t('button.security-key registration')}</md-text-button
+              >
+            `
+          : nothing}
+
         <footer>
           <p>
             ${i18next.t('text.click login history')}
@@ -233,4 +246,110 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       title: i18next.t('label.delete account')
     })
   }
+
+  async registerWebAuthn() {
+    const challenge = await fetch('/auth/register-webauthn/challenge', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      },
+      body: JSON.stringify({ id: this.userId }),
+      credentials: 'include'
+    })
+
+    if (!challenge.ok) {
+      notify({
+        level: 'error',
+        message: await challenge.text()
+      })
+
+      return
+    }
+
+    const options = await challenge.json()
+
+    const credential = (await navigator.credentials.create({
+      publicKey: {
+        rp: {
+          name: this.applicationMeta.title
+        },
+        user: {
+          id: Uint8Array.from(base64url.toBuffer(options.user.id)).buffer,
+          name: options.user.name,
+          displayName: options.user.displayName
+        },
+        challenge: Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0)),
+        pubKeyCredParams: [
+          {
+            type: 'public-key',
+            alg: -7 // ES256
+          },
+          {
+            type: 'public-key',
+            alg: -257 // RS256
+          }
+        ],
+        authenticatorSelection: {
+          userVerification: 'preferred'
+        }
+      }
+    })) as PublicKeyCredential
+
+    if (!credential) {
+      notify({
+        level: 'error',
+        message: 'can not get user credential'
+      })
+
+      return
+    }
+
+    const response = credential.response as AuthenticatorAttestationResponse
+
+    var body = {
+      response: {
+        clientDataJSON: Buffer.from(response.clientDataJSON).toString('base64'),
+        attestationObject: Buffer.from(response.attestationObject).toString('base64')
+      } as any
+    }
+
+    if (response.getTransports) {
+      body.response.transports = response.getTransports()
+    }
+
+    const signinResponse = await fetch('/auth/signin-webauthn', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      },
+      body: JSON.stringify(body),
+      credentials: 'include'
+    })
+
+    if (!signinResponse.ok) {
+      notify({
+        level: 'error',
+        message: await signinResponse.text()
+      })
+    } else {
+      notify({
+        level: 'info',
+        message: i18next.t('text.user credential registered successfully')
+      })
+    }
+  }
+
+  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-privilege-editor.ts

@@ -5,10 +5,12 @@ import { customElement, property } 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;
@@ -49,21 +51,15 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         font-weight: bold;
       }
 
-      [buttons] {
-        margin: 0;
-        padding: 5px;
-        background-color: rgba(var(--primary-color-rgb), 0.2);
-      }
-
-      mwc-button {
+      md-elevated-button {
         margin: 5px;
         background-color: var(--theme-white-color);
       }
 
       [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+        --md-theme-primary: var(--md-danger-button-primary-color);
       }
-      [outlined] {
+      md-outlined-button {
         background-color: var(--theme-white-color);
       }
 
@@ -106,14 +102,11 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         )}
       </ul>
 
-      <div buttons>
-        <mwc-button @click=${e => this.onSave()} outlined label=${String(i18next.t('button.save'))}></mwc-button>
-        <mwc-button
-          @click=${e => this.onDeleteRole()}
-          raised
-          danger
-          label=${String(i18next.t('button.delete role'))}
-        ></mwc-button>
+      <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>
     `
   }