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

package/client/pages/application/applications.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -11,15 +14,20 @@ class Applications extends connect(store)(PageView) {
   static styles = [
     css`
       :host {
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
 
-      [outlined] {
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
         float: right;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
+        text-transform: capitalize;
       }
 
       h2 {
@@ -27,25 +35,31 @@ class Applications extends connect(store)(PageView) {
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
+
       table {
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         width: 100%;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -56,19 +70,21 @@ class Applications extends connect(store)(PageView) {
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
         font: var(--td-font);
         text-decoration: none;
-        color: var(--theme-black-color);
+        color: var(--md-sys-color-on-surface);
       }
+
       td a strong {
-        color: var(--secondary-text-color);
         font: bold 16px var(--theme-font);
 
         display: block;
@@ -78,6 +94,7 @@ class Applications extends connect(store)(PageView) {
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }
@@ -102,14 +119,12 @@ class Applications extends connect(store)(PageView) {
         <p page-description>
           What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
         </p>
-        <mwc-button
-          raised
-          @click=${e => navigate('application-register')}
-          label="register new application"
-        ></mwc-button>
+
+        <md-elevated-button @click=${e => navigate('application-register')}
+          >register new application</md-elevated-button
+        >
       </div>
 
-      <!-- <div> -->
       <table>
         <tr>
           <th>app name</th>
@@ -134,8 +149,7 @@ class Applications extends connect(store)(PageView) {
         )}
       </table>
 
-      <mwc-button outlined @click=${e => navigate('app-bindings')} label="bound applications .."></mwc-button>
-      <!-- </div> -->
+      <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>
     `
   }
 

package/client/pages/application/register.ts

@@ -11,8 +11,8 @@ class ApplicationRegister extends connect(store)(PageView) {
   static styles = [
     css`
       :host {
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
 
         position: relative;
 
@@ -42,15 +42,15 @@ class ApplicationRegister extends connect(store)(PageView) {
 
       img[pagedeco] {
         width: 150px;
-        margin: 0 var(--margin-wide);
+        margin: 0 var(--spacing-large);
         float: left;
         position: relative;
         top: -20px;
       }
 
       [form-container] {
-        background-color: var(--theme-white-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-large);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
         max-width: var(--input-container-max-width);
@@ -60,11 +60,11 @@ class ApplicationRegister extends connect(store)(PageView) {
       }
       label {
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -165,7 +165,7 @@ class ApplicationRegister extends connect(store)(PageView) {
               <input id="email" type="text" name="email" />
             </div>
 
-            <mwc-button grid-span @click=${this.createApplication.bind(this)} raised label="register"></mwc-button>
+            <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>
           </div>
         </form>
       </div>

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'
@@ -6,7 +8,8 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 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 { DataGrist, FetchOption } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('attribute-set-item-list')
 class AttributeSetItemList extends localize(i18next)(LitElement) {
@@ -15,30 +18,18 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
   @state() gristConfig: any
 
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       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);
-      }
     `
   ]
 
@@ -51,11 +42,14 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
         .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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './attribute-set-item-list.js'
@@ -67,7 +69,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 +83,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 +109,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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
@@ -68,7 +70,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 +84,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 +181,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 }
@@ -236,6 +229,7 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
                 name
                 placeholder
                 property
+                styles
               }
             }
             total

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist/ox-grist.js'
 import '@operato/data-grist/ox-filters-form.js'
 import '@operato/context/ox-context-page-toolbar.js'
@@ -7,7 +9,7 @@ import '../../components/create-domain-popup'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DataGrist } from '@operato/data-grist/ox-grist.js'
@@ -81,10 +83,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>
@@ -256,10 +255,6 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
         }
       ]
     }
-
-    await this.updateComplete
-
-    this.grist.fetch()
   }
 
   async pageUpdated(changes, lifecycle) {

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

@@ -19,8 +19,8 @@ class PartnerManagement extends connect(store)(PageView) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }

package/client/pages/profile.ts

@@ -14,7 +14,7 @@ export class AuthProfile extends localize(i18next)(PageView) {
     css`
       :host {
         display: block;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         overflow-y: auto;
       }
     `

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

@@ -10,7 +10,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
-import { PageView, store } from '@operato/shell'
+import { InheritedValueType, PageView, store } from '@operato/shell'
 
 @customElement('role-management')
 class RoleManagement extends connect(store)(PageView) {
@@ -19,8 +19,8 @@ class RoleManagement extends connect(store)(PageView) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
@@ -37,11 +37,11 @@ class RoleManagement extends connect(store)(PageView) {
       #roles-privileges {
         flex: 1;
         display: flex;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         max-width: var(--content-container-max-width);
         flex-direction: row;
         overflow: auto;
-        border-top: var(--border-dark-color);
+        border-top: var(--border-dim-color);
       }
     `
   ]
@@ -74,10 +74,9 @@ class RoleManagement extends connect(store)(PageView) {
       <div id="roles-privileges">
         <quick-find-list
           .data="${data}"
-          .openHeaderRenderer=${role =>
-            html`
-              <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
-            `}
+          .openHeaderRenderer=${role => html`
+            <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
+          `}
           .contentRenderer="${(role, _currentTabKey) => html`
             <role-privilege-editor
               .updateRoleObj=${this.updateRoleObj || {}}
@@ -106,8 +105,8 @@ class RoleManagement extends connect(store)(PageView) {
   async fetchRoles() {
     const response = await client.query({
       query: gql`
-        query roles($sortings: [Sorting!]) {
-          roles(sortings: $sortings) {
+        query roles($sortings: [Sorting!], $inherited: InheritedValueType) {
+          roles(sortings: $sortings, inherited: $inherited) {
             items {
               id
               name
@@ -121,7 +120,10 @@ class RoleManagement extends connect(store)(PageView) {
           }
         }
       `,
-      variables: { sortings: [{ name: 'name' }] },
+      variables: { 
+        sortings: [{ name: 'name' }],
+        inherited: InheritedValueType.Only
+      },
       context: gqlContext()
     })
 

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import '@things-factory/component-ui'
 import '../../components/invite-user'
 import '../../components/ownership-transfer-popup'
@@ -20,14 +22,14 @@ class UserManagement extends PageView {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
       @media screen and (max-width: 600px) {
         :host {
-          padding: var(--padding-narrow);
+          padding: var(--spacing-small);
         }
       }
     `
@@ -99,10 +101,10 @@ class UserManagement extends PageView {
           return html`
             ${!user.activated
               ? html`
-                  <mwc-icon>do_disturb</mwc-icon>
+                  <md-icon>do_disturb</md-icon>
                   ${user.name}
                 `
-              : html` ${user.owner ? html` <mwc-icon>supervisor_account</mwc-icon> ` : ''} ${user.name} `}
+              : html` ${user.owner ? html` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `}
           `
         }}
         .contentRenderer=${user =>

package/client/themes/auth-theme.css

@@ -1,22 +1,19 @@
 body {
   /* login page style*/
-  --auth-background: var(--primary-color);
   --auth-brand-name: bold 20px var(--theme-font);
   --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   --auth-brand-welcome-msg: normal 12px var(--theme-font);
 
-  --auth-title-color: var(--theme-white-color);
   --auth-title-font: bold 32px var(--theme-font);
-  --auth-description-color: var(--secondary-text-color);
   --auth-description-font: normal 12px var(--theme-font);
   --auth-description-padding: 5px 5px 15px 5px;
 
   --auth-input-font: normal 18px/24px var(--theme-font);
-  --auth-input-border: 1px solid var(--opacity-dark-color);
-  --auth-input-border-light: 1px solid var(--opacity-light-color);
-  --auth-input-color: var(--theme-white-color);
+  --auth-input-border: 1px solid rgba(0, 0, 0, 0.4);
+  --auth-input-border-light: 1px solid rgba(255, 255, 255, 0.8);
+  --auth-input-color: var(--md-sys-color-on-primary);
 
-  --auth-button-background-color: var(--theme-white-color);
+  --auth-button-background-color: var(--md-sys-color-surface-variant);
   --auth-button-background-focus-color: var(--status-success-color);
   --auth-button-font: bold 20px var(--theme-font);
   --auth-button-padding: 9px 12px 7px 12px;
@@ -42,11 +39,11 @@ body {
   --auth-special-page-padding: 250px 0 100px 0;
 
   /* domain select page style*/
-  --checkin-background-color: var(--main-section-background-color);
+  --checkin-background-color: var(--md-sys-color-background);
   --checkin-header-height: 45px;
-  --checkin-header-background-color: var(--primary-color);
+  --checkin-header-background-color: var(--md-sys-color-primary);
   --checkin-header-title-font: bold 19px var(--theme-font);
-  --checkin-header-title-color: var(--theme-white-color);
+  --checkin-header-title-color: var(--md-sys-color-on-primary);
   --checkin-wrap-max-width: 500px;
   --checkin-wrap-padding: var(--padding-wide);
 }