@things-factory/auth-ui 7.0.1-alpha.4 → 7.0.1-alpha.43

package/client/bootstrap.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */
 
@@ -7,14 +7,10 @@ import { html } from 'lit-html'
 import { navigate, store } from '@operato/shell'
 import { TOOL_POSITION } from '@operato/layout'
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
 
-import {
-  registerEditor as registerGristEditor,
-  registerRenderer as registerGristRenderer,
-  OxGristRendererJson5
-} from '@operato/data-grist'
-import { auth } from '@things-factory/auth-base/dist-client'
-import { ADD_MORENDA } from '@things-factory/more-base'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
 
 export default function bootstrap() {
   registerGristEditor('privilege', OxGristEditorPrivilege)
@@ -24,7 +20,7 @@ export default function bootstrap() {
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html` <mwc-icon>account_circle</mwc-icon> `,
+      icon: html` <md-icon>account_circle</md-icon> `,
       name: html` <ox-i18n msgid="text.auth profile"></ox-i18n> `,
       position: TOOL_POSITION.FRONT_END,
       action: () => {
@@ -37,7 +33,7 @@ export default function bootstrap() {
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html` <mwc-icon>exit_to_app</mwc-icon> `,
+      icon: html` <md-icon>exit_to_app</md-icon> `,
       name: html` <ox-i18n msgid="field.sign out"></ox-i18n> `,
       position: TOOL_POSITION.FRONT_END,
       action: () => {

package/client/components/change-password.ts

@@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { auth } from '@things-factory/auth-base/dist-client'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 
 @customElement('change-password')
 export class ChangePassword extends localize(i18next)(LitElement) {

package/client/components/contact-us.ts

@@ -8,7 +8,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { auth } from '@things-factory/auth-base/dist-client'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 
 @customElement('contact-us')
 export class ContactUs extends localize(i18next)(LitElement) {
@@ -83,13 +83,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
             }}
           ></mwc-textarea>
         </div>
-        <mwc-button
-          slot="primaryAction"
-          type="submit"
-          label=${i18next.t('button.submit')}
-          raised
-          @click=${e => this._submit(e)}
-        ></mwc-button>
+        <mwc-button slot="primaryAction" type="submit" label=${i18next.t('button.submit')} raised @click=${e => this._submit(e)}></mwc-button>
         <mwc-button slot="secondaryAction" dialogAction="cancel" label=${i18next.t('button.cancel')}></mwc-button>
       </mwc-dialog>
     `

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

@@ -5,7 +5,7 @@ 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'
 
 @customElement('delete-user-popup')
 export class DeleteUserPopup extends localize(i18next)(LitElement) {

package/client/index.ts

@@ -1,10 +1,10 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { html } from 'lit-html'
 
 import { navigate, store } from '@operato/shell'
-import { ADD_MORENDA } from '@things-factory/more-base'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
 import { hasPrivilege } from '@things-factory/auth-base/dist-client'
 
 export * from './components/role-selector.js'
@@ -12,13 +12,11 @@ export * from './components/domain-switch.js'
 export * from './components/invite-user.js'
 
 export async function setAuthManagementMenus() {
-  if (
-    await hasPrivilege({ privilege: 'mutation', category: 'user', domainOwnerGranted: true, superUserGranted: true })
-  ) {
+  if (await hasPrivilege({ privilege: 'mutation', category: 'user', domainOwnerGranted: true, superUserGranted: true })) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>how_to_reg</mwc-icon> `,
+        icon: html` <md-icon>how_to_reg</md-icon> `,
         name: html` <ox-i18n msgid="text.role_management"></ox-i18n> `,
         action: () => {
           navigate('roles')
@@ -29,7 +27,7 @@ export async function setAuthManagementMenus() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>devices</mwc-icon> `,
+        icon: html` <md-icon>devices</md-icon> `,
         name: html` <ox-i18n msgid="text.appliance"></ox-i18n> `,
         action: () => {
           navigate('appliance-home')
@@ -40,7 +38,7 @@ export async function setAuthManagementMenus() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>apps</mwc-icon> `,
+        icon: html` <md-icon>apps</md-icon> `,
         name: html` <ox-i18n msgid="text.application management"></ox-i18n> `,
         action: () => {
           navigate('applications')
@@ -51,7 +49,7 @@ export async function setAuthManagementMenus() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>people</mwc-icon> `,
+        icon: html` <md-icon>people</md-icon> `,
         name: html` <ox-i18n msgid="text.user management"></ox-i18n> `,
         action: () => {
           navigate('users')
@@ -62,7 +60,7 @@ export async function setAuthManagementMenus() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>badge</mwc-icon> `,
+        icon: html` <md-icon>badge</md-icon> `,
         name: html` <ox-i18n msgid="text.auth-provider management"></ox-i18n> `,
         action: () => {
           navigate('auth-providers')
@@ -75,7 +73,7 @@ export async function setAuthManagementMenus() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>business</mwc-icon> `,
+        icon: html` <md-icon>business</md-icon> `,
         name: html` <ox-i18n msgid="text.domain management"></ox-i18n> `,
         action: () => {
           navigate('domains')
@@ -86,7 +84,7 @@ export async function setAuthManagementMenus() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>dataset</mwc-icon> `,
+        icon: html` <md-icon>dataset</md-icon> `,
         name: html` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
         action: () => {
           navigate('attributes')

package/client/pages/application/application.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import Clipboard from 'clipboard'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -8,10 +10,12 @@ import { APPLICATION_TYPES } from '../../constants/application'
 
 import { client } from '@operato/graphql'
 import { navigate, PageView, store } from '@operato/shell'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('application-page')
 class Application extends connect(store)(PageView) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -109,16 +113,7 @@ class Application extends connect(store)(PageView) {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      .button-container {
-        margin-top: var(--margin-wide);
-        text-align: right;
-      }
-      .button-container mwc-button {
-        margin-left: var(--margin-narrow);
-      }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;
@@ -176,10 +171,7 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="type-selector">type</label>
                 <select id="type-selector" name="type">
-                  ${APPLICATION_TYPES.map(
-                    type =>
-                      html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`
-                  )}
+                  ${APPLICATION_TYPES.map(type => html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`)}
                 </select>
               </div>
 
@@ -211,30 +203,15 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="auth-url">auth URL</label>
                 <input id="auth-url" type="text" .value=${app.authUrl} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
                 The endpoint for authorization server. This is used to get the authorization code.
               </div>
 
               <div field grid-span>
                 <label for="access-token-url">access token URL</label>
                 <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
-                The endpoint for authentication server. This is used to exchange the authorization code for an access
-                token.
+                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
+                The endpoint for authentication server. This is used to exchange the authorization code for an access token.
               </div>
             </div>
           </fieldset>
@@ -247,36 +224,22 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="app-key">appKey</label>
                 <input id="app-key" type="text" .value=${app.appKey} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
               </div>
 
               <div field grid-span>
                 <label for="app-secret">appSecret</label>
                 <input id="app-secret" type="text" .value=${app.appSecret} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
               </div>
             </div>
           </fieldset>
         </div>
 
         <div class="button-container">
-          <mwc-button raised danger label="delete this app" @click=${this.deleteApplication.bind(this)}></mwc-button>
-          <mwc-button raised label="update" @click=${this.updateApplication.bind(this)}></mwc-button>
-          <mwc-button outlined label="generate new secret"></mwc-button>
+          <button danger @click=${this.deleteApplication.bind(this)}><md-icon>delete_forever</md-icon>delete this app</button>
+          <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
+          <button><md-icon>passkey</md-icon>generate new secret</button>
         </div>
       </form>
     `

package/client/pages/attribute/attribute-set-item-list.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 
 import { css, html, LitElement } from 'lit'
@@ -7,6 +9,7 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('attribute-set-item-list')
 class AttributeSetItemList extends localize(i18next)(LitElement) {
@@ -16,6 +19,7 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
 
   static styles = [
     css`
+      ButtonContainerStyles,
       :host {
         display: flex;
         flex-direction: column;
@@ -26,19 +30,6 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -46,16 +37,11 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this.deleteAttributeSetItems.bind(this)}
-          >${i18next.t('button.delete')}</mwc-button
-        >
-        <mwc-button raised @click=${this.updateAttributeSetItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this.deleteAttributeSetItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this.updateAttributeSetItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/attribute/attribute-set-management.ts

@@ -67,7 +67,10 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
         {
           title: i18next.t('button.delete'),
           action: this.deleteAttributeSet.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -78,17 +81,9 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.attributes')}
-          </div>
+          <div class="title">${i18next.t('title.attributes')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
         </div>
@@ -112,15 +107,12 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               if (!record.id) return
-              const popup = openPopup(
-                html` <attribute-set-item-list .attribute=${record}></attribute-set-item-list> `,
-                {
-                  backdrop: true,
-                  help: 'attribute/ui/attribute-set-item-list',
-                  size: 'large',
-                  title: i18next.t('title.attribute-item list')
-                }
-              )
+              const popup = openPopup(html` <attribute-set-item-list .attribute=${record}></attribute-set-item-list> `, {
+                backdrop: true,
+                help: 'attribute/ui/attribute-set-item-list',
+                size: 'large',
+                title: i18next.t('title.attribute-item list')
+              })
               popup.onclosed = () => {
                 this.grist.fetch()
               }

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

@@ -68,7 +68,10 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
         {
           title: i18next.t('button.delete'),
           action: this.deleteAuthProvider.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -79,17 +82,9 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.auth-provider')}
-          </div>
+          <div class="title">${i18next.t('title.auth-provider')}</div>
 
           <ox-filters-form autofocus without-search class="filters"></ox-filters-form>
 
@@ -184,11 +179,7 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
           record: {
             editable: true,
             options: async (value, column, record, row, field) => {
-              const {
-                description,
-                help,
-                parameterSpec: spec
-              } = record.type ? this.authProviderTypes[record.type] : ({} as any)
+              const { description, help, parameterSpec: spec } = record.type ? this.authProviderTypes[record.type] : ({} as any)
               const context = this.grist
 
               return { description, help, spec, context }

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

@@ -81,10 +81,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
     return html`
       <ox-grist .mode=${this.mode} .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('text.domain management')}
-          </div>
+          <div class="title">${i18next.t('text.domain management')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
@@ -108,20 +105,11 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
             click: async (columns, data, column, record, rowIndex) => {
               const attributeSet = await this.getAttributeSetForDomain()
 
-              openPopup(
-                html`
-                  <ox-attribute-view
-                    .attributeSet=${attributeSet}
-                    .value=${record.attributes}
-                    style="background-color: white;"
-                  ></ox-attribute-view>
-                `,
-                {
-                  backdrop: true,
-                  size: 'large',
-                  title: record.name + ' ' + i18next.t('title.attributes')
-                }
-              )
+              openPopup(html` <ox-attribute-view .attributeSet=${attributeSet} .value=${record.attributes} style="background-color: white;"></ox-attribute-view> `, {
+                backdrop: true,
+                size: 'large',
+                title: record.name + ' ' + i18next.t('title.attributes')
+              })
             }
           }
         },

package/dist-client/bootstrap.d.ts

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

package/dist-client/bootstrap.js

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 import '@operato/attribute/grist-editor'; /* for register data-grist editor type 'attributes' */
 import { html } from 'lit-html';
@@ -6,8 +6,8 @@ import { navigate, store } from '@operato/shell';
 import { TOOL_POSITION } from '@operato/layout';
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js';
 import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist';
-import { auth } from '@things-factory/auth-base/dist-client';
-import { ADD_MORENDA } from '@things-factory/more-base';
+import { auth } from '@things-factory/auth-base/dist-client/auth.js';
+import { ADD_MORENDA } from '@things-factory/more-base/client';
 export default function bootstrap() {
     registerGristEditor('privilege', OxGristEditorPrivilege);
     registerGristRenderer('privilege', OxGristRendererJson5);
@@ -15,7 +15,7 @@ export default function bootstrap() {
     store.dispatch({
         type: ADD_MORENDA,
         morenda: {
-            icon: html ` <mwc-icon>account_circle</mwc-icon> `,
+            icon: html ` <md-icon>account_circle</md-icon> `,
             name: html ` <ox-i18n msgid="text.auth profile"></ox-i18n> `,
             position: TOOL_POSITION.FRONT_END,
             action: () => {
@@ -27,7 +27,7 @@ export default function bootstrap() {
     store.dispatch({
         type: ADD_MORENDA,
         morenda: {
-            icon: html ` <mwc-icon>exit_to_app</mwc-icon> `,
+            icon: html ` <md-icon>exit_to_app</md-icon> `,
             name: html ` <ox-i18n msgid="field.sign out"></ox-i18n> `,
             position: TOOL_POSITION.FRONT_END,
             action: () => {

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,0BAA0B,CAAA;AACjC,OAAO,iCAAiC,CAAA,CAAC,sDAAsD;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAE/F,OAAO,EACL,cAAc,IAAI,mBAAmB,EACrC,gBAAgB,IAAI,qBAAqB,EACzC,oBAAoB,EACrB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAEvD,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACxD,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAExD,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'\nimport '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\n\nimport {\n  registerEditor as registerGristEditor,\n  registerRenderer as registerGristRenderer,\n  OxGristRendererJson5\n} from '@operato/data-grist'\nimport { auth } from '@things-factory/auth-base/dist-client'\nimport { ADD_MORENDA } from '@things-factory/more-base'\n\nexport default function bootstrap() {\n  registerGristEditor('privilege', OxGristEditorPrivilege)\n  registerGristRenderer('privilege', OxGristRendererJson5)\n\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,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,iCAAiC,CAAA,CAAC,sDAAsD;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAE5I,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACxD,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAExD,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,qCAAqC;YAC/C,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,kCAAkC;YAC5C,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/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\nimport { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'\n\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\nimport { ADD_MORENDA } from '@things-factory/more-base/client'\n\nexport default function bootstrap() {\n  registerGristEditor('privilege', OxGristEditorPrivilege)\n  registerGristRenderer('privilege', OxGristRendererJson5)\n\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>account_circle</md-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` <md-icon>exit_to_app</md-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/change-password.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { auth } from '@things-factory/auth-base/dist-client';
+import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 let ChangePassword = class ChangePassword extends localize(i18next)(LitElement) {
     render() {
         return html `

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

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

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

@@ -7,7 +7,7 @@ import '@operato/i18n';
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { auth } from '@things-factory/auth-base/dist-client';
+import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
     static get styles() {
         return [
@@ -74,13 +74,7 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
         }}
           ></mwc-textarea>
         </div>
-        <mwc-button
-          slot="primaryAction"
-          type="submit"
-          label=${i18next.t('button.submit')}
-          raised
-          @click=${e => this._submit(e)}
-        ></mwc-button>
+        <mwc-button slot="primaryAction" type="submit" label=${i18next.t('button.submit')} raised @click=${e => this._submit(e)}></mwc-button>
         <mwc-button slot="secondaryAction" dialogAction="cancel" label=${i18next.t('button.cancel')}></mwc-button>
       </mwc-dialog>
     `;