SQUALL RETURNS

Dan 🎮 Renata 🐰 Roshan 🙆🏾 Gillian 🍬

---

Installation Guide

1. git clone this repo
2. npm install to set up node modules
3. Initialise a local database
4. Create .env file in project route
5. Add DB_URL/TEST_DB_URL values to your .env

---

This is Week 2

Catch up with our story so far on the previous week's repo!

---

Requirements this time

As per the project brief

• Login form with 2 fields - username and password
• 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
• There should be protected routes and unprotected routes that depend on the user having a cookie or not
• Website content should be stored in a database
• 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

---

Or much prettier: as issues


---

New wireframe

Split depending on whether the user is logged in.


---

Client side validation

---

password validation

const charPw = document.getElementById("char-form-password");
const pwErr = document.getElementById("pwErr");

let checkPw = () => {
  if (charPw.validity.patternMismatch) {
    displayErr(
      pwErr,
      "Password must contain at least eight characters, including one letter and one number"
    );
  } else if (charPw.validity.valueMissing) {
    displayErr(pwErr, "Please enter a password");
  } else {
    displayErr(pwErr, "");
    return true;
  }
};

---

Existing user validation

const checkUniqueUser = cb => {
  backendCall(`/check-char?=${charName.value}`, "GET", null, char => {
    cb(char);
  });
};

const checkName = () => {
    checkUniqueUser(char => {
      if (char.length != 0) {
        displayErr(nameErr, "Player name is already taken");
        nameOk = false;
      } else if (!charName.value) {
        displayErr(nameErr, "Please enter a name");
        nameOk = false;
      } else {
        displayErr(nameErr, "");
        nameOk = true;
      }
    });
  };

---

Cookie

---

Deleting cookie from the front-end

const deleteButton = document.querySelector("#delete-button");
deleteButton.addEventListener("click", e => {
  const result = window.confirm(
    "Are you sure you want to delete your character?"
  );
  if (result) {
    deleteExistingPlayer(document.cookie);
    document.cookie = "player=0; expires = Thu, 01 Jan 1970 00:00:00 GMT";
  } else {
    e.preventDefault();
  }
});

---

HttpOnly

---

Auth

We'll walk you through our login and home endpoint handling

---

To be improved

• Testing; we wrote loads of new code but no new tests
• Abstracting and refactoring. For example, our handlers.js file is 433 lines long and we write the same 500 response TWENTY times
• Replace all our callback logic with shiny new promises
• Some of our frontend functions are unnecessarily impure

---

Thank you