@things-factory/auth-ui 6.2.6 → 6.2.8

package/client/components/create-domain-popup.ts

@@ -6,7 +6,7 @@ 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'
 
 @customElement('create-domain-popup')
 class CreateDomainPopup extends localize(i18next)(LitElement) {
@@ -118,7 +118,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
     })
 
     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') }),

package/client/components/create-role.ts

@@ -6,7 +6,7 @@ import { customElement, query } 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('create-role')
 class CreateRole extends localize(i18next)(LitElement) {
@@ -53,15 +53,19 @@ class CreateRole extends localize(i18next)(LitElement) {
       <mwc-textfield
         type="text"
         name="name"
-        label=${i18next.t('label.x name', { x: i18next.t('label.role') })}
+        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
       ></mwc-textfield>
       <mwc-textfield
         type="text"
         name="description"
-        label=${i18next.t('label.x description', { x: i18next.t('label.role') })}
+        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
       ></mwc-textfield>
 
-      <mwc-button @click=${this.onCreateRole.bind(this)} outlined label="${i18next.t('button.create')}"></mwc-button>
+      <mwc-button
+        @click=${this.onCreateRole.bind(this)}
+        outlined
+        label=${String(i18next.t('button.create'))}
+      ></mwc-button>
     `
   }
 
@@ -78,39 +82,39 @@ class CreateRole extends localize(i18next)(LitElement) {
     role.name = name
     role.description = description
 
-    const result = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),
-      confirmButton: { text: i18next.t('button.confirm') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!result.value) return
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation createRole($role: NewRole!) {
-          createRole(role: $role) {
-            name
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation createRole($role: NewRole!) {
+            createRole(role: $role) {
+              name
+            }
           }
-        }
-      `,
-      variables: { role },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      await this.dispatchEvent(new CustomEvent('fetch-roles'))
-
-      await CustomAlert({
-        type: 'success',
-        title: i18next.t('text.completed'),
-        text: i18next.t('text.data_uploaded_successfully'),
-        confirmButton: { text: i18next.t('button.confirm') }
+        `,
+        variables: { role },
+        context: gqlContext()
       })
 
-      this.nameInput.value = ''
-      this.descriptionInput.value = ''
+      if (!response.errors) {
+        await this.dispatchEvent(new CustomEvent('fetch-roles'))
+
+        await OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.data_uploaded_successfully'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        this.nameInput.value = ''
+        this.descriptionInput.value = ''
+      }
     }
   }
 

package/client/components/create-user.ts

@@ -6,83 +6,58 @@ import { i18next } from '@operato/i18n'
 @customElement('create-user')
 class CreateUser extends LitElement {
   static styles = css`
-    [field-2column] {
+    :host {
+      --mdc-text-field-fill-color: var(--theme-white-color);
       background-color: var(--theme-white-color);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
+
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 1fr 2fr auto;
       gap: 5px 15px;
       clear: both;
       max-width: var(--input-container-max-width);
-    }
-    [field] {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: var(--padding-default);
-    }
-    [grid-span] {
-      grid-column: span 2;
-    }
 
-    input {
-      border: var(--border-dark-color);
-      border-radius: var(--border-radius);
-      margin: var(--input-margin);
-      padding: var(--input-padding);
-      min-width: 250px;
-      font: var(--input-font);
+      align-items: center;
     }
-    label {
-      display: flex;
-      flex-direction: column;
 
-      font: var(--label-font);
-      color: var(--label-color);
-      text-transform: var(--label-text-transform);
-    }
     mwc-button {
       margin: var(--input-margin);
     }
+
     @media screen and (max-width: 480px) {
-      div {
-        display: grid;
+      :host {
+        grid-template-columns: 1fr 1fr;
       }
-      [field] {
+
+      mwc-button {
         grid-column: span 2;
+
+        margin: var(--input-margin);
       }
     }
   `
 
-  @query('input[name=name]') nameInput!: HTMLInputElement
-  @query('input[name=email]') emailInput!: HTMLInputElement
+  @query('[name=name]') nameInput!: HTMLInputElement
+  @query('[name=email]') emailInput!: HTMLInputElement
 
   render() {
     return html`
-      <div field-2column>
-        <div field>
-          <label
-            >${i18next.t('label.x name', { x: i18next.t('label.user') })}
-            <input name="name" type="text" required />
-          </label>
-        </div>
-        <div field>
-          <label
-            >${i18next.t('field.email')}
-            <input name="email" type="email" required autocapitalize="off" />
-          </label>
-        </div>
-
-        <div>
-          <mwc-button
-            @click=${this.onCreateUser.bind(this)}
-            outlined
-            label="${i18next.t('button.create')}"
-          ></mwc-button>
-        </div>
-      </div>
+      <mwc-textfield
+        type="text"
+        name="name"
+        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
+      ></mwc-textfield>
+
+      <mwc-textfield type="email" name="email" label=${String(i18next.t('field.email'))}></mwc-textfield>
+
+      <mwc-button
+        @click=${this.onCreateUser.bind(this)}
+        outlined
+        label=${String(i18next.t('button.create'))}
+      ></mwc-button>
     `
   }
 

package/client/components/invite-customer.ts

@@ -6,7 +6,7 @@ import { customElement, property, query } 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('invite-customer')
 class InviteCustomer extends localize(i18next)(LitElement) {
@@ -43,7 +43,7 @@ class InviteCustomer extends localize(i18next)(LitElement) {
           @click=${this.invite.bind(this)}
           outlined
           icon="group_add"
-          label="${i18next.t('label.invite customer')}"
+          label=${String(i18next.t('label.invite customer'))}
         ></mwc-button>
       </div>
     `
@@ -60,39 +60,39 @@ class InviteCustomer extends localize(i18next)(LitElement) {
         )
       }
 
-      const result = await CustomAlert({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
+      if (
+        await OxPrompt.open({
+          title: i18next.t('text.are_you_sure'),
+          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),
+          confirmButton: { text: i18next.t('button.confirm') },
+          cancelButton: { text: i18next.t('button.cancel') }
+        })
+      ) {
+        const customerDomainName = this.customerNameInput.value
 
-      if (!result.value) return
+        const response = await client.mutate({
+          mutation: gql`
+            mutation inviteCustomer($customerDomainName: String!) {
+              inviteCustomer(customerDomainName: $customerDomainName)
+            }
+          `,
+          variables: { customerDomainName },
+          context: gqlContext()
+        })
 
-      const customerDomainName = this.customerNameInput.value
+        if (!response.errors) {
+          const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))
 
-      const response = await client.mutate({
-        mutation: gql`
-          mutation inviteCustomer($customerDomainName: String!) {
-            inviteCustomer(customerDomainName: $customerDomainName)
+          if (answer) {
+            await OxPrompt.open({
+              type: 'success',
+              title: i18next.t('text.completed'),
+              confirmButton: { text: i18next.t('button.confirm') }
+            })
           }
-        `,
-        variables: { customerDomainName },
-        context: gqlContext()
-      })
 
-      if (!response.errors) {
-        const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))
-
-        if (answer) {
-          await CustomAlert({
-            type: 'success',
-            title: i18next.t('text.completed'),
-            confirmButton: { text: i18next.t('button.confirm') }
-          })
+          this.customerNameInput.value = ''
         }
-
-        this.customerNameInput.value = ''
       }
     } catch (e: any) {
       document.dispatchEvent(

package/client/components/invite-user.ts

@@ -6,7 +6,7 @@ import { customElement, query } 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('invite-user')
 class InviteUser extends localize(i18next)(LitElement) {
@@ -40,7 +40,7 @@ class InviteUser extends localize(i18next)(LitElement) {
         @click=${this.invite.bind(this)}
         outlined
         icon="group_add"
-        label="${i18next.t('label.invite user')}"
+        label=${String(i18next.t('label.invite user'))}
       ></mwc-button>
     `
   }
@@ -51,18 +51,18 @@ class InviteUser extends localize(i18next)(LitElement) {
         throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
       }
 
-      const result = await CustomAlert({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-
-      if (!result.value) return
-
-      await this.inviteUser(this.emailInput.value)
+      if (
+        await OxPrompt.open({
+          title: i18next.t('text.are_you_sure'),
+          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),
+          confirmButton: { text: i18next.t('button.confirm') },
+          cancelButton: { text: i18next.t('button.cancel') }
+        })
+      ) {
+        await this.inviteUser(this.emailInput.value)
 
-      this.dispatchEvent(new CustomEvent('invitationCompleted'))
+        this.dispatchEvent(new CustomEvent('invitationCompleted'))
+      }
     } catch (e: any) {
       document.dispatchEvent(
         new CustomEvent('notify', {
@@ -87,10 +87,11 @@ class InviteUser extends localize(i18next)(LitElement) {
     })
 
     if (!response.errors) {
-      await CustomAlert({
+      await OxPrompt.open({
         title: i18next.t('text.completed'),
         confirmButton: { text: i18next.t('button.confirm') }
       })
+
       this.emailInput.value = ''
     }
   }

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

@@ -6,7 +6,7 @@ import { customElement, property, query } 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('ownership-transfer-popup')
 class OwnershipTransferPopup extends localize(i18next)(LitElement) {
@@ -65,39 +65,38 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
       return
     }
 
-    const answer = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.are_you_sure_to_transfer_owner'),
-      confirmButton: { text: i18next.t('button.confirm') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!answer.value) {
-      history.back()
-      return
-    }
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_transfer_owner'),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation transferOwner($email: String!) {
+            transferOwner(email: $email)
+          }
+        `,
+        variables: { email: this.user.email },
+        context: gqlContext()
+      })
 
-    const response = await client.mutate({
-      mutation: gql`
-        mutation transferOwner($email: String!) {
-          transferOwner(email: $email)
-        }
-      `,
-      variables: { email: this.user.email },
-      context: gqlContext()
-    })
+      if (!response.errors?.length) {
+        await OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.owner_transfer_completed'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
 
-    if (!response.errors?.length) {
-      await CustomAlert({
-        type: 'success',
-        title: i18next.t('text.completed'),
-        text: i18next.t('text.owner_transfer_completed'),
-        confirmButton: { text: i18next.t('button.confirm') }
-      })
+        history.back()
 
+        this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))
+      }
+    } else {
       history.back()
-
-      this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))
     }
   }
 

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

@@ -7,7 +7,7 @@ import { customElement, property, query } 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'
 
 import { RoleSelector } from './role-selector'
 
@@ -123,34 +123,34 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
   }
 
   async onTerminateContract() {
-    const answer = await CustomAlert({
-      title: i18next.t('text.are_you_sure'),
-      text: i18next.t('text.are_you_sure_to_terminate_contract'),
-      confirmButton: { text: i18next.t('button.terminate contract') },
-      cancelButton: { text: i18next.t('button.cancel') }
-    })
-
-    if (!answer.value) return
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation terminateContract($partnerName: String!) {
-          terminateContract(partnerName: $partnerName)
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.are_you_sure_to_terminate_contract'),
+        confirmButton: { text: i18next.t('button.terminate contract') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation terminateContract($partnerName: String!) {
+            terminateContract(partnerName: $partnerName)
+          }
+        `,
+        variables: { partnerName: this.customer.name },
+        context: gqlContext()
+      })
+
+      if (!response.errors?.length) {
+        const answer = this.dispatchEvent(new CustomEvent('contractTerminated'))
+
+        if (answer) {
+          await OxPrompt.open({
+            type: 'success',
+            title: i18next.t('text.completed'),
+            confirmButton: { text: i18next.t('button.confirm') }
+          })
         }
-      `,
-      variables: { partnerName: this.customer.name },
-      context: gqlContext()
-    })
-
-    if (!response.errors?.length) {
-      const answer = this.dispatchEvent(new CustomEvent('contractTerminated'))
-
-      if (answer) {
-        await CustomAlert({
-          type: 'success',
-          title: i18next.t('text.completed'),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
       }
     }
   }

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);
       }
@@ -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>