login from modal is working, register is lacking password generator

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

@@ -10,13 +10,23 @@
 .modal[data-v-b98ce164] {
   background-color: #fff;
   position: absolute;
-  width: 250px;
-  height: 200px;
+  box-sizing: border;
+  max-width: 80vw;
+  max-height: 70vh;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
+  padding: 1em;
+  border-radius: 3px;
+  box-shadow: 2px 2px;
+}
+
+fieldset[data-v-2952b9b1] {
+  padding: 0;
+  margin: 0;
+  border: none;
 }
 
 

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

@@ -7,7 +7,7 @@
       <div class="description" v-html="product.field_description" />
       <span class="price">{{ product.price__number }}</span>
     </section>
-    <aside class="">
+    <aside v-if="!isAdherent">
       <input
         v-if="product.field_multiple"
         v-model="quantity"
@@ -24,11 +24,17 @@
         Commander
       </button>
     </aside>
+
     <Modal
-      v-if="login"
+      v-if="showLoginModal"
+      @close="closeModal"
     >
-      i'm a modal
+      <div>
+        Please login or register before continue.
+      </div>
+      <LoginRegisterForm @onLogedIn="logedIn"/>
     </Modal>
+
   </article>
 </template>
 
@@ -38,6 +44,7 @@ import { REST } from 'vuejs/api/rest-axios'
 import router from 'vuejs/route'
 import { mapState, mapActions } from 'vuex'
 import Modal from 'vuejs/components/Helper/Modal'
+import LoginRegisterForm from 'vuejs/components/Helper/LoginRegisterForm'
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
@@ -48,25 +55,28 @@ export default {
   data(){
     return {
       quantity: 1,
-      login:false,
-      register:false
+      showLoginModal:false
     }
   },
   computed: {
     ...mapState({
-      isloggedin: state => state.User.isloggedin
+      isloggedin: state => state.User.isloggedin,
+      isAdherent: state => state.User.isAdherent
     })
   },
   methods:{
-    ...mapActions({
-      userLogin: 'User/userLogin'
-    }),
+    // ...mapActions({
+    //   userLogin: 'User/userLogin'
+    // }),
+    closeModal () {
+      this.showLoginModal = false;
+    },
     checkaddtocart() {
       console.log('checkaddtocart');
 
       if(!this.isloggedin){
         // TODO: show popup login or register
-        this.login = true
+        this.showLoginModal = true
         // TODO: rest login or register
         // TODO: rest login
         // TODO: this.addtocart()
@@ -74,6 +84,10 @@ export default {
         this.addtocart()
       }
     },
+    logedIn () {
+      console.log('Product: logedIn');
+      this.closeModal()
+    },
     addtocart () {
       console.log("addtocart")
 
@@ -93,7 +107,8 @@ export default {
     }
   },
   components: {
-    Modal
+    Modal,
+    LoginRegisterForm
   }
 }
 </script>

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

@@ -0,0 +1,58 @@
+<template>
+  <div id="login-form">
+    <h2>Login</h2>
+    <input
+      type="email"
+      name="email"
+      v-model="email"
+      placeholder="Email"
+    >
+    <input
+      type="password"
+      name="password"
+      v-model="password"
+      placeholder="Password"
+    >
+    <button
+      type="button"
+      name="login"
+      @click.stop="onLogin"
+    >
+      login
+    </button>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "LoginForm",
+  data: () => ({
+    email:null,
+    password:null
+  }),
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    onLogin () {
+      this.userLogin({
+        mail: this.email,
+        pass: this.password
+      }).then( () => {
+          console.log('logedin from login component');
+          this.$emit('onLogedIn')
+        }
+      ).catch(( error ) => {
+        console.warn('Issue with login from login component', error)
+        Promise.reject(error)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <div id="login-form">
+    <fieldset class="login">
+      <h2>Login</h2>
+      <input
+        type="email"
+        name="email"
+        v-model="loginEmail"
+        placeholder="Email"
+      >
+      <input
+        type="password"
+        name="password"
+        v-model="password"
+        placeholder="Password"
+      >
+      <button
+        type="button"
+        name="login"
+        @click.stop="onLogin"
+      >
+        login
+      </button>
+    </fieldset>
+    <fieldset class="register">
+      <h2>Or register</h2>
+      <input
+        type="email"
+        name="email"
+        v-model="registerEmail"
+        placeholder="Email"
+      >
+      <button
+        type="button"
+        name="register"
+        @click.stop="onRegister"
+      >
+        register
+      </button>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "LoginForm",
+  data: () => ({
+    loginEmail:null,
+    password:null,
+    registerEmail:null
+  }),
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin',
+      userRegister: 'User/userRegister'
+    }),
+    onLogin () {
+      this.userLogin({
+        mail: this.loginEmail,
+        pass: this.password
+      }).then( () => {
+          console.log('logedin from login component');
+          this.$emit('onLogedIn')
+        }
+      ).catch(( error ) => {
+        console.warn('Issue with login from login component', error)
+        Promise.reject(error)
+      })
+    },
+    onRegister () {
+      console.log('on register');
+      this.userRegister({
+        mail: this.registerEmail
+      }).then( () => {
+          console.log('user registered');
+        }
+      ).catch(( error ) => {
+        console.warn('Issue with register from login component', error)
+        Promise.reject(error)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+fieldset{
+  padding:0;
+  margin:0;
+  border:none;
+}
+
+</style>

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

@@ -1,6 +1,12 @@
 <template>
-  <div class="overlay">
-    <div class="modal">
+  <div
+    class="overlay"
+    @click.self="close"
+  >
+    <div
+      class="modal"
+      v-bind:style="styles"
+    >
       <slot></slot>
     </div>
   </div>
@@ -8,9 +14,26 @@
 <script>
 export default {
   name: "",
+  props: {
+    styles: {
+      default: function () {
+        return {
+          width: '500px',
+          height: '350px'
+        }
+      },
+      type: Object
+    }
+  },
   data: () => ({
 
-  })
+  }),
+  methods: {
+    close () {
+      console.log('click close');
+      this.$emit('close')
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -23,9 +46,14 @@ export default {
 .modal{
   background-color:#fff;
   position:absolute;
-  width:250px;
-  height:200px;
+  box-sizing:border;
+  max-width:80vw;
+  max-height:70vh;
   top:0; right:0; bottom:0; left:0;
   margin:auto;
+  padding:1em;
+  border-radius:3px;
+  box-shadow:2px 2px;
+
 }
 </style>

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -14,7 +14,9 @@ export default {
     logout_token: null,
     isloggedin: false,
     isAdmin: false,
-    canSearch: false
+    isAdherent: false,
+    canSearch: false,
+    roles: []
   },
 
   // getters
@@ -53,6 +55,7 @@ export default {
       if(state.roles.indexOf('adherent') != -1){
         // console.log('is admin');
         state.canSearch = true
+        state.isAdherent = true
       }
     },
     setLoggedOut (state) {
@@ -73,16 +76,32 @@ export default {
 
   // actions
   actions : {
+    userRegister({ dispatch, commit, state }, credentials){
+      return new Promise((resolve, reject) => {
+        REST.post('/user/register?_format=json', credentials)
+          .then(({ data }) => {
+            console.log('user REST registered', data);
+            resolve()
+          })
+          .catch(( error ) => {
+            console.warn('Issue with register', error)
+            Promise.reject(error)
+          })
+      })
+    },
     userLogin({ dispatch, commit, state }, credentials){
-      dispatch('getToken', credentials)
-        .then(() => {
-          dispatch('getUser').then((userdata) => {
-            console.log('User Loggedin');
-            if (state.isAdmin){
-              window.location.reload(true);
-            }
+      return new Promise((resolve, reject) => {
+        dispatch('getToken', credentials)
+          .then(() => {
+            dispatch('getUser').then((userdata) => {
+              console.log('User Loggedin');
+              if (state.isAdmin){
+                window.location.reload(true);
+              }
+              resolve()
+            })
           })
-        })
+      })
     },
     getToken ({ dispatch, commit, state }, credentials) {
       return REST.post('/user/login?_format=json', credentials)