change password bcrypt with hash and salt on ruby on rails 4.2 - ruby-on-rails-4.2

I'm trying to change the user password using the gem bcrypt and the hash-salt method.
Here's my code where i include my attempt to change password, but it gives me an error of a missing template.
User Controller
def create
#user = User.new(user_params)
end
def change_password
#user = User.find(params[:id])
if #user.password_hash == BCrypt::Engine.hash_secret(params[:current_password], #user.password_salt)
#user.password = params[:password]
#user.save
redirect_to "/users/#{#user.id}"
end
end
private
def user_params
params.require(:user).permit(:email, :password, :password_confirmation)
end
User Model
before_save :encrypt_password
def self.authenticate(email, password)
user = find_by_email(email)
if user && user.password_hash == BCrypt::Engine.hash_secret(password, user.password_salt)
return user
else
return nil
end
end
def encrypt_password
if password.present?
self.password_salt = BCrypt::Engine.generate_salt
self.password_hash = BCrypt::Engine.hash_secret(password, password_salt)
end
end
also, the Routes
patch 'users/:id/change_password' => 'users#change_password'
resources :users
and last but not less important, the form.
<%= form_for(#user, :url => "change_password") do |f| %>
<%= hidden_field(:user, :email, :value => #user.email) %>
<div class="form-group">
<div class="form-group col-md-4"><%= f.label :contraseña_actual %></div>
<div class="form-group col-md-8"><%= f.password_field(:current_password, :class => "form-control") %></div>
</div>
<div class="form-group col-md-4"><%= f.label :nueva_contraseña %></div>
<div class="form-group col-md-8"><%= f.password_field(:password, :class => "form-control") %></div>
<div class="form-group">
<div class="form-group col-md-4"><%= f.label :confirmar_contraseña %></div>
<div class="form-group col-md-8"><%= f.password_field(:password_confirmation, :class => "form-control") %></div>
</div>
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Cambiar Contraseña</button>
</div>
<% end %>

Related

CastError: Cast to ObjectId failed for value \"undefined\" (type string) at path \"_id\" for model \"students\""

So I have a problem in my CRUD application using Node JS, Express, and Mongo DB. Actually, I am just following this tutorial but I get stuck on the UPDATE part. I am able to CREATE, READ, and DELETE values from database already, but I don't know why I keep getting this error whenever I try to UPDATE my data.
I found the error is from my controller.js file and here's the code:
exports.update = (req,res)=>{
if(!req.body){
return res
.status(400)
.send({message:"Record to be updated can not be empty!"})
}
const id = req.params.id;
studentDb.findByIdAndUpdate(id,req.body,{userFindAndModify:false})
.then(data=>{
if(!data){
res.status(404).send({message:`Cannot update student record with ID ${id}. Maybe record not found.`})
}else{
res.send(data)
}
})
.catch(err=>{
res.status(500).send({message:`Error in updating student record with id=${id}.` + err})
})
}
My hypothesis is that the objectID goes on the first model in my schema because whenever I check the console when I run the application, the last value of the model in my schema, the "contact" goes undefined.
The ERROR:
I can provide the other codes related to this if my question is still unclear. Thank you in advance for answering! I've been stuck here for hours already.
EDIT
Here's the additional front-end code
(this is the FORM part from my update_student.ejs where I update the data):
<!-- form handling -->
<form method="POST" id="update_student">
<div class="new_student">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<label for="firstName" class="text-muted">First Name</label><br>
<input type="hidden" name="id" value="<%=students._id%>">
<input type="text" name="firstName" value="<%=students.firstName%>" placeholder="Corki">
</div>
<div class="col-lg-4">
<label for="middleName" class="text-muted">Middle Name</label><br>
<input type="text" name="middleName" value="<%=students.middleName%>" placeholder="Vi">
</div>
<div class="col-lg-4">
<label for="lastName" class="text-muted">Last Name</label><br>
<input type="text" name="lastName" value="<%=students.lastName%>" placeholder="Fortune">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="gender" class="text-muted">Gender</label><br>
<div class="radio inline">
<input type="radio" id="radio-2" name="gender" value="Male" <% if(students.gender == "Male"){ %>checked <% } %>>
<label for="radio-2" class="radio-label">Male</label>
</div>
<div class="radio inline">
<input type="radio"id="radio-3" name="gender" value="Female" <% if(students.gender == "Female"){ %>checked <% } %>>
<label for="radio-3" class="radio-label">Female</label>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="birthday" class="text-muted">Birthday</label>
<input type="text" name="birthday" value="<%=students.birthday%>" placeholder="MM/DD/YYYY">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="program" class="text-muted">Program</label>
<input type="text" name="program" value="<%=students.program%>" placeholder="i.e. BSIT">
</div>
<div class="col-md-6">
<label for="yearLevel" class="text-muted">Year Level</label>
<select class="form-select" name="yearLevel">
<option value="">Select year level</option>
<option <% if(students.yearLevel == "First Year"){ %>selected <% } %> value="First Year">First Year</option>
<option <% if(students.yearLevel == "Second Year"){ %>selected <% } %> value="Second Year">Second Year</option>
<option <% if(students.yearLevel == "Third Year"){ %>selected <% } %> value="Third Year">Third Year</option>
<option <% if(students.yearLevel == "Fourth Year"){ %>selected <% } %> value="Fourth Year">Fourth Year</option>
<option <% if(students.yearLevel == "Fifth Year"){ %>selected <% } %> value="Fifth Year">Fifth Year</option>
<option <% if(students.yearLevel == "Masteral"){ %>selected <% } %> value="Masteral">Masteral</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="text-muted">Email</label>
<input type="text" name="email" value="<%=students.email%>" placeholder="example#gmail.com">
</div>
<div class="form-group">
<label for="address" class="text-muted">Address</label>
<input type="text" name="address" value="<%=students.address%>" placeholder="Household No., Barangay, City, Province">
</div>
<div class="form-group">
<label for="contact" class="text-muted">Contact</label>
<input type="text" name="contact" value="<%=students.contact%>" placeholder="i.e 09XX-XXX-XXXX">
</div>
<div class="form-group">
<button type="submit" class="btn text-dark update">Save</button>
</div>
</div>
</form>
<!-- form handling -->
Code for my #update_student JS just in case:
$('#update_student').on("submit",(function(event){
event.preventDefault();
var unindexed_array = $(this).serializeArray();
var data = {}
$.map(unindexed_array,function(n,i){
data[n['firstName']] = n['value']
})
console.log(data);
var request={
"url": `http://localhost:1485/api/students/${data.id}`,
"method":"PUT",
"data" : data
}
$.ajax(request).done(function(response){
alert("Data updated successfully!");
})
}))
Thanks to Sir #Rajdeep Debnath 's help, I was able to look into may "unindexed_array" from my console.log and figured out that instead of data[n['firstName']] = n['value']
I should write data[n['name']] = n['value']
I wrote the former because I thought it is just the name of the variable but in actuality, it is like the "id" or "class" called in JavaScript. The form used "name" on the inputs (like <input type="text" name="program" value="<%=students.program%>" placeholder="i.e. BSIT"> from my code) so that's why it is the one called in the function instead.
Now my code for my #update_student JS goes like this:
$('#update_student').on("submit",(function(event){
event.preventDefault();
var unindexed_array = $(this).serializeArray();
var data = {}
$.map(unindexed_array,function(n,i){
data[n['name']] = n['value']
})
console.log(data);
var request={
"url": `http://localhost:1485/api/students/${data.id}`,
"method":"PUT",
"data" : data
}
$.ajax(request).done(function(response){
alert("Data updated successfully!");
})
}))
You just simply change your Url path with ``symbol instead of ''.
Just like that
var request={
"url": `http://localhost:1485/api/students/${data.id}`,
"method":"PUT",
"data" : data
}

Why is my JS logic appearing on index (using ejs/express)

im having an issue understanding why my JS is appearing on my layout. Im currently following along with a tutorial on sitepoint creating forms with in express and when i render the layout.ejs + index.ejs with contact as a partial, the logic on partial is appearing on the page as text.
here is the code:
<div class="form-header">
<% if (Object.keys(errors).length === 0) { %>
<h2>Send us a message aa</h2>
<% } else { %>
<h2 class="errors-heading">Oops, please correct the following:</h2>
<ul class="errors-list">
<% Object.values(errors).forEach(error => { %>
<li><%= error.msg %></li>
<% }) %>
</ul>
<% } %>
</div>
<form method="post" action="/contact" novalidate>
<div class="form-field <%= errors.message ? 'form-field-invalid' : ''
%>">
<label for="message">Message</label>
<textarea class="input" id="message" name="message" rows="4"
autofocus><%= data.message %></textarea>
<% if (errors.message) { %>
<div class="error"><%= errors.message.msg %></div>
<% } %>
</div>
<div class="form-field <%= errors.email ? 'form-field-invalid' : '' %>">
<label for="email">Email</label>
<input class="input" id="email" name="email" type="email" value="<%=
data.email %>" />
<% if (errors.email) { %>
<div class="error"><%= errors.email.msg %></div>
<% } %>
</div>
<div class="form-actions">
<button class="btn" type="submit">Send</button>
</div>
</form>

How to show error message on each input type field in nodejs using express-validator

I am begginer in nodejs and I am using express-validator library to validate form.
I want to display error message seprately to each input type field,
not group wise.
Currently my code shows the error in group like
Name is required!
Email is required!
Email is wrong!
Mobile is required!
========================================================================
Controller Code
employeeController.saveEmployee = function(req,res){
var employeeData = req.body;
// Start Validation
req.checkBody('employeeName','Name is required!').notEmpty();
req.checkBody('employeeEmail','Email is required!').notEmpty();
req.checkBody('employeeEmail','Email is wrong!').isEmail();
req.checkBody('employeeMobile','Mobile is required!').notEmpty();
req.sanitize('employeeName').trim();
req.sanitize('employeeName').escape();
// End Validation
var errors = req.validationErrors();
console.log(errors);
if(!errors){
var employee = new Employee({
name : req.body.employeeName,
email : req.body.employeeEmail,
mobile : req.body.employeemobile,
});
employee.save(function(err){
if(err){
throw err;
}
console.log('User inserted successfully');
res.redirect('/employee-list');
});
}else{
console.log(employeeData.employeeName);
res.render('employee/add-employee',{
errors : errors,
employeeData : employeeData
});
}
};
View template
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Add Employee Profile</h3>
<h5 class='text-aqua pull-right' style='margin-top: 0px;'>
<i class="fa fa-backward"></i> Back
</h5>
</div>
<p>
<% if(errors){ %>
<ul>
<% for(var i = 0; i < errors.length; i++){ %>
<li> <%= errors[i].msg %> </li>
<% } %>
</ul>
<% } %>
</p>
<!-- form start -->
<form method = 'post' action = '/save-employee'>
<div class="box-body">
<div class="form-group col-md-4">
<label>Name</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeName' id='employeeName' value='<%= employeeData.employeeName %>' class='form-control' placeholder='Employee Name'>
</div>
</div>
<div class="form-group col-md-4">
<label>Email</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeEmail' id='employeeEmail' value='<%= employeeData.employeeEmail %>' class='form-control' placeholder='Employee Email'>
</div>
</div>
<div class="form-group col-md-4">
<label>Mobile</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeMobile' id='employeeMobile' value='<%= employeeData.employeeMobile %>' class='form-control' placeholder='Employee Mobile'>
</div>
</div>
</div>
<div class="callout" id='message-container' style='display:none;'></div>
<div class="box-footer">
<button type='submit' name='saveEmployeeProfile' class='btn btn-primary'>Save</button>
</div>
</form>
</div>
</div>
Ok, so what you have to do - is separate errors.
Your controller file:
employeeController.saveEmployee = function(req,res){
const nameRequired = 'Name is required!';
const emailRequired = 'Email is required!';
const emailNotValid = 'Email is wrong!';
const mobileRequired = 'Mobile is required!';
const employeeData = req.body;
// Start Validation
req.checkBody('employeeName', nameRequired).notEmpty();
req.checkBody('employeeEmail', emailRequired).notEmpty();
req.checkBody('employeeEmail', emailNotValid).isEmail();
req.checkBody('employeeMobile', mobileRequired).notEmpty();
req.sanitize('employeeName').trim();
req.sanitize('employeeName').escape();
// End Validation
const errors = req.validationErrors();
console.log(errors);
if(!errors){
const employee = new Employee({
name : req.body.employeeName,
email : req.body.employeeEmail,
mobile : req.body.employeemobile,
});
employee.save(function(err){
if(err){
throw err;
}
console.log('User inserted successfully');
res.redirect('/employee-list');
});
}else{
console.log(employeeData.employeeName);
const employeeNameRequired = errors.find(el => el === nameRequired );
const employeeEmailRequired = errors.find(el => el === emailRequired);
const employeeEmailNotValid = errors.find(el => el === emailNotValid);
const employeeMobileRequired = errors.find(el => el === mobileRequired);
res.render('employee/add-employee',{
employeeData,
employeeNameRequired,
employeeEmailRequired,
employeeEmailNotValid,
employeeMobileRequired
});
}
};
And you View file will look something like this:
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Add Employee Profile</h3>
<h5 class='text-aqua pull-right' style='margin-top: 0px;'>
<i class="fa fa-backward"></i> Back
</h5>
</div>
<!-- form start -->
<form method = 'post' action = '/save-employee'>
<div class="box-body">
<div class="form-group col-md-4">
<label>Name</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeName' id='employeeName' value='<%= employeeData.employeeName %>' class='form-control' placeholder='Employee Name'>
<p><%= employeeNameRequired %></p>
</div>
<div class="form-group has-error">
<span class="help-block" style="text-align:center" id="error_tagType"></span>
</div>
</div>
<div class="form-group col-md-4">
<label>Email</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeEmail' id='employeeEmail' value='<%= employeeData.employeeEmail %>' class='form-control' placeholder='Employee Email'>
<p><%= employeeEmailRequired %></p>
<p><%= employeeEmailNotValid %></p>
</div>
<div class="form-group has-error">
<span class="help-block" style="text-align:center" id="error_tagName"></span>
</div>
</div>
<div class="form-group col-md-4">
<label>Mobile</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeMobile' id='employeeMobile' value='<%= employeeData.employeeMobile %>' class='form-control' placeholder='Employee Mobile'>
<p><%= employeeMobileRequired %></p>
</div>
<div class="form-group has-error">
<span class="help-block" style="text-align:center" id="error_tagDescription"></span>
</div>
</div>
</div>
<div class="callout" id='message-container' style='display:none;'></div>
<div class="box-footer">
<button type='submit' name='saveEmployeeProfile' class='btn btn-primary'>Save</button>
</div>
</form>
</div>
</div>
Update:
For me personally, using jsonSchema validation fits best. It's very configurable and results in more readable code. For example module tv4 can be used with jsonSchema to validate req.body.

Cannot read property 'forEach' of undefined node.js

I am getting a .forEach() error on this code
```<% if(locals.isAuthenticated) { %>
<section>
<h4>Leave a comment</h4>
<form method="POST" action="/landmarks/<%= landmark.id %>/comments">
<textarea name="content" id="content" placeholder="Comment"></textarea>
<button class="button">Leave a comment</button>
</form>
</section>
<% } %>
<section>
<h4>Comments</h4>
<% landmark.comments.forEach((comment) => { %>
<p><%= comment.content %></p>
<small><%= comment.createdBy.username %></small>
<small><%= comment.createdAt.toDateString() %></small>
<% if(locals.isAuthenticated && comment.belongsTo(user)) { %>
<form method="POST" action="/landmarks/<%= landmark.id %>/comments/<%= comment.id %>">
<input type="hidden" name="_method" value="DELETE">
<button class="btn">Delete Comment</button>
</form>
<% } %>
<% }) %>
</section>```
I am unsure why this is happening as I i believe this is correct syntax for the forEach method

how to return data from dynamically build form fields for insertmany

Im building a form in ejs based on files read from a sourcefolder. Each file will generate a number of fields in a form. The user can add metadata to each file and on submitting the entire form the data should be saved in mongodb. So how do I define the names in the fields so that I ideally could pass the entire req.body directly into mongodb like in this question: Post Multiple JSON Objects Simultaneously with Express and Postman.
I have tried with parametrized names like name = "size_<%= data[i].invNr %> but then I have to do a lot of parsing in order to get back to the individual objects.
<form action = "/" method = "POST">
<div class="form-group">
<% for (var i = 0; i < length; i++) { %>
<div class="row">
<div class="col-md-4"><img src="<%= data[i].fullPath %>" width="200" class="media-object"></div>
<div class="col-md-8"><i class="fa fa-certificate"></i>
<span>Original: <%= data[i].origFile %></span>
<br>
<span name="katnr">KatalogNr: <%= data[i].katNr %></span>
<br>
<span name="invnr">InventarNr: <%= data[i].invNr %></span>
<br>
<span>FullP: <%= data[i].fullPath %></span>
<br>
<span>Test: <%= data[i].test %></span>
<br>
<input type = "hidden" id="invnr_<%= data[i].invNr %>" name ="invnr" value="<%= data[i].invNr %>">
<input type = "hidden" id="fullpath_<%= data[i].invNr %>" name ="fullpath" value="<%= data[i].fullPath %>">
<span>Comment: <%= data[i].comment %></span>
<br>
<span>Color</span>
<input type = "text" id="color_<%= data[i].invNr %>" name ="color" value="Viggo<%= data[i].invNr %>">
<br>
<span> Size</span>
<input type = "text" id="size_<%= data[i].invNr %>" name = "size" value="Otto <%= data[i].invNr %>" >
</div>
</div>
<hr>
<% } %>
<input type = "submit" value = "Submit">
</div>
</form>
Thanks!
HTML
<form action = "/" method = "POST">
<div class="form-group">
<% for (var i = 0; i < length; i++) { %>
<div class="row">
<div class="col-md-4"><img src="<%= data[i].fullPath %>" width="200" class="media-object"></div>
<div class="col-md-8"><i class="fa fa-certificate"></i>
<span>Original: <%= data[i].origFile %></span>
<br>
<span name="katnr">KatalogNr: <%= data[i].katNr %></span>
<br>
<span name="invnr">InventarNr: <%= data[i].invNr %></span>
<br>
<span>FullP: <%= data[i].fullPath %></span>
<br>
<span>Test: <%= data[i].test %></span>
<br>
<input type = "hidden" id="invnr_<%= data[i].invNr %>" name ="invnr[]" value="<%= data[i].invNr %>">
<input type = "hidden" id="fullpath_<%= data[i].invNr %>" name ="fullpath[]" value="<%= data[i].fullPath %>">
<span>Comment: <%= data[i].comment %></span>
<br>
<span>Color</span>
<input type = "text" id="color_<%= data[i].invNr %>" name ="color[]" value="Viggo<%= data[i].invNr %>">
<br>
<span> Size</span>
<input type = "text" id="size_<%= data[i].invNr %>" name = "size[]" value="Otto <%= data[i].invNr %>" >
</div>
</div>
<hr>
<% } %>
<input type = "submit" value = "Submit">
</div>
Controller
var main = {}
for(var i = 0;i<req.body.invnr.length;i++){
var obj ={
invnr:req.body.invnr[i],
fullpath:req.body.fullpath[i],
fullpath:req.body.color[i],
fullpath:req.body.size[i]
}
main.push(obj);
}
console.log(JSON.stringify(main))

Resources