add user profile update functions etc.

Relates #32
fac-13 · Apr 13, 2018 · 32f8de5 · 32f8de5
1 parent ae2a095
commit 32f8de5
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 73 deletions.
diff --git a/public/auth.js b/public/auth.js
@@ -39,14 +39,14 @@ loginButton.addEventListener('click', (e) => {
   } else {
     // backend authentication request
     const loginCredentials = packageFormData(loginForm);
-    clientRequest('POST', '/login', loginCredentials, (response) => {
+    clientRequest('POST', '/login', loginCredentials, function(response) {
       console.log(response);
       if (response.route && response.message === 'Authentication Success!') {
-        window.setTimeout(() => {
+        window.setTimeout(function() {
           window.location.replace(response.route);
         }, 1000);
       } else {
-        setTimeout(() => {
+        setTimeout(function() {
           const errorMessage =
             'Sorry, we have no record of that username/password combination. Please try again or register.';
           loginValidation.innerText = errorMessage;

diff --git a/public/profile.html b/public/profile.html
@@ -1,49 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="./public/style.css">
   <title>Document</title>
 </head>
+
 <body>
-    <nav id="nav" class="nav">
-        <div id="nav-profile" class="nav_profile">profile</div>
-      </nav>
+  <nav id="nav" class="nav">
+    <div id="nav-profile" class="nav_profile">profile</div>
+  </nav>
+
+  <h1>User profile</h1>
 
-  <p>User profile</p>
   <section id="updateZone">
-  <form id="updateProfile" class="form">
-    Username:
-    <input id="username" type="text" name="handle" value="" placeholder="" required>
-    First name:
-    <input id="firstname" type="text" name="first_name" value="" placeholder="" required>
-    Last name:
-    <input id="lastname" type="text" name="last_name" value="" placeholder="" required>
-    Email:
-    <input id="email" type="email" name="email" value="" placeholder="" required>
-    Cohort:
-    <input id="cohort" type="text" name="cohort" value="" placeholder="" required>
-    City:
-    <input id="city" type="text" name="city" value="" placeholder="" required>
-    Looking for work? 
-    <input type="radio" name="work_looking_status" value="Y">Yes
-    <input type="radio" name="work_looking_status" value="N">No 
-    About me: 
-    <textarea id="aboutme" name="about_me">
-    </textarea>
-    </form>
-    <button type="button" id="updateButton" name="updateButton">Update profile</button>
-    </section>
-
-    <section id="viewZone">
-      <p>View zone</p>
-    </section>
+    <h2>Update Profile</h2>
+    <form id="updateProfile" class="form">
+
+      <label for="">Username:</label>
+        <input id="username" type="text" name="handle" value="" placeholder="" required>
+      <label for="">First name:</label>
+        <input id="firstname" type="text" name="first_name" value="" placeholder="" required>
+      <label for="">Last name:</label>
+        <input id="lastname" type="text" name="last_name" value="" placeholder="" required>
+      <label for="email">Email:</label>
+        <input id="email" type="email" name="email" value="" placeholder="" required>
+      <label for="">Cohort:</label>
+        <input id="cohort" type="text" name="cohort" value="" placeholder="" required>
+      <label for="">City:</label>
+        <input id="city" type="text" name="city" value="" placeholder="" required>
+      <label for="">Looking for work?</label>
+        <input type="radio" name="work_looking_status" value="Y">Yes
+        <input type="radio" name="work_looking_status" value="N">No
+      <label for="">About me:</label>
+        <textarea id="about_me" name="about_me"></textarea>
+      <button type="submit" id="updateButton" name="updateButton">Update profile</button>
+
+      </form>
 
-
-<script src="./public/logic.js" type="text/javascript"></script>
-<script src="./public/profile.js" type="text/javascript"></script>
-<script src="./public/storage.js" type="text/javascript"></script>  
+  </section>
+
+  <section id="viewZone">
+    <h2>Profile</h2>
+    <p id="handle"></p>
+    <p id="first_name"></p>
+    <p id="last_name"></p>
+    <p id="email"></p>
+    <p id="cohort"></p>
+    <p id="city"></p>
+    <p id="work_looking_status"></p>
+    <p id="about_me"></p>
+  </section>
+
+
+  <script src="./public/logic.js" type="text/javascript"></script>
+  <script src="./public/profile.js" type="text/javascript"></script>
+  <script src="./public/storage.js" type="text/javascript"></script>
 </body>
+
 </html>
diff --git a/public/profile.js b/public/profile.js
@@ -1,25 +1,42 @@
 var updateForm = document.getElementById("updateProfile");
+var profileView = document.getElementById("viewZone");
+
+
+var updateButton = document.getElementById("updateButton");
 var formFields = updateForm.childNodes;
+var profileParas = profileView.childNodes;
+
+console.log(profileParas);
+
+updateButton.addEventListener("click", function(e) {
+    e.preventDefault();
+    const updateDetails = packageFormData(updateForm);
+    console.log(updateDetails);
+    clientRequest('PUT', '/profile-update', updateDetails, function(response) {
+        console.log("This is the response afetr Update: ", response);
+        window.location.replace('/profile');
+        // populateUserProfile(response);
+    });
 
-var username = document.getElementById("username");
-var firstname = document.getElementById("firstname");
-var lastname = document.getElementById("lastname");
-var email = document.getElementById("email");
-var cohort = document.getElementById("cohort");
-var city = document.getElementById("city");
-var aboutme = document.getElementById("aboutme");
+});
 
 function populateUserProfile(userData) {
   var parsedData = userData[0];
-  console.log("Parsed data", parsedData);
+//   console.log("Parsed data", parsedData);
 
   formFields.forEach(function(item) {
     if (item.name) {
-        console.log(item.name);
+        // console.log(item.name);
         item.value = parsedData[item.name];
     }
   });
 
+  profileParas.forEach(function(item) {
+    if (item.id) {
+        item.innerText = parsedData[item.id];
+    }
+  });
+
 }
 
 // IFFE on load

diff --git a/src/handler.js b/src/handler.js
@@ -1,14 +1,14 @@
 const path = require('path');
 const fs = require('fs');
 const querystring = require('querystring');
-// const pgpromise = require('pg-promise');
 const bcrypt = require('bcrypt');
+const { parse } = require('cookie');
+const { sign, verify } = require('jsonwebtoken');
+
 const getListData = require('./queries/getListData');
-const postProfileData = require('./queries/postProfileData');
+const updateUser = require('./queries/updateUser');
 const loginAuth = require('./queries/loginAuth');
 const { checkNewUserExists, addNewUser } = require('./queries/registerUser');
-const { parse } = require('cookie');
-const { sign, verify } = require('jsonwebtoken');
 const getProfileData = require('./queries/getProfileData');
 
 const staticHandler = (req, res) => {
@@ -97,6 +97,38 @@ const profileDataHandler = (req, res) => {
   })
 };
 
+const profileUpdateHandler = (req, res) => {
+  // console.log(req);
+  let body = '';
+  req.on('data', (chunk) => {
+    body += chunk;
+  });
+  req.on('end', () => {
+    console.log(JSON.parse(body).data);
+    body = JSON.parse(body);
+    let inputData = [];
+    for (let item in body.data) {
+      console.log(body.data[item]);
+      inputData.push(body.data[item]);
+    }
+    console.log(inputData);
+    let { jwt } = parse(req.headers.cookie)
+    verify(jwt, process.env.JWT_SECRET, (err, decoded) => {
+
+      updateUser(decoded.userId, inputData, (error, result) => {
+        if (error) {
+          console.log(error);
+        } else {
+          let profileData = JSON.stringify(result);
+          console.log(profileData);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(profileData);
+        }
+      })
+    })
+  })
+}
+
 
 // UPDATE PROFILE 
 // console.log('Profile handler reached');
@@ -215,6 +247,7 @@ module.exports = {
   jwtHandler,
   listHandler,
   profileDataHandler,
+  profileUpdateHandler,
   loginHandler,
   registrationHandler,
 };
diff --git a/src/queries/postProfileData.js b/src/queries/postProfileData.js
diff --git a/src/queries/updateUser.js b/src/queries/updateUser.js
@@ -0,0 +1,36 @@
+const dbConnect = require('../database/db_connect'); 
+
+const updateUser = (userID, values, cb)=> {
+
+    var text = `
+    UPDATE users
+    SET (
+        handle, 
+        first_name, 
+        last_name, 
+        email, 
+        cohort, 
+        city, 
+        work_looking_status, 
+        about_me
+    )
+    = ($1, $2, $3, $4, $5, $6, $7, $8)
+    WHERE users.id = ${userID}
+    `
+
+    const addNewUser = {
+        text: text, 
+        values: values
+    }
+
+    dbConnect.query(addNewUser, (err,res)=>{
+        if (err) {
+            cb(err); 
+        } else {
+            cb(null, res); 
+            console.log("Insert new data:", res);
+        }
+    })
+}
+
+module.exports = updateUser; 
diff --git a/src/router.js b/src/router.js
@@ -3,6 +3,7 @@ const {
     jwtHandler,
     listHandler,
     profileDataHandler,
+    profileUpdateHandler,
     loginHandler,
     registrationHandler
 } = require('./handler');
@@ -36,24 +37,27 @@ const router = (req, res) => {
         //this comes in from auth.html to authenticate user login
         //this will redirect to index.html if authorised
         loginHandler(req, res);
-    } else if (endpoint === '/register') {
+    } 
+    else if (endpoint === '/register') {
         //this comes in from auth.html to sign up a user
         //this will redirect to profile.html (editable state)
         console.log("register route reached");
         registrationHandler(req, res);
-    } else if (endpoint === '/index') {
+    } 
+    else if (endpoint === '/index') {
         staticHandler('public/list.html', res);
     }
     else if (endpoint === '/list') {
         listHandler(req, res);
     }
     else if (endpoint === '/profile') {
-
         staticHandler('public/profile.html', res);
     }
     else if (endpoint === '/profile-data'){
         profileDataHandler(req, res); 
-
+    }
+    else if (endpoint === '/profile-update') {
+        profileUpdateHandler(req, res);
     }
     else if (endpoint.indexOf('public') !== -1) {
         staticHandler(endpoint, res);