@things-factory/auth-ui 6.2.6 → 6.2.9

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

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { client, gqlContext } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { CustomAlert } from '@things-factory/shell/client'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 @customElement('role-privilege-editor')
 class RolePrivilegeEditor extends localize(i18next)(LitElement) {
@@ -51,14 +51,15 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
 
       [buttons] {
         margin: 0;
-        padding: var(--padding-default);
+        padding: 5px;
         background-color: rgba(var(--primary-color-rgb), 0.2);
       }
 
       mwc-button {
+        margin: 5px;
         background-color: var(--theme-white-color);
-        overflow: hidden;
       }
+
       [danger] {
         --mdc-theme-primary: var(--mdc-danger-button-primary-color);
       }
@@ -106,12 +107,12 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
       </ul>
 
       <div buttons>
-        <mwc-button @click=${e => this.onSave()} outlined label="${i18next.t('button.save')}"></mwc-button>
+        <mwc-button @click=${e => this.onSave()} outlined label=${String(i18next.t('button.save'))}></mwc-button>
         <mwc-button
           @click=${e => this.onDeleteRole()}
           raised
           danger
-          label="${i18next.t('button.delete role')}"
+          label=${String(i18next.t('button.delete role'))}
         ></mwc-button>
       </div>
     `
@@ -172,34 +173,34 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
   }
 
   async onDeleteRole() {
-    const answer = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.are_you_sure_to_delete_x', { x: i18next.t('label.role') }),
-      confirmButton: { text: i18next.t('button.delete') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!answer.value) return
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          deleteRole(id: $id)
-        }
-      `,
-      variables: { id: this.role.id },
-      context: gqlContext()
-    })
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_delete_x', { x: i18next.t('label.role') }),
+        confirmButton: { text: i18next.t('button.delete') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!) {
+            deleteRole(id: $id)
+          }
+        `,
+        variables: { id: this.role.id },
+        context: gqlContext()
+      })
 
-    if (!response.errors) {
-      await this.dispatchEvent(new CustomEvent('fetch-roles'))
+      if (!response.errors) {
+        await this.dispatchEvent(new CustomEvent('fetch-roles'))
 
-      await CustomAlert({
-        type: 'success',
-        title: i18next.t('text.completed'),
-        text: i18next.t('text.x_deleted_successfully', { x: i18next.t('label.role') }),
-        confirmButton: { text: i18next.t('button.confirm') }
-      })
+        await OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.x_deleted_successfully', { x: i18next.t('label.role') }),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+      }
     }
   }
 

package/client/components/role-selector.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 @customElement('role-selector')
@@ -59,7 +59,7 @@ export class RoleSelector extends LitElement {
       ${this.roles.length
         ? html`
             <div>
-              <h3 subtitle>${this.roleCategory}</h3>
+              ${this.roleCategory ? html`<h3 subtitle>${this.roleCategory}</h3>` : nothing}
               <input id="checkAll" type="checkbox" @change=${this.checkAll.bind(this)} />
               <label for="checkAll">Check all</label>
             </div>

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

@@ -10,7 +10,7 @@ import { client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { store } from '@operato/shell'
-import { CustomAlert } from '@things-factory/shell/client'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 import { RoleSelector } from './role-selector'
 
@@ -62,14 +62,17 @@ class UserRoleEditor extends connect(store)(LitElement) {
       [detail] li input {
         flex: 1;
       }
+
       [buttons] {
         margin: 0;
-        padding: var(--padding-default);
+        padding: 5px;
         background-color: rgba(var(--primary-color-rgb), 0.2);
       }
+
       mwc-button {
-        margin-right: var(--padding-narrow);
+        margin: 5px;
       }
+
       [danger] {
         --mdc-theme-primary: var(--mdc-danger-button-primary-color);
       }
@@ -122,20 +125,15 @@ class UserRoleEditor extends connect(store)(LitElement) {
                 : ''}
             </ul>
 
-            <role-selector
-              .roleCategory="${currentDomainName}"
-              .user="${this.user}"
-              .roles="${domainRoles}"
-              .userRoles="${this.userRoles}"
-            ></role-selector>
+            <role-selector .user=${this.user} .roles=${domainRoles} .userRoles=${this.userRoles}></role-selector>
 
             ${Object.keys(grantedRoles).map(
               partnerName => html`
                 <role-selector
-                  .roleCategory="${partnerName}"
-                  .user="${this.user}"
-                  .roles="${this.grantedRoles[partnerName]}"
-                  .userRoles="${this.userRoles}"
+                  .roleCategory=${partnerName}
+                  .user=${this.user}
+                  .roles=${this.grantedRoles[partnerName]}
+                  .userRoles=${this.userRoles}
                 >
                 </role-selector>
               `
@@ -398,19 +396,8 @@ class UserRoleEditor extends connect(store)(LitElement) {
   }
 
   async onDelete(user) {
-    const answer = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.are_you_sure_to_x_user', {
-        x: i18next.t('button.delete')
-      }),
-      confirmButton: { text: i18next.t('button.delete') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!answer.value) return
-
     if (user.owner) {
-      await CustomAlert({
+      await OxPrompt.open({
         type: 'warning',
         title: i18next.t('text.cannot_delete'),
         text: i18next.t('text.x_cannot_delete', {
@@ -422,24 +409,35 @@ class UserRoleEditor extends connect(store)(LitElement) {
       return
     }
 
-    const response = await client.mutate({
-      mutation: gql`
-        mutation deleteDomaineUser($email: String!) {
-          deleteDomainUser(email: $email)
-        }
-      `,
-      variables: { email: user.email },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      await CustomAlert({
-        type: 'success',
-        title: i18next.t('text.completed'),
-        confirmButton: { text: i18next.t('button.confirm') }
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_x_user', {
+          x: i18next.t('button.delete')
+        }),
+        confirmButton: { text: i18next.t('button.delete') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation deleteDomaineUser($email: String!) {
+            deleteDomainUser(email: $email)
+          }
+        `,
+        variables: { email: user.email },
+        context: gqlContext()
       })
 
-      this.dispatchUserUpdated()
+      if (!response.errors) {
+        await OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        this.dispatchUserUpdated()
+      }
     }
   }
 
@@ -459,32 +457,32 @@ class UserRoleEditor extends connect(store)(LitElement) {
   }
 
   async onResetPassword(user) {
-    const answer = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.are_you_sure_to_x', { x: i18next.t('title.reset password') }),
-      confirmButton: { text: i18next.t('button.confirm') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!answer.value) return
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation resetPasswordToDefault($userId: String!) {
-          resetPasswordToDefault(userId: $userId)
-        }
-      `,
-      variables: { userId: user.id },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      await CustomAlert({
-        type: 'success',
-        title: i18next.t('text.completed'),
-        text: i18next.t('text.password reset succeed'),
-        confirmButton: { text: i18next.t('button.confirm') }
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_x', { x: i18next.t('title.reset password') }),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation resetPasswordToDefault($userId: String!) {
+            resetPasswordToDefault(userId: $userId)
+          }
+        `,
+        variables: { userId: user.id },
+        context: gqlContext()
       })
+
+      if (!response.errors) {
+        await OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.password reset succeed'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+      }
     }
   }
 

package/client/entries/auth/forgot-password.ts

@@ -31,7 +31,7 @@ export class ForgotPassword extends AbstractAuthPage {
         <mwc-textfield
           name="email"
           type="email"
-          label=${i18next.t('label.email')}
+          label=${String(i18next.t('label.email'))}
           .value=${email}
           required
           @input=${e => {

package/client/entries/auth/signup.ts

@@ -28,32 +28,38 @@ export class AuthSignup extends AbstractSign {
 
     return html`
       <div class="field">
-        <mwc-textfield name="name" type="text" label=${i18next.t('field.name')} .value=${name} required></mwc-textfield>
+        <mwc-textfield
+          name="name"
+          type="text"
+          label=${String(i18next.t('field.name'))}
+          .value=${name}
+          required
+        ></mwc-textfield>
       </div>
       <div class="field">
         <mwc-textfield
           name="email"
           type="email"
-          label=${i18next.t('field.email')}
+          label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          .validationMessage=${i18next.t('text.invalid-email')}
+          .validationMessage=${String(i18next.t('text.invalid-email'))}
         ></mwc-textfield>
       </div>
       <div class="field">
         <mwc-textfield
           name="password"
           type="password"
-          label=${i18next.t('field.password')}
-          .pattern=${this.passwordPattern}
-          helper=${this.passwordHelp}
+          label=${String(i18next.t('field.password'))}
+          .pattern=${this.passwordPattern || ''}
+          helper=${this.passwordHelp || ''}
           helperPersistent
           required
           @input=${e => {
             var val = e.target.value
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
           }}
-          .validationMessage=${this.passwordHelp}
+          .validationMessage=${this.passwordHelp || ''}
         ></mwc-textfield>
       </div>
       <div class="field">
@@ -61,9 +67,9 @@ export class AuthSignup extends AbstractSign {
           id="confirm-password"
           name="confirm-password"
           type="password"
-          label=${i18next.t('field.confirm password')}
+          label=${String(i18next.t('field.confirm password'))}
           required
-          .validationMessage=${i18next.t('text.passwords do not match')}
+          .validationMessage=${String(i18next.t('text.passwords do not match'))}
         ></mwc-textfield>
       </div>
       <mwc-button class="ui button" raised @click=${e => this._onSubmit(e)}>

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -7,7 +7,7 @@ import { customElement, property, query } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
-import { CustomAlert } from '@things-factory/shell/client'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 @customElement('oauth2-decision')
 class OAuth2DecisionPage extends LitElement {
@@ -152,7 +152,7 @@ class OAuth2DecisionPage extends LitElement {
   async decision(allowOrCancel) {
     const selectedRoles = this.selectedRoles()
     if (allowOrCancel && !selectedRoles?.length) {
-      CustomAlert({
+      await OxPrompt.open({
         title: i18next.t('title.nothing selected'),
         text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),
         confirmButton: { text: i18next.t('button.confirm') }

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

@@ -67,7 +67,6 @@ class RoleManagement extends connect(store)(PageView) {
 
     return html`
       <h2>Roles</h2>
-      <div subtitle>${i18next.t('text.create role')}</div>
       <create-role
         @fetch-roles=${async () => {
           this.roles = await this.fetchRoles()

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

@@ -11,7 +11,7 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { PageView } from '@operato/shell'
-import { CustomAlert } from '@things-factory/shell/client'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 @customElement('user-management')
 class UserManagement extends PageView {
@@ -196,34 +196,34 @@ class UserManagement extends PageView {
   }
 
   async createUser(user) {
-    const result = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.are_you_sure_to_x_user', { x: i18next.t('button.create') }),
-      confirmButton: { text: i18next.t('button.confirm') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!result.value) return
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation createUser($user: NewUser!) {
-          createUser(user: $user) {
-            name
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_x_user', { x: i18next.t('button.create') }),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation createUser($user: NewUser!) {
+            createUser(user: $user) {
+              name
+            }
           }
-        }
-      `,
-      variables: { user },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      await CustomAlert({
-        title: i18next.t('text.completed'),
-        confirmButton: { text: i18next.t('button.confirm') }
+        `,
+        variables: { user },
+        context: gqlContext()
       })
 
-      await this.refreshUsers()
+      if (!response.errors) {
+        await OxPrompt.open({
+          title: i18next.t('text.completed'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        await this.refreshUsers()
+      }
     }
   }
 

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

@@ -7,7 +7,7 @@ import '@operato/lottie-player';
 import '@operato/i18n/ox-i18n.js';
 import '@operato/i18n/ox-i18n-selector.js';
 import '@operato/layout/ox-snack-bar.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
@@ -31,7 +31,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
             <form
               id="form"
               action="${this.actionUrl}"
-              method="POST"
+              method="post"
               @keypress=${e => {
             if (e.key == 'Enter')
                 this._onSubmit(e);
@@ -97,10 +97,10 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
         <mwc-textfield
           name="email"
           type="email"
-          label=${i18next.t('field.email')}
+          label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          .validationMessage=${i18next.t('text.invalid-email')}
+          .validationMessage=${String(i18next.t('text.invalid-email'))}
           autocomplete="username"
           autocapitalize="off"
         ></mwc-textfield>
@@ -109,7 +109,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
         <mwc-textfield
           name="password"
           type="password"
-          label=${i18next.t('field.password')}
+          label=${String(i18next.t('field.password'))}
           autocomplete="current-password"
           required
         ></mwc-textfield>
@@ -121,16 +121,18 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
     `;
     }
     get links() {
-        var _a;
-        const ssoLinks = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.ssoLinks) || [];
+        const { userSignupProcess = true, ssoLinks = [] } = this.data || {};
         return html `
-      <a class="link" href="/auth/signup">
-        <mwc-button icon="add_task"><ox-i18n msgid="field.sign up"></ox-i18n></mwc-button>
-      </a>
-      <a class="link" href="/auth/forgot-password">
-        <mwc-button icon="lock_open"><ox-i18n msgid="field.forgot-password"></ox-i18n></mwc-button>
-      </a>
-
+      ${userSignupProcess
+            ? html `
+            <a class="link" href="/auth/signup">
+              <mwc-button icon="add_task"><ox-i18n msgid="field.sign up"></ox-i18n></mwc-button>
+            </a>
+            <a class="link" href="/auth/forgot-password">
+              <mwc-button icon="lock_open"><ox-i18n msgid="field.forgot-password"></ox-i18n></mwc-button>
+            </a>
+          `
+            : nothing}
       ${ssoLinks.map(sso => html `
           <a class="link" href=${sso.link}>
             <mwc-button icon="badge">${i18next.t('label.signin with', { title: sso.title })}</mwc-button>

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/mwc-button'\nimport '@material/mwc-icon'\nimport '@material/mwc-icon-button'\nimport '@material/mwc-textfield'\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 } from 'lit'\nimport { property, query } 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      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      [home] {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        font-size: 2em;\n        color: white;\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  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content\">\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              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            <div id=\"locale-area\">\n              <label for=\"locale-selector\"><mwc-icon>language</mwc-icon></label>\n              <ox-i18n-selector\n                id=\"locale-selector\"\n                value=${i18next.language || 'en-US'}\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          </div>\n        </div>\n\n        <mwc-icon-button home icon=\"home\" @click=${e => (window.location.href = '/')}></mwc-icon-button>\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('mwc-textfield') 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\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <mwc-textfield\n          name=\"email\"\n          type=\"email\"\n          label=${i18next.t('field.email')}\n          required\n          .value=${email}\n          .validationMessage=${i18next.t('text.invalid-email')}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n        ></mwc-textfield>\n      </div>\n      <div class=\"field\">\n        <mwc-textfield\n          name=\"password\"\n          type=\"password\"\n          label=${i18next.t('field.password')}\n          autocomplete=\"current-password\"\n          required\n        ></mwc-textfield>\n      </div>\n\n      <mwc-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </mwc-button>\n    `\n  }\n\n  get links() {\n    const ssoLinks = this.data?.ssoLinks || []\n\n    return html`\n      <a class=\"link\" href=\"/auth/signup\">\n        <mwc-button icon=\"add_task\"><ox-i18n msgid=\"field.sign up\"></ox-i18n></mwc-button>\n      </a>\n      <a class=\"link\" href=\"/auth/forgot-password\">\n        <mwc-button icon=\"lock_open\"><ox-i18n msgid=\"field.forgot-password\"></ox-i18n></mwc-button>\n      </a>\n\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <mwc-button icon=\"badge\">${i18next.t('label.signin with', { title: sso.title })}</mwc-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/mwc-button'\nimport '@material/mwc-icon'\nimport '@material/mwc-icon-button'\nimport '@material/mwc-textfield'\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 } 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      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      [home] {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        font-size: 2em;\n        color: white;\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  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content\">\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              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            <div id=\"locale-area\">\n              <label for=\"locale-selector\"><mwc-icon>language</mwc-icon></label>\n              <ox-i18n-selector\n                id=\"locale-selector\"\n                value=${i18next.language || 'en-US'}\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          </div>\n        </div>\n\n        <mwc-icon-button home icon=\"home\" @click=${e => (window.location.href = '/')}></mwc-icon-button>\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('mwc-textfield') 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\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <mwc-textfield\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          .validationMessage=${String(i18next.t('text.invalid-email'))}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n        ></mwc-textfield>\n      </div>\n      <div class=\"field\">\n        <mwc-textfield\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"current-password\"\n          required\n        ></mwc-textfield>\n      </div>\n\n      <mwc-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </mwc-button>\n    `\n  }\n\n  get links() {\n    const { userSignupProcess = true, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${userSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <mwc-button icon=\"add_task\"><ox-i18n msgid=\"field.sign up\"></ox-i18n></mwc-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <mwc-button icon=\"lock_open\"><ox-i18n msgid=\"field.forgot-password\"></ox-i18n></mwc-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <mwc-button icon=\"badge\">${i18next.t('label.signin with', { title: sso.title })}</mwc-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/create-domain-popup.js

@@ -5,7 +5,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { CustomAlert } from '@things-factory/shell/client';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitElement) {
     render() {
         return html `
@@ -63,7 +63,7 @@ let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitEle
             variables: { domainInput }
         });
         if (!response.errors) {
-            await CustomAlert({
+            await OxPrompt.open({
                 type: 'success',
                 title: i18next.t('text.completed'),
                 text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),