open-consul/ui/packages/consul-ui/app/modifiers/validate.js

import Modifier from 'ember-modifier';
import { action } from '@ember/object';

class ValidationError extends Error {}

export default class ValidateModifier extends Modifier {

  item = null;
  hash = null;

  validate(value, validations = {}) {
    if(Object.keys(validations).length === 0) {
      return;
    }
    const errors = {};
    Object.entries(this.hash.validations)
      // filter out strings, for now these are helps, but ain't great if someone has a item.help
      .filter(([key, value]) => typeof value !== 'string')
      .forEach(([key, item]) => {
        // optionally set things for you
        if(this.item) {
          this.item[key] = value;
        }
        (item || []).forEach((validation) => {
          const re = new RegExp(validation.test);
          if(!re.test(value)) {
            errors[key] = new ValidationError(validation.error);
          }
        });
    });
    const state = this.hash.chart.state;
    if(state.context == null) {
      state.context = {};
    }
    if(Object.keys(errors).length > 0) {
      state.context.errors = errors;
      this.hash.chart.dispatch("ERROR");
    } else {
      state.context.errors = null;
      this.hash.chart.dispatch("RESET");
    }
  }

  @action
  reset(e) {
    if(e.target.value.length === 0) {
      const state = this.hash.chart.state;
      if(!state.context) {
        state.context = {};
      }
      if(!state.context.errors) {
        state.context.errors = {};
      }
      Object.entries(this.hash.validations)
        // filter out strings, for now these are helps, but ain't great if someone has a item.help
        .filter(([key, value]) => typeof value !== 'string')
        .forEach(([key, item]) => {
          if(typeof state.context.errors[key] !== 'undefined') {
            delete state.context.errors[key];
          }
      });
      if(Object.keys(state.context.errors).length === 0) {
        state.context.errors = null;
        this.hash.chart.dispatch("RESET");
      }
    }
  }

  async connect([value], _hash) {
    this.element.addEventListener(
      'input',
      this.listen
    );
    this.element.addEventListener(
      'blur',
      this.reset
    );
    if(this.element.value.length > 0) {
      await Promise.resolve();
      if(this && this.element) {
        this.validate(this.element.value, this.hash.validations);
      }
    }
  }

  @action
  listen(e) {
    this.validate(e.target.value, this.hash.validations);
  }

  disconnect() {
    this.item = null;
    this.hash = null;
    this.element.removeEventListener(
      'input',
      this.listen
    )
    this.element.removeEventListener(
      'blur',
      this.reset
    )
  }


  didReceiveArguments() {
    const [value] = this.args.positional;
    const _hash = this.args.named;

    this.item = value;
    this.hash = _hash;

    if(typeof _hash.chart === 'undefined') {
      this.hash.chart = {
        state: {
          context: {}
        },
        dispatch: (state) => {
          switch(state) {
            case 'ERROR':
              _hash.onchange(this.hash.chart.state.context.errors);
              break;
            case 'RESET':
              _hash.onchange();
              break;
          }
        }
      };

    }
  }

  didInstall() {
    this.connect(this.args.positional, this.args.named);
  }

  willRemove() {
    this.disconnect();
  }
}