fac-17 / week-6-bhkm- Goto Github PK

To sort out the weird order of things on the results a grid or table might be easier

Great use of promises!

Super compartimentalised and makes the code nice to read and understand 👏

It's generally not a good idea to push your .env file to github - this is where you tend to store secret stuff like api keys and (ahem) database usernames and passwords. Usually the .env never gets pushed to master, and you share the variables privately with the rest of your team

If you have chance may be worth abstracting out your data streamer function as you use it a few times

Great improvements on last week and feels like a proper app, lovely stuff

I like the test database instructions (although it might be worth mentioning you'll need the test url from the .env file), but the git clone, npm install, npm start/test instructions are important too. As a code reviewer the first thing I want to do is get the code cloned and running! Generally a good idea to put these instructions near the top of your readme

100%

Have had a quick scan through your repo and your use of ES6 is consistent and correct (from what I can gather). Great job! 💃💃💃

In script.js line 17, add arrow syntax? Check to see if there are any others

Same screenshot as the last issue but don't forget to declare your language - I always like to put en-gb so that the computer knows it's proper English 🇬🇧

ALSO while I'm here in the html - you've not included a title.

And if I was you guys I would put the link to normalise above the style.css - I've had problems with this before, where normalise overrides changes in my style.css because I had placed it below in the html. Place above to make sure your changes override normalise!

I know you teased me for saying this but it's actually really fun to play with so I'm going to say this again.

The little touches are really nice e.g. 'bearbug found on port 3000' and it actually feels like a really consistent project with the way it's branded etc.

Once you get the login page styled I think it's going to be really amazing

I imagine that you some ideas to fill the empty files, right? If after the issues some are still empty, it might be good to delete them for having a clean repo?

I wasn't sure what each input field was for, perhaps visible labels can clarify what the user is supposed to type; Nice work on the aria labels though :)

CSS doesn't appear to be loading on Heroku app, works locally though

Do you use both of them? Get rid of one?

When you have a password field, you can easily hide it with input type='password' here:

Then anyone sneaking around wouldn't see your precious pw. 😉

It might just be me being inept, but I couldn't get your repo to run on local host.

Have taken screenshots of the error messages in case this is an actual problem and it's helpful in any way.

P.S. Yes, I did run npm i when I downloaded your repo.

Your project is deployed on heroku and working with the DB! Congrats! 🏅

In handler.js line 110-124, getUD is being called, but dbPassword was not what you were expecting it to be(hashed password from the database).

getUD(username, password)
      .then(dbPassword => {
        console.log(dbPassword);
      })
      .then(result => {
        if (result == false) {
          console.log(result);
        } else {
          res.writeHead(301, {
            Location: "/",
            "Set-Cookie": `jwt=${cookie}`
          });
          res.end();
        }
      });

i took a look at where getUD is defined(getUD.js),
and you're resolving the promise with the response that comes back from the sql query.
this response is always a massive object, and your password is actually hidden inside the .rows property of this object, which is an array with objects inside it that represent the rows returned by your sql query.

const getUD = (username, password) => {
  return new Promise((resolve, reject) => {
    dbConnection
      .query(`SELECT password FROM login WHERE username= '${username}';`)
      .then(dbPassword => {
        // passwordHandling.comparePasswords(
        //   dbPassword[1],
        //   dbPassword[0][0].password
        // );
        resolve(dbPassword);
        console.log("dbPassword:", dbPassword);
        // console.log(dbPassword[1], dbPassword[0][0].password);
      })
      .catch(err => reject(err));
  });
};

dbPassword here isnt your database password, its an object with the value you want nested inside 😄
I've rewritten this to access the password and use it to resolve the response.

const getUD = (username, password) => {
  return new Promise((resolve, reject) => {
    dbConnection
      .query(`SELECT password FROM login WHERE username= '${username}';`)
      .then(sqlresponse => {
        console.log('response from password sql query', sqlresponse);
        //this is a massive object and you want the .rows property
        console.log('password is: ',sqlresponse.rows[0].password);
        resolve(sqlresponse.rows[0].password);
      })
      .catch(err => reject(err));
  });
};

In the SQL build file, there are character limits on username and password, but no limit on the login inputs. You can easily add this with a maxlength in the input field like:
<input type="text" maxlength="30" id="username">

I love the idea. Have gained much catharsis already from submitting my bugbears 🐛 🐻 💡

"When I visited the site, I was pleased to note that I would not have to give up my personal information in order to enter. I had a highly pressing thought to offload and the ability to do so without being hindered by logging in was a pleasant element of my visit. 10/10 would recommend."

Anonymous visitor

One way of fixing this:

This bit

getUD
      .getUD(username, password)
      .then(dbPassword => {
        console.log(dbPassword);
      })

Like you say returns an object. To get the password and run the compare function in bcrypt you can try and return dbPassword.rows from the getUD.js. You can then iterate through the response like this:

response.rows[0][password] 

which will get this part of the object:

rows:
   [ { password:
        '$2b$10$a9/KgpWGLJ6DhuT5fKExqegKc8tRdCMhWTO34gRIrAeycKHoolPLO' } ],

You have a good description of your idea on your README but there is a lack of a specific user journey. This is one of the requirements for this week and I think would be easy for you to add on.

An ES6 function INSIDE an ES5 function??

Looking forward to some front end action :D and styling

I feel it would make sense, once you're logged in, that you'd post as the signed-in user – rather than being able to pick your name again. Maybe try and store the username in the cookie?

fun fact you don't actually need the options object - all of the data is already stored in your database url:

let connectionString = process.env.DATABASE_URL;
// this variable must be called 'connectionString' for this to work
module.exports = new Pool({
  connectionString,
  ssl: !connectionString.includes("localhost")
})

Three of the members of the team have equal commits and one has a couple extra. When addressing issues you could level this out. 🥇

So close to getting the compare passwords bit done before the code review, which is great stuff!

const getUD = (username, password) => {
  return new Promise((resolve, reject) => {
    dbConnection
      .query(`SELECT password FROM login WHERE username= '${username}';`)
      .then(dbPassword => {
        // passwordHandling.comparePasswords(
        //   dbPassword[1],
        //   dbPassword[0][0].password
        // );
        resolve(dbPassword);
        console.log("dbPasswod:", dbPassword);
        // console.log(dbPassword[1], dbPassword[0][0].password);
      })
      .catch(err => reject(err));
  });
};

You'll want to import in your hashPassword function from passwordHandling.js to hash the password you've passed as a paramater in line 4. Remember your hashPassword function returns a promise, so you might need a .then() to find the hash! Compare this hash to dbPassword and you should be golden.

PS. I think you'll need to resolve true or false, rather than resolving the password.

It's an interesting idea, looking forward to seeing it after you refactor it :)) 👍

Your code is super neat and easy to understand. Well done!!

Very easy for me to read through and find which code goes where, which is great.

:D Good! Intruders scripts don't run :)

this probably shouldn't be a status code of 200 as we're handling an error here so something is definitely not ok! I'm not too sure right now but it might be a 500 (internal server error). Try this site for cat lists of the error codes! https://http.cat/

Nice hashed passwords

AND CLEARS COOKIE!!

Excellent work, team!

Don't forget to clear console.logs when you're done. :)

https://media.giphy.com/media/NfKG1sbpUrYjK/giphy.gif

It should be relatively easy to re-direct to the main page when the user registers.

LEGENDS

simple to implement, but will be a massive ui improvement as currently they look identical. labels for input fields are nice, but when you have two identical forms its hard to tell which is which 😨

Your page could be made accessible quickly and easily by addressing two issues:

• Add a title
• Add labels for your inputs

Use const whenever the value isn't reassigned e.g. most function

Handler.js, lines 164-167:

function guestLogic(req, res){
  res.writeHead(302, { Location: "/", 'Set-Cookie': 'logged_in=false' });
  res.end();
}

Because you're not setting this as a JWT you can end up with two cookies, one for being a guest and one for being logged in:

It's amazing that you've managed to get the JWTs to work for the login route; it might be easier if you add this to the guest route too so there are no bugs later down the line.

Looks like a user tried to make their post into an h1 to draw attention to their bugbear! 👿

You seem to be sanitising the inputs so that this cannot be done. I tried to work out how you had done this but couldn't see it in your code. Could you explain this in your presentation?

love that you've done some tests, but maybe remove the console log - it's a largeish print in my console