refactored checkout workflow with stripe

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -31,7 +31,7 @@
       :styles="{width:'500px', height:'300px'}"
     >
       <section id="pricing-modal-login-register">
-        <h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
+        <h2>{{ $t("materio.Please login or create a new account to order your access") }}</h2>
         <LoginRegister
           :callbackargs="showLoginModal"
           @onLogedIn="onLogedIn"
@@ -150,7 +150,7 @@ export default {
                   // redirect to /cart
                   // window.location.href = "/cart"
                   // TODO: redirect to checkout instead of cart
-                  window.location.href = `/checkout/${data[0].order_id.target_id}/order_information`
+                  window.location.href = `/checkout/${data[0].order_id}/order_information`
                 })
                 .catch(( error ) => {
                     console.warn('Issue with product add to cart', error)

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;

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -2,7 +2,11 @@
   <div id="user-tools">
     <h4
       class="mdi mdi-account"
-    >{{ mail }}</h4>
+    >
+    <a href="/user">
+      {{ mail }}
+    </a>
+    </h4>
     <a href="/admin/content/materials"
       v-if="isAdmin"
       class="mdi mdi-settings"