loading and displaying real login form and register form from drupal

web/modules/custom/materio_user/materio_user.routing.yml

@@ -1,3 +1,11 @@
+materio_user.register_form:
+  path: '/materio_user/register_form'
+  defaults:
+    _controller: '\Drupal\materio_user\Controller\AjaxRegisterForm::getForm'
+    _format: json
+  requirements:
+    _access: 'TRUE'
+
 materio_user.login_form:
   path: '/materio_user/login_form'
   defaults:

web/modules/custom/materio_user/src/Controller/AjaxRegisterForm.php

@@ -0,0 +1,87 @@
+<?php
+// https://www.qed42.com/blog/autocomplete-drupal-8
+// https://www.drupal.org/docs/8/modules/search-api/developer-documentation/executing-a-search-in-code
+
+namespace Drupal\materio_user\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Form\FormBuilder;
+use Drupal\Core\Form\FormState;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+// use Drupal\Core\Cache\CacheableJsonResponse;
+// use Drupal\Core\Cache\CacheableMetadata;
+use Drupal\core\render\RenderContext;
+
+
+/**
+ * Defines a route controller for entity autocomplete form elements.
+ */
+class AjaxRegisterForm extends ControllerBase {
+
+  /**
+   * The form builder.
+   *
+   * @var \Drupal\Core\Form\FormBuilder
+   */
+  protected $formBuilder;
+
+  /**
+   * Construct.
+   */
+  public function __construct(FormBuilder $formBuilder) {
+    $this->formBuilder = $formBuilder;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('form_builder')
+    );
+  }
+
+  private function getFormDefinition(){
+    // $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+    // \Drupal::logger('materio_user')->notice($language);
+    // $this->form_builded = $this->formBuilder->getForm('Drupal\user\Form\UserLoginForm');
+    $entity = \Drupal::entityTypeManager()->getStorage('user')->create(array());
+    $formObject = \Drupal::entityTypeManager()
+      ->getFormObject('user', 'register')
+      ->setEntity($entity);
+    $this->form_builded = $this->formBuilder()->getForm($formObject);
+  }
+
+  /**
+   * Handler for getform request.
+   */
+  public function getForm(Request $request) {
+
+    $this->getFormDefinition();
+
+    $rendered = render($this->form_builded);
+    // $form_builded = $this->form_builded;
+    // $rendered = \Drupal::service('renderer')->executeInRenderContext(new RenderContext(), function () use ($form_builded) {
+    //     return render($form_builded);
+    //   });
+    $data = [
+      'rendered' => $rendered,
+      // '#cache' => [
+      //   'max-age' => \Drupal\Core\Cache\Cache::PERMANENT,
+      //   'tags' => [
+      //     'materio_sapi-search_form-cache',
+      //   ]
+      // ]
+    ];
+
+    $response = new JsonResponse();
+    $response->setData($data);
+    // $response = new CacheableJsonResponse($data);
+    // $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
+
+    return $response;
+  }
+
+}

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

@@ -23,7 +23,25 @@
   box-shadow: 2px 2px;
 }
 
-fieldset[data-v-2952b9b1] {
+.form-item[data-v-7bb795f8],
+.form-actions[data-v-7bb795f8] {
+  display: inline-block;
+  max-width: 32%;
+  margin: 0;
+}
+input[data-v-7bb795f8] {
+  box-sizing: border-box;
+  max-width: 100%;
+}
+div.description[data-v-7bb795f8] {
+  display: none;
+}
+.form-item-persistent-login[data-v-7bb795f8] {
+  display: none;
+}
+
+
+fieldset[data-v-340aa566] {
   padding: 0;
   margin: 0;
   border: none;

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

@@ -28,11 +28,10 @@
     <Modal
       v-if="showLoginModal"
       @close="closeModal"
+      :styles="{width:'500px', height:'100%'}"
     >
-      <div>
-        Please login or register before continue.
-      </div>
-      <LoginRegisterForm @onLogedIn="logedIn"/>
+      <h2>Please login or register before continue.</h2>
+      <LoginRegister @onLogedIn="logedIn" />
     </Modal>
 
   </article>
@@ -44,7 +43,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'
+import LoginRegister from 'vuejs/components/Helper/LoginRegister'
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
@@ -108,7 +107,7 @@ export default {
   },
   components: {
     Modal,
-    LoginRegisterForm
+    LoginRegister
   }
 }
 </script>

web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.back.vue

@@ -1,94 +0,0 @@
-<template lang="html">
-  <div id="block-userlogin" class="">
-    <h2>{{ title }}</h2>
-    <section>
-      <input
-        id="edit-name"
-        class="form-email"
-        type="text"
-        v-bind:placeholder="form.ph_email" name="name"
-        v-model="mail"
-        @keyup.enter="login"
-      />
-      <input
-        id="edit-pass"
-        class="form-text"
-        type="password"
-        v-bind:placeholder="form.ph_pass" name="pass"
-        v-model="password"
-        @keyup.enter="login"
-      />
-      <button
-        id="edit-submit"
-        class="button"
-        @click.stop="login"
-      >
-        {{ form.btn_value }}
-      </button>
-      <ul>
-        <li><a
-          v-bind:href="form.register.href"
-        >
-          {{ form.register.title }}
-        </a></li>
-        <li><a
-          v-bind:href="form.reset.href"
-        >
-          {{ form.reset.title }}
-        </a></li>
-      </ul>
-    </section>
-  </div>
-</template>
-
-<script>
-// https://github.com/alvar0hurtad0/drupal-vuejs-todo
-import { mapState, mapActions } from 'vuex'
-export default {
-  data () {
-    return {
-      mail: '',
-      password: ''
-    }
-  },
-  props: ['title', 'form'],
-  computed: {
-    ...mapState(['User'])
-  },
-  methods: {
-    ...mapActions({
-      userLogin: 'User/userLogin'
-    }),
-    login () {
-      this.userLogin({
-        mail: this.mail,
-        pass: this.password
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  section{
-    max-width:300px;
-  }
-  input{
-    display:block;
-    max-width:100%;
-    margin:0.5em 0 0 0;
-  }
-  button{
-    margin:0.5em 0 0 0;
-  }
-  ul{
-    margin:0; padding:0.5em 0 0 0;
-  }
-  li{
-    list-style:none;
-    margin:0.5em 0 0 0; padding:0;
-    font-size:0.882em;
-  }
-  a{
-  }
-</style>

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

@@ -0,0 +1,86 @@
+<script>
+
+import Vue from 'vue'
+import { mapState, mapActions } from 'vuex'
+import { MA } from 'vuejs/api/ma-axios'
+
+export default {
+  name: "LoginForm",
+  data: () => ({
+    form:null,
+    mail:null,
+    password:null
+  }),
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    getLoginForm(){
+      // Form through ajax is provided by materio_user custom module
+      // vuejs attributes a inserted by template in theme level
+      MA.get(`/materio_user/login_form`)
+        .then(({data}) => {
+          console.log("getLoginForm data");
+          this.form = Vue.compile(data.rendered)
+          this.$options.staticRenderFns = [];
+          this._staticTrees = [];
+          this.form.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getLoginForm', error)
+        })
+    },
+    login () {
+      this.userLogin({
+        mail: this.mail,
+        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)
+      })
+    }
+  },
+  beforeMount () {
+    if(!this.form){
+      this.getLoginForm()
+    }
+  },
+  mounted(){
+    // console.log('LoginBlock mounted');
+    Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    // console.log('LoginBlock render');
+    if(!this.form){
+      // console.log('LoginBlock render NAN');
+      return h('span', 'Loading ...')
+    }else{
+      // console.log('LoginBlock render template');
+      return this.form.render.call(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .form-item,
+  .form-actions{
+    display:inline-block;
+    max-width:32%;
+    margin:0;
+  }
+  input{
+    box-sizing:border-box;
+    max-width:100%;
+  }
+  div.description{
+    display:none;
+  }
+  .form-item-persistent-login{
+    display:none;
+  }
+</style>

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

@@ -0,0 +1,86 @@
+<script>
+
+import Vue from 'vue'
+import { mapState, mapActions } from 'vuex'
+import { MA } from 'vuejs/api/ma-axios'
+
+export default {
+  name: "RegisterForm",
+  data: () => ({
+    form:null,
+    mail:null,
+    password:null
+  }),
+  methods: {
+    ...mapActions({
+      userRegister: 'User/userRegister'
+    }),
+    getRegisterForm(){
+      // Form through ajax is provided by materio_user custom module
+      // vuejs attributes a inserted by template in theme level
+      MA.get(`/materio_user/register_form`)
+        .then(({data}) => {
+          console.log("getRegisterForm data");
+          this.form = Vue.compile(data.rendered)
+          this.$options.staticRenderFns = [];
+          this._staticTrees = [];
+          this.form.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getRegisterForm', error)
+        })
+    },
+    // login () {
+    //   this.userLogin({
+    //     mail: this.mail,
+    //     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)
+    //   })
+    // }
+  },
+  beforeMount () {
+    if(!this.form){
+      this.getRegisterForm()
+    }
+  },
+  mounted(){
+    // console.log('LoginBlock mounted');
+    Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    // console.log('LoginBlock render');
+    if(!this.form){
+      // console.log('LoginBlock render NAN');
+      return h('span', 'Loading ...')
+    }else{
+      // console.log('LoginBlock render template');
+      return this.form.render.call(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  // .form-item,
+  // .form-actions{
+  //   display:inline-block;
+  //   max-width:30%;
+  //   margin:0;
+  // }
+  // input{
+  //   box-sizing:content-box;
+  //   max-width:100%;
+  // }
+  // div.description{
+  //   display:none;
+  // }
+  // .form-item-persistent-login{
+  //   display:none;
+  // }
+</style>

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

@@ -1,58 +0,0 @@
-<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/LoginRegister.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="login-register">
+    <h3>Login</h3>
+    <LoginForm @onLogedIn="onLogedIn" />
+    <h3>Register</h3>
+    <RegisterForm @onRegistered="onRegistered" />
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+import LoginForm from 'vuejs/components/Form/LoginForm'
+import RegisterForm from 'vuejs/components/Form/RegisterForm'
+
+export default {
+  name: "LoginRegister",
+  data: () => ({
+    loginEmail:null,
+    password:null,
+    registerEmail:null
+  }),
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin',
+      userRegister: 'User/userRegister'
+    }),
+    onLogedIn () {
+      this.$emit('onLogedIn')
+    },
+    onRegistered () {
+      this.$emit('onRegistered')
+    }
+  },
+  components: {
+    LoginForm,
+    RegisterForm
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+fieldset{
+  padding:0;
+  margin:0;
+  border:none;
+}
+
+</style>

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

@@ -1,97 +0,0 @@
-<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>