bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

loading and displaying real login form and register form from drupal

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-10-06 21:32:46 +02:00
parent 96b23acbb3
commit 6598b88945
11 changed files with 496 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/themes/custom/materiotheme/vuejs/components/Content/Product.vue
View File

@ -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>

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

@ -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>

86
web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.vue Normal file
View File

@ -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>

86
web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue Normal file
View File

@ -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>

58
web/themes/custom/materiotheme/vuejs/components/Helper/LoginForm.vue
View File

@ -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>

50
web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue Normal file
View File

@ -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>

97
web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegisterForm.vue
View File

@ -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>