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

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

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -7,49 +7,53 @@ import { customElement, query } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('create-domain-popup')
 class CreateDomainPopup extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :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;
       }
+
       input.checkValidName {
         background-color: #fce6e6;
       }
-      mwc-button {
+
+      md-elevated-button {
         display: flex;
         justify-content: center;
       }
+
       label {
         display: flex;
         flex-direction: column;
 
         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);
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         font: var(--input-font);
 
         flex: 1;
       }
+
       [field] {
         grid-column: span 2;
       }
-      [buttons] {
-        margin-top: auto;
-      }
     `
   ]
 
@@ -71,8 +75,8 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         <label>${i18next.t('label.description')}<input type="text" name="description" /></label>
       </div>
 
-      <div buttons>
-        <mwc-button raised @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</md-elevated-button>
       </div>
     `
   }

package/client/components/create-role.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-textfield'
+import '@material/web/textfield/filled-text-field.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -12,10 +12,10 @@ import { OxPrompt } from '@operato/popup/ox-prompt.js'
 class CreateRole extends localize(i18next)(LitElement) {
   static styles = css`
     :host {
-      --mdc-text-field-fill-color: var(--theme-white-color);
-      background-color: var(--theme-white-color);
-      margin: var(--margin-wide) 0;
-      padding: var(--padding-wide);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 
@@ -28,7 +28,7 @@ class CreateRole extends localize(i18next)(LitElement) {
       align-items: center;
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
 
@@ -37,7 +37,7 @@ class CreateRole extends localize(i18next)(LitElement) {
         grid-template-columns: 1fr 1fr;
       }
 
-      mwc-button {
+      md-outlined-button {
         grid-column: span 2;
 
         margin: var(--input-margin);
@@ -50,22 +50,20 @@ class CreateRole extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <mwc-textfield
+      <md-filled-text-field
         type="text"
         name="name"
         label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
-      ></mwc-textfield>
-      <mwc-textfield
+      ></md-filled-text-field>
+      <md-filled-text-field
         type="text"
         name="description"
         label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
-      ></mwc-textfield>
+      ></md-filled-text-field>
 
-      <mwc-button
-        @click=${this.onCreateRole.bind(this)}
-        outlined
-        label=${String(i18next.t('button.create'))}
-      ></mwc-button>
+      <md-outlined-button @click=${this.onCreateRole.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
     `
   }
 

package/client/components/create-user.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/outlined-button.js'
+import '@material/web/textfield/filled-text-field.js'
+
 import { css, html, LitElement } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
@@ -7,10 +10,10 @@ import { i18next } from '@operato/i18n'
 class CreateUser extends LitElement {
   static styles = css`
     :host {
-      --mdc-text-field-fill-color: var(--theme-white-color);
-      background-color: var(--theme-white-color);
-      margin: var(--margin-wide) 0;
-      padding: var(--padding-wide);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 
@@ -23,7 +26,7 @@ class CreateUser extends LitElement {
       align-items: center;
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
 
@@ -32,7 +35,7 @@ class CreateUser extends LitElement {
         grid-template-columns: 1fr 1fr;
       }
 
-      mwc-button {
+      md-outlined-button {
         grid-column: span 2;
 
         margin: var(--input-margin);
@@ -45,19 +48,17 @@ class CreateUser extends LitElement {
 
   render() {
     return html`
-      <mwc-textfield
+      <md-filled-text-field
         type="text"
         name="name"
         label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-      ></mwc-textfield>
+      ></md-filled-text-field>
 
-      <mwc-textfield type="email" name="email" label=${String(i18next.t('field.email'))}></mwc-textfield>
+      <md-filled-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-filled-text-field>
 
-      <mwc-button
-        @click=${this.onCreateUser.bind(this)}
-        outlined
-        label=${String(i18next.t('button.create'))}
-      ></mwc-button>
+      <md-outlined-button @click=${this.onCreateUser.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
     `
   }
 

package/client/components/credential-manager.ts

@@ -0,0 +1,64 @@
+import gql from 'graphql-tag'
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+
+@customElement('credential-manager')
+export class CredentialManager extends LitElement {
+  @property({ type: Array }) credentials: {
+    credentialId: string
+  }[] = []
+
+  static styles = css`
+    div {
+      margin: 20px;
+    }
+    button {
+      margin: 5px;
+    }
+  `
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.fetchCredentials()
+  }
+
+  async fetchCredentials() {
+    const response = await fetch('/auth/credentials', {
+      method: 'GET',
+      credentials: 'include'
+    })
+    this.credentials = await response.json()
+  }
+
+  async deleteCredential(credentialId: string) {
+    const response = await fetch(`/credentials/${credentialId}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+    if (response.ok) {
+      this.fetchCredentials()
+    } else {
+      console.error('Failed to delete credential')
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <h2>Manage Your WebAuthn Credentials</h2>
+        <ul>
+          ${this.credentials.map(
+            credential => html`
+              <li>
+                ${credential.credentialId}
+                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>
+              </li>
+            `
+          )}
+        </ul>
+      </div>
+    `
+  }
+}

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) {
@@ -14,6 +14,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
+        color: var(--popup-content-color);
         background-color: var(--popup-content-background-color);
         padding: var(--popup-content-padding);
       }
@@ -27,7 +28,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
 
       label {
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
 
       input {
@@ -52,7 +53,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
       }
 
       button {
-        background-color: var(--status-danger-color, red);
+        background-color: var(--status-danger-color, #d14946);
         margin: 2px 2px 10px 2px;
         height: var(--button-height, 28px);
         color: var(--button-color, #fff);

package/client/components/domain-switch.ts

@@ -1,4 +1,6 @@
-import { css, html, LitElement } from 'lit'
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
@@ -13,8 +15,8 @@ export class DomainSwitch extends connect(store)(LitElement) {
       :host {
         display: flex;
         max-width: 100%;
-        background-color: rgba(var(--primary-color-rgb), 0.1);
-        border-bottom: var(--border-dark-color);
+        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
+        border-bottom: var(--border-dim-color);
       }
 
       :host * {
@@ -25,21 +27,21 @@ export class DomainSwitch extends connect(store)(LitElement) {
         flex: 1;
         display: flex;
         flex-direction: row;
-        padding: var(--padding-default);
+        padding: var(--spacing-small);
       }
 
-      mwc-icon {
-        background-color: rgba(var(--primary-color-rgb), 0.8);
-        margin-right: var(--margin-narrow);
+      md-icon {
+        background-color: var(--md-sys-color-primary, rgb(46 121 190));
+        margin-right: var(--spacing-small);
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));
       }
       span,
       select {
         flex: 1;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
         font: bold 14px/20px var(--theme-font);
       }
 
@@ -56,7 +58,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         padding: 0 !important;
         border-bottom: none;
       }
-      :host([dark]) mwc-icon {
+      :host([dark]) md-icon {
         background-color: var(--secondary-text-color);
         margin: 1px 4px 0px 0px;
         padding: 1px 2px;
@@ -65,12 +67,12 @@ export class DomainSwitch extends connect(store)(LitElement) {
       }
       :host([dark]) span,
       :host([dark]) select {
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
         font: bold 13px/13px var(--theme-font);
       }
       :host([dark]) option {
         background-color: var(--primary-color, #585858);
-        color: var(--theme-white-color, #fff);
+        color: var(--md-sys-color-on-primary, #fff);
       }
       :host([dark]) span {
         line-height: 23px;
@@ -79,10 +81,10 @@ export class DomainSwitch extends connect(store)(LitElement) {
       :host([rounded-corner]) {
         height: 30px;
         border-radius: 20px;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
       }
       :host([rounded-corner]) div {
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
       }
     `
   ]
@@ -90,6 +92,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
   @property({ type: Array }) domains: any[] = []
   @property({ type: Object }) domain: any
   @property({ type: String, attribute: true }) attrname: string = 'name'
+  @property({ type: String, attribute: true }) icon?: string
 
   render() {
     const domains = this.domains || []
@@ -98,7 +101,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
 
     return html`
       <div>
-        <mwc-icon>outlined_flag</mwc-icon>
+        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}
         ${domains.length <= 1
           ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `
           : html`

package/client/components/invite-customer.ts

@@ -1,5 +1,3 @@
-import '@things-factory/auth-ui'
-
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -13,14 +11,14 @@ class InviteCustomer extends localize(i18next)(LitElement) {
   static styles = [
     css`
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
         min-width: 250px;
         font: var(--input-font);
       }
-      mwc-button {
+      md-outlined-button {
         margin: var(--input-margin);
       }
       @media screen and (max-width: 480px) {
@@ -39,12 +37,10 @@ class InviteCustomer extends localize(i18next)(LitElement) {
     return html`
       <div>
         <input id="customer-name" required />
-        <mwc-button
-          @click=${this.invite.bind(this)}
-          outlined
-          icon="group_add"
-          label=${String(i18next.t('label.invite customer'))}
-        ></mwc-button>
+        <md-outlined-button @click=${this.invite.bind(this)}>
+          <md-icon slot="icon">group_add</md-icon>
+          ${String(i18next.t('label.invite customer'))}
+        </md-outlined-button>
       </div>
     `
   }

package/client/components/invite-user.ts

@@ -18,7 +18,7 @@ class InviteUser extends localize(i18next)(LitElement) {
     input {
       flex: 1;
 
-      border: var(--border-dark-color);
+      border: var(--border-dim-color);
       border-radius: var(--border-radius);
       margin: var(--input-margin);
       padding: var(--input-padding);
@@ -26,7 +26,7 @@ class InviteUser extends localize(i18next)(LitElement) {
       font: var(--input-font);
     }
 
-    mwc-button {
+    md-outlined-button {
       margin: var(--input-margin);
     }
   `
@@ -36,12 +36,9 @@ class InviteUser extends localize(i18next)(LitElement) {
   render() {
     return html`
       <input name="email" type="email" required name="invite-email" autocapitalize="off" />
-      <mwc-button
-        @click=${this.invite.bind(this)}
-        outlined
-        icon="group_add"
-        label=${String(i18next.t('label.invite user'))}
-      ></mwc-button>
+      <md-outlined-button @click=${this.invite.bind(this)}>
+        <md-icon slot="icon">group_add</md-icon>${String(i18next.t('label.invite user'))}
+      </md-outlined-button>
     `
   }
 

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

@@ -14,8 +14,8 @@ class MyLoginHistory extends LitElement {
     :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;
     }
     ox-grist {

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

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -15,8 +15,8 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
       :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;
       }
       .container {
@@ -25,7 +25,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         flex: 1;
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -36,8 +36,8 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         margin: auto;
         display: flex;
       }
-      .input-container mwc-button {
-        margin: auto 0px auto var(--padding-wide);
+      .input-container md-elevated-button {
+        margin: auto 0px auto var(--spacing-large);
       }
     `
   ]
@@ -52,7 +52,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>
         <div class="input-container">
           <input name="email" />
-          <mwc-button raised @click=${this.transferOwnership}>${i18next.t('button.confirm')}</mwc-button>
+          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>
         </div>
       </div>
     `

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

@@ -8,7 +8,7 @@ export class PartnerInfoCard extends LitElement {
   static styles = [
     css`
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -21,7 +21,7 @@ export class PartnerInfoCard extends LitElement {
         display: flex;
         max-height: 45vh;
         flex-direction: row;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
         margin: 0;
         padding: 0;
         border-radius: var(--border-radius);
@@ -31,8 +31,8 @@ export class PartnerInfoCard extends LitElement {
       [field-2column] {
         overflow: auto;
         flex: 1;
-        background-color: var(--theme-white-color);
-        padding: var(--padding-default);
+        background-color: var(--md-sys-color-surface-variant);
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -43,14 +43,14 @@ export class PartnerInfoCard extends LitElement {
       [field] {
         display: flex;
         flex-direction: column;
-        padding-bottom: var(--padding-default);
+        padding-bottom: var(--spacing-medium);
       }
       label {
         display: flex;
         flex-direction: column;
 
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       @media screen and (max-width: 480px) {

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

@@ -1,5 +1,5 @@
-import '@material/mwc-icon'
-import '@things-factory/auth-ui'
+import '@material/web/button/elevated-button.js'
+import './role-selector.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -8,32 +8,27 @@ import { customElement, property, query } 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'
 
 import { RoleSelector } from './role-selector'
 
 @customElement('partner-role-editor')
 class PartnerRoleEditor extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
-        padding: var(--padding-default);
+        border: 1px solid var(--md-sys-color-primary);
+        padding: var(--spacing-medium);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
-      [buttons] {
-        margin: 0;
-        padding: var(--padding-default);
-        background-color: rgba(var(--primary-color-rgb), 0.2);
-      }
-      mwc-button {
-        margin-right: var(--padding-narrow);
-      }
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+
+      md-elevated-button {
+        margin-right: var(--spacing-small);
       }
     `
   ]
@@ -51,14 +46,11 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
     return html`
       <role-selector .roles="${roles}" .userRoles="${grantingRoles}"></role-selector>
 
-      <div buttons>
-        <mwc-button @click=${this.onSave} raised label="${i18next.t('button.save')}"></mwc-button>
-        <mwc-button
-          @click=${this.onTerminateContract}
-          raised
-          danger
-          label="${i18next.t('button.terminate contract')}"
-        ></mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click=${this.onSave}>${i18next.t('button.save')}</md-elevated-button>
+        <md-elevated-button @click=${this.onTerminateContract} danger
+          >${i18next.t('button.terminate contract')}</md-elevated-button
+        >
       </div>
     `
   }