@things-factory/auth-ui 7.0.1-rc.9 → 7.0.2

package/client/auth-style-sign.ts

@@ -3,7 +3,8 @@ import { css } from 'lit'
 export const AUTH_STYLE_SIGN = css`
   :host {
     display: flex;
-    background-color: var(--auth-background, var(--md-sys-color-primary));
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   :host *:focus {
@@ -44,7 +45,7 @@ export const AUTH_STYLE_SIGN = css`
   }
   .auth-form {
     display: grid;
-    grid-gap: var(--margin-default);
+    grid-gap: var(--spacing-medium);
     grid-template-columns: 1fr 1fr;
   }
 
@@ -52,7 +53,7 @@ export const AUTH_STYLE_SIGN = css`
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: var(--margin-default);
+    grid-gap: var(--spacing-medium);
     align-items: center;
   }
 
@@ -115,7 +116,7 @@ export const AUTH_STYLE_SIGN = css`
   #locale-area {
     display: flex;
     grid-column: 1 / -1;
-    padding: 0 var(--padding-default);
+    padding: 0 var(--spacing-medium);
   }
 
   #locale-area > label {

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

@@ -47,7 +47,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
       }
 
       div.field {
-        margin-bottom: var(--margin-default);
+        margin-bottom: var(--spacing-medium);
       }
 
       [hidden] {
@@ -84,6 +84,10 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
     description: string
   }
 
+  get autocompletable() {
+    return false
+  }
+
   render() {
     const { disableUserFavoredLanguage, languages } = this.data || {}
     var { icon, title, description } = this.applicationMeta
@@ -104,6 +108,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
               id="form"
               action="${this.actionUrl}"
               method="post"
+              autocomplete=${this.autocompletable ? "on": "off"}
               @keypress=${e => {
                 if (e.key == 'Enter') this._onSubmit(e)
               }}
@@ -184,7 +189,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          autocomplete="username"
+          autocomplete="off"
           autocapitalize="off"
           ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
         >
@@ -194,7 +199,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete="current-password"
+          autocomplete="off"
           required
           ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
         >

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

@@ -86,6 +86,7 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                 .pattern=${this.passwordPattern}
                 helper=${this.passwordHelp}
                 helperPersistent
+                autocomplete="off"
                 @input=${e => {
                   var val = e.target.value
                   this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
@@ -100,6 +101,7 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                 name="confirm-password"
                 type="password"
                 label=${String(i18next.t('field.confirm password'))}
+                autocomplete="off"
                 required
               ></md-filled-text-field>
             </div>

package/client/components/abstract-sign.ts

@@ -45,6 +45,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
 
   get formfields() {
     const email = this.data?.email || ''
+    const autocompletable = this.autocompletable
 
     return html`
       <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
@@ -56,7 +57,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          autocomplete="username"
+          autocomplete=${autocompletable ? "username" : "off"}
           autocapitalize="off"
           @input=${(e: Event) => {
             const target = e.target as HTMLInputElement
@@ -74,7 +75,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete="current-password"
+          autocomplete=${autocompletable ? "current-password" : "off"}
           required
           ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
         >

package/client/components/change-password.ts

@@ -41,7 +41,7 @@ export class ChangePassword extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        margin: var(--margin-narrow) auto var(--margin-default) auto;
+        margin: var(--spacing-small) auto var(--spacing-medium) auto;
       }
 
       button {

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

@@ -18,7 +18,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 

package/client/components/create-role.ts

@@ -14,8 +14,8 @@ class CreateRole extends localize(i18next)(LitElement) {
     :host {
       --md-text-field-fill-color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-surface);
-      margin: var(--margin-wide) 0;
-      padding: var(--padding-wide);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 

package/client/components/create-user.ts

@@ -12,8 +12,8 @@ class CreateUser extends LitElement {
     :host {
       --md-text-field-fill-color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-surface);
-      margin: var(--margin-wide) 0;
-      padding: var(--padding-wide);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 

package/client/components/domain-switch.ts

@@ -27,12 +27,12 @@ export class DomainSwitch extends connect(store)(LitElement) {
         flex: 1;
         display: flex;
         flex-direction: row;
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
 
       md-icon {
         background-color: var(--md-sys-color-primary, rgb(46 121 190));
-        margin-right: var(--margin-narrow);
+        margin-right: var(--spacing-small);
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
@@ -84,7 +84,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         border: var(--border-dim-color);
       }
       :host([rounded-corner]) div {
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
       }
     `
   ]

package/client/components/my-login-history.ts

@@ -15,7 +15,7 @@ class MyLoginHistory extends LitElement {
       display: flex;
       flex-direction: column;
       background-color: var(--md-sys-color-background);
-      padding: var(--padding-wide);
+      padding: var(--spacing-large);
       overflow: auto;
     }
     ox-grist {

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

@@ -16,7 +16,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
       .container {
@@ -37,7 +37,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         display: flex;
       }
       .input-container md-elevated-button {
-        margin: auto 0px auto var(--padding-wide);
+        margin: auto 0px auto var(--spacing-large);
       }
     `
   ]

package/client/components/partner-info-card.ts

@@ -32,7 +32,7 @@ export class PartnerInfoCard extends LitElement {
         overflow: auto;
         flex: 1;
         background-color: var(--md-sys-color-surface-variant);
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -43,7 +43,7 @@ export class PartnerInfoCard extends LitElement {
       [field] {
         display: flex;
         flex-direction: column;
-        padding-bottom: var(--padding-default);
+        padding-bottom: var(--spacing-medium);
       }
       label {
         display: flex;

package/client/components/partner-role-editor.ts

@@ -22,13 +22,13 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
         flex-direction: column;
 
         border: 1px solid var(--md-sys-color-primary);
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         font: normal 15px var(--theme-font);
         color: var(--md-sys-color-secondary);
       }
 
       md-elevated-button {
-        margin-right: var(--padding-narrow);
+        margin-right: var(--spacing-small);
       }
     `
   ]

package/client/components/profile-component.ts

@@ -39,7 +39,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       }
 
       input {
-        margin: var(--margin-narrow) 0;
+        margin: var(--spacing-small) 0;
         border: 1px solid rgba(0, 0, 0, 0.2);
         padding: 9px;
         border-radius: var(--border-radius);
@@ -82,7 +82,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       ox-i18n-selector {
         --i18n-selector-field-width: var(--auth-input-field-width);
         --i18n-selector-field-margin: var(--change-password-field-margin);
-        --i18n-selector-field-padding: var(--padding-default);
+        --i18n-selector-field-padding: var(--spacing-medium);
         --i18n-selector-field-border-radius: var(--border-radius);
         margin: var(--change-password-field-margin);
       }

package/client/components/role-edit-form.ts

@@ -17,7 +17,7 @@ class RoleEditForm extends localize(i18next)(LitElement) {
     [field] {
       display: flex;
       flex-direction: column;
-      padding-bottom: var(--padding-default);
+      padding-bottom: var(--spacing-medium);
     }
     input {
       border: var(--border-dim-color);

package/client/components/role-privilege-editor.ts

@@ -21,7 +21,7 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-secondary);
       }
       div {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
       ul {
         flex: 1;
@@ -30,7 +30,7 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         display: grid;
         grid-template-columns: 1fr 1fr;
         margin: 0;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
         border-width: 1px 0;
@@ -41,13 +41,13 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
       }
 
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
 
       #checkAll,
       [for='checkAll'] {
-        margin-bottom: var(--margin-default);
-        padding-bottom: var(--padding-narrow);
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
         font-weight: bold;
       }
 

package/client/components/role-selector.ts

@@ -12,7 +12,7 @@ export class RoleSelector extends LitElement {
         color: var(--subtitle-text-color);
       }
       div {
-        margin: 0 var(--margin-default) var(--margin-default) var(--margin-default);
+        margin: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
       }
       ul {
         flex: 1;
@@ -21,7 +21,7 @@ export class RoleSelector extends LitElement {
         column-gap: 20px;
         overflow: auto;
         margin: 0;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
         border-width: 1px 0;
@@ -30,18 +30,18 @@ export class RoleSelector extends LitElement {
         display: inline;
       }
       label {
-        padding-left: var(--padding-narrow);
+        padding-left: var(--spacing-small);
         text-transform: capitalize;
         font: var(--label-font);
         color: var(--label-color, var(--md-sys-color-on-surface));
       }
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
       #checkAll,
       [for='checkAll'] {
-        margin-bottom: var(--margin-default);
-        padding-bottom: var(--padding-narrow);
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
         font-weight: bold;
       }
     `

package/client/components/user-role-editor.ts

@@ -16,6 +16,7 @@ import { store } from '@operato/shell'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 import { ButtonContainerStyles } from '@operato/styles'
 import { RoleSelector } from './role-selector'
+import { InheritedValueType } from '@operato/data-grist'
 
 @customElement('user-role-editor')
 class UserRoleEditor extends connect(store)(LitElement) {
@@ -38,7 +39,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
 
         overflow: auto;
         margin: 0;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
         border-width: 1px 0;
@@ -50,7 +51,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
         font: var(--input-font);
       }
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
       [detail] {
         background-color: var(--md-sys-color-surface);
@@ -275,8 +276,8 @@ class UserRoleEditor extends connect(store)(LitElement) {
   async fetchAvailableRoles() {
     const response = await client.query({
       query: gql`
-        query {
-          roles {
+        query roles($inherited: InheritedValueType) {
+          roles(inherited: $inherited) {
             items {
               id
               domain {
@@ -300,6 +301,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
           }
         }
       `,
+      variables: {
+        inherited: InheritedValueType.Include
+      },
       context: gqlContext()
     })
 

package/client/entries/auth/activate.ts

@@ -20,7 +20,8 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
 
       .wrap {

package/client/entries/auth/checkin.ts

@@ -21,12 +21,14 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         margin: auto;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
         height: 100vh;
         height: 100dvh;
       }
       .header {
         background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
         height: var(--checkin-header-height);
       }
       .content {
@@ -35,9 +37,10 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       }
 
       .domains {
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         padding: 0;
         background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         list-style: none;
@@ -45,15 +48,15 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       li {
         border-bottom: var(--border-dim-color);
         margin-bottom: -1px;
-        padding: var(--padding-default) var(--padding-wide);
+        padding: var(--spacing-medium) var(--spacing-large);
         font-size: 18px;
-        color: var(--md-sys-color-secondary);
         text-align: left;
 
         cursor: pointer;
       }
       li:hover {
         background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
       }
       li span {
         display: block;
@@ -68,13 +71,13 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         text-align: center;
       }
       .button-container md-elevated-button {
-        margin-left: var(--margin-narrow);
+        margin-left: var(--spacing-small);
       }
 
       @media (max-width: 450px) {
         .button-container md-elevated-button {
           width: 100%;
-          margin: var(--margin-default) 0 0 0;
+          margin: var(--spacing-medium) 0 0 0;
         }
       }
     `,

package/client/entries/auth/result.ts

@@ -18,7 +18,8 @@ export class AuthResult extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
       .wrap {
         display: block;
@@ -77,7 +78,7 @@ export class AuthResult extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        --md-button-horizontal-padding: var(--padding-default);
+        --md-button-horizontal-padding: var(--spacing-medium);
         --md-button-ink-color: var(--md-sys-color-primary);
       }
 

package/client/entries/auth/signin.ts

@@ -11,4 +11,8 @@ export class AuthSignin extends AbstractSign {
   get actionUrl() {
     return '/auth/signin'
   }
+
+  get autocompletable() {
+    return true
+  }
 }

package/client/entries/auth/signup.ts

@@ -47,6 +47,7 @@ export class AuthSignup extends AbstractSign {
           required
           .value=${email}
           autocapitalize="off"
+          autocomplete="off"
           @input=${(e: Event) => {
             const target = e.target as HTMLInputElement
             if (target.validity.typeMismatch) {
@@ -67,6 +68,7 @@ export class AuthSignup extends AbstractSign {
           helper=${this.passwordHelp || ''}
           helperPersistent
           required
+          autocomplete="off"
           @input=${e => {
             var val = e.target.value
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
@@ -80,6 +82,7 @@ export class AuthSignup extends AbstractSign {
           id="confirm-password"
           name="confirm-password"
           type="password"
+          autocomplete="off"
           label=${String(i18next.t('field.confirm password'))}
           required
         >

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -20,8 +20,8 @@ class OAuth2DecisionPage extends LitElement {
         flex-direction: column;
 
         border: 1px solid var(--md-sys-color-primary);
-        margin: var(--margin-default);
-        padding: var(--padding-default);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-medium);
         font: normal 15px var(--theme-font);
         color: var(--md-sys-color-secondary);
       }
@@ -38,7 +38,7 @@ class OAuth2DecisionPage extends LitElement {
       [field] {
         display: flex;
         flex-direction: column;
-        padding-bottom: var(--padding-default);
+        padding-bottom: var(--spacing-medium);
       }
 
       input {
@@ -59,7 +59,7 @@ class OAuth2DecisionPage extends LitElement {
       }
 
       md-elevated-button {
-        margin-right: var(--padding-narrow);
+        margin-right: var(--spacing-small);
       }
     `
   ]

package/client/entries/public/home.ts

@@ -93,7 +93,7 @@ export class HomePage extends localize(i18next)(LitElement) {
       [ticket] [content] {
         border-radius: 12px;
         background-color: var(--md-sys-color-tertiary-container);
-        padding: var(--padding-default) var(--padding-wide);
+        padding: var(--spacing-medium) var(--spacing-large);
         box-shadow: var(--box-shadow);
       }
 
@@ -105,7 +105,7 @@ export class HomePage extends localize(i18next)(LitElement) {
 
       legend {
         margin: 0;
-        padding: var(--padding-narrow) 0 var(--padding-default) 0;
+        padding: var(--spacing-small) 0 var(--spacing-medium) 0;
         font-weight: bold;
         color: var(--legend-color);
         text-transform: uppercase;
@@ -114,7 +114,7 @@ export class HomePage extends localize(i18next)(LitElement) {
       input {
         border: var(--md-sys-color-outline);
         border-radius: var(--border-radius);
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         font: var(--input-font);
       }
 
@@ -165,7 +165,7 @@ export class HomePage extends localize(i18next)(LitElement) {
         }
         input[type='text'] {
           width: calc(100% - 20px);
-          margin: var(--margin-narrow) 0 var(--margin-default) 0;
+          margin: var(--spacing-small) 0 var(--spacing-medium) 0;
           text-align: center;
         }
         fieldset md-text-button {

package/client/pages/app-binding/app-binding.ts

@@ -23,7 +23,7 @@ class AppBinding extends connect(store)(PageView) {
         position: relative;
 
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       h2 {
@@ -53,8 +53,8 @@ class AppBinding extends connect(store)(PageView) {
 
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
 
@@ -126,7 +126,7 @@ class AppBinding extends connect(store)(PageView) {
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }

package/client/pages/app-binding/app-bindings.ts

@@ -15,7 +15,7 @@ class AppBindings extends connect(store)(PageView) {
     css`
       :host {
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
@@ -26,7 +26,7 @@ class AppBindings extends connect(store)(PageView) {
 
       md-outlined-button {
         float: right;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         text-transform: capitalize;
       }
 
@@ -44,7 +44,7 @@ class AppBindings extends connect(store)(PageView) {
 
       table {
         width: 100%;
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         border-collapse: collapse;
       }