How to display Meteor.loginWithPassword callbak error message on the same page

Question

I have created a custom login page and used the Meteor.loginWithPassword(user, password, [callback]) function to login to the app.

Following is the login template:

    <template name ="Login">
        <form class="login-form form-horizontal">
            <div class="control-group">
                <input class="email" type="text" placeholder="Email">
            </div>
            <div class="control-group m-inputwrapper">
                <input class="password" type="password" placeholder="Password">
            </div>
            <div class="control-group">
                <button type="submit" class="submit t-btn-login" >Login</button>
            </div>        
        </form>
        <div class="alert-container">
            <div class="alert-placeholder"></div>
        </div>
    </template>

Template.Login.events({
    'submit .login-form': function(e, t) {
        e.preventDefault();
        // retrieve the input field values
        var email = t.find('.email').value,
            password = t.find('.password').value;

            Meteor.loginWithPassword(email, password, function(err) {
                if (err) {                   
                   $(".alert-placeholder").html('<div></div><div class="alert"><span><i class="icon-sign"></i>'+err.message+'</span></div>')
                }
            });


        return false;
    }
});

While i debugging i can see the error message displayed and added to the dom. but it will get refresh and message will disappear.

Is meteor re render the page after Meteor.loginWithPassword() ? How can i overcome this?

Answer 1

When using meteor, if you find yourself manually injecting html elements with jQuery, you are probably doing it wrong. I don't know the blaze internals well enough to give you an exact answer to why your elements are not being preserved, but here is a more meteor-like solution:

In your alert container, conditionally render an error message:

<div class="alert-container">
  {{#if errorMessage}}
    <div class="alert">
      <span><i class="icon-sign"></i>{{errorMessage}}</span>
    </div>
  {{/if}}
</div>

In your login callback, Set the errorMessage session variable if err exists:

Meteor.loginWithPassword(email, password, function(err) {
  if (err) {
    Session.set('errorMessage', err.message);
  }
});

Finally, add a template helper to access the errorMessage session variable:

Template.Login.helpers({
  errorMessage: function() {
    return Session.get('errorMessage');
  }
});

Answer 2

You can use Bert for showing error message in each page. I use it in login page like this :

  Meteor.loginWithPassword(emailVar, passwordVar, function(error) {
            if (error) {

                Bert.alert(error.reason, 'danger', 'growl-top-right');
            } else {
                Router.go('/dashboard');
            }
        });