npm - @things-factory/auth-ui - Versions diffs - 7.0.1-alpha.88 → 7.0.1-alpha.90 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/client/pages/application/application.ts CHANGED Viewed

@@ -57,15 +57,12 @@ class Application extends connect(store)(PageView) {
         border: var(--border-dark-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
-        padding: var(--input-padding);
+        padding: 9px;
         font: var(--input-font);
         flex: 1;
       }
       select:focus,
       input:focus,
-      button {
-        outline: none;
-      }
       form {
         max-width: var(--content-container-max-width);
       }
@@ -106,13 +103,18 @@ class Application extends connect(store)(PageView) {
       }
       [button-in-field] {
         position: absolute;
-        top: 24px;
-        right: 4px;
+        top: 16px;
+        right: 2px;
+        padding: 0;
+        border-radius: 0;
       }
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+      [danger] {
+        --md-theme-primary: var(--md-danger-button-primary-color);
+      }
       @media screen and (max-width: 480px) {
         [field] {
@@ -140,7 +142,7 @@ class Application extends connect(store)(PageView) {
     return html`
       <div>
-        <h2><mwc-icon>apps</mwc-icon>&nbsp;${app.name}</h2>
+        <h2><md-icon>apps</md-icon>&nbsp;${app.name}</h2>
         <p page-description>${app.description}</p>
       </div>
@@ -171,7 +173,10 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="type-selector">type</label>
                 <select id="type-selector" name="type">
-                  ${APPLICATION_TYPES.map(type => html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`)}
+                  ${APPLICATION_TYPES.map(
+                    type =>
+                      html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`
+                  )}
                 </select>
               </div>
@@ -203,15 +208,20 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="auth-url">auth URL</label>
                 <input id="auth-url" type="text" .value=${app.authUrl} readonly />
-                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-button
+                >
                 The endpoint for authorization server. This is used to get the authorization code.
               </div>
               <div field grid-span>
                 <label for="access-token-url">access token URL</label>
                 <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
-                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
-                The endpoint for authentication server. This is used to exchange the authorization code for an access token.
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-button
+                >
+                The endpoint for authentication server. This is used to exchange the authorization code for an access
+                token.
               </div>
             </div>
           </fieldset>
@@ -224,20 +234,26 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="app-key">appKey</label>
                 <input id="app-key" type="text" .value=${app.appKey} readonly />
-                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-button
+                >
               </div>
               <div field grid-span>
                 <label for="app-secret">appSecret</label>
                 <input id="app-secret" type="text" .value=${app.appSecret} readonly />
-                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-button
+                >
               </div>
             </div>
           </fieldset>
         </div>
         <div class="button-container">
-          <button danger @click=${this.deleteApplication.bind(this)}><md-icon>delete_forever</md-icon>delete this app</button>
+          <button danger @click=${this.deleteApplication.bind(this)}>
+            <md-icon>delete_forever</md-icon>delete this app
+          </button>
           <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
           <button><md-icon>passkey</md-icon>generate new secret</button>
         </div>

package/client/pages/application/applications.ts CHANGED Viewed

@@ -17,7 +17,7 @@ class Applications extends connect(store)(PageView) {
         overflow: auto;
       }
-      [outlined] {
+      md-outlined-button {
         float: right;
         margin-top: var(--margin-default);
       }
@@ -99,17 +99,10 @@ class Applications extends connect(store)(PageView) {
     return html`
       <div>
         <h2>Registered Applications</h2>
-        <p page-description>
-          What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
-        </p>
-        <mwc-button
-          raised
-          @click=${e => navigate('application-register')}
-          label="register new application"
-        ></mwc-button>
+        <p page-description>What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.</p>
+        <md-elevated-button @click=${e => navigate('application-register')}>register new application</md-elevated-button>
       </div>
-      <!-- <div> -->
       <table>
         <tr>
           <th>app name</th>
@@ -134,8 +127,7 @@ class Applications extends connect(store)(PageView) {
         )}
       </table>
-      <mwc-button outlined @click=${e => navigate('app-bindings')} label="bound applications .."></mwc-button>
-      <!-- </div> -->
+      <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>
     `
   }

package/client/pages/application/register.ts CHANGED Viewed

@@ -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-management.ts CHANGED Viewed

@@ -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'

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'

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

@@ -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'

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@things-factory/component-ui'
 import '../../components/invite-user'
 import '../../components/ownership-transfer-popup'
@@ -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 =>
@@ -116,9 +118,7 @@ class UserManagement extends PageView {
           ></user-role-editor>`}
       ></quick-find-list>
-      ${this.currentTab === USER_TYPES.USER
-        ? html`<invite-user @invitationCompleted=${this.refreshUsers.bind(this)}></invite-user>`
-        : ''}
+      ${this.currentTab === USER_TYPES.USER ? html`<invite-user @invitationCompleted=${this.refreshUsers.bind(this)}></invite-user>` : ''}
     `
   }

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n :host {\n display: flex;\n background-color: var(--auth-background);\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/components/abstract-auth-page.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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] {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2BAA2B,CAAA;AAClC,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,0BAA0B,CAAA;AACjC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAE1D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,MAAM,OAAgB,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA8D1E,MAAM;QACJ,MAAM,EAAE,0BAA0B,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QACjE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI;mCACQ,KAAK;wCACA,WAAW;;;;wCAIX,IAAI,CAAC,QAAQ;;;;wBAI7B,IAAI,CAAC,SAAS;;0BAEZ,CAAC,CAAC,EAAE;YACd,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO;gBAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;QACzC,CAAC;;gBAEC,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,KAAK;cACV,CAAC,0BAA0B;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;4BAIQ,OAAO,CAAC,QAAQ,IAAI,OAAO;iCACtB,SAAS;8BACZ,CAAC,CAAC,EAAE;gBACZ,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;gBACrB,IAAI,CAAC,MAAM;oBAAE,OAAM;gBAEnB,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;YAChC,CAAC;;uBAEE;YACT,CAAC,CAAC,OAAO;;;;mDAI4B,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;6DACvB,IAAI,CAAC,OAAO;;UAE/D,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,YAAY;QACV,UAAU,CAAC,GAAG,EAAE;YACd,CAAC;YAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAS,CAAC,KAAK,EAAE,CAAA;QAClE,CAAC,EAAE,GAAG,CAAC,CAAA;QAEP,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAA;QACpG,CAAC,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA;SACvC;IACH,CAAC;IAKD,IAAI,YAAY;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC3D,CAAC;IAED,IAAI,UAAU;;QACZ,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,KAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;sEACuD,IAAI,CAAC,UAAU,IAAI,GAAG;;;;;;kBAM1E,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;mBAE/B,KAAK;+BACO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;;kBASpD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;;;;;;2DAMM,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;gCACjD,IAAI,CAAC,QAAQ;;KAExC,CAAA;IACH,CAAC;IAED,IAAI,KAAK;QACP,MAAM,EAAE,wBAAwB,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAEnE,OAAO,IAAI,CAAA;QACP,CAAC,wBAAwB;YACzB,CAAC,CAAC,IAAI,CAAA;;;;;;;WAOH;YACH,CAAC,CAAC,OAAO;QACT,QAAQ,CAAC,GAAG,CACZ,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;iCACc,GAAG,CAAC,IAAI;uCACF,OAAO,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,CAAC;;SAElF,CACF;KACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,CAAC;QACf,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;YACxB,IAAI,CAAC,MAAM,EAAE,CAAA;SACd;IACH,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,CAAA;IAC1D,CAAC;IAID,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,IAAI,KAA2D,EAAE;QACtG,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAIzD,CAAA;QAED,IAAI,KAAK;YAAE,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;QACjC,IAAI,OAAO;YAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAA;QACvC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAA;QAEtB,IAAI,KAAK,GAAG,CAAC,CAAC;YACZ,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,YAAY,EAAE,CAAA;YACrB,CAAC,EAAE,KAAK,CAAC,CAAA;IACb,CAAC;IAED,YAAY;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAIzD,CAAA;QAED,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAA;IACzB,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,KAAI,EAAE;gBAC1B,KAAK,EAAE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,KAAI,gBAAgB;gBAC7C,WAAW,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,KAAI,sBAAsB;aAChE,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhQM,uBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;IACD,eAAe;CAChB,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAY;AACvC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAoB;AAE/C;IAAC,KAAK,CAAC,OAAO,CAAC;8BAAU,eAAe;gDAAA","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"]}
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/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(--theme-white-color);\n }\n\n div.field {\n margin-bottom: var(--margin-default);\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 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 @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=\"username\"\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=\"current-password\"\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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,7 +44,7 @@ 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'))}
@@ -55,26 +56,26 @@ export class AbstractPasswordReset extends AbstractAuthPage {
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'));
         }}
                 required
-              ></mwc-textfield>
+              ></md-filled-text-field>
             </div>
             <div class="field">
-              <mwc-textfield
+              <md-filled-text-field
                 id="confirm-password"
                 name="confirm-password"
                 type="password"
                 label=${String(i18next.t('field.confirm password'))}
                 required
-              ></mwc-textfield>
+              ></md-filled-text-field>
             </div>
-            <mwc-button id="submit-button" type="submit" raised @click=${e => this._onSubmit(e)}>
+            <md-elevated-button id="submit-button" type="submit" @click=${e => this._onSubmit(e)}>
               <ox-i18n msgid="${this.submitButtonLabel}"></ox-i18n>
-            </mwc-button>
+            </md-elevated-button>
             ${!disableUserFavoredLanguage
             ? html ` <div id="locale-area">
-                  <label for="locale-selector"><mwc-icon>language</mwc-icon></label>
+                  <label for="locale-selector"><md-icon>language</md-icon></label>
                   <ox-i18n-selector
                     id="locale-selector"
                     value=${i18next.language || 'en-US'}