github.com/resonatecoop/id@v1.1.0-43/frontend/src/components/forms/messages.js (about)

     1  const html = require('choo/html')
     2  const icon = require('@resonate/icon-element')
     3  
     4  module.exports = (state, form) => {
     5    const pristine = form.pristine
     6    const errors = form.errors
     7  
     8    const messages = Object.keys(errors).map((name) => {
     9      if (errors[name] && !pristine[name]) {
    10        return {
    11          message: errors[name].message,
    12          name
    13        }
    14      }
    15      return false
    16    }).filter(Boolean)
    17  
    18    return html`
    19      <div style="display:${messages.length ? 'block' : 'none'}" class="flex flex-column pa2 mb3 ba bw b--black-50">
    20        <h4 class="body-color f4 ma0">Something went wrong.</h4>
    21        <h5 class="body-color f5 ma0 pv1">Please check the errors in the form and try again.</h5>
    22        <ul class="flex flex-column list ma0 pa0 ml3 error">
    23          ${messages.map(messageItem)}
    24        </ul>
    25      </div>
    26    `
    27  
    28    function messageItem ({ message, name }) {
    29      return html`
    30        <li class="flex items-center pv1">
    31          ${icon('info', { class: 'icon fill-red icon--sm' })}
    32          <a href="/#${name}" onclick=${handleClick} class="ml1 link db underline">
    33            ${message}
    34          </a>
    35        </li>
    36      `
    37  
    38      function handleClick (e) {
    39        e.preventDefault()
    40        focusToInput(name)
    41      }
    42    }
    43  
    44    function focusToInput (name) {
    45      const invalidInput = document.querySelector(`#${name}`)
    46      if (invalidInput) {
    47        invalidInput.focus({ preventScroll: false }) // focus to first invalid input
    48      }
    49    }
    50  }