refactored checkout workflow with stripe

web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue

@@ -4,14 +4,28 @@ 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
+    pass2: null,
+    ps: ""
   }),
+  computed: {
+    psswd_class: function(){
+      return this.ps.toLowerCase()
+    },
+    can_register: function() {
+      if (this.ps === "Strong") {
+        return 'can-register'
+      }
+      return ''
+    }
+  },
   methods: {
     ...mapActions({
       userRegister: 'User/userRegister'
@@ -31,6 +45,13 @@ export default {
           console.warn('Issue with getRegisterForm', error)
         })
     },
+    checkSubmitEnabled () {
+      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
@@ -61,6 +82,7 @@ export default {
   mounted(){
     // console.log('LoginBlock mounted');
     Drupal.attachBehaviors(this.$el);
+    this.checkSubmitEnabled()
   },
   render(h) {
     // console.log('LoginBlock render');
@@ -71,6 +93,15 @@ export default {
       // 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>
@@ -82,10 +113,36 @@ export default {
     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;