materio-d8/web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue

<script>

import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
import { MA } from 'vuejs/api/ma-axios'

import passwordStrength from 'check-password-strength'

export default {
  name: "RegisterForm",
  data: () => ({
    form: null,
    mail: null,
    pass1: null,
    pass2: null,
    ps: ""
  }),
  computed: {
    ...mapState({
      registerMessage: state => state.User.registerMessage,
    }),
    psswd_class: function(){
      return this.ps.toLowerCase()
    },
    can_register: function() {
      if (this.ps === "Strong") {
        return 'can-register'
      }
      return ''
    }
  },
  methods: {
    ...mapActions({
      userRegister: 'User/userRegister'
    }),
    getRegisterForm(){
      // Form through ajax is provided by materio_user drupal custom module
      // vuejs attributes a inserted by form alter in same module
      MA.get(`/materio_user/register_form`)
        .then(({data}) => {
          console.log("getRegisterForm data", data)
          this.form = Vue.compile(data.rendered)
          this.$options.staticRenderFns = [];
          this._staticTrees = [];
          this.form.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
          this.initFormBehaviours()
        })
        .catch((error) => {
          console.warn('Issue with getRegisterForm', error)
        })
    },
    initFormBehaviours(){
      Drupal.attachBehaviors(this.$el)
      this.checkSubmitEnabled()
    },
    checkSubmitEnabled () {
      console.log("checkSubmitEnabled", this)
      if (this.ps === 'Strong') {
        this.$refs.register.disabled = false
      } else {
        this.$refs.register.disabled = true
      }
    },
    register () {
      console.log('register', this.mail, this.pass1, this.pass2)
      // TODO: check for identical password
      // TODO: check for valide email
      // TODO: check for unique email
      if (this.pass1 === this.pass2) {
          this.userRegister({
            name: this.mail,
            mail: this.mail,
            pass: this.pass1
          }).then( () => {
              console.log('registered from register component')
              this.$emit('onRegistered')
            }
          ).catch((error) => {
            console.warn('Issue with register from registerform component', error)
            Promise.reject(error)
          })

      }
    }
  },
  beforeMount () {
    if (!this.form) {
      this.getRegisterForm()
    }
  },
  mounted(){
    // console.log('LoginBlock mounted')
    if (this.form) {
      this.initForm()
    }
  },
  render(h) {
    // console.log('LoginBlock render')
    if (!this.form) {
      // console.log('LoginBlock render NAN')
      return h('span', 'Loading ...')
    } else {
      // console.log('LoginBlock render template')
      return this.form.render.call(this)
    }
  },
  watch: {
    pass1: function(n, o){
      if (n) {
        this.ps = passwordStrength(n).value
        console.log('watch pass1 n', n, 'ps :', this.ps)
        this.checkSubmitEnabled()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-type-email,
  .form-type-password-confirm{
    // display:inline-block;
    max-width:30%;
    margin:0;
  }
  .form-type-password input{
    &.weak {
      border-width: 2px;
      border-color: red!important;
      &:focus{
        outline:none;
      }
    }
    &.medium {
      border-width: 2px;
      border-color: orange!important;
      &:focus{
        outline:none;
      }
    }
    &.strong {
      border-width: 2px;
      border-color: green!important;
      &:focus{
        outline:none;
      }
    }
  }
  input{
    box-sizing:content-box;
    max-width:100%;
  }
  // input#edit-submit{
  //
  // }
  label,
  div.description{
    display:none;
  }
</style>