@things-factory/auth-ui 8.0.0 → 9.0.0-beta.3

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,113 +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 & { 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

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

package/client/components/create-role.ts

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

package/client/components/create-user.ts

@@ -1,95 +0,0 @@
-import '@material/web/button/outlined-button.js'
-import '@material/web/textfield/filled-text-field.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, query } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-@customElement('create-user')
-class CreateUser extends 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);
-    }
-
-    @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=email]') emailInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <md-filled-text-field
-        type="text"
-        name="name"
-        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-      ></md-filled-text-field>
-
-      <md-filled-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-filled-text-field>
-
-      <md-outlined-button @click=${this.onCreateUser.bind(this)}
-        >${String(i18next.t('button.create'))}</md-outlined-button
-      >
-    `
-  }
-
-  async onCreateUser() {
-    try {
-      if (!this.emailInput.checkValidity()) {
-        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
-      }
-
-      if (!this.nameInput.value) {
-        throw new Error(i18next.t('error.value is empty', { value: 'name' }))
-      }
-
-      const user = {
-        name: this.nameInput.value.trim(),
-        email: this.emailInput.value.trim()
-      }
-
-      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))
-
-      this.nameInput.value = ''
-      this.emailInput.value = ''
-    } catch (e: any) {
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            level: 'error',
-            message: 'message' in e ? e.message : e
-          }
-        })
-      )
-    }
-  }
-}

package/client/components/credential-manager.ts

@@ -1,64 +0,0 @@
-import gql from 'graphql-tag'
-import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-
-@customElement('credential-manager')
-export class CredentialManager extends LitElement {
-  @property({ type: Array }) credentials: {
-    credentialId: string
-  }[] = []
-
-  static styles = css`
-    div {
-      margin: 20px;
-    }
-    button {
-      margin: 5px;
-    }
-  `
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.fetchCredentials()
-  }
-
-  async fetchCredentials() {
-    const response = await fetch('/auth/credentials', {
-      method: 'GET',
-      credentials: 'include'
-    })
-    this.credentials = await response.json()
-  }
-
-  async deleteCredential(credentialId: string) {
-    const response = await fetch(`/credentials/${credentialId}`, {
-      method: 'DELETE',
-      credentials: 'include'
-    })
-    if (response.ok) {
-      this.fetchCredentials()
-    } else {
-      console.error('Failed to delete credential')
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <h2>Manage Your WebAuthn Credentials</h2>
-        <ul>
-          ${this.credentials.map(
-            credential => html`
-              <li>
-                ${credential.credentialId}
-                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>
-              </li>
-            `
-          )}
-        </ul>
-      </div>
-    `
-  }
-}