started modal login and registration

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1,3 +1,24 @@
+.overlay[data-v-b98ce164] {
+  background-color: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99999;
+}
+.modal[data-v-b98ce164] {
+  background-color: #fff;
+  position: absolute;
+  width: 250px;
+  height: 200px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
 
 
 #user-tools[data-v-4e9a834e]{

web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

@@ -12,9 +12,9 @@ export default {
       password: ''
     }
   },
-  computed: {
-    ...mapState(['User'])
-  },
+  // computed: {
+  //   ...mapState(['User'])
+  // },
   methods: {
     ...mapActions({
       userLogin: 'User/userLogin'

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

@@ -19,12 +19,16 @@
       <button
         type="button"
         name="addtocart"
-        @click.stop="addtocart"
+        @click.stop="checkaddtocart"
       >
         Commander
       </button>
     </aside>
-
+    <Modal
+      v-if="login"
+    >
+      i'm a modal
+    </Modal>
   </article>
 </template>
 
@@ -32,6 +36,8 @@
 
 import { REST } from 'vuejs/api/rest-axios'
 import router from 'vuejs/route'
+import { mapState, mapActions } from 'vuex'
+import Modal from 'vuejs/components/Helper/Modal'
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
@@ -41,16 +47,35 @@ export default {
   props: ['product'],
   data(){
     return {
-      quantity: 1
+      quantity: 1,
+      login:false,
+      register:false
     }
   },
+  computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin
+    })
+  },
   methods:{
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    checkaddtocart() {
+      console.log('checkaddtocart');
+
+      if(!this.isloggedin){
+        // TODO: show popup login or register
+        this.login = true
+        // TODO: rest login or register
+        // TODO: rest login
+        // TODO: this.addtocart()
+      }else{
+        this.addtocart()
+      }
+    },
     addtocart () {
-      console.log("addtocart clicked");
-      // curl -X POST \
-      //   'http://localhost:32775/cart/add?_format=json' \
-      //   -H 'Content-Type: application/json' \
-      //   -d '[{ "purchased_entity_type": "commerce_product_variation", "purchased_entity_id": "6", "quantity": "1"}]'
+      console.log("addtocart")
 
       REST.post(`/cart/add?_format=json`, [{
         "purchased_entity_type": "commerce_product_variation",
@@ -66,6 +91,9 @@ export default {
         })
 
     }
+  },
+  components: {
+    Modal
   }
 }
 </script>

web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="overlay">
+    <div class="modal">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+  data: () => ({
+
+  })
+}
+</script>
+<style lang="scss" scoped>
+.overlay{
+  background-color: rgba(0,0,0,0.8);
+  position:fixed;
+  top:0; right:0; bottom:0; left:0;
+  z-index:99999;
+}
+.modal{
+  background-color:#fff;
+  position:absolute;
+  width:250px;
+  height:200px;
+  top:0; right:0; bottom:0; left:0;
+  margin:auto;
+}
+</style>