@things-factory/auth-ui 6.0.0-alpha.13 → 6.0.0-alpha.20

package/client/bootstrap.ts

@@ -1,5 +1,5 @@
 import '@material/mwc-icon'
-import '@operato/i18n'
+import '@operato/i18n/ox-i18n.js'
 
 import { html } from 'lit-html'
 

package/client/components/abstract-auth-page.ts

@@ -3,6 +3,7 @@ import '@material/mwc-icon'
 import '@material/mwc-icon-button'
 import '@material/mwc-textfield'
 import '@operato/lottie-player'
+import '@operato/i18n/ox-i18n.js'
 import '@operato/i18n/ox-i18n-selector.js'
 import '@operato/layout/ox-snack-bar.js'
 

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

@@ -2,6 +2,7 @@ import '@material/mwc-button'
 import '@material/mwc-textfield'
 import '@operato/lottie-player'
 import '../components/profile-component'
+import '@operato/i18n/ox-i18n.js'
 import '@operato/i18n/ox-i18n-selector.js'
 import '@operato/layout/ox-snack-bar.js'
 

package/client/components/create-role.ts

@@ -1,3 +1,5 @@
+import '@material/mwc-textfield'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
@@ -9,83 +11,57 @@ import { CustomAlert } from '@things-factory/shell/client'
 @customElement('create-role')
 class CreateRole extends localize(i18next)(LitElement) {
   static styles = css`
-    [field-2column] {
+    :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);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
+
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 1fr 2fr auto;
       gap: 5px 15px;
       clear: both;
       max-width: var(--input-container-max-width);
-    }
-    [field] {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: var(--padding-default);
-    }
-    [grid-span] {
-      grid-column: span 2;
-    }
 
-    input {
-      border: var(--border-dark-color);
-      border-radius: var(--border-radius);
-      margin: var(--input-margin);
-      padding: var(--input-padding);
-      min-width: 250px;
-      font: var(--input-font);
+      align-items: center;
     }
-    label {
-      display: flex;
-      flex-direction: column;
 
-      font: var(--label-font);
-      color: var(--label-color);
-      text-transform: var(--label-text-transform);
-    }
     mwc-button {
       margin: var(--input-margin);
     }
+
     @media screen and (max-width: 480px) {
-      div {
-        display: grid;
+      :host {
+        grid-template-columns: 1fr 1fr;
       }
-      [field] {
+
+      mwc-button {
         grid-column: span 2;
+
+        margin: var(--input-margin);
       }
     }
   `
 
-  @query('input[name=name]') nameInput!: HTMLInputElement
-  @query('input[name=description]') descriptionInput!: HTMLInputElement
+  @query('[name=name]') nameInput!: HTMLInputElement
+  @query('[name=description]') descriptionInput!: HTMLInputElement
 
   render() {
     return html`
-      <div field-2column>
-        <div field>
-          <label
-            >${i18next.t('label.x name', { x: i18next.t('label.role') })}
-            <input name="name" type="text" required />
-          </label>
-        </div>
-        <div field>
-          <label
-            >${i18next.t('label.x description', { x: i18next.t('label.role') })}
-            <input name="description" type="text" />
-          </label>
-        </div>
-
-        <div>
-          <mwc-button
-            @click=${this.onCreateRole.bind(this)}
-            outlined
-            label="${i18next.t('button.create')}"
-          ></mwc-button>
-        </div>
-      </div>
+      <mwc-textfield
+        type="text"
+        name="name"
+        label=${i18next.t('label.x name', { x: i18next.t('label.role') })}
+      ></mwc-textfield>
+      <mwc-textfield
+        type="text"
+        name="description"
+        label=${i18next.t('label.x description', { x: i18next.t('label.role') })}
+      ></mwc-textfield>
+
+      <mwc-button @click=${this.onCreateRole.bind(this)} outlined label="${i18next.t('button.create')}"></mwc-button>
     `
   }
 

package/client/components/delete-user-popup.ts

@@ -1,3 +1,5 @@
+import '@operato/i18n/ox-i18n.js'
+
 import { css, html, LitElement } from 'lit'
 import { customElement } from 'lit/decorators.js'
 

package/client/components/invite-user.ts

@@ -11,7 +11,13 @@ import { CustomAlert } from '@things-factory/shell/client'
 @customElement('invite-user')
 class InviteUser extends localize(i18next)(LitElement) {
   static styles = css`
+    :host {
+      display: grid;
+    }
+
     input {
+      flex: 1;
+
       border: var(--border-dark-color);
       border-radius: var(--border-radius);
       margin: var(--input-margin);
@@ -19,29 +25,23 @@ class InviteUser extends localize(i18next)(LitElement) {
       min-width: 250px;
       font: var(--input-font);
     }
+
     mwc-button {
       margin: var(--input-margin);
     }
-    @media screen and (max-width: 480px) {
-      div {
-        display: grid;
-      }
-    }
   `
 
   @query('input[name=email]') emailInput!: HTMLInputElement
 
   render() {
     return html`
-      <div>
-        <input name="email" type="email" required name="invite-email" />
-        <mwc-button
-          @click=${this.invite.bind(this)}
-          outlined
-          icon="group_add"
-          label="${i18next.t('label.invite user')}"
-        ></mwc-button>
-      </div>
+      <input name="email" type="email" required name="invite-email" />
+      <mwc-button
+        @click=${this.invite.bind(this)}
+        outlined
+        icon="group_add"
+        label="${i18next.t('label.invite user')}"
+      ></mwc-button>
     `
   }
 

package/client/components/profile-component.ts

@@ -1,3 +1,4 @@
+import '@operato/i18n/ox-i18n.js'
 import '@operato/i18n/ox-i18n-selector.js'
 import './change-password'
 import './delete-user-popup'

package/client/entries/auth/activate.ts

@@ -1,4 +1,5 @@
 import '@material/mwc-button'
+import '@operato/i18n/ox-i18n.js'
 import '@operato/layout/ox-snack-bar.js'
 import '@operato/lottie-player'
 import '../../components/contact-us'

package/client/entries/auth/forgot-password.ts

@@ -1,4 +1,5 @@
 import '@material/mwc-button'
+import '@operato/i18n/ox-i18n.js'
 import '../../components/profile-component'
 
 import { html } from 'lit'

package/client/entries/auth/signup.ts

@@ -1,3 +1,5 @@
+import '@operato/i18n/ox-i18n.js'
+
 import { html } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 

package/client/index.ts

@@ -1,5 +1,5 @@
 import '@material/mwc-icon'
-import '@operato/i18n'
+import '@operato/i18n/ox-i18n.js'
 
 import { html } from 'lit-html'
 

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

@@ -24,11 +24,13 @@ class UserManagement extends PageView {
         padding: var(--padding-wide);
         overflow: auto;
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       @media screen and (max-width: 600px) {
         :host {
           padding: var(--padding-narrow);

package/dist-client/bootstrap.d.ts

@@ -1,3 +1,3 @@
 import '@material/mwc-icon';
-import '@operato/i18n';
+import '@operato/i18n/ox-i18n.js';
 export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -1,5 +1,5 @@
 import '@material/mwc-icon';
-import '@operato/i18n';
+import '@operato/i18n/ox-i18n.js';
 import { html } from 'lit-html';
 import { TOOL_POSITION } from '@operato/layout';
 import { auth } from '@things-factory/auth-base/dist-client';

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAE9D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,uCAAuC;YACjD,IAAI,EAAE,IAAI,CAAA,iDAAiD;YAC3D,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,0BAA0B;IAC1B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,oCAAoC;YAC9C,IAAI,EAAE,IAAI,CAAA,8CAA8C;YACxD,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;SACF;KACF,CAAC,CAAA;IAEF;;;;MAIE;IACF,IAAI,CAAC,OAAO,EAAE,CAAA;AAChB,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/i18n'\n\nimport { html } from 'lit-html'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client'\nimport { ADD_MORENDA } from '@things-factory/more-base'\nimport { navigate, store } from '@things-factory/shell/client'\n\nexport default function bootstrap() {\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <mwc-icon>account_circle</mwc-icon> `,\n      name: html` <ox-i18n msgid=\"text.auth profile\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        navigate('profile')\n      }\n    }\n  })\n\n  /* add sign-out morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <mwc-icon>exit_to_app</mwc-icon> `,\n      name: html` <ox-i18n msgid=\"field.sign out\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        auth.signout()\n      }\n    }\n  })\n\n  /* \n    Get user profile information from server. \n    As soon as response received, auth.on('profile', ...) handlers start to work.\n    It's very important point to build UI for the user.\n  */\n  auth.profile()\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAE9D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,uCAAuC;YACjD,IAAI,EAAE,IAAI,CAAA,iDAAiD;YAC3D,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,0BAA0B;IAC1B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,oCAAoC;YAC9C,IAAI,EAAE,IAAI,CAAA,8CAA8C;YACxD,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;SACF;KACF,CAAC,CAAA;IAEF;;;;MAIE;IACF,IAAI,CAAC,OAAO,EAAE,CAAA;AAChB,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit-html'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client'\nimport { ADD_MORENDA } from '@things-factory/more-base'\nimport { navigate, store } from '@things-factory/shell/client'\n\nexport default function bootstrap() {\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <mwc-icon>account_circle</mwc-icon> `,\n      name: html` <ox-i18n msgid=\"text.auth profile\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        navigate('profile')\n      }\n    }\n  })\n\n  /* add sign-out morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <mwc-icon>exit_to_app</mwc-icon> `,\n      name: html` <ox-i18n msgid=\"field.sign out\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        auth.signout()\n      }\n    }\n  })\n\n  /* \n    Get user profile information from server. \n    As soon as response received, auth.on('profile', ...) handlers start to work.\n    It's very important point to build UI for the user.\n  */\n  auth.profile()\n}\n"]}

package/dist-client/components/abstract-auth-page.d.ts

@@ -3,6 +3,7 @@ import '@material/mwc-icon';
 import '@material/mwc-icon-button';
 import '@material/mwc-textfield';
 import '@operato/lottie-player';
+import '@operato/i18n/ox-i18n.js';
 import '@operato/i18n/ox-i18n-selector.js';
 import '@operato/layout/ox-snack-bar.js';
 import { LitElement } from 'lit';

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

@@ -4,6 +4,7 @@ import '@material/mwc-icon';
 import '@material/mwc-icon-button';
 import '@material/mwc-textfield';
 import '@operato/lottie-player';
+import '@operato/i18n/ox-i18n.js';
 import '@operato/i18n/ox-i18n-selector.js';
 import '@operato/layout/ox-snack-bar.js';
 import { css, html, LitElement } from 'lit';

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

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

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

@@ -2,6 +2,7 @@ import '@material/mwc-button';
 import '@material/mwc-textfield';
 import '@operato/lottie-player';
 import '../components/profile-component';
+import '@operato/i18n/ox-i18n.js';
 import '@operato/i18n/ox-i18n-selector.js';
 import '@operato/layout/ox-snack-bar.js';
 import { AbstractAuthPage } from './abstract-auth-page';

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

@@ -3,6 +3,7 @@ import '@material/mwc-button';
 import '@material/mwc-textfield';
 import '@operato/lottie-player';
 import '../components/profile-component';
+import '@operato/i18n/ox-i18n.js';
 import '@operato/i18n/ox-i18n-selector.js';
 import '@operato/layout/ox-snack-bar.js';
 import { css, html } from 'lit';

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

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

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

@@ -1 +1 @@
-export {};
+import '@material/mwc-textfield';

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

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/mwc-textfield';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
@@ -8,28 +9,18 @@ import { CustomAlert } from '@things-factory/shell/client';
 let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
     render() {
         return html `
-      <div field-2column>
-        <div field>
-          <label
-            >${i18next.t('label.x name', { x: i18next.t('label.role') })}
-            <input name="name" type="text" required />
-          </label>
-        </div>
-        <div field>
-          <label
-            >${i18next.t('label.x description', { x: i18next.t('label.role') })}
-            <input name="description" type="text" />
-          </label>
-        </div>
+      <mwc-textfield
+        type="text"
+        name="name"
+        label=${i18next.t('label.x name', { x: i18next.t('label.role') })}
+      ></mwc-textfield>
+      <mwc-textfield
+        type="text"
+        name="description"
+        label=${i18next.t('label.x description', { x: i18next.t('label.role') })}
+      ></mwc-textfield>
 
-        <div>
-          <mwc-button
-            @click=${this.onCreateRole.bind(this)}
-            outlined
-            label="${i18next.t('button.create')}"
-          ></mwc-button>
-        </div>
-      </div>
+      <mwc-button @click=${this.onCreateRole.bind(this)} outlined label="${i18next.t('button.create')}"></mwc-button>
     `;
     }
     async onCreateRole() {
@@ -77,61 +68,45 @@ let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
     }
 };
 CreateRole.styles = css `
-    [field-2column] {
+    :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);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
+
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 1fr 2fr auto;
       gap: 5px 15px;
       clear: both;
       max-width: var(--input-container-max-width);
-    }
-    [field] {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: var(--padding-default);
-    }
-    [grid-span] {
-      grid-column: span 2;
-    }
 
-    input {
-      border: var(--border-dark-color);
-      border-radius: var(--border-radius);
-      margin: var(--input-margin);
-      padding: var(--input-padding);
-      min-width: 250px;
-      font: var(--input-font);
+      align-items: center;
     }
-    label {
-      display: flex;
-      flex-direction: column;
 
-      font: var(--label-font);
-      color: var(--label-color);
-      text-transform: var(--label-text-transform);
-    }
     mwc-button {
       margin: var(--input-margin);
     }
+
     @media screen and (max-width: 480px) {
-      div {
-        display: grid;
+      :host {
+        grid-template-columns: 1fr 1fr;
       }
-      [field] {
+
+      mwc-button {
         grid-column: span 2;
+
+        margin: var(--input-margin);
       }
     }
   `;
 __decorate([
-    query('input[name=name]'),
+    query('[name=name]'),
     __metadata("design:type", HTMLInputElement)
 ], CreateRole.prototype, "nameInput", void 0);
 __decorate([
-    query('input[name=description]'),
+    query('[name=description]'),
     __metadata("design:type", HTMLInputElement)
 ], CreateRole.prototype, "descriptionInput", void 0);
 CreateRole = __decorate([

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 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 { CustomAlert } from '@things-factory/shell/client'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n  static styles = css`\n    [field-2column] {\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      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n    }\n    [field] {\n      display: flex;\n      flex-direction: column;\n      padding-bottom: var(--padding-default);\n    }\n    [grid-span] {\n      grid-column: span 2;\n    }\n\n    input {\n      border: var(--border-dark-color);\n      border-radius: var(--border-radius);\n      margin: var(--input-margin);\n      padding: var(--input-padding);\n      min-width: 250px;\n      font: var(--input-font);\n    }\n    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    mwc-button {\n      margin: var(--input-margin);\n    }\n    @media screen and (max-width: 480px) {\n      div {\n        display: grid;\n      }\n      [field] {\n        grid-column: span 2;\n      }\n    }\n  `\n\n  @query('input[name=name]') nameInput!: HTMLInputElement\n  @query('input[name=description]') descriptionInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <div field-2column>\n        <div field>\n          <label\n            >${i18next.t('label.x name', { x: i18next.t('label.role') })}\n            <input name=\"name\" type=\"text\" required />\n          </label>\n        </div>\n        <div field>\n          <label\n            >${i18next.t('label.x description', { x: i18next.t('label.role') })}\n            <input name=\"description\" type=\"text\" />\n          </label>\n        </div>\n\n        <div>\n          <mwc-button\n            @click=${this.onCreateRole.bind(this)}\n            outlined\n            label=\"${i18next.t('button.create')}\"\n          ></mwc-button>\n        </div>\n      </div>\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    const result = await CustomAlert({\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    if (!result.value) return\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 CustomAlert({\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  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/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 { CustomAlert } from '@things-factory/shell/client'\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=${i18next.t('label.x name', { x: i18next.t('label.role') })}\n      ></mwc-textfield>\n      <mwc-textfield\n        type=\"text\"\n        name=\"description\"\n        label=${i18next.t('label.x description', { x: i18next.t('label.role') })}\n      ></mwc-textfield>\n\n      <mwc-button @click=${this.onCreateRole.bind(this)} outlined label=\"${i18next.t('button.create')}\"></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    const result = await CustomAlert({\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    if (!result.value) return\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 CustomAlert({\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  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}

package/dist-client/components/delete-user-popup.d.ts

@@ -1,3 +1,4 @@
+import '@operato/i18n/ox-i18n.js';
 import { LitElement } from 'lit';
 declare const DeleteUserPopup_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class DeleteUserPopup extends DeleteUserPopup_base {

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

@@ -1,4 +1,5 @@
 import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';

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,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 { 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\" 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,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\" 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"]}