sails.js 0.10.0-rc4 cannot flash message to ejs view

Question

In server js

 if (!user) {
      if (isEmail) {
        req.flash('error', 'Error.Passport.Email.NotFound');
        sails.log.warn('User Email not fond.');
      } else {
        req.flash('error', 'Error.Passport.Username.NotFound');
        sails.log.warn('User name not found.');
      }

ejs view

<form role="form" action="/auth/local" method="post">
    <input type="text" name="identifier" placeholder="Username or Email">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Sign in</button>
</form>

<% if (typeof message!== 'undefined') { %>
<%= message %>
<% } else { %>
You E-mail and passport is correct!
<% } %>

if I input one wrong email or passport,the ejs view donot show any error message,why? How can I flash the error message to the ejs view?am I do something wrong? Sorry for my poor English. Thx.

Answer 1

The flash middleware stores the flash message in a session. You still have to pass it to your view and render it by yourself:

app.get('/flash', function(req, res){
  // Set a flash message by passing the key, followed by the value, to req.flash().
  req.flash('info', 'Flash is back!')
  res.redirect('/');
});

app.get('/', function(req, res){
  // Get an array of flash messages by passing the key to req.flash()
  res.render('index', { messages: req.flash('info') });
});

Answer 2

Actually, req gets passed down to your view automatically, so in your view you can just do:

<%- req.flash('message') %>

You don't need to pass the message down to your view manually.

Answer 3

Checking for message existence using req.session.flash was giving undefined errors In Sailsjs v0.10.0-rc8.

Here is the solution that I ended up using:

  <% var errors = req.flash('error'); %>
    <% if ( Object.keys(errors).length > 0 ) { %>
    <div class="alert alert-danger">
      <button type="button" class="close" aria-hidden="true" data-dismiss="alert">&times;</button>
      <ul>
        <% Object.keys(errors).forEach(function(error) { %>
          <li><%- JSON.stringify(errors[error]) %></li>
        <% }) %>
      </ul>
    </div>
   <% } %>

UPDATE

I figured out how to check for flash message existence before reading the message:

   <% if (req.session.flash && req.session.flash.error) { %>
      <% var errors = req.flash('error') %>
      <div class="alert alert-danger">
        <button type="button" class="close" aria-hidden="true" data-dismiss="alert">&times;</button>
        <ul>
          <% Object.keys(errors).forEach(function(error) { %>
            <li><%- JSON.stringify(errors[error]) %></li>
          <% }) %>
        </ul>
      </div>
   <% } %>

Answer 4

I found the following custom validation gist way more helpful that using the above. I imagine you'll eventually want custom validation messages at some point anyway, right?

https://gist.github.com/basco-johnkevin/8436644

Note: I created a file named api/services/ValidationService.js and placed the gist code here. This way I didn't have to require it in the Controller.

In the Controller:

create: function(req, res, next) {
    //Create a User with the params sent from the signup form
    //
    User.create( req.params.all(), function userCreated( err, user ) {
        // If there's an error
        // 
        if(err) {
            if(err.ValidationError) {
                errors = ValidationService.transformValidation(User, err.ValidationError);
                sails.log.warn(errors);
                req.flash('error', errors);
            }

            // If error redirect back to the sign-up page
            return res.redirect('/user/new');
        }

        // After successfully creating the user 
        // redirect the to the show action
        res.json(user);
    });
}

In my User Model:

module.exports = {

  schema: true,

  attributes: {
    name: {
        type: 'string',
        required: true
    },

    title: {
        type: 'string'
    },

    email: {
        type: 'string',
        email: true,
        required: true,
        unique: true
    },

    encryptedPassword: {
        type: 'string',
        minLength: 6,
        required: true
    }

  },

  validation_messages: {
    name: {
        required: 'You must supply a valid name.'
    },

    email: {
        email: 'You must supply a valid email address.',
        required: 'You must supply a valid email address.',
        unique: 'An account with this email address already exists.'
    },

    encryptedPassword: {
        minLength: 'Your password must be atleast 6 characters long.',
        required: 'You must supply a password that is atleast 6 characters long.'
    }
  }

};

And here's what I ended up on my User sign up form view. Hmm... There must be a better way.

<% if (req.session.flash && req.session.flash.error) { %>
  <% var errors = req.flash('error') %>
  <div class="alert alert-danger">
    <button type="button" class="close" aria-hidden="true" data-dismiss="alert">&times;</button>
    <ul>
      <% Object.keys(errors).forEach(function(error) { %>
        <% Object.keys(errors[error]).forEach(function(error_message) { %>
        <% Object.keys(errors[error][error_message][0]).forEach(function(error_message_res) { %>
        <li>
            <%- errors[error][error_message][0][error_message_res] %>
        </li>
        <% }); %>
        <% }); %>
      <% }); %>
    </ul>
  </div>