@things-factory/auth-ui 7.0.1-rc.1 → 7.0.1-rc.11

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-auth-page.ts

@@ -84,6 +84,10 @@ 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
@@ -104,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)
               }}
@@ -184,7 +189,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          autocomplete="username"
+          autocomplete="off"
           autocapitalize="off"
           ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
         >
@@ -194,7 +199,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete="current-password"
+          autocomplete="off"
           required
           ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
         >

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

@@ -86,6 +86,7 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                 .pattern=${this.passwordPattern}
                 helper=${this.passwordHelp}
                 helperPersistent
+                autocomplete="off"
                 @input=${e => {
                   var val = e.target.value
                   this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
@@ -100,6 +101,7 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                 name="confirm-password"
                 type="password"
                 label=${String(i18next.t('field.confirm password'))}
+                autocomplete="off"
                 required
               ></md-filled-text-field>
             </div>

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'
 
@@ -45,6 +45,7 @@ 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 || '/'} />
@@ -56,7 +57,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          autocomplete="username"
+          autocomplete=${autocompletable ? "username" : "off"}
           autocapitalize="off"
           @input=${(e: Event) => {
             const target = e.target as HTMLInputElement
@@ -74,7 +75,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete="current-password"
+          autocomplete=${autocompletable ? "current-password" : "off"}
           required
           ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
         >
@@ -85,84 +86,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/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'
@@ -164,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
               >
             `
@@ -244,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/user-role-editor.ts

@@ -16,6 +16,7 @@ import { store } from '@operato/shell'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 import { ButtonContainerStyles } from '@operato/styles'
 import { RoleSelector } from './role-selector'
+import { InheritedValueType } from '@operato/data-grist'
 
 @customElement('user-role-editor')
 class UserRoleEditor extends connect(store)(LitElement) {
@@ -275,8 +276,8 @@ class UserRoleEditor extends connect(store)(LitElement) {
   async fetchAvailableRoles() {
     const response = await client.query({
       query: gql`
-        query {
-          roles {
+        query roles($inherited: InheritedValueType) {
+          roles(inherited: $inherited) {
             items {
               id
               domain {
@@ -300,6 +301,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
           }
         }
       `,
+      variables: {
+        inherited: InheritedValueType.Include
+      },
       context: gqlContext()
     })
 

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 {

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;

package/client/entries/auth/signin.ts

@@ -11,4 +11,8 @@ export class AuthSignin extends AbstractSign {
   get actionUrl() {
     return '/auth/signin'
   }
+
+  get autocompletable() {
+    return true
+  }
 }

package/client/entries/auth/signup.ts

@@ -47,6 +47,7 @@ export class AuthSignup extends AbstractSign {
           required
           .value=${email}
           autocapitalize="off"
+          autocomplete="off"
           @input=${(e: Event) => {
             const target = e.target as HTMLInputElement
             if (target.validity.typeMismatch) {
@@ -67,6 +68,7 @@ export class AuthSignup extends AbstractSign {
           helper=${this.passwordHelp || ''}
           helperPersistent
           required
+          autocomplete="off"
           @input=${e => {
             var val = e.target.value
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
@@ -80,6 +82,7 @@ export class AuthSignup extends AbstractSign {
           id="confirm-password"
           name="confirm-password"
           type="password"
+          autocomplete="off"
           label=${String(i18next.t('field.confirm password'))}
           required
         >

package/client/pages/role/role-management.ts

@@ -10,7 +10,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
-import { PageView, store } from '@operato/shell'
+import { InheritedValueType, PageView, store } from '@operato/shell'
 
 @customElement('role-management')
 class RoleManagement extends connect(store)(PageView) {
@@ -105,8 +105,8 @@ class RoleManagement extends connect(store)(PageView) {
   async fetchRoles() {
     const response = await client.query({
       query: gql`
-        query roles($sortings: [Sorting!]) {
-          roles(sortings: $sortings) {
+        query roles($sortings: [Sorting!], $inherited: InheritedValueType) {
+          roles(sortings: $sortings, inherited: $inherited) {
             items {
               id
               name
@@ -120,7 +120,10 @@ class RoleManagement extends connect(store)(PageView) {
           }
         }
       `,
-      variables: { sortings: [{ name: 'name' }] },
+      variables: { 
+        sortings: [{ name: 'name' }],
+        inherited: InheritedValueType.Only
+      },
       context: gqlContext()
     })
 

package/dist-client/auth-style-sign.js

@@ -2,7 +2,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/dist-client/auth-style-sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n  :host {\n    display: flex;\n    background-color: var(--auth-background, var(--md-sys-color-primary));\n  }\n\n  :host *:focus {\n    outline: none;\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  .wrap {\n    display: block;\n    width: 450px;\n    min-width: 350px;\n    margin: 0 auto;\n    padding-bottom: 100px;\n    text-align: center;\n  }\n\n  .auth-brand {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  .auth-brand img {\n    margin: 15% auto 5px auto;\n    width: 100px;\n    border: 3px solid var(--md-sys-color-on-primary);\n    border-radius: 25px;\n    box-shadow: var(--box-shadow);\n  }\n  .name {\n    display: block;\n    font: var(--auth-brand-name);\n    text-shadow: var(--auth-brand-name-shadow);\n  }\n  .auth-brand .welcome-msg {\n    font: var(--auth-brand-welcome-msg);\n  }\n  .auth-form {\n    display: grid;\n    grid-gap: var(--margin-default);\n    grid-template-columns: 1fr 1fr;\n  }\n\n  form {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: var(--margin-default);\n    align-items: center;\n  }\n\n  h3 {\n    grid-column: 1 / -1;\n    margin: 50px 0 0 0;\n    font: var(--auth-title-font);\n    color: var(--auth-title-color, var(--md-sys-color-on-primary));\n    text-transform: uppercase;\n  }\n\n  .field {\n    grid-column: 1 / -1;\n    text-align: left;\n  }\n\n  .submit-buttons-container {\n    grid-column: 1 / -1;\n    text-align: center;\n\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .fingerprint {\n    color: var(--md-sys-color-on-primary);\n    border: 1.5px solid var(--md-sys-color-on-primary);\n    border-radius: 20%;\n    width: 36px;\n    height: 36px;\n  }\n\n  .field md-filled-text-field {\n    grid-column: 1 / -1;\n    width: 100%;\n  }\n\n  md-text-button,\n  md-elevated-button {\n    grid-column: 1 / -1;\n    flex: 1;\n  }\n\n  .wrap .link {\n    text-decoration: none;\n    justify-self: flex-start;\n  }\n\n  .wrap .link md-text-button {\n    --md-text-button-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);\n  }\n\n  .wrap .link md-icon {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  #locale-area {\n    display: flex;\n    grid-column: 1 / -1;\n    padding: 0 var(--padding-default);\n  }\n\n  #locale-area > label {\n    display: flex;\n    align-items: center;\n    color: var(--md-sys-color-on-primary);\n    --md-icon-size: 16px;\n  }\n\n  #locale-selector {\n    font-size: 16px;\n    width: 100%;\n  }\n\n  #locale-selector {\n    --i18n-selector-field-border: none;\n    --i18n-selector-field-background-color: none;\n    --i18n-selector-field-font-size: 14px;\n    --i18n-selector-field-color: var(--md-sys-color-on-primary);\n  }\n\n  .lottie-container {\n    width: 100%;\n    height: 300px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    pointer-events: none;\n  }\n  .lottie-container lottie-player {\n    position: absolute;\n    bottom: -6%;\n    width: 100%;\n    height: auto;\n  }\n\n  @media (max-width: 450px) {\n    .wrap {\n      width: 85%;\n      min-width: 320px;\n    }\n    .auth-form {\n      grid-template-columns: 1fr;\n    }\n    .auth-brand img {\n      margin: 12% auto 5px auto;\n      width: 75px;\n    }\n    h3 {\n      margin: 15px 0 0 0;\n    }\n    .lottie-container {\n      overflow: hidden;\n      height: 200px;\n      pointer-events: none;\n    }\n    .lottie-container lottie-player {\n      width: 1200px;\n      left: -30%;\n    }\n  }\n\n  @media screen and (min-width: 1400px) {\n    .wrap {\n      padding-bottom: 150px;\n    }\n  }\n  @media screen and (min-width: 2500px) {\n    .wrap {\n      padding-bottom: 280px;\n    }\n  }\n`\n"]}
+{"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n  :host {\n    display: flex;\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host *:focus {\n    outline: none;\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  .wrap {\n    display: block;\n    width: 450px;\n    min-width: 350px;\n    margin: 0 auto;\n    padding-bottom: 100px;\n    text-align: center;\n  }\n\n  .auth-brand {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  .auth-brand img {\n    margin: 15% auto 5px auto;\n    width: 100px;\n    border: 3px solid var(--md-sys-color-on-primary);\n    border-radius: 25px;\n    box-shadow: var(--box-shadow);\n  }\n  .name {\n    display: block;\n    font: var(--auth-brand-name);\n    text-shadow: var(--auth-brand-name-shadow);\n  }\n  .auth-brand .welcome-msg {\n    font: var(--auth-brand-welcome-msg);\n  }\n  .auth-form {\n    display: grid;\n    grid-gap: var(--margin-default);\n    grid-template-columns: 1fr 1fr;\n  }\n\n  form {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: var(--margin-default);\n    align-items: center;\n  }\n\n  h3 {\n    grid-column: 1 / -1;\n    margin: 50px 0 0 0;\n    font: var(--auth-title-font);\n    color: var(--auth-title-color, var(--md-sys-color-on-primary));\n    text-transform: uppercase;\n  }\n\n  .field {\n    grid-column: 1 / -1;\n    text-align: left;\n  }\n\n  .submit-buttons-container {\n    grid-column: 1 / -1;\n    text-align: center;\n\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .fingerprint {\n    color: var(--md-sys-color-on-primary);\n    border: 1.5px solid var(--md-sys-color-on-primary);\n    border-radius: 20%;\n    width: 36px;\n    height: 36px;\n  }\n\n  .field md-filled-text-field {\n    grid-column: 1 / -1;\n    width: 100%;\n  }\n\n  md-text-button,\n  md-elevated-button {\n    grid-column: 1 / -1;\n    flex: 1;\n  }\n\n  .wrap .link {\n    text-decoration: none;\n    justify-self: flex-start;\n  }\n\n  .wrap .link md-text-button {\n    --md-text-button-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);\n  }\n\n  .wrap .link md-icon {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  #locale-area {\n    display: flex;\n    grid-column: 1 / -1;\n    padding: 0 var(--padding-default);\n  }\n\n  #locale-area > label {\n    display: flex;\n    align-items: center;\n    color: var(--md-sys-color-on-primary);\n    --md-icon-size: 16px;\n  }\n\n  #locale-selector {\n    font-size: 16px;\n    width: 100%;\n  }\n\n  #locale-selector {\n    --i18n-selector-field-border: none;\n    --i18n-selector-field-background-color: none;\n    --i18n-selector-field-font-size: 14px;\n    --i18n-selector-field-color: var(--md-sys-color-on-primary);\n  }\n\n  .lottie-container {\n    width: 100%;\n    height: 300px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    pointer-events: none;\n  }\n  .lottie-container lottie-player {\n    position: absolute;\n    bottom: -6%;\n    width: 100%;\n    height: auto;\n  }\n\n  @media (max-width: 450px) {\n    .wrap {\n      width: 85%;\n      min-width: 320px;\n    }\n    .auth-form {\n      grid-template-columns: 1fr;\n    }\n    .auth-brand img {\n      margin: 12% auto 5px auto;\n      width: 75px;\n    }\n    h3 {\n      margin: 15px 0 0 0;\n    }\n    .lottie-container {\n      overflow: hidden;\n      height: 200px;\n      pointer-events: none;\n    }\n    .lottie-container lottie-player {\n      width: 1200px;\n      left: -30%;\n    }\n  }\n\n  @media screen and (min-width: 1400px) {\n    .wrap {\n      padding-bottom: 150px;\n    }\n  }\n  @media screen and (min-width: 2500px) {\n    .wrap {\n      padding-bottom: 280px;\n    }\n  }\n`\n"]}

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

@@ -16,6 +16,7 @@ export declare abstract class AbstractAuthPage extends AbstractAuthPage_base {
     redirectTo?: string;
     formEl: HTMLFormElement;
     private _applicationMeta?;
+    get autocompletable(): boolean;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
     updated(changed: any): void;

package/dist-client/components/abstract-auth-page.js

@@ -14,6 +14,9 @@ import { ScrollbarStyles } from '@operato/styles';
 import { isSafari } from '@operato/utils';
 import { AUTH_STYLE_SIGN } from '../auth-style-sign.js';
 export class AbstractAuthPage extends localize(i18next)(LitElement) {
+    get autocompletable() {
+        return false;
+    }
     render() {
         const { disableUserFavoredLanguage, languages } = this.data || {};
         var { icon, title, description } = this.applicationMeta;
@@ -33,6 +36,7 @@ export 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 +111,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          autocomplete="username"
+          autocomplete="off"
           autocapitalize="off"
           ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
         >
@@ -117,7 +121,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete="current-password"
+          autocomplete="off"
           required
           ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
         >