npm - @things-factory/auth-ui - Versions diffs - 7.0.1-alpha.10 → 7.0.1-alpha.100 - Mend

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

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 (180) hide show

package/dist-client/entries/auth/result.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
-import '../../components/profile-component';
+import '@material/web/button/elevated-button.js';
 import '@operato/lottie-player';
+import '../../components/profile-component';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
@@ -30,14 +30,14 @@ let AuthResult = class AuthResult extends localize(i18next)(LitElement) {
           <p></p>
         </div>
         <div id="button-area">
-          <mwc-button
-            icon="home"
-            raised
-            label="${i18next.t('button.go to home')}"
+          <md-elevated-button
             @click=${e => {
             window.location.replace('/auth/signin');
         }}
-          ></mwc-button>
+          >
+            <md-icon slot="icon">home</md-icon>
+            ${i18next.t('button.go to home')}
+          </md-elevated-button>
         </div>
         ${isSafari()
@@ -127,11 +127,11 @@ AuthResult.styles = [
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         padding-top: 10px;
       }
-      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-elevated-button {
+        --md-theme-primary: var(--auth-button-background-color);
+        --md-theme-on-primary: var(--primary-color);
+        --md-button-horizontal-padding: var(--padding-default);
+        --md-button-ink-color: var(--primary-color);
       }
       .lottie-container {
         width: 100%;

package/dist-client/entries/auth/result.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,~~sBAAsB~~,CAAA;~~AAC7B~~,OAAO,~~oCAAoC~~,CAAA;~~AAC3C~~,OAAO,~~wBAAwB~~,CAAA;~~AAE/B~~,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;SAC5D;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE~~;;;;;;;;;qBASb~~,~~OAAO,~~CAAC,CAAC,~~CAAC,mBAAmB,CAAC;qBAC9B,CAAC,CAAC,~~EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;;~~UAIH~~,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,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,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAjHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkLtB;SAlLY,UAAU","sourcesContent":["import '@material/~~mwc~~-button'\nimport '~~../../components~~/~~profile~~-~~component~~'\nimport '~~@operato~~/~~lottie~~-~~player~~'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n background-color: var(--auth-background);\n }\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\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 h1 {\n margin: 50px 0 0 0;\n padding: 0;\n font-size: 24px;\n color: var(--auth-title-color);\n }\n p {\n margin: 0;\n padding: var(--auth-description-padding);\n font: var(--auth-description-font);\n color: var(--auth-description-color);\n }\n :host *:focus {\n outline: none;\n }\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--secondary-color);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--primary-color);\n }\n #button-area {\n border-top: 1px dashed rgba(0, 0, 0, 0.1);\n padding-top: 10px;\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 }\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 padding-bottom: 100px;\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 .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 ]\n\n @property({ type: Object }) data: any\n @property({ type: String }) message?: string\n @property({ type: String }) resultType?: string\n\n private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n updated(changed) {\n if (changed.has('data')) {\n this.message = this.data.message\n this.resultType = this.data.resultType \|\| 'congratulations'\n }\n }\n\n render() {\n var { icon, title, description } = this.applicationMeta\n\n return html`\n <div class=\"wrap ${this.resultType}\">\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 id=\"message-area\">\n <h1>${this.message \|\| ''}</h1>\n\n <!--description message container-->\n <p></p>\n </div>\n <div id=\"button-area\">\n <~~mwc~~-button\n ~~icon=\"home\"\n raised\n label=\"${i18next.t('button.go to home')}\"\n~~ @click=${e => {\n window.location.replace('/auth/signin')\n }}\n ~~></mwc~~-button>\n </div>\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 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 ? titleMeta.content : 'Things Factory',\n description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n }\n }\n\n return this._applicationMeta\n }\n}\n"]}
1	+ {"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;SAC5D;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,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,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAjHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkLtB;SAlLY,UAAU","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n background-color: var(--auth-background);\n }\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\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 h1 {\n margin: 50px 0 0 0;\n padding: 0;\n font-size: 24px;\n color: var(--auth-title-color);\n }\n p {\n margin: 0;\n padding: var(--auth-description-padding);\n font: var(--auth-description-font);\n color: var(--auth-description-color);\n }\n :host *:focus {\n outline: none;\n }\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--secondary-color);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--primary-color);\n }\n #button-area {\n border-top: 1px dashed rgba(0, 0, 0, 0.1);\n padding-top: 10px;\n }\n md-elevated-button {\n --md-theme-primary: var(--auth-button-background-color);\n --md-theme-on-primary: var(--primary-color);\n --md-button-horizontal-padding: var(--padding-default);\n --md-button-ink-color: var(--primary-color);\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 padding-bottom: 100px;\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 .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 ]\n\n @property({ type: Object }) data: any\n @property({ type: String }) message?: string\n @property({ type: String }) resultType?: string\n\n private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n updated(changed) {\n if (changed.has('data')) {\n this.message = this.data.message\n this.resultType = this.data.resultType \|\| 'congratulations'\n }\n }\n\n render() {\n var { icon, title, description } = this.applicationMeta\n\n return html`\n <div class=\"wrap ${this.resultType}\">\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 id=\"message-area\">\n <h1>${this.message \|\| ''}</h1>\n\n <!--description message container-->\n <p></p>\n </div>\n <div id=\"button-area\">\n <md-elevated-button\n @click=${e => {\n window.location.replace('/auth/signin')\n }}\n >\n <md-icon slot=\"icon\">home</md-icon>\n ${i18next.t('button.go to home')}\n </md-elevated-button>\n </div>\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 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 ? titleMeta.content : 'Things Factory',\n description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n }\n }\n\n return this._applicationMeta\n }\n}\n"]}

package/dist-client/entries/auth/signup.js CHANGED Viewed

@@ -14,28 +14,27 @@ let AuthSignup = class AuthSignup extends AbstractSign {
     }
     get formfields() {
         const { name = '', email = '' } = this.data || {};
+        // .validationMessage=${this.passwordHelp || ''}
+        // .validationMessage=${String(i18next.t('text.passwords do not match'))}
         return html `
       <div class="field">
-        <mwc-textfield
-          name="name"
-          type="text"
-          label=${String(i18next.t('field.name'))}
-          .value=${name}
-          required
-        ></mwc-textfield>
+        <md-filled-text-field name="name" type="text" label=${String(i18next.t('field.name'))} .value=${name} required></md-filled-text-field>
       </div>
       <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'))}
-        ></mwc-textfield>
+          @input=${(e) => {
+            const target = e.target;
+            target.setCustomValidity(i18next.t('text.invalid-email'));
+        }}
+        ></md-filled-text-field>
       </div>
       <div class="field">
-        <mwc-textfield
+        <md-filled-text-field
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
@@ -47,22 +46,18 @@ let AuthSignup = class AuthSignup extends AbstractSign {
             var val = e.target.value;
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'));
         }}
-          .validationMessage=${this.passwordHelp || ''}
-        ></mwc-textfield>
+        >
+          ></md-filled-text-field
+        >
       </div>
       <div class="field">
-        <mwc-textfield
-          id="confirm-password"
-          name="confirm-password"
-          type="password"
-          label=${String(i18next.t('field.confirm password'))}
-          required
-          .validationMessage=${String(i18next.t('text.passwords do not match'))}
-        ></mwc-textfield>
+        <md-filled-text-field id="confirm-password" name="confirm-password" type="password" label=${String(i18next.t('field.confirm password'))} required>
+          ></md-filled-text-field
+        >
       </div>
-      <mwc-button class="ui button" raised @click=${e => this._onSubmit(e)}>
+      <md-elevated-button class="ui button" @click=${e => this._onSubmit(e)}>
         <ox-i18n msgid="field.${this.pageName}"></ox-i18n>
-      </mwc-button>
+      </md-elevated-button>
     `;
     }
     languageUpdated() {
@@ -72,7 +67,7 @@ let AuthSignup = class AuthSignup extends AbstractSign {
     get links() {
         return html `
       <a class="link" href="/auth/signin">
-        <mwc-button><ox-i18n msgid="field.sign in"></ox-i18n></mwc-button>
+        <md-text-button><ox-i18n msgid="field.sign in"></ox-i18n></md-text-button>
       </a>
     `;
     }

package/dist-client/entries/auth/signup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"signup.js","sourceRoot":"","sources":["../../../client/entries/auth/signup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,OAAO,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAA;AAG/F,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAI1C,IAAI,QAAQ;QACV,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,cAAc,CAAA;IACvB,CAAC;IAID,IAAI,UAAU;QACZ,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAEjD,OAAO,IAAI,CAAA~~;;;;;kBAKG~~,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC~~;mBAC9B~~,IAAI~~;;;;;;;;kBAQL~~,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;mBAE/B,KAAK~~;+BACO~~,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;;;;~~kBAOpD~~,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;qBAChC,IAAI,CAAC,eAAe,IAAI,EAAE;mBAC5B,IAAI,CAAC,YAAY,IAAI,EAAE;;;mBAGvB,CAAC,CAAC,EAAE;YACX,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YACxB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC,CAAA;QAC3F,CAAC~~;+BACoB~~,~~IAAI,CAAC,YAAY,IAAI,EAAE;;;;;;;;kBAQpC,~~MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC~~;;+BAE9B~~,~~MAAM,~~CAAC,~~OAAO,~~CAAC,~~CAAC,CAAC,6BAA6B,CAAC,CAAC;;;oDAG3B,CAAC,CAAC,~~EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;~~gCAC1C~~,IAAI,CAAC,QAAQ;;KAExC,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,eAAe,GAAG,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAA;QACnF,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACzE,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;CACF,CAAA;~~AArEC~~;IAAC,KAAK,CAAC,mBAAmB,CAAC;8BAAe,gBAAgB;+CAAA;AAZ/C,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,~~CAiFtB~~;~~SAjFY~~,UAAU","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { AbstractSign } from '../../components/abstract-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../../utils/password-rule'\n\n@customElement('auth-signup')\nexport class AuthSignup extends AbstractSign {\n private passwordPattern?: string\n private passwordHelp?: string\n\n get pageName() {\n return 'sign up'\n }\n\n get actionUrl() {\n return '/auth/signup'\n }\n\n @query('#confirm-password') confirmPass!: HTMLInputElement\n\n get formfields() {\n const { name = '', email = '' } = this.data \|\| {}\n\n return html`\n <div class=\"field\">\n <~~mwc~~-~~textfield\n~~ name=\"name\"\n type=\"text\"\n label=${String(i18next.t('field.name'))}\n .value=${name}\n required\n ></~~mwc~~-~~textfield~~>\n </div>\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 ></~~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 .pattern=${this.passwordPattern \|\| ''}\n helper=${this.passwordHelp \|\| ''}\n helperPersistent\n required\n @input=${e => {\n var val = e.target.value\n this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$\|#\\s]/g, '[$&]'))\n }}\n ~~.validationMessage=${this.passwordHelp \|\| ''}~~\n ~~></mwc-textfield~~>\n </div>\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 ~~.validationMessage=${String(i18next.t('~~text~~.passwords do not match'))}~~\n ~~></mwc-textfield~~>\n </div>\n <~~mwc~~-button class=\"ui button\" ~~raised~~ @click=${e => this._onSubmit(e)}>\n <ox-i18n msgid=\"field.${this.pageName}\"></ox-i18n>\n </~~mwc~~-button>\n `\n }\n\n languageUpdated() {\n this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n }\n\n get links() {\n return html`\n <a class=\"link\" href=\"/auth/signin\">\n <~~mwc~~-button><ox-i18n msgid=\"field.sign in\"></ox-i18n></~~mwc~~-button>\n </a>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"signup.js","sourceRoot":"","sources":["../../../client/entries/auth/signup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,OAAO,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAA;AAG/F,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAI1C,IAAI,QAAQ;QACV,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,cAAc,CAAA;IACvB,CAAC;IAID,IAAI,UAAU;QACZ,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAEjD,gDAAgD;QAChD,yEAAyE;QAEzE,OAAO,IAAI,CAAA;;8DAE+C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,IAAI;;;;;;kBAM1F,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;mBAE/B,KAAK;mBACL,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAA;YAC1C,MAAM,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAA;QAC3D,CAAC;;;;;;;kBAOO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;qBAChC,IAAI,CAAC,eAAe,IAAI,EAAE;mBAC5B,IAAI,CAAC,YAAY,IAAI,EAAE;;;mBAGvB,CAAC,CAAC,EAAE;YACX,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YACxB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC,CAAA;QAC3F,CAAC;;;;;;oGAMyF,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC;;;;qDAI1F,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;gCAC3C,IAAI,CAAC,QAAQ;;KAExC,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,eAAe,GAAG,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAA;QACnF,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACzE,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;CACF,CAAA;AAjEC;IAAC,KAAK,CAAC,mBAAmB,CAAC;8BAAe,gBAAgB;+CAAA;AAZ/C,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA6EtB;SA7EY,UAAU","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { AbstractSign } from '../../components/abstract-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../../utils/password-rule'\n\n@customElement('auth-signup')\nexport class AuthSignup extends AbstractSign {\n private passwordPattern?: string\n private passwordHelp?: string\n\n get pageName() {\n return 'sign up'\n }\n\n get actionUrl() {\n return '/auth/signup'\n }\n\n @query('#confirm-password') confirmPass!: HTMLInputElement\n\n get formfields() {\n const { name = '', email = '' } = this.data \|\| {}\n\n // .validationMessage=${this.passwordHelp \|\| ''}\n // .validationMessage=${String(i18next.t('text.passwords do not match'))}\n\n return html`\n <div class=\"field\">\n <md-filled-text-field name=\"name\" type=\"text\" label=${String(i18next.t('field.name'))} .value=${name} required></md-filled-text-field>\n </div>\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 @input=${(e: Event) => {\n const target = e.target as HTMLFormElement\n target.setCustomValidity(i18next.t('text.invalid-email'))\n }}\n ></md-filled-text-field>\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 .pattern=${this.passwordPattern \|\| ''}\n helper=${this.passwordHelp \|\| ''}\n helperPersistent\n required\n @input=${e => {\n var val = e.target.value\n this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$\|#\\s]/g, '[$&]'))\n }}\n >\n ></md-filled-text-field\n >\n </div>\n <div class=\"field\">\n <md-filled-text-field id=\"confirm-password\" name=\"confirm-password\" type=\"password\" label=${String(i18next.t('field.confirm password'))} required>\n ></md-filled-text-field\n >\n </div>\n <md-elevated-button class=\"ui button\" @click=${e => this._onSubmit(e)}>\n <ox-i18n msgid=\"field.${this.pageName}\"></ox-i18n>\n </md-elevated-button>\n `\n }\n\n languageUpdated() {\n this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n }\n\n get links() {\n return html`\n <a class=\"link\" href=\"/auth/signin\">\n <md-text-button><ox-i18n msgid=\"field.sign in\"></ox-i18n></md-text-button>\n </a>\n `\n }\n}\n"]}

package/dist-client/entries/oauth2/oauth2-decision-error-page.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- import '@material/~~mwc~~-button';
1	+ import '@material/web/button/elevated-button.js';

package/dist-client/entries/oauth2/oauth2-decision-error-page.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OAuth2DecisionErrorPage = class OAuth2DecisionErrorPage extends LitElement {
@@ -33,7 +33,7 @@ let OAuth2DecisionErrorPage = class OAuth2DecisionErrorPage extends LitElement {
         <input name="state" type="text" value="${this.req.state}" hidden />
         <input name="email" type="text" value="${this.user.email}" hidden />
-        <mwc-button raised @click="${() => history.back()}">Move back</mwc-button>
+        <md-elevated-button raised @click="${() => history.back()}">Move back</md-elevated-button>
       </form>
     `;
     }

package/dist-client/entries/oauth2/oauth2-decision-error-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"oauth2-decision-error-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-error-page.ts"],"names":[],"mappings":";AAAA,OAAO,~~sBAAsB~~,CAAA;~~AAE7B~~,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAC8B,SAAI,GAAQ,EAAE,CAAA;QACd,SAAI,GAAQ,EAAE,CAAA;QACd,WAAM,GAAQ,EAAE,CAAA;QAChB,QAAG,GAAQ,EAAE,CAAA;QACb,gBAAW,GAAW,EAAE,CAAA;QACxB,kBAAa,GAAW,EAAE,CAAA;IAqCxD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,IAAI,CAAC,IAAI;;;;oBAIR,IAAI,CAAC,MAAM,CAAC,SAAS;mCACN,IAAI,CAAC,GAAG,CAAC,QAAQ;0BAC1B,IAAI,CAAC,WAAW;mBACvB,IAAI,CAAC,GAAG,CAAC,KAAK;;;8CAGa,IAAI,CAAC,aAAa;qDACX,IAAI,CAAC,MAAM,CAAC,SAAS;sCACpC,IAAI,CAAC,GAAG,CAAC,QAAQ;qCAClB,IAAI,CAAC,GAAG,CAAC,KAAK;iDACF,IAAI,CAAC,GAAG,CAAC,KAAK;iDACd,IAAI,CAAC,IAAI,CAAC,KAAK;;~~qCAE3B~~,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;;~~KAEpD~~,CAAA;IACH,CAAC;IAED,OAAO,CAAC,YAAY;;QAClB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,IAAI,KAAI,IAAI,CAAC,IAAI,CAAA;YAChD,IAAI,CAAC,MAAM,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,IAAI,CAAC,MAAM,CAAA;YAC9C,IAAI,CAAC,GAAG,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,GAAG,KAAI,IAAI,CAAC,GAAG,CAAA;YAC7C,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,WAAW,KAAI,IAAI,CAAC,WAAW,CAAA;YACrE,IAAI,CAAC,aAAa,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,aAAa,KAAI,IAAI,CAAC,aAAa,CAAA;SAC5E;IACH,CAAC;CACF,CAAA;AA1CC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4DAAyB;AACpD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AANlD,uBAAuB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GACjC,uBAAuB,CA2C5B","sourcesContent":["import '@material/~~mwc~~-button'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('oauth2-decision-error')\nclass OAuth2DecisionErrorPage extends LitElement {\n @property({ type: Object }) data: any = {}\n @property({ type: Object }) user: any = {}\n @property({ type: Object }) domain: any = {}\n @property({ type: Object }) req: any = {}\n @property({ type: String }) redirectURI: string = ''\n @property({ type: String }) transactionID: string = ''\n\n render() {\n return html`\n <h2>Application Binding Error</h2>\n\n <p>Hi ${this.user.name}!</p>\n <p><b>Application Not Found</b></p>\n <p>You better check you give a correct client id (appKey)</p>\n\n <p>Company: ${this.domain.subdomain}</p>\n <p>Application Client ID : ${this.req.clientID}</p>\n <p>Redirect URI : ${this.redirectURI}</p>\n <p>State : ${this.req.state}</p>\n\n <form>\n <input name=\"transaction_id\" value=\"${this.transactionID}\" hidden />\n <input name=\"subdomain\" type=\"text\" value=\"${this.domain.subdomain}\" hidden />\n <input name=\"appKey\" value=\"${this.req.clientID}\" hidden />\n <input name=\"scope\" value=\"${this.req.scope}\" hidden />\n <input name=\"state\" type=\"text\" value=\"${this.req.state}\" hidden />\n <input name=\"email\" type=\"text\" value=\"${this.user.email}\" hidden />\n\n <~~mwc~~-button raised @click=\"${() => history.back()}\">Move back</~~mwc~~-button>\n </form>\n `\n }\n\n updated(changedProps) {\n if (changedProps.has('data')) {\n this.user = this.data?.oauth2?.user \|\| this.user\n this.domain = this.data?.domain \|\| this.domain\n this.req = this.data?.oauth2?.req \|\| this.req\n this.redirectURI = this.data?.oauth2?.redirectURI \|\| this.redirectURI\n this.transactionID = this.data?.oauth2?.transactionID \|\| this.transactionID\n }\n }\n}\n"]}
1	+ {"version":3,"file":"oauth2-decision-error-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-error-page.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAC8B,SAAI,GAAQ,EAAE,CAAA;QACd,SAAI,GAAQ,EAAE,CAAA;QACd,WAAM,GAAQ,EAAE,CAAA;QAChB,QAAG,GAAQ,EAAE,CAAA;QACb,gBAAW,GAAW,EAAE,CAAA;QACxB,kBAAa,GAAW,EAAE,CAAA;IAqCxD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,IAAI,CAAC,IAAI;;;;oBAIR,IAAI,CAAC,MAAM,CAAC,SAAS;mCACN,IAAI,CAAC,GAAG,CAAC,QAAQ;0BAC1B,IAAI,CAAC,WAAW;mBACvB,IAAI,CAAC,GAAG,CAAC,KAAK;;;8CAGa,IAAI,CAAC,aAAa;qDACX,IAAI,CAAC,MAAM,CAAC,SAAS;sCACpC,IAAI,CAAC,GAAG,CAAC,QAAQ;qCAClB,IAAI,CAAC,GAAG,CAAC,KAAK;iDACF,IAAI,CAAC,GAAG,CAAC,KAAK;iDACd,IAAI,CAAC,IAAI,CAAC,KAAK;;6CAEnB,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;;KAE5D,CAAA;IACH,CAAC;IAED,OAAO,CAAC,YAAY;;QAClB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,IAAI,KAAI,IAAI,CAAC,IAAI,CAAA;YAChD,IAAI,CAAC,MAAM,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,IAAI,CAAC,MAAM,CAAA;YAC9C,IAAI,CAAC,GAAG,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,GAAG,KAAI,IAAI,CAAC,GAAG,CAAA;YAC7C,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,WAAW,KAAI,IAAI,CAAC,WAAW,CAAA;YACrE,IAAI,CAAC,aAAa,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,aAAa,KAAI,IAAI,CAAC,aAAa,CAAA;SAC5E;IACH,CAAC;CACF,CAAA;AA1CC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4DAAyB;AACpD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AANlD,uBAAuB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GACjC,uBAAuB,CA2C5B","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('oauth2-decision-error')\nclass OAuth2DecisionErrorPage extends LitElement {\n @property({ type: Object }) data: any = {}\n @property({ type: Object }) user: any = {}\n @property({ type: Object }) domain: any = {}\n @property({ type: Object }) req: any = {}\n @property({ type: String }) redirectURI: string = ''\n @property({ type: String }) transactionID: string = ''\n\n render() {\n return html`\n <h2>Application Binding Error</h2>\n\n <p>Hi ${this.user.name}!</p>\n <p><b>Application Not Found</b></p>\n <p>You better check you give a correct client id (appKey)</p>\n\n <p>Company: ${this.domain.subdomain}</p>\n <p>Application Client ID : ${this.req.clientID}</p>\n <p>Redirect URI : ${this.redirectURI}</p>\n <p>State : ${this.req.state}</p>\n\n <form>\n <input name=\"transaction_id\" value=\"${this.transactionID}\" hidden />\n <input name=\"subdomain\" type=\"text\" value=\"${this.domain.subdomain}\" hidden />\n <input name=\"appKey\" value=\"${this.req.clientID}\" hidden />\n <input name=\"scope\" value=\"${this.req.scope}\" hidden />\n <input name=\"state\" type=\"text\" value=\"${this.req.state}\" hidden />\n <input name=\"email\" type=\"text\" value=\"${this.user.email}\" hidden />\n\n <md-elevated-button raised @click=\"${() => history.back()}\">Move back</md-elevated-button>\n </form>\n `\n }\n\n updated(changedProps) {\n if (changedProps.has('data')) {\n this.user = this.data?.oauth2?.user \|\| this.user\n this.domain = this.data?.domain \|\| this.domain\n this.req = this.data?.oauth2?.req \|\| this.req\n this.redirectURI = this.data?.oauth2?.redirectURI \|\| this.redirectURI\n this.transactionID = this.data?.oauth2?.transactionID \|\| this.transactionID\n }\n }\n}\n"]}

package/dist-client/entries/oauth2/oauth2-decision-page.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import '../../components/role-selector';

package/dist-client/entries/oauth2/oauth2-decision-page.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import '../../components/role-selector';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
@@ -7,6 +7,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { ButtonContainerStyles } from '@operato/styles';
 let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
     constructor() {
         super(...arguments);
@@ -54,9 +55,9 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
       <role-selector .roleCategory="${this.domain.name}" .roles="${this.roles}"></role-selector>
-      <div buttons>
-        <mwc-button @click="${() => this.decision(true)}" raised label="Allow"></mwc-button>
-        <mwc-button @click="${() => this.decision(false)}" raised danger label="Deny"></mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click="${() => this.decision(true)}" raised label="Allow"></md-elevated-button>
+        <md-elevated-button @click="${() => this.decision(false)}" raised danger label="Deny"></md-elevated-button>
       </div>
     `;
     }
@@ -130,57 +131,61 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
         return this.roleSelector.selectedRoles();
     }
 };
-OAuth2DecisionPage.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
+OAuth2DecisionPage.styles = [
+    ButtonContainerStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
-      border: 1px solid var(--primary-color);
-      margin: var(--margin-default);
-      padding: var(--padding-default);
-      font: normal 15px var(--theme-font);
-      color: var(--secondary-color);
-    }
-    [field-2column] {
-      border-radius: var(--border-radius);
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 5px 15px;
-      clear: both;
-      max-width: var(--input-container-max-width);
-    }
-    [field] {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: var(--padding-default);
-    }
-    input {
-      border: var(--border-dark-color);
-      border-radius: var(--border-radius);
-      margin: var(--input-margin);
-      padding: var(--input-padding);
-      min-width: 250px;
-      font: var(--input-font);
-    }
-    label {
-      display: flex;
-      flex-direction: column;
-      font: var(--label-font);
-      color: var(--label-color);
-      text-transform: var(--label-text-transform);
-    }
-    [buttons] {
-      margin: 0;
-      padding: var(--padding-default);
-      background-color: rgba(var(--primary-color-rgb), 0.2);
-    }
-    mwc-button {
-      margin-right: var(--padding-narrow);
-    }
-    [danger] {
-      --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-    }
-  `;
+        border: 1px solid var(--primary-color);
+        margin: var(--margin-default);
+        padding: var(--padding-default);
+        font: normal 15px var(--theme-font);
+        color: var(--secondary-color);
+      }
+      [field-2column] {
+        border-radius: var(--border-radius);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 5px 15px;
+        clear: both;
+        max-width: var(--input-container-max-width);
+      }
+      [field] {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: var(--padding-default);
+      }
+      input {
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        min-width: 250px;
+        font: var(--input-font);
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+      md-elevated-button {
+        margin-right: var(--padding-narrow);
+      }
+      [danger] {
+        --md-theme-primary: var(--md-danger-button-primary-color);
+      }
+    `
+];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/entries/oauth2/oauth2-decision-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":";AAAA,OAAO,~~sBAAsB~~,CAAA;~~AAC7B~~,OAAO,gCAAgC,CAAA;AAEvC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;~~AAGtD~~,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;~~QAqD8B~~,SAAI,GAAQ,EAAE,CAAA;QACd,SAAI,GAAQ,EAAE,CAAA;QACd,WAAM,GAAQ,EAAE,CAAA;QAChB,WAAM,GAAQ,EAAE,CAAA;QAChB,QAAG,GAAQ,EAAE,CAAA;QACb,gBAAW,GAAW,EAAE,CAAA;QACxB,kBAAa,GAAW,EAAE,CAAA;QAC3B,UAAK,GAAU,EAAE,CAAA;IA0H9C,CAAC;IAtHC,MAAM;QACJ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,IAAI,CAAC,IAAI;eACb,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;eAMhB,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;qCACJ,IAAI,CAAC,MAAM,CAAC,SAAS;;;;eAI3C,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;qCACN,IAAI,CAAC,GAAG,CAAC,QAAQ;;;;;;eAMvC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;qCACT,IAAI,CAAC,WAAW;;;;eAItC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;qCACF,IAAI,CAAC,GAAG,CAAC,KAAK;;;;;sCAKb,IAAI,CAAC,MAAM,CAAC,IAAI,aAAa,IAAI,CAAC,KAAK;;;~~8BAG/C~~,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;~~8BACzB~~,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;~~KAEnD~~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~~AApLM~~,yBAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDlB~~,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAyB;AACpD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAA2B;AACtD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iDAAkB;AAE5C;IAAC,KAAK,CAAC,eAAe,CAAC;;wDAA4D;~~AA9D~~/E,kBAAkB;IADvB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,kBAAkB,~~CAsLvB~~","sourcesContent":["import '@material/~~mwc~~-button'\nimport '../../components/role-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n border: 1px solid var(--primary-color);\n margin: var(--margin-default);\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n color: var(--secondary-color);\n }\n [field-2column] {\n border-radius: var(--border-radius);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n }\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--padding-default);\n }\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n label {\n display: flex;\n flex-direction: column;\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n ~~[buttons] {~~\n ~~margin: 0;\n padding: var(--padding~~-~~default);\n background~~-~~color: rgba(var(--primary-color-rgb), 0.2);\n }\n mwc-~~button {\n margin-right: var(--padding-narrow);\n }\n [danger] {\n --~~mdc~~-theme-primary: var(--~~mdc~~-danger-button-primary-color);\n }\n `\n\n @property({ type: Object }) data: any = {}\n @property({ type: Object }) user: any = {}\n @property({ type: Object }) client: any = {}\n @property({ type: Object }) domain: any = {}\n @property({ type: Object }) req: any = {}\n @property({ type: String }) redirectURI: string = ''\n @property({ type: String }) transactionID: string = ''\n @property({ type: Array }) roles: any[] = []\n\n @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n render() {\n return html`\n <h2>Application Binding</h2>\n <p>Hi ${this.user.name}!</p>\n <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n <p>Do you approve?</p>\n\n <form field-2column>\n <div field>\n <label\n >${i18next.t('label.company')}\n <input readonly value=\"${this.domain.subdomain}\" />\n </label>\n\n <label\n >${i18next.t('label.client-id')}\n <input readonly value=\"${this.req.clientID}\" />\n </label>\n </div>\n\n <div field>\n <label\n >${i18next.t('label.redirect_uri')}\n <input readonly value=\"${this.redirectURI}\" />\n </label>\n\n <label\n >${i18next.t('label.state')}\n <input readonly value=\"${this.req.state}\" />\n </label>\n </div>\n </form>\n\n <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n <div ~~buttons~~>\n <~~mwc~~-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></~~mwc~~-button>\n <~~mwc~~-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></~~mwc~~-button>\n </div>\n `\n }\n\n async firstUpdated() {\n this.fetchMyRoles()\n }\n\n updated(changedProps) {\n if (changedProps.has('data')) {\n this.user = this.data?.oauth2?.user \|\| this.user\n this.client = this.data?.oauth2?.client \|\| this.client\n this.domain = this.data?.domain \|\| this.domain\n this.req = this.data?.oauth2?.req \|\| this.req\n this.redirectURI = this.data?.oauth2?.redirectURI \|\| this.redirectURI\n this.transactionID = this.data?.oauth2?.transactionID \|\| this.transactionID\n }\n }\n\n async fetchMyRoles() {\n const response = await client.query({\n query: gql`\n query myRoles {\n myRoles {\n id\n name\n description\n }\n }\n `\n })\n\n if (!response.errors?.length) {\n this.roles = response.data.myRoles\n }\n }\n\n async decision(allowOrCancel) {\n const selectedRoles = this.selectedRoles()\n if (allowOrCancel && !selectedRoles?.length) {\n await OxPrompt.open({\n title: i18next.t('title.nothing selected'),\n text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n return\n }\n\n let data: any = {\n transaction_id: this.transactionID,\n subdomain: this.domain.subdomain,\n appKey: this.req.clientID,\n state: this.req.state,\n email: this.user.email,\n scopes: selectedRoles\n }\n if (!allowOrCancel) {\n data.cancel = 'Deny'\n }\n\n const response = await fetch('/oauth/decision', {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json'\n },\n redirect: 'follow',\n body: JSON.stringify(data)\n })\n\n if (response.redirected) {\n location.href = response.url\n }\n }\n\n selectedRoles() {\n return this.roleSelector.selectedRoles()\n }\n}\n"]}
1	+ {"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../../components/role-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n border: 1px solid var(--primary-color);\n margin: var(--margin-default);\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n color: var(--secondary-color);\n }\n\n [field-2column] {\n border-radius: var(--border-radius);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n }\n\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--padding-default);\n }\n\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n\n label {\n display: flex;\n flex-direction: column;\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n\n md-elevated-button {\n margin-right: var(--padding-narrow);\n }\n\n [danger] {\n --md-theme-primary: var(--md-danger-button-primary-color);\n }\n `\n ]\n\n @property({ type: Object }) data: any = {}\n @property({ type: Object }) user: any = {}\n @property({ type: Object }) client: any = {}\n @property({ type: Object }) domain: any = {}\n @property({ type: Object }) req: any = {}\n @property({ type: String }) redirectURI: string = ''\n @property({ type: String }) transactionID: string = ''\n @property({ type: Array }) roles: any[] = []\n\n @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n render() {\n return html`\n <h2>Application Binding</h2>\n <p>Hi ${this.user.name}!</p>\n <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n <p>Do you approve?</p>\n\n <form field-2column>\n <div field>\n <label\n >${i18next.t('label.company')}\n <input readonly value=\"${this.domain.subdomain}\" />\n </label>\n\n <label\n >${i18next.t('label.client-id')}\n <input readonly value=\"${this.req.clientID}\" />\n </label>\n </div>\n\n <div field>\n <label\n >${i18next.t('label.redirect_uri')}\n <input readonly value=\"${this.redirectURI}\" />\n </label>\n\n <label\n >${i18next.t('label.state')}\n <input readonly value=\"${this.req.state}\" />\n </label>\n </div>\n </form>\n\n <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n <div class=\"button-container\">\n <md-elevated-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></md-elevated-button>\n <md-elevated-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></md-elevated-button>\n </div>\n `\n }\n\n async firstUpdated() {\n this.fetchMyRoles()\n }\n\n updated(changedProps) {\n if (changedProps.has('data')) {\n this.user = this.data?.oauth2?.user \|\| this.user\n this.client = this.data?.oauth2?.client \|\| this.client\n this.domain = this.data?.domain \|\| this.domain\n this.req = this.data?.oauth2?.req \|\| this.req\n this.redirectURI = this.data?.oauth2?.redirectURI \|\| this.redirectURI\n this.transactionID = this.data?.oauth2?.transactionID \|\| this.transactionID\n }\n }\n\n async fetchMyRoles() {\n const response = await client.query({\n query: gql`\n query myRoles {\n myRoles {\n id\n name\n description\n }\n }\n `\n })\n\n if (!response.errors?.length) {\n this.roles = response.data.myRoles\n }\n }\n\n async decision(allowOrCancel) {\n const selectedRoles = this.selectedRoles()\n if (allowOrCancel && !selectedRoles?.length) {\n await OxPrompt.open({\n title: i18next.t('title.nothing selected'),\n text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n return\n }\n\n let data: any = {\n transaction_id: this.transactionID,\n subdomain: this.domain.subdomain,\n appKey: this.req.clientID,\n state: this.req.state,\n email: this.user.email,\n scopes: selectedRoles\n }\n if (!allowOrCancel) {\n data.cancel = 'Deny'\n }\n\n const response = await fetch('/oauth/decision', {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json'\n },\n redirect: 'follow',\n body: JSON.stringify(data)\n })\n\n if (response.redirected) {\n location.href = response.url\n }\n }\n\n selectedRoles() {\n return this.roleSelector.selectedRoles()\n }\n}\n"]}

package/dist-client/entries/public/home.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import '@material/mwc-icon-button';
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/elevated-button.js';
 import { LitElement } from 'lit';
 declare const HomePage_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class HomePage extends HomePage_base {

package/dist-client/entries/public/home.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon-button';
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/elevated-button.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { i18next, localize } from '@operato/i18n';
 let HomePage = class HomePage extends localize(i18next)(LitElement) {
     render() {
@@ -11,8 +13,15 @@ let HomePage = class HomePage extends localize(i18next)(LitElement) {
         const explanation1 = this.explanation1 || 'Create your free account today.';
         const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.';
         return html `
-      <mwc-icon-button home icon="home" @click=${e => (window.location.href = '/')}></mwc-icon-button>
-      <mwc-button signin dense @click=${e => (window.location.href = '/auth/signin')}>sign in</mwc-button>
+      <a
+        class="signin"
+        @click=${e => {
+            e.preventDefault();
+            window.location.href = '/auth/signin';
+        }}
+      >
+        ${i18next.t('button.sign_in')}</a
+      >
       <div message>
         <strong>${tagline}</strong> ${explanation1} <br />
@@ -21,14 +30,13 @@ let HomePage = class HomePage extends localize(i18next)(LitElement) {
       </div>
       <div ticket>
-        <div brand><img src=${icon} /></div>
+        <div brand><img src=${ifDefined(icon)} /></div>
         <div content>
-          <form action="/auth/join" accept-charset="utf-8" name="join" method="POST">
+          <form action="/auth/join" accept-charset="utf-8" name="join" method="post">
             <fieldset>
               <legend>${title} invitation ticket</legend>
               <input type="text" name="email" placeholder="Enter your email address" />
               <input type="submit" value="join now" />
-              <!-- help this button, pls <mwc-button raised label="join now"></mwc-button> -->
             </fieldset>
           </form>
         </div>
@@ -61,25 +69,41 @@ HomePage.styles = [
         position: relative;
       }
-      [home] {
+      .signin {
         position: absolute;
-        left: 20px;
+        right: 20px;
         top: 10px;
-        font-size: 2em;
-        color: var(--primary-color);
+        display: inline-block;
+        padding: 12px 24px;
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        border: none;
+        border-radius: 4px;
+        text-align: center;
+        text-decoration: none;
+        transition:
+          background-color 0.3s,
+          transform 0.3s;
       }
-      [signin] {
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        font-size: 2em;
+      .signin:hover {
+        color: var(--md-sys-color-tertiary-container);
+        background-color: var(--md-sys-color-on-tertiary-container);
+        transform: translateY(-2px);
+      }
+      .signin:active {
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        transform: translateY(0);
       }
       [message] {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-secondary-container);
         padding: 60px 50px 0 50px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         text-align: center;
         font-size: 20px;
       }
@@ -112,15 +136,15 @@ HomePage.styles = [
         align-items: center;
         border-radius: 12px;
         overflow: hidden;
-        background-color: var(--primary-color);
+        background-color: var(--md-sys-color-primary);
         box-shadow: var(--box-shadow);
-        border-right: 3px dotted var(--main-section-background-color);
+        border-right: 3px dotted var(--md-sys-color-secondary-container);
         text-align: center;
       }
       [ticket] [content] {
         border-radius: 12px;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-tertiary-container);
         padding: var(--padding-default) var(--padding-wide);
         box-shadow: var(--box-shadow);
       }
@@ -140,9 +164,9 @@ HomePage.styles = [
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--md-sys-color-outline);
         border-radius: var(--border-radius);
-        padding: var(--input-padding);
+        padding: var(--padding-default);
         font: var(--input-font);
       }
@@ -185,7 +209,7 @@ HomePage.styles = [
           border: 0;
         }
         [content] {
-          border: 1px solid var(--primary-color);
+          border: 1px solid var(--md-sys-color-primary);
         }
         fieldset {
@@ -196,7 +220,7 @@ HomePage.styles = [
           margin: var(--margin-narrow) 0 var(--margin-default) 0;
           text-align: center;
         }
-        fieldset mwc-button {
+        fieldset md-text-button {
           width: 100%;
         }
       }