@things-factory/auth-ui 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,163 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/elevated-button.js'
-import '@material/web/textfield/filled-text-field.js'
-
-import '@operato/i18n/ox-i18n.js'
-import '@operato/i18n/ox-i18n-selector.js'
-import '@operato/layout/ox-snack-bar.js'
-
-import '../components/profile-component'
-
-import { css, html, nothing } from 'lit'
-import { property, query } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { AUTH_STYLE_SIGN } from '../auth-style-sign'
-import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'
-import { AbstractAuthPage } from './abstract-auth-page'
-
-export abstract class AbstractPasswordReset extends AbstractAuthPage {
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        overflow: hidden;
-
-        display: flex;
-        flex-direction: row;
-
-        width: 100vw;
-        height: 100vh;
-        height: 100dvh;
-      }
-
-      @media print {
-        :host {
-          width: 100%;
-          height: 100%;
-          min-height: 100vh;
-          min-height: 100dvh;
-        }
-      }
-    `,
-    AUTH_STYLE_SIGN
-  ]
-
-  @property({ type: Object }) data: any
-  @property({ type: String }) token?: string
-
-  @query('#confirm-password') confirmPass!: HTMLElement
-
-  private passwordPattern: string = ''
-  private passwordHelp: string = ''
-
-  abstract get submitButtonLabel(): string
-
-  render() {
-    var { icon, title, description } = this.applicationMeta
-    const { disableUserFavoredLanguage, languages } = this.data || {}
-
-    return html`
-      <div class="wrap">
-        <div class="auth-brand">
-          <img src=${icon} />
-          <strong class="name">${title}</strong>
-          <span class="welcome-msg">${description}</span>
-        </div>
-
-        <div class="auth-form">
-          <h3><ox-i18n msgid="title.${this.title}"></ox-i18n></h3>
-          <form
-            id="form"
-            action="${this.actionUrl}"
-            method="post"
-            @keypress=${e => {
-              if (e.key == 'Enter') this._onSubmit(e)
-            }}
-          >
-            <input name="token" type="hidden" .value=${this.token || ''} required />
-            <div class="field">
-              <md-filled-text-field
-                name="password"
-                type="password"
-                label=${String(i18next.t('label.password'))}
-                pattern=${this.passwordPattern || ''}
-                supporting-text=${this.passwordHelp}
-                autocomplete="off"
-                @input=${e => {
-                  var val = e.target.value
-                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
-                }}
-                required
-                ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
-              >
-            </div>
-
-            <div class="field">
-              <md-filled-text-field
-                id="confirm-password"
-                name="confirm-password"
-                type="password"
-                label=${String(i18next.t('field.confirm password'))}
-                autocomplete="off"
-                required
-                ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
-              >
-            </div>
-
-            <md-elevated-button id="submit-button" type="button" @click=${e => this._onSubmit(e)}>
-              <ox-i18n msgid="${this.submitButtonLabel}"></ox-i18n>
-            </md-elevated-button>
-
-            ${!disableUserFavoredLanguage
-              ? html` <div id="locale-area">
-                  <label for="locale-selector"><md-icon>language</md-icon></label>
-                  <ox-i18n-selector
-                    id="locale-selector"
-                    value=${i18next.language || 'en-US'}
-                    .languages=${languages}
-                    @change=${e => {
-                      var locale = e.detail
-                      if (!locale) return
-
-                      i18next.changeLanguage(locale)
-                    }}
-                  ></ox-i18n-selector>
-                </div>`
-              : nothing}
-          </form>
-        </div>
-      </div>
-
-      <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
-    `
-  }
-
-  updated(changed) {
-    super.updated(changed)
-
-    if (changed.has('data')) {
-      this.token = this.data.token
-    }
-
-    if (changed.has('message')) {
-      if (!this.message) {
-        this.hideSnackbar()
-      } else {
-        this.showSnackbar({
-          timer: -1
-        })
-      }
-    }
-  }
-
-  languageUpdated() {
-    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source
-    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)
-  }
-
-  async submit() {
-    this.formEl.submit()
-  }
-}

package/client/components/abstract-sign.ts

@@ -1,127 +0,0 @@
-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 username = this.data?.username || ''
-    const autocompletable = this.autocompletable
-
-    return html`
-      <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
-
-      <div class="field">
-        <md-filled-text-field
-          name="username"
-          type="text"
-          label=${String(i18next.t('field.user-id or email'))}
-          required
-          .value=${username}
-          autocomplete=${autocompletable ? 'username' : 'off'}
-          autocapitalize="off"
-          pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
-          @input=${(e: Event) => {
-            const target = e.target as HTMLInputElement
-            if (target.validity.typeMismatch) {
-              target.setCustomValidity(i18next.t('text.invalid-username'))
-            } else {
-              target.setCustomValidity('')
-            }
-          }}
-          ><md-icon slot="leading-icon">id_card</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">password</md-icon></md-filled-text-field
-        >
-      </div>
-
-      <div class="submit-buttons-container">
-        <md-elevated-button class="submit-button" type="button" raised @click=${e => this._onSubmit(e)}>
-          <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
-        </md-elevated-button>
-        ${isAvailableWebauthn
-          ? 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

@@ -1,153 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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 & { show: () => void }
-  @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.show()}>${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" slot="content">
-          <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>
-
-          <md-elevated-button slot="primaryAction" type="button" @click=${e => this._submit(e)}
-            >${i18next.t('button.submit')}</md-elevated-button
-          >
-        </div>
-      </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

@@ -1,141 +0,0 @@
-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 } }))
-  }
-}