@things-factory/auth-ui 5.0.14 → 6.0.0-alpha.3

package/client/{bootstrap.js → bootstrap.ts}

@@ -4,9 +4,9 @@ import '@operato/i18n'
 import { html } from 'lit-html'
 
 import { TOOL_POSITION } from '@operato/layout'
-import { auth } from '@things-factory/auth-base'
+import { auth } from '@things-factory/auth-base/dist-client'
 import { ADD_MORENDA } from '@things-factory/more-base'
-import { navigate, store } from '@things-factory/shell'
+import { navigate, store } from '@things-factory/shell/client'
 
 export default function bootstrap() {
   /* add user profile morenda */

package/client/components/{abstract-auth-page.js → abstract-auth-page.ts}

@@ -7,69 +7,72 @@ import '@operato/i18n/ox-i18n-selector.js'
 import '@operato/layout/ox-snack-bar.js'
 
 import { css, html, LitElement } from 'lit'
+import { property, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import { isSafari } from '@operato/utils'
 
-import { AUTH_STYLE_SIGN } from '../auth-style-sign'
+import { AUTH_STYLE_SIGN } from '../auth-style-sign.js'
 
-export class AbstractAuthPage extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          position: relative;
-          overflow: hidden;
+export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        position: relative;
+        overflow: hidden;
 
-          display: flex;
-          flex-direction: row;
+        display: flex;
+        flex-direction: row;
 
-          width: 100vw;
-          height: 100vh;
-        }
-        .content {
-          flex: 1;
-          overflow: auto;
-        }
+        width: 100vw;
+        height: 100vh;
+      }
+      .content {
+        flex: 1;
+        overflow: auto;
+      }
 
-        [home] {
-          position: absolute;
-          top: 10px;
-          left: 10px;
-          font-size: 2em;
-          color: white;
-        }
+      [home] {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        font-size: 2em;
+        color: white;
+      }
 
-        [hidden] {
-          display: none;
-        }
+      [hidden] {
+        display: none;
+      }
+
+      #snackbar {
+        width: 100%;
+        z-index: 10;
+      }
 
-        #snackbar {
+      @media print {
+        :host {
           width: 100%;
-          z-index: 10;
+          height: 100%;
+          min-height: 100vh;
         }
+      }
+    `,
+    AUTH_STYLE_SIGN
+  ]
 
-        @media print {
-          :host {
-            width: 100%;
-            height: 100%;
-            min-height: 100vh;
-          }
-        }
-      `,
-      AUTH_STYLE_SIGN
-    ]
-  }
+  @property({ type: Object }) data: any
+  @property({ type: String }) message?: string
+  @property({ type: Object }) detail: any
+  @property({ type: String }) redirectTo?: string
 
-  static get properties() {
-    return {
-      data: Object,
-      message: String,
-      detail: Object,
-      redirectTo: String
-    }
+  @query('#form') formEl!: HTMLFormElement
+
+  private _applicationMeta?: {
+    icon: string
+    title: string
+    description: string
   }
 
   render() {
@@ -130,7 +133,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
 
   firstUpdated() {
     setTimeout(() => {
-      this.renderRoot.querySelector('mwc-textfield').focus()
+      ;(this.renderRoot.querySelector('mwc-textfield') as any).focus()
     }, 100)
 
     this.formEl.reset = () => {
@@ -145,13 +148,10 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
     }
   }
 
-  get pageName() {}
+  abstract get pageName(): string
+  abstract get actionUrl(): string
 
-  get formEl() {
-    return this.renderRoot.querySelector('#form')
-  }
-
-  get formElements() {
+  get formElements(): HTMLInputElement[] {
     return Array.from(this.formEl.querySelectorAll('[name]'))
   }
 
@@ -168,10 +168,18 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
           label=${i18next.t('field.email')}
           required
           .value=${email}
+          .validationMessage=${i18next.t('text.invalid-email')}
+          autocomplete="username email"
         ></mwc-textfield>
       </div>
       <div class="field">
-        <mwc-textfield name="password" type="password" label=${i18next.t('field.password')} required></mwc-textfield>
+        <mwc-textfield
+          name="password"
+          type="password"
+          label=${i18next.t('field.password')}
+          autocomplete="password"
+          required
+        ></mwc-textfield>
       </div>
 
       <mwc-button class="ui" type="submit" raised @click=${e => this._onSubmit(e)}>
@@ -201,10 +209,15 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
     return this.formElements.every(el => el.checkValidity())
   }
 
-  async submit() {}
+  abstract submit()
+
+  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {
+    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {
+      level: string
+      message: string
+      active: boolean
+    }
 
-  showSnackbar({ level, message, timer = 3000 } = {}) {
-    const snackbar = this.renderRoot.querySelector('#snackbar')
     if (level) snackbar.level = level
     if (message) snackbar.message = message
     snackbar.active = true
@@ -216,20 +229,25 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
   }
 
   hideSnackbar() {
-    const snackbar = this.renderRoot.querySelector('#snackbar')
+    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {
+      level: string
+      message: string
+      active: boolean
+    }
+
     snackbar.active = false
   }
 
   get applicationMeta() {
     if (!this._applicationMeta) {
-      var iconLink = document.querySelector('link[rel="application-icon"]')
-      var titleMeta = document.querySelector('meta[name="application-name"]')
-      var descriptionMeta = document.querySelector('meta[name="application-description"]')
+      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
+      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
+      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')
 
       this._applicationMeta = {
-        icon: iconLink ? iconLink.href : logo,
-        title: titleMeta ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
+        icon: iconLink?.href || '',
+        title: titleMeta?.content || 'Things Factory',
+        description: descriptionMeta?.content || 'Reimagining Software'
       }
     }
 

package/client/components/{abstract-password-reset.js → abstract-password-reset.ts}

@@ -6,6 +6,7 @@ import '@operato/i18n/ox-i18n-selector.js'
 import '@operato/layout/ox-snack-bar.js'
 
 import { css, html } from 'lit'
+import { property, query } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { isSafari } from '@operato/utils'
@@ -14,47 +15,40 @@ import { AUTH_STYLE_SIGN } from '../auth-style-sign'
 import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'
 import { AbstractAuthPage } from './abstract-auth-page'
 
-export class AbstractPasswordReset extends AbstractAuthPage {
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          overflow: hidden;
+export abstract class AbstractPasswordReset extends AbstractAuthPage {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        overflow: hidden;
 
-          display: flex;
-          flex-direction: row;
+        display: flex;
+        flex-direction: row;
 
-          width: 100vw;
-          height: 100vh;
-        }
+        width: 100vw;
+        height: 100vh;
+      }
 
-        @media print {
-          :host {
-            width: 100%;
-            height: 100%;
-            min-height: 100vh;
-          }
+      @media print {
+        :host {
+          width: 100%;
+          height: 100%;
+          min-height: 100vh;
         }
-      `,
-      AUTH_STYLE_SIGN
-    ]
-  }
+      }
+    `,
+    AUTH_STYLE_SIGN
+  ]
 
-  static get properties() {
-    return {
-      data: Object,
-      token: String
-    }
-  }
+  @property({ type: Object }) data: any
+  @property({ type: String }) token?: string
 
-  get actionUrl() {
-    return ''
-  }
+  @query('#confirm-password') confirmPass!: HTMLElement
 
-  get submitButtonLabel() {
-    return ''
-  }
+  private passwordPattern: string = ''
+  private passwordHelp: string = ''
+
+  abstract get submitButtonLabel(): string
 
   render() {
     var { icon, title, description } = this.applicationMeta
@@ -88,8 +82,7 @@ export class AbstractPasswordReset extends AbstractAuthPage {
                 helperPersistent
                 @input=${e => {
                   var val = e.target.value
-                  var confirmPass = this.renderRoot.querySelector('#confirm-password')
-                  confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
+                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
                 }}
                 required
               ></mwc-textfield>
@@ -162,20 +155,4 @@ export class AbstractPasswordReset extends AbstractAuthPage {
   async submit() {
     this.formEl.submit()
   }
-
-  get applicationMeta() {
-    if (!this._applicationMeta) {
-      var iconLink = document.querySelector('link[rel="application-icon"]')
-      var titleMeta = document.querySelector('meta[name="application-name"]')
-      var descriptionMeta = document.querySelector('meta[name="application-description"]')
-
-      this._applicationMeta = {
-        icon: iconLink ? iconLink.href : logo,
-        title: titleMeta ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-      }
-    }
-
-    return this._applicationMeta
-  }
 }

package/client/components/{abstract-sign.js → abstract-sign.ts}

@@ -1,6 +1,6 @@
-import { AbstractAuthPage } from './abstract-auth-page'
+import { AbstractAuthPage } from './abstract-auth-page.js'
 
-export class AbstractSign extends AbstractAuthPage {
+export abstract class AbstractSign extends AbstractAuthPage {
   async submit() {
     this.formEl.submit()
   }

package/client/components/change-password.ts

@@ -0,0 +1,99 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { auth } from '@things-factory/auth-base/dist-client'
+
+@customElement('change-password')
+export class ChangePassword extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+      *:focus {
+        outline: none;
+      }
+      input {
+        border: var(--change-password-field-border);
+        border-radius: var(--change-password-field-border-radius);
+        margin: var(--change-password-field-margin);
+        padding: var(--change-password-field-padding);
+
+        font: var(--change-password-field-font);
+        width: var(--change-password-field-width);
+      }
+      input:focus {
+        border: 1px solid var(--focus-background-color);
+      }
+
+      ::placeholder {
+        font-size: 0.8rem;
+        text-transform: capitalize;
+      }
+
+      mwc-button {
+        margin: var(--margin-narrow) 0 var(--margin-default) 0;
+      }
+
+      button {
+        background-color: var(--secondary-color, #394e64);
+        margin: 2px 2px 10px 2px;
+        height: var(--button-height, 28px);
+        color: var(--button-color, #fff);
+        font: var(--button-font);
+        border-radius: var(--button-radius, 5px);
+        border: var(--button-border, 1px solid transparent);
+        line-height: 1.5;
+      }
+      button:hover,
+      button:active {
+        background-color: var(--button-active-background-color, #22a6a7);
+        border: var(--button-active-border);
+      }
+    `
+  ]
+
+  @query('form') form!: HTMLFormElement
+
+  render() {
+    return html`
+      <form>
+        <div class="field">
+          <input type="password" name="current_pass" placeholder=${i18next.t('text.current password')} required />
+        </div>
+        <div class="field">
+          <input type="password" name="new_pass" placeholder=${i18next.t('text.new password')} required />
+        </div>
+        <div class="field">
+          <input type="password" name="confirm_pass" placeholder=${i18next.t('text.confirm password')} required />
+        </div>
+
+        <mwc-button raised label="${i18next.t('text.change password')}" @click=${this.submit.bind(this)}></mwc-button>
+      </form>
+    `
+  }
+
+  async submit() {
+    const formData = new FormData(this.form)
+    let params = {}
+    for (const [key, value] of formData.entries()) {
+      if (!value) {
+        const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder
+        return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))
+      }
+      params[key] = value
+    }
+
+    if (params['new_pass'] !== params['confirm_pass']) {
+      return this.showToast(i18next.t('error.new_password_and_confirm_password_do_not_match'))
+    }
+
+    auth.changePassword(params)
+    this.form.reset()
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
+  }
+}

package/client/components/{contact-us.js → contact-us.ts}

@@ -5,10 +5,12 @@ import '@material/mwc-dialog'
 import '@operato/i18n'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { auth } from '@things-factory/auth-base'
+import { auth } from '@things-factory/auth-base/dist-client'
 
+@customElement('contact-us')
 export class ContactUs extends localize(i18next)(LitElement) {
   static get styles() {
     return [
@@ -16,9 +18,11 @@ export class ContactUs extends localize(i18next)(LitElement) {
         :host {
           --mdc-theme-primary: var(--primary-color);
         }
+
         * {
           box-sizing: border-box;
         }
+
         *:focus {
           outline: none;
         }
@@ -32,13 +36,15 @@ export class ContactUs extends localize(i18next)(LitElement) {
     ]
   }
 
-  get dialog() {
-    return this.renderRoot.querySelector('#dialog')
-  }
+  @query('#dialog') dialog!: HTMLElement & { open: boolean }
+  @query('#subject-input') subjectInput!: HTMLInputElement
+  @query('#sender-input') senderInput!: HTMLInputElement
+  @query('#content-input') contentInput!: HTMLInputElement
 
   render() {
     return html`
-      <mwc-button label=${i18next.t('button.need help')} @click=${e => (this.dialog.open = true)}></mwc-button>
+      <mwc-button raised label=${i18next.t('button.need help')} @click=${e => (this.dialog.open = true)}></mwc-button>
+
       <mwc-dialog id="dialog" heading=${i18next.t('title.need help')}>
         <form action="" method="POST">
           <input id="subject-input" name="subject" type="hidden" />
@@ -53,7 +59,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
             required
             @input=${e => {
               const val = e.target.value
-              this.renderRoot.querySelector('#subject-input').value = val
+              this.subjectInput.value = val
             }}
           ></mwc-textfield>
           <mwc-textfield
@@ -63,7 +69,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
             required
             @input=${e => {
               const val = e.target.value
-              this.renderRoot.querySelector('#sender-input').value = val
+              this.senderInput.value = val
             }}
           ></mwc-textfield>
           <mwc-textarea
@@ -73,7 +79,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
             @keydown=${e => e.stopPropagation()}
             @input=${e => {
               const val = e.target.value
-              this.renderRoot.querySelector('#content-input').value = val
+              this.contentInput.value = val
             }}
           ></mwc-textarea>
         </div>
@@ -82,19 +88,21 @@ export class ContactUs extends localize(i18next)(LitElement) {
           type="submit"
           label=${i18next.t('button.submit')}
           raised
-          @click=${e => this._submit()}
+          @click=${e => this._submit(e)}
         ></mwc-button>
         <mwc-button slot="secondaryAction" dialogAction="cancel" label=${i18next.t('button.cancel')}></mwc-button>
       </mwc-dialog>
     `
   }
 
-  _checkValidity() {}
+  _checkValidity(): boolean {
+    return false
+  }
 
-  _submit(e) {
+  _submit(e: MouseEvent) {
     if (!this._checkValidity()) return
 
-    const form = e.target
+    const form = e.target as HTMLFormElement
 
     const formData = new FormData(form)
     let json = {}
@@ -109,5 +117,3 @@ export class ContactUs extends localize(i18next)(LitElement) {
     form.reset()
   }
 }
-
-customElements.define('contact-us', ContactUs)

package/client/components/{create-domain-popup.js → create-domain-popup.ts}

@@ -2,59 +2,56 @@ import '@material/mwc-button'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
 
+import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { client, CustomAlert } from '@things-factory/shell'
+import { CustomAlert } from '@things-factory/shell/client'
 
+@customElement('create-domain-popup')
 class CreateDomainPopup extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {}
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          background-color: var(--main-section-background-color);
-          padding: var(--padding-wide);
-          overflow: auto;
-        }
-        input.checkValidName {
-          background-color: #fce6e6;
-        }
-        mwc-button {
-          display: flex;
-          justify-content: center;
-        }
-        label {
-          display: flex;
-          flex-direction: column;
-
-          font: var(--label-font);
-          color: var(--label-color);
-          text-transform: var(--label-text-transform);
-        }
-        input {
-          border: var(--border-dark-color);
-          border-radius: var(--border-radius);
-          margin: var(--input-margin);
-          padding: var(--input-padding);
-          background-color: var(--theme-white-color);
-          font: var(--input-font);
-
-          flex: 1;
-        }
-        [field] {
-          grid-column: span 2;
-        }
-        [buttons] {
-          margin-top: auto;
-        }
-      `
-    ]
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
+      input.checkValidName {
+        background-color: #fce6e6;
+      }
+      mwc-button {
+        display: flex;
+        justify-content: center;
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+      input {
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        background-color: var(--theme-white-color);
+        font: var(--input-font);
+
+        flex: 1;
+      }
+      [field] {
+        grid-column: span 2;
+      }
+      [buttons] {
+        margin-top: auto;
+      }
+    `
+  ]
 
   render() {
     return html`
@@ -93,9 +90,10 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
   }
 
   async onCreateDomain() {
-    const domainInput = {}
+    const domainInput: { [prop: string]: string } = {}
     this.inputData.forEach(data => (domainInput[data.name] = data.value))
     const regExp = /^[a-zA-z ]+$/
+
     if (!regExp.test(domainInput.name)) {
       return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))
     }
@@ -130,5 +128,3 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
   }
 }
-
-window.customElements.define('create-domain-popup', CreateDomainPopup)