Cannot Get using forms in Node.js Express - forms

I'm trying to use a form to submit to the website so that I can render the website.
this is my form
div.ten.columns#LogModal
h3 Log In
p
a.button(href='#', data-reveal-id='exampleModal') Example modal
div#exampleModal.reveal-modal
h2 Log In
p
form(method='get', action='/Log')
input(type='text', placeholder='Username', name='Username', id='Username')
input(type='password', placeholder='Password', name='Password', id='Username')
input(type='submit', value='Log in', id='LogButton')
script(src='javascripts/foundation.min.js')
script(src='javascripts/app.js')
script
$(window).load(function(){
$("#featured").orbit();
});
And its just going through the server.js like so
app.get('/Log', User.Home);
and eventually renders a webpage like so:
exports.Home = function (req, res) {
res.render('MyHome'); };
and all that results in this error:
Cannot GET /Log?Username=&Password=&LogButton=Log+in
I want it to work without any log in information at this point because its just for demonstration right now. Can anybody help me?

app.get('/Log', User.Home);
In this function, if User.Home is not defined then you will get this error.
Does Home function exist in User model?
Just create one function(lets say 'demoHome') with any name in server.js and call it here like..
app.get('/Log', demoHome);
where demoHome function will be defined as..
var demoHome = function(req, res){ somecode here with proper response or render any page here using res.rendere('path/of/template')};

Related

Mistake in using DOMPurify on the backend to sanitize form data?

I was wondering if it was possible to use DOMPurify to sanitize user input on a form before it is saved to database. Here's what I've got in my routes.js folder for my form post:
.post('/questionForm', (req, res, next) =>{
console.log(req.body);
/*console.log(req.headers);*/
const questions = new QuestionForm({
_id: mongoose.Types.ObjectId(),
price: req.body.price,
seats: req.body.seats,
body_style: req.body.body_style,
personality: req.body.personality,
activity: req.body.activity,
driving: req.body.driving,
priority: req.body.priority
});
var qClean = DOMPurify.sanitize(questions);
//res.redirect(200, path)({
// res: "Message recieved. Check for a response later."
//});
qClean.save()
.then(result => {
//res.redirect(200, '/path')({
// //res: "Message recieved. Check for a response later."
//});
res.status(200).json({
docs:[questions]
});
})
.catch(err => {
console.log(err);
});
});
I also imported the package at the top of the page with
import DOMPurify from 'dompurify';
When I run the server and submit a post request, it throws a 500 error and claims that dompurify.sanitize is not a function. Am I using it in the wrong place, and/or is it even correct to use it in the back end at all?
This might be a bit late, but for others like me happening to run into this use case I found an npm package that seems well suited so far. It's called isomorphic-dompurify.
isomorphic-dompurify
DOMPurify needs a DOM to interact with; usually supplied by the browser. Isomorphic-dompurify feeds DOMPurify another package, "jsdom", as a dependency that acts like a supplementary virtual DOM so DOMPurify knows how to sanitize your input server-side.
In the packages' own words "DOMPurify needs a DOM tree to base on, which is not available in Node by default. To work on the server side, we need a fake DOM to be created and supplied to DOMPurify. It means that DOMPurify initialization logic on server is not the same as on client".
Building on #Seth Lyness's excellent answer --
If you'd rather not add another dependency, you can just use this code before you require DOMPurify. Basically what isometric-dompurify is doing is just creating a jsdom object and putting it in global.window.
const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {window} = new JSDOM('<!DOCTYPE html>');
global.window = window;

Why does ReactRouter's Route path ":params" read as "styles.css" in express?

I am using Reactrouter in my front end and Express in my back end.
When I am routing with custom parameters which im using for a findbyID fetch for a component, I found
through my error log on express side read the custom param as styles.css.
React Rounter Side:
<Route path="/id/:id" component={Something} />
On Express:
app.get("/id/:id", (req, res) => {
const id = req.params.id;
database.findById(id, (e, found) => {
console.log(id);
if (!e) {
console.log(found);
} else {
console.log(e);
console.log("consult stack overflow");
}
});
});
Error Message:
MongooseError [CastError]: Cast to ObjectId failed for value "styles.css" at path "_id" for model "database"
Why does it do this and how can I fix it?
So as it turns out I have a Link to a styles.css in my index html page. soon as i removed that everything worked the way it should have. So if anyone Is stuggling with this exact same issue later down the line here's hoping this helps you. Check your index.html file for any matching names.

How to access actions in the controller

I'm a newbie trying to learn sails js, please bear with me.
As instructed in a tutorial I tried to set up my controllers and views to show a simple page just to make sure that the routing is working as expected.
So I have a PersonalController.js inside api/controllers folder. This was generated automatically from the generate cli command so I'm sure the location is correct.
Then I create a test view inside views/pages. I named it personal.ejs.
And so I modified my PersonalController to this
module.exports = {
list: function(req, res) {
return res.view('personal');
}
};
I don't know why but I'm getting an error.
I tried to just return json but I still get the same result, 404.
module.exports = {
list: function(req, res) {
return res.json({
todo: 'test'
});
}
};
I know I am missing something, just not sure what it is.

Get undefined variable trying to update the path to an uploaded file within MongoDB using angular-file-upload and MEAN.js

If someone could help me I would be eternally grateful. I have been slamming my head against a brick wall for weeks trying to get images to upload the way it is demonstrated out of the box with the MEAN.js users module. In the generated users module the file is uploaded into a directory and the path to that file is stored in a field in the mongodb document. I can get the file to upload to where it needs to go using multer and the fileupload function. However, I cannot save the path to the field within the document. I cannot figure out how to avoid getting an 'undefined' variable. I've tried creating a $window service and passing data to it as a global variable and a bunch of other things and I'm totally stuck.
I have commented the code below to demonstrate what is going awry in my server controller changeShoePicture function.
// This is the boilerplate code from the mean.js "users" module.
// I can not create a $window service or global variable to store the
// shoe data below so that I can update the shoe.shoeImageURL field
// in MongoDB with path to the successfully uploaded file.
exports.changeShoePicture = function (req, res) {
var message = null;
var shoe = req.shoe;
var upload = multer(config.uploads.shoeUpload).single('newProfilePicture');
var profileUploadFileFilter = require(path.resolve('./config/lib/multer')).profileUploadFileFilter;
console.log('i am here', shoe); // shoe is defined here.
// Filtering to upload only images. This works and proceeds to the else condition!
upload.fileFilter = profileUploadFileFilter;
upload(req, res, function (uploadError) {
if(uploadError) {
return res.status(400).send({
message: 'Error occurred while uploading profile picture'
});
} else {
//shoe image file is successfully uploaded to the location on the server,
// However the following fails because the shoe variable is undefined.
shoe.shoeImageURL = config.uploads.shoeUpload.dest + req.file.filename;
}
});
To make sure I've got this right:
The upload function is being called on your parameters passed by your route, req and res. You set the shoe var from req.shoe.
What are the chances that upload() is messing with your req?
Drop a console.log(req) in right after you call upload and report back

Jade + mongodb + express.js, delete form not working

My delete code is not working and I think not even firing as I don't see my console.log, I have an add button that works with a form and they look alike, this is why I don't get it.
app.js:
var db = monk('localhost:27017/mongodb');
Jade:
extends admin_menu
block content
h1.
Cocktail list
ul
each cocktail, i in cocktaillist
li
p= cocktail.name
form#form_delete_project(name="/admin/delete_cocktail", method="post", action="/admin/delete_cocktail")
input#input_name(type="hidden", placeholder="", name="_id", value="#{cocktail._id}")
button#submit_project(type="submit") delete
index.js:
router.post('/admin/delete_cocktail', function(req, res) {
console.log(id)
// Set our internal DB variable
var db = req.db;
// Get our form values. These rely on the "name" attributes
var id = req.body._id;
// Set our collection
var collection = db.get('cocktailcollection');
// Submit to the DB
collection.remove({
"_id":id
}, function (err, doc) {
if (err) {
// If it failed, return error
res.send("There was a problem removing the information to the database.");
}
else {
// And forward to success page
res.redirect("/admin/cocktail_list");
}
});
});
Jade is built on indentation. Since you are not indenting the items in your form it is not in you form. In html your code would look like this:
<form>
</form>
<input name="_id">
<button>
Since your input with _id is outside the form it is not being posted. That is why your console log is showing nothing. There is no req.body._id.And, of course, your submit-button is also outside the form. So it does nothing.
So, the first thing you should do is indent the code.