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

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

@@ -1 +1 @@
-{"version":3,"file":"create-user.js","sourceRoot":"","sources":["../../client/components/create-user.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,MAAM,eAAe,CAAA;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAuCjC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;gBAIC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;;;uDAG1B,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;;iBAGtE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;gBAE7B,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;KAE7C,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE;gBACpC,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAiC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;aAClF;YAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;gBACzB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;aACtE;YAED,MAAM,IAAI,GAAG;gBACX,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE;aACpC,CAAA;YAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAE1E,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;YACzB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAA;SAC3B;QAAC,OAAO,CAAM,EAAE;YACf,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;iBACxC;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC;;AArFM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAA;AAED;IAAC,KAAK,CAAC,aAAa,CAAC;8BAAa,gBAAgB;6CAAA;AAClD;IAAC,KAAK,CAAC,cAAc,CAAC;8BAAc,gBAAgB;8CAAA;AArChD,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CAuFf","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('create-user')\nclass CreateUser extends 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=email]') emailInput!: 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.user') }))}\n      ></mwc-textfield>\n\n      <mwc-textfield type=\"email\" name=\"email\" label=${String(i18next.t('field.email'))}></mwc-textfield>\n\n      <mwc-button\n        @click=${this.onCreateUser.bind(this)}\n        outlined\n        label=${String(i18next.t('button.create'))}\n      ></mwc-button>\n    `\n  }\n\n  async onCreateUser() {\n    try {\n      if (!this.emailInput.checkValidity()) {\n        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))\n      }\n\n      if (!this.nameInput.value) {\n        throw new Error(i18next.t('error.value is empty', { value: 'name' }))\n      }\n\n      const user = {\n        name: this.nameInput.value.trim(),\n        email: this.emailInput.value.trim()\n      }\n\n      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))\n\n      this.nameInput.value = ''\n      this.emailInput.value = ''\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"create-user.js","sourceRoot":"","sources":["../../client/components/create-user.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,8CAA8C,CAAA;AAErD,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,MAAM,eAAe,CAAA;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAuCjC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;gBAIC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;;;8DAGnB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;mCAE3D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;WACpD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,CAAC;gBACrC,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAiC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;YACnF,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;gBAC1B,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;YACvE,CAAC;YAED,MAAM,IAAI,GAAG;gBACX,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE;aACpC,CAAA;YAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAE1E,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;YACzB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAA;QAC5B,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;iBACxC;aACF,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC;;AAnFM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,AAjCY,CAiCZ;AAEqB;IAArB,KAAK,CAAC,aAAa,CAAC;8BAAa,gBAAgB;6CAAA;AAC3B;IAAtB,KAAK,CAAC,cAAc,CAAC;8BAAc,gBAAgB;8CAAA;AArChD,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CAqFf","sourcesContent":["import '@material/web/button/outlined-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('create-user')\nclass CreateUser extends 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=email]') emailInput!: 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.user') }))}\n      ></md-filled-text-field>\n\n      <md-filled-text-field type=\"email\" name=\"email\" label=${String(i18next.t('field.email'))}></md-filled-text-field>\n\n      <md-outlined-button @click=${this.onCreateUser.bind(this)}\n        >${String(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateUser() {\n    try {\n      if (!this.emailInput.checkValidity()) {\n        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))\n      }\n\n      if (!this.nameInput.value) {\n        throw new Error(i18next.t('error.value is empty', { value: 'name' }))\n      }\n\n      const user = {\n        name: this.nameInput.value.trim(),\n        email: this.emailInput.value.trim()\n      }\n\n      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))\n\n      this.nameInput.value = ''\n      this.emailInput.value = ''\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n}\n"]}

package/dist-client/components/credential-manager.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class CredentialManager extends LitElement {
+    credentials: {
+        credentialId: string;
+    }[];
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    fetchCredentials(): Promise<void>;
+    deleteCredential(credentialId: string): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/components/credential-manager.js

@@ -0,0 +1,64 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let CredentialManager = class CredentialManager extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.credentials = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchCredentials();
+    }
+    async fetchCredentials() {
+        const response = await fetch('/auth/credentials', {
+            method: 'GET',
+            credentials: 'include'
+        });
+        this.credentials = await response.json();
+    }
+    async deleteCredential(credentialId) {
+        const response = await fetch(`/credentials/${credentialId}`, {
+            method: 'DELETE',
+            credentials: 'include'
+        });
+        if (response.ok) {
+            this.fetchCredentials();
+        }
+        else {
+            console.error('Failed to delete credential');
+        }
+    }
+    render() {
+        return html `
+      <div>
+        <h2>Manage Your WebAuthn Credentials</h2>
+        <ul>
+          ${this.credentials.map(credential => html `
+              <li>
+                ${credential.credentialId}
+                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>
+              </li>
+            `)}
+        </ul>
+      </div>
+    `;
+    }
+};
+CredentialManager.styles = css `
+    div {
+      margin: 20px;
+    }
+    button {
+      margin: 5px;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], CredentialManager.prototype, "credentials", void 0);
+CredentialManager = __decorate([
+    customElement('credential-manager')
+], CredentialManager);
+export { CredentialManager };
+//# sourceMappingURL=credential-manager.js.map

package/dist-client/components/credential-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-manager.js","sourceRoot":"","sources":["../../client/components/credential-manager.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACsB,gBAAW,GAEhC,EAAE,CAAA;IAqDV,CAAC;IA1CC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,mBAAmB,EAAE;YAChD,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QACF,IAAI,CAAC,WAAW,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;IAC1C,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,YAAoB;QACzC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,gBAAgB,YAAY,EAAE,EAAE;YAC3D,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QACF,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;kBAEZ,UAAU,CAAC,YAAY;iCACR,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,YAAY,CAAC;;aAExE,CACF;;;KAGN,CAAA;IACH,CAAC;;AAlDM,wBAAM,GAAG,GAAG,CAAA;;;;;;;GAOlB,AAPY,CAOZ;AAX0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;sDAElB;AAHG,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAwD7B","sourcesContent":["import gql from 'graphql-tag'\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\n@customElement('credential-manager')\nexport class CredentialManager extends LitElement {\n  @property({ type: Array }) credentials: {\n    credentialId: string\n  }[] = []\n\n  static styles = css`\n    div {\n      margin: 20px;\n    }\n    button {\n      margin: 5px;\n    }\n  `\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchCredentials()\n  }\n\n  async fetchCredentials() {\n    const response = await fetch('/auth/credentials', {\n      method: 'GET',\n      credentials: 'include'\n    })\n    this.credentials = await response.json()\n  }\n\n  async deleteCredential(credentialId: string) {\n    const response = await fetch(`/credentials/${credentialId}`, {\n      method: 'DELETE',\n      credentials: 'include'\n    })\n    if (response.ok) {\n      this.fetchCredentials()\n    } else {\n      console.error('Failed to delete credential')\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>Manage Your WebAuthn Credentials</h2>\n        <ul>\n          ${this.credentials.map(\n            credential => html`\n              <li>\n                ${credential.credentialId}\n                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>\n              </li>\n            `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/components/delete-user-popup.js

@@ -4,7 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
-import { auth } from '@things-factory/auth-base/dist-client';
+import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 let DeleteUserPopup = class DeleteUserPopup extends localize(i18next)(LitElement) {
     render() {
         return html `
@@ -51,6 +51,7 @@ DeleteUserPopup.styles = [
       :host {
         display: flex;
         flex-direction: column;
+        color: var(--popup-content-color);
         background-color: var(--popup-content-background-color);
         padding: var(--popup-content-padding);
       }
@@ -64,7 +65,7 @@ DeleteUserPopup.styles = [
 
       label {
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
 
       input {
@@ -89,7 +90,7 @@ DeleteUserPopup.styles = [
       }
 
       button {
-        background-color: var(--status-danger-color, red);
+        background-color: var(--status-danger-color, #d14946);
         margin: 2px 2px 10px 2px;
         height: var(--button-height, 28px);
         color: var(--button-color, #fff);

package/dist-client/components/delete-user-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"delete-user-popup.js","sourceRoot":"","sources":["../../client/components/delete-user-popup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA6DhE,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;;;;;;;;;KAUpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;QAExC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI;YACF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YAC7C,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;QAAC,OAAO,CAAM,EAAE;YACf,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;SACH;IACH,CAAC;;AAvGM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDF;CACF,CAAA;AA3DU,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAyG3B;SAzGY,eAAe","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client'\n\n@customElement('delete-user-popup')\nexport class DeleteUserPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--popup-content-background-color);\n        padding: var(--popup-content-padding);\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n      *:focus {\n        outline: none;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--primary-color);\n      }\n\n      input {\n        border: var(--change-password-field-border);\n        border-radius: var(--change-password-field-border-radius);\n        padding: var(--change-password-field-padding);\n\n        font: var(--change-password-field-font);\n        width: var(--change-password-field-width);\n      }\n      input:focus {\n        border: 1px solid var(--focus-background-color);\n      }\n\n      div.field {\n        padding-bottom: 10px;\n      }\n\n      ::placeholder {\n        font-size: 0.8rem;\n        text-transform: capitalize;\n      }\n\n      button {\n        background-color: var(--status-danger-color, red);\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      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  render() {\n    return html`\n      <h1><ox-i18n msgid=\"label.delete account\"></ox-i18n></h1>\n      <span><ox-i18n msgid=\"text.delete account warning message\"></ox-i18n></span>\n      <form @submit=${e => this.submit(e)}>\n        <div class=\"field\">\n          <label for=\"email\"><ox-i18n msgid=\"label.email\"></ox-i18n></label>\n          <input id=\"email\" type=\"email\" name=\"email\" autocapitalize=\"off\" required />\n          <label for=\"password\"><ox-i18n msgid=\"label.password\"></ox-i18n></label>\n          <input id=\"password\" type=\"password\" name=\"password\" required />\n        </div>\n\n        <button class=\"ui button\" type=\"submit\"><ox-i18n msgid=\"label.delete account\"></ox-i18n></button>\n      </form>\n    `\n  }\n\n  async submit(e: Event) {\n    e.preventDefault()\n\n    const form = e.target as HTMLFormElement\n\n    var params = {}\n    new FormData(form).forEach((value, key) => {\n      params[key] = value\n    })\n\n    try {\n      const message = await auth.deleteUser(params)\n      notify({\n        level: 'info',\n        message\n      })\n\n      auth.signout()\n    } catch (e: any) {\n      form.reset()\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n}\n"]}
+{"version":3,"file":"delete-user-popup.js","sourceRoot":"","sources":["../../client/components/delete-user-popup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA8DhE,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;;;;;;;;;KAUpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;QAExC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YAC7C,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;;AAxGM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDF;CACF,AA3DY,CA2DZ;AA5DU,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0G3B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('delete-user-popup')\nexport class DeleteUserPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        color: var(--popup-content-color);\n        background-color: var(--popup-content-background-color);\n        padding: var(--popup-content-padding);\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n      *:focus {\n        outline: none;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n\n      input {\n        border: var(--change-password-field-border);\n        border-radius: var(--change-password-field-border-radius);\n        padding: var(--change-password-field-padding);\n\n        font: var(--change-password-field-font);\n        width: var(--change-password-field-width);\n      }\n      input:focus {\n        border: 1px solid var(--focus-background-color);\n      }\n\n      div.field {\n        padding-bottom: 10px;\n      }\n\n      ::placeholder {\n        font-size: 0.8rem;\n        text-transform: capitalize;\n      }\n\n      button {\n        background-color: var(--status-danger-color, #d14946);\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      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  render() {\n    return html`\n      <h1><ox-i18n msgid=\"label.delete account\"></ox-i18n></h1>\n      <span><ox-i18n msgid=\"text.delete account warning message\"></ox-i18n></span>\n      <form @submit=${e => this.submit(e)}>\n        <div class=\"field\">\n          <label for=\"email\"><ox-i18n msgid=\"label.email\"></ox-i18n></label>\n          <input id=\"email\" type=\"email\" name=\"email\" autocapitalize=\"off\" required />\n          <label for=\"password\"><ox-i18n msgid=\"label.password\"></ox-i18n></label>\n          <input id=\"password\" type=\"password\" name=\"password\" required />\n        </div>\n\n        <button class=\"ui button\" type=\"submit\"><ox-i18n msgid=\"label.delete account\"></ox-i18n></button>\n      </form>\n    `\n  }\n\n  async submit(e: Event) {\n    e.preventDefault()\n\n    const form = e.target as HTMLFormElement\n\n    var params = {}\n    new FormData(form).forEach((value, key) => {\n      params[key] = value\n    })\n\n    try {\n      const message = await auth.deleteUser(params)\n      notify({\n        level: 'info',\n        message\n      })\n\n      auth.signout()\n    } catch (e: any) {\n      form.reset()\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n}\n"]}

package/dist-client/components/domain-switch.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 declare const DomainSwitch_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
@@ -11,6 +12,7 @@ export declare class DomainSwitch extends DomainSwitch_base {
     domains: any[];
     domain: any;
     attrname: string;
+    icon?: string;
     render(): import("lit-html").TemplateResult<1>;
     stateChanged(state: any): void;
 }

package/dist-client/components/domain-switch.js

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from "tslib";
-import { css, html, LitElement } from 'lit';
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin';
 import { store } from '@operato/shell';
@@ -17,7 +18,7 @@ let DomainSwitch = class DomainSwitch extends connect(store)(LitElement) {
         const attrname = this.attrname || 'name';
         return html `
       <div>
-        <mwc-icon>outlined_flag</mwc-icon>
+        ${this.icon ? html `<md-icon>${this.icon}</md-icon>` : nothing}
         ${domains.length <= 1
             ? html ` <span>${((_a = domains[0]) === null || _a === void 0 ? void 0 : _a[attrname]) || domain.name}</span> `
             : html `
@@ -44,8 +45,8 @@ DomainSwitch.styles = [
       :host {
         display: flex;
         max-width: 100%;
-        background-color: rgba(var(--primary-color-rgb), 0.1);
-        border-bottom: var(--border-dark-color);
+        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
+        border-bottom: var(--border-dim-color);
       }
 
       :host * {
@@ -56,21 +57,21 @@ DomainSwitch.styles = [
         flex: 1;
         display: flex;
         flex-direction: row;
-        padding: var(--padding-default);
+        padding: var(--spacing-small);
       }
 
-      mwc-icon {
-        background-color: rgba(var(--primary-color-rgb), 0.8);
-        margin-right: var(--margin-narrow);
+      md-icon {
+        background-color: var(--md-sys-color-primary, rgb(46 121 190));
+        margin-right: var(--spacing-small);
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));
       }
       span,
       select {
         flex: 1;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
         font: bold 14px/20px var(--theme-font);
       }
 
@@ -87,7 +88,7 @@ DomainSwitch.styles = [
         padding: 0 !important;
         border-bottom: none;
       }
-      :host([dark]) mwc-icon {
+      :host([dark]) md-icon {
         background-color: var(--secondary-text-color);
         margin: 1px 4px 0px 0px;
         padding: 1px 2px;
@@ -96,12 +97,12 @@ DomainSwitch.styles = [
       }
       :host([dark]) span,
       :host([dark]) select {
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
         font: bold 13px/13px var(--theme-font);
       }
       :host([dark]) option {
         background-color: var(--primary-color, #585858);
-        color: var(--theme-white-color, #fff);
+        color: var(--md-sys-color-on-primary, #fff);
       }
       :host([dark]) span {
         line-height: 23px;
@@ -110,10 +111,10 @@ DomainSwitch.styles = [
       :host([rounded-corner]) {
         height: 30px;
         border-radius: 20px;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
       }
       :host([rounded-corner]) div {
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
       }
     `
 ];
@@ -129,6 +130,10 @@ __decorate([
     property({ type: String, attribute: true }),
     __metadata("design:type", String)
 ], DomainSwitch.prototype, "attrname", void 0);
+__decorate([
+    property({ type: String, attribute: true }),
+    __metadata("design:type", String)
+], DomainSwitch.prototype, "icon", void 0);
 DomainSwitch = __decorate([
     customElement('domain-switch')
 ], DomainSwitch);

package/dist-client/components/domain-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/components/domain-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAArD;;QAiFsB,YAAO,GAAU,EAAE,CAAA;QAED,aAAQ,GAAW,MAAM,CAAA;IAgCxE,CAAC;IA9BC,MAAM;;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAA;QAExC,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA,UAAU,CAAA,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAG,QAAQ,CAAC,KAAI,MAAM,CAAC,IAAI,UAAU;YAC/D,CAAC,CAAC,IAAI,CAAA;;yBAES,MAAM,CAAC,SAAS;0BACf,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;kBAE3E,OAAO,CAAC,GAAG,CACX,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;qCACU,CAAC,CAAC,SAAS,cAAc,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC;mBACzF,CACF;;aAEJ;;KAER,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAA;IAChC,CAAC;;AAjHM,mBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAC9C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAY;AACvC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AAnF3D,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmHxB;SAnHY,YAAY","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('domain-switch')\nexport class DomainSwitch extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        max-width: 100%;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n        border-bottom: var(--border-dark-color);\n      }\n\n      :host * {\n        vertical-align: middle;\n      }\n\n      div {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        padding: var(--padding-default);\n      }\n\n      mwc-icon {\n        background-color: rgba(var(--primary-color-rgb), 0.8);\n        margin-right: var(--margin-narrow);\n        padding: 2px;\n        border-radius: 50%;\n        font-size: var(--fontsize-large);\n        color: var(--theme-white-color);\n      }\n      span,\n      select {\n        flex: 1;\n        color: var(--secondary-color);\n        font: bold 14px/20px var(--theme-font);\n      }\n\n      select {\n        border: none;\n        background-color: transparent;\n      }\n\n      select:focus {\n        outline: 0;\n      }\n      :host([dark]) {\n        background-color: rgba(0, 0, 0, 0.2);\n        padding: 0 !important;\n        border-bottom: none;\n      }\n      :host([dark]) mwc-icon {\n        background-color: var(--secondary-text-color);\n        margin: 1px 4px 0px 0px;\n        padding: 1px 2px;\n        border-radius: 50%;\n        line-height: 19px;\n      }\n      :host([dark]) span,\n      :host([dark]) select {\n        color: var(--theme-white-color);\n        font: bold 13px/13px var(--theme-font);\n      }\n      :host([dark]) option {\n        background-color: var(--primary-color, #585858);\n        color: var(--theme-white-color, #fff);\n      }\n      :host([dark]) span {\n        line-height: 23px;\n      }\n\n      :host([rounded-corner]) {\n        height: 30px;\n        border-radius: 20px;\n        border: var(--border-dark-color);\n      }\n      :host([rounded-corner]) div {\n        padding: var(--padding-narrow) var(--padding-default);\n      }\n    `\n  ]\n\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Object }) domain: any\n  @property({ type: String, attribute: true }) attrname: string = 'name'\n\n  render() {\n    const domains = this.domains || []\n    const domain = this.domain || {}\n    const attrname = this.attrname || 'name'\n\n    return html`\n      <div>\n        <mwc-icon>outlined_flag</mwc-icon>\n        ${domains.length <= 1\n          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `\n          : html`\n              <select\n                .value=${domain.subdomain}\n                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n              >\n                ${domains.map(\n                  d => html`\n                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>\n                  `\n                )}\n              </select>\n            `}\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.domains = state.app.domains\n    this.domain = state.app.domain\n  }\n}\n"]}
+{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/components/domain-switch.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAArD;;QAiFsB,YAAO,GAAU,EAAE,CAAA;QAED,aAAQ,GAAW,MAAM,CAAA;IAiCxE,CAAC;IA9BC,MAAM;;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAA;QAExC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO;UAC3D,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA,UAAU,CAAA,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAG,QAAQ,CAAC,KAAI,MAAM,CAAC,IAAI,UAAU;YAC/D,CAAC,CAAC,IAAI,CAAA;;yBAES,MAAM,CAAC,SAAS;0BACf,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;kBAE3E,OAAO,CAAC,GAAG,CACX,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;qCACU,CAAC,CAAC,SAAS,cAAc,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC;mBACzF,CACF;;aAEJ;;KAER,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAA;IAChC,CAAC;;AAlHM,mBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;CACF,AA9EY,CA8EZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAY;AACM;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AACzB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;0CAAc;AApF/C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoHxB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('domain-switch')\nexport class DomainSwitch extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        max-width: 100%;\n        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));\n        border-bottom: var(--border-dim-color);\n      }\n\n      :host * {\n        vertical-align: middle;\n      }\n\n      div {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        padding: var(--spacing-small);\n      }\n\n      md-icon {\n        background-color: var(--md-sys-color-primary, rgb(46 121 190));\n        margin-right: var(--spacing-small);\n        padding: 2px;\n        border-radius: 50%;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));\n      }\n      span,\n      select {\n        flex: 1;\n        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));\n        font: bold 14px/20px var(--theme-font);\n      }\n\n      select {\n        border: none;\n        background-color: transparent;\n      }\n\n      select:focus {\n        outline: 0;\n      }\n      :host([dark]) {\n        background-color: rgba(0, 0, 0, 0.2);\n        padding: 0 !important;\n        border-bottom: none;\n      }\n      :host([dark]) md-icon {\n        background-color: var(--secondary-text-color);\n        margin: 1px 4px 0px 0px;\n        padding: 1px 2px;\n        border-radius: 50%;\n        line-height: 19px;\n      }\n      :host([dark]) span,\n      :host([dark]) select {\n        color: var(--md-sys-color-on-primary);\n        font: bold 13px/13px var(--theme-font);\n      }\n      :host([dark]) option {\n        background-color: var(--primary-color, #585858);\n        color: var(--md-sys-color-on-primary, #fff);\n      }\n      :host([dark]) span {\n        line-height: 23px;\n      }\n\n      :host([rounded-corner]) {\n        height: 30px;\n        border-radius: 20px;\n        border: var(--border-dim-color);\n      }\n      :host([rounded-corner]) div {\n        padding: var(--spacing-small) var(--spacing-medium);\n      }\n    `\n  ]\n\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Object }) domain: any\n  @property({ type: String, attribute: true }) attrname: string = 'name'\n  @property({ type: String, attribute: true }) icon?: string\n\n  render() {\n    const domains = this.domains || []\n    const domain = this.domain || {}\n    const attrname = this.attrname || 'name'\n\n    return html`\n      <div>\n        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}\n        ${domains.length <= 1\n          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `\n          : html`\n              <select\n                .value=${domain.subdomain}\n                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n              >\n                ${domains.map(\n                  d => html`\n                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>\n                  `\n                )}\n              </select>\n            `}\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.domains = state.app.domains\n    this.domain = state.app.domain\n  }\n}\n"]}

package/dist-client/components/invite-customer.d.ts

@@ -1 +1 @@
-import '@things-factory/auth-ui';
+export {};

package/dist-client/components/invite-customer.js

@@ -1,5 +1,4 @@
 import { __decorate, __metadata } from "tslib";
-import '@things-factory/auth-ui';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
@@ -15,12 +14,10 @@ let InviteCustomer = class InviteCustomer extends localize(i18next)(LitElement)
         return html `
       <div>
         <input id="customer-name" required />
-        <mwc-button
-          @click=${this.invite.bind(this)}
-          outlined
-          icon="group_add"
-          label=${String(i18next.t('label.invite customer'))}
-        ></mwc-button>
+        <md-outlined-button @click=${this.invite.bind(this)}>
+          <md-icon slot="icon">group_add</md-icon>
+          ${String(i18next.t('label.invite customer'))}
+        </md-outlined-button>
       </div>
     `;
     }
@@ -73,14 +70,14 @@ let InviteCustomer = class InviteCustomer extends localize(i18next)(LitElement)
 InviteCustomer.styles = [
     css `
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
         min-width: 250px;
         font: var(--input-font);
       }
-      mwc-button {
+      md-outlined-button {
         margin: var(--input-margin);
       }
       @media screen and (max-width: 480px) {

package/dist-client/components/invite-customer.js.map

@@ -1 +1 @@
-{"version":3,"file":"invite-customer.js","sourceRoot":"","sources":["../../client/components/invite-customer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/auth-ui'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, 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('invite-customer')\nclass InviteCustomer extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\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      mwc-button {\n        margin: var(--input-margin);\n      }\n      @media screen and (max-width: 480px) {\n        div {\n          display: grid;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) customers: any[] = []\n\n  @query('input#customer-name') customerNameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div>\n        <input id=\"customer-name\" required />\n        <mwc-button\n          @click=${this.invite.bind(this)}\n          outlined\n          icon=\"group_add\"\n          label=${String(i18next.t('label.invite customer'))}\n        ></mwc-button>\n      </div>\n    `\n  }\n\n  async invite() {\n    try {\n      if (!this.customerNameInput.value)\n        throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n\n      if (this.customers.find(c => c.name?.toLowerCase() === this.customerNameInput.value.toLowerCase())) {\n        throw new Error(\n          i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') })\n        )\n      }\n\n      if (\n        await OxPrompt.open({\n          title: i18next.t('text.are_you_sure'),\n          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),\n          confirmButton: { text: i18next.t('button.confirm') },\n          cancelButton: { text: i18next.t('button.cancel') }\n        })\n      ) {\n        const customerDomainName = this.customerNameInput.value\n\n        const response = await client.mutate({\n          mutation: gql`\n            mutation inviteCustomer($customerDomainName: String!) {\n              inviteCustomer(customerDomainName: $customerDomainName)\n            }\n          `,\n          variables: { customerDomainName },\n          context: gqlContext()\n        })\n\n        if (!response.errors) {\n          const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))\n\n          if (answer) {\n            await OxPrompt.open({\n              type: 'success',\n              title: i18next.t('text.completed'),\n              confirmButton: { text: i18next.t('button.confirm') }\n            })\n          }\n\n          this.customerNameInput.value = ''\n        }\n      }\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"invite-customer.js","sourceRoot":"","sources":["../../client/components/invite-customer.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, 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('invite-customer')\nclass InviteCustomer extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\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        min-width: 250px;\n        font: var(--input-font);\n      }\n      md-outlined-button {\n        margin: var(--input-margin);\n      }\n      @media screen and (max-width: 480px) {\n        div {\n          display: grid;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) customers: any[] = []\n\n  @query('input#customer-name') customerNameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div>\n        <input id=\"customer-name\" required />\n        <md-outlined-button @click=${this.invite.bind(this)}>\n          <md-icon slot=\"icon\">group_add</md-icon>\n          ${String(i18next.t('label.invite customer'))}\n        </md-outlined-button>\n      </div>\n    `\n  }\n\n  async invite() {\n    try {\n      if (!this.customerNameInput.value)\n        throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n\n      if (this.customers.find(c => c.name?.toLowerCase() === this.customerNameInput.value.toLowerCase())) {\n        throw new Error(\n          i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') })\n        )\n      }\n\n      if (\n        await OxPrompt.open({\n          title: i18next.t('text.are_you_sure'),\n          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),\n          confirmButton: { text: i18next.t('button.confirm') },\n          cancelButton: { text: i18next.t('button.cancel') }\n        })\n      ) {\n        const customerDomainName = this.customerNameInput.value\n\n        const response = await client.mutate({\n          mutation: gql`\n            mutation inviteCustomer($customerDomainName: String!) {\n              inviteCustomer(customerDomainName: $customerDomainName)\n            }\n          `,\n          variables: { customerDomainName },\n          context: gqlContext()\n        })\n\n        if (!response.errors) {\n          const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))\n\n          if (answer) {\n            await OxPrompt.open({\n              type: 'success',\n              title: i18next.t('text.completed'),\n              confirmButton: { text: i18next.t('button.confirm') }\n            })\n          }\n\n          this.customerNameInput.value = ''\n        }\n      }\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -10,12 +10,9 @@ let InviteUser = class InviteUser extends localize(i18next)(LitElement) {
     render() {
         return html `
       <input name="email" type="email" required name="invite-email" autocapitalize="off" />
-      <mwc-button
-        @click=${this.invite.bind(this)}
-        outlined
-        icon="group_add"
-        label=${String(i18next.t('label.invite user'))}
-      ></mwc-button>
+      <md-outlined-button @click=${this.invite.bind(this)}>
+        <md-icon slot="icon">group_add</md-icon>${String(i18next.t('label.invite user'))}
+      </md-outlined-button>
     `;
     }
     async invite() {
@@ -69,7 +66,7 @@ InviteUser.styles = css `
     input {
       flex: 1;
 
-      border: var(--border-dark-color);
+      border: var(--border-dim-color);
       border-radius: var(--border-radius);
       margin: var(--input-margin);
       padding: var(--input-padding);
@@ -77,7 +74,7 @@ InviteUser.styles = css `
       font: var(--input-font);
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
   `;

package/dist-client/components/invite-user.js.map

@@ -1 +1 @@
-{"version":3,"file":"invite-user.js","sourceRoot":"","sources":["../../client/components/invite-user.ts"],"names":[],"mappings":"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","sourcesContent":["import './user-role-editor'\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('invite-user')\nclass InviteUser extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: grid;\n    }\n\n    input {\n      flex: 1;\n\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    mwc-button {\n      margin: var(--input-margin);\n    }\n  `\n\n  @query('input[name=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <input name=\"email\" type=\"email\" required name=\"invite-email\" autocapitalize=\"off\" />\n      <mwc-button\n        @click=${this.invite.bind(this)}\n        outlined\n        icon=\"group_add\"\n        label=${String(i18next.t('label.invite user'))}\n      ></mwc-button>\n    `\n  }\n\n  async invite() {\n    try {\n      if (!this.emailInput.checkValidity()) {\n        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))\n      }\n\n      if (\n        await OxPrompt.open({\n          title: i18next.t('text.are_you_sure'),\n          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),\n          confirmButton: { text: i18next.t('button.confirm') },\n          cancelButton: { text: i18next.t('button.cancel') }\n        })\n      ) {\n        await this.inviteUser(this.emailInput.value)\n\n        this.dispatchEvent(new CustomEvent('invitationCompleted'))\n      }\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n\n  async inviteUser(email) {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation inviteUser($email: EmailAddress!) {\n          inviteUser(email: $email)\n        }\n      `,\n      variables: { email },\n      context: gqlContext()\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        title: i18next.t('text.completed'),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      this.emailInput.value = ''\n    }\n  }\n}\n"]}
+{"version":3,"file":"invite-user.js","sourceRoot":"","sources":["../../client/components/invite-user.ts"],"names":[],"mappings":"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","sourcesContent":["import './user-role-editor'\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('invite-user')\nclass InviteUser extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: grid;\n    }\n\n    input {\n      flex: 1;\n\n      border: var(--border-dim-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    md-outlined-button {\n      margin: var(--input-margin);\n    }\n  `\n\n  @query('input[name=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <input name=\"email\" type=\"email\" required name=\"invite-email\" autocapitalize=\"off\" />\n      <md-outlined-button @click=${this.invite.bind(this)}>\n        <md-icon slot=\"icon\">group_add</md-icon>${String(i18next.t('label.invite user'))}\n      </md-outlined-button>\n    `\n  }\n\n  async invite() {\n    try {\n      if (!this.emailInput.checkValidity()) {\n        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))\n      }\n\n      if (\n        await OxPrompt.open({\n          title: i18next.t('text.are_you_sure'),\n          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),\n          confirmButton: { text: i18next.t('button.confirm') },\n          cancelButton: { text: i18next.t('button.cancel') }\n        })\n      ) {\n        await this.inviteUser(this.emailInput.value)\n\n        this.dispatchEvent(new CustomEvent('invitationCompleted'))\n      }\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n\n  async inviteUser(email) {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation inviteUser($email: EmailAddress!) {\n          inviteUser(email: $email)\n        }\n      `,\n      variables: { email },\n      context: gqlContext()\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        title: i18next.t('text.completed'),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      this.emailInput.value = ''\n    }\n  }\n}\n"]}

package/dist-client/components/my-login-history.js

@@ -87,8 +87,8 @@ MyLoginHistory.styles = 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;
     }
     ox-grist {

package/dist-client/components/my-login-history.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-login-history.js","sourceRoot":"","sources":["../../client/components/my-login-history.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('my-login-history')\nclass MyLoginHistory extends LitElement {\n  static styles = 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    ox-grist {\n      flex: 1;\n    }\n  `\n\n  @property({ type: Array }) histories: any[] = []\n  @property({ type: Number }) limit?: number\n\n  render() {\n    if (!this.histories?.length) return html``\n\n    const config = {\n      rows: { appendable: false },\n      pagination: { infinite: true },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'object',\n          name: 'accessDomain',\n          header: i18next.t('field.domain'),\n          record: { editable: false },\n          width: 200\n        },\n        {\n          type: 'datetime',\n          name: 'accessedAt',\n          header: i18next.t('field.accessed-at'),\n          record: { editable: false },\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'accessorIp',\n          header: i18next.t('field.ip_address'),\n          record: { editable: false },\n          width: 200\n        }\n      ]\n    }\n\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${config}\n        .data=\"${{ records: this.histories }}\"\n      ></ox-grist>\n    `\n  }\n\n  firstUpdated() {\n    this.fetchLoginHistories()\n  }\n\n  async fetchLoginHistories() {\n    try {\n      const response = await client.query({\n        query: gql`\n          query myLoginHistories($limit: Float!) {\n            myLoginHistories(limit: $limit) {\n              accessDomain {\n                name\n              }\n              accessorIp\n              accessedAt\n            }\n          }\n        `,\n        variables: { limit: this.limit || 10 }\n      })\n\n      if (response.errors?.length) return\n      this.histories = response.data.myLoginHistories.map(loginHistory => ({\n        ...loginHistory,\n        accessedAt: loginHistory.accessedAt - new Date().getTimezoneOffset() * 60 * 1000\n      }))\n    } catch (e: any) {\n      this.showToast('message' in e ? e.message : e)\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}
+{"version":3,"file":"my-login-history.js","sourceRoot":"","sources":["../../client/components/my-login-history.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAG/C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAc6B,cAAS,GAAU,EAAE,CAAA;IA8ElD,CAAC;IA3EC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,EAAE,CAAA;QAE1C,MAAM,MAAM,GAAG;YACb,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE;YAC3B,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,YAAY;oBAClB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,YAAY;oBAClB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;QAED,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,MAAM;iBACP,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;;KAEvC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,KAAK,CAAC,mBAAmB;;QACvB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;SAUT;gBACD,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE;aACvC,CAAC,CAAA;YAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;gBAAE,OAAM;YACnC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,iCAC/D,YAAY,KACf,UAAU,EAAE,YAAY,CAAC,UAAU,GAAG,IAAI,IAAI,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE,GAAG,IAAI,IAChF,CAAC,CAAA;QACL,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAChD,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;;AA1FM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iDAAsB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAe;AAftC,cAAc;IADnB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,cAAc,CA4FnB","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('my-login-history')\nclass MyLoginHistory extends LitElement {\n  static styles = 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    ox-grist {\n      flex: 1;\n    }\n  `\n\n  @property({ type: Array }) histories: any[] = []\n  @property({ type: Number }) limit?: number\n\n  render() {\n    if (!this.histories?.length) return html``\n\n    const config = {\n      rows: { appendable: false },\n      pagination: { infinite: true },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'object',\n          name: 'accessDomain',\n          header: i18next.t('field.domain'),\n          record: { editable: false },\n          width: 200\n        },\n        {\n          type: 'datetime',\n          name: 'accessedAt',\n          header: i18next.t('field.accessed-at'),\n          record: { editable: false },\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'accessorIp',\n          header: i18next.t('field.ip_address'),\n          record: { editable: false },\n          width: 200\n        }\n      ]\n    }\n\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${config}\n        .data=\"${{ records: this.histories }}\"\n      ></ox-grist>\n    `\n  }\n\n  firstUpdated() {\n    this.fetchLoginHistories()\n  }\n\n  async fetchLoginHistories() {\n    try {\n      const response = await client.query({\n        query: gql`\n          query myLoginHistories($limit: Float!) {\n            myLoginHistories(limit: $limit) {\n              accessDomain {\n                name\n              }\n              accessorIp\n              accessedAt\n            }\n          }\n        `,\n        variables: { limit: this.limit || 10 }\n      })\n\n      if (response.errors?.length) return\n      this.histories = response.data.myLoginHistories.map(loginHistory => ({\n        ...loginHistory,\n        accessedAt: loginHistory.accessedAt - new Date().getTimezoneOffset() * 60 * 1000\n      }))\n    } catch (e: any) {\n      this.showToast('message' in e ? e.message : e)\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/components/ownership-transfer-popup.d.ts

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

package/dist-client/components/ownership-transfer-popup.js

@@ -1,5 +1,5 @@
 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, property, query } from 'lit/decorators.js';
@@ -13,7 +13,7 @@ let OwnershipTransferPopup = class OwnershipTransferPopup extends localize(i18ne
         <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>
         <div class="input-container">
           <input name="email" />
-          <mwc-button raised @click=${this.transferOwnership}>${i18next.t('button.confirm')}</mwc-button>
+          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>
         </div>
       </div>
     `;
@@ -66,8 +66,8 @@ OwnershipTransferPopup.styles = [
       :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;
       }
       .container {
@@ -76,7 +76,7 @@ OwnershipTransferPopup.styles = [
         flex: 1;
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -87,8 +87,8 @@ OwnershipTransferPopup.styles = [
         margin: auto;
         display: flex;
       }
-      .input-container mwc-button {
-        margin: auto 0px auto var(--padding-wide);
+      .input-container md-elevated-button {
+        margin: auto 0px auto var(--spacing-large);
       }
     `
 ];

package/dist-client/components/ownership-transfer-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ownership-transfer-popup.js","sourceRoot":"","sources":["../../client/components/ownership-transfer-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, property, 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('ownership-transfer-popup')\nclass OwnershipTransferPopup 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      .container {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\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      .input-container {\n        margin: auto;\n        display: flex;\n      }\n      .input-container mwc-button {\n        margin: auto 0px auto var(--padding-wide);\n      }\n    `\n  ]\n\n  @property({ type: Object }) user: any\n\n  @query('input[name=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>\n        <div class=\"input-container\">\n          <input name=\"email\" />\n          <mwc-button raised @click=${this.transferOwnership}>${i18next.t('button.confirm')}</mwc-button>\n        </div>\n      </div>\n    `\n  }\n\n  async transferOwnership() {\n    if (!this.doubleCheckEmail()) {\n      this.showToast(i18next.t('text.email is not matched'))\n\n      return\n    }\n\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.are_you_sure_to_transfer_owner'),\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 transferOwner($email: EmailAddress!) {\n            transferOwner(email: $email)\n          }\n        `,\n        variables: { email: this.user.email },\n        context: gqlContext()\n      })\n\n      if (!response.errors?.length) {\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.owner_transfer_completed'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        history.back()\n\n        this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))\n      }\n    } else {\n      history.back()\n    }\n  }\n\n  doubleCheckEmail() {\n    return this.emailInput.value === this.user.email\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"ownership-transfer-popup.js","sourceRoot":"","sources":["../../client/components/ownership-transfer-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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGtD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqChE,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC,CAAC,CAAC,oEAAoE,CAAC;;;uCAGvD,IAAI,CAAC,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;KAGvF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB;;QACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAA;YAEtD,OAAM;QACR,CAAC;QAED,IACE,MAAM,QAAQ,CAAC,IAAI,CAAC;YAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACrC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC;YACtD,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;YACpD,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;SACnD,CAAC,EACF,CAAC;YACD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;gBACnC,QAAQ,EAAE,GAAG,CAAA;;;;SAIZ;gBACD,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACrC,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,CAAA,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM,CAAA,EAAE,CAAC;gBAC7B,MAAM,QAAQ,CAAC,IAAI,CAAC;oBAClB,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBAClC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;oBAChD,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;iBACrD,CAAC,CAAA;gBAEF,OAAO,CAAC,IAAI,EAAE,CAAA;gBAEd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAChG,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,EAAE,CAAA;QAChB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;IAClD,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;AAhGM,6BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BF;CACF,AA9BY,CA8BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAU;AAET;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8BAAc,gBAAgB;0DAAA;AAnCrD,sBAAsB;IAD3B,aAAa,CAAC,0BAA0B,CAAC;GACpC,sBAAsB,CAkG3B","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, 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('ownership-transfer-popup')\nclass OwnershipTransferPopup extends localize(i18next)(LitElement) {\n  static styles = [\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      .container {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\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        min-width: 250px;\n        font: var(--input-font);\n      }\n      .input-container {\n        margin: auto;\n        display: flex;\n      }\n      .input-container md-elevated-button {\n        margin: auto 0px auto var(--spacing-large);\n      }\n    `\n  ]\n\n  @property({ type: Object }) user: any\n\n  @query('input[name=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>\n        <div class=\"input-container\">\n          <input name=\"email\" />\n          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  async transferOwnership() {\n    if (!this.doubleCheckEmail()) {\n      this.showToast(i18next.t('text.email is not matched'))\n\n      return\n    }\n\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.are_you_sure_to_transfer_owner'),\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 transferOwner($email: EmailAddress!) {\n            transferOwner(email: $email)\n          }\n        `,\n        variables: { email: this.user.email },\n        context: gqlContext()\n      })\n\n      if (!response.errors?.length) {\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.owner_transfer_completed'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        history.back()\n\n        this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))\n      }\n    } else {\n      history.back()\n    }\n  }\n\n  doubleCheckEmail() {\n    return this.emailInput.value === this.user.email\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}