fac-15 / FAC_guidebook2.0

An app for showcasing places to eat and drink in Finsbury Park! Week 7 project: Authentication, password management, SQL database

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FAC_guidebook 2.0 🍴

This project is live on heroku: FAC Guidebook

To run the project locally πŸ’»

  1. Clone of fork the repo

  2. Go into the project folder cd FAC_guidebook2.0

  3. Run npm i

  4. Create a file config.env in your root directory and save the database credentials in this format:

    export DB_URL = postgres://_your_db_info_
    
  5. Run npm start

  6. Go to localhost:5000 for the home page

  7. Start contributing to FAC-guidebook! πŸ’•

  • For testing: run npm test (Database testing need additional credentials)

User journey:

  1. User can view πŸ‘€ existing posts

    • Pull and display data from db
  2. Click to add βž• own post

    • Check for cookie to see if user is logged in
  3. If not logged in πŸ”“ : Prompted to login or signup

    • (If logged in, jump to step 6)
  4. User signs up πŸ”

    • Client side validation - check that password is at least 8 chars, with at least 1 numb, 1 uppercase and 1 lowercase
    • Server side - Check if user name already exists in the db
    • If no error, submit form to new row in USERS table with a HASHED password
  5. User logs in πŸ”‘

    • Server side - check that username is present in db, then check that the hash of the input matches that user's hashed password.
    • If success, creates a JWT with info about specific user
  6. User can now access the post form (protected route) πŸ“ƒ

  7. User submits post form πŸ“ƒ

    • Client side - check that fields are not empty
    • Server side - check if the restaurant already exists/that a post hasn't already been made referencing it
    • If success, submit form to POSTS table and RESTAURANTS table
  8. User can view πŸ‘€ updated home page!

What we worked on πŸ•œ :

Day 1️⃣ :

  • Creating a new database on Heroku and linking it to the new repo (this took longer than expected, we're still not sure why!)
  • Signup form validation on the client side (unmatching passwords, patterns)
  • We spent a long time tracking our callback functions through different files to figure out where to put the login form validation (to compare the password in the database with the password that is submitted)
  • whiteboard coding

Our process

img_5081 img_5082 img_5083 img_5084

Day 2️⃣ :

  • Updated our user journey

img_5101

  • Client-side validation for the sign up page

  • Handling the USER LOGIN logic:

    • First step:
    const handlerLogin = (req, res) => {
  let body = "";
  req.on("data", function(data) {
    body += data;
  });
  req.on("end", function() {
    const {userName, password} = qs.parse(body);
    console.log(userName, password);

    getData.getUserData((err, result)=>{
      let loggedIn = false;
      if(err){
        console.log(err);
      } else {
        result.forEach((user)=>{
          if(user.name === userName && user.password === password){
            console.log("correct user details");
            loggedIn = true;
            return;
          } else {
            console.log("user doesn't exist!");
          }
        });
        if(!loggedIn){
          res.writeHead(302, {
            Location: "http://localhost:5000/public/login.html"
          });
          res.end();
        } else {
          res.writeHead(302, {
            Location: "http://localhost:5000/public/form.html"
          });
          res.end();
        }
      }
    })
  });
};
  • Refactor with bcryptjs?

  • We created two promises. Here's one:

const promiseSpecificUser = name => {
  return new Promise((resolve, reject) => {
    dbConnection.query(
      `SELECT * FROM users WHERE name = '${name}'`, (err, res) => {
      if (err) reject(err);
      else resolve(res.rows);
      });
  });
}
  • Signup form validation:

  • Client side - check that password is at least 8 chars, with at least 1 numb, 1 uppercase and 1 lowercase.

  • Server side - Check is user name already exists in the db

Login form validation:

  • Server side - check that username is present in db, then check that the hash of the input matches that user's hashed password!

  • Post form validation (everything we had in there last week...)

Test for server side and database SEPERATELY!

Day 3️⃣ :

Based on rasied issues, we ..

  • Add logout button & home button
  • Add the required rules for the password validation
  • Handle the length of the resturant review
  • Travis CI - All passing! πŸ’š

About

An app for showcasing places to eat and drink in Finsbury Park! Week 7 project: Authentication, password management, SQL database


Languages

Language:JavaScript 47.8%Language:CSS 24.3%Language:HTML 22.5%Language:PLpgSQL 5.4%