@things-factory/auth-ui 7.0.0-alpha.9 → 7.0.0

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);
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   :host *:focus {
@@ -14,10 +15,6 @@ export const AUTH_STYLE_SIGN = css`
     box-sizing: border-box;
   }
 
-  ::placeholder {
-    color: var(--opacity-light-color);
-    font: var(--auth-input-font);
-  }
   .wrap {
     display: block;
     width: 450px;
@@ -26,13 +23,15 @@ export const AUTH_STYLE_SIGN = css`
     padding-bottom: 100px;
     text-align: center;
   }
+
   .auth-brand {
-    color: #fff;
+    color: var(--md-sys-color-on-primary);
   }
+
   .auth-brand img {
     margin: 15% auto 5px auto;
     width: 100px;
-    border: 3px solid var(--theme-white-color);
+    border: 3px solid var(--md-sys-color-on-primary);
     border-radius: 25px;
     box-shadow: var(--box-shadow);
   }
@@ -46,7 +45,7 @@ export const AUTH_STYLE_SIGN = css`
   }
   .auth-form {
     display: grid;
-    grid-gap: var(--margin-default);
+    grid-gap: var(--spacing-medium);
     grid-template-columns: 1fr 1fr;
   }
 
@@ -54,7 +53,7 @@ export const AUTH_STYLE_SIGN = css`
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: var(--margin-default);
+    grid-gap: var(--spacing-medium);
     align-items: center;
   }
 
@@ -62,7 +61,7 @@ export const AUTH_STYLE_SIGN = css`
     grid-column: 1 / -1;
     margin: 50px 0 0 0;
     font: var(--auth-title-font);
-    color: var(--auth-title-color);
+    color: var(--auth-title-color, var(--md-sys-color-on-primary));
     text-transform: uppercase;
   }
 
@@ -71,47 +70,60 @@ 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-on-primary);
+    border: 1.5px solid var(--md-sys-color-on-primary);
+    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-on-primary);
+    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);
+  }
+
+  .wrap .link md-icon {
+    color: var(--md-sys-color-on-primary);
   }
 
   #locale-area {
     display: flex;
     grid-column: 1 / -1;
-    padding: 0 var(--padding-default);
+    padding: 0 var(--spacing-medium);
   }
 
   #locale-area > label {
     display: flex;
     align-items: center;
-    color: var(--theme-white-color);
-    --mdc-icon-size: 16px;
+    color: var(--md-sys-color-on-primary);
+    --md-icon-size: 16px;
   }
 
   #locale-selector {
@@ -123,7 +135,7 @@ export const AUTH_STYLE_SIGN = css`
     --i18n-selector-field-border: none;
     --i18n-selector-field-background-color: none;
     --i18n-selector-field-font-size: 14px;
-    --i18n-selector-field-color: var(--theme-white-color);
+    --i18n-selector-field-color: var(--md-sys-color-on-primary);
   }
 
   .lottie-container {

package/client/bootstrap.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */
 
@@ -7,14 +7,10 @@ import { html } from 'lit-html'
 import { navigate, store } from '@operato/shell'
 import { TOOL_POSITION } from '@operato/layout'
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
 
-import {
-  registerEditor as registerGristEditor,
-  registerRenderer as registerGristRenderer,
-  OxGristRendererJson5
-} from '@operato/data-grist'
-import { auth } from '@things-factory/auth-base/dist-client'
-import { ADD_MORENDA } from '@things-factory/more-base'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
 
 export default function bootstrap() {
   registerGristEditor('privilege', OxGristEditorPrivilege)
@@ -24,7 +20,7 @@ export default function bootstrap() {
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html` <mwc-icon>account_circle</mwc-icon> `,
+      icon: html` <md-icon>account_circle</md-icon> `,
       name: html` <ox-i18n msgid="text.auth profile"></ox-i18n> `,
       position: TOOL_POSITION.FRONT_END,
       action: () => {
@@ -37,7 +33,7 @@ export default function bootstrap() {
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html` <mwc-icon>exit_to_app</mwc-icon> `,
+      icon: html` <md-icon>exit_to_app</md-icon> `,
       name: html` <ox-i18n msgid="field.sign out"></ox-i18n> `,
       position: TOOL_POSITION.FRONT_END,
       action: () => {

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(--md-sys-color-on-primary);
+      }
+
+      div.field {
+        margin-bottom: var(--spacing-medium);
       }
 
       [hidden] {
@@ -78,12 +84,16 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
     description: string
   }
 
+  get autocompletable() {
+    return false
+  }
+
   render() {
     const { disableUserFavoredLanguage, languages } = this.data || {}
     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} />
@@ -98,6 +108,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
               id="form"
               action="${this.actionUrl}"
               method="post"
+              autocomplete=${this.autocompletable ? "on": "off"}
               @keypress=${e => {
                 if (e.key == 'Enter') this._onSubmit(e)
               }}
@@ -107,7 +118,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 +135,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 +153,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 +177,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"
+          autocomplete="off"
           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"
+          autocomplete="off"
           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 +218,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,38 +79,40 @@ 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'))}
                 .pattern=${this.passwordPattern}
                 helper=${this.passwordHelp}
                 helperPersistent
+                autocomplete="off"
                 @input=${e => {
                   var val = e.target.value
                   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'))}
+                autocomplete="off"
                 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 '@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'
+
 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,86 @@ export abstract class AbstractSign extends AbstractAuthPage {
       }
     }
   }
+
+  get formfields() {
+    const email = this.data?.email || ''
+    const autocompletable = this.autocompletable
+
+    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=${autocompletable ? "username" : "off"}
+          autocapitalize="off"
+          @input=${(e: Event) => {
+            const target = e.target as HTMLInputElement
+            if (target.validity.typeMismatch) {
+              target.setCustomValidity(i18next.t('text.invalid-email'))
+            } else {
+              target.setCustomValidity('')
+            }
+          }}
+          ><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=${autocompletable ? "current-password" : "off"}
+          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.authenticateUser()}> fingerprint </md-icon>`
+          : nothing}
+      </div>
+    `
+  }
+
+  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
+        })
+      }
+  
+    } catch (error) {
+      notify({
+        level: 'error',
+        message: i18next.t('error.authn verification failed')
+      })
+    }
+  }
 }

package/client/components/change-password.ts

@@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { auth } from '@things-factory/auth-base/dist-client'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 
 @customElement('change-password')
 export class ChangePassword extends localize(i18next)(LitElement) {
@@ -40,8 +40,8 @@ export class ChangePassword extends localize(i18next)(LitElement) {
         text-transform: capitalize;
       }
 
-      mwc-button {
-        margin: var(--margin-narrow) auto var(--margin-default) auto;
+      md-elevated-button {
+        margin: var(--spacing-small) auto var(--spacing-medium) auto;
       }
 
       button {
@@ -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,24 +1,21 @@
-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'
 import { customElement, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { auth } from '@things-factory/auth-base/dist-client'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 
 @customElement('contact-us')
 export class ContactUs extends localize(i18next)(LitElement) {
   static get styles() {
     return [
       css`
-        :host {
-          --mdc-theme-primary: var(--primary-color);
-        }
-
         * {
           box-sizing: border-box;
         }
@@ -43,16 +40,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 +58,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 +68,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,17 +79,13 @@ 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>
     `
   }