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

package/dist-client/components/abstract-sign.js

@@ -1,4 +1,10 @@
+import '@operato/i18n/ox-i18n.js';
+import { html, nothing } from 'lit';
+import { startAuthentication } from '@simplewebauthn/browser';
+import { i18next } from '@operato/i18n';
+import { notify } from '@operato/layout';
 import { AbstractAuthPage } from './abstract-auth-page.js';
+const isAvailableWebauthn = 'PublicKeyCredential' in window;
 export class AbstractSign extends AbstractAuthPage {
     async submit() {
         this.formEl.submit();
@@ -17,5 +23,85 @@ export class AbstractSign extends AbstractAuthPage {
             }
         }
     }
+    get formfields() {
+        var _a;
+        const email = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.email) || '';
+        const autocompletable = this.autocompletable;
+        return html `
+      <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
+
+      <div class="field">
+        <md-filled-text-field
+          name="email"
+          type="email"
+          label=${String(i18next.t('field.email'))}
+          required
+          .value=${email}
+          autocomplete=${autocompletable ? "username" : "off"}
+          autocapitalize="off"
+          @input=${(e) => {
+            const target = e.target;
+            if (target.validity.typeMismatch) {
+                target.setCustomValidity(i18next.t('text.invalid-email'));
+            }
+            else {
+                target.setCustomValidity('');
+            }
+        }}
+          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+        >
+      </div>
+      <div class="field">
+        <md-filled-text-field
+          name="password"
+          type="password"
+          label=${String(i18next.t('field.password'))}
+          autocomplete=${autocompletable ? "current-password" : "off"}
+          required
+          ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
+        >
+      </div>
+
+      <div class="submit-buttons-container">
+        <md-elevated-button class="submit-button" type="submit" raised @click=${e => this._onSubmit(e)}>
+          <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
+        </md-elevated-button>
+        ${isAvailableWebauthn
+            ? html ` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
+            : nothing}
+      </div>
+    `;
+    }
+    async authenticateUser() {
+        try {
+            const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json());
+            const assertionResp = await startAuthentication(options);
+            const verification = await fetch('/auth/signin-webauthn', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(assertionResp)
+            }).then(res => res.json());
+            if (verification.verified) {
+                const { redirectURL } = verification;
+                if (redirectURL) {
+                    window.location.href = redirectURL;
+                }
+            }
+            else {
+                notify({
+                    level: 'error',
+                    message: verification.message
+                });
+            }
+        }
+        catch (error) {
+            notify({
+                level: 'error',
+                message: i18next.t('error.authn verification failed')
+            });
+        }
+    }
 }
 //# sourceMappingURL=abstract-sign.js.map

package/dist-client/components/abstract-sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,MAAM,OAAgB,YAAa,SAAQ,gBAAgB;IACzD,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;IACtB,CAAC;IAED,OAAO,CAAC,OAAO;QACb,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAEtB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,YAAY,EAAE,CAAA;aACpB;iBAAM;gBACL,IAAI,CAAC,YAAY,CAAC;oBAChB,KAAK,EAAE,OAAO;oBACd,KAAK,EAAE,CAAC,CAAC;iBACV,CAAC,CAAA;aACH;SACF;IACH,CAAC;CACF","sourcesContent":["import { AbstractAuthPage } from './abstract-auth-page.js'\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, nothing } from 'lit'\nimport { startAuthentication } from '@simplewebauthn/browser'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    const autocompletable = this.autocompletable\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=${autocompletable ? \"username\" : \"off\"}\n          autocapitalize=\"off\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-email'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\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=${autocompletable ? \"current-password\" : \"off\"}\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async authenticateUser() {\n    try {\n      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())\n      const assertionResp = await startAuthentication(options)\n      const verification = await fetch('/auth/signin-webauthn', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(assertionResp)\n      }).then(res => res.json())\n\n      if (verification.verified) {\n        const { redirectURL } = verification\n  \n        if (redirectURL) {\n          window.location.href = redirectURL\n        }\n      } else {\n        notify({\n          level: 'error',\n          message: verification.message\n        })\n      }\n  \n    } catch (error) {\n      notify({\n        level: 'error',\n        message: i18next.t('error.authn verification failed')\n      })\n    }\n  }\n}\n"]}

package/dist-client/components/change-password.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { auth } from '@things-factory/auth-base/dist-client';
+import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 let ChangePassword = class ChangePassword extends localize(i18next)(LitElement) {
     render() {
         return html `
@@ -17,7 +17,7 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
           <input type="password" name="confirm_pass" placeholder=${i18next.t('text.confirm password')} required />
         </div>
 
-        <mwc-button raised label="${i18next.t('text.change password')}" @click=${this.submit.bind(this)}></mwc-button>
+        <md-elevated-button @click=${this.submit.bind(this)}>${i18next.t('text.change password')}</md-elevated-button>
       </form>
     `;
     }
@@ -76,8 +76,8 @@ ChangePassword.styles = [
         text-transform: capitalize;
       }
 
-      mwc-button {
-        margin: var(--margin-narrow) auto var(--margin-default) auto;
+      md-elevated-button {
+        margin: var(--spacing-small) auto var(--spacing-medium) auto;
       }
 
       button {

package/dist-client/components/change-password.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-password.js","sourceRoot":"","sources":["../../client/components/change-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAGrD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA4D/D,MAAM;QACJ,OAAO,IAAI,CAAA;;;mEAGoD,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;+DAGtC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mEAG1B,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;oCAGjE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,YAAY,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;KAElG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM;;QACV,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE;YAC7C,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,WAAW,GAAG,MAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,GAAG,CAAsB,0CAAE,WAAW,CAAA;gBAC/F,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;aACxF;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;SACpB;QAED,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,MAAM,CAAC,cAAc,CAAC,EAAE;YACjD,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAA;SACzF;QAED,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AAlGM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;CACF,CAAA;AAED;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;4CAAA;AA1D1B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoG1B;SApGY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client'\n\n@customElement('change-password')\nexport class ChangePassword extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      * {\n        box-sizing: border-box;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n      }\n\n      input {\n        border: var(--change-password-field-border);\n        border-radius: var(--change-password-field-border-radius);\n        margin: var(--change-password-field-margin);\n        padding: var(--change-password-field-padding);\n\n        font: var(--change-password-field-font);\n        width: var(--change-password-field-width);\n      }\n\n      input:focus {\n        border: 1px solid var(--focus-background-color);\n      }\n\n      ::placeholder {\n        font-size: 0.8rem;\n        text-transform: capitalize;\n      }\n\n      mwc-button {\n        margin: var(--margin-narrow) auto var(--margin-default) auto;\n      }\n\n      button {\n        background-color: var(--secondary-color, #394e64);\n        margin: 2px 2px 10px 2px;\n        height: var(--button-height, 28px);\n        color: var(--button-color, #fff);\n        font: var(--button-font);\n        border-radius: var(--button-radius, 5px);\n        border: var(--button-border, 1px solid transparent);\n        line-height: 1.5;\n      }\n\n      button:hover,\n      button:active {\n        background-color: var(--button-active-background-color, #22a6a7);\n        border: var(--button-active-border);\n      }\n    `\n  ]\n\n  @query('form') form!: HTMLFormElement\n\n  render() {\n    return html`\n      <form>\n        <div class=\"field\">\n          <input type=\"password\" name=\"current_pass\" placeholder=${i18next.t('text.current password')} required />\n        </div>\n        <div class=\"field\">\n          <input type=\"password\" name=\"new_pass\" placeholder=${i18next.t('text.new password')} required />\n        </div>\n        <div class=\"field\">\n          <input type=\"password\" name=\"confirm_pass\" placeholder=${i18next.t('text.confirm password')} required />\n        </div>\n\n        <mwc-button raised label=\"${i18next.t('text.change password')}\" @click=${this.submit.bind(this)}></mwc-button>\n      </form>\n    `\n  }\n\n  async submit() {\n    const formData = new FormData(this.form)\n    let params = {}\n    for (const [key, value] of formData.entries()) {\n      if (!value) {\n        const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder\n        return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))\n      }\n      params[key] = value\n    }\n\n    if (params['new_pass'] !== params['confirm_pass']) {\n      return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'))\n    }\n\n    auth.changePassword(params)\n    this.form.reset()\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}
+{"version":3,"file":"change-password.js","sourceRoot":"","sources":["../../client/components/change-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA4D/D,MAAM;QACJ,OAAO,IAAI,CAAA;;;mEAGoD,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;+DAGtC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mEAG1B,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;qCAGhE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;KAE3F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM;;QACV,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC9C,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,MAAM,WAAW,GAAG,MAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,GAAG,CAAsB,0CAAE,WAAW,CAAA;gBAC/F,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;YACzF,CAAC;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC;QAED,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAA;QAC1F,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AAlGM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;CACF,AAvDY,CAuDZ;AAEc;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;4CAAA;AA1D1B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoG1B","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('change-password')\nexport class ChangePassword extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      * {\n        box-sizing: border-box;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n      }\n\n      input {\n        border: var(--change-password-field-border);\n        border-radius: var(--change-password-field-border-radius);\n        margin: var(--change-password-field-margin);\n        padding: var(--change-password-field-padding);\n\n        font: var(--change-password-field-font);\n        width: var(--change-password-field-width);\n      }\n\n      input:focus {\n        border: 1px solid var(--focus-background-color);\n      }\n\n      ::placeholder {\n        font-size: 0.8rem;\n        text-transform: capitalize;\n      }\n\n      md-elevated-button {\n        margin: var(--spacing-small) auto var(--spacing-medium) auto;\n      }\n\n      button {\n        background-color: var(--secondary-color, #394e64);\n        margin: 2px 2px 10px 2px;\n        height: var(--button-height, 28px);\n        color: var(--button-color, #fff);\n        font: var(--button-font);\n        border-radius: var(--button-radius, 5px);\n        border: var(--button-border, 1px solid transparent);\n        line-height: 1.5;\n      }\n\n      button:hover,\n      button:active {\n        background-color: var(--button-active-background-color, #22a6a7);\n        border: var(--button-active-border);\n      }\n    `\n  ]\n\n  @query('form') form!: HTMLFormElement\n\n  render() {\n    return html`\n      <form>\n        <div class=\"field\">\n          <input type=\"password\" name=\"current_pass\" placeholder=${i18next.t('text.current password')} required />\n        </div>\n        <div class=\"field\">\n          <input type=\"password\" name=\"new_pass\" placeholder=${i18next.t('text.new password')} required />\n        </div>\n        <div class=\"field\">\n          <input type=\"password\" name=\"confirm_pass\" placeholder=${i18next.t('text.confirm password')} required />\n        </div>\n\n        <md-elevated-button @click=${this.submit.bind(this)}>${i18next.t('text.change password')}</md-elevated-button>\n      </form>\n    `\n  }\n\n  async submit() {\n    const formData = new FormData(this.form)\n    let params = {}\n    for (const [key, value] of formData.entries()) {\n      if (!value) {\n        const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder\n        return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))\n      }\n      params[key] = value\n    }\n\n    if (params['new_pass'] !== params['confirm_pass']) {\n      return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'))\n    }\n\n    auth.changePassword(params)\n    this.form.reset()\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/components/contact-us.d.ts

@@ -1,7 +1,7 @@
-import '@material/mwc-textarea';
-import '@material/mwc-textfield';
-import '@material/mwc-button';
-import '@material/mwc-dialog';
+import '@material/web/button/text-button.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/dialog/dialog.js';
 import '@operato/i18n';
 import { LitElement } from 'lit';
 declare const ContactUs_base: (new (...args: any[]) => LitElement) & typeof LitElement;

package/dist-client/components/contact-us.js

@@ -1,21 +1,17 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-textarea';
-import '@material/mwc-textfield';
-import '@material/mwc-button';
-import '@material/mwc-dialog';
+import '@material/web/button/text-button.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/dialog/dialog.js';
 import '@operato/i18n';
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { auth } from '@things-factory/auth-base/dist-client';
+import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
     static get styles() {
         return [
             css `
-        :host {
-          --mdc-theme-primary: var(--primary-color);
-        }
-
         * {
           box-sizing: border-box;
         }
@@ -34,16 +30,16 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
     }
     render() {
         return html `
-      <mwc-button raised label=${i18next.t('button.need help')} @click=${e => (this.dialog.open = true)}></mwc-button>
+      <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>
 
-      <mwc-dialog id="dialog" heading=${i18next.t('title.need help')}>
+      <md-dialog id="dialog" heading=${i18next.t('title.need help')}>
         <form action="" method="POST">
           <input id="subject-input" name="subject" type="hidden" />
           <input id="sender-input" name="sender" type="hidden" />
           <input id="content-input" name="content" type="hidden" />
         </form>
         <div id="input-form">
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             label=${i18next.t('label.subject')}
             dialogInitialFocus
@@ -52,8 +48,8 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
             const val = e.target.value;
             this.subjectInput.value = val;
         }}
-          ></mwc-textfield>
-          <mwc-textfield
+          ></md-filled-text-field>
+          <md-filled-text-field
             type="text"
             name="sender"
             label=${i18next.t('label.email')}
@@ -62,9 +58,10 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
             const val = e.target.value;
             this.senderInput.value = val;
         }}
-          ></mwc-textfield>
-          <mwc-textarea
+          ></md-filled-text-field>
+          <md-filled-text-field
             name="content"
+            type="textarea"
             label=${i18next.t('label.content')}
             required
             @keydown=${e => e.stopPropagation()}
@@ -72,17 +69,13 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
             const val = e.target.value;
             this.contentInput.value = val;
         }}
-          ></mwc-textarea>
+          ></md-filled-text-field>
         </div>
-        <mwc-button
-          slot="primaryAction"
-          type="submit"
-          label=${i18next.t('button.submit')}
-          raised
-          @click=${e => this._submit(e)}
-        ></mwc-button>
-        <mwc-button slot="secondaryAction" dialogAction="cancel" label=${i18next.t('button.cancel')}></mwc-button>
-      </mwc-dialog>
+        <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}
+          >${i18next.t('button.submit')}</md-elevated-button
+        >
+        <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
+      </md-dialog>
     `;
     }
     _checkValidity() {

package/dist-client/components/contact-us.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-us.js","sourceRoot":"","sources":["../../client/components/contact-us.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-textarea'\nimport '@material/mwc-textfield'\nimport '@material/mwc-button'\nimport '@material/mwc-dialog'\nimport '@operato/i18n'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client'\n\n@customElement('contact-us')\nexport class ContactUs extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          --mdc-theme-primary: var(--primary-color);\n        }\n\n        * {\n          box-sizing: border-box;\n        }\n\n        *:focus {\n          outline: none;\n        }\n\n        #input-form {\n          display: grid;\n          grid-template-rows: 1fr 1fr 3fr;\n          grid-gap: 10px 0;\n        }\n      `\n    ]\n  }\n\n  @query('#dialog') dialog!: HTMLElement & { open: boolean }\n  @query('#subject-input') subjectInput!: HTMLInputElement\n  @query('#sender-input') senderInput!: HTMLInputElement\n  @query('#content-input') contentInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <mwc-button raised label=${i18next.t('button.need help')} @click=${e => (this.dialog.open = true)}></mwc-button>\n\n      <mwc-dialog id=\"dialog\" heading=${i18next.t('title.need help')}>\n        <form action=\"\" method=\"POST\">\n          <input id=\"subject-input\" name=\"subject\" type=\"hidden\" />\n          <input id=\"sender-input\" name=\"sender\" type=\"hidden\" />\n          <input id=\"content-input\" name=\"content\" type=\"hidden\" />\n        </form>\n        <div id=\"input-form\">\n          <mwc-textfield\n            type=\"text\"\n            label=${i18next.t('label.subject')}\n            dialogInitialFocus\n            required\n            @input=${e => {\n              const val = e.target.value\n              this.subjectInput.value = val\n            }}\n          ></mwc-textfield>\n          <mwc-textfield\n            type=\"text\"\n            name=\"sender\"\n            label=${i18next.t('label.email')}\n            required\n            @input=${e => {\n              const val = e.target.value\n              this.senderInput.value = val\n            }}\n          ></mwc-textfield>\n          <mwc-textarea\n            name=\"content\"\n            label=${i18next.t('label.content')}\n            required\n            @keydown=${e => e.stopPropagation()}\n            @input=${e => {\n              const val = e.target.value\n              this.contentInput.value = val\n            }}\n          ></mwc-textarea>\n        </div>\n        <mwc-button\n          slot=\"primaryAction\"\n          type=\"submit\"\n          label=${i18next.t('button.submit')}\n          raised\n          @click=${e => this._submit(e)}\n        ></mwc-button>\n        <mwc-button slot=\"secondaryAction\" dialogAction=\"cancel\" label=${i18next.t('button.cancel')}></mwc-button>\n      </mwc-dialog>\n    `\n  }\n\n  _checkValidity(): boolean {\n    return false\n  }\n\n  _submit(e: MouseEvent) {\n    if (!this._checkValidity()) return\n\n    const form = e.target as HTMLFormElement\n\n    const formData = new FormData(form)\n    let json = {}\n\n    //convert form into json\n    for (const [key, value] of formData.entries()) {\n      json[key] = value\n    }\n\n    auth.changePassword(json)\n\n    form.reset()\n  }\n}\n"]}
+{"version":3,"file":"contact-us.js","sourceRoot":"","sources":["../../client/components/contact-us.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@material/web/dialog/dialog.js'\n\nimport '@operato/i18n'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('contact-us')\nexport class ContactUs extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        * {\n          box-sizing: border-box;\n        }\n\n        *:focus {\n          outline: none;\n        }\n\n        #input-form {\n          display: grid;\n          grid-template-rows: 1fr 1fr 3fr;\n          grid-gap: 10px 0;\n        }\n      `\n    ]\n  }\n\n  @query('#dialog') dialog!: HTMLElement & { open: boolean }\n  @query('#subject-input') subjectInput!: HTMLInputElement\n  @query('#sender-input') senderInput!: HTMLInputElement\n  @query('#content-input') contentInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>\n\n      <md-dialog id=\"dialog\" heading=${i18next.t('title.need help')}>\n        <form action=\"\" method=\"POST\">\n          <input id=\"subject-input\" name=\"subject\" type=\"hidden\" />\n          <input id=\"sender-input\" name=\"sender\" type=\"hidden\" />\n          <input id=\"content-input\" name=\"content\" type=\"hidden\" />\n        </form>\n        <div id=\"input-form\">\n          <md-filled-text-field\n            type=\"text\"\n            label=${i18next.t('label.subject')}\n            dialogInitialFocus\n            required\n            @input=${e => {\n              const val = e.target.value\n              this.subjectInput.value = val\n            }}\n          ></md-filled-text-field>\n          <md-filled-text-field\n            type=\"text\"\n            name=\"sender\"\n            label=${i18next.t('label.email')}\n            required\n            @input=${e => {\n              const val = e.target.value\n              this.senderInput.value = val\n            }}\n          ></md-filled-text-field>\n          <md-filled-text-field\n            name=\"content\"\n            type=\"textarea\"\n            label=${i18next.t('label.content')}\n            required\n            @keydown=${e => e.stopPropagation()}\n            @input=${e => {\n              const val = e.target.value\n              this.contentInput.value = val\n            }}\n          ></md-filled-text-field>\n        </div>\n        <md-elevated-button slot=\"primaryAction\" type=\"submit\" @click=${e => this._submit(e)}\n          >${i18next.t('button.submit')}</md-elevated-button\n        >\n        <md-text-button slot=\"secondaryAction\" dialogAction=\"cancel\">${i18next.t('button.cancel')}</md-text-button>\n      </md-dialog>\n    `\n  }\n\n  _checkValidity(): boolean {\n    return false\n  }\n\n  _submit(e: MouseEvent) {\n    if (!this._checkValidity()) return\n\n    const form = e.target as HTMLFormElement\n\n    const formData = new FormData(form)\n    let json = {}\n\n    //convert form into json\n    for (const [key, value] of formData.entries()) {\n      json[key] = value\n    }\n\n    auth.changePassword(json)\n\n    form.reset()\n  }\n}\n"]}

package/dist-client/components/create-domain-popup.d.ts

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

package/dist-client/components/create-domain-popup.js

@@ -1,11 +1,12 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { ButtonContainerStyles } from '@operato/styles';
 let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitElement) {
     render() {
         return html `
@@ -23,8 +24,8 @@ let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitEle
         <label>${i18next.t('label.description')}<input type="text" name="description" /></label>
       </div>
 
-      <div buttons>
-        <mwc-button raised @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</md-elevated-button>
       </div>
     `;
     }
@@ -78,45 +79,48 @@ let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitEle
     }
 };
 CreateDomainPopup.styles = [
+    ButtonContainerStyles,
     css `
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
         overflow: auto;
       }
+
       input.checkValidName {
         background-color: #fce6e6;
       }
-      mwc-button {
+
+      md-elevated-button {
         display: flex;
         justify-content: center;
       }
+
       label {
         display: flex;
         flex-direction: column;
 
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
+
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         font: var(--input-font);
 
         flex: 1;
       }
+
       [field] {
         grid-column: span 2;
       }
-      [buttons] {
-        margin-top: auto;
-      }
     `
 ];
 __decorate([

package/dist-client/components/create-domain-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n        overflow: auto;\n      }\n      input.checkValidName {\n        background-color: #fce6e6;\n      }\n      mwc-button {\n        display: flex;\n        justify-content: center;\n      }\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\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        background-color: var(--theme-white-color);\n        font: var(--input-font);\n\n        flex: 1;\n      }\n      [field] {\n        grid-column: span 2;\n      }\n      [buttons] {\n        margin-top: auto;\n      }\n    `\n  ]\n\n  @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div field grid-span>\n        <label\n          >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n            type=\"text\"\n            name=\"name\"\n            @input=${this.checkValidation}\n            autofocus\n        /></label>\n      </div>\n\n      <div field grid-span>\n        <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n      </div>\n\n      <div buttons>\n        <mwc-button raised @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</mwc-button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.nameInput.focus() // autofocus\n  }\n\n  get inputData() {\n    return this.renderRoot.querySelectorAll('input')\n  }\n\n  checkValidation(e) {\n    const currentInput = e.currentTarget\n    const regExp = /^[a-zA-Z ]+$/\n\n    if (!regExp.test(currentInput.value)) {\n      currentInput.classList.add('checkValidName')\n    } else {\n      currentInput.classList.remove('checkValidName')\n    }\n  }\n\n  async onCreateDomain() {\n    const domainInput: { [prop: string]: string } = {}\n    this.inputData.forEach(data => (domainInput[data.name] = data.value))\n    const regExp = /^[a-zA-z0-9- ]+$/\n\n    if (!regExp.test(domainInput.name)) {\n      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation domainRegister($domainInput: DomainGeneratorInput!) {\n          domainRegister(domainInput: $domainInput) {\n            id\n            name\n          }\n        }\n      `,\n      variables: { domainInput }\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        type: 'success',\n        title: i18next.t('text.completed'),\n        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      history.back()\n\n      this.dispatchEvent(new CustomEvent('fetch-data'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}
+{"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAGvD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAiD3D,MAAM;QACJ,OAAO,IAAI,CAAA;;;aAGF,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC;;;qBAGnD,IAAI,CAAC,eAAe;;;;;;iBAMxB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;qCAIV,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;KAExF,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAA,CAAC,YAAY;IACrC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAClD,CAAC;IAED,eAAe,CAAC,CAAC;QACf,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAA;QACpC,MAAM,MAAM,GAAG,cAAc,CAAA;QAE7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC9C,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;QACjD,CAAC;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,MAAM,WAAW,GAA+B,EAAE,CAAA;QAClD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QACrE,MAAM,MAAM,GAAG,kBAAkB,CAAA;QAEjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,6DAA6D,CAAC,CAAC,CAAA;QACjG,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;OAOZ;YACD,SAAS,EAAE,EAAE,WAAW,EAAE;SAC3B,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,QAAQ,CAAC,IAAI,CAAC;gBAClB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAClC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC;gBAChF,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;aACrD,CAAC,CAAA;YAEF,OAAO,CAAC,IAAI,EAAE,CAAA;YAEd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;QACnD,CAAC;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AA9HM,wBAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,AA5CY,CA4CZ;AAE4B;IAA5B,KAAK,CAAC,oBAAoB,CAAC;8BAAa,gBAAgB;oDAAA;AA/CrD,iBAAiB;IADtB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CAgItB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n        overflow: auto;\n      }\n\n      input.checkValidName {\n        background-color: #fce6e6;\n      }\n\n      md-elevated-button {\n        display: flex;\n        justify-content: center;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--md-sys-color-surface);\n        font: var(--input-font);\n\n        flex: 1;\n      }\n\n      [field] {\n        grid-column: span 2;\n      }\n    `\n  ]\n\n  @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div field grid-span>\n        <label\n          >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n            type=\"text\"\n            name=\"name\"\n            @input=${this.checkValidation}\n            autofocus\n        /></label>\n      </div>\n\n      <div field grid-span>\n        <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n      </div>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</md-elevated-button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.nameInput.focus() // autofocus\n  }\n\n  get inputData() {\n    return this.renderRoot.querySelectorAll('input')\n  }\n\n  checkValidation(e) {\n    const currentInput = e.currentTarget\n    const regExp = /^[a-zA-Z ]+$/\n\n    if (!regExp.test(currentInput.value)) {\n      currentInput.classList.add('checkValidName')\n    } else {\n      currentInput.classList.remove('checkValidName')\n    }\n  }\n\n  async onCreateDomain() {\n    const domainInput: { [prop: string]: string } = {}\n    this.inputData.forEach(data => (domainInput[data.name] = data.value))\n    const regExp = /^[a-zA-z0-9- ]+$/\n\n    if (!regExp.test(domainInput.name)) {\n      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation domainRegister($domainInput: DomainGeneratorInput!) {\n          domainRegister(domainInput: $domainInput) {\n            id\n            name\n          }\n        }\n      `,\n      variables: { domainInput }\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        type: 'success',\n        title: i18next.t('text.completed'),\n        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      history.back()\n\n      this.dispatchEvent(new CustomEvent('fetch-data'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/components/create-role.d.ts

@@ -1 +1 @@
-import '@material/mwc-textfield';
+import '@material/web/textfield/filled-text-field.js';

package/dist-client/components/create-role.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-textfield';
+import '@material/web/textfield/filled-text-field.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
@@ -9,22 +9,20 @@ import { OxPrompt } from '@operato/popup/ox-prompt.js';
 let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
     render() {
         return html `
-      <mwc-textfield
+      <md-filled-text-field
         type="text"
         name="name"
         label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
-      ></mwc-textfield>
-      <mwc-textfield
+      ></md-filled-text-field>
+      <md-filled-text-field
         type="text"
         name="description"
         label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
-      ></mwc-textfield>
+      ></md-filled-text-field>
 
-      <mwc-button
-        @click=${this.onCreateRole.bind(this)}
-        outlined
-        label=${String(i18next.t('button.create'))}
-      ></mwc-button>
+      <md-outlined-button @click=${this.onCreateRole.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
     `;
     }
     async onCreateRole() {
@@ -72,10 +70,10 @@ let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
 };
 CreateRole.styles = css `
     :host {
-      --mdc-text-field-fill-color: var(--theme-white-color);
-      background-color: var(--theme-white-color);
-      margin: var(--margin-wide) 0;
-      padding: var(--padding-wide);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 
@@ -88,7 +86,7 @@ CreateRole.styles = css `
       align-items: center;
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
 
@@ -97,7 +95,7 @@ CreateRole.styles = css `
         grid-template-columns: 1fr 1fr;
       }
 
-      mwc-button {
+      md-outlined-button {
         grid-column: span 2;
 
         margin: var(--input-margin);

package/dist-client/components/create-role.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-role.js","sourceRoot":"","sources":["../../client/components/create-role.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-textfield'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      --mdc-text-field-fill-color: var(--theme-white-color);\n      background-color: var(--theme-white-color);\n      margin: var(--margin-wide) 0;\n      padding: var(--padding-wide);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n\n      display: grid;\n      grid-template-columns: 1fr 2fr auto;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n\n      align-items: center;\n    }\n\n    mwc-button {\n      margin: var(--input-margin);\n    }\n\n    @media screen and (max-width: 480px) {\n      :host {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      mwc-button {\n        grid-column: span 2;\n\n        margin: var(--input-margin);\n      }\n    }\n  `\n\n  @query('[name=name]') nameInput!: HTMLInputElement\n  @query('[name=description]') descriptionInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <mwc-textfield\n        type=\"text\"\n        name=\"name\"\n        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}\n      ></mwc-textfield>\n      <mwc-textfield\n        type=\"text\"\n        name=\"description\"\n        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}\n      ></mwc-textfield>\n\n      <mwc-button\n        @click=${this.onCreateRole.bind(this)}\n        outlined\n        label=${String(i18next.t('button.create'))}\n      ></mwc-button>\n    `\n  }\n\n  async onCreateRole() {\n    let role: { name?: string; description?: string } = {}\n\n    const name = this.nameInput.value.trim()\n    const description = this.descriptionInput.value\n\n    if (!name) {\n      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n    }\n\n    role.name = name\n    role.description = description\n\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation createRole($role: NewRole!) {\n            createRole(role: $role) {\n              name\n            }\n          }\n        `,\n        variables: { role },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.data_uploaded_successfully'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        this.nameInput.value = ''\n        this.descriptionInput.value = ''\n      }\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"create-role.js","sourceRoot":"","sources":["../../client/components/create-role.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      --md-text-field-fill-color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--spacing-large) 0;\n      padding: var(--spacing-large);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n\n      display: grid;\n      grid-template-columns: 1fr 2fr auto;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n\n      align-items: center;\n    }\n\n    md-outlined-button {\n      margin: var(--input-margin);\n    }\n\n    @media screen and (max-width: 480px) {\n      :host {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      md-outlined-button {\n        grid-column: span 2;\n\n        margin: var(--input-margin);\n      }\n    }\n  `\n\n  @query('[name=name]') nameInput!: HTMLInputElement\n  @query('[name=description]') descriptionInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-filled-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}\n      ></md-filled-text-field>\n      <md-filled-text-field\n        type=\"text\"\n        name=\"description\"\n        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}\n      ></md-filled-text-field>\n\n      <md-outlined-button @click=${this.onCreateRole.bind(this)}\n        >${String(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateRole() {\n    let role: { name?: string; description?: string } = {}\n\n    const name = this.nameInput.value.trim()\n    const description = this.descriptionInput.value\n\n    if (!name) {\n      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n    }\n\n    role.name = name\n    role.description = description\n\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation createRole($role: NewRole!) {\n            createRole(role: $role) {\n              name\n            }\n          }\n        `,\n        variables: { role },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.data_uploaded_successfully'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        this.nameInput.value = ''\n        this.descriptionInput.value = ''\n      }\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}

package/dist-client/components/create-user.d.ts

@@ -1 +1,2 @@
-export {};
+import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';

package/dist-client/components/create-user.js

@@ -1,23 +1,23 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 let CreateUser = class CreateUser extends LitElement {
     render() {
         return html `
-      <mwc-textfield
+      <md-filled-text-field
         type="text"
         name="name"
         label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-      ></mwc-textfield>
+      ></md-filled-text-field>
 
-      <mwc-textfield type="email" name="email" label=${String(i18next.t('field.email'))}></mwc-textfield>
+      <md-filled-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-filled-text-field>
 
-      <mwc-button
-        @click=${this.onCreateUser.bind(this)}
-        outlined
-        label=${String(i18next.t('button.create'))}
-      ></mwc-button>
+      <md-outlined-button @click=${this.onCreateUser.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
     `;
     }
     async onCreateUser() {
@@ -48,10 +48,10 @@ let CreateUser = class CreateUser extends LitElement {
 };
 CreateUser.styles = css `
     :host {
-      --mdc-text-field-fill-color: var(--theme-white-color);
-      background-color: var(--theme-white-color);
-      margin: var(--margin-wide) 0;
-      padding: var(--padding-wide);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 
@@ -64,7 +64,7 @@ CreateUser.styles = css `
       align-items: center;
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
 
@@ -73,7 +73,7 @@ CreateUser.styles = css `
         grid-template-columns: 1fr 1fr;
       }
 
-      mwc-button {
+      md-outlined-button {
         grid-column: span 2;
 
         margin: var(--input-margin);