meteormeteorite

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


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?


Solution

  • 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');
      }
    });