Node.js - Preencher valores dos inputs ao dar erro


(Cleiton Conceição) #1

galera, a ideia é a seguinte, após eu submeter um formulário existe validações como por exemplo campos obrigatórios que não foram preenchidos, qd ocorre esse tipo de situação está limpando todos os campos, eu gostaria de deixar os valores digitados pelo usuário anteriormente antes da requisição.

eu imagino que seja com session flash, mas não estou acetando fazer.
vou deixar parte do meu código abaixo.

    <input type="text" class="form-control has-feedback-left  <% if(nome_msg.length > 0 ) { %>input-validation-error <% } %>" name="nome" id="nome" placeholder="Nome" maxlength="200"
 value="">


aqui é meu controller

     
        res.render("Usuarios/usuarios",{nome_msg: req.flash('nome_msg'),login_msg:req.flash('login_msg')
        ,senha_msg:req.flash('senha_msg'),cargo_msg:req.flash('cargo_msg'),tipo_msg:req.flash('tipo_msg'),
        flag:req.flash('flag')
        });
    }
   async store(req,res){
        
       var {nome,email,login,senha,unidade,telefone,celular,cargo,tipo,ativo,responsavel} = req.body;
       var salt = bcrypt.genSaltSync(10); // aqui adiciona o hash a mais 
       var hash = bcrypt.hashSync(senha,salt);
        var usuario = {
            nome,
            email,
            login,
            senha:hash,
            unidade,
            telefone,
            cargo,
            tipo,
            ativo,
            celular,
            responsavel_financeiro:responsavel
        }
        var result = await UsuariosService.store(usuario);
        if(result==true){
            res.redirect("/usuarios/edit/"+id);
        }else{
            
            req.flash('nome_msg',result.nome_msg);
            req.flash('login_msg',result.login_msg);
            req.flash('senha_msg',result.senha_msg);
            req.flash('tipo_msg',result.tipo_msg);
            req.flash('flag',result.flag);
            res.redirect("/usuarios");
        }
      //  res.json(usuario);
    }


//aqui é meu service.
var Database = require("../models/index");


class UsuariosService {


    constructor(){
        this.Usuario = Database["Usuario"];
    }

  async  store(usuarios){
    var errors = {};

        if(usuarios.ativo !=undefined){
            usuarios.ativo=1;
        }else{
            usuarios.ativo=0;
        }
        if(usuarios.responsavel_financeiro !=undefined){
            usuarios.responsavel_financeiro=1;
        }else{
            usuarios.responsavel_financeiro=0;
        }
        var isValid = this.validate(usuarios,errors); //chamando método validate
        if(isValid){
            try{
                await this.Usuario.create(usuarios);
                return true;
    
            }catch(err){
                errors.system_msg = "Não foi Possível Salvar o Registro!";
                return errors;
            }
        
        }else{
            return errors;
        }

    }

    async getById(id){
        try{
            return await this.Usuario.findByPk(id);
        }catch(err){
            return undefined;
        }
    }
    
    async update(id,data){
        var errors = {};
        var isValid = this.validate(data,errors);
        if(isValid){

            try{
                var usuario = await this.getById(id);
                usuario.nome = data.nome;
                usuario.email = data.email;
                usuario.login = data.login;
                usuario.senha = data.senha;
                usuario.unidade = data.unidade;
                usuario.telefone = data.telefone;
                usuario.celular = data.celular;
                usuario.cargo = data.cargo;
                usuario.tipo = data.tipo;
                usuario.ativo = data.ativo;
                usuario.responsavel_financeiro = data.responsavel;

                if(usuario.ativo !=undefined){
                    usuario.ativo=1;
                }else{
                    usuario.ativo=0;
                }
                if(usuario.responsavel_financeiro !=undefined){
                    usuario.responsavel_financeiro=1;
                }else{
                    usuario.responsavel_financeiro=0;
                }        
                await usuario.save();
                return true;
            }catch(erro){
                errors.system_msg = "Não foi Possível editar o Registro!";
                return errors;
            }

        }else{
            return errors;
        }

    }

    validate(usuario,errors){
        
        var erroCount = 0;

        if(usuario.nome==''){
            errors.nome_msg = "Preencha o Campo Nome!";
            erroCount++;
            errors.flag=1;
    
        }
        if(usuario.login==''){
            errors.login_msg = "Preencha o Campo Login!";
            erroCount++;
            errors.flag=1;
        }
        if(usuario.senha==''){
            errors.senha_msg = "Preencha o Campo Senha!";
            erroCount++;
            errors.flag=1;
        }else{
            if(usuario.senha.length<6){
            errors.senha_msg = "O Campo Senha Tem Que Ter no Mínomo 6 Digítos!";
            erroCount++;
            errors.flag=1;
            }
        }
        if(usuario.tipo==''){
            errors.tipo_msg = "Preencha o Campo Tipo!";
            erroCount++;
            errors.flag=1;
            
        }
        if(erroCount==0){
            return true;
        }else{
            return false;
          
        }
    }

}

module.exports = new UsuariosService();

(Cleiton Conceição) #2

Não sei se fiz da melhor forma mais ficou assim…

 index(req,res){
        var  {nome,email,login,senha,unidade,telefone,celular,cargo,tipo,ativo,responsavel} = req.body;
        res.render("Usuarios/usuarios",{nome_msg: req.flash('nome_msg'),login_msg:req.flash('login_msg')
        ,senha_msg:req.flash('senha_msg'),cargo_msg:req.flash('cargo_msg'),tipo_msg:req.flash('tipo_msg'),
        flag:req.flash('flag'),nome:req.flash('nome'),email:req.flash('email'),login:req.flash('login'),senha:req.flash('senha'),
        unidade:req.flash('unidade'),telefone:req.flash('telefone'),celular:req.flash('celular'),cargo:req.flash('cargo'),
        tipo:req.flash('tipo'),ativo:req.flash('ativo'),responsavel:req.flash('responsavel')

        });
     
    }
   async store(req,res){
        
        var {nome,email,login,senha,unidade,telefone,celular,cargo,tipo,ativo,responsavel} = req.body;
        var salt = bcrypt.genSaltSync(10); // aqui adiciona o hash a mais 
        var senhaComum = senha; 
        var hash = bcrypt.hashSync(senha,salt);
        var usuario = {
            nome,
            email,
            login,
            senha:hash,
            unidade,
            telefone,
            cargo,
            tipo,
            ativo,
            celular,
            responsavel_financeiro:responsavel
        }
        var result = await UsuariosService.store(usuario);
        if(result==true){
            res.redirect("/usuarios/edit/"+id);
        }else{
            
            req.flash('nome_msg',result.nome_msg);
            req.flash('login_msg',result.login_msg);
            req.flash('senha_msg',result.senha_msg);
            req.flash('tipo_msg',result.tipo_msg);
            req.flash('flag',result.flag);
            req.flash('nome',result.nome);
            req.flash('email',result.email);
            req.flash('login',result.login);
            req.flash('senha',senhaComum);
            req.flash('unidade',result.unidade);
            req.flash('telefone',result.telefone);
            req.flash('celular',result.celular);
            req.flash('cargo',result.cargo);
            req.flash('tipo',result.tipo);
            req.flash('ativo',result.ativo);
            req.flash('responsavel',result.responsavel);
            res.redirect("/usuarios");
        }
      //  res.json(usuario);
    }

   async edit(req,res){
        var usuario = await UsuariosService.getById(req.params.id);
       // res.json(usuario);
        res.render("Usuarios/edit",{usuario,nome_msg: req.flash('nome_msg'),login_msg:req.flash('login_msg')
        ,senha_msg:req.flash('senha_msg'),cargo_msg:req.flash('cargo_msg'),tipo_msg:req.flash('tipo_msg'),
        flag:req.flash('flag')
        });
    }

    async update(req,res){

        var {id,nome,email,login,senha,unidade,telefone,celular,cargo,tipo,ativo,responsavel} = req.body;
        var usuarios = {
            nome,
            email,
            login,
            senha,
            unidade,
            telefone,
            cargo,
            tipo,
            ativo,
            celular,
            responsavel_financeiro:responsavel
        }
        var result = await UsuariosService.update(id,usuarios);
        if(result==true){
            res.redirect("/usuarios/edit/"+id);
        }else{
            req.flash('nome_msg',result.nome_msg);
            req.flash('login_msg',result.login_msg);
            req.flash('senha_msg',result.senha_msg);
            req.flash('tipo_msg',result.tipo_msg);
            req.flash('flag',result.flag);
            res.redirect("/usuarios/edit/"+id);
        }       
    }
}

module.exports = new UsuariosController();



/// meu service

var Database = require("../models/index");


class UsuariosService {


    constructor(){
        this.Usuario = Database["Usuario"];
    }

  async  store(usuarios){
    var errors = {};

        if(usuarios.ativo !=undefined){
            usuarios.ativo=1;
        }else{
            usuarios.ativo=0;
        }
        if(usuarios.responsavel_financeiro !=undefined){
            usuarios.responsavel_financeiro=1;
        }else{
            usuarios.responsavel_financeiro=0;
        }
        var isValid = this.validate(usuarios,errors); //chamando método validate
        if(isValid){
            try{
                await this.Usuario.create(usuarios);
                return true;
    
            }catch(err){
                errors.system_msg = "Não foi Possível Salvar o Registro!";
                return errors;
            }
        
        }else{
            return errors;
        }

    }

    async getById(id){
        try{
            return await this.Usuario.findByPk(id);
        }catch(err){
            return undefined;
        }
    }
    
    async update(id,data){
        var errors = {};
        var isValid = this.validate(data,errors);
        if(isValid){

            try{
                var usuario = await this.getById(id);
                usuario.nome = data.nome;
                usuario.email = data.email;
                usuario.login = data.login;
                usuario.senha = data.senha;
                usuario.unidade = data.unidade;
                usuario.telefone = data.telefone;
                usuario.celular = data.celular;
                usuario.cargo = data.cargo;
                usuario.tipo = data.tipo;
                usuario.ativo = data.ativo;
                usuario.responsavel_financeiro = data.responsavel;

                if(usuario.ativo !=undefined){
                    usuario.ativo=1;
                }else{
                    usuario.ativo=0;
                }
                if(usuario.responsavel_financeiro !=undefined){
                    usuario.responsavel_financeiro=1;
                }else{
                    usuario.responsavel_financeiro=0;
                }        
                await usuario.save();
                return true;
            }catch(erro){
                errors.system_msg = "Não foi Possível editar o Registro!";
                return errors;
            }

        }else{
            return errors;
        }

    }

    validate(usuario,errors){
        
        var erroCount = 0;

        errors.nome=usuario.nome;
        errors.email=usuario.email;
        errors.login=usuario.login;
        errors.senha=usuario.senha;
        errors.unidade=usuario.unidade;
        errors.telefone=usuario.telefone;
        errors.celular=usuario.celular;     
        errors.cargo=usuario.cargo;
        errors.tipo=usuario.tipo;
        errors.ativo=usuario.ativo;
        errors.ativo=usuario.ativo;
        errors.responsavel=usuario.responsavel_financeiro;
        if(usuario.nome==''){
            errors.nome_msg = "Preencha o Campo Nome!";
            erroCount++;
            errors.flag=1;
        }
        if(errors.senha=''){
            errors.login_msg = "Preencha o Campo Login!";
            erroCount++;
            errors.flag=1;

  
        }
        if(errors.senha==''){
            errors.senha_msg = "Preencha o Campo Senha!";
            erroCount++;
            errors.flag=1;

        }else{
            if(usuario.senha.length<6){
            errors.senha_msg = "O Campo Senha Tem Que Ter no Mínomo 6 Digítos!";
            erroCount++;
            errors.flag=1;
  
            }
        }
        if(usuario.tipo==''){
            errors.tipo_msg = "Preencha o Campo Tipo!";
            erroCount++;
            errors.flag=1;     
        }
        if(erroCount==0){
            return true;
        }else{
            return false;
          
        }
    }

}

module.exports = new UsuariosService();




///minha view
<%- include ('../partials/header.ejs')%>
<%- include ('../partials/navbar.ejs')%>
<body class="nav-md">
   <div class="nav-md">
   <hr>
   <!--mt = margin-top só vai até 5-->
   <div class="col-md-12 ">
      <div class="x_panel">
         <%if(flag==1){  %>
         <div class="alert alert-danger bb-alert" role="alert">
            Ops, Existem Campos Obrigatórios Que Não Foram Preenchidos!
          </div>
          <% } %>"
            <h2>Cadastro de Usuários</h2>
            <div class="x_title">

            <div class="clearfix"></div>

         </div>
         <div class="x_content">
            <br />
            <form class="form-label-left input_mask" action="/usuarios/store" method="POST">
               <div class="col-md-6 col-sm-6  form-group has-feedback">
                  <input type="text" class="form-control has-feedback-left  <% if(nome_msg.length > 0 ) { %>input-validation-error <% } %>" name="nome" id="nome" placeholder="Nome" maxlength="200"
                  value="<%= nome %>">
                  <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
               </div>
               <div class="col-md-6 col-sm-6  form-group has-feedback">
                  <input type="email" class="form-control has-feedback-left " id="email" name="email" placeholder="E-mail" maxlength="200"
                  value="<%=email %>">
                  <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
               </div>
               <div class="col-md-6 col-sm-6  form-group has-feedback">
                  <input type="text" class="form-control has-feedback-left <% if(login_msg.length > 0 ) { %>input-validation-error <% } %>" id="login" name="login" placeholder="Login" maxlength="80"
                  value="<%=login %>">
                  <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
               </div>
               <div class="col-md-4 col-sm-4  form-group has-feedback">
                  <input type="password" class="form-control has-feedback-left <% if(senha_msg.length > 0 ) { %>input-validation-error <% } %>" id="senha" name="senha" placeholder="Senha" maxlength="80"
                  value="<%=senha %>">
                  <span class="fa fa-user-secret form-control-feedback left" aria-hidden="true"></span>
               </div>
               <div class="col-md-2 col-sm-2  form-group has-feedback">
                  <input type="text" class="form-control has-feedback-left" id="unidade" name="unidade" placeholder="unidade" maxlength="10"
                  value="<%=unidade %>">
                  <span class="fa fa-building form-control-feedback left" aria-hidden="true"></span>
               </div>
               <div class="col-md-3 col-sm-3  form-group has-feedback">
                  <input type="text" class="form-control has-feedback-left" id="telefone" name="telefone" placeholder="Telefone" maxlength="15" 
                  value="<%=telefone %>">
                  <span class="fa fa-phone form-control-feedback left" aria-hidden="true"></span>
               </div>
               <div class="col-md-3 col-sm-3  form-group has-feedback">
                  <input type="text" class="form-control has-feedback-left" id="celular" name="celular" placeholder="Celular" maxlength="15"
                  value="<%=celular %>">
                  <span class="fa fa-mobile form-control-feedback left" aria-hidden="true"></span>
               </div>
             
               <div class="col-md-3 col-sm-3  form-group has-feedback" >
                  <select id="cargo" class="form-control has-feedback-left" name="cargo">
                     <option value=""<%if(cargo==''){%>selected<%}%>>Selecione o Cargo</option>
                     <option value="1" <%if(cargo==1){%>selected<%}%>>Síndico</option>
                     <option value="2"<%if(cargo==2){%>selected<%}%>>Subsíndico</option>
                     <option value="3"<%if(cargo==3){%>selected<%}%>>Conselheiro</option>
                  </select>
                  <span class="fa fa fa-child form-control-feedback left" aria-hidden="true"></span>   
               </div>
               <div class="col-md-3 col-sm-3  form-group has-feedback <% if(tipo_msg.length > 0 ) { %>input-validation-error <% } %>">
                  <select id="tipo" class="form-control has-feedback-left" name="tipo">
                     <option value="1"<%if(tipo==1){%>selected<%}%>>Funcionário</option>
                     <option value="2"<%if(tipo==2){%>selected<%}%>>Condômino</option>
                     <option value="3"<%if(tipo==3){%>selected<%}%>>Terceiro</option>
                  </select>
                  <span class="fa fa fa-child form-control-feedback left" aria-hidden="true"></span> 
               </div>
               <div class="col-md-12">
                  <fieldset>
                     <legend>Configurações</legend>
                     <div class="col-md-2 col-sm-2  form-group has-feedback">
                        <label>Ativo?</label>
                        <br>
                        <label class="switch">
                        <input type="checkbox" name="ativo" <%if(ativo==1){%>checked<%}%>>
                        <span class="slider round"></span>
                        </label>   
                     </div>
                     <div class="col-md-2 col-sm-2  form-group has-feedback">
                        <label>Responsável Financeiro?</label>
                        <br>
                        <label class="switch">
                        <input type="checkbox" name="responsavel"<%if(responsavel==1){%>checked<%}%>>
                        <span class="slider round"></span>
                        </label>   
                     </div>
                  </fieldset>
               </div>
               <div class="form-group row">
               </div>
               <div class="ln_solid"></div>
               <div class="form-group row">
                  <div class="col-md-9 col-sm-9  offset-md-3">
                    <button type="submit" class="btn btn-primary btn-lg float-right"><span class="glyphicon glyphicon-floppy-disk"></span> Salvar</button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>

</body>
<%- include ('../partials/footer.ejs')%>