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

package/client/components/profile-component.ts

@@ -4,20 +4,23 @@ import './change-password'
 import './delete-user-popup'
 import './my-login-history'
 
-import { css, html, LitElement } from 'lit'
+import base64url from 'base64url'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { startRegistration } from '@simplewebauthn/browser'
 
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { auth, getLanguages } from '@things-factory/auth-base/dist-client'
 
+const isAvailableWebauthn = 'PublicKeyCredential' in window
 @customElement('profile-component')
 export class ProfileComponent extends localize(i18next)(LitElement) {
   static styles = [
     css`
       :host {
         display: block;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: 15px 0;
       }
       .wrap {
@@ -36,12 +39,12 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       }
 
       input {
-        margin: var(--change-password-field-margin);
-        border: var(--input-field-border);
-        padding: var(--input-padding);
+        margin: var(--spacing-small) 0;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        padding: 9px;
         border-radius: var(--border-radius);
-        font: var(--input-font);
-        width: var(--change-password-field-width);
+        font: var(--auth-input-field-font);
+        width: var(--auth-input-field-width);
       }
       input:focus {
         border: 1px solid var(--focus-background-color);
@@ -51,7 +54,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
         background: url(/assets/images/icon-profile.png) center top no-repeat;
         margin: var(--profile-icon-margin);
         padding: 180px 20px 20px 20px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font: var(--header-bar-title);
         text-align: center;
       }
@@ -67,7 +70,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
       label {
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         text-transform: capitalize;
         grid-column: 1;
       }
@@ -79,15 +82,11 @@ 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);
       }
 
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-
       footer {
         padding: 20px;
         text-align: center;
@@ -96,16 +95,18 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       footer p {
         font-size: 14px;
         margin-bottom: 5px;
+        color: var(--md-sys-color-on-background);
       }
 
       footer a {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         text-decoration: none;
         font-weight: bold;
       }
     `
   ]
 
+  @property({ type: String }) userId?: string
   @property({ type: String }) email?: string
   @property({ type: String }) name?: string
 
@@ -126,9 +127,11 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
   setCredential(credential) {
     if (credential) {
+      this.userId = credential.id
       this.name = credential.name
       this.email = credential.email
     } else {
+      this.userId = ''
       this.name = ''
       this.email = ''
     }
@@ -160,6 +163,14 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
         <change-password id="change-password"></change-password>
 
+        ${isAvailableWebauthn
+          ? html`
+              <md-text-button @click=${() => this.registerUser()}
+                >${i18next.t('button.security-key registration')}</md-text-button
+              >
+            `
+          : nothing}
+
         <footer>
           <p>
             ${i18next.t('text.click login history')}
@@ -233,4 +244,49 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       title: i18next.t('label.delete account')
     })
   }
+
+  async registerUser() {
+    try {
+      const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())
+      const attResp = await startRegistration(options)
+      const verification = await fetch('/auth/verify-registration', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(attResp)
+      }).then(res => res.json())
+
+      if (verification.verified) {
+        notify({
+          level: 'info',
+          message: i18next.t('text.user credential registered successfully')
+        })
+      } else {
+        console.error(await verification.text())
+
+        notify({
+          level: 'error',
+          message: i18next.t('error.user credential registeration not allowed')
+        })
+      }
+    } catch (error) {
+      notify({
+        level: 'error',
+        message: i18next.t('error.user credential registeration failed')
+      })
+    }
+  }
+
+  get applicationMeta() {
+    var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
+    var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
+    var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')
+
+    return {
+      icon: iconLink?.href || '',
+      title: titleMeta?.content || 'Things Factory',
+      description: descriptionMeta?.content || 'Reimagining Software'
+    }
+  }
 }

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

@@ -17,10 +17,10 @@ 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-dark-color);
+      border: var(--border-dim-color);
       border-radius: var(--border-radius);
       margin: var(--input-margin);
       padding: var(--input-padding);
@@ -31,7 +31,7 @@ class RoleEditForm extends localize(i18next)(LitElement) {
       display: flex;
       flex-direction: column;
       font: var(--label-font);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-on-primary);
       text-transform: var(--label-text-transform);
     }
     @media screen and (max-width: 480px) {

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

@@ -5,30 +5,32 @@ import { customElement, property } from 'lit/decorators.js'
 import { client, gqlContext } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('role-privilege-editor')
 class RolePrivilegeEditor extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--md-sys-color-primary);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       div {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
       ul {
         flex: 1;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
         overflow: auto;
         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;
@@ -39,32 +41,23 @@ 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;
       }
 
-      [buttons] {
-        margin: 0;
-        padding: 5px;
-        background-color: rgba(var(--primary-color-rgb), 0.2);
-      }
-
-      mwc-button {
+      md-elevated-button {
         margin: 5px;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      [outlined] {
-        background-color: var(--theme-white-color);
+      md-outlined-button {
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       @media screen and (max-width: 480px) {
@@ -106,14 +99,11 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         )}
       </ul>
 
-      <div buttons>
-        <mwc-button @click=${e => this.onSave()} outlined label=${String(i18next.t('button.save'))}></mwc-button>
-        <mwc-button
-          @click=${e => this.onDeleteRole()}
-          raised
-          danger
-          label=${String(i18next.t('button.delete role'))}
-        ></mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click=${e => this.onSave()}>${String(i18next.t('button.save'))}</md-elevated-button>
+        <md-elevated-button @click=${e => this.onDeleteRole()} danger
+          >${String(i18next.t('button.delete role'))}</md-elevated-button
+        >
       </div>
     `
   }

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);
+        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

@@ -1,3 +1,6 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+
 import './ownership-transfer-popup'
 import './role-selector'
 
@@ -11,20 +14,22 @@ import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 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) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--md-sys-color-primary);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       ul {
         flex: 1;
@@ -34,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;
@@ -42,19 +47,19 @@ class UserRoleEditor extends connect(store)(LitElement) {
       input[readonly] {
         border: none;
         background-color: transparent;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font: var(--input-font);
       }
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
       [detail] {
-        background-color: rgba(var(--primary-color-rgb), 0.05);
+        background-color: var(--md-sys-color-surface);
       }
-      [detail] mwc-icon {
+      [detail] md-icon {
+        --md-icon-size: var(--fontsize-default);
         vertical-align: middle;
-        --mdc-icon-size: var(--fontsize-default);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [detail] li {
         display: flex;
@@ -63,21 +68,12 @@ class UserRoleEditor extends connect(store)(LitElement) {
         flex: 1;
       }
 
-      [buttons] {
-        margin: 0;
-        padding: 5px;
-        background-color: rgba(var(--primary-color-rgb), 0.2);
-      }
-
-      mwc-button {
+      md-elevated-button {
         margin: 5px;
       }
 
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      [outlined] {
-        background-color: var(--theme-white-color);
+      md-outlined-button {
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       @media screen and (max-width: 480px) {
@@ -117,7 +113,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
                 ? html`
                     <li>
                       <span>
-                        <mwc-icon>email</mwc-icon>
+                        <md-icon>email</md-icon>
                         ${user.email}
                       </span>
                     </li>
@@ -141,10 +137,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
           `
         : ''}
 
-      <div buttons>
+      <div class="button-container">
         ${this.isRoleEditable()
-          ? html` <mwc-button
-              raised
+          ? html` <md-elevated-button
               @click=${() => {
                 const { availableRoles, selectedRoles } = Array.from(
                   this.renderRoot.querySelectorAll('role-selector') as NodeListOf<RoleSelector>
@@ -169,46 +164,41 @@ class UserRoleEditor extends connect(store)(LitElement) {
                 )
                 this.onSave(user, availableRoles, selectedRoles)
               }}
-              label=${String(i18next.t('button.save'))}
-            ></mwc-button>`
+              >${String(i18next.t('button.save'))}</md-elevated-button
+            >`
           : ''}
         ${user.userType === 'user'
           ? html`
               ${this.isTransferable(user)
                 ? html`
-                    <mwc-button
-                      raised
-                      danger
-                      @click=${() => this.onTransfer(user)}
-                      label=${String(i18next.t('button.transfer owner'))}
-                    ></mwc-button>
+                    <md-elevated-button danger @click=${() => this.onTransfer(user)}
+                      >${String(i18next.t('button.transfer owner'))}</md-elevated-button
+                    >
                   `
                 : ''}
               ${this.isPasswordResettable(user)
-                ? html`<mwc-button
-                    raised
-                    danger
-                    @click="${() => this.onResetPassword(user)}"
-                    label=${String(i18next.t('title.reset password'))}
-                  ></mwc-button>`
+                ? html`<md-elevated-button danger @click=${() => this.onResetPassword(user)}
+                    >${String(i18next.t('title.reset password'))}</md-elevated-button
+                  >`
                 : ''}
             `
           : ''}
         ${this.isRemovable(user)
           ? html`
-              <mwc-button
-                raised
-                danger
-                label=${String(i18next.t('button.delete user'))}
-                @click=${() => this.onDelete(user)}
-              ></mwc-button>
+              <md-elevated-button danger @click=${() => this.onDelete(user)}
+                >${String(i18next.t('button.delete user'))}</md-elevated-button
+              >
             `
           : ''}
         ${this.isActivatable(user)
-          ? html`<mwc-button raised danger @click="${() => this.onActivate(user)}" label="activate"></mwc-button>`
+          ? html`<md-elevated-button danger @click=${() => this.onActivate(user)}
+              >${String(i18next.t('button.activate'))}</md-elevated-button
+            >`
           : ''}
         ${this.isInactivatable(user)
-          ? html`<mwc-button raised danger @click="${() => this.onInactivate(user)}" label="inactivate"></mwc-button>`
+          ? html`<md-elevated-button danger @click=${() => this.onInactivate(user)}
+              >${String(i18next.t('button.deactivate'))}</md-elevated-button
+            >`
           : ''}
       </div>
     `
@@ -286,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 {
@@ -311,6 +301,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
           }
         }
       `,
+      variables: {
+        inherited: InheritedValueType.Include
+      },
       context: gqlContext()
     })
 

package/client/entries/auth/activate.ts

@@ -1,4 +1,6 @@
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+
 import '@operato/i18n/ox-i18n.js'
 import '@operato/layout/ox-snack-bar.js'
 import '@operato/lottie-player'
@@ -18,7 +20,8 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background);
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
 
       .wrap {
@@ -36,7 +39,7 @@ export class AuthActivate extends localize(i18next)(LitElement) {
       .auth-brand img {
         margin: 15% auto 5px auto;
         width: 100px;
-        border: 3px solid var(--theme-white-color);
+        border: 3px solid var(--md-sys-color-on-primary);
         border-radius: 25px;
         box-shadow: var(--box-shadow);
       }
@@ -51,14 +54,14 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         margin: 50px 0 0 0;
         padding: 0;
         font-size: 24px;
-        color: var(--auth-title-color);
+        color: var(--auth-title-color, var(--md-sys-color-on-primary));
       }
 
       p {
         margin: 0;
         padding: var(--auth-description-padding);
         font: var(--auth-description-font);
-        color: var(--auth-description-color);
+        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
       }
 
       #button-area {
@@ -66,11 +69,9 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         padding-top: 10px;
       }
 
-      mwc-button {
-        --mdc-theme-primary: var(--auth-button-background-color);
-        --mdc-theme-on-primary: var(--primary-color);
-        --mdc-button-horizontal-padding: var(--padding-default);
-        --mdc-button-ink-color: var(--primary-color);
+      md-elevated-button {
+        --md-elevated-button-horizontal-padding: var(--spacing-medium);
+        --md-elevated-button-ink-color: var(--md-sys-color-primary);
       }
 
       contact-us {
@@ -162,20 +163,18 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         </form>
 
         <div id="button-area">
-          <mwc-button
-            raised
-            icon="mail_outline"
-            label=${i18next.t('label.send activation email')}
-            @click=${e => this.requestResend(e)}
-          ></mwc-button>
-          <mwc-button
-            raised
-            icon="home"
-            label=${i18next.t('button.go to home')}
+          <md-elevated-button @click=${e => this.requestResend(e)}>
+            <md-icon slot="icon">mail_outline</md-icon>
+            ${i18next.t('label.send activation email')}
+          </md-elevated-button>
+          <md-elevated-button
             @click=${e => {
               window.location.replace('/auth/signin')
             }}
-          ></mwc-button>
+          >
+            <md-icon slot="icon">home</md-icon>
+            ${i18next.t('button.go to home')}
+          </md-elevated-button>
         </div>
         <contact-us></contact-us>