@things-factory/auth-ui 7.0.1-alpha.10 → 7.0.1-alpha.100

package/client/pages/application/register.ts

@@ -11,7 +11,7 @@ class ApplicationRegister extends connect(store)(PageView) {
   static styles = [
     css`
       :host {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
 
         position: relative;
@@ -165,7 +165,7 @@ class ApplicationRegister extends connect(store)(PageView) {
               <input id="email" type="text" name="email" />
             </div>
 
-            <mwc-button grid-span @click=${this.createApplication.bind(this)} raised label="register"></mwc-button>
+            <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>
           </div>
         </form>
       </div>

package/client/pages/attribute/attribute-set-item-list.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 
 import { css, html, LitElement } from 'lit'
@@ -7,6 +9,7 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('attribute-set-item-list')
 class AttributeSetItemList extends localize(i18next)(LitElement) {
@@ -16,6 +19,7 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
 
   static styles = [
     css`
+      ButtonContainerStyles,
       :host {
         display: flex;
         flex-direction: column;
@@ -26,19 +30,6 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -46,16 +37,11 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this.deleteAttributeSetItems.bind(this)}
-          >${i18next.t('button.delete')}</mwc-button
-        >
-        <mwc-button raised @click=${this.updateAttributeSetItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this.deleteAttributeSetItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this.updateAttributeSetItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/attribute/attribute-set-management.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './attribute-set-item-list.js'
@@ -67,7 +69,10 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
         {
           title: i18next.t('button.delete'),
           action: this.deleteAttributeSet.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -78,17 +83,9 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.attributes')}
-          </div>
+          <div class="title">${i18next.t('title.attributes')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
         </div>
@@ -112,15 +109,12 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               if (!record.id) return
-              const popup = openPopup(
-                html` <attribute-set-item-list .attribute=${record}></attribute-set-item-list> `,
-                {
-                  backdrop: true,
-                  help: 'attribute/ui/attribute-set-item-list',
-                  size: 'large',
-                  title: i18next.t('title.attribute-item list')
-                }
-              )
+              const popup = openPopup(html` <attribute-set-item-list .attribute=${record}></attribute-set-item-list> `, {
+                backdrop: true,
+                help: 'attribute/ui/attribute-set-item-list',
+                size: 'large',
+                title: i18next.t('title.attribute-item list')
+              })
               popup.onclosed = () => {
                 this.grist.fetch()
               }

package/client/pages/auth-provider/auth-provider-management.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
@@ -68,7 +70,10 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
         {
           title: i18next.t('button.delete'),
           action: this.deleteAuthProvider.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -79,17 +84,9 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.auth-provider')}
-          </div>
+          <div class="title">${i18next.t('title.auth-provider')}</div>
 
           <ox-filters-form autofocus without-search class="filters"></ox-filters-form>
 
@@ -184,11 +181,7 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
           record: {
             editable: true,
             options: async (value, column, record, row, field) => {
-              const {
-                description,
-                help,
-                parameterSpec: spec
-              } = record.type ? this.authProviderTypes[record.type] : ({} as any)
+              const { description, help, parameterSpec: spec } = record.type ? this.authProviderTypes[record.type] : ({} as any)
               const context = this.grist
 
               return { description, help, spec, context }
@@ -236,6 +229,7 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
                 name
                 placeholder
                 property
+                styles
               }
             }
             total

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist/ox-grist.js'
 import '@operato/data-grist/ox-filters-form.js'
 import '@operato/context/ox-context-page-toolbar.js'
@@ -7,7 +9,7 @@ import '../../components/create-domain-popup'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DataGrist } from '@operato/data-grist/ox-grist.js'
@@ -81,10 +83,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
     return html`
       <ox-grist .mode=${this.mode} .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('text.domain management')}
-          </div>
+          <div class="title">${i18next.t('text.domain management')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
@@ -256,10 +255,6 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
         }
       ]
     }
-
-    await this.updateComplete
-
-    this.grist.fetch()
   }
 
   async pageUpdated(changes, lifecycle) {

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

@@ -19,7 +19,7 @@ class PartnerManagement extends connect(store)(PageView) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
 
         overflow: auto;

package/client/pages/profile.ts

@@ -14,7 +14,7 @@ export class AuthProfile extends localize(i18next)(PageView) {
     css`
       :host {
         display: block;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         overflow-y: auto;
       }
     `

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

@@ -19,7 +19,7 @@ class RoleManagement extends connect(store)(PageView) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
         overflow: auto;
       }
@@ -74,10 +74,9 @@ class RoleManagement extends connect(store)(PageView) {
       <div id="roles-privileges">
         <quick-find-list
           .data="${data}"
-          .openHeaderRenderer=${role =>
-            html`
-              <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
-            `}
+          .openHeaderRenderer=${role => html`
+            <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
+          `}
           .contentRenderer="${(role, _currentTabKey) => html`
             <role-privilege-editor
               .updateRoleObj=${this.updateRoleObj || {}}

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@things-factory/component-ui'
 import '../../components/invite-user'
 import '../../components/ownership-transfer-popup'
@@ -20,7 +22,7 @@ class UserManagement extends PageView {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
         overflow: auto;
       }
@@ -99,10 +101,10 @@ class UserManagement extends PageView {
           return html`
             ${!user.activated
               ? html`
-                  <mwc-icon>do_disturb</mwc-icon>
+                  <md-icon>do_disturb</md-icon>
                   ${user.name}
                 `
-              : html` ${user.owner ? html` <mwc-icon>supervisor_account</mwc-icon> ` : ''} ${user.name} `}
+              : html` ${user.owner ? html` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `}
           `
         }}
         .contentRenderer=${user =>

package/client/themes/auth-theme.css

@@ -42,7 +42,7 @@ body {
   --auth-special-page-padding: 250px 0 100px 0;
 
   /* domain select page style*/
-  --checkin-background-color: var(--main-section-background-color);
+  --checkin-background-color: var(--md-sys-color-background);
   --checkin-header-height: 45px;
   --checkin-header-background-color: var(--primary-color);
   --checkin-header-title-font: bold 19px var(--theme-font);

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

@@ -70,34 +70,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 {
@@ -110,7 +121,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/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n  :host {\n    display: flex;\n    background-color: var(--auth-background);\n  }\n\n  :host *:focus {\n    outline: none;\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  ::placeholder {\n    color: var(--opacity-light-color);\n    font: var(--auth-input-font);\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  .auth-brand {\n    color: #fff;\n  }\n  .auth-brand img {\n    margin: 15% auto 5px auto;\n    width: 100px;\n    border: 3px solid var(--theme-white-color);\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);\n    text-transform: uppercase;\n  }\n\n  .field {\n    grid-column: 1 / -1;\n    text-align: left;\n  }\n\n  .field mwc-textfield {\n    width: 100%;\n    --mdc-theme-primary: var(--auth-input-color);\n    --mdc-theme-error: #fdd55f;\n    --mdc-text-field-fill-color: transparent;\n    --mdc-text-field-ink-color: var(--auth-input-color);\n    --mdc-text-field-label-ink-color: var(--auth-input-color);\n    --mdc-text-field-idle-line-color: var(--auth-input-color);\n    --mdc-text-field-hover-line-color: var(--auth-input-color);\n    font: var(--auth-input-font);\n  }\n\n  mwc-button {\n    --mdc-theme-primary: var(--auth-button-background-color);\n    --mdc-theme-on-primary: var(--primary-color);\n    --mdc-button-horizontal-padding: var(--padding-default);\n    --mdc-button-ink-color: var(--primary-color);\n    grid-column: 1 / -1;\n  }\n\n  .wrap .link {\n    text-decoration: none;\n    justify-self: flex-start;\n    color: var(--auth-title-color);\n  }\n\n  .wrap .link > mwc-button {\n    --mdc-theme-primary: var(--auth-title-color);\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(--theme-white-color);\n    --mdc-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(--theme-white-color);\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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);\n  }\n\n  :host *:focus {\n    outline: none;\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  ::placeholder {\n    color: var(--opacity-light-color);\n    font: var(--auth-input-font);\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  .auth-brand {\n    color: #fff;\n  }\n  .auth-brand img {\n    margin: 15% auto 5px auto;\n    width: 100px;\n    border: 3px solid var(--theme-white-color);\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);\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-primary-container);\n    border: 1.5px solid var(--md-sys-color-primary-container);\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-primary-container);\n  }\n\n  .wrap .link md-icon {\n    color: var(--md-sys-color-primary-container);\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(--theme-white-color);\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(--theme-white-color);\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/bootstrap.d.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';
 export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -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' */
 import { html } from 'lit-html';
@@ -6,8 +6,8 @@ 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 { 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);
     registerGristRenderer('privilege', OxGristRendererJson5);
@@ -15,7 +15,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: () => {
@@ -27,7 +27,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/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AACjC,OAAO,iCAAiC,CAAA,CAAC,sDAAsD;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAE/F,OAAO,EACL,cAAc,IAAI,mBAAmB,EACrC,gBAAgB,IAAI,qBAAqB,EACzC,oBAAoB,EACrB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAEvD,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACxD,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAExD,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,uCAAuC;YACjD,IAAI,EAAE,IAAI,CAAA,iDAAiD;YAC3D,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,0BAA0B;IAC1B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,oCAAoC;YAC9C,IAAI,EAAE,IAAI,CAAA,8CAA8C;YACxD,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;SACF;KACF,CAAC,CAAA;IAEF;;;;MAIE;IACF,IAAI,CAAC,OAAO,EAAE,CAAA;AAChB,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\n\nimport {\n  registerEditor as registerGristEditor,\n  registerRenderer as registerGristRenderer,\n  OxGristRendererJson5\n} from '@operato/data-grist'\nimport { auth } from '@things-factory/auth-base/dist-client'\nimport { ADD_MORENDA } from '@things-factory/more-base'\n\nexport default function bootstrap() {\n  registerGristEditor('privilege', OxGristEditorPrivilege)\n  registerGristRenderer('privilege', OxGristRendererJson5)\n\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <mwc-icon>account_circle</mwc-icon> `,\n      name: html` <ox-i18n msgid=\"text.auth profile\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        navigate('profile')\n      }\n    }\n  })\n\n  /* add sign-out morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <mwc-icon>exit_to_app</mwc-icon> `,\n      name: html` <ox-i18n msgid=\"field.sign out\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        auth.signout()\n      }\n    }\n  })\n\n  /* \n    Get user profile information from server. \n    As soon as response received, auth.on('profile', ...) handlers start to work.\n    It's very important point to build UI for the user.\n  */\n  auth.profile()\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,iCAAiC,CAAA,CAAC,sDAAsD;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAE5I,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACxD,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAExD,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,qCAAqC;YAC/C,IAAI,EAAE,IAAI,CAAA,iDAAiD;YAC3D,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,0BAA0B;IAC1B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,kCAAkC;YAC5C,IAAI,EAAE,IAAI,CAAA,8CAA8C;YACxD,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;SACF;KACF,CAAC,CAAA;IAEF;;;;MAIE;IACF,IAAI,CAAC,OAAO,EAAE,CAAA;AAChB,CAAC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\nimport { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'\n\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\nimport { ADD_MORENDA } from '@things-factory/more-base/client'\n\nexport default function bootstrap() {\n  registerGristEditor('privilege', OxGristEditorPrivilege)\n  registerGristRenderer('privilege', OxGristRendererJson5)\n\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>account_circle</md-icon> `,\n      name: html` <ox-i18n msgid=\"text.auth profile\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        navigate('profile')\n      }\n    }\n  })\n\n  /* add sign-out morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>exit_to_app</md-icon> `,\n      name: html` <ox-i18n msgid=\"field.sign out\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        auth.signout()\n      }\n    }\n  })\n\n  /* \n    Get user profile information from server. \n    As soon as response received, auth.on('profile', ...) handlers start to work.\n    It's very important point to build UI for the user.\n  */\n  auth.profile()\n}\n"]}

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

@@ -1,7 +1,7 @@
-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';

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

@@ -1,8 +1,8 @@
 import { __decorate, __metadata } from "tslib";
-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';
@@ -18,7 +18,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
         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} />
@@ -43,7 +43,7 @@ export 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'}
@@ -60,7 +60,9 @@ export 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()
@@ -76,7 +78,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
     firstUpdated() {
         setTimeout(() => {
             ;
-            this.renderRoot.querySelector('mwc-textfield').focus();
+            this.renderRoot.querySelector('md-filled-text-field').focus();
         }, 100);
         this.formEl.reset = () => {
             this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''));
@@ -94,34 +96,36 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
     get formfields() {
         var _a;
         const email = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.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>
     `;
     }
     get links() {
@@ -130,16 +134,25 @@ export 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>
         `)}
     `;
@@ -196,17 +209,22 @@ AbstractAuthPage.styles = [
         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] {