@things-factory/auth-ui 8.0.0-beta.9 → 8.0.0

package/client/components/abstract-sign.ts

@@ -0,0 +1,127 @@
+import '@operato/i18n/ox-i18n.js'
+
+import { html, nothing } from 'lit'
+import { startAuthentication } from '@simplewebauthn/browser'
+
+import { i18next } from '@operato/i18n'
+import { notify } from '@operato/layout'
+
+import { AbstractAuthPage } from './abstract-auth-page.js'
+
+const isAvailableWebauthn = 'PublicKeyCredential' in window
+
+interface AssertionResponse {
+  id: string
+  rawId?: number[]
+  response: {
+    authenticatorData: string
+    clientDataJSON: string
+    signature: string
+    userHandle: string | null
+  }
+  type: PublicKeyCredentialType
+  authenticatorAttachment?: AuthenticatorAttachment
+}
+
+export abstract class AbstractSign extends AbstractAuthPage {
+  async submit() {
+    this.formEl.submit()
+  }
+
+  updated(changed) {
+    super.updated(changed)
+
+    if (changed.has('message')) {
+      if (!this.message) {
+        this.hideSnackbar()
+      } else {
+        this.showSnackbar({
+          level: 'error',
+          timer: -1
+        })
+      }
+    }
+  }
+
+  get formfields() {
+    const email = this.data?.email || ''
+    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'))}
+          required
+          .value=${email}
+          autocomplete=${autocompletable ? "username" : "off"}
+          autocapitalize="off"
+          @input=${(e: Event) => {
+            const target = e.target as HTMLInputElement
+            if (target.validity.typeMismatch) {
+              target.setCustomValidity(i18next.t('text.invalid-email'))
+            } else {
+              target.setCustomValidity('')
+            }
+          }}
+          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+        >
+      </div>
+      <div class="field">
+        <md-filled-text-field
+          name="password"
+          type="password"
+          label=${String(i18next.t('field.password'))}
+          autocomplete=${autocompletable ? "current-password" : "off"}
+          required
+          ><md-icon slot="leading-icon">vpn_key</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)}>
+          <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
+        </md-elevated-button>
+        ${isAvailableWebauthn
+          ? html` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
+          : nothing}
+      </div>
+    `
+  }
+
+  async authenticateUser() {
+    try {
+      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())
+      const assertionResp = await startAuthentication(options)
+      const verification = await fetch('/auth/signin-webauthn', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(assertionResp)
+      }).then(res => res.json())
+
+      if (verification.verified) {
+        const { redirectURL } = verification
+  
+        if (redirectURL) {
+          window.location.href = redirectURL
+        }
+      } else {
+        notify({
+          level: 'error',
+          message: verification.message
+        })
+      }
+  
+    } catch (error) {
+      notify({
+        level: 'error',
+        message: i18next.t('error.authn verification failed')
+      })
+    }
+  }
+}

package/client/components/change-password.ts

@@ -0,0 +1,153 @@
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'
+
+@customElement('change-password')
+export class ChangePassword extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      *:focus {
+        outline: none;
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      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;
+      }
+
+      md-elevated-button {
+        margin: var(--spacing-small) auto var(--spacing-medium) auto;
+        text-transform: capitalize;
+      }
+
+      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);
+      }
+
+      .helper-text {
+        font-size: 12px;
+        color: var(--md-sys-color-) #6c757d;
+        margin-top: 4px;
+        display: block; /* 텍스트를 입력 필드 아래에 배치 */
+        line-height: 1.5; /* 텍스트 줄 간격 조절 */
+      }
+    `
+  ]
+
+  @property({ type: Object }) passwordRule: {
+    lowerCase?: boolean
+    upperCase?: boolean
+    digit?: boolean
+    specialCharacter?: boolean
+    allowRepeat?: boolean
+    useTightPattern?: boolean
+    useLoosePattern?: boolean
+    tightCharacterLength?: number
+    looseCharacterLength?: number
+  } = {}
+
+  @query('form') form!: HTMLFormElement
+
+  private passwordPattern: string = ''
+  private passwordHelp: string = ''
+
+  render() {
+    return html`
+      <form>
+        <div class="field">
+          <input type="password" name="current_pass" placeholder=${i18next.t('text.current password')} required />
+        </div>
+        <span id="password-helper" class="helper-text">${this.passwordHelp}</span>
+        <div class="field">
+          <input
+            type="password"
+            name="new_pass"
+            placeholder=${i18next.t('text.new password')}
+            required
+            pattern=${this.passwordPattern}
+            aria-describedby="password-helper"
+          />
+        </div>
+        <div class="field">
+          <input type="password" name="confirm_pass" placeholder=${i18next.t('text.confirm password')} required />
+        </div>
+
+        <md-elevated-button @click=${this.submit.bind(this)}>${i18next.t('text.change password')}</md-elevated-button>
+      </form>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('passwordRule')) {
+      this.passwordPattern = generatePasswordPatternRegExp(this.passwordRule).source
+      this.passwordHelp = generatePasswordPatternHelp(this.passwordRule)
+    }
+  }
+
+  languageUpdated() {
+    this.passwordPattern = generatePasswordPatternRegExp(this.passwordRule).source
+    this.passwordHelp = generatePasswordPatternHelp(this.passwordRule)
+  }
+
+  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.ts

@@ -0,0 +1,113 @@
+import '@material/web/button/text-button.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/dialog/dialog.js'
+
+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/dist-client/auth.js'
+
+@customElement('contact-us')
+export class ContactUs extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        * {
+          box-sizing: border-box;
+        }
+
+        *:focus {
+          outline: none;
+        }
+
+        #input-form {
+          display: grid;
+          grid-template-rows: 1fr 1fr 3fr;
+          grid-gap: 10px 0;
+        }
+      `
+    ]
+  }
+
+  @query('#dialog') dialog!: HTMLElement & { open: boolean }
+  @query('#subject-input') subjectInput!: HTMLInputElement
+  @query('#sender-input') senderInput!: HTMLInputElement
+  @query('#content-input') contentInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>
+
+      <md-dialog id="dialog" heading=${i18next.t('title.need help')}>
+        <form action="" method="POST">
+          <input id="subject-input" name="subject" type="hidden" />
+          <input id="sender-input" name="sender" type="hidden" />
+          <input id="content-input" name="content" type="hidden" />
+        </form>
+        <div id="input-form">
+          <md-filled-text-field
+            type="text"
+            label=${i18next.t('label.subject')}
+            dialogInitialFocus
+            required
+            @input=${e => {
+              const val = e.target.value
+              this.subjectInput.value = val
+            }}
+          ></md-filled-text-field>
+          <md-filled-text-field
+            type="text"
+            name="sender"
+            label=${i18next.t('label.email')}
+            required
+            @input=${e => {
+              const val = e.target.value
+              this.senderInput.value = val
+            }}
+          ></md-filled-text-field>
+          <md-filled-text-field
+            name="content"
+            type="textarea"
+            label=${i18next.t('label.content')}
+            required
+            @keydown=${e => e.stopPropagation()}
+            @input=${e => {
+              const val = e.target.value
+              this.contentInput.value = val
+            }}
+          ></md-filled-text-field>
+        </div>
+        <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}
+          >${i18next.t('button.submit')}</md-elevated-button
+        >
+        <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
+      </md-dialog>
+    `
+  }
+
+  _checkValidity(): boolean {
+    return false
+  }
+
+  _submit(e: MouseEvent) {
+    if (!this._checkValidity()) return
+
+    const form = e.target as HTMLFormElement
+
+    const formData = new FormData(form)
+    let json = {}
+
+    //convert form into json
+    for (const [key, value] of formData.entries()) {
+      json[key] = value
+    }
+
+    auth.changePassword(json)
+
+    form.reset()
+  }
+}

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

@@ -0,0 +1,141 @@
+import '@material/web/icon/icon.js'
+
+import gql from 'graphql-tag'
+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 { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { CommonHeaderStyles } from '@operato/styles'
+
+@customElement('create-domain-popup')
+class CreateDomainPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-background);
+        overflow: auto;
+      }
+
+      form {
+        flex: 1;
+        padding: var(--spacing-large);
+      }
+
+      input.checkValidName {
+        background-color: #fce6e6;
+      }
+
+      label {
+        display: flex;
+        flex-direction: column;
+
+        font: var(--label-font);
+        color: var(--label-color, var(--md-sys-color-on-surface));
+        text-transform: var(--label-text-transform);
+      }
+
+      input {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        background-color: var(--md-sys-color-surface);
+        font: var(--input-font);
+      }
+
+      [field] {
+        grid-column: span 2;
+      }
+    `
+  ]
+
+  @query('input[name="name"]') nameInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <form>
+        <div field grid-span>
+          <label
+            >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input
+              type="text"
+              name="name"
+              @input=${this.checkValidation}
+              autofocus
+          /></label>
+        </div>
+
+        <div field grid-span>
+          <label>${i18next.t('label.description')}<input type="text" name="description" /></label>
+        </div>
+      </form>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${e => this.onCreateDomain()} done><md-icon>add</md-icon>${i18next.t('button.create')}</button>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.nameInput.focus() // autofocus
+  }
+
+  get inputData() {
+    return this.renderRoot.querySelectorAll('input')
+  }
+
+  checkValidation(e) {
+    const currentInput = e.currentTarget
+    const regExp = /^[a-zA-Z ]+$/
+
+    if (!regExp.test(currentInput.value)) {
+      currentInput.classList.add('checkValidName')
+    } else {
+      currentInput.classList.remove('checkValidName')
+    }
+  }
+
+  async onCreateDomain() {
+    const domainInput: { [prop: string]: string } = {}
+    this.inputData.forEach(data => (domainInput[data.name] = data.value))
+    const regExp = /^[a-zA-z0-9- ]+$/
+
+    if (!regExp.test(domainInput.name)) {
+      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation domainRegister($domainInput: DomainGeneratorInput!) {
+          domainRegister(domainInput: $domainInput) {
+            id
+            name
+          }
+        }
+      `,
+      variables: { domainInput }
+    })
+
+    if (!response.errors) {
+      await OxPrompt.open({
+        type: 'success',
+        title: i18next.t('text.completed'),
+        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+
+      history.back()
+
+      this.dispatchEvent(new CustomEvent('fetch-data'))
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
+  }
+}

package/client/components/create-role.ts

@@ -0,0 +1,123 @@
+import '@material/web/textfield/filled-text-field.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
+
+import { client, gqlContext } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+@customElement('create-role')
+class CreateRole extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+
+      display: grid;
+      grid-template-columns: 1fr 2fr auto;
+      gap: 5px 15px;
+      clear: both;
+      max-width: var(--input-container-max-width);
+
+      align-items: center;
+    }
+
+    md-outlined-button {
+      margin: var(--input-margin);
+      text-transform: capitalize;
+    }
+
+    @media screen and (max-width: 480px) {
+      :host {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      md-outlined-button {
+        grid-column: span 2;
+
+        margin: var(--input-margin);
+      }
+    }
+  `
+
+  @query('[name=name]') nameInput!: HTMLInputElement
+  @query('[name=description]') descriptionInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <md-filled-text-field
+        type="text"
+        name="name"
+        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
+      ></md-filled-text-field>
+      <md-filled-text-field
+        type="text"
+        name="description"
+        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
+      ></md-filled-text-field>
+
+      <md-outlined-button @click=${this.onCreateRole.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
+    `
+  }
+
+  async onCreateRole() {
+    let role: { name?: string; description?: string } = {}
+
+    const name = this.nameInput.value.trim()
+    const description = this.descriptionInput.value
+
+    if (!name) {
+      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
+    }
+
+    role.name = name
+    role.description = description
+
+    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 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 = ''
+      }
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}