Hello. I have the following components that worked correctly when the login and register were on separate pages. I decided to put them on the same page and they stopped working. I realized that both forms were using the same id for the form elements, so I corrected that.
Now, I can login with a registered email address, and I can register a new account correctly. However, when I try to register an account that exists, or my login is not found, I do not get the error messages. Instead it just stays on the screen, clears the forms, and displays no messages. I’m using the package “themeteorchef:jquery-validation” and the code is practically copy and pasted from the examples (though it might have been from a tutorial, I can’t remember which off hand.)
I just can’t find what is wrong. The console shows the correct error “User not found” when I try to login with an unregistered email address, but I get error.reason = “Need to set a username or email” if I try to register an email that already exists.
CJRegister = React.createClass({
handleSubmit(event) {
event.preventDefault();
},
componentDidMount: function() {
let validator = $('.register').validate({
submitHandler: function(event) {
const email = $('[name=RegisterEmail]').val();
const password = $('[name=registerPassword]').val();
Accounts.createUser({
email: email,
password: password
}, function (error){
if(error) {
console.log(error);
console.log(error.reason);
if(error.reason === 'Email already exists.') {
validator.showErrors({
email: ' That email belongs to a registered user.'
});
}
} else {
FlowRouter.go('list');
}
});
}
});
},
render() {
return(
<div className='registerComponent'>
<form className='register' onSubmit={this.handleSubmit}>
<p>Email: <input type='email' name='registerEmail' required /></p>
<p>Password: <input type='password' name='registerPassword' required /></p>
<p><input type='submit' value='Register' /></p>
</form>
</div>
);
}
});
CJLogin = React.createClass({
handleSubmit(event) {
event.preventDefault();
},
componentDidMount: function() {
let validator = $('.login').validate({
submitHandler: function(event) {
const email = $('[name=loginEmail]').val();
const password = $('[name=loginPassword]').val();
Meteor.loginWithPassword(email, password, function(error) {
if(error) {
console.log(error);
if(error.reason === 'User not found'){
validator.showErrors({
email: ' ' + error.reason
});
}
if(error.reason === 'Incorrect password'){
validator.showErrors({
password: ' ' + error.reason
});
}
} else {
FlowRouter.go('list');
}
});
}
});
},
render() {
return(
<div id='CJLoginComponent'>
<form className='login' onSubmit={this.handleSubmit}>
<p>Email: <input type='email' name='loginEmail' required /></p>
<p>Password: <input type='password' name='loginPassword' required /></p>
<p><input type='submit' value='Login' /></p>
</form>
</div>
);
}
});