2017-01-18 16:08:50 +01:00
27 changed files with 1107 additions and 389 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -117,7 +117,7 @@ Temporary Items
 # *.pdf

 ## Generated if empty string is given at "Please type another file name for output:"
-projectplan.pdf
+projectplan/projectplan.pdf

 ## Bibliography auxiliary files (bibtex/biblatex/biber):
 *.bbl
--- a/.idea/sqldialects.xml
+++ b/.idea/sqldialects.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDialectMappings">
+    <file url="file://$PROJECT_DIR$" dialect="MySQL" />
+  </component>
+</project>
--- a/projectplan/projectplan.pdf
+++ b/projectplan/projectplan.pdf
--- a/projectplan/projectplan.tex
+++ b/projectplan/projectplan.tex
@@ -14,6 +14,9 @@
 \documentclass{uva-inf-article}
 \usepackage[dutch]{babel}
 \usepackage{enumitem}
+\usepackage{pgfgantt}
+\usepackage{pdflscape}
+\usepackage{geometry}

 %-------------------------------------------------------------------------------
 %	GEGEVENS VOOR IN DE TITEL
@@ -173,6 +176,83 @@ Voor deze opdracht hebben we met 5 mensen 4 weken de tijd.

 %Zet de planning indien gewenst in een apart document
 %\input{planning}
+\newgeometry{top=20mm, bottom=20mm, left=10mm, right=10mm}
+\begin{landscape}
+\section{Planning}
+\begin{ganttchart}[
+		vgrid,
+		hgrid,
+		x unit=1cm,
+		y unit title=.6cm,
+		y unit chart=.7cm,
+		group left peak width=.2,
+		group right peak width=.2
+	]{1}{21}
+	\gantttitle{MyHyvesBook+}{21} \ganttnewline
+	\gantttitle{Week 1}{5}
+	\gantttitle{Week 2}{5}
+	\gantttitle{Week 3}{5}
+	\gantttitle{Week 4}{5} \ganttnewline
+	\gantttitlelist{9,...,13}{1}
+	\gantttitlelist{16,...,20}{1}
+	\gantttitlelist{23,...,27}{1}
+	\gantttitlelist{30,31,1,2,3}{1} \ganttnewline
+	
+	\ganttbar{Inleiden}{1}{1} \ganttnewline
+	
+	\ganttlinkedgroup{Frontend}{2}{5} \ganttnewline
+	
+	\ganttbar{html/views}{2}{5} \ganttnewline
+	\ganttbar{css/styles}{2}{5} \ganttnewline
+	\ganttbar{javascript}{2}{5} \ganttnewline
+	\ganttmilestone{Week 1}{5} \ganttnewline
+	
+	\ganttlink[link mid=.833]{elem2}{elem5}
+	\ganttlink[link mid=.75]{elem3}{elem5}
+	\ganttlink[link mid=.5]{elem4}{elem5}
+	
+	\ganttlinkedgroup{Backend}{6}{10} \ganttnewline
+	
+	\ganttbar{Database/PhpMyAdmin}{6}{6} \ganttnewline
+	\ganttbar{SQL-queries/MySql}{7}{10} \ganttnewline
+	\ganttbar{Forms/php}{6}{10} \ganttnewline
+	\ganttbar{Livechat/AJAX, PHP}{6}{10} \ganttnewline
+	\ganttmilestone{Week 2}{10} \ganttnewline
+	
+	\ganttlink[link mid=.5]{elem7}{elem8}
+	\ganttlink[link mid=.833]{elem8}{elem11}
+	\ganttlink[link mid=.75]{elem9}{elem11}
+	\ganttlink[link mid=.5]{elem10}{elem11}
+	
+	\ganttbar{Beveiliging/testen}{6}{15} \ganttnewline
+	
+	\ganttgroup{Gebruiksvriendleijk}{11}{15} \ganttnewline
+	\ganttbar{Mobileformaat}{11}{15} \ganttnewline
+	\ganttbar{Restyle}{11}{15} \ganttnewline
+	\ganttbar{Extra's}{11}{15} \ganttnewline
+	\ganttbar{Code opschonen}{14}{15} \ganttnewline
+	
+	\ganttmilestone{Week 3}{15} \ganttnewline
+	\ganttlink[link mid=.75]{elem11}{elem13}
+	\ganttlink[link mid=.917]{elem12}{elem18}
+	\ganttlink[link mid=.875]{elem14}{elem18}
+	\ganttlink[link mid=.833]{elem15}{elem18}
+	\ganttlink[link mid=.75]{elem16}{elem18}
+	\ganttlink[link mid=.5]{elem17}{elem18}
+	
+	\ganttlinkedgroup{Afronding}{16}{20} \ganttnewline
+	\ganttbar{Rapport}{16}{20} \ganttnewline
+	\ganttbar{Documentatie}{16}{20} \ganttnewline
+	\ganttbar{Demo}{18}{20} \ganttnewline
+	
+	\ganttmilestone{Finshed!}{20}
+	\ganttlink[link mid=.833]{elem20}{elem23}
+	\ganttlink[link mid=.75]{elem21}{elem23}
+	\ganttlink[link mid=.5]{elem22}{elem23}
+
+\end{ganttchart}
+\end{landscape}
+

 %-------------------------------------------------------------------------------
 %	BIJLAGEN EN EINDE
--- a/website/public/chat.php
+++ b/website/public/chat.php
@@ -5,6 +5,7 @@
    <style>
        @import url("styles/chat.css");
    </style>
+    <script src="js/chat.js"></script>
 </head>
 <body>
 <?php
--- a/website/public/external/nietslecht_button.png
+++ b/website/public/external/nietslecht_button.png
--- a/website/public/js/chat.js
+++ b/website/public/js/chat.js
@@ -0,0 +1,57 @@
+$(document).ready(function() {
+    loadMessages();
+});
+
+function loadMessages() {
+    $.post(
+        "loadMessages.php",
+        $("#lastIDForm").serialize()
+    ).done(function(data) {
+        if (data && data != "[]") {
+            console.log(data);
+            messages = JSON.parse(data);
+            addMessages(messages);
+            $("#lastID").val(messages[messages.length - 1].messageID);
+            $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
+        }
+    });
+
+    setTimeout(loadMessages, 1000);
+}
+
+
+function sendMessage() {
+    console.log($("#sendMessageForm").serialize());
+    $.post(
+        "sendMessage.php",
+        $("#sendMessageForm").serialize()
+    ).done(function( data ) {
+        console.log(data);
+    });
+
+    $("#newContent").val("");
+}
+
+function addMessages(messages) {
+    for(i in messages) {
+        if (messages[i].destination == $(".destinationID").val()) {
+            type = "chat-message-self";
+        } else {
+            type = "chat-message-other";
+        }
+
+        $("#chat-history").append('\
+            <div class="chat-message"> \
+                <div class="' + type + '">\
+                ' + messages[i].content + '\
+                </div> \
+            </div>\
+        ');
+    }
+}
+
+function switchUser(userID) {
+    $(".destinationID").val(userID);
+    $("#chat-history").html("");
+    $("#lastID").val("");
+}
--- a/website/public/login.php
+++ b/website/public/login.php
@@ -1,13 +1,44 @@
 <!DOCTYPE html>
 <html>
 <?php
-include("../views/login_head.php");
+    include("../views/login_head.php");
+    include_once("../queries/connect.php");
+    include_once("../queries/login.php");
 ?>
 <body>
 <?php
-/*
- * This view adds login view
- */
+    session_start();
+
+    // Define variables and set to empty values
+    $uname = $psw ="";
+    $loginErr ="";
+
+    // Trying to login
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        $uname=strtolower($_POST["uname"]);
+        // Empty username or password field
+        if (empty($_POST["uname"]) || empty($_POST["psw"])) {
+            $loginErr = "Gebruikersnaam of wachtwoord is niet ingevuld";
+
+        }
+        else {
+            $psw=$_POST["psw"];
+            $hash=hashPassword()["password"];
+            $userid=hashPassword()["userID"];
+
+            // If there's an account, go to the profile page
+            if(password_verify($psw.$uname, $hash)) {
+               $_SESSION["userID"] = $userid;
+               header("location: profile.php");
+
+            } else {
+               $loginErr = "Inloggegevens zijn niet correct";
+            }
+
+        }
+    }
+
+/* This view adds login view */
 include("../views/login-view.php");
 ?>
 </body>
--- a/website/public/register.php
+++ b/website/public/register.php
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+<?php
+    include("../views/login_head.php");
+    include_once("../queries/connect.php");
+    include_once("../queries/register.php");
+
+?>
+<body>
+<?php
+    session_start();
+
+    // define variables and set to empty values
+    $name = $surname = $bday = $username = $password = $confirmpassword = $location = $housenumber = $email = "";
+    $genericErr = $nameErr = $surnameErr = $bdayErr = $usernameErr = $passwordErr = $confirmpasswordErr = $locationErr = $housenumberErr = $emailErr = "";
+    $correct = true;
+
+    // Saves information of filling in the form
+    if (isset($_POST["name"])) {
+        $name = $_POST["name"];
+    }
+
+    if (isset($_POST["surname"])) {
+        $surname = $_POST["surname"];
+    }
+
+    if (isset($_POST["bday"])) {
+        $bday = $_POST["bday"];
+    }
+
+    if (isset($_POST["username"])) {
+        $username = $_POST["username"];
+    }
+
+    if (isset($_POST["password"])) {
+        $password = $_POST["password"];
+    }
+
+    if (isset($_POST["location"])) {
+        $location = $_POST["location"];
+    }
+
+    if (isset($_POST["housenumber"])) {
+        $housenumber = $_POST["housenumber"];
+    }
+
+    if (isset($_POST["email"])) {
+        $email = $_POST["email"];
+    }
+
+    // Trying to register an account
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        if (empty($_POST["name"])) {
+            $nameErr = "Naam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
+                $nameErr = "Alleen letters en spaties zijn toegestaan!";
+                $correct = false;
+
+            }
+        }
+
+        if (empty($_POST["surname"])) {
+            $surnameErr = "Achternaam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
+                $surnameErr = "Alleen letters en spaties zijn toegestaan!";
+                $correct = false;
+
+            }
+        }
+        if (empty($_POST["bday"])) {
+            $bdayErr = "Geboortedatum is verplicht!";
+            $correct = false;
+
+        }
+
+        if (empty($_POST["username"])) {
+            $usernameErr = "Gebruikersnaam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (strlen($username) < 6) {
+                $usernameErr = "Gebruikersnaam moet minstens 6 karakters bevatten";
+                $correct = false;
+
+            } else if (getExistingUsername() == 1){
+                $usernameErr = "Gebruikersnaam bestaat al";
+                $correct = false; 
+
+            }
+        }
+
+        if (empty($_POST["password"])) {
+            $passwordErr = "Wachtwoord is verplicht!";
+            $correct = false;
+
+        } else {
+            if (strlen($password) < 8) {
+                $passwordErr = "Wachtwoord moet minstens 8 karakters bevatten";
+                $correct = false;
+
+            }
+        }
+
+        if (empty($_POST["confirmpassword"])) {
+            $confirmpasswordErr = "Herhaal wachtwoord!";
+            $correct = false;
+
+        }
+
+        if ($_POST["password"] != $_POST["confirmpassword"]) {
+            $confirmpasswordErr = "Wachtwoorden matchen niet";
+            $correct = false;
+
+        }
+
+        if (empty($_POST["location"])) {
+            $locationErr = "Straatnaam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!preg_match("/^[a-zA-Z ]*$/",$location)) {
+                $locationErr = "Alleen letters en spaties zijn toegestaan!";
+                $correct = false;
+
+            }
+        }
+
+        if (empty($_POST["email"])) {
+            $emailErr = "Email is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+                $emailErr = "Geldige email invullen!";
+                $correct = false;
+
+            } else if (getExistingEmail() == 1){
+                $emailErr = "Email bestaat al";
+                $correct = false;
+
+            }
+        }
+
+        // Checks if everything is filled in correctly
+        if ($correct == false){
+            $genericErr = "Bepaalde velden zijn verkeerd of niet ingevuld!";
+
+        } else {
+            registerAccount();
+            header("location: login.php");
+
+        }
+    }
+
+/* This view adds register view */
+include("../views/register-view.php");
+?>
+</body>
+</html>
--- a/website/public/sendMessage.php
+++ b/website/public/sendMessage.php
@@ -0,0 +1,16 @@
+<?php
+
+include_once("../queries/private_message.php");
+
+if (isset($_POST["destination"]) &&
+    isset($_POST["content"])) {
+
+    if (sendMessage($_POST["destination"], $_POST["content"])) {
+        echo $_POST["content"] . " is naar " . $_POST["destination"] . " gestuurd";
+    } else {
+        echo "YOU FAILED!!!";
+    }
+
+} else {
+    echo "maybe dont try to hax the system?";
+}
--- a/website/public/settings.php
+++ b/website/public/settings.php
@@ -1,24 +1,47 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("../views/head.php"); ?>
+    <?php
+    include("../views/head.php");
+    include_once("../queries/connect.php");
+    include_once("../queries/settings.php");
+    ?>
    <style>
        @import url("styles/settings.css");
    </style>
 </head>
 <body>
 <?php
-/*
- * This view adds the main layout over the screen.
- * Header and menu.
- */
+
 include("../views/main.php");

-/* Add your view files here. */
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    switch ($_POST["form"]) {
+        case "profile":
+            $result = updateSettings();
+            break;
+        case "password":
+            $result = updatePassword();
+            break;
+        case "email":
+            $result = array (
+                "type" => "settings-message-angry",
+                "message" => "Deze functie werkt nog niet :("
+            );
+            break;
+        case "picture":
+            $result = array (
+                "type" => "settings-message-angry",
+                "message" => "Deze functie werkt nog niet :("
+            );
+            break;
+    }
+}
+
 include("../views/settings-view.php");

-/* This adds the footer. */
 include("../views/footer.php");
+
 ?>
 </body>
 </html>
--- a/website/public/styles/index.css
+++ b/website/public/styles/index.css
@@ -13,6 +13,19 @@ a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
 }

+a.button {
+    background-color: #845663;
+    border: 2px solid black;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    height: 50%;
+    margin: 8px 0;
+    padding: 14px 20px;
+    width: 25%;
+    font-family: Arial;
+    font-size: 16px;
+}

 a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
 div[data-title]:hover:after{
@@ -44,9 +57,14 @@ div[data-title]:hover:after{

 /* Body */
 body {
-  height: 100%;
+    height: 900px;

-  background-color: #B78996;
+    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEnqKdVtLbxjKuNsCSCxFRhTOpp3Gm0gsU8bMgA_MeUYyzrUFy);
+    background-size: cover;
+    background-repeat: repeat-x;
+    background-attachment: fixed;
+
+    /*background-color: #B78996;*/
    color: #333;

    font-family: Arial, sans-serif;
@@ -87,12 +105,14 @@ button {

 /* inlogform */
 form {
-    background-color: #a87a87;
+    /*background-color: #a87a87;*/
    border: 5px solid #325da3;
+    background-color: #a87a87;
    border-radius: 12px;
-    height: 50%;
-    margin: auto;
-    width: 55%;
+    height: 55%;
+    margin: 35px auto;
+    width: 45%;
+    overflow-y:auto;
 }

 /* inlog titel */
@@ -115,14 +135,14 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
    box-sizing: border-box;
    display: inline-block;
    height: 50%;
-    padding: 12px 20px;
-    margin: 8px 0;
+    padding: 8px 20px;
+    margin: 4px 0;
    width: 50%;
    font-family: Arial;
    font-size: 16px;
 }

-input[type=submit] {
+button[type=submit] {
    background-color: #845663;
    border: 2px solid black;
    border-radius: 12px;
@@ -152,6 +172,13 @@ label {
    text-align: center;
 }

+/* padding voor foutmelding login */
+.login_containerfault {
+    padding: 16px;
+    text-align: center;
+    color: red;
+}
+
 /* The Modal (background) */
 .modal {
    background-color: rgb(0,0,0); /* Fallback color */
@@ -175,7 +202,8 @@ label {
    margin: 5px auto; /* 15% from the top and centered */
    overflow-y: auto;
    width: 40%; /* Could be more or less, depending on screen size */
-    height: 80%;
+    height: 60%;
+
 }

@keyframes animatezoom {
--- a/website/public/styles/menu.css
+++ b/website/public/styles/menu.css
@@ -25,3 +25,16 @@
    font-size: 14px;
    cursor: pointer;
 }
+
+.friend-item {
+    cursor: pointer;
+}
+
+.menu button {
+    background: none;
+    color: #333;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    text-align: left;
+}
--- a/website/public/styles/settings.css
+++ b/website/public/styles/settings.css
@@ -5,6 +5,17 @@
 .settings-password {
    margin-right: 15px;
 }
+.settings-message {
+    color: white;
+}
+.settings-message-angry {
+    background-color: firebrick;
+}
+
+.settings-message-happy {
+    background-color: forestgreen;
+
+}


 .settings li {
@@ -21,6 +32,10 @@
    text-align: right;
 }

+.settings-password label, .settings-email label {
+    text-align: left;
+}
+
 /* All the fields for typing things. */
 .settings input[type="password"],
 .settings input[type="text"],
--- a/website/queries/connect.php
+++ b/website/queries/connect.php
@@ -5,9 +5,7 @@ if ($dbconf === FALSE) {
    die("Error parsing XML file");
 }
 else {
-    $db = new PDO("mysql:host=$dbconf->mysql_host;dbname=$dbconf->mysql_database;charset=utf8",
+    $GLOBALS["db"] = new PDO("mysql:host=$dbconf->mysql_host;dbname=$dbconf->mysql_database;charset=utf8",
        "$dbconf->mysql_username", "$dbconf->mysql_password")
    or die('Error connecting to mysql server');
 }
-
-?>
--- a/website/queries/friendship.php
+++ b/website/queries/friendship.php
@@ -3,6 +3,7 @@
 function selectAllFriends($db, $userID) {
    return $db->query("
    SELECT
+        `user`.`userID`,
        `user`.`username`,
        `user`.`profilepicture`,
        `user`.`onlinestatus`,
--- a/website/queries/login.php
+++ b/website/queries/login.php
@@ -0,0 +1,19 @@
+<?php
+
+function hashPassword() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `password`,
+      `userID`
+    FROM
+      `user`
+    WHERE
+      `username` LIKE :username
+    ");
+
+    $stmt->bindParam(":username", $_POST["uname"]);
+    $stmt->execute();
+    return $stmt->fetch(PDO::FETCH_ASSOC);
+}
+
+?>
--- a/website/queries/private_message.php
+++ b/website/queries/private_message.php
@@ -0,0 +1,85 @@
+<?php
+
+include_once("connect.php");
+
+session_start();
+
+function getOldChatMessages($user2ID) {
+    $db = $GLOBALS["db"];
+    $user1ID = $_SESSION["userID"];
+
+    $stmt = $db->prepare("
+    SELECT
+        *
+    FROM
+        `private_message`
+    WHERE
+        `origin` = :user1 AND 
+        `destination` = :user2 OR 
+        `origin` = :user2 AND
+        `destination` = :user1
+    ORDER BY
+        `messageID` ASC
+    ");
+
+    $stmt->bindParam(":user1", $user1ID);
+    $stmt->bindParam(":user2", $user2ID);
+
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
+}
+
+function sendMessage($destination, $content) {
+    $db = $GLOBALS["db"];
+    $stmt = $db->prepare("
+    INSERT INTO
+        `private_message`
+    (
+        `origin`,
+        `destination`,
+        `content`
+    )
+    VALUES
+    (
+        :origin,
+        :destination,
+        :content
+    )
+    ");
+
+    return $stmt->execute(array(
+        "origin" => $_SESSION["userID"],
+        "destination" => $destination,
+        "content" => $content
+    ));
+}
+
+function getNewChatMessages($lastID, $destination) {
+    $db = $GLOBALS["db"];
+    $origin = $_SESSION["userID"];
+
+    $stmt = $db->prepare("
+    SELECT
+        *
+    FROM
+        `private_message`
+    WHERE
+        (
+        `origin` = :user1 AND 
+        `destination` = :user2 OR 
+        `origin` = :user2 AND
+        `destination` = :user1) AND
+        `messageID` > :lastID
+    ORDER BY
+        `messageID` ASC
+    ");
+
+    $stmt->bindParam(':user1', $origin);
+    $stmt->bindParam(':user2', $destination);
+    $stmt->bindParam(':lastID', $lastID);
+
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
+}
--- a/website/queries/register.php
+++ b/website/queries/register.php
@@ -0,0 +1,68 @@
+<?php
+
+function getExistingUsername() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `username`
+    FROM
+      `user`
+    WHERE
+      `username` LIKE :username
+    ");
+
+    $stmt->bindParam(":username", $_POST["username"]);
+    $stmt->execute();
+    return $stmt->rowCount();
+
+}
+
+function getExistingEmail() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `email`
+    FROM
+      `user`
+    WHERE
+      `email` LIKE :email
+    ");
+
+    $stmt->bindParam(":email", $_POST["email"]);
+    $stmt->execute();
+    return $stmt->rowCount();
+
+}
+
+function registerAccount() {
+    $stmt = $GLOBALS["db"]->prepare("
+    INSERT INTO
+      `user`(fname,
+             lname,
+             birthdate,
+             username,
+             password,
+             location,
+             email)
+    VALUES(
+      :fname,
+      :lname,
+      :bday,
+      :username,
+      :password,
+      :location,
+      :email
+    )");
+
+    $hash=password_hash($_POST["password"].(strtolower($_POST["username"])), PASSWORD_DEFAULT);
+
+    $stmt->bindParam(":fname", $_POST["name"]);
+    $stmt->bindParam(":lname", $_POST["surname"]);
+    $stmt->bindParam(":bday", $_POST["bday"]);
+    $stmt->bindParam(":username", $_POST["username"]);
+    $stmt->bindParam(":password", $hash);
+    $stmt->bindParam(":location", $_POST["location"]);
+    $stmt->bindParam(":email", (strtolower($_POST["email"])));
+
+    $stmt->execute();
+    $stmt->rowCount();
+}
+?>
--- a/website/queries/settings.php
+++ b/website/queries/settings.php
@@ -0,0 +1,109 @@
+<?php
+
+function getSettings() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `fname`,
+      `lname`,
+      `email`,
+      `location`,
+      `birthdate`,
+      `bio`,
+      `profilepicture`
+    FROM
+      `user`
+    WHERE
+      `userID` = :userID
+      ");
+
+    $stmt->bindParam(":userID", $_SESSION["userID"]);
+    $stmt->execute();
+    return $stmt->fetch();
+}
+
+function getPasswordHash() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `password`,
+      `username`
+    FROM
+      `user`
+    WHERE
+      `userID` = :userID
+    ");
+    $stmt->bindParam(":userID", $_SESSION["userID"]);
+    $stmt->execute();
+    return $stmt->fetch();
+}
+
+function updateSettings() {
+    $stmt = $GLOBALS["db"]->prepare("
+    UPDATE
+      `user`
+    SET
+      `fname` = :fname,
+      `lname` = :lname,
+      `location` = :location,
+      `birthdate` = :bday,
+      `bio` = :bio
+    WHERE
+      `userID` = :userID
+    ");
+
+    $stmt->bindParam(":fname", $_POST["fname"]);
+    $stmt->bindParam(":lname", $_POST["lname"]);
+    $stmt->bindParam(":location", $_POST["location"]);
+    $stmt->bindParam(":bday", $_POST["bday"]);
+    $stmt->bindParam(":bio", $_POST["bio"]);
+    $stmt->bindParam(":userID", $_SESSION["userID"]);
+
+    $stmt->execute();
+
+    return array (
+        "type" => "settings-message-happy",
+        "message" => "Instellingen zijn opgeslagen."
+        );
+}
+
+function updatePassword() {
+    $user = getPasswordHash();
+    if (password_verify($_POST["password-old"].strtolower($user["username"]), $user["password"])) {
+        if ($_POST["password-new"] == $_POST["password-confirm"] && (strlen($_POST["password-new"]) >= 8)) {
+            if (changePassword($user)) {
+                return array ("type" => "settings-message-happy",
+                    "message" => "Wachtwoord gewijzigd.");
+            } else {
+                return array (
+                "type" => "settings-message-angry",
+                "message" => "Er is iets mis gegaan.");
+            }
+        } else {
+            return array (
+                "type" => "settings-message-angry",
+                "message" => "Wachtwoorden komen niet oveeen."
+            );
+        }
+    } else {
+        return array(
+            "type" => "settings-message-angry",
+            "message" => "Oud wachtwoord niet correct."
+        );
+    }
+}
+
+function changePassword($user) {
+    $stmt =$GLOBALS["db"]->prepare("
+    UPDATE
+      `user`
+    SET
+      `password` = :new_password
+    WHERE
+      `userID` = :userID
+    ");
+
+    $hashed_password = password_hash($_POST["password-new"].strtolower($user["username"]), PASSWORD_DEFAULT);
+    $stmt->bindParam(":new_password", $hashed_password);
+    $stmt->bindParam(":userID", $_SESSION["userID"]);
+    $stmt->execute();
+    return $stmt->rowCount();
+}
--- a/website/views/chat-view.php
+++ b/website/views/chat-view.php
@@ -1,52 +1,83 @@
 <div class="content">
    <div class="chat">
-        <nav class="chat-left left platform chat-recent">
+        <nav class="nav-list chat-left left platform chat-recent">
            <h5>Chats</h5>
-            <a href="#">
-                <div class="chat-conversation">
-                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
-                    Rudolf Leslo
+            <ul>
+                <?php
+                include_once("../queries/friendship.php");
+
+                if (empty($_SESSION["userID"]))
+                    $_SESSION["userID"] = 2;
+
+                // Get all the friends of a user.
+                $friends = selectAllFriends($db, $_SESSION["userID"]);
+                $i = 0;
+
+                // Print all the users.
+                while($friend = $friends->fetch(PDO::FETCH_ASSOC)) {
+                    $i ++;
+
+                    // Set default values of a friend.
+                    $username = $friend["username"];
+                    $userID = $friend["userID"];
+                    $pf = "img/notbad.jpg";
+
+                    // Change values if needed.
+                    if (!empty($friend["profilepicture"]))
+                        $pf = $friend["profilepicture"];
+
+                    // Echo the friend.
+                    echo "
+                        <li class='friend-item' onclick='switchUser(\"$userID\")'>
+                            <div class='friend'>
+                                <img alt='PF' class='profile-picture' src='$pf'/>
+                                $username
                            </div>
-            </a>
+                        </li>
+                ";
+                }
+                ?>
+            </ul>
+            <!--            <a href="#">-->
+            <!--                <div class="chat-conversation">-->
+            <!--                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">-->
+            <!--                    Rudolf Leslo-->
+            <!--                </div>-->
+            <!--            </a>-->
        </nav>
        <div class="chat-right right">
-            <div class="chat-history platform">
-                <div class="chat-message">
-                    <div class="chat-message-self">Hi!</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-other">Hi!</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-self">How it's going?</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-self">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-other">Hi!</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-                </div>
-                <div class="chat-message">
-                    <div class="chat-message-self">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-                </div>
+            <div id="chat-history" class="chat-history platform">
            </div>
+            <form id="lastIDForm">
+                <input type="hidden"
+                       id="lastID"
+                       name="lastID"
+                       value=""
+                />
+                <input type="hidden"
+                       name="destination"
+                       class="destinationID"
+                       value=""
+                />
+            </form>
            <div class="chat-field">
-                <form  method="post">
+                <form id="sendMessageForm" action="javascript:sendMessage();">
+                    <input type="hidden"
+                           name="destination"
+                           class="destinationID"
+                           value=""
+                    />
                    <input type="submit"
                           value="Verstuur"
-                    >
+                    />
                    <span>
                        <input type="text"
-                               name="message"
+                               name="content"
+                               id="newContent"
                               placeholder="Reageer..."
+                               autofocus
                               required
-                        >
+                        />
                    </span>
                </form>
            </div>
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -17,4 +17,4 @@

 include_once("../queries/connect.php");

-?>
+session_start();
--- a/website/views/login-view.php
+++ b/website/views/login-view.php
@@ -1,256 +1,51 @@
-<?php
-    // define variables and set to empty values
-    $name = $surname = $bday = $username = $password = $confirmpassword = $streetname = $housenumber = $email = "";
-    $passwordErr = $confirmpasswordErr = "";
-    $correct = true;
-
-    if (isset($_POST["name"])) {
-      $name = $_POST["name"];
-    }
-
-    if (isset($_POST["surname"])) {
-      $surname = $_POST["surname"];
-    }
-
-    if (isset($_POST["bday"])) {
-      $bday = $_POST["bday"];
-    }
-
-    if (isset($_POST["username"])) {
-      $username = $_POST["username"];
-    }
-
-    if (isset($_POST["password"])) {
-      $password = $_POST["password"];
-    }
-
-    if (isset($_POST["streetname"])) {
-      $streetname = $_POST["streetname"];
-    }
-
-    if (isset($_POST["housenumber"])) {
-      $housenumber = $_POST["housenumber"];
-    }
-
-    if (isset($_POST["email"])) {
-      $email = $_POST["email"];
-    }
-
-    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-      if ($_POST["password"]!= $_POST["confirmpassword"]) {
-          $passwordErr = "Wachtwoorden matchen niet";
-          $confirmpasswordErr = "Wachtwoorden matchen niet";
-          $correct = false;
-          ?>
-          <script>window.onload = function() {
-            document.getElementById('id01').style.display='block'
-          }</script>
-          <?php
-      }
-    }
-?>
 <div>
    <img style="width:50%;margin-left:25%"
         src="img/top-logo.png"
         alt="MyHyvesbook+">
 </div>

-<form action="../profile.php"
+<!-- Login content  -->
+<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+      return= $correct
      method="post">
    <h1>Welkom bij MyHyvesbook+</h1>

+    <!-- Login name -->
    <div class="login_containerlogin">
        <label><b>Gebruikersnaam</b></label>
        <input type="text"
               placeholder="Voer uw gebruikersnaam in"
               name="uname"
-               pattern=".{6,}"
+               value="<?php echo $uname ?>"
               title="Moet 6 of meer karakters bevatten"
-               required>
+               >
    </div>

+    <!-- Login password -->
    <div class="login_containerlogin">
        <label><b>Wachtwoord</b></label>
        <input type="password"
               placeholder="Voer uw wachtwoord in"
               name="psw"
-               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
-               required>
+               title="Moet minstens 8 karakters lang zijn"
+               >
    </div>

+    <!-- Error message -->
+    <div class="login_containerfault"><span><?php echo $loginErr; ?></span></div>
+
+    <!-- Button for logging in -->
    <div class="login_containerlogin">
-        <input type="submit"
+        <button type="submit"
               value="Login"
-               name="Submit"
-               id="frm1_submit" />
+               name="submit"
+               id="frm1_submit">
+        Login
+        </button>
    </div>
 </form>

+<!-- Button for going to the register screen -->
 <div class="login_containerlogin">
-    <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
+    <a href="https://myhyvesbookplus.nl/~joey/public/register.php" class="button">Registreer een account</a>
 </div>
-
-<div class="login_containerregister">
-    <div id="id01" class="modal">
-        <span onclick="document.getElementById('id01').style.display='none'"
-              class="close"
-              title="Close Modal">
-              &times;</span>
-
-        <!-- Register Content -->
-        <form class="modal-content animate"
-              action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
-              return= $correct
-              method="post">
-            <h2>Registreer uw account</h2>
-
-            <div class="login_containerregister">
-                <label><b>Naam</b></label>
-                <input type="text"
-                       placeholder="Voer uw naam in"
-                       name="name"
-                       value="<?php echo $name ?>"
-                       pattern="[A-Za-z]{1,}"
-                       title="Mag alleen letters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Achternaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw achternaam in"
-                       name="surname"
-                       value="<?php echo $surname ?>"
-                       pattern="[A-Za-z]{1,}"
-                       title="Mag alleen letters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Geboortedatum</b></label>
-                <input type="date"
-                       name="bday"
-                       value="<?php echo $bday ?>"
-                       id="bday"
-                       placeholder="01/01/1900">
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Gebruikersnaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw gebruikersnaam in"
-                       name="username"
-                       value="<?php echo $username ?>"
-                       pattern=".{6,}"
-                       title="Moet minstens 6 karakters bevatten"
-                       required>
-            </div>
-
-            <ul>
-              <li>Minstens 6 karakters</li>
-            </ul>
-
-            <div class="login_containerregister">
-                <label><b>Wachtwoord</b></label>
-                <input type="password"
-                       placeholder="Voer uw wachtwoord in"
-                       name="password"
-                       value="<?php echo $password ?>"
-                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                       id="password"
-                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
-                       required>
-                <span class="error">* <?php echo $passwordErr;?></span>
-            </div>
-
-            <ul>
-              <li>Minstens 8 karakters</li>
-              <li>Minimaal 1 cijfer</li>
-              <li>Minimaal 1 hoofdletter</li>
-              <li>Minimaal 1 kleine letter</li>
-            </ul>
-
-            <div class="login_containerregister">
-                <label><b>Herhaal wachtwoord</b></label>
-                <input type="password"
-                       placeholder="Herhaal wachtwoord"
-                       name="confirmpassword"
-                       value="<?php echo $confirmpassword ?>"
-                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                       id="confirmpassword"
-                       title="Herhaal wachtwoord"
-                       required>
-                <span class="error">* <?php echo $confirmpasswordErr;?></span>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Straatnaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw straatnaam in"
-                       name="streetname"
-                       value="<?php echo $streetname ?>"
-                       pattern="[A-Za-z]{1,}"
-                       title="Mag alleen letters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Huisnummer</b></label>
-                <input type="text"
-                       placeholder="Voer uw straatnummer in"
-                       name="housenumber"
-                       value="<?php echo $housenumber ?>"
-                       pattern="[1-9][0-9]{0,}"
-                       title="Mag alleen nummers bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Email</b></label>
-                <input type="email"
-                       placeholder="Voer uw email in"
-                       name="email"
-                       value="<?php echo $email ?>"
-                       id="email"
-                       title="Voer een geldige email in"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <input type="submit"
-                       value="Registreer uw account"
-                       name="Submit"
-                       id="frm1_submit" />
-            </div>
-        </form>
-    </div>
-</div>
-
-<script>
-    // Get the modal
-    var modal = document.getElementById('id01');
-    // When the user clicks anywhere outside of the modal, close it
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-}
-</script>
-
-<script>
-    function passwordfunction() {
-        var password1 = document.getElementById("password").value;
-        var password2 = document.getElementById("confirmpassword").value;
-        var passwordmatching = false;
-
-        if (password1 == password2) {
-            document.getElementById("password").style.borderColor = "red";
-            document.getElementById("confirmpassword").style.borderColor = "red";
-            confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
-        } else {
-            passwordmatching = true;
-        }
-        return passwordmatching;
-    }
-</script>
--- a/website/views/login_head.php
+++ b/website/views/login_head.php
@@ -5,6 +5,4 @@
          type="text/css"
          href="styles/index.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-    <script src="js/dobPicker.min.js"></script>
 </head>
--- a/website/views/menu.php
+++ b/website/views/menu.php
@@ -34,14 +34,18 @@

                // Echo the friend.
                echo "
-                    <a href='#' class='$extraItem'>
-                        <li class='friend-item'>
+                    <li class='friend-item $extraItem'>
+                        <form action='profile.php' method='get'>
+                            <button type='submit'
+                                    name='username'
+                                    value='$username'>
                                <div class='friend'>
                                    <img alt='PF' class='profile-picture' src='$pf'/>
                                    $username
                                </div>
+                            </button>
+                        </form>
                    </li>
-                    </a>
                ";
            }
            if ($i > 1) {
--- a/website/views/register-view.php
+++ b/website/views/register-view.php
@@ -0,0 +1,135 @@
+<div>
+    <img style="width:50%;margin-left:25%"
+         src="img/top-logo.png"
+         alt="MyHyvesbook+">
+</div>
+
+<!-- Register Content -->
+<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+      return= $correct
+      method="post">
+    <h2>Registreer uw account</h2>
+
+    <!-- Error message -->
+    <div class="login_containerfault"><?php echo $genericErr;?></span></div>
+
+    <!-- Register name -->
+    <div class="login_containerregister">
+        <label><b>Naam</b></label>
+        <input type="text"
+               placeholder="Voer uw naam in"
+               name="name"
+               value="<?php echo $name ?>"
+               title="Mag alleen letters bevatten"
+               >
+        <span class="error">* <?php echo $nameErr;?></span>
+    </div>
+
+    <!-- Register surname -->
+    <div class="login_containerregister">
+        <label><b>Achternaam</b></label>
+        <input type="text"
+               placeholder="Voer uw achternaam in"
+               name="surname"
+               value="<?php echo $surname ?>"
+               title="Mag alleen letters bevatten"
+               >
+        <span class="error">* <?php echo $surnameErr;?></span>
+    </div>
+
+    <!-- Register birthday -->
+    <div class="login_containerregister">
+        <label><b>Geboortedatum</b></label>
+        <input type="date"
+               name="bday"
+               value="<?php echo $bday ?>"
+               id="bday"
+               placeholder="01/01/1900"
+               >
+        <span class="error">* <?php echo $bdayErr;?></span>
+    </div>
+
+    <!-- Register username -->
+    <div class="login_containerregister">
+        <label><b>Gebruikersnaam</b></label>
+        <input type="text"
+               placeholder="Voer uw gebruikersnaam in"
+               name="username"
+               value="<?php echo $username ?>"
+               title="Moet minimaal 6 karakters bevatten"
+               >
+        <span class="error">* <?php echo $usernameErr;?></span>
+    </div>
+
+    <ul>
+      <li>Minstens 6 karakters</li>
+    </ul>
+
+    <!-- Register password -->
+    <div class="login_containerregister">
+        <label><b>Wachtwoord</b></label>
+        <input type="password"
+               placeholder="Voer uw wachtwoord in"
+               name="password"
+               value="<?php echo $password ?>"
+               id="password"
+               >
+        <span class="error">* <?php echo $passwordErr;?></span>
+    </div>
+
+    <ul>
+      <li>Minstens 8 karakters</li>
+    </ul>
+
+    <!-- Repeat password -->
+    <div class="login_containerregister">
+        <label><b>Herhaal wachtwoord</b></label>
+        <input type="password"
+               placeholder="Herhaal wachtwoord"
+               name="confirmpassword"
+               value="<?php echo $confirmpassword ?>"
+               id="confirmpassword"
+               title="Herhaal wachtwoord"
+              >
+        <span class="error">* <?php echo $confirmpasswordErr;?></span>
+    </div>
+
+    <!-- Register location -->
+    <div class="login_containerregister">
+        <label><b>Woonplaats</b></label>
+        <input type="text"
+               placeholder="Voer uw woonplaats in"
+               name="location"
+               value="<?php echo $location ?>"
+               pattern="[A-Za-z]{1,}"
+               title="Mag alleen letters bevatten">
+        <span class="error">* <?php echo $locationErr;?></span>
+    </div>
+
+    <!-- Register email -->
+    <div class="login_containerregister">
+        <label><b>Email</b></label>
+        <input type="email"
+               placeholder="Voer uw email in"
+               name="email"
+               value="<?php echo $email ?>"
+               id="email"
+               title="Voer een geldige email in">
+        <span class="error">* <?php echo $emailErr;?></span>
+    </div>
+
+    <!-- Button for registering -->
+    <div class="login_containerregister">
+        <button type="submit"
+               value="Registreer uw account"
+               name="Submit"
+               id="frm1_submit">
+        Registreer uw account
+        </button>
+    </div>
+</form>
+
+<!-- Button for going back to login screen -->
+<div class="login_containerlogin">
+    <a href="https://myhyvesbookplus.nl/~joey/public/login.php" class="button">Login met een account</a>
+</div>
--- a/website/views/settings-view.php
+++ b/website/views/settings-view.php
@@ -1,39 +1,36 @@
+<?php
+$settings = getSettings();
+?>
+
 <div class="content">
    <div class="settings">
-        <form class="settings-profile platform">
+        <?php
+        if ($_SERVER["REQUEST_METHOD"] == "POST") {
+            echo "<div class='platform settings-message ${result["type"]}'>
+            ${result["message"]}
+        </div>";
+        }
+        ?>
+        <form class="settings-profile platform" method="post">
            <h5>Profiel Instellingen</h5>
            <ul>
                <li>
-                    <label for="first-name">Voornaam</label>
+                    <label for="fname">Voornaam</label>
                    <input type="text"
-                           name="first-name"
-                           id="first-name"
+                           name="fname"
+                           id="fname"
                           placeholder="Voornaam"
                           title="Voornaam"
+                           value="<?= $settings["fname"]?>"
                    >
                </li>
                <li>
-                    <label for="last-name">Achternaam</label>
+                    <label for="lname">Achternaam</label>
                    <input type="text"
-                           name="last-name"
-                           id="last-name"
+                           name="lname"
+                           id="lname"
                           placeholder="Achternaam"
-                    >
-                </li>
-                <li>
-                    <label for="place">Woonplaats</label>
-                    <input type="text"
-                           name="place"
-                           id="place"
-                           placeholder="Woonplaats"
-                    >
-                </li>
-                <li>
-                    <label for="bday">Geboortedatum</label>
-                    <input type="date"
-                           name="bday"
-                           id="bday"
-                           placeholder="01/01/1900"
+                           value="<?= $settings["lname"]?>"
                    >
                </li>
                <li>
@@ -42,6 +39,16 @@
                           name="location"
                           id="location"
                           placeholder="Locatie"
+                           value="<?= $settings["location"]?>"
+                    >
+                </li>
+                <li>
+                    <label for="bday">Geboortedatum</label>
+                    <input type="date"
+                           name="bday"
+                           id="bday"
+                           placeholder="yyyy-mm-dd"
+                           value="<?= $settings["birthdate"]?>"
                    >
                </li>
                <li>
@@ -50,17 +57,42 @@
                              rows="5"
                              title="bio"
                              id="bio"
-                    ></textarea>
+                    ><?= $settings["bio"]?></textarea>
                </li>
                <li>
                    <label></label>
-                    <input type="submit"
-                           value="Opslaan"
-                    >
+                    <button type="submit"
+                            value="profile"
+                            name="form"
+                    >Opslaan</button>
+                </li>
+            </ul>
+        </form>
+        <form class="settings-profilepictue platform" method="post">
+            <h5>Verander profielfoto</h5>
+            <ul>
+                <li>
+                    <label>Huidige profielfoto</label>
+                    <img src="<?= $settings["profilepicture"] ?>"
+                         class="profile-picture"
+                    >
+                </li>
+                <li>
+                    <label>Selecteer foto</label>
+                    <input type="file"
+                           name="pp"
+                           accept="image/jpeg,image/gif,image/png"
+                    >
+                </li>
+                <li>
+                    <label></label>
+                    <button type="submit"
+                            name="form"
+                            value="picture"
+                    >Verander profielfoto</button>
                </li>
            </ul>
        </form>
-
        <form class="settings-password platform item-box" method="post">
            <h5>Verander Wachtwoord</h5>
            <ul>
@@ -86,10 +118,10 @@
                    >
                </li>
                <li>
-                    <label></label>
-                    <input type="submit"
-                           value="Verander wachtwoord"
-                    >
+                    <button type="submit"
+                            name="form"
+                            value="password"
+                    >Verander wachtwoord</button>
                </li>
            </ul>
        </form>
@@ -97,6 +129,14 @@
        <form class="settings-email platform item-box" method="post">
            <h5>Verander Email</h5>
            <ul>
+                <li>
+                    <label for="email-old">Huidig Email </label>
+                    <input type="email"
+                           id="email-old"
+                           value="<?= $settings["email"]?>"
+                           disabled
+                    >
+                </li>
                <li>
                    <label for="email">Nieuw Email</label>
                    <input type="email"
@@ -114,10 +154,10 @@
                    >
                </li>
                <li>
-                    <label></label>
-                    <input type="submit"
-                           value="Verander Email"
-                    >
+                    <button type="submit"
+                            name="form"
+                            value="email"
+                    >Verander Email</button>
                </li>
            </ul>
        </form>