Presentation Week 7 --- ## BugBears 2.0 <iframe src="https://giphy.com/embed/WMDVABCaUNAYM" width="480" height="347" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> #### Andy, Christine, Emmanuel, Martha --- ### What we did * Decided to build upon our Bugbear project from last week * Created Login page for users to register or login and access the website * Add a log out button for logged-in users --- ### What we would like to have done * Login via email address * Guest access can view but not create bugbears * Like/Dislike bugbears * Add comments on bugbears * Delete bugbears --- ### How We worked * Swapped pairs * Maintained our code of conduct * Created a glossary with key terms * Ended up in silos a bitEnded up in silos a bit --- ### Our Requirements - [x] Login form with 2 fields - username and password - [x] Users only have to log in once (i.e. implement a cookie-based session on login) - [ ] Username is visible on each page of the site after logging in - [ ] Any user-submitted content should be labelled with the authors username --- ### Our Requirements - [x] There should be protected routes and unprotected routes that depend on the user having a cookie or not (or what level of access they have). - [x] Website content should be stored in a database --- ### Our Requirements - [ ] Include thorough tests on the back-end, testing pure functions and testing routes using Supertest. If you make external API calls, use Nock to mock the response for your tests. - [ ] Test front-end logic, we don't expect tests on the DOM. --- ### How we handle our endpoints **'/'** : We check if the user has a cookie, if they have a cookie they are sent to the homepage, if they don't have a cookie they are re-directed to the login page. **'/login'** : This is when you hit the login button. You are assigned a token & re-directed to the homepage. --- **'/register'** : When you hit the register button. You are assigned a token, your passowrd is hashed & salted and sent to be stored in the database. **'/get-info'**: on home page load - renders contents of the database to the DOM. --- **'/logout'**: When you hit the logout button. Your cookie is deleted + you are re-directed to the login page. **'/post-bugbear'**: When you submit a point. the database is queried + info is sent to be stored + the DOM is re-rendered. --- **'/guest-access'**: When you hit the button. You are assigned 2 cookies. One with a token + one with a value set to "logged_in = false" 😡 🙄 We'll talk about this later..... --- ### What we learned --- #### type=password to keep passwords hidden  --- #### var, const, let, & block scope  --- #### Hashing and salting  --- #### ...with promises ``` const bcrypt = require("bcrypt"); const hashPassword = password => { console.log("this is password", password); return new Promise((resolve, reject) => { bcrypt .genSalt(10) .then(generatedSalt => bcrypt.hash(password, generatedSalt)) .then(hashedPassword => { console.log(hashedPassword); resolve(hashedPassword); }) .catch(error => reject(error)); }); }; ``` --- #### Promises & Callbacks ``` req.on("end", () => { const parsedData = qs.parse(allData); const registeredPassword = parsedData.registerPassword; const username = parsedData.registerUserName; // this should ideally only happen after passwords have been compared - to be added setToken(req, res, payload, secret); passwordHandling .hashPassword(registeredPassword) .then(hashedPassword => postUD.postUD(username, hashedPassword, err => { if (err) { res.writehead(404, { "Content-Type": "text/html" }); res.end("<h1>Not found!</h1>"); console.log("this is the error post UD in handler:", err); } }) ``` --- #### Lists and tables We had issues last week with the styling of the items we were appending to the page ``` let createDom = response => { response.forEach(function(obj) { let listitem = document.createElement("li"); // add category p let category = document.createElement("p"); category.textContent = obj.category; // add name p let name = document.createElement("p"); name.textContent = obj.name; // add rage_level p let rageLevel = document.createElement("p"); rageLevel.textContent = obj.rage_level; // add description p let description = document.createElement("p"); description.textContent = obj.description; // append children listitem.appendChild(category); listitem.appendChild(name); listitem.appendChild(rageLevel); listitem.appendChild(description); bugBearList.appendChild(listitem); }); }; ``` --- This week: ``` const createDom = response => { response.forEach(function(obj) { let listitem = document.createElement("tr"); let category = document.createElement("td"); category.textContent = obj.category; let name = document.createElement("td"); name.textContent = obj.name; let rageLevel = document.createElement("td"); rageLevel.textContent = obj.rage_level; let description = document.createElement("td"); description.textContent = obj.description; ``` --- #### our comparepassword function  --- ``` getUD .getUD(username, password) .then(dbPassword => { passwordHandling.comparePasswords(password, dbPassword).then(result => { // console.log("result in handler", result); if (result == false) { } else { setToken(req, res, payload, secret); res.writeHead(302, { Location: "/" }); res.end(); } }); }) .catch(err => console.log("error - password was not found in database:", err) ); }); ``` --- ### What did we struggle with --- #### Guest access * The idea was to generate a separate guest access cookie, with a logged-in value set to false (that's unencrypted) * We then wanted to reference this value in order to alert users to log-in when they tried to input a bugbear --- * We had issues doing this and got an error when trying to set an eventlistener on our guest access button from the login page * We were also then generating two cookies, because when we hit the homepage endpoint we were getting an automatically generated logged-in cookie ---  ---  --- #### Displaying log-in name * The initial plan was to make a user's logged-in name appear on the page * And to automatically replace our name input field with the logged in name * We never got onto this. --- #### We upped our bug fixing game!  --- <iframe src="https://giphy.com/embed/Uod3eEQvIMHYHl88U2" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>