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

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);
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   :host *:focus {
@@ -13,10 +14,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;
@@ -25,13 +22,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);
   }
@@ -45,7 +44,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;
   }
 
@@ -53,7 +52,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;
   }
 
@@ -61,7 +60,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;
   }
 
@@ -70,47 +69,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 {
@@ -122,7 +134,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/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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(--spacing-medium);\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(--spacing-medium);\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(--spacing-medium);\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/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';
@@ -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

@@ -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';
@@ -14,11 +14,14 @@ 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;
         return html `
-      <div class="content">
+      <div class="content md-typescale-display-medium">
         <div class="wrap">
           <div class="auth-brand">
             <img src=${icon} />
@@ -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);
@@ -43,7 +47,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 +64,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 +82,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 +100,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"
+          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>
     `;
     }
     get links() {
@@ -130,16 +138,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 +213,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(--md-sys-color-on-primary);
+      }
+
+      div.field {
+        margin-bottom: var(--spacing-medium);
       }
 
       [hidden] {

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

@@ -1 +1 @@
-{"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '@material/mwc-icon'\nimport '@material/mwc-icon-button'\nimport '@material/mwc-textfield'\nimport '@operato/lottie-player'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\n\nexport abstract class AbstractAuthPage extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      [home] {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        font-size: 2em;\n        color: white;\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      #snackbar {\n        width: 100%;\n        z-index: 10;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: Object }) detail: any\n  @property({ type: String }) redirectTo?: string\n\n  @query('#form') formEl!: HTMLFormElement\n\n  private _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  render() {\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <div class=\"auth-form\">\n            <h3><ox-i18n msgid=\"title.${this.pageName}\"></ox-i18n></h3>\n\n            <form\n              id=\"form\"\n              action=\"${this.actionUrl}\"\n              method=\"post\"\n              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><mwc-icon>language</mwc-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </div>\n        </div>\n\n        <mwc-icon-button home icon=\"home\" @click=${e => (window.location.href = '/')}></mwc-icon-button>\n        <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('mwc-textfield') as any).focus()\n    }, 100)\n\n    this.formEl.reset = () => {\n      this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''))\n    }\n  }\n\n  updated(changed) {\n    if (changed.has('data') && this.data) {\n      this.message = this.data.message\n      this.redirectTo = this.data.redirectTo\n    }\n  }\n\n  abstract get pageName(): string\n  abstract get actionUrl(): string\n\n  get formElements(): HTMLInputElement[] {\n    return Array.from(this.formEl.querySelectorAll('[name]'))\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <mwc-textfield\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          .validationMessage=${String(i18next.t('text.invalid-email'))}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n        ></mwc-textfield>\n      </div>\n      <div class=\"field\">\n        <mwc-textfield\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"current-password\"\n          required\n        ></mwc-textfield>\n      </div>\n\n      <mwc-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </mwc-button>\n    `\n  }\n\n  get links() {\n    const { disableUserSignupProcess, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${!disableUserSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <mwc-button icon=\"add_task\"><ox-i18n msgid=\"field.sign up\"></ox-i18n></mwc-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <mwc-button icon=\"lock_open\"><ox-i18n msgid=\"field.forgot-password\"></ox-i18n></mwc-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <mwc-button icon=\"badge\">${i18next.t('label.signin with', { title: sso.title })}</mwc-button>\n          </a>\n        `\n      )}\n    `\n  }\n\n  async _onSubmit(e) {\n    if (this.checkValidity()) {\n      this.submit()\n    }\n  }\n\n  checkValidity() {\n    return this.formElements.every(el => el.checkValidity())\n  }\n\n  abstract submit()\n\n  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    if (level) snackbar.level = level\n    if (message) snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        this.hideSnackbar()\n      }, timer)\n  }\n\n  hideSnackbar() {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    snackbar.active = false\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href || '',\n        title: titleMeta?.content || 'Things Factory',\n        description: descriptionMeta?.content || 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\n\nexport abstract class AbstractAuthPage extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .home {\n        position: absolute;\n        padding: var(--padding-dufault, 9px);\n        left: 20px;\n        top: 10px;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      div.field {\n        margin-bottom: var(--spacing-medium);\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      #snackbar {\n        width: 100%;\n        z-index: 10;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: Object }) detail: any\n  @property({ type: String }) redirectTo?: string\n\n  @query('#form') formEl!: HTMLFormElement\n\n  private _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  get autocompletable() {\n    return false\n  }\n\n  render() {\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <div class=\"auth-form\">\n            <h3><ox-i18n msgid=\"title.${this.pageName}\"></ox-i18n></h3>\n\n            <form\n              id=\"form\"\n              action=\"${this.actionUrl}\"\n              method=\"post\"\n              autocomplete=${this.autocompletable ? \"on\": \"off\"}\n              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </div>\n        </div>\n\n        <md-icon-button class=\"home\" @click=${e => (window.location.href = '/')}\n          ><md-icon>home</md-icon></md-icon-button\n        >\n        <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any).focus()\n    }, 100)\n\n    this.formEl.reset = () => {\n      this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''))\n    }\n  }\n\n  updated(changed) {\n    if (changed.has('data') && this.data) {\n      this.message = this.data.message\n      this.redirectTo = this.data.redirectTo\n    }\n  }\n\n  abstract get pageName(): string\n  abstract get actionUrl(): string\n\n  get formElements(): HTMLInputElement[] {\n    return Array.from(this.formEl.querySelectorAll('[name]'))\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    // .validationMessage=${String(i18next.t('text.invalid-email'))}\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"off\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <md-elevated-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </md-elevated-button>\n    `\n  }\n\n  get links() {\n    const { disableUserSignupProcess, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${!disableUserSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <md-text-button>\n                <md-icon slot=\"icon\">add_task</md-icon>\n                <ox-i18n msgid=\"field.sign up\"></ox-i18n>\n              </md-text-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <md-text-button>\n                <md-icon slot=\"icon\">lock_open</md-icon>\n                <ox-i18n msgid=\"field.forgot-password\"></ox-i18n>\n              </md-text-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <md-text-button>\n              <md-icon slot=\"icon\">badge</md-icon>\n              ${i18next.t('label.signin with', { title: sso.title })}\n            </md-text-button>\n          </a>\n        `\n      )}\n    `\n  }\n\n  async _onSubmit(e) {\n    if (this.checkValidity()) {\n      this.submit()\n    }\n  }\n\n  checkValidity() {\n    return this.formElements.every(el => el.checkValidity())\n  }\n\n  abstract submit()\n\n  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    if (level) snackbar.level = level\n    if (message) snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        this.hideSnackbar()\n      }, timer)\n  }\n\n  hideSnackbar() {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    snackbar.active = false\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href || '',\n        title: titleMeta?.content || 'Things Factory',\n        description: descriptionMeta?.content || 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

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

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

package/dist-client/components/abstract-password-reset.js

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
-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';
@@ -43,38 +44,40 @@ export 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/dist-client/components/abstract-password-reset.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-password-reset.js","sourceRoot":"","sources":["../../client/components/abstract-password-reset.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '@material/mwc-textfield'\nimport '@operato/lottie-player'\nimport '../components/profile-component'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'\nimport { AbstractAuthPage } from './abstract-auth-page'\n\nexport abstract class AbstractPasswordReset extends AbstractAuthPage {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) token?: string\n\n  @query('#confirm-password') confirmPass!: HTMLElement\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  abstract get submitButtonLabel(): string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.${this.title}\"></ox-i18n></h3>\n          <form\n            id=\"form\"\n            action=\"${this.actionUrl}\"\n            method=\"post\"\n            @keypress=${e => {\n              if (e.key == 'Enter') this._onSubmit(e)\n            }}\n          >\n            <input name=\"token\" type=\"hidden\" .value=${this.token || ''} required />\n            <div class=\"field\">\n              <mwc-textfield\n                name=\"password\"\n                type=\"password\"\n                label=${String(i18next.t('label.password'))}\n                .pattern=${this.passwordPattern}\n                helper=${this.passwordHelp}\n                helperPersistent\n                @input=${e => {\n                  var val = e.target.value\n                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '[$&]'))\n                }}\n                required\n              ></mwc-textfield>\n            </div>\n\n            <div class=\"field\">\n              <mwc-textfield\n                id=\"confirm-password\"\n                name=\"confirm-password\"\n                type=\"password\"\n                label=${String(i18next.t('field.confirm password'))}\n                required\n              ></mwc-textfield>\n            </div>\n\n            <mwc-button id=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n              <ox-i18n msgid=\"${this.submitButtonLabel}\"></ox-i18n>\n            </mwc-button>\n\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><mwc-icon>language</mwc-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </form>\n        </div>\n      </div>\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n      ${isSafari()\n        ? html``\n        : html`\n            <div class=\"lottie-container\">\n              <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n            </div>\n          `}\n    `\n  }\n\n  updated(changed) {\n    super.updated(changed)\n    if (changed.has('data')) {\n      this.token = this.data.token\n    }\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          timer: -1\n        })\n      }\n    }\n  }\n\n  languageUpdated() {\n    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n  }\n\n  async submit() {\n    this.formEl.submit()\n  }\n}\n"]}
+{"version":3,"file":"abstract-password-reset.js","sourceRoot":"","sources":["../../client/components/abstract-password-reset.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '../components/profile-component'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'\nimport { AbstractAuthPage } from './abstract-auth-page'\n\nexport abstract class AbstractPasswordReset extends AbstractAuthPage {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) token?: string\n\n  @query('#confirm-password') confirmPass!: HTMLElement\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  abstract get submitButtonLabel(): string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.${this.title}\"></ox-i18n></h3>\n          <form\n            id=\"form\"\n            action=\"${this.actionUrl}\"\n            method=\"post\"\n            @keypress=${e => {\n              if (e.key == 'Enter') this._onSubmit(e)\n            }}\n          >\n            <input name=\"token\" type=\"hidden\" .value=${this.token || ''} required />\n            <div class=\"field\">\n              <md-filled-text-field\n                name=\"password\"\n                type=\"password\"\n                label=${String(i18next.t('label.password'))}\n                .pattern=${this.passwordPattern}\n                helper=${this.passwordHelp}\n                helperPersistent\n                autocomplete=\"off\"\n                @input=${e => {\n                  var val = e.target.value\n                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '[$&]'))\n                }}\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <div class=\"field\">\n              <md-filled-text-field\n                id=\"confirm-password\"\n                name=\"confirm-password\"\n                type=\"password\"\n                label=${String(i18next.t('field.confirm password'))}\n                autocomplete=\"off\"\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <md-elevated-button id=\"submit-button\" type=\"submit\" @click=${e => this._onSubmit(e)}>\n              <ox-i18n msgid=\"${this.submitButtonLabel}\"></ox-i18n>\n            </md-elevated-button>\n\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </form>\n        </div>\n      </div>\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n      ${isSafari()\n        ? html``\n        : html`\n            <div class=\"lottie-container\">\n              <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n            </div>\n          `}\n    `\n  }\n\n  updated(changed) {\n    super.updated(changed)\n    if (changed.has('data')) {\n      this.token = this.data.token\n    }\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          timer: -1\n        })\n      }\n    }\n  }\n\n  languageUpdated() {\n    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n  }\n\n  async submit() {\n    this.formEl.submit()\n  }\n}\n"]}

package/dist-client/components/abstract-sign.d.ts

@@ -1,5 +1,8 @@
+import '@operato/i18n/ox-i18n.js';
 import { AbstractAuthPage } from './abstract-auth-page.js';
 export declare abstract class AbstractSign extends AbstractAuthPage {
     submit(): Promise<void>;
     updated(changed: any): void;
+    get formfields(): import("lit-html").TemplateResult<1>;
+    authenticateUser(): Promise<void>;
 }