Instead of passing props to the <b-modal> buttons, I want to directly call signinUser() method on @click in my modal when clicking the default OK button. However, the modal doesn't seem to respond to this.
The signinUser() method will trigger on @hidden event though.
I'm also looking to prevent the modal from closing unless a user is authenticated (which is why I don't want it triggered on @hidden).
Can someone guide me in the right direction?
Here's my component where firebase authentication is performed:
<template>
<div class="container">
<b-modal id="signinModal" @click="signinUser($event)" v-model="modalShow" :no-close-on-backdrop="true">
<input id="email" v-model="email" placeholder="email">
<input id="pass" v-model="password" placeholder="password">
</b-modal>
<form v-on:submit.prevent class="cube" v-if="modalShow == false">
<div>
<input id="title" v-model="title" placeholder="title">
</div>
<div>
<textarea id="body" v-model="body" placeholder="body"></textarea>
</div>
<div>
<b-button id ="postbtn" @click="addpost($event)" variant="outline-success">Publish</b-button>
</div>
</form>
</div>
</template>
<script>
const { fb, db } = require('../../fireconfig.js')
export default {
name: 'AddPost',
data: function() {
return {
title: '',
body: '',
modalShow: true,
email: '',
password: ''
}
},
methods: {
signinUser(e) {
e.preventDefault()
fb.auth().signInWithEmailAndPassword(this.email, this.password)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password' || errorCode === 'auth/invalid-email') {
alert('password or email incorrect', errorCode, errorMessage);
//do nothing and keep modal open
} else {
console.log('user successfully authenticated')
this.modalShow = false
}
});
},
}
}
</script>