Frameworks

 

Como pudimos ver, en el método create de UserController si se generaba un error nos redireccionaba de nuevo a la vista de crear. Ahora vamos a tratar ese error de otra manera, vamos a capturarlo y notificárselo al usuario.

 

          /**
           * UserController
           *
           * @description :: Server-side logic for managing users
           * @help        :: See http://links.sailsjs.org/docs/controllers
           */

          module.exports = {
            'new': function (req, res) {
                  res.view();
              },
            index: function (req, res) {
              User.find(function foundUser (err, users) {
                if(err) return res.redirect('/user/new');
                res.view({
                  users: users
                });
              });
            },
            create: function(req, res) {
                User.create(req.params.all(), function userCreated(err, user) {
                  if (err) {
                    req.session.flash = {
                      err: err
                    }
                    return res.redirect('/user/new');
                  }
                  res.redirect('/user/show/' + user.id);
                });
            }
          };

 

Ahora añadiremos el siguiente código en el fichero new.ejs para comprobar si existe algún campo que no cumpla los requisitos del modelo:

 

          <form action="/user/create" method="POST" class="form-signin">
            <h2 class="form-signin-heading"> Crear Usuario 

            < % if(flash && flash.err) { %>
                <ul class="alert alert-success">
            < % Object.keys(flash.err).forEach(function(error) { %>
                <li><%- JSON.stringify(flash.err[error]) %></li>
            < % }) %>
            </ul>
            < % } %>

            <div class="control-group"> 
            <input type="text" class="form-control" placeholder="Nombre" name="name" required>
            </div>
            <div class="control-group">
                  <input type="text" class="form-control" placeholder="Apellidos" name="lastname" required>
                  </div>
                  <div class="control-group">
                  <input type="text" class="form-control" placeholder="Email" name="email" required>
                  < /div>
                  < div class="control-group">
                  < input id="password" type="password" class="form-control" placeholder="Contraseña" name="password" required>
                  </div>
                  <div class="control-group">
                  <input type="password" class="form-control" placeholder="Repita Contraseña" name="confirmation" required>
                  </div>
            <br/>
                  <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create User"/>
                  <input type="hidden" name="_csrf" value="<%=_csrf %>"/>
          </form>

 

Lo siguiente será ir a la carpeta api/policies y crear el fichero flash.js , el cual tendrá el siguiente código:

 

            module.exports = function(req, res, next) {
            res.locals.flash = {};

            if(!req.session.flash) return next();

            res.locals.flash = _.clone(req.session.flash);

            // clear flash
            req.session.flash={};
            next();
          }

Después vamos al fichero csrf.js que se encuentra en la carpeta config y descomentamos la siguiente línea y la ponemos a true , quedando así:
 

module.exports.csrf = true;

Con esto ayudaremos a hacer nuestra web más segura, gracias al protocolo CSRF .
 

Ahora iremos a config/policies.js y modificaremos la política que se ejecutará en todas las vistas restantes ( '*' ):
 

            module.exports.policies = {
              'user': {
                'new': 'flash',
                index: 'sessionAuth',
                '*': 'flash'
              }
            };

 

Ahora iremos a la carpeta assets/js y crearemos el fichero customValidate.js con el siguiente contenido:

 

              $(document).ready(function(){

                // Validate
                // http://bassistance.de/jquery-plugins/jquery-plugin-validation/
                // http://docs.jquery.com/Plugins/Validation/
                // http://docs.jquery.com/Plugins/Validation/validate#toptions

                    $('#sign-up-form').validate({
                    rules: {
                      name: {
                        required: true
                      },
                      lastname: {
                        required: true
                      },
                      email: {
                        required: true,
                        email: true
                      },
                      password: {
                        minlength: 6,
                        required: true
                      },
                      confirmation: {
                        minlength: 6,
                        equalTo: "#password" 
                      }
                    },
                    messages: {
                      name: "Please enter your name",
                      lastname: "Please enter your lastname",
                      email: "Please enter your email with a valid structure",
                      password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 6 characters long"
                      },
                      confirmation: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 6 characters long",
                        equalTo: "Please enter the same password as above"
                      }
                    },
                    success: function(element) {
                      element.text('Success').addClass('valid')
                    }
                  });
            });

Puede bajarse el customValidate.js aquí .
 

Y finalmente vamos a views/user y en el fichero new.ejs añadimos al form lo siguiente, de manera que quedaría de la siguiente formas:
 

<form action="/user/create" method="POST" id="sign-up-form" class="form-signin">