loading and displaying real login form and register form from drupal
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user