@things-factory/auth-ui 8.0.5 → 8.0.13

package/client/bootstrap.ts

@@ -7,12 +7,16 @@ import { html } from 'lit-html'
 import { navigate, store } from '@operato/shell'
 import { TOOL_POSITION } from '@operato/layout'
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
-import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
+import {
+  registerEditor as registerGristEditor,
+  registerRenderer as registerGristRenderer,
+  OxGristRendererJson5
+} from '@operato/data-grist'
 
 import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 import { ADD_MORENDA } from '@things-factory/more-base/client'
 
-export default function bootstrap() {
+export default async function bootstrap() {
   registerGristEditor('privilege', OxGristEditorPrivilege)
   registerGristRenderer('privilege', OxGristRendererJson5)
 
@@ -47,5 +51,5 @@ export default function bootstrap() {
     As soon as response received, auth.on('profile', ...) handlers start to work.
     It's very important point to build UI for the user.
   */
-  auth.profile()
+  await auth.profile()
 }

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,7 +102,8 @@ 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)}>
@@ -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/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-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

@@ -32,11 +32,19 @@ class InviteUser extends localize(i18next)(LitElement) {
     }
   `
 
-  @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>
@@ -45,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 (
@@ -57,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'))
       }
@@ -73,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()
     })
 
@@ -90,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

@@ -111,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
 
@@ -128,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> {
@@ -167,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 = ''
     }
@@ -180,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"
@@ -223,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
 
@@ -247,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/user-role-editor.ts

@@ -113,8 +113,8 @@ class UserRoleEditor extends connect(store)(LitElement) {
                 ? html`
                     <li>
                       <span>
-                        <md-icon>email</md-icon>
-                        ${user.email}
+                        ${user.username || user.email} (<md-icon>email</md-icon>
+                        ${user.email})
                       </span>
                     </li>
                   `
@@ -330,8 +330,8 @@ class UserRoleEditor extends connect(store)(LitElement) {
     if (user?.id) {
       const response = await client.mutate({
         mutation: gql`
-          mutation ($userId: String!, $availableRoles: [ObjectRef!]!, $selectedRoles: [ObjectRef!]!) {
-            updateUserRoles(userId: $userId, availableRoles: $availableRoles, selectedRoles: $selectedRoles) {
+          mutation ($username: String!, $availableRoles: [ObjectRef!]!, $selectedRoles: [ObjectRef!]!) {
+            updateUserRoles(username: $username, availableRoles: $availableRoles, selectedRoles: $selectedRoles) {
               id
               name
               roles {
@@ -341,7 +341,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
             }
           }
         `,
-        variables: { userId: user.id, availableRoles, selectedRoles },
+        variables: { username: user.username || user.email, availableRoles, selectedRoles },
         context: gqlContext()
       })
 
@@ -355,11 +355,11 @@ class UserRoleEditor extends connect(store)(LitElement) {
   async onActivate(user) {
     const response = await client.mutate({
       mutation: gql`
-        mutation activateUser($userId: String!) {
-          activateUser(userId: $userId)
+        mutation activateUser($username: String!) {
+          activateUser(username: $username)
         }
       `,
-      variables: { userId: user.id },
+      variables: { username: user.username || user.email },
       context: gqlContext()
     })
 
@@ -373,16 +373,16 @@ class UserRoleEditor extends connect(store)(LitElement) {
   async onInactivate(user) {
     const response = await client.mutate({
       mutation: gql`
-        mutation inactivateUser($userId: String!) {
-          inactivateUser(userId: $userId)
+        mutation inactivateUser($username: String!) {
+          inactivateUser(username: $username)
         }
       `,
-      variables: { userId: user.id },
+      variables: { username: user.username || user.email },
       context: gqlContext()
     })
 
     if (!response.errors) {
-      this.showToast(i18next.t('text.user activated successfully'))
+      this.showToast(i18next.t('text.user inactivated successfully'))
 
       this.dispatchUserUpdated()
     }
@@ -414,11 +414,11 @@ class UserRoleEditor extends connect(store)(LitElement) {
     ) {
       const response = await client.mutate({
         mutation: gql`
-          mutation deleteDomaineUser($email: EmailAddress!) {
-            deleteDomainUser(email: $email)
+          mutation deleteDomaineUser($username: String!) {
+            deleteDomainUser(username: $username)
           }
         `,
-        variables: { email: user.email },
+        variables: { username: user.username || user.email },
         context: gqlContext()
       })
 
@@ -460,11 +460,11 @@ class UserRoleEditor extends connect(store)(LitElement) {
     ) {
       const response = await client.mutate({
         mutation: gql`
-          mutation resetPasswordToDefault($userId: String!) {
-            resetPasswordToDefault(userId: $userId)
+          mutation resetPasswordToDefault($username: String!) {
+            resetPasswordToDefault(username: $username)
           }
         `,
-        variables: { userId: user.id },
+        variables: { username: user.username || user.email },
         context: gqlContext()
       })