started modal login and registration

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>