@things-factory/auth-ui 7.0.1-alpha.88 → 7.0.1-alpha.90

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/invite-customer.ts

@@ -18,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) {
@@ -37,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/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'
@@ -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

@@ -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,13 +4,15 @@ 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 = [
@@ -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 {
@@ -160,6 +162,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 +243,111 @@ 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({ email: this.email }),
+      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: {
+          /* options.user.id must be the user's email */
+          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>
     `
   }

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

@@ -1,3 +1,6 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+
 import './ownership-transfer-popup'
 import './role-selector'
 
@@ -11,12 +14,13 @@ import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { store } from '@operato/shell'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
+import { ButtonContainerStyles } from '@operato/styles'
 import { RoleSelector } from './role-selector'
 
 @customElement('user-role-editor')
 class UserRoleEditor extends connect(store)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -51,9 +55,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
       [detail] {
         background-color: rgba(var(--primary-color-rgb), 0.05);
       }
-      [detail] mwc-icon {
+      [detail] md-icon {
+        --md-icon-size: var(--fontsize-default);
         vertical-align: middle;
-        --mdc-icon-size: var(--fontsize-default);
         color: var(--primary-color);
       }
       [detail] li {
@@ -63,20 +67,15 @@ class UserRoleEditor extends connect(store)(LitElement) {
         flex: 1;
       }
 
-      [buttons] {
-        margin: 0;
-        padding: 5px;
-        background-color: rgba(var(--primary-color-rgb), 0.2);
-      }
-
-      mwc-button {
+      md-elevated-button {
         margin: 5px;
       }
 
       [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);
       }
 
@@ -117,7 +116,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
                 ? html`
                     <li>
                       <span>
-                        <mwc-icon>email</mwc-icon>
+                        <md-icon>email</md-icon>
                         ${user.email}
                       </span>
                     </li>
@@ -141,10 +140,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
           `
         : ''}
 
-      <div buttons>
+      <div class="button-container">
         ${this.isRoleEditable()
-          ? html` <mwc-button
-              raised
+          ? html` <md-elevated-button
               @click=${() => {
                 const { availableRoles, selectedRoles } = Array.from(
                   this.renderRoot.querySelectorAll('role-selector') as NodeListOf<RoleSelector>
@@ -169,46 +167,37 @@ class UserRoleEditor extends connect(store)(LitElement) {
                 )
                 this.onSave(user, availableRoles, selectedRoles)
               }}
-              label=${String(i18next.t('button.save'))}
-            ></mwc-button>`
+              >${String(i18next.t('button.save'))}</md-elevated-button
+            >`
           : ''}
         ${user.userType === 'user'
           ? html`
               ${this.isTransferable(user)
                 ? html`
-                    <mwc-button
-                      raised
-                      danger
-                      @click=${() => this.onTransfer(user)}
-                      label=${String(i18next.t('button.transfer owner'))}
-                    ></mwc-button>
+                    <md-elevated-button danger @click=${() => this.onTransfer(user)}
+                      >${String(i18next.t('button.transfer owner'))}</md-elevated-button
+                    >
                   `
                 : ''}
               ${this.isPasswordResettable(user)
-                ? html`<mwc-button
-                    raised
-                    danger
-                    @click="${() => this.onResetPassword(user)}"
-                    label=${String(i18next.t('title.reset password'))}
-                  ></mwc-button>`
+                ? html`<md-elevated-button danger @click=${() => this.onResetPassword(user)}
+                    >${String(i18next.t('title.reset password'))}</md-elevated-button
+                  >`
                 : ''}
             `
           : ''}
         ${this.isRemovable(user)
           ? html`
-              <mwc-button
-                raised
-                danger
-                label=${String(i18next.t('button.delete user'))}
-                @click=${() => this.onDelete(user)}
-              ></mwc-button>
+              <md-elevated-button danger @click=${() => this.onDelete(user)}
+                >${String(i18next.t('button.delete user'))}</md-elevated-button
+              >
             `
           : ''}
         ${this.isActivatable(user)
-          ? html`<mwc-button raised danger @click="${() => this.onActivate(user)}" label="activate"></mwc-button>`
+          ? html`<md-elevated-button danger @click=${() => this.onActivate(user)}>activate</md-elevated-button>`
           : ''}
         ${this.isInactivatable(user)
-          ? html`<mwc-button raised danger @click="${() => this.onInactivate(user)}" label="inactivate"></mwc-button>`
+          ? html`<md-elevated-button danger @click=${() => this.onInactivate(user)}>inactivate</md-elevated-button>`
           : ''}
       </div>
     `

package/client/entries/auth/activate.ts

@@ -1,4 +1,6 @@
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+
 import '@operato/i18n/ox-i18n.js'
 import '@operato/layout/ox-snack-bar.js'
 import '@operato/lottie-player'
@@ -66,11 +68,11 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         padding-top: 10px;
       }
 
-      mwc-button {
-        --mdc-theme-primary: var(--auth-button-background-color);
-        --mdc-theme-on-primary: var(--primary-color);
-        --mdc-button-horizontal-padding: var(--padding-default);
-        --mdc-button-ink-color: var(--primary-color);
+      md-elevated-button {
+        --md-theme-primary: var(--auth-button-background-color);
+        --md-theme-on-primary: var(--primary-color);
+        --md-button-horizontal-padding: var(--padding-default);
+        --md-button-ink-color: var(--primary-color);
       }
 
       contact-us {
@@ -162,20 +164,18 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         </form>
 
         <div id="button-area">
-          <mwc-button
-            raised
-            icon="mail_outline"
-            label=${i18next.t('label.send activation email')}
-            @click=${e => this.requestResend(e)}
-          ></mwc-button>
-          <mwc-button
-            raised
-            icon="home"
-            label=${i18next.t('button.go to home')}
+          <md-elevated-button @click=${e => this.requestResend(e)}>
+            <md-icon slot="icon">mail_outline</md-icon>
+            ${i18next.t('label.send activation email')}
+          </md-elevated-button>
+          <md-elevated-button
             @click=${e => {
               window.location.replace('/auth/signin')
             }}
-          ></mwc-button>
+          >
+            <md-icon slot="icon">home</md-icon>
+            ${i18next.t('button.go to home')}
+          </md-elevated-button>
         </div>
         <contact-us></contact-us>