iolovolio/components/account/account.js

$(document).ready( () => {
  console.log('Load component - account')
  const component = $('.component-account')

  if(component.length) {

    const pwdform = component.find('#pwdform')
    const updatePassword = pwdform.find('.update-password')
    const register = component.find('.register')
    const registerForm = component.find('.new-user-form')

    const orders = component.find('.order-row')

    orders.each( (i,e) => {
      const order = $(e)
      const id = order.data('id')
      const toggle = order.find('.toggle')
      const open = toggle.find('.open')
      const close = toggle.find('.close')
      const details = order.find('.order-details')

      open.off('.click').on('click.click', (e) => {
        open.hide(0)
        close.show(0)
        details.slideDown()
      })

      close.off('.click').on('click.click', (e) => {
        open.show(0)
        close.hide(0)
        details.slideUp()
      })
    })

    updatePassword.off('.click').on('click.click', (e) => {
      checkForm()
    })

    register.off('.click').on('click.click', () => {
      const inputs = registerForm.find('.input')
      const passwords = registerForm.find('.input[type="password"]')
      let errors = 0

      inputs.each( (i,e) => {
        const input = $(e)
        const type = input.prop('type')
        const required = input.prop('required')

        if(required) {
          switch(type) {
            case 'text':
            case 'select-one':
              if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
              } else {
                if(!input.val().length) {
                  input.addClass('error')
                  errors++
                } else { input.removeClass('error') }
              }
              break;
            case 'email':
              if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
            case 'password':
              if(!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^+-])[A-Za-z\d@$!%*#?&^+-]{8,}$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
            case 'checkbox':
              if(!input.is(':checked')) {
                input.closest('.checkbox').addClass('error')
                errors++
              } else {
                input.closest('.checkbox').removeClass('error')
              }
              break;
          }
        }
      })

      if(passwords[0].value != passwords[1].value) {
        $(passwords[1]).addClass('error')
        errors++
      } else {
        $(passwords[1]).removeClass('error')
      }

      if(!errors) {
        let body = {}
        inputs.each( (i,e) => {
          const input = $(e)
          const type = input.prop('type')
          const name = input.prop('name')
          body[name] = input.val()
        })

        grecaptcha.ready(() => {
          grecaptcha.execute(ENV.RECAPTCHA_SITE_KEY, {action: 'submit'}).then((token) => {
            Apis.addUser(body).then( (data) => {
              Apis.notification("Account aggiunto correttamente!<br>Riceverai una mail di conferma all'indirizzo indicato.")
            }).catch( (error) => {
              console.error(error)
              Apis.notification("ATTENZIONE: L'utente che stai cercando di inserire è già presente nel database")
            })
          })
        })
      }
    })

    const checkForm = () => {
      console.log('checkForm')
      const inputs = component.find('.input')
      const passwords = component.find('.input[type="password"]')
      let errors = 0

      inputs.each( (i,e) => {
        const input = $(e)
        const type = input.prop('type')
        const required = input.prop('required')

        if(required) {
          switch(type) {
            case 'text':
            case 'password':
              if(!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^+-])[A-Za-z\d@$!%*#?&^+-]{8,}$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
          }
        }
      })

      if(!errors) {
        pwdform.submit()
      }
    }
  }
})