@things-factory/auth-ui 7.0.1-rc.0 → 7.0.1-rc.10

package/client/auth-style-sign.ts

@@ -3,7 +3,8 @@ import { css } from 'lit'
 export const AUTH_STYLE_SIGN = css`
   :host {
     display: flex;
-    background-color: var(--auth-background, var(--md-sys-color-primary));
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   :host *:focus {

package/client/components/abstract-sign.ts

@@ -1,8 +1,8 @@
-import { html, nothing } from 'lit'
-import base64url from 'base64url'
-
 import '@operato/i18n/ox-i18n.js'
 
+import { html, nothing } from 'lit'
+import { startAuthentication } from '@simplewebauthn/browser'
+
 import { i18next } from '@operato/i18n'
 import { notify } from '@operato/layout'
 
@@ -85,84 +85,42 @@ export abstract class AbstractSign extends AbstractAuthPage {
           <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
         </md-elevated-button>
         ${isAvailableWebauthn
-          ? html` <md-icon class="fingerprint" raised @click=${e => this.signinWithAuthn()}> fingerprint </md-icon>`
+          ? html` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
           : nothing}
       </div>
     `
   }
 
-  async signinWithAuthn() {
-    const response = await fetch('/auth/signin-webauthn/challenge', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      },
-      credentials: 'include'
-    })
-
-    if (!response.ok) {
-      notify({
-        level: 'error',
-        message: await response.text()
-      })
-
-      return
-    }
-
-    const options = await response.json()
-    const credential = (await navigator.credentials.get({
-      publicKey: {
-        challenge: Buffer.from(options.challenge, 'base64')
-      }
-    })) as PublicKeyCredential
-
-    if (!credential) {
-      notify({
-        level: 'error',
-        message: 'can not get user credential'
-      })
-
-      return
-    }
-
-    const assertionResponse = {
-      id: credential.id,
-      response: {
-        clientDataJSON: base64url.encode(Buffer.from(credential.response.clientDataJSON)),
-        authenticatorData: base64url.encode((credential.response as any).authenticatorData),
-        signature: base64url.encode((credential.response as any).signature),
-        userHandle: (credential.response as any).userHandle
-          ? base64url.encode((credential.response as any).userHandle)
-          : null
+  async authenticateUser() {
+    try {
+      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())
+      const assertionResp = await startAuthentication(options)
+      const verification = await fetch('/auth/signin-webauthn', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(assertionResp)
+      }).then(res => res.json())
+
+      if (verification.verified) {
+        const { redirectURL } = verification
+  
+        if (redirectURL) {
+          window.location.href = redirectURL
+        }
+      } else {
+        notify({
+          level: 'error',
+          message: verification.message
+        })
       }
-    } as AssertionResponse
-
-    if (credential.authenticatorAttachment) {
-      assertionResponse.authenticatorAttachment = credential.authenticatorAttachment as AuthenticatorAttachment
-    }
-
-    const signinResponse = await fetch('/auth/signin-webauthn', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      },
-      body: JSON.stringify(assertionResponse),
-      credentials: 'include'
-    })
-
-    if (!signinResponse.ok) {
+  
+    } catch (error) {
       notify({
         level: 'error',
-        message: await signinResponse.text()
+        message: i18next.t('error.authn verification failed')
       })
-    } else {
-      const { redirectURL } = await signinResponse.json()
-
-      if (redirectURL) {
-        window.location.href = redirectURL
-      }
     }
   }
 }

package/client/components/contact-us.ts

@@ -16,10 +16,6 @@ export class ContactUs extends localize(i18next)(LitElement) {
   static get styles() {
     return [
       css`
-        :host {
-          --md-theme-primary: var(--md-sys-color-primary);
-        }
-
         * {
           box-sizing: border-box;
         }

package/client/components/delete-user-popup.ts

@@ -14,6 +14,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
+        color: var(--popup-content-color);
         background-color: var(--popup-content-background-color);
         padding: var(--popup-content-padding);
       }

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

@@ -30,10 +30,6 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
       md-elevated-button {
         margin-right: var(--padding-narrow);
       }
-
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
     `
   ]
 

package/client/components/profile-component.ts

@@ -7,6 +7,7 @@ import './my-login-history'
 import base64url from 'base64url'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { startRegistration } from '@simplewebauthn/browser'
 
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -86,10 +87,6 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
         margin: var(--change-password-field-margin);
       }
 
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
-
       footer {
         padding: 20px;
         text-align: center;
@@ -168,7 +165,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
         ${isAvailableWebauthn
           ? html`
-              <md-text-button @click=${() => this.registerWebAuthn()}
+              <md-text-button @click=${() => this.registerUser()}
                 >${i18next.t('button.security-key registration')}</md-text-button
               >
             `
@@ -248,96 +245,35 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     })
   }
 
-  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
+  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'
         },
-        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'
-        }
+        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')
+        })
       }
-    })) as PublicKeyCredential
-
-    if (!credential) {
+    } catch (error) {
       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')
+        message: i18next.t('error.user credential registeration failed')
       })
     }
   }

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

@@ -56,9 +56,6 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         background-color: var(--md-sys-color-surface-variant);
       }
 
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
       md-outlined-button {
         background-color: var(--md-sys-color-surface-variant);
       }

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

@@ -71,10 +71,6 @@ class UserRoleEditor extends connect(store)(LitElement) {
         margin: 5px;
       }
 
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
-
       md-outlined-button {
         background-color: var(--md-sys-color-surface-variant);
       }

package/client/entries/auth/activate.ts

@@ -20,7 +20,8 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
 
       .wrap {
@@ -69,10 +70,8 @@ export class AuthActivate extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        --md-theme-primary: var(--md-sys-color-on-primary);
-        --md-theme-on-primary: var(--md-sys-color-primary);
-        --md-button-horizontal-padding: var(--spacing-medium);
-        --md-button-ink-color: var(--md-sys-color-primary);
+        --md-elevated-button-horizontal-padding: var(--spacing-medium);
+        --md-elevated-button-ink-color: var(--md-sys-color-primary);
       }
 
       contact-us {

package/client/entries/auth/checkin.ts

@@ -21,12 +21,14 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         margin: auto;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
         height: 100vh;
         height: 100dvh;
       }
       .header {
         background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
         height: var(--checkin-header-height);
       }
       .content {
@@ -38,6 +40,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         margin: var(--margin-wide) 0;
         padding: 0;
         background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         list-style: none;
@@ -47,13 +50,13 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         margin-bottom: -1px;
         padding: var(--padding-default) var(--padding-wide);
         font-size: 18px;
-        color: var(--md-sys-color-secondary);
         text-align: left;
 
         cursor: pointer;
       }
       li:hover {
         background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
       }
       li span {
         display: block;

package/client/entries/auth/result.ts

@@ -18,7 +18,8 @@ export class AuthResult extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
       .wrap {
         display: block;
@@ -70,16 +71,17 @@ export class AuthResult extends localize(i18next)(LitElement) {
         font: bold 14px var(--theme-font);
         color: var(--md-sys-color-primary);
       }
+
       #button-area {
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         padding-top: 10px;
       }
+
       md-elevated-button {
-        --md-theme-primary: var(--auth-button-background-color);
-        --md-theme-on-primary: var(--md-sys-color-primary);
         --md-button-horizontal-padding: var(--padding-default);
         --md-button-ink-color: var(--md-sys-color-primary);
       }
+
       .lottie-container {
         width: 100%;
         height: 300px;

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -61,10 +61,6 @@ class OAuth2DecisionPage extends LitElement {
       md-elevated-button {
         margin-right: var(--padding-narrow);
       }
-
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
     `
   ]
 

package/client/pages/app-binding/app-binding.ts

@@ -25,16 +25,19 @@ class AppBinding extends connect(store)(PageView) {
         background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
+
       [icon] {
         position: absolute;
         top: 10px;
@@ -42,68 +45,77 @@ class AppBinding extends connect(store)(PageView) {
 
         max-width: 80px;
       }
+
       [icon] img {
         max-width: 100%;
         max-height: 100%;
       }
 
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
-
-        flex: 1;
-      }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
-      }
-      form {
-        max-width: var(--content-container-max-width);
-      }
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+        input {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
       button,
       [button-in-field] {
         background-color: var(--button-background-color);
@@ -118,10 +130,12 @@ class AppBinding extends connect(store)(PageView) {
         float: right;
         text-decoration: none;
       }
+
       button:hover {
         border: var(--button-activ-border);
         box-shadow: var(--button-active-box-shadow);
       }
+
       [button-in-field] {
         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
@@ -129,10 +143,12 @@ class AppBinding extends connect(store)(PageView) {
         right: 0;
         max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;

package/client/pages/app-binding/app-bindings.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -16,15 +19,23 @@ class AppBindings extends connect(store)(PageView) {
 
         overflow: auto;
       }
+
       md-elevated-button {
-        margin-right: 0;
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
         float: right;
+        margin-top: var(--margin-default);
+        text-transform: capitalize;
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
@@ -36,15 +47,19 @@ class AppBindings extends connect(store)(PageView) {
         margin: var(--margin-wide) 0;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -55,12 +70,14 @@ class AppBindings extends connect(store)(PageView) {
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
         color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
@@ -68,9 +85,11 @@ class AppBindings extends connect(store)(PageView) {
         display: block;
         text-decoration: none;
       }
+
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }