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

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>
                   `
@@ -169,7 +169,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
           : ''}
         ${user.userType === 'user'
           ? html`
-              ${this.isTransferable(user)
+              ${this.isTransferable(user) && this.userRoles && this.userRoles.length > 0
                 ? html`
                     <md-elevated-button danger @click=${() => this.onTransfer(user)}
                       >${String(i18next.t('button.transfer owner'))}</md-elevated-button
@@ -209,7 +209,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
   }
 
   isTransferable(user) {
-    return (this.isSuperOwner || this.isDomainOwner) && !user.owner
+    return this.activate && (this.isSuperOwner || this.isDomainOwner) && !user.owner
   }
 
   isRoleEditable() {
@@ -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()
       })
 

package/client/entries/auth/checkin.ts

@@ -58,8 +58,8 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       }
 
       li:hover {
-        background-color: var(--md-sys-color-primary-container);
         color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
       }
 
       li span {

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/attribute/attribute-set-item-list.ts

@@ -104,7 +104,7 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
           width: 180
         },
         {
-          type: 'string',
+          type: 'varname',
           name: 'tag',
           header: i18next.t('field.tag'),
           record: {

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

@@ -28,6 +28,8 @@ class RoleManagement extends connect(store)(PageView) {
         padding: var(--subtitle-padding);
         font: var(--subtitle-font);
         color: var(--subtitle-text-color);
+
+        text-transform: capitalize;
       }
 
       input {

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

@@ -11,12 +11,12 @@ import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
 import { client, gqlContext } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
+import { i18next, localize } from '@operato/i18n'
 import { PageView } from '@operato/shell'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 @customElement('user-management')
-class UserManagement extends PageView {
+export class UserManagement extends localize(i18next)(PageView) {
   static styles = [
     css`
       :host {
@@ -98,14 +98,12 @@ class UserManagement extends PageView {
         .data=${userSet}
         @tabChanged=${e => (this.currentTab = e.detail.currentTabKey)}
         .headerRenderer=${user => {
-          return html`
-            ${!user.activated
-              ? html`
-                  <md-icon>do_disturb</md-icon>
-                  ${user.name}
-                `
-              : html` ${user.owner ? html` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `}
-          `
+          return !user.activated
+            ? html`
+                <md-icon>do_disturb</md-icon>
+                ${user.name}
+              `
+            : html` ${user.owner ? html` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `
         }}
         .contentRenderer=${user =>
           html` <user-role-editor
@@ -139,6 +137,7 @@ class UserManagement extends PageView {
           users {
             items {
               id
+              username
               name
               email
               userType
@@ -186,7 +185,7 @@ class UserManagement extends 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>

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

@@ -1 +1 @@
-{"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\n\nexport abstract class AbstractAuthPage extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .home {\n        position: absolute;\n        padding: var(--padding-dufault, 9px);\n        left: 20px;\n        top: 10px;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      div.field {\n        margin-bottom: var(--spacing-medium);\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      #snackbar {\n        width: 100%;\n        z-index: 10;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: Object }) detail: any\n  @property({ type: String }) redirectTo?: string\n\n  @query('#form') formEl!: HTMLFormElement\n\n  private _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  get autocompletable() {\n    return false\n  }\n\n  render() {\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <div class=\"auth-form\">\n            <h3><ox-i18n msgid=\"title.${this.pageName}\"></ox-i18n></h3>\n\n            <form\n              id=\"form\"\n              action=\"${this.actionUrl}\"\n              method=\"post\"\n              autocomplete=${this.autocompletable ? 'on' : 'off'}\n              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </div>\n        </div>\n\n        <md-icon-button class=\"home\" @click=${e => (window.location.href = '/')}\n          ><md-icon>home</md-icon></md-icon-button\n        >\n        <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any).focus()\n    }, 100)\n\n    this.formEl.reset = () => {\n      this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''))\n    }\n  }\n\n  updated(changed) {\n    if (changed.has('data') && this.data) {\n      this.message = this.data.message\n      this.redirectTo = this.data.redirectTo\n    }\n  }\n\n  abstract get pageName(): string\n  abstract get actionUrl(): string\n\n  get formElements(): HTMLInputElement[] {\n    return Array.from(this.formEl.querySelectorAll('[name]'))\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    // .validationMessage=${String(i18next.t('text.invalid-email'))}\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"off\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <md-elevated-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </md-elevated-button>\n    `\n  }\n\n  get links() {\n    const { disableUserSignupProcess, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${!disableUserSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <md-text-button>\n                <md-icon slot=\"icon\">add_task</md-icon>\n                <ox-i18n msgid=\"field.sign up\"></ox-i18n>\n              </md-text-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <md-text-button>\n                <md-icon slot=\"icon\">lock_open</md-icon>\n                <ox-i18n msgid=\"field.forgot-password\"></ox-i18n>\n              </md-text-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <md-text-button>\n              <md-icon slot=\"icon\">badge</md-icon>\n              ${i18next.t('label.signin with', { title: sso.title })}\n            </md-text-button>\n          </a>\n        `\n      )}\n    `\n  }\n\n  async _onSubmit(e) {\n    if (this.checkValidity()) {\n      this.submit()\n    }\n  }\n\n  checkValidity() {\n    return this.formElements.every(el => el.checkValidity())\n  }\n\n  abstract submit()\n\n  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    if (level) snackbar.level = level\n    if (message) snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        this.hideSnackbar()\n      }, timer)\n  }\n\n  hideSnackbar() {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    snackbar.active = false\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href || '',\n        title: titleMeta?.content || 'Things Factory',\n        description: descriptionMeta?.content || 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\n\nexport abstract class AbstractAuthPage extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .home {\n        position: absolute;\n        padding: var(--padding-dufault, 9px);\n        left: 20px;\n        top: 10px;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      div.field {\n        margin-bottom: var(--spacing-medium);\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      #snackbar {\n        width: 100%;\n        z-index: 10;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: Object }) detail: any\n  @property({ type: String }) redirectTo?: string\n\n  @query('#form') formEl!: HTMLFormElement\n\n  private _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  get autocompletable() {\n    return false\n  }\n\n  render() {\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <div class=\"auth-form\">\n            <h3><ox-i18n msgid=\"title.${this.pageName}\"></ox-i18n></h3>\n\n            <form\n              id=\"form\"\n              action=\"${this.actionUrl}\"\n              method=\"post\"\n              autocomplete=${this.autocompletable ? 'on' : 'off'}\n              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </div>\n        </div>\n\n        <md-icon-button class=\"home\" @click=${e => (window.location.href = '/')}\n          ><md-icon>home</md-icon></md-icon-button\n        >\n        <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any).focus()\n    }, 100)\n\n    this.formEl.reset = () => {\n      this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''))\n    }\n  }\n\n  updated(changed) {\n    if (changed.has('data') && this.data) {\n      this.message = this.data.message\n      this.redirectTo = this.data.redirectTo\n    }\n  }\n\n  abstract get pageName(): string\n  abstract get actionUrl(): string\n\n  get formElements(): HTMLInputElement[] {\n    return Array.from(this.formEl.querySelectorAll('[name]'))\n  }\n\n  get formfields() {\n    const username = this.data?.username || ''\n    // .validationMessage=${String(i18next.t('text.invalid-username'))}\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"username\"\n          type=\"text\"\n          label=${String(i18next.t('field.user-id or email'))}\n          required\n          .value=${username}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          ><md-icon slot=\"leading-icon\">id_card</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"off\"\n          required\n          ><md-icon slot=\"leading-icon\">password</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <md-elevated-button class=\"ui\" type=\"button\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </md-elevated-button>\n    `\n  }\n\n  get links() {\n    const { disableUserSignupProcess, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${!disableUserSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <md-text-button>\n                <md-icon slot=\"icon\">add_task</md-icon>\n                <ox-i18n msgid=\"field.sign up\"></ox-i18n>\n              </md-text-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <md-text-button>\n                <md-icon slot=\"icon\">lock_open</md-icon>\n                <ox-i18n msgid=\"field.forgot-password\"></ox-i18n>\n              </md-text-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <md-text-button>\n              <md-icon slot=\"icon\">id_card</md-icon>\n              ${i18next.t('label.signin with', { title: sso.title })}\n            </md-text-button>\n          </a>\n        `\n      )}\n    `\n  }\n\n  async _onSubmit(e) {\n    if (this.checkValidity()) {\n      this.submit()\n    }\n  }\n\n  checkValidity() {\n    return this.formElements.every(el => el.checkValidity())\n  }\n\n  abstract submit()\n\n  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    if (level) snackbar.level = level\n    if (message) snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        this.hideSnackbar()\n      }, timer)\n  }\n\n  hideSnackbar() {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    snackbar.active = false\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href || '',\n        title: titleMeta?.content || 'Things Factory',\n        description: descriptionMeta?.content || 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

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

@@ -1,11 +1,10 @@
 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 { AbstractAuthPage } from './abstract-auth-page';
 export declare abstract class AbstractPasswordReset extends AbstractAuthPage {
     static styles: import("lit").CSSResult[];

package/dist-client/components/abstract-password-reset.js

@@ -2,15 +2,13 @@ import { __decorate, __metadata } from "tslib";
 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';
 import { AbstractAuthPage } from './abstract-auth-page';
@@ -56,7 +54,8 @@ export 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">
@@ -67,10 +66,11 @@ export 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>
 
@@ -93,15 +93,8 @@ export 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) {

package/dist-client/components/abstract-password-reset.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-password-reset.js","sourceRoot":"","sources":["../../client/components/abstract-password-reset.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,8CAA8C,CAAA;AAErD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,iCAAiC,CAAA;AACxC,OAAO,0BAA0B,CAAA;AACjC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAA;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,OAAgB,qBAAsB,SAAQ,gBAAgB;IAApE;;QAgCU,oBAAe,GAAW,EAAE,CAAA;QAC5B,iBAAY,GAAW,EAAE,CAAA;IAkHnC,CAAC;IA9GC,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QACvD,MAAM,EAAE,0BAA0B,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAEjE,OAAO,IAAI,CAAA;;;qBAGM,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;sCAIX,IAAI,CAAC,KAAK;;;sBAG1B,IAAI,CAAC,SAAS;;wBAEZ,CAAC,CAAC,EAAE;YACd,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO;gBAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;QACzC,CAAC;;uDAE0C,IAAI,CAAC,KAAK,IAAI,EAAE;;;;;wBAK/C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;0BACjC,IAAI,CAAC,eAAe,IAAI,EAAE;kCAClB,IAAI,CAAC,YAAY;;yBAE1B,CAAC,CAAC,EAAE;YACX,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YACxB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC,CAAA;QAC3F,CAAC;;;;;;;;;;wBAUO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC;;;;;;0EAMO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;gCAChE,IAAI,CAAC,iBAAiB;;;cAGxC,CAAC,0BAA0B;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;4BAIQ,OAAO,CAAC,QAAQ,IAAI,OAAO;iCACtB,SAAS;8BACZ,CAAC,CAAC,EAAE;gBACZ,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;gBACrB,IAAI,CAAC,MAAM;oBAAE,OAAM;gBAEnB,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;YAChC,CAAC;;uBAEE;YACT,CAAC,CAAC,OAAO;;;;2DAIoC,IAAI,CAAC,OAAO;;QAE/D,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;WAIH;KACN,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QACtB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;QAC9B,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,EAAE,CAAA;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC;oBAChB,KAAK,EAAE,CAAC,CAAC;iBACV,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,eAAe,GAAG,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAA;QACnF,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACzE,CAAC;IAED,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;IACtB,CAAC;;AAjJM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBF;IACD,eAAe;CAChB,AAxBY,CAwBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAEd;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8BAAe,WAAW;0DAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '../components/profile-component'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'\nimport { AbstractAuthPage } from './abstract-auth-page'\n\nexport abstract class AbstractPasswordReset extends AbstractAuthPage {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) token?: string\n\n  @query('#confirm-password') confirmPass!: HTMLElement\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  abstract get submitButtonLabel(): string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.${this.title}\"></ox-i18n></h3>\n          <form\n            id=\"form\"\n            action=\"${this.actionUrl}\"\n            method=\"post\"\n            @keypress=${e => {\n              if (e.key == 'Enter') this._onSubmit(e)\n            }}\n          >\n            <input name=\"token\" type=\"hidden\" .value=${this.token || ''} required />\n            <div class=\"field\">\n              <md-filled-text-field\n                name=\"password\"\n                type=\"password\"\n                label=${String(i18next.t('label.password'))}\n                pattern=${this.passwordPattern || ''}\n                supporting-text=${this.passwordHelp}\n                autocomplete=\"off\"\n                @input=${e => {\n                  var val = e.target.value\n                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '[$&]'))\n                }}\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <div class=\"field\">\n              <md-filled-text-field\n                id=\"confirm-password\"\n                name=\"confirm-password\"\n                type=\"password\"\n                label=${String(i18next.t('field.confirm password'))}\n                autocomplete=\"off\"\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <md-elevated-button id=\"submit-button\" type=\"submit\" @click=${e => this._onSubmit(e)}>\n              <ox-i18n msgid=\"${this.submitButtonLabel}\"></ox-i18n>\n            </md-elevated-button>\n\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </form>\n        </div>\n      </div>\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n      ${isSafari()\n        ? html``\n        : html`\n            <div class=\"lottie-container\">\n              <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n            </div>\n          `}\n    `\n  }\n\n  updated(changed) {\n    super.updated(changed)\n    if (changed.has('data')) {\n      this.token = this.data.token\n    }\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          timer: -1\n        })\n      }\n    }\n  }\n\n  languageUpdated() {\n    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n  }\n\n  async submit() {\n    this.formEl.submit()\n  }\n}\n"]}
+{"version":3,"file":"abstract-password-reset.js","sourceRoot":"","sources":["../../client/components/abstract-password-reset.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport '../components/profile-component'\n\nimport { css, html, nothing } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'\nimport { AbstractAuthPage } from './abstract-auth-page'\n\nexport abstract class AbstractPasswordReset extends AbstractAuthPage {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) token?: string\n\n  @query('#confirm-password') confirmPass!: HTMLElement\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  abstract get submitButtonLabel(): string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.${this.title}\"></ox-i18n></h3>\n          <form\n            id=\"form\"\n            action=\"${this.actionUrl}\"\n            method=\"post\"\n            @keypress=${e => {\n              if (e.key == 'Enter') this._onSubmit(e)\n            }}\n          >\n            <input name=\"token\" type=\"hidden\" .value=${this.token || ''} required />\n            <div class=\"field\">\n              <md-filled-text-field\n                name=\"password\"\n                type=\"password\"\n                label=${String(i18next.t('label.password'))}\n                pattern=${this.passwordPattern || ''}\n                supporting-text=${this.passwordHelp}\n                autocomplete=\"off\"\n                @input=${e => {\n                  var val = e.target.value\n                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '[$&]'))\n                }}\n                required\n                ><md-icon slot=\"leading-icon\">password</md-icon></md-filled-text-field\n              >\n            </div>\n\n            <div class=\"field\">\n              <md-filled-text-field\n                id=\"confirm-password\"\n                name=\"confirm-password\"\n                type=\"password\"\n                label=${String(i18next.t('field.confirm password'))}\n                autocomplete=\"off\"\n                required\n                ><md-icon slot=\"leading-icon\">password</md-icon></md-filled-text-field\n              >\n            </div>\n\n            <md-elevated-button id=\"submit-button\" type=\"button\" @click=${e => this._onSubmit(e)}>\n              <ox-i18n msgid=\"${this.submitButtonLabel}\"></ox-i18n>\n            </md-elevated-button>\n\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </form>\n        </div>\n      </div>\n\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n    `\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('data')) {\n      this.token = this.data.token\n    }\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          timer: -1\n        })\n      }\n    }\n  }\n\n  languageUpdated() {\n    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n  }\n\n  async submit() {\n    this.formEl.submit()\n  }\n}\n"]}

package/dist-client/components/abstract-sign.js

@@ -25,30 +25,31 @@ export class AbstractSign extends AbstractAuthPage {
     }
     get formfields() {
         var _a;
-        const email = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.email) || '';
+        const username = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.username) || '';
         const autocompletable = this.autocompletable;
         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}
-          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) => {
             const target = e.target;
             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">
@@ -56,14 +57,14 @@ export 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

package/dist-client/components/abstract-sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, nothing } from 'lit'\nimport { startAuthentication } from '@simplewebauthn/browser'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    const autocompletable = this.autocompletable\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=${autocompletable ? \"username\" : \"off\"}\n          autocapitalize=\"off\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-email'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=${autocompletable ? \"current-password\" : \"off\"}\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async authenticateUser() {\n    try {\n      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())\n      const assertionResp = await startAuthentication(options)\n      const verification = await fetch('/auth/signin-webauthn', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(assertionResp)\n      }).then(res => res.json())\n\n      if (verification.verified) {\n        const { redirectURL } = verification\n  \n        if (redirectURL) {\n          window.location.href = redirectURL\n        }\n      } else {\n        notify({\n          level: 'error',\n          message: verification.message\n        })\n      }\n  \n    } catch (error) {\n      notify({\n        level: 'error',\n        message: i18next.t('error.authn verification failed')\n      })\n    }\n  }\n}\n"]}
+{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, nothing } from 'lit'\nimport { startAuthentication } from '@simplewebauthn/browser'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const username = this.data?.username || ''\n    const autocompletable = this.autocompletable\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"username\"\n          type=\"text\"\n          label=${String(i18next.t('field.user-id or email'))}\n          required\n          .value=${username}\n          autocomplete=${autocompletable ? 'username' : 'off'}\n          autocapitalize=\"off\"\n          pattern=\"^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-username'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\n          ><md-icon slot=\"leading-icon\">id_card</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=${autocompletable ? 'current-password' : 'off'}\n          required\n          ><md-icon slot=\"leading-icon\">password</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"button\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async authenticateUser() {\n    try {\n      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())\n      const assertionResp = await startAuthentication(options)\n      const verification = await fetch('/auth/signin-webauthn', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(assertionResp)\n      }).then(res => res.json())\n\n      if (verification.verified) {\n        const { redirectURL } = verification\n\n        if (redirectURL) {\n          window.location.href = redirectURL\n        }\n      } else {\n        notify({\n          level: 'error',\n          message: verification.message\n        })\n      }\n    } catch (error) {\n      notify({\n        level: 'error',\n        message: i18next.t('error.authn verification failed')\n      })\n    }\n  }\n}\n"]}

package/dist-client/components/change-password.js

@@ -103,6 +103,7 @@ ChangePassword.styles = [
 
       md-elevated-button {
         margin: var(--spacing-small) auto var(--spacing-medium) auto;
+        text-transform: capitalize;
       }
 
       button {