Petition Project, Register and Log In

config/db.js

@@ -51,7 +51,28 @@ function countSignatures() {
  .catch(err => console.log(err));
 }
 
+function insertRegistrationInfo(first, last, email, password) {
+ const q = `INSERT INTO users (first, last, email, password) VALUES ($1, $2, $3, $4) RETURNING id`;
+ const params = [first, last, email, password];
+
+ return db
+ .query(q, params)
+ .then(registrationResults => {
+ console.log("Insert new signature was successful");
+ return registrationResults;
+ })
+ .catch(err => console.log(err));
+}
+
+function getPasswordFromDB(email) {
+ const q = `SELECT * FROM users WHERE email = $1`;
+ const param = [email];
+ return db.query(q, param);
+}
+
 module.exports.insertSignatures = insertSignatures;
 module.exports.getSignature = getSignature;
 module.exports.getSignedNames = getSignedNames;
 module.exports.countSignatures = countSignatures;
+module.exports.insertRegistrationInfo = insertRegistrationInfo;
+module.exports.getPasswordFromDB = getPasswordFromDB;

index.js

@@ -4,10 +4,48 @@ const bodyParser = require("body-parser");
 const hb = require("express-handlebars");
 const cookieSession = require("cookie-session");
 const db = require("./config/db.js");
+const bcrypt = require("bcryptjs");
 const insertSignatures = db.insertSignatures;
 const getSignature = db.getSignature;
 const getSignedNames = db.getSignedNames;
 const countSignatures = db.countSignatures;
+const insertRegistrationInfo = db.insertRegistrationInfo;
+const getPasswordFromDB = db.getPasswordFromDB;
+
+var id;
+var userId;
+
+function hashPassword(plainTextPassword) {
+ return new Promise(function(resolve, reject) {
+ bcrypt.genSalt(function(err, salt) {
+ if (err) {
+ return reject(err);
+ }
+ bcrypt.hash(plainTextPassword, salt, function(err, hash) {
+ if (err) {
+ return reject(err);
+ }
+ resolve(hash);
+ });
+ });
+ });
+}
+
+function checkPassword(textEnteredInLoginForm, hashedPasswordFromDatabase) {
+ return new Promise(function(resolve, reject) {
+ bcrypt.compare(
+ textEnteredInLoginForm,
+ hashedPasswordFromDatabase,
+ function(err, doesMatch) {
+ if (err) {
+ reject(err);
+ } else {
+ resolve(doesMatch);
+ }
+ }
+ );
+ });
+}
 
 app.use(bodyParser.urlencoded({ extended: false }));
 
@@ -60,7 +98,7 @@ app.post("/", (req, res) => {
 
 app.get("/thankyou", (req, res) => {
  if (req.session.signatureId) {
- console.log(req.session.signatureId);
+ //console.log(req.session.signatureId);
  getSignature(req.session.signatureId).then(idResults => {
  res.render("thankyou", {
  layout: "main",
@@ -70,6 +108,94 @@ app.get("/thankyou", (req, res) => {
  }
 });
 
+app.post("/register", (req, res) => {
+ if (
+ req.body.first &&
+ req.body.last &&
+ req.body.email &&
+ req.body.password
+ ) {
+ hashPassword(req.body.password)
+ .then(hash =>
+ insertRegistrationInfo(
+ req.body.first,
+ req.body.last,
+ req.body.email,
+ hash
+ ).then(insertRegistrationInfo => {
+ id = insertRegistrationInfo.rows[0].id;
+ req.session.id = id;
+ console.log(
+ "This is your id: " + insertRegistrationInfo.rows[0].id
+ );
+ console.log("You've registered");
+ res.redirect("/");
+ })
+ )
+ .catch(() => {
+ res.render("register", {
+ error: true
+ });
+ });
+ } else {
+ res.render("register", {
+ layout: "main",
+ error: true
+ });
+ }
+});
+
+app.get("/login", (req, res) => {
+ if (userId) {
+ res.redirect("/");
+ } else {
+ res.render("login", {
+ layout: "main"
+ });
+ }
+});
+
+app.post("/login", (req, res) => {
+ if (req.body.email && req.body.password) {
+ getPasswordFromDB(req.body.email)
+ .then(hashedPassword =>
+ checkPassword(
+ req.body.password,
+ hashedPassword.rows[0].password
+ ).then(value => {
+ if (value === true) {
+ userId = hashedPassword.rows[0].id;
+ let first = hashedPassword.rows[0].first;
+ let last = hashedPassword.rows[0].last;
+
+ req.session.userId = userId;
+ res.render("welcome", {
+ layout: "main"
+ });
+ } else {
+ console.log("We are here");
+ res.render("login", {
+ error: true
+ });
+ }
+ //check if it correct, set the session and redirect, otherwise render an error
+ })
+ )
+ .catch(err => {
+ console.log("We are here 2", err);
+ res.render("login", {
+ error: true
+ });
+ });
+ } else {
+ console.log("We are here 3");
+ res.render("login", {
+ layout: "main",
+ error: true
+ });
+ }
+});
+
 app.get("/signed", (req, res) => {
  getSignedNames().then(signedNames => {
  console.log(signedNames);
@@ -80,6 +206,12 @@ app.get("/signed", (req, res) => {
  });
 });
 
+app.get("/register", (req, res) => {
+ res.render("register", {
+ layout: "main"
+ });
+});
+
 app.listen(8080, () => {
  console.log("Listening Petition");
 });

public/styles/style.css

@@ -45,6 +45,7 @@ h3 {
 
 .picture {
  text-align: center;
+ margin: 20px;
 }
 
 .picture-thanks,
@@ -81,3 +82,8 @@ h3 {
  font-weight: bold;
  border: 1px dashed grey;
 }
+
+.input-field {
+ width: 600px;
+ padding: 10px;
+}

sql.sql

@@ -2,8 +2,11 @@ DROP TABLE IF EXISTS signatures;
 
 CREATE TABLE signatures (
  id SERIAL PRIMARY KEY,
+ -- user_id INTEGER NOT NULL, 
+ -- a foreign key
  first VARCHAR(200) NOT NULL,
  last VARCHAR(200) NOT NULL,
  signature TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 );
+

users.sql

@@ -0,0 +1,9 @@
+
+CREATE TABLE users (
+ id SERIAL PRIMARY KEY,
+ first VARCHAR (255) NOT NULL,
+ last VARCHAR (255) NOT NULL,
+ email VARCHAR(255) NOT NULL UNIQUE,
+ password VARCHAR (100) NOT NULL,
+ created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

views/login.handlebars

@@ -0,0 +1,22 @@
+<div class="main">
+
+ <div class="picture">
+ <img src="/pizza.jpg" id="ananas">
+ </div>
+
+ <h1>Please log in</h1>
+
+ <div class="form">
+ <form method="post">
+ <input type="text" name="email" value="" placeholder="Email Address" class="input-field"><br/><br/>
+ <input type="text" name="password" value="" placeholder="Password" class="input-field"><br/><br/>
+ <br><br>
+ {{#error}}
+ <div class="error">Oooops! Something went wrong. Try again</div>
+ {{/error}}
+ <input type="submit" value="Log In" id="submit-btn">
+ </form>
+ </div>
+
+
+</div>

views/register.handlebars

@@ -0,0 +1,25 @@
+<div class="main">
+ <h1>Register for our good cause</h1>
+
+ <div class="picture">
+ <img src="/pizza.jpg" id="ananas">
+ </div>
+
+ <div class="form">
+ <form method="post">
+
+ <input type="text" name="first" value="" placeholder="First Name" class="input-field"><br/><br/>
+ <input type="text" name="last" value="" placeholder="Last Name" class="input-field"><br/><br/>
+ <input type="text" name="email" value="" placeholder="Email Address" class="input-field"><br/><br/>
+ <input type="text" name="password" value="" placeholder="Password" class="input-field"><br/><br/>
+ <br>
+ {{#error}}
+ <div class="error">Oooops! Something went wrong. Try again</div>
+ {{/error}}
+ <br>
+ <input type="submit" value="Sign Up" id="submit-btn">
+ </form>
+ </div>
+
+
+</div>

views/welcome.handlebars

@@ -7,10 +7,8 @@
 
  <div class="form">
  <form method="post">
- First name:
- <input type="text" name="first" value="">
- Last name:
- <input type="text" name="last" value="">
+ <input type="text" name="first" value="" placeholder="First Name" class="input-field"><br/><br/>
+ <input type="text" name="last" value="" placeholder="Last Name" class="input-field">
  <br><br>
  <input type="hidden" name="signature" value="">
  {{#error}}