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

package/client/auth-style-sign.ts

@@ -71,34 +71,45 @@ export const AUTH_STYLE_SIGN = css`
     text-align: left;
   }
 
-  .field mwc-textfield {
+  .submit-buttons-container {
+    grid-column: 1 / -1;
+    text-align: center;
+
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .fingerprint {
+    color: var(--md-sys-color-primary-container);
+    border: 1.5px solid var(--md-sys-color-primary-container);
+    border-radius: 20%;
+    width: 36px;
+    height: 36px;
+  }
+
+  .field md-filled-text-field {
+    grid-column: 1 / -1;
     width: 100%;
-    --mdc-theme-primary: var(--auth-input-color);
-    --mdc-theme-error: #fdd55f;
-    --mdc-text-field-fill-color: transparent;
-    --mdc-text-field-ink-color: var(--auth-input-color);
-    --mdc-text-field-label-ink-color: var(--auth-input-color);
-    --mdc-text-field-idle-line-color: var(--auth-input-color);
-    --mdc-text-field-hover-line-color: var(--auth-input-color);
-    font: var(--auth-input-font);
   }
 
-  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-text-button,
+  md-elevated-button {
     grid-column: 1 / -1;
+    flex: 1;
   }
 
   .wrap .link {
     text-decoration: none;
     justify-self: flex-start;
-    color: var(--auth-title-color);
   }
 
-  .wrap .link > mwc-button {
-    --mdc-theme-primary: var(--auth-title-color);
+  .wrap .link md-text-button {
+    --md-text-button-label-text-color: var(--md-sys-color-primary-container);
+  }
+
+  .wrap .link md-icon {
+    color: var(--md-sys-color-primary-container);
   }
 
   #locale-area {
@@ -111,7 +122,7 @@ export const AUTH_STYLE_SIGN = css`
     display: flex;
     align-items: center;
     color: var(--theme-white-color);
-    --mdc-icon-size: 16px;
+    --md-icon-size: 16px;
   }
 
   #locale-selector {

package/client/components/abstract-auth-page.ts

@@ -1,7 +1,8 @@
-import '@material/mwc-button'
-import '@material/mwc-icon'
-import '@material/mwc-icon-button'
-import '@material/mwc-textfield'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/text-button.js'
+import '@material/web/textfield/filled-text-field.js'
+
 import '@operato/lottie-player'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/i18n/ox-i18n-selector.js'
@@ -31,17 +32,22 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
         height: 100vh;
         height: 100dvh;
       }
+
       .content {
         flex: 1;
         overflow: auto;
       }
 
-      [home] {
+      .home {
         position: absolute;
+        padding: var(--padding-dufault, 9px);
+        left: 20px;
         top: 10px;
-        left: 10px;
-        font-size: 2em;
-        color: white;
+        color: var(--theme-white-color);
+      }
+
+      div.field {
+        margin-bottom: var(--margin-default);
       }
 
       [hidden] {
@@ -83,7 +89,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
     var { icon, title, description } = this.applicationMeta
 
     return html`
-      <div class="content">
+      <div class="content md-typescale-display-medium">
         <div class="wrap">
           <div class="auth-brand">
             <img src=${icon} />
@@ -107,7 +113,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
             ${this.links}
             ${!disableUserFavoredLanguage
               ? html` <div id="locale-area">
-                  <label for="locale-selector"><mwc-icon>language</mwc-icon></label>
+                  <label for="locale-selector"><md-icon>language</md-icon></label>
                   <ox-i18n-selector
                     id="locale-selector"
                     value=${i18next.language || 'en-US'}
@@ -124,7 +130,9 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
           </div>
         </div>
 
-        <mwc-icon-button home icon="home" @click=${e => (window.location.href = '/')}></mwc-icon-button>
+        <md-icon-button class="home" @click=${e => (window.location.href = '/')}
+          ><md-icon>home</md-icon></md-icon-button
+        >
         <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
 
         ${isSafari()
@@ -140,7 +148,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
 
   firstUpdated() {
     setTimeout(() => {
-      ;(this.renderRoot.querySelector('mwc-textfield') as any).focus()
+      ;(this.renderRoot.querySelector('md-filled-text-field') as any).focus()
     }, 100)
 
     this.formEl.reset = () => {
@@ -164,35 +172,37 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
 
   get formfields() {
     const email = this.data?.email || ''
+    // .validationMessage=${String(i18next.t('text.invalid-email'))}
 
     return html`
       <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
 
       <div class="field">
-        <mwc-textfield
+        <md-filled-text-field
           name="email"
           type="email"
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          .validationMessage=${String(i18next.t('text.invalid-email'))}
           autocomplete="username"
           autocapitalize="off"
-        ></mwc-textfield>
+          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+        >
       </div>
       <div class="field">
-        <mwc-textfield
+        <md-filled-text-field
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
           autocomplete="current-password"
           required
-        ></mwc-textfield>
+          ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
+        >
       </div>
 
-      <mwc-button class="ui" type="submit" raised @click=${e => this._onSubmit(e)}>
+      <md-elevated-button class="ui" type="submit" raised @click=${e => this._onSubmit(e)}>
         <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
-      </mwc-button>
+      </md-elevated-button>
     `
   }
 
@@ -203,17 +213,26 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
       ${!disableUserSignupProcess
         ? html`
             <a class="link" href="/auth/signup">
-              <mwc-button icon="add_task"><ox-i18n msgid="field.sign up"></ox-i18n></mwc-button>
+              <md-text-button>
+                <md-icon slot="icon">add_task</md-icon>
+                <ox-i18n msgid="field.sign up"></ox-i18n>
+              </md-text-button>
             </a>
             <a class="link" href="/auth/forgot-password">
-              <mwc-button icon="lock_open"><ox-i18n msgid="field.forgot-password"></ox-i18n></mwc-button>
+              <md-text-button>
+                <md-icon slot="icon">lock_open</md-icon>
+                <ox-i18n msgid="field.forgot-password"></ox-i18n>
+              </md-text-button>
             </a>
           `
         : nothing}
       ${ssoLinks.map(
         sso => html`
           <a class="link" href=${sso.link}>
-            <mwc-button icon="badge">${i18next.t('label.signin with', { title: sso.title })}</mwc-button>
+            <md-text-button>
+              <md-icon slot="icon">badge</md-icon>
+              ${i18next.t('label.signin with', { title: sso.title })}
+            </md-text-button>
           </a>
         `
       )}

package/client/components/abstract-password-reset.ts

@@ -1,5 +1,7 @@
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/filled-text-field.js'
+
 import '@operato/lottie-player'
 import '../components/profile-component'
 import '@operato/i18n/ox-i18n.js'
@@ -77,7 +79,7 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
           >
             <input name="token" type="hidden" .value=${this.token || ''} required />
             <div class="field">
-              <mwc-textfield
+              <md-filled-text-field
                 name="password"
                 type="password"
                 label=${String(i18next.t('label.password'))}
@@ -89,26 +91,26 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                   this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
                 }}
                 required
-              ></mwc-textfield>
+              ></md-filled-text-field>
             </div>
 
             <div class="field">
-              <mwc-textfield
+              <md-filled-text-field
                 id="confirm-password"
                 name="confirm-password"
                 type="password"
                 label=${String(i18next.t('field.confirm password'))}
                 required
-              ></mwc-textfield>
+              ></md-filled-text-field>
             </div>
 
-            <mwc-button id="submit-button" type="submit" raised @click=${e => this._onSubmit(e)}>
+            <md-elevated-button id="submit-button" type="submit" @click=${e => this._onSubmit(e)}>
               <ox-i18n msgid="${this.submitButtonLabel}"></ox-i18n>
-            </mwc-button>
+            </md-elevated-button>
 
             ${!disableUserFavoredLanguage
               ? html` <div id="locale-area">
-                  <label for="locale-selector"><mwc-icon>language</mwc-icon></label>
+                  <label for="locale-selector"><md-icon>language</md-icon></label>
                   <ox-i18n-selector
                     id="locale-selector"
                     value=${i18next.language || 'en-US'}

package/client/components/abstract-sign.ts

@@ -1,5 +1,28 @@
+import { html, nothing } from 'lit'
+import base64url from 'base64url'
+
+import '@operato/i18n/ox-i18n.js'
+
+import { i18next } from '@operato/i18n'
+import { notify } from '@operato/layout'
+
 import { AbstractAuthPage } from './abstract-auth-page.js'
 
+const isAvailableWebauthn = 'PublicKeyCredential' in window
+
+interface AssertionResponse {
+  id: string
+  rawId?: number[]
+  response: {
+    authenticatorData: string
+    clientDataJSON: string
+    signature: string
+    userHandle: string | null
+  }
+  type: PublicKeyCredentialType
+  authenticatorAttachment?: AuthenticatorAttachment
+}
+
 export abstract class AbstractSign extends AbstractAuthPage {
   async submit() {
     this.formEl.submit()
@@ -19,4 +42,119 @@ export abstract class AbstractSign extends AbstractAuthPage {
       }
     }
   }
+
+  get formfields() {
+    const email = this.data?.email || ''
+
+    return html`
+      <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
+
+      <div class="field">
+        <md-filled-text-field
+          name="email"
+          type="email"
+          label=${String(i18next.t('field.email'))}
+          required
+          .value=${email}
+          autocomplete="username"
+          autocapitalize="off"
+          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+        >
+      </div>
+      <div class="field">
+        <md-filled-text-field
+          name="password"
+          type="password"
+          label=${String(i18next.t('field.password'))}
+          autocomplete="current-password"
+          required
+          ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
+        >
+      </div>
+
+      <div class="submit-buttons-container">
+        <md-elevated-button class="submit-button" type="submit" raised @click=${e => this._onSubmit(e)}>
+          <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>`
+          : 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
+      }
+    } 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) {
+      notify({
+        level: 'error',
+        message: await signinResponse.text()
+      })
+    } else {
+      const { redirectURL } = await signinResponse.json()
+
+      if (redirectURL) {
+        window.location.href = redirectURL
+      }
+    }
+  }
 }

package/client/components/change-password.ts

@@ -40,7 +40,7 @@ export class ChangePassword extends localize(i18next)(LitElement) {
         text-transform: capitalize;
       }
 
-      mwc-button {
+      md-elevated-button {
         margin: var(--margin-narrow) auto var(--margin-default) auto;
       }
 
@@ -78,7 +78,7 @@ export class ChangePassword extends localize(i18next)(LitElement) {
           <input type="password" name="confirm_pass" placeholder=${i18next.t('text.confirm password')} required />
         </div>
 
-        <mwc-button raised label="${i18next.t('text.change password')}" @click=${this.submit.bind(this)}></mwc-button>
+        <md-elevated-button @click=${this.submit.bind(this)}>${i18next.t('text.change password')}</md-elevated-button>
       </form>
     `
   }

package/client/components/contact-us.ts

@@ -1,7 +1,8 @@
-import '@material/mwc-textarea'
-import '@material/mwc-textfield'
-import '@material/mwc-button'
-import '@material/mwc-dialog'
+import '@material/web/button/text-button.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/dialog/dialog.js'
+
 import '@operato/i18n'
 
 import { css, html, LitElement } from 'lit'
@@ -16,7 +17,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
     return [
       css`
         :host {
-          --mdc-theme-primary: var(--primary-color);
+          --md-theme-primary: var(--primary-color);
         }
 
         * {
@@ -43,16 +44,16 @@ export class ContactUs extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <mwc-button raised label=${i18next.t('button.need help')} @click=${e => (this.dialog.open = true)}></mwc-button>
+      <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>
 
-      <mwc-dialog id="dialog" heading=${i18next.t('title.need help')}>
+      <md-dialog id="dialog" heading=${i18next.t('title.need help')}>
         <form action="" method="POST">
           <input id="subject-input" name="subject" type="hidden" />
           <input id="sender-input" name="sender" type="hidden" />
           <input id="content-input" name="content" type="hidden" />
         </form>
         <div id="input-form">
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             label=${i18next.t('label.subject')}
             dialogInitialFocus
@@ -61,8 +62,8 @@ export class ContactUs extends localize(i18next)(LitElement) {
               const val = e.target.value
               this.subjectInput.value = val
             }}
-          ></mwc-textfield>
-          <mwc-textfield
+          ></md-filled-text-field>
+          <md-filled-text-field
             type="text"
             name="sender"
             label=${i18next.t('label.email')}
@@ -71,9 +72,10 @@ export class ContactUs extends localize(i18next)(LitElement) {
               const val = e.target.value
               this.senderInput.value = val
             }}
-          ></mwc-textfield>
-          <mwc-textarea
+          ></md-filled-text-field>
+          <md-filled-text-field
             name="content"
+            type="textarea"
             label=${i18next.t('label.content')}
             required
             @keydown=${e => e.stopPropagation()}
@@ -81,11 +83,11 @@ export class ContactUs extends localize(i18next)(LitElement) {
               const val = e.target.value
               this.contentInput.value = val
             }}
-          ></mwc-textarea>
+          ></md-filled-text-field>
         </div>
-        <mwc-button slot="primaryAction" type="submit" label=${i18next.t('button.submit')} raised @click=${e => this._submit(e)}></mwc-button>
-        <mwc-button slot="secondaryAction" dialogAction="cancel" label=${i18next.t('button.cancel')}></mwc-button>
-      </mwc-dialog>
+        <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}>${i18next.t('button.submit')}</md-elevated-button>
+        <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
+      </md-dialog>
     `
   }
 

package/client/components/create-domain-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'
@@ -7,10 +7,12 @@ import { customElement, query } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('create-domain-popup')
 class CreateDomainPopup extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -19,13 +21,16 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         padding: var(--padding-wide);
         overflow: auto;
       }
+
       input.checkValidName {
         background-color: #fce6e6;
       }
-      mwc-button {
+
+      md-elevated-button {
         display: flex;
         justify-content: center;
       }
+
       label {
         display: flex;
         flex-direction: column;
@@ -34,6 +39,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         color: var(--label-color);
         text-transform: var(--label-text-transform);
       }
+
       input {
         border: var(--border-dark-color);
         border-radius: var(--border-radius);
@@ -44,12 +50,10 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
 
         flex: 1;
       }
+
       [field] {
         grid-column: span 2;
       }
-      [buttons] {
-        margin-top: auto;
-      }
     `
   ]
 
@@ -71,8 +75,8 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         <label>${i18next.t('label.description')}<input type="text" name="description" /></label>
       </div>
 
-      <div buttons>
-        <mwc-button raised @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</md-elevated-button>
       </div>
     `
   }

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>
     `
   }