integrated EVERYTHING!

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 .vscode
-node_modules
+node_modules
+app.js

components/login.html

@@ -1,15 +1,13 @@
 <div class="container maincontent">
-<form>
+<form id="loginForm">
     <!-- Email input -->
     <div class="form-outline mb-4">
-      <input type="email" id="emailLogin" class="form-control" />
+      <input type="email" class="form-control" name="email" id="emailLogin" placeholder="E-Mail" required>
-      <label class="form-label" for="email">Email address</label>
     </div>
   
     <!-- Password input -->
     <div class="form-outline mb-4">
-      <input type="password" id="passwordLogin" class="form-control" />
+      <input type="password" class="form-control" name="password" id="passwordLogin" placeholder="Passwort" required>
-      <label class="form-label" for="password">Password</label>
     </div>
   
     <!-- 2 column grid layout for inline styling -->
@@ -24,6 +22,7 @@
     </div>
   
     <!-- Submit button -->
-    <button type="button" class="btn btn-success btn-block mb-4 float-end">Sign in</button>
+    <button type="submit" class="btn btn-success btn-block mb-4 float-end">Sign in</button>
   </form>
-</div>
+</div>
+<script src="../js/login.js"></script>

components/main_nav.html

@@ -29,6 +29,12 @@
                 <li class="nav-item">
                     <a class="nav-link" type="button" id="registerLink">Register</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" type="button" id="profileLink">Profile</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" type="button" id="logoutLink">Logout</a>
+                </li>
             </ul>
         </div>
         <div class="navbar align-self-center d-flex">

components/profile.html

@@ -0,0 +1,48 @@
+<div class="container registerform maincontent">
+    <h1> Hello <p id="usernameHeader"></p></h1>
+    <form id="userProfile">
+        <div class="row">
+            <div class="col-3">
+                <input type="text" class="form-control" name="salutation" id="salutation" readonly>
+            </div>
+            <div class="col-4">
+                <input type="text" class="form-control" name="firstname" id="firstname" readonly>
+            </div>
+            <div class="col-5">
+                <input type="text" class="form-control" name="lastname" id="lastname" readonly>
+            </div>
+        </div>
+        <div class="row" id="address">
+            <div class="col-12">
+                <input type="text" class="form-control" name="street" id="street" placeholder="Straße" required>
+            </div>
+        <div>
+        <div class="row">
+            <div class="col-4">
+                <input type="text" class="form-control" name="postalcode" id="postalcode" placeholder="PLZ" required>
+            </div>
+            <div class="col-8">
+                <input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" readonly>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
+            </div>
+        </div>
+        <div class="modal-footer d-block">
+            <button type="submit" class="btn btn-success float-end" id="changeData" >Daten ändern</button>
+        </div>
+    </form>
+</div>
+<script src="../js/datachange.js"></script>

config/dbaccess.php

@@ -1,8 +1,8 @@
 <?php
 
 $host = "localhost";
-$user = "u127175db3";
+$user = "root";
-$pass = "0.r8pxa1trps";
+$pass = "root";
 $dbname = "u127175db3";
 
 ?>

config/sessionStart.php

@@ -0,0 +1,3 @@
+<?php
+session_start();
+?>

db/datahandler.php

@@ -1,5 +1,4 @@
 <?php
-include($_SERVER['DOCUMENT_ROOT'] . '/models/user.class.php');
 include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
 
 class DataHandler
@@ -7,7 +6,7 @@ class DataHandler
     public function registerUser($data)
     {
         $username = testinput($data->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()) {
+        if ($stmtUser->execute() && $stmtCities->execute()) {
-            return $data;
+            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;
         
     }
 }

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');

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 "";
+}

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 "";
+}

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;
+    }
+}

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";
+    }
+}

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);
                 }

logic/getUserData.php

@@ -0,0 +1,47 @@
+<?php
+include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
+
+$data = json_decode(file_get_contents('php://input'));
+getData($data->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;
+}

logic/loginLogic.php

@@ -0,0 +1,45 @@
+<?php 
+include($_SERVER['DOCUMENT_ROOT'] . '/config/sessionStart.php');
+include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
+
+$data = json_decode(file_get_contents('php://input'));
+$username = testinput($data->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;
+}
+
+
+
+
+?>

logic/serviceLogic.php

@@ -1,18 +1,24 @@
 <?php
 include( $_SERVER['DOCUMENT_ROOT'] . '/logic/userLogic.php' );
 
-$param = "";
+$data = "";
 $method = "";
 
-isset($_GET["method"]) ? $method = $_GET["method"] : false;
-isset($_GET["param"]) ? $param = $_GET["param"] : false;
-
 $logic = new UserLogic();
-$result = $logic->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)

logic/updateUserData.php

@@ -0,0 +1,37 @@
+<?php
+$data = json_decode(file_get_contents('php://input'));
+$email = $data->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;
+
+
+}

res/css/style.css

@@ -82,4 +82,8 @@
   font-size: .9em;
   padding: 10px;
   margin-bottom: 10px;
+}
+
+.registerform .form-control:read-only {
+  background-color: #f07f7f;
 }