@things-factory/auth-ui 8.0.0-alpha.8 → 8.0.0-beta.1

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

@@ -176,22 +176,22 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
   }
 
   get formfields() {
-    const email = this.data?.email || ''
-    // .validationMessage=${String(i18next.t('text.invalid-email'))}
+    const username = this.data?.username || ''
+    // .validationMessage=${String(i18next.t('text.invalid-username'))}
 
     return html`
       <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
 
       <div class="field">
         <md-filled-text-field
-          name="email"
-          type="email"
-          label=${String(i18next.t('field.email'))}
+          name="username"
+          type="text"
+          label=${String(i18next.t('field.user-id or email'))}
           required
-          .value=${email}
+          .value=${username}
           autocomplete="off"
           autocapitalize="off"
-          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+          ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
         >
       </div>
       <div class="field">
@@ -201,11 +201,11 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
           label=${String(i18next.t('field.password'))}
           autocomplete="off"
           required
-          ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
+          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
         >
       </div>
 
-      <md-elevated-button class="ui" type="submit" raised @click=${e => this._onSubmit(e)}>
+      <md-elevated-button class="ui" type="button" raised @click=${e => this._onSubmit(e)}>
         <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
       </md-elevated-button>
     `
@@ -235,7 +235,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
         sso => html`
           <a class="link" href=${sso.link}>
             <md-text-button>
-              <md-icon slot="icon">badge</md-icon>
+              <md-icon slot="icon">id_card</md-icon>
               ${i18next.t('label.signin with', { title: sso.title })}
             </md-text-button>
           </a>

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

@@ -2,17 +2,16 @@ import '@material/web/icon/icon.js'
 import '@material/web/button/elevated-button.js'
 import '@material/web/textfield/filled-text-field.js'
 
-import '@operato/lottie-player'
-import '../components/profile-component'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/i18n/ox-i18n-selector.js'
 import '@operato/layout/ox-snack-bar.js'
 
+import '../components/profile-component'
+
 import { css, html, nothing } from 'lit'
 import { property, query } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
-import { isSafari } from '@operato/utils'
 
 import { AUTH_STYLE_SIGN } from '../auth-style-sign'
 import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'
@@ -91,7 +90,8 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                   this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
                 }}
                 required
-              ></md-filled-text-field>
+                ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
+              >
             </div>
 
             <div class="field">
@@ -102,10 +102,11 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
                 label=${String(i18next.t('field.confirm password'))}
                 autocomplete="off"
                 required
-              ></md-filled-text-field>
+                ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
+              >
             </div>
 
-            <md-elevated-button id="submit-button" type="submit" @click=${e => this._onSubmit(e)}>
+            <md-elevated-button id="submit-button" type="button" @click=${e => this._onSubmit(e)}>
               <ox-i18n msgid="${this.submitButtonLabel}"></ox-i18n>
             </md-elevated-button>
 
@@ -128,20 +129,14 @@ export abstract class AbstractPasswordReset extends AbstractAuthPage {
           </form>
         </div>
       </div>
-      <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
 
-      ${isSafari()
-        ? html``
-        : html`
-            <div class="lottie-container">
-              <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
-            </div>
-          `}
+      <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
     `
   }
 
   updated(changed) {
     super.updated(changed)
+
     if (changed.has('data')) {
       this.token = this.data.token
     }

package/client/components/abstract-sign.ts

@@ -44,7 +44,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
   }
 
   get formfields() {
-    const email = this.data?.email || ''
+    const username = this.data?.username || ''
     const autocompletable = this.autocompletable
 
     return html`
@@ -52,22 +52,23 @@ export abstract class AbstractSign extends AbstractAuthPage {
 
       <div class="field">
         <md-filled-text-field
-          name="email"
-          type="email"
-          label=${String(i18next.t('field.email'))}
+          name="username"
+          type="text"
+          label=${String(i18next.t('field.user-id or email'))}
           required
-          .value=${email}
-          autocomplete=${autocompletable ? "username" : "off"}
+          .value=${username}
+          autocomplete=${autocompletable ? 'username' : 'off'}
           autocapitalize="off"
+          pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
           @input=${(e: Event) => {
             const target = e.target as HTMLInputElement
             if (target.validity.typeMismatch) {
-              target.setCustomValidity(i18next.t('text.invalid-email'))
+              target.setCustomValidity(i18next.t('text.invalid-username'))
             } else {
               target.setCustomValidity('')
             }
           }}
-          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+          ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
         >
       </div>
       <div class="field">
@@ -75,14 +76,14 @@ export abstract class AbstractSign extends AbstractAuthPage {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete=${autocompletable ? "current-password" : "off"}
+          autocomplete=${autocompletable ? 'current-password' : 'off'}
           required
-          ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
+          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
         >
       </div>
 
       <div class="submit-buttons-container">
-        <md-elevated-button class="submit-button" type="submit" raised @click=${e => this._onSubmit(e)}>
+        <md-elevated-button class="submit-button" type="button" raised @click=${e => this._onSubmit(e)}>
           <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
         </md-elevated-button>
         ${isAvailableWebauthn
@@ -106,7 +107,7 @@ export abstract class AbstractSign extends AbstractAuthPage {
 
       if (verification.verified) {
         const { redirectURL } = verification
-  
+
         if (redirectURL) {
           window.location.href = redirectURL
         }
@@ -116,7 +117,6 @@ export abstract class AbstractSign extends AbstractAuthPage {
           message: verification.message
         })
       }
-  
     } catch (error) {
       notify({
         level: 'error',

package/client/components/change-password.ts

@@ -43,6 +43,7 @@ export class ChangePassword extends localize(i18next)(LitElement) {
 
       md-elevated-button {
         margin: var(--spacing-small) auto var(--spacing-medium) auto;
+        text-transform: capitalize;
       }
 
       button {

package/client/components/contact-us.ts

@@ -33,22 +33,23 @@ export class ContactUs extends localize(i18next)(LitElement) {
     ]
   }
 
-  @query('#dialog') dialog!: HTMLElement & { open: boolean }
+  @query('#dialog') dialog!: HTMLElement & { show: () => void }
   @query('#subject-input') subjectInput!: HTMLInputElement
   @query('#sender-input') senderInput!: HTMLInputElement
   @query('#content-input') contentInput!: HTMLInputElement
 
   render() {
     return html`
-      <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>
+      <md-elevated-button @click=${e => this.dialog.show()}>${i18next.t('button.need help')}</md-elevated-button>
 
       <md-dialog id="dialog" heading=${i18next.t('title.need help')}>
-        <form action="" method="POST">
+        <form action="" method="post">
           <input id="subject-input" name="subject" type="hidden" />
           <input id="sender-input" name="sender" type="hidden" />
           <input id="content-input" name="content" type="hidden" />
         </form>
-        <div id="input-form">
+
+        <div id="input-form" slot="content">
           <md-filled-text-field
             type="text"
             label=${i18next.t('label.subject')}
@@ -59,6 +60,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
               this.subjectInput.value = val
             }}
           ></md-filled-text-field>
+
           <md-filled-text-field
             type="text"
             name="sender"
@@ -69,6 +71,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
               this.senderInput.value = val
             }}
           ></md-filled-text-field>
+
           <md-filled-text-field
             name="content"
             type="textarea"
@@ -80,11 +83,11 @@ export class ContactUs extends localize(i18next)(LitElement) {
               this.contentInput.value = val
             }}
           ></md-filled-text-field>
+
+          <md-elevated-button slot="primaryAction" type="button" @click=${e => this._submit(e)}
+            >${i18next.t('button.submit')}</md-elevated-button
+          >
         </div>
-        <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}
-          >${i18next.t('button.submit')}</md-elevated-button
-        >
-        <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
       </md-dialog>
     `
   }

package/client/components/create-role.ts

@@ -30,6 +30,7 @@ class CreateRole extends localize(i18next)(LitElement) {
 
     md-outlined-button {
       margin: var(--input-margin);
+      text-transform: capitalize;
     }
 
     @media screen and (max-width: 480px) {

package/client/components/create-user.ts

@@ -6,6 +6,10 @@ import { customElement, query } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 
+function capitalize(str) {
+  return str ? str.charAt(0).toUpperCase() + str.slice(1) : ''
+}
+
 @customElement('create-user')
 class CreateUser extends LitElement {
   static styles = css`
@@ -18,7 +22,7 @@ class CreateUser extends LitElement {
       box-shadow: var(--box-shadow);
 
       display: grid;
-      grid-template-columns: 1fr 2fr auto;
+      grid-template-columns: 1fr 2fr 2fr auto;
       gap: 5px 15px;
       clear: both;
       max-width: var(--input-container-max-width);
@@ -44,26 +48,42 @@ class CreateUser extends LitElement {
   `
 
   @query('[name=name]') nameInput!: HTMLInputElement
+  @query('[name=username]') usernameInput!: HTMLInputElement
   @query('[name=email]') emailInput!: HTMLInputElement
 
   render() {
     return html`
+      <md-filled-text-field
+        type="text"
+        name="username"
+        label=${capitalize(i18next.t('label.user-id'))}
+        pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
+        ><md-icon slot="leading-icon">badge</md-icon></md-filled-text-field
+      >
+
       <md-filled-text-field
         type="text"
         name="name"
-        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-      ></md-filled-text-field>
+        label=${capitalize(i18next.t('label.x name', { x: i18next.t('label.user') }))}
+        ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
+      >
 
-      <md-filled-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-filled-text-field>
+      <md-filled-text-field type="email" name="email" label=${capitalize(i18next.t('field.email'))}
+        ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+      >
 
       <md-outlined-button @click=${this.onCreateUser.bind(this)}
-        >${String(i18next.t('button.create'))}</md-outlined-button
+        >${capitalize(i18next.t('button.create'))}</md-outlined-button
       >
     `
   }
 
   async onCreateUser() {
     try {
+      if (!this.usernameInput.value) {
+        throw new Error(i18next.t('error.value is empty', { value: 'name' }))
+      }
+
       if (!this.emailInput.checkValidity()) {
         throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
       }
@@ -73,12 +93,14 @@ class CreateUser extends LitElement {
       }
 
       const user = {
+        username: this.usernameInput.value.trim(),
         name: this.nameInput.value.trim(),
         email: this.emailInput.value.trim()
       }
 
       await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))
 
+      this.usernameInput.value = ''
       this.nameInput.value = ''
       this.emailInput.value = ''
     } catch (e: any) {

package/client/components/invite-user.ts

@@ -28,14 +28,23 @@ class InviteUser extends localize(i18next)(LitElement) {
 
     md-outlined-button {
       margin: var(--input-margin);
+      text-transform: capitalize;
     }
   `
 
-  @query('input[name=email]') emailInput!: HTMLInputElement
+  @query('input[name=username]') userIdInput!: HTMLInputElement
 
   render() {
     return html`
-      <input name="email" type="email" required name="invite-email" autocapitalize="off" />
+      <input
+        name="username"
+        type="text"
+        required
+        name="username"
+        autocapitalize="off"
+        placeholder=${String(i18next.t('text.user invitation prompt'))}
+        pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
+      />
       <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>
@@ -44,8 +53,8 @@ class InviteUser extends localize(i18next)(LitElement) {
 
   async invite() {
     try {
-      if (!this.emailInput.checkValidity()) {
-        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
+      if (!this.userIdInput.checkValidity()) {
+        throw new Error(i18next.t('error.not valid pattern of type', { type: 'user-id or email' }))
       }
 
       if (
@@ -56,7 +65,7 @@ class InviteUser extends localize(i18next)(LitElement) {
           cancelButton: { text: i18next.t('button.cancel') }
         })
       ) {
-        await this.inviteUser(this.emailInput.value)
+        await this.inviteUser(this.userIdInput.value)
 
         this.dispatchEvent(new CustomEvent('invitationCompleted'))
       }
@@ -72,14 +81,14 @@ class InviteUser extends localize(i18next)(LitElement) {
     }
   }
 
-  async inviteUser(email) {
+  async inviteUser(username) {
     const response = await client.mutate({
       mutation: gql`
-        mutation inviteUser($email: EmailAddress!) {
-          inviteUser(email: $email)
+        mutation inviteUser($username: String!) {
+          inviteUser(username: $username)
         }
       `,
-      variables: { email },
+      variables: { username },
       context: gqlContext()
     })
 
@@ -89,7 +98,7 @@ class InviteUser extends localize(i18next)(LitElement) {
         confirmButton: { text: i18next.t('button.confirm') }
       })
 
-      this.emailInput.value = ''
+      this.userIdInput.value = ''
     }
   }
 }

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

@@ -75,11 +75,11 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
     ) {
       const response = await client.mutate({
         mutation: gql`
-          mutation transferOwner($email: EmailAddress!) {
-            transferOwner(email: $email)
+          mutation transferOwner($username: String!) {
+            transferOwner(username: $username)
           }
         `,
-        variables: { email: this.user.email },
+        variables: { username: this.user.username || this.user.email },
         context: gqlContext()
       })
 

package/client/components/profile-component.ts

@@ -88,6 +88,10 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
         margin: var(--change-password-field-margin);
       }
 
+      md-text-button {
+        text-transform: capitalize;
+      }
+
       footer {
         padding: 20px;
         text-align: center;
@@ -107,7 +111,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: String }) userId?: string
+  @property({ type: String }) username?: string
   @property({ type: String }) email?: string
   @property({ type: String }) name?: string
 
@@ -124,7 +128,9 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     looseCharacterLength?: number
   } = {}
 
+  @query('#username') usernameEl!: HTMLInputElement
   @query('#name') nameEl!: HTMLInputElement
+  @query('#email') emailEl!: HTMLInputElement
   @query('#locale') localeEl!: HTMLInputElement
 
   async connectedCallback(): Promise<void> {
@@ -163,11 +169,11 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
   setCredential(credential) {
     if (credential) {
-      this.userId = credential.id
+      this.username = credential.username
       this.name = credential.name
       this.email = credential.email
     } else {
-      this.userId = ''
+      this.username = ''
       this.name = ''
       this.email = ''
     }
@@ -176,13 +182,23 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
   render() {
     return html`
       <div class="wrap">
-        <div class="user">${this.email || ''}</div>
+        <div class="user">${this.username || ''}</div>
+
+        <label for="username"><ox-i18n slot="title" msgid="label.user-id"></ox-i18n></label>
+        <input id="username" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username || ''} />
+
+        <hr />
 
         <label for="name"><ox-i18n slot="title" msgid="label.name"></ox-i18n></label>
         <input id="name" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />
 
         <hr />
 
+        <label for="email"><ox-i18n slot="title" msgid="label.email"></ox-i18n></label>
+        <input id="email" type="email" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email || ''} />
+
+        <hr />
+
         <label for="locale"><ox-i18n slot="title" msgid="label.language"></ox-i18n></label>
         <ox-i18n-selector
           id="locale"
@@ -219,6 +235,30 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     `
   }
 
+  async onUsernameChanged(username) {
+    if (!username) return
+
+    var oldUsername = this.username
+
+    try {
+      const message = await auth.updateProfile({
+        username
+      })
+
+      notify({
+        level: 'info',
+        message
+      })
+    } catch (e: any) {
+      this.usernameEl.value = oldUsername || ''
+
+      notify({
+        level: 'error',
+        message: 'message' in e ? e.message : e
+      })
+    }
+  }
+
   async onNameChanged(name) {
     if (!name) return
 
@@ -243,6 +283,30 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     }
   }
 
+  async onEmailChanged(email) {
+    if (!email) return
+
+    var oldEmail = this.email
+
+    try {
+      const message = await auth.updateProfile({
+        email
+      })
+
+      notify({
+        level: 'info',
+        message
+      })
+    } catch (e: any) {
+      this.emailEl.value = oldEmail || ''
+
+      notify({
+        level: 'error',
+        message: 'message' in e ? e.message : e
+      })
+    }
+  }
+
   async onLocaleChanged(value) {
     if (!value) return
 

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

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { client, gqlContext } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -18,18 +18,32 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
 
         border: 1px solid var(--md-sys-color-primary);
         font: normal 15px var(--theme-font);
-        color: var(--md-sys-color-secondary);
       }
+
       div {
         margin: var(--spacing-medium);
       }
+
+      div[users] {
+        margin: 0;
+        background-color: var(--md-sys-color-surface-variant);
+      }
+
+      div[titler] {
+        color: var(--md-sys-color-secondary);
+        font: bold 1.2em var(--theme-font);
+        text-transform: capitalize;
+      }
+
       ul {
         flex: 1;
+        color: var(--md-sys-color-secondary);
         background-color: var(--md-sys-color-surface-variant);
         overflow: auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
-        margin: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
         padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
@@ -70,14 +84,23 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
 
   @property({ type: Object }) role: any
   @property({ type: Array }) allPrivileges: any[] = []
-  @property({ type: Array }) privileges: any[] = []
   @property({ type: Object }) updateRoleObj: any
 
+  @state() privileges: { id: string; description: string }[] = []
+  @state() users: { /* id: string; username: string; */ name: string; email: string }[] = []
+
   render() {
     const allPrivileges = this.allPrivileges || []
     const privileges = this.privileges || []
+    const users = this.users || []
 
     return html`
+      <div titler>${String(i18next.t('label.user'))}</div>
+
+      <div users>${users.map(user => html`<div>${user.name} (${user.email})</div>`)}</div>
+
+      <div titler>${String(i18next.t('field.privileges'))}</div>
+
       <div>
         <input id="checkAll" type="checkbox" @change=${e => this.oncheckAll(e)} />
         <label for="checkAll">Check all</label>
@@ -114,7 +137,7 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
 
   async updated(changes) {
     if (changes.has('role')) {
-      this.privileges = await this.fetchPrivilegesOnRole(this.role.name)
+      await this.fetchPrivilegesOnRole(this.role.name)
     }
   }
 
@@ -224,6 +247,10 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
               id
               description
             }
+            users {
+              name
+              email
+            }
           }
         }
       `,
@@ -231,7 +258,8 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
       context: gqlContext()
     })
 
-    return response.data.role?.privileges
+    this.privileges = response.data.role?.privileges
+    this.users = response.data.role?.users
   }
 
   showToast(message) {