Hey there! I'm currently in the process of developing a user system using Vue and Firebase. I've successfully included the necessary Firebase script in my project along with some code. However, I'm running into an issue where clicking on the submit button fails to create a user in Firebase. Your assistance would be greatly appreciated! :) Thanks for your help! <3
<div class="signin">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Kingsman_the_golden_circle_logo.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">SignIn</h5>
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<!-- Email -->
<b-form-group id="input-group-email" label="Email address:" label-for="input-email">
<b-form-input id="input-email" v-model="email" type="email" placeholder="Enter email"></b-form-input>
</b-form-group>
<!-- Password -->
<b-form-group id="input-group-pass" label="Password:" label-for="input-pass">
<b-form-input id="input-pass" type="password" aria-describedby="password-help-block"></b-form-input>
<b-form-text id="password-help-block">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</b-form-text>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</div>
</div>
</div>
</template>
<script>
import firebase from 'firebase'
export default {
name: 'SignIn',
props: {
msg: String
},
data () {
return {
form: {
email: '',
password: ''
},
show: true
}
},
methods: {
onSubmit (evt) {
evt.preventDefault()
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(
(user) => {
this.$router.replace('home')
},
(err) => {
alert('Oops.' + err.message)
}
)
},
onReset (evt) {
this.form.email = ''
this.form.password = ''
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
}
</script>