@things-factory/auth-ui 8.0.0-alpha.29 → 8.0.0-alpha.35

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

@@ -91,7 +91,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 +103,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>
 

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'))
       }
@@ -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/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/entries/auth/forgot-password.ts

@@ -43,9 +43,18 @@ export class ForgotPassword extends AbstractAuthPage {
               target.setCustomValidity('')
             }
           }}
-        ></md-filled-text-field>
+          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+        >
       </div>
-      <md-elevated-button id="submit-button" class="ui button" type="submit" @click=${e => this._onSubmit(e)}>
+      <md-elevated-button
+        id="submit-button"
+        class="ui button"
+        type="button"
+        @click=${e => {
+          this._onSubmit(e)
+          return false
+        }}
+      >
         <ox-i18n msgid="button.submit"></ox-i18n>
       </md-elevated-button>
     `

package/client/entries/auth/signup.ts

@@ -24,7 +24,7 @@ export class AuthSignup extends AbstractSign {
   @query('#confirm-password') confirmPass!: HTMLInputElement
 
   get formfields() {
-    const { name = '', email = '' } = this.data || {}
+    const { username = '', name = '', email = '' } = this.data || {}
 
     // .validationMessage=${this.passwordHelp || ''}
     // .validationMessage=${String(i18next.t('text.passwords do not match'))}
@@ -32,12 +32,18 @@ export class AuthSignup extends AbstractSign {
     return html`
       <div class="field">
         <md-filled-text-field
-          name="name"
+          name="username"
           type="text"
-          label=${String(i18next.t('field.name'))}
-          .value=${name}
+          label=${String(i18next.t('field.username'))}
+          .value=${username}
           required
-        ></md-filled-text-field>
+          ><md-icon slot="leading-icon">badge</md-icon></md-filled-text-field
+        >
+      </div>
+      <div class="field">
+        <md-filled-text-field name="name" type="text" label=${String(i18next.t('field.name'))} .value=${name} required
+          ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
+        >
       </div>
       <div class="field">
         <md-filled-text-field
@@ -73,7 +79,7 @@ export class AuthSignup extends AbstractSign {
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
           }}
         >
-          ></md-filled-text-field
+          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
         >
       </div>
       <div class="field">
@@ -85,7 +91,7 @@ export class AuthSignup extends AbstractSign {
           label=${String(i18next.t('field.confirm password'))}
           required
         >
-          ></md-filled-text-field
+          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
         >
       </div>
       <md-elevated-button class="ui button" @click=${e => this._onSubmit(e)}>

package/client/index.ts

@@ -87,7 +87,7 @@ export async function setAuthManagementMenus(options?: any) {
       store.dispatch({
         type: ADD_MORENDA,
         morenda: {
-          icon: html` <md-icon>badge</md-icon> `,
+          icon: html` <md-icon>id_card</md-icon> `,
           name: html` <ox-i18n msgid="text.auth-provider management"></ox-i18n> `,
           action: () => {
             navigate('auth-providers')

package/client/pages/user/user-management.ts

@@ -186,7 +186,7 @@ export class UserManagement extends localize(i18next)(PageView) {
     }
   }
 
-  async createUser(user) {
+  async createUser(user: { username: string; name: string; email: string }) {
     if (
       await OxPrompt.open({
         title: i18next.t('text.are_you_sure'),

package/dist-client/components/abstract-auth-page.js

@@ -99,21 +99,21 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
     }
     get formfields() {
         var _a;
-        const email = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.email) || '';
-        // .validationMessage=${String(i18next.t('text.invalid-email'))}
+        const username = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.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">
@@ -123,11 +123,11 @@ export 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>
     `;
@@ -154,7 +154,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
       ${ssoLinks.map(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>