Change database to SQLite.

Complete basic authentication.

client/index.html

@@ -18,7 +18,7 @@
  <li><a href="£">Your Tasks</a></li>
  </ul>
  </nav>
- <a class="logout" href="login.html"><button> Log Out</button></a>
+ <a class="logout"><button> Log Out</button></a>
  </header>
  </br>
  <div class="container">

client/js/form.js

@@ -44,9 +44,8 @@ function loginBtnClick() {
 
 function registerBtnClick() {
  // TODO: Validate the form before trying to authenticate
- // TODO: Add username to the database
  let data = {
- // name: document.getElementById('name').value,
+ name: document.getElementById('name').value,
  email: document.getElementById('email').value,
  pass: document.getElementById('password').value
  };

client/js/home.js

@@ -1,11 +1,45 @@
 
+async function logoutBtnClick() {
+ // Default options are marked with *
+ fetch(`https://localhost:3000/logout`, {
+ method: "GET", // *GET, POST, PUT, DELETE, etc.
+ mode: "cors", // no-cors, *cors, same-origin
+ cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+ credentials: "same-origin", // include, *same-origin, omit
+ headers: {
+ // "Content-Type": "application/json",
+
+ // 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ redirect: "follow", // manual, *follow, error
+ referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+ })
+ .then((res) => {
+ if(res.status === 200){
+ window.location.replace("./login.html");
+ }else{
+ alert("An error occurred");
+ }
+ console.log(res); // JSON data parsed by `data.json()` call
+ });
+}
+
 function getTasks() {
- // GET request to retrieve tasks from the database for the current user
+ // TODO: GET request to retrieve tasks from the database for the current user
 }
 
-getTasks(); // TODO: Store the returned tasks to show later
+getTasks(); // Store the returned tasks to show later
 
 window.addEventListener('load', () =>{
+
+ const logoutBtn = document.getElementsByClassName('logout')[0];
+ if(logoutBtn != null){
+ logoutBtn.addEventListener(
+ 'click',
+ logoutBtnClick
+ );
+ }
+
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const list_el = document.querySelector("#tasks");
@@ -65,7 +99,7 @@ window.addEventListener('load', () =>{
  input.value = "";
 
  task_edit_el.addEventListener('click' , () =>{
- if(task_edit_el.innerText.toLowerCase() == "edit" ){
+ if(task_edit_el.innerText.toLowerCase() === "edit" ){
  task_input_el.removeAttribute("readonly");
  task_input_el.focus();
  task_edit_el.innerText = "Save";

client/register.html

@@ -14,7 +14,7 @@
  <div class="form">
 
  <h1 class="heading">Register</h1>
-<!-- <input type="text" placeholder="name" autocomplete="off" class="name" id="name" required>-->
+ <input type="text" placeholder="name" autocomplete="off" class="name" id="name" required>
  <input type="email" placeholder="email" autocomplete="off" class="email" id="email" required>
  <input type="password" placeholder="password" autocomplete="off" class="password" id="password" required>
  <button class="submit-btn" id="register-btn">register</button>