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

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>