From f1185ade0cbd28ace2b22a038f32cee70e8e830b Mon Sep 17 00:00:00 2001 From: StockiP Date: Thu, 12 May 2022 18:48:58 +0200 Subject: [PATCH] integrated EVERYTHING! --- .gitignore | 3 +- components/login.html | 13 +++--- components/main_nav.html | 6 +++ components/profile.html | 48 ++++++++++++++++++++ config/dbaccess.php | 4 +- config/sessionStart.php | 3 ++ db/datahandler.php | 18 ++++---- js/app.ts | 24 ++++++++++ js/cookieHandling.js | 15 +++++++ js/datachange.js | 97 ++++++++++++++++++++++++++++++++++++++++ js/login.js | 53 ++++++++++++++++++++++ js/logout.js | 11 +++++ js/registration.js | 3 +- logic/getUserData.php | 47 +++++++++++++++++++ logic/loginLogic.php | 45 +++++++++++++++++++ logic/serviceLogic.php | 20 ++++++--- logic/updateUserData.php | 37 +++++++++++++++ res/css/style.css | 4 ++ 18 files changed, 424 insertions(+), 27 deletions(-) create mode 100644 components/profile.html create mode 100644 config/sessionStart.php create mode 100644 js/cookieHandling.js create mode 100644 js/datachange.js create mode 100644 js/login.js create mode 100644 js/logout.js create mode 100644 logic/getUserData.php create mode 100644 logic/loginLogic.php create mode 100644 logic/updateUserData.php diff --git a/.gitignore b/.gitignore index e194fa6..c34a310 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store .vscode -node_modules \ No newline at end of file +node_modules +app.js \ No newline at end of file diff --git a/components/login.html b/components/login.html index be7ac02..d9396f2 100644 --- a/components/login.html +++ b/components/login.html @@ -1,15 +1,13 @@
-
+
- - +
- - +
@@ -24,6 +22,7 @@
- + - \ No newline at end of file + + \ No newline at end of file diff --git a/components/main_nav.html b/components/main_nav.html index da41df0..ea0c909 100644 --- a/components/main_nav.html +++ b/components/main_nav.html @@ -29,6 +29,12 @@
  • Register
    • +
  • + Profile +
    • +
  • + Logout +
    • diff --git a/components/profile.html b/components/profile.html new file mode 100644 index 0000000..cfb7d87 --- /dev/null +++ b/components/profile.html @@ -0,0 +1,48 @@ +
    +

    Hello

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    + +
    + \ No newline at end of file diff --git a/config/dbaccess.php b/config/dbaccess.php index f5df6fa..810f913 100644 --- a/config/dbaccess.php +++ b/config/dbaccess.php @@ -1,8 +1,8 @@ \ No newline at end of file diff --git a/config/sessionStart.php b/config/sessionStart.php new file mode 100644 index 0000000..9843117 --- /dev/null +++ b/config/sessionStart.php @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/db/datahandler.php b/db/datahandler.php index cf7430e..f97208e 100644 --- a/db/datahandler.php +++ b/db/datahandler.php @@ -1,5 +1,4 @@ email); - $password = testinput($data->password); + $password = password_hash(testinput($data->password), PASSWORD_DEFAULT); $email = testinput($data->email); $phone = testinput($data->phone); $salutation = testinput($data->salutation); @@ -15,10 +14,9 @@ class DataHandler $lastname = testinput($data->lastname); $street = testinput($data->street); $postalcode = testinput($data->postalcode); + $city = testinput($data->city); $role = "customer"; - $password = password_hash($password, PASSWORD_DEFAULT); - require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php'); $sql2 = "INSERT IGNORE INTO `cities` (`city_id`, `postalcode`, `name`) VALUES (?,?,?)"; @@ -29,17 +27,21 @@ class DataHandler $stmtCities = $db->prepare($sql2); $stmtUser->bind_param("ssssssssss", null, $username, $password, $email, $phone, $salutation, $firstname, $lastname, $street, $postalcode, $role, null); - $stmtCities->bind_param("sss", null, $postalcode, $coty); + $stmtCities->bind_param("sss", null, $postalcode, $city); - if ($stmtUser->execute() && $stmtCities->execute() && $stmtAddress->execute()) { - return $data; + if ($stmtUser->execute() && $stmtCities->execute()) { + echo "Your registration was successfully.\n"; + $returnArray['Response'] = "Your registration was successfully."; } else { - return false; + echo "Your registration was not successfully. Please try again later.\n"; + $returnArray['Response'] = "Your registration was not successfully. Please try again later."; } $stmtUser->close(); $stmtCities->close(); $stmtAddress->close(); $db->close(); + + return $returnArray; } } diff --git a/js/app.ts b/js/app.ts index a1b9765..46ed437 100644 --- a/js/app.ts +++ b/js/app.ts @@ -2,6 +2,17 @@ $(document).ready(function() { $('#mmlMainContent').load('../components/homepage.html'); $('#top_nav_bar').load('../components/top_nav.html'); $('#main_nav_bar').load('../components/main_nav.html', function() { + if (document.cookie.indexOf('loggedIn=true') != -1) { + $('#main_nav_bar').find('#loginLink').hide(); + $('#main_nav_bar').find('#registerLink').hide(); + $('#main_nav_bar').find('#logoutLink').show(); + $('#main_nav_bar').find('#profileLink').show(); + } else { + $('#main_nav_bar').find('#loginLink').show(); + $('#main_nav_bar').find('#registerLink').show(); + $('#main_nav_bar').find('#logoutLink').hide(); + $('#main_nav_bar').find('#profileLink').hide(); + } document.getElementById('registerLink')?.addEventListener('click', function() { $('#mmlMainContent').load('../components/register.html'); },); @@ -11,6 +22,19 @@ $(document).ready(function() { document.getElementById('loginLink')?.addEventListener('click', function() { $('#mmlMainContent').load('../components/login.html'); },); + document.getElementById('logoutLink')?.addEventListener('click', function() { + document.cookie = 'loggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; + document.cookie = 'email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; + document.cookie = 'rememberme=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; + $('#mmlMainContent').load('../components/homepage.html'); + $('#main_nav_bar').find('#loginLink').show(); + $('#main_nav_bar').find('#registerLink').show(); + $('#main_nav_bar').find('#logoutLink').hide(); + $('#main_nav_bar').find('#profileLink').hide(); + }); + document.getElementById('profileLink')?.addEventListener('click', function() { + $('#mmlMainContent').load('../components/profile.html'); + }); }); $('#marmeladenladen_footer').load('../components/footer.html'); $('#marmeladenladen_search').load('../components/modal.html'); diff --git a/js/cookieHandling.js b/js/cookieHandling.js new file mode 100644 index 0000000..a39a7c6 --- /dev/null +++ b/js/cookieHandling.js @@ -0,0 +1,15 @@ +function getCookie(cname) { + let name = cname + "="; + let decodeCookie = decodeURIComponent(document.cookie); + let ca = decodeCookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; +} \ No newline at end of file diff --git a/js/datachange.js b/js/datachange.js new file mode 100644 index 0000000..deea47d --- /dev/null +++ b/js/datachange.js @@ -0,0 +1,97 @@ +//document get ready function + const username = getCookie('email'); + const loggedIn = getCookie('loggedIn'); + +$(document).ready(function () { + const usernameHeader = document.getElementById("usernameHeader"); + const salutation = document.getElementById("salutation"); + const firstname = document.getElementById("firstname"); + const lastname = document.getElementById("lastname"); + const street = document.getElementById("street"); + const postalcode = document.getElementById("postalcode"); + const city = document.getElementById("city"); + const email = document.getElementById("email"); + const phone = document.getElementById("phone"); + let hashedPassword = ''; + //make json from username + const sendData = { + "username": username + }; + stringData = JSON.stringify(sendData); + if (loggedIn == 'true') { + $.ajax({ + url: '../logic/getUserData.php', + type: 'POST', + cache: false, + datatype: 'json', + data: stringData, + success: function (response) { + const data = JSON.parse(response); + //set data to fields + usernameHeader.innerHTML = data.username; + salutation.value = data.salutation; + firstname.value = data.firstname; + lastname.value = data.lastname; + street.value = data.address; + postalcode.value = data.plz; + city.value = data.city; + email.value = data.email; + phone.value = data.phone; + hashedPassword = data.password; + } + }); + } else { + window.location.href = '../index.html'; + } + const userForm = document.getElementById("userProfile"); + userForm.addEventListener('submit', function (e) { + e.preventDefault(); + updateUser(hashedPassword); + }); +}); + +function updateUser(pwd){ + + const sendData = { + "username": username, + "street": street.value, + "postalcode": postalcode.value, + "city": city.value, + "phone": phone.value, + "password": password.value, + "hashedPassword": pwd + }; + stringData = JSON.stringify(sendData); + console.log(stringData); + $.ajax({ + url: '../logic/updateUserData.php', + type: 'POST', + cache: false, + datatype: 'text', + data: stringData, + success: function (response) { + console.log(response); + if (response == 'success') { + alert('Data updated'); + } else { + alert('Data not updated - please try again later or enter correct password.'); + } + } + }); +} + +function getCookie(cname) { + let name = cname + "="; + let decodeCookie = decodeURIComponent(document.cookie); + let ca = decodeCookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; +} \ No newline at end of file diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..c6c3194 --- /dev/null +++ b/js/login.js @@ -0,0 +1,53 @@ +const emailLogin = document.getElementById('emailLogin'); +const passwordLogin = document.getElementById('passwordLogin'); +const rememberme = document.getElementById('rememberMe'); + +const formLogin = document.getElementById('loginForm'); +formLogin.addEventListener('submit', login); + +async function login(event) { + event.preventDefault(); + if (checkLogin()) { + //get form data + const formData = new FormData(formLogin); + //create object with form data + const data = {}; + formData.forEach((value, key) => data[key] = value); + //log data on console + datastring = JSON.stringify(data); + //send data to php with Ajax + $.ajax({ + url: '../logic/loginLogic.php', + type: 'POST', + data: datastring, + cache: false, + datatype: 'text', + success: function (response) { + if (response == 'success') { + if (rememberme.checked) { + document.cookie = "rememberme=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + document.cookie = "email=" + emailLogin.value + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + document.cookie = "loggedIn=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + } else { + document.cookie = "rememberme=false"; + document.cookie = "email=" + emailLogin.value; + document.cookie = "loggedIn=true"; + } + window.location.href = '../index.html'; + alert(response); + } else { + alert(response); + } + } + }); + } +} + +function checkLogin() { + if (emailLogin.value == '' || passwordLogin.value == '') { + alert('Please fill in all fields'); + return false; + } else { + return true; + } +} \ No newline at end of file diff --git a/js/logout.js b/js/logout.js new file mode 100644 index 0000000..709aba1 --- /dev/null +++ b/js/logout.js @@ -0,0 +1,11 @@ +//delete all cookies +function deleteAllCookies() { + var cookies = document.cookie.split(";"); + + for (var i = 0; i < cookies.length; i++) { + var cookie = cookies[i]; + var eqPos = cookie.indexOf("="); + var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie; + document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"; + } +} \ No newline at end of file diff --git a/js/registration.js b/js/registration.js index 7397df5..8a2bef6 100644 --- a/js/registration.js +++ b/js/registration.js @@ -27,9 +27,8 @@ async function register(event) { cache: false, datatype: 'text', success: function (response) { - console.log(response); if (response == 'success') { - window.location.href = '../index.html'; + $('#mmlMainContent').load('../components/login.html'); } else { alert(response); } diff --git a/logic/getUserData.php b/logic/getUserData.php new file mode 100644 index 0000000..1db3ce7 --- /dev/null +++ b/logic/getUserData.php @@ -0,0 +1,47 @@ +username); + +function getData($email) +{ + require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php'); + + $sql = "SELECT `user_id`, `username`, `password`, `email`, `phone`, `salutation`, `firstname`, `lastname`, `address`, `role`, `created_at`, `plz`, `name` FROM `user` JOIN `cities` ON `plz` = `postalcode` WHERE `username` = ?"; + $stmt = $db->prepare($sql); + $stmt->bind_param("s", $email); + + $stmt->execute(); + $stmt->store_result(); + $stmt->bind_result($user_id, $username, $password, $email, $phone, $salutation, $firstname, $lastname, $address, $role, $created_at, $plz, $name); + if ($stmt->num_rows == 1) { + if ($stmt -> fetch()) { + $data = array( + 'user_id' => $user_id, + 'username' => $username, + 'password' => $password, + 'email' => $email, + 'phone' => $phone, + 'salutation' => $salutation, + 'firstname' => $firstname, + 'lastname' => $lastname, + 'address' => $address, + 'plz' => $plz, + 'city' => $name, + 'role' => $role, + 'created_at' => $created_at + ); + $data = json_encode($data); + $response = $data; + } else { + $response = "failure"; + } + } else { + $response = "failure"; + } + $stmt->close(); + $db->close(); + + echo $response; +} \ No newline at end of file diff --git a/logic/loginLogic.php b/logic/loginLogic.php new file mode 100644 index 0000000..1f65d97 --- /dev/null +++ b/logic/loginLogic.php @@ -0,0 +1,45 @@ +email); +$passwordUnhashed = testinput($data->password); + +loginUser($username, $passwordUnhashed); + +function loginUser($username, $passwordUnhashed) +{ + require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php'); + + $sql = "SELECT `username`, `password`, `role` FROM `user` WHERE `username` = ?"; + $stmt = $db->prepare($sql); + $stmt->bind_param("s", $username); + + + $stmt->execute(); + $stmt->store_result(); + $stmt->bind_result($username, $password, $role); + if ($stmt->num_rows == 1) { + $stmt->fetch(); + if (password_verify($passwordUnhashed, $password)) { + $response = "success"; + $_SESSION['username'] = $username; + $_SESSION['role'] = $role; + $_SESSION['loggedIn'] = true; + } else { + $response = "failure"; + } + } else { + $response = "failure"; + } + $stmt->close(); + $db->close(); + + echo $response; +} + + + + +?> \ No newline at end of file diff --git a/logic/serviceLogic.php b/logic/serviceLogic.php index 0e43d3c..b2efa35 100644 --- a/logic/serviceLogic.php +++ b/logic/serviceLogic.php @@ -1,18 +1,24 @@ handleUserRequests($method, $param); +$method = +$result = true; + +if ($_SERVER['REQUEST_METHOD'] === 'POST') { + $json = file_get_contents('php://input'); + $data = json_decode($json, true); + $result = $logic->handleUserRequests($method, $data); +} + + if ($result == null) { - response("GET", 400, null); + response('POST', 400, $result); } else { - response("GET", 200, $result); + response('POST', 200, $result); } function response($method, $status, $data) diff --git a/logic/updateUserData.php b/logic/updateUserData.php new file mode 100644 index 0000000..b1e8b79 --- /dev/null +++ b/logic/updateUserData.php @@ -0,0 +1,37 @@ +username; +$phone = $data->phone; +$address = $data->street; +$name = $data->city; +$plz = $data->postalcode; +$password = $data->password; +$hashedPassword = $data->hashedPassword; +updateData($email, $phone, $address, $name, $plz, $password, $hashedPassword); + +function updateData($email, $phone, $address, $name, $plz, $password, $hashedPassword){ + require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php'); + if (password_verify($password, $hashedPassword)) { + $sqlOrt = "INSERT IGNORE INTO `cities` (`postalcode`, `name`) VALUES (?, ?)"; + $sqlUser = "UPDATE `user` SET `phone` = ?, `address` = ?, `plz` = ? WHERE `username` = ?"; + $stmtOrt = $db->prepare($sqlOrt); + $stmtUser = $db->prepare($sqlUser); + $stmtOrt->bind_param("ss", $plz, $name); + $stmtUser->bind_param("ssss", $phone, $address, $plz, $email); + + if ($stmtOrt->execute() && $stmtUser->execute()) { + $response = "success"; + } else { + $response = "failure"; + } + $stmtOrt->close(); + $stmtUser->close(); + $db->close(); + } else { + $response = "failure"; + } + + echo $response; + + +} \ No newline at end of file diff --git a/res/css/style.css b/res/css/style.css index 3ce3106..6731079 100644 --- a/res/css/style.css +++ b/res/css/style.css @@ -82,4 +82,8 @@ font-size: .9em; padding: 10px; margin-bottom: 10px; +} + +.registerform .form-control:read-only { + background-color: #f07f7f; } \ No newline at end of file