From 55a48bd0740b964defc772d735b3a295bea825a2 Mon Sep 17 00:00:00 2001 From: Oliver Gren <oligr161@student.liu.se> Date: Mon, 27 Feb 2023 13:03:34 +0100 Subject: [PATCH] lab2 start and progress with schema, databasehelper and server --- client.js | 590 ++++++++++++++++++++-------------------- lab2/database_helper.py | 27 ++ lab2/schema.sql | 28 ++ lab2/server.py | 81 ++++++ requirements.txt | 8 + 5 files changed, 439 insertions(+), 295 deletions(-) create mode 100644 lab2/schema.sql create mode 100644 requirements.txt diff --git a/client.js b/client.js index 8267933..a9ba80b 100644 --- a/client.js +++ b/client.js @@ -1,295 +1,295 @@ - -displayView = function() { - // the code required to display a view - if (localStorage.getItem("logintoken") != null) { - loadProfileView(); - } else { - loadWelcomeView(); - } -}; -window.onload = function() { - displayView(); -}; - -loadWelcomeView = function() { - document.getElementById("pagecontent").innerHTML = ""; - document.getElementById("pagecontent").innerText = ""; - document.getElementById("pagecontent").innerHTML = document.getElementById("welcomeview").innerText; - var loginform = document.forms["loginform"]; - var signupform = document.forms["signupform"]; - signupform.addEventListener("submit", function(event) { - event.preventDefault(); - if(inputValidation("signupform")) { - var signupObject = {} - signupObject["email"] = signupform["email"].value; - signupObject["password"] = signupform["password"].value; - signupObject["firstname"] = signupform["fname"].value; - signupObject["familyname"] = signupform["lname"].value; - signupObject["gender"] = signupform["gender"].value; - signupObject["city"] = signupform["city"].value; - signupObject["country"] = signupform["country"].value; - - var message = serverstub.signUp(signupObject); - console.log(message); - if (!message.success) { - signupform["email"].value = ""; - signupform["email"].setAttribute("placeholder", message.message); - } else { - message = serverstub.signIn(signupform["email"].value, signupform["password"].value); - if(!message.success) { - signupform["email"].setAttribute("placeholder", message.message); - } else { - localStorage.setItem("logintoken", message.data); - displayView(); - } - } - } - }) - - - loginform.addEventListener("submit", function(event) { - event.preventDefault(); -<<<<<<< HEAD - var message = serverstub.signIn(loginform["email"].value, loginform["password"].value); - console.log(message); - if(!message.success) { - loginform["email"].value = ""; - loginform["password"].value = ""; - loginform["email"].setAttribute("placeholder", message.message); - } else { - localStorage.setItem("logintoken", message.data); - loadProfileView(); - } -======= - if (inputValidation("loginform")) { - var message = serverstub.signIn(loginform["email"].value, loginform["password"].value); - console.log(message); - if(!message.success) { - loginform["email"].value = ""; - loginform["password"].value = ""; - loginform["email"].setAttribute("placeholder", message.message); - } else { - localStorage.setItem("logintoken", message.data); - displayView(); - } - } ->>>>>>> 4c58f2373c357a402d439c148abe89d13737eddd - }) -} - -loadProfileView = function() { - console.log("cookie loaded"); - console.log(localStorage.getItem("logintoken")); - document.getElementById("pagecontent").innerHTML = ""; - document.getElementById("pagecontent").innerText = ""; - document.getElementById("pagecontent").innerHTML = document.getElementById("profileview").innerText; - - document.getElementById("defaultOpen").click(); - reloadBoard(document.getElementById("home-message-board")); - - // Account page - var changepassform = document.forms["changepassform"]; - changepassform.addEventListener("submit", function(event) { - event.preventDefault(); - if (inputValidation("changepassform")) { - var message = serverstub.changePassword(localStorage.getItem("logintoken"), changepassform["oldpassword"].value, changepassform["password"].value); - changepassform["oldpassword"].value = ""; - changepassform["password"].value = ""; - changepassform["password2"].value = ""; - var messageBox = document.getElementById("message2"); - if(!message.success) { - messageBox.style.color = "red"; - } else { - messageBox.style.color = "green"; - } - messageBox.innerText = message.message; - } - }) - - document.getElementById("logoutbutton").addEventListener("click", function(event) { - var message = serverstub.signOut(localStorage.getItem("logintoken")); - if(!message.success) { - document.getElementById("message1").innerText = message.message; - } else { - localStorage.removeItem("logintoken"); - } - displayView(); - }) - - var userData = serverstub.getUserDataByToken(localStorage.getItem('logintoken')).data - - // Change the information displayed on the homepage to the user credentials - document.getElementById('home-username').innerText = userData.firstname + ' ' + userData.familyname; - document.getElementById('home-gender').innerText = userData.gender; - document.getElementById('home-location').innerText = userData.city + ', ' + userData.country; - document.getElementById('home-email').innerText = userData.email; - - var postmessageform = document.forms["board-text-form"]; - postmessageform.addEventListener("submit", function(event) { - event.preventDefault(); - postmessageform["comment"].value - var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value); - var messageBox = document.getElementById("message3"); - if(!message.success) { - messageBox.innerText = "There was an error with sending your message."; - messageBox.style.color = "red"; - } else { - messageBox.innerText = message.message; - messageBox.style.color = "green"; - reloadBoard(document.getElementById("home-message-board")); - } - }) - - document.getElementById("reloadbutton").addEventListener("click", function(event) { - reloadBoard(document.getElementById("home-message-board")); - }) - - // Browse page - var searchform = document.forms["browse-search"]; - searchform.addEventListener("submit", function(event) { - event.preventDefault(); - loadBrowseProfile(); - }) - var searchinput = searchform["search-value"]; - console.log(searchinput); - searchinput.addEventListener("input", function(event) { - document.getElementById("message5").innerText = ""; - console.log("JDIFJAIOSDJPIJ"); - }) - - -} - -loadBrowseProfile = function() { - var searchEmail = document.forms["browse-search"]["search-value"].value; - var message = serverstub.getUserDataByEmail(localStorage.getItem("logintoken"), searchEmail) - if(!message.success) { - document.getElementById("message5").innerText = message.message; - document.getElementById("message5").style.color = "red"; - return; - } - document.getElementById("message5").innerText = ""; - - document.getElementById("browse-window").style.display = "block"; - - var userData = message.data; - // Change the information displayed on the browsepage to the user credentials - document.getElementById('browse-username').innerText = userData.firstname + ' ' + userData.familyname; - document.getElementById('browse-gender').innerText = userData.gender; - document.getElementById('browse-location').innerText = userData.city + ', ' + userData.country; - document.getElementById('browse-email').innerText = userData.email; - var postmessageform = document.forms["browse-board-text-form"]; - postmessageform.addEventListener("submit", function(event) { - event.preventDefault(); - postmessageform["comment"].value - var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value, searchEmail); - var messageBox = document.getElementById("message4"); - if(!message.success) { - messageBox.innerText = "There was an error with sending your message."; - messageBox.style.color = "red"; - } else { - messageBox.innerText = message.message; - messageBox.style.color = "green"; - reloadBoard(document.getElementById("browse-message-board"), searchEmail); - } - }) - - reloadBoard(document.getElementById("browse-message-board"), searchEmail); - document.getElementById("browse-reloadbutton").addEventListener("click", function(event) { - reloadBoard(document.getElementById("browse-message-board"), searchEmail); - }) - -} - -reloadBoard = function(board, email=null) { - - var boardBox = board; - boardBox.innerHTML = ""; - boardBox.innerText = ""; - var messageBoardData; - if(email != null) { - messageBoardData = serverstub.getUserMessagesByEmail(localStorage.getItem("logintoken"), email); - } else { - messageBoardData = serverstub.getUserMessagesByToken(localStorage.getItem("logintoken")); - } - console.log(messageBoardData.data); - console.log(boardBox); - for(var i = 0; i < messageBoardData.data.length; i++) { - var messageHTML = document.createElement('div'); - var title = document.createElement('h2') - title.innerText = messageBoardData.data[i]["writer"]; - messageHTML.appendChild(title); - - var contentHTML = document.createElement('textarea'); - contentHTML.setAttribute("readonly", ""); - contentHTML.setAttribute("rows", "5"); - contentHTML.setAttribute("max-rows", "5"); - contentHTML.setAttribute("cols", "50"); - contentHTML.innerText = messageBoardData.data[i]["content"]; - messageHTML.appendChild(contentHTML); - messageHTML.appendChild(document.createElement('br')); - - boardBox.appendChild(messageHTML); - } -} - -inputValidation = function(formID) { - var form = document.forms[formID]; - var emptyField = false; - form.querySelectorAll("input").forEach(function(elem) { - if(elem.type === "text" && elem.value === "") { - elem.setAttribute("placeholder", "Don't leave blank"); - emptyField = true; - } - }) - return !emptyField && validateEmail(form) && validatePassword(form) -} - -function validateEmail(form) { - var valid = form["email"].value.match(/\w+@\w+\.\w+/) - if (!valid) { - email.value = ""; - email.setAttribute("placeholder", "Invalid email"); - } - return valid; -} - -function validatePassword(form) { - if (form['password'].value == form['password2'].value && form['password'].value.length >= 8) { - return true - } - if (form['password'].value != form['password2'].value) { - form["password"].setAttribute("placeholder", "Passwords must match"); - } - else if (form['password'].value.length < 8) { - form["password"].setAttribute("placeholder", "Password must be 8 characters or longer"); - } - form["password"].value = ""; - form["password2"].value = ""; - return false; -} - -function openTab(event, tabName) { - // Declare all variables - var i, tabcontent, tablinks; - - // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("tabcontent"); - for (i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; - } - - // Get all elements with class="tablinks" and remove the class "active" - tablinks = document.getElementsByClassName("tablinks"); - for (i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" active", ""); - } - - // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "block"; - event.currentTarget.className += " active"; - - if(tabName === "Home") { - reloadBoard(document.getElementById("home-message-board")); - } -} + +displayView = function() { + // the code required to display a view + if (localStorage.getItem("logintoken") != null) { + loadProfileView(); + } else { + loadWelcomeView(); + } +}; +window.onload = function() { + displayView(); +}; + +loadWelcomeView = function() { + document.getElementById("pagecontent").innerHTML = ""; + document.getElementById("pagecontent").innerText = ""; + document.getElementById("pagecontent").innerHTML = document.getElementById("welcomeview").innerText; + var loginform = document.forms["loginform"]; + var signupform = document.forms["signupform"]; + signupform.addEventListener("submit", function(event) { + event.preventDefault(); + if(inputValidation("signupform")) { + var signupObject = {} + signupObject["email"] = signupform["email"].value; + signupObject["password"] = signupform["password"].value; + signupObject["firstname"] = signupform["fname"].value; + signupObject["familyname"] = signupform["lname"].value; + signupObject["gender"] = signupform["gender"].value; + signupObject["city"] = signupform["city"].value; + signupObject["country"] = signupform["country"].value; + + var message = serverstub.signUp(signupObject); + console.log(message); + if (!message.success) { + signupform["email"].value = ""; + signupform["email"].setAttribute("placeholder", message.message); + } else { + message = serverstub.signIn(signupform["email"].value, signupform["password"].value); + if(!message.success) { + signupform["email"].setAttribute("placeholder", message.message); + } else { + localStorage.setItem("logintoken", message.data); + displayView(); + } + } + } + }) + + + loginform.addEventListener("submit", function(event) { + event.preventDefault(); +<<<<<<< HEAD + var message = serverstub.signIn(loginform["email"].value, loginform["password"].value); + console.log(message); + if(!message.success) { + loginform["email"].value = ""; + loginform["password"].value = ""; + loginform["email"].setAttribute("placeholder", message.message); + } else { + localStorage.setItem("logintoken", message.data); + loadProfileView(); + } +======= + if (inputValidation("loginform")) { + var message = serverstub.signIn(loginform["email"].value, loginform["password"].value); + console.log(message); + if(!message.success) { + loginform["email"].value = ""; + loginform["password"].value = ""; + loginform["email"].setAttribute("placeholder", message.message); + } else { + localStorage.setItem("logintoken", message.data); + displayView(); + } + } +>>>>>>> 4c58f2373c357a402d439c148abe89d13737eddd + }) +} + +loadProfileView = function() { + console.log("cookie loaded"); + console.log(localStorage.getItem("logintoken")); + document.getElementById("pagecontent").innerHTML = ""; + document.getElementById("pagecontent").innerText = ""; + document.getElementById("pagecontent").innerHTML = document.getElementById("profileview").innerText; + + document.getElementById("defaultOpen").click(); + reloadBoard(document.getElementById("home-message-board")); + + // Account page + var changepassform = document.forms["changepassform"]; + changepassform.addEventListener("submit", function(event) { + event.preventDefault(); + if (inputValidation("changepassform")) { + var message = serverstub.changePassword(localStorage.getItem("logintoken"), changepassform["oldpassword"].value, changepassform["password"].value); + changepassform["oldpassword"].value = ""; + changepassform["password"].value = ""; + changepassform["password2"].value = ""; + var messageBox = document.getElementById("message2"); + if(!message.success) { + messageBox.style.color = "red"; + } else { + messageBox.style.color = "green"; + } + messageBox.innerText = message.message; + } + }) + + document.getElementById("logoutbutton").addEventListener("click", function(event) { + var message = serverstub.signOut(localStorage.getItem("logintoken")); + if(!message.success) { + document.getElementById("message1").innerText = message.message; + } else { + localStorage.removeItem("logintoken"); + } + displayView(); + }) + + var userData = serverstub.getUserDataByToken(localStorage.getItem('logintoken')).data + + // Change the information displayed on the homepage to the user credentials + document.getElementById('home-username').innerText = userData.firstname + ' ' + userData.familyname; + document.getElementById('home-gender').innerText = userData.gender; + document.getElementById('home-location').innerText = userData.city + ', ' + userData.country; + document.getElementById('home-email').innerText = userData.email; + + var postmessageform = document.forms["board-text-form"]; + postmessageform.addEventListener("submit", function(event) { + event.preventDefault(); + postmessageform["comment"].value + var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value); + var messageBox = document.getElementById("message3"); + if(!message.success) { + messageBox.innerText = "There was an error with sending your message."; + messageBox.style.color = "red"; + } else { + messageBox.innerText = message.message; + messageBox.style.color = "green"; + reloadBoard(document.getElementById("home-message-board")); + } + }) + + document.getElementById("reloadbutton").addEventListener("click", function(event) { + reloadBoard(document.getElementById("home-message-board")); + }) + + // Browse page + var searchform = document.forms["browse-search"]; + searchform.addEventListener("submit", function(event) { + event.preventDefault(); + loadBrowseProfile(); + }) + var searchinput = searchform["search-value"]; + console.log(searchinput); + searchinput.addEventListener("input", function(event) { + document.getElementById("message5").innerText = ""; + console.log("JDIFJAIOSDJPIJ"); + }) + + +} + +loadBrowseProfile = function() { + var searchEmail = document.forms["browse-search"]["search-value"].value; + var message = serverstub.getUserDataByEmail(localStorage.getItem("logintoken"), searchEmail) + if(!message.success) { + document.getElementById("message5").innerText = message.message; + document.getElementById("message5").style.color = "red"; + return; + } + document.getElementById("message5").innerText = ""; + + document.getElementById("browse-window").style.display = "block"; + + var userData = message.data; + // Change the information displayed on the browsepage to the user credentials + document.getElementById('browse-username').innerText = userData.firstname + ' ' + userData.familyname; + document.getElementById('browse-gender').innerText = userData.gender; + document.getElementById('browse-location').innerText = userData.city + ', ' + userData.country; + document.getElementById('browse-email').innerText = userData.email; + var postmessageform = document.forms["browse-board-text-form"]; + postmessageform.addEventListener("submit", function(event) { + event.preventDefault(); + postmessageform["comment"].value + var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value, searchEmail); + var messageBox = document.getElementById("message4"); + if(!message.success) { + messageBox.innerText = "There was an error with sending your message."; + messageBox.style.color = "red"; + } else { + messageBox.innerText = message.message; + messageBox.style.color = "green"; + reloadBoard(document.getElementById("browse-message-board"), searchEmail); + } + }) + + reloadBoard(document.getElementById("browse-message-board"), searchEmail); + document.getElementById("browse-reloadbutton").addEventListener("click", function(event) { + reloadBoard(document.getElementById("browse-message-board"), searchEmail); + }) + +} + +reloadBoard = function(board, email=null) { + + var boardBox = board; + boardBox.innerHTML = ""; + boardBox.innerText = ""; + var messageBoardData; + if(email != null) { + messageBoardData = serverstub.getUserMessagesByEmail(localStorage.getItem("logintoken"), email); + } else { + messageBoardData = serverstub.getUserMessagesByToken(localStorage.getItem("logintoken")); + } + console.log(messageBoardData.data); + console.log(boardBox); + for(var i = 0; i < messageBoardData.data.length; i++) { + var messageHTML = document.createElement('div'); + var title = document.createElement('h2') + title.innerText = messageBoardData.data[i]["writer"]; + messageHTML.appendChild(title); + + var contentHTML = document.createElement('textarea'); + contentHTML.setAttribute("readonly", ""); + contentHTML.setAttribute("rows", "5"); + contentHTML.setAttribute("max-rows", "5"); + contentHTML.setAttribute("cols", "50"); + contentHTML.innerText = messageBoardData.data[i]["content"]; + messageHTML.appendChild(contentHTML); + messageHTML.appendChild(document.createElement('br')); + + boardBox.appendChild(messageHTML); + } +} + +inputValidation = function(formID) { + var form = document.forms[formID]; + var emptyField = false; + form.querySelectorAll("input").forEach(function(elem) { + if(elem.type === "text" && elem.value === "") { + elem.setAttribute("placeholder", "Don't leave blank"); + emptyField = true; + } + }) + return !emptyField && validateEmail(form) && validatePassword(form) +} + +function validateEmail(form) { + var valid = form["email"].value.match(/\w+@\w+\.\w+/) + if (!valid) { + email.value = ""; + email.setAttribute("placeholder", "Invalid email"); + } + return valid; +} + +function validatePassword(form) { + if (form['password'].value == form['password2'].value && form['password'].value.length >= 8) { + return true + } + if (form['password'].value != form['password2'].value) { + form["password"].setAttribute("placeholder", "Passwords must match"); + } + else if (form['password'].value.length < 8) { + form["password"].setAttribute("placeholder", "Password must be 8 characters or longer"); + } + form["password"].value = ""; + form["password2"].value = ""; + return false; +} + +function openTab(event, tabName) { + // Declare all variables + var i, tabcontent, tablinks; + + // Get all elements with class="tabcontent" and hide them + tabcontent = document.getElementsByClassName("tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + + // Get all elements with class="tablinks" and remove the class "active" + tablinks = document.getElementsByClassName("tablinks"); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(" active", ""); + } + + // Show the current tab, and add an "active" class to the button that opened the tab + document.getElementById(tabName).style.display = "block"; + event.currentTarget.className += " active"; + + if(tabName === "Home") { + reloadBoard(document.getElementById("home-message-board")); + } +} diff --git a/lab2/database_helper.py b/lab2/database_helper.py index e69de29..9743536 100644 --- a/lab2/database_helper.py +++ b/lab2/database_helper.py @@ -0,0 +1,27 @@ +import sqlite3 + +con = sqlite3.connect("database.db") + +cur = con.cursor() + +def get_token_from_email(email): + res = cur.execute(f"SELECT token FROM logged_in_users WHERE email='{email}'") + return res.fetchone() + +def get_password(email): + + res = cur.execute(f"SELECT password_hash FROM user_data WHERE email='{email}'") + + return res.fetchone() + + +def update_logged_in_users(email, token): + + cur.execute(f"Insert INTO logged_in_users") + + + +def get_user_data(email): + data = cur.execute(f"SELECT * FROM user_data WHERE email='{email}'") + return data.fetchall() + diff --git a/lab2/schema.sql b/lab2/schema.sql new file mode 100644 index 0000000..4059f49 --- /dev/null +++ b/lab2/schema.sql @@ -0,0 +1,28 @@ + +CREATE TABLE "logged_in_users" ( + "email" TEXT, + "token" TEXT NOT NULL UNIQUE, + PRIMARY KEY("email") +); + +CREATE TABLE "all_users" ( + "email" TEXT, + PRIMARY KEY("email") +); + +CREATE TABLE "user_data" ( + "email" TEXT, + "password_hash" TEXT, + "firstname" TEXT, + "familyname" TEXT, + "gender" TEXT, + "city" TEXT, + "country" TEXT, + PRIMARY KEY("email") +); + +CREATE TABLE "user_messages" ( + "email" TEXT, + "message" TEXT, + PRIMARY KEY("email") +); \ No newline at end of file diff --git a/lab2/server.py b/lab2/server.py index 41f2ad4..1a10f75 100644 --- a/lab2/server.py +++ b/lab2/server.py @@ -1,9 +1,90 @@ +import random +import hashlib + from flask import Flask +import database_helper as dbh + + app = Flask(__name__) + @app.route('/') def index(): return 'Hello world!' + +@app.route('/signin') +def sign_in(email='test@gmail.com', password='123123123'): + """ + Authenticate the username by the provided password. + """ + hashed_password = hashlib.sha256((password + email).encode()).hexdigest() + + database_password = dbh.get_password(email) + + if hashed_password == database_password: + letters = "abcdefghiklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890" + token = ''.join(letters[random.randint(0,len(letters)-1)] for _ in range(36)) +# syncStorage(); +# if(users[email] != null && users[email].password == password){ +# loggedInUsers[token] = email; +# persistLoggedInUsers(); + return { "success": "true", "message": "Successfully signed in.", "data": token } + + return { "success": "false", "message": "Wrong username or password." } + +@app.route('/signup') +def sign_up(jsonObj): + """ + Register a user in the database. + """ + pass + + +def sign_out(token): + """ + Sign out a user from the system. + """ + return + + +def change_password(token, oldPassword, newPassword): + """ + Change the password of the current user to a new one. + """ + pass + + +def get_user_data_by_token(token): + #return email, firstname, familyname, gender, city, country + pass + + +def get_user_data_by_email(token, email): + #return email, firstname, familyname, gender, city, country + message = {"status": "", "message": "", "data": ""} + if dbh.get_token_from_email(email) == token: + data = dbh.get_user_data(email) + if data: + message["data"] = data + else: + "you are not logged in" + pass + + +def get_user_messages_by_token(token): + #return messages + pass + + +def get_user_messages_by_email(token, email): + #return messages + pass + + +def post_message(token, message, email): + pass + + app.run(host='0.0.0.0', port=5000) \ No newline at end of file diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..0b34a9f --- /dev/null +++ b/requirements.txt @@ -0,0 +1,8 @@ +click==8.1.3 +Flask==2.2.2 +importlib-metadata==6.0.0 +itsdangerous==2.1.2 +Jinja2==3.1.2 +MarkupSafe==2.1.2 +Werkzeug==2.2.2 +zipp==3.12.1 \ No newline at end of file -- GitLab