modern-spa-boilerplate/src/app/components/User.js

Modern Boilerplate for Single Page Applications

import template from "./User.html"
import config from "./User.json!json"
import {
  updateFirstname,
  updateLastname
} from "app/vuex/actions"

const languageMap = {
  FIRSTNAME_NO_VALUE: "Please enter your first name",
  LASTNAME_NO_VALUE: "Please enter your last name"
}

export default {
  template: template,

  data: () =>
  {
    return {
      translation: languageMap
    }
  },

  methods: {
    updateFirstnameInput(e) { this.updateFirstname(e.target.value) },
    updateLastnameInput(e) { this.updateLastname(e.target.value) },
    clearInput() {
      this.updateFirstname("")
      this.updateLastname("")
    }
  },

  computed: {
    usernameInvalid() { return this.usernameInvalidList.length > 0 },
    firstnameInvalid() { return this.firstnameInvalidList.length > 0 },
    lastnameInvalid() { return this.lastnameInvalidList.length > 0 },

    hash: () => config.hash
  },

  vuex: {
    getters: {
      firstName: (state) => state.user.firstname,
      lastName: (state) => state.user.lastname
    },

    actions: {
      updateFirstname,
      updateLastname
    }
  },

  validators: {
    usernameInvalidList: (validator) => validator.isInvalid("user"),
    firstnameInvalidList: (validator) => validator.isInvalid("user.firstname"),
    lastnameInvalidList: (validator) => validator.isInvalid("user.lastname")
  }
}