2017-01-26 13:29:43 +01:00
45 changed files with 1256 additions and 365 deletions
--- a/website/public/API/getPosts.php
+++ b/website/public/API/getPosts.php
@@ -0,0 +1,24 @@
+<?php
+
+if(empty($_POST["usr"])) {
+    header('HTTP/1.1 500 Non enough arguments');
+}
+
+require_once ("../../queries/user.php");
+require_once ("../../queries/nicetime.php");
+
+$posts = selectAllUserPosts($_POST["usr"]);
+
+if(!$posts) {
+    header('HTTP/1.1 500 Query failed');
+}
+
+$results = $posts->fetchAll(PDO::FETCH_ASSOC);
+
+for($i = 0; $i < sizeof($results); $i++) {
+    $results[$i]["nicetime"] = nicetime($results[$i]["creationdate"]);
+}
+
+//$results[0]["niceTime"] = nicetime($results[0]["creationdate"]);
+
+echo json_encode($results);
--- a/website/public/API/loadFriendRequestNotifications.php
+++ b/website/public/API/loadFriendRequestNotifications.php
--- a/website/public/API/loadFriends.php
+++ b/website/public/API/loadFriends.php
@@ -0,0 +1,16 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/friendship.php");
+
+if (isset($_POST["limit"])) {
+    echo selectLimitedFriends($_SESSION["userID"], (int) test_input($_POST["limit"]));
+} else if (isset($_GET["limit"])) {
+    echo selectLimitedFriends($_SESSION["userID"], (int) test_input($_GET["limit"]));
+} else {
+    echo selectFriends($_SESSION["userID"]);
+}
+
--- a/website/public/API/loadGroups.php
+++ b/website/public/API/loadGroups.php
@@ -0,0 +1,14 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/group_member.php");
+
+if (isset($_POST["limit"])) {
+    echo selectLimitedGroupsFromUser($_SESSION["userID"], (int) test_input($_POST["limit"]));
+} else {
+    echo selectAllGroupsFromUser($_SESSION["userID"]);
+}
+
--- a/website/public/API/loadMessages.php
+++ b/website/public/API/loadMessages.php
@@ -8,9 +8,9 @@ require_once("../../queries/checkInput.php");
 require_once("../../queries/friendship.php");

 if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
+    setLastVisited(test_input($_POST["destination"]));
    echo getNewChatMessages(test_input($_POST["lastID"]), test_input($_POST["destination"]));
-    setLastVisited(test_input($_POST["destination"]));
 } else {
-    echo getOldChatMessages(test_input($_POST["destination"]));
    setLastVisited(test_input($_POST["destination"]));
+    echo getOldChatMessages(test_input($_POST["destination"]));
 }
--- a/website/public/API/loadPost.php
+++ b/website/public/API/loadPost.php
@@ -0,0 +1,12 @@
+<?php
+
+require_once("../../queries/connect.php");
+require_once("../../queries/post.php");
+require_once("../../queries/checkInput.php");
+require_once("../../queries/nicetime.php");
+
+if(isset($_GET['postID'])) {
+    include("../../views/post-view.php");
+} else {
+    echo "Failed to load";
+}
--- a/website/public/bits/friend-item.php
+++ b/website/public/bits/friend-item.php
@@ -0,0 +1,102 @@
+<?php
+
+session_start();
+
+include_once ("../../queries/friendship.php");
+
+if (isset($_POST["limit"])) {
+    $limit = $_POST["limit"];
+} else {
+    $limit = 5;
+}
+
+if (isset($_POST["action"])) {
+    $action = $_POST["action"];
+} else {
+    $action = "profile.php";
+}
+
+if (isset($_POST["actionType"])) {
+    $actionType = $_POST["actionType"];
+} else {
+    $actionType = "GET";
+}
+
+$friends = json_decode($_POST["friends"]);
+
+foreach($friends as $i => $friend) {
+    $friendshipStatus = getFriendshipStatus($friend->userID);
+
+    if ($limit != 0 && $i >= $limit)
+        $extra = "extra-friend-item";
+    else
+        $extra = "";
+    ?>
+    <li class='friend-item <?= $extra ?>'>
+        <form action='<?= $action ?>' method='<?= $actionType ?>'>
+            <button type='submit'
+                    name='username'
+                    value='<?php
+                    if (isset($friend->username)) {
+                        echo $friend->username;
+                    } else if (isset($friend->content)) {
+                        echo $friend->userID;
+                    }
+                    ?>'>
+                <div class='friend'>
+                    <img alt='PF' class='profile-picture' src='<?= $friend->profilepicture ?>'/>
+                    <div class='friend-name'>
+                        <?= $friend->fullname ?><br/>
+                        <span style='color: #666'><?php
+                            if (isset($friend->username)) {
+                                echo $friend->username;
+                            } else if (isset($friend->content)) {
+                                echo $friend->content;
+                            }
+                            ?></span>
+                    </div>
+                </div>
+            </button>
+        </form>
+        <?php
+        if ($friendshipStatus > 1) {
+            ?>
+            <div class='notification-options'>
+                <input type='hidden' name='userID' value='' />
+                <button name='delete'
+                        onclick="editFriendship('<?= $friend->userID ?>', 'delete')"
+                        class='deny-notification'
+                        value='1'>
+                    <i class='fa fa-times'></i>
+                </button>
+            <?php
+            if ($friendshipStatus == 3) {
+                ?>
+                <button name='accept'
+                        onclick="editFriendship('<?= $friend->userID ?>', 'accept')"
+                        class='accept-notification'
+                        value='1'>
+                    <i class='fa fa-check'></i>
+                </button>
+                <?php
+            }
+            ?>
+            </div>
+            <?php
+        }
+        ?>
+    </li>
+    <?php
+}
+
+if (sizeof($friends) > $limit) {
+    ?>
+    <li class='more-item'>
+        Meer vrienden...
+    </li>
+    <?php
+}
+
+?>
+
+
--- a/website/public/bits/group-item.php
+++ b/website/public/bits/group-item.php
@@ -0,0 +1,38 @@
+<?php
+
+session_start();
+
+include_once ("../../queries/group_member.php");
+
+$groups = json_decode($_POST["groups"]);
+
+foreach($groups as $i => $group) {
+    ?>
+    <li class='group-item'>
+        <form action='group.php' method='get'>
+            <button type='submit'
+                    name='groupname'
+                    value='<?= $group->name ?>'>
+                <div class='group'>
+                    <img alt='PF' class='group-picture' src='<?= $group->picture ?>'/>
+                    <?= $group->name ?>
+                </div>
+            </button>
+        </form>
+    </li>
+    <?php
+}
+    ?>
+    <li>
+        <form action="search.php" method="get">
+            <input type="hidden"
+                   name="search"
+                   value="" />
+            <input type="hidden"
+                   name="filter"
+                   value="groups" />
+            <button type="submit">
+                Alle groepen...
+            </button>
+        </form>
+    </li>
--- a/website/public/emailconfirm.php
+++ b/website/public/emailconfirm.php
@@ -1,5 +1,6 @@
 <?php
 include_once("../queries/connect.php");
+include_once("../views/messagepage.php");
 if (array_key_exists("u", $_GET) and array_key_exists("h", $_GET)) {
   $checkHash = $GLOBALS["db"]->prepare("
   SELECT
@@ -18,11 +19,11 @@ if (array_key_exists("u", $_GET) and array_key_exists("h", $_GET)) {
   if ($role == "unconfirmed") {
       doActivate($email);
   } else {
-       echo "Ongeldige link.";
+        messagePage("Ongeldige link.");
   }

 } else {
-    echo "Ongeldige link.";
+    messagePage("Ongeldige link.");
 }

 function doActivate(string $email) {
@@ -39,11 +40,10 @@ function doActivate(string $email) {
        $confirmUser->bindParam(":userID", $_GET["u"]);
        $confirmUser->execute();
        if ($confirmUser->rowCount()) {
-            echo "Email bevestigd <br />
-            <a href='index.php'>U wordt automatisch doorgestuurd naar de login pagina over 5 seconden.</a> ";
-            header("refresh:5;url=login.php");
+            messagePage("Email bevestigd <br />
+            <a href='index.php'>Klik hier om terug te gaan naar de login pagina.</a>");
        }
    } else {
-        echo "Ongeldige link.";
+        messagePage("Ongeldige link.");
    }
 }
--- a/website/public/index.php
+++ b/website/public/index.php
@@ -1,5 +1,9 @@
-<html>
-<head>
-    <meta http-equiv="refresh" content="0; url=login.php" />
-</head>
-</html>
+<?php
+
+session_start();
+
+if (isset($_SESSION["userID"])) {
+    header("Location: profile.php");
+} else {
+    header("Location: login.php");
+}
--- a/website/public/js/chat.js
+++ b/website/public/js/chat.js
@@ -54,7 +54,7 @@ function switchUser(userID) {
    $("#chat-history").html("");
    $("#lastID").val("");
    $("#chat-recent-panel .friend-item").removeClass("active-friend-chat");
-    $("#chat-left #friend-item-" + userID).addClass("active-friend-chat");
+    $("#friend-item-" + userID).addClass("active-friend-chat");
 }

 function sayEmpty() {
--- a/website/public/js/friendButtons.js
+++ b/website/public/js/friendButtons.js
@@ -18,10 +18,7 @@ function placeFriendButtons() {
            }

            $buttonContainer.children().click(function() {
-                $.post("API/editFriendship.php", { usr: userID, action: this.value })
-                    .done(function() {
-                        placeFriendButtons();
-                    });
+                editFriendship(userID, this.value);
            });
        });
 }
--- a/website/public/js/main.js
+++ b/website/public/js/main.js
@@ -0,0 +1,45 @@
+function editFriendship(userID, value) {
+    $.post("API/editFriendship.php", { usr: userID, action: value })
+    .done(function() {
+        placeFriendButtons();
+    });
+}
+
+function showFriends(friends, list) {
+    if(friends && friends != "[]") {
+        $(list).load("bits/friend-item.php", {
+            "friends": friends
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function showFriendsPlus(friends, list, limit, action, actionType) {
+    if(friends && friends != "[]") {
+        $(list).load("bits/friend-item.php", {
+            "friends": friends,
+            "limit": limit,
+            "action": action,
+            "actionType": actionType
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function showGroups(groups, list) {
+    if(groups && groups != "[]") {
+        $(list).load("bits/group-item.php", {
+            "groups": groups
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}
--- a/website/public/js/masonry.js
+++ b/website/public/js/masonry.js
@@ -1,15 +1,50 @@
 margin = 20;

+// scrolling modal taken from http://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen
+function scrollbarMargin(width, overflow) {
+    $('body').css({
+        marginRight: width,
+        overflow: overflow
+    });
+    $('.profile-menu').css({
+        marginRight: width
+    });
+}
+
+function requestPost(postID) {
+    $(".modal").show();
+
+    $.get("API/loadPost.php", { postID : postID }).done(function(data) {
+        $('.modal-default').hide();
+        var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
+        scrollbarMargin(scrollBarWidth, 'hidden');
+        $('#modal-response').show();
+        $('#modal-response').html(data);
+    });
+}
+
+$(window).on("load", function() {
+    $(".modal-close").click(function () {
+        $(".modal").hide();
+        scrollbarMargin(0, 'auto');
+        $('#modal-response').hide();
+        $('.modal-default').show();
+    });
+});
+
+var masonryMode = 0;
+
 $(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizeFinished = setTimeout(function() {
-        masonry();
+        masonry(masonryMode);
    }, 250);
 });

 var $container = $(".posts");

-function masonry() {
+function masonry(mode) {
+    masonryMode = mode;
    $container.children().remove();
    columnCount = Math.floor($(".posts").width() / 250);

@@ -25,6 +60,20 @@ function masonry() {
        columns[i] = [0, $column];
    }

+    if(mode == 1) {
+        $postInput = $("<div class=\"post platform\">");
+        $form = $postInput.append($("<form>"));
+
+        $form.append($("<input class=\"newpost\" placeholder=\"Titel\" type=\"text\">"));
+        $form.append($("<textarea class=\"newpost\" placeholder=\"Schrijf een berichtje...\">"));
+        $form.append($("<input value=\"Plaats!\" type=\"submit\">"));
+        columns[0][1].append($postInput);
+
+        $postInput.on("load", function() {
+            columns[0][0] = $postInput.height() + margin;
+        });
+    }
+
    /*
     * Function will find the column with the shortest height.
     */
@@ -50,9 +99,10 @@ function masonry() {
                * Rearange the objects.
                */
               jQuery.each(posts, function() {
-                   $post = $("<div class=\"post platform\" onclick=\"requestPost(this)\">");
+                   $post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
                   $post.append($("<h2>").text(this["title"]));
                   $post.append($("<p>").html(this["content"]));
+                   $post.append($("<p class=\"subscript\">").text(this["nicetime"]));

                   shortestColumn = getShortestColumn(columns);
                   shortestColumn[1].append($post);
@@ -60,3 +110,4 @@ function masonry() {
               });
           });
 }
+
--- a/website/public/js/menu.js
+++ b/website/public/js/menu.js
@@ -1,39 +1,108 @@
+
 $(document).ready(function() {
-    $(".extra-menu-items").hide();
-    $("#menu-back").hide();
+    // Show more friends/users

    // Show more friends
-    $("#more-friends-click").click(function() {
-        // Show only friends
-        $("#groups-menu-section").slideUp();
-        $("#friends-menu-section li").show();
+    // $("#more-friends-click").click(function() {
+    //     // Show only friends
+    //     $("#groups-menu-section").slideUp();
+    //     $("#friends-menu-section li").show();
+    //
+    //     // Change buttons
+    //     $("#more-friends-click").hide();
+    //     $("#menu-back").show();
+    // });
+    //
+    // // Show more groups
+    // $("#more-groups-click").click(function() {
+    //     // Show only groups
+    //     $("#friends-menu-section").slideUp();
+    //     $("#groups-menu-section li").show();
+    //
+    //     // Change buttons
+    //     $("#more-groups-click").hide();
+    //     $("#menu-back").show();
+    // });

-        // Change buttons
-        $("#more-friends-click").hide();
-        $("#menu-back").show();
-    });
+    // // Go back
+    // $("#menu-back").click(function() {
+    //     // Show overview of friends and groups
+    //     $("#friends-menu-section").slideDown();
+    //     $("#groups-menu-section").slideDown();
+    //     $(".extra-menu-items").hide();
+    //
+    //     // Change buttons
+    //     $("#menu-back").hide();
+    //     $("#more-groups-click").show();
+    //     $("#more-friends-click").show();
+    // });

-    // Show more groups
-    $("#more-groups-click").click(function() {
-        // Show only groups
-        $("#friends-menu-section").slideUp();
-        $("#groups-menu-section li").show();
-
-        // Change buttons
-        $("#more-groups-click").hide();
-        $("#menu-back").show();
-    });
-
-    // Go back
-    $("#menu-back").click(function() {
-        // Show overview of friends and groups
-        $("#friends-menu-section").slideDown();
-        $("#groups-menu-section").slideDown();
-        $(".extra-menu-items").hide();
-
-        // Change buttons
-        $("#menu-back").hide();
-        $("#more-groups-click").show();
-        $("#more-friends-click").show();
-    });
+    loadMenuFriends(5);
+    loadNotificationFriends();
+    loadUnreadMessages();
+    loadMenuGroups();
 });
+
+
+function loadMenuFriends(limit) {
+    $.post(
+        "API/loadFriends.php",
+        {
+            limit: 5
+        }
+    ).done(function(data) {
+        if (showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
+            $("#friends-menu-section").show();
+        } else {
+            $("#friends-menu-section").hide();
+        }
+    });
+
+    setTimeout(loadMenuFriends, 3000, limit);
+}
+
+function loadMenuGroups() {
+    $.post(
+        "API/loadGroups.php",
+        {
+            limit: 5
+        }
+    ).done(function(data) {
+        if (showGroups(data, "#menu-groups-list")) {
+            $("#groups-menu-section").show();
+        } else {
+            $("#groups-menu-section").hide();
+        }
+    });
+
+    setTimeout(loadMenuGroups, 3000);
+}
+
+function loadNotificationFriends() {
+    $.post(
+        "API/loadFriendRequest.php"
+    ).done(function(data) {
+        if (showFriendsPlus(data, "#friend-requests-list", 5, "profile.php", "GET")) {
+            $("#friend-request-section").show();
+        } else {
+            $("#friend-request-section").hide();
+        }
+    });
+
+    setTimeout(loadNotificationFriends, 3000);
+}
+
+function loadUnreadMessages() {
+    $.post(
+        "API/loadChatNotifications.php"
+    ).done(function(data) {
+        if (showFriendsPlus(data, "#unread-chat-list", 5, "chat.php", "GET")) {
+            console.log(data);
+            $("#unread-messages-section").show();
+        } else {
+            $("#unread-messages-section").hide();
+        }
+    });
+
+    setTimeout(loadUnreadMessages, 3000);
+}
--- a/website/public/js/notifications.js
+++ b/website/public/js/notifications.js
@@ -1,89 +1,43 @@
-function showFriendNotifications(notifications) {
-    $("#friendrequestslist").html("");
-    for (i in notifications) {
-        var outgoing = "";
-        if (notifications[i].friend_state == "3") {
-            outgoing = "<button\
-                            name='accept' \
-                            class='accept-notification' \
-                            value='"+ notifications[i].userID +"'> \
-                        <i class='fa fa-check'></i> \
-                        </button>";
-        }
-
-        $("#friendrequestslist").append(" \
-            <li class='friend-item'> \
-                <form action='profile.php' method='get'> \
-                    <button type='submit' \
-                            name='username' \
-                            value='"+ notifications[i].username +"'> \
-                        <div class='friend'> \
-                            <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
-                            "+ notifications[i].username +" \
-                        </div> \
-                    </button> \
-                </form> \
-                <div class='notification-options'>\
-                    <form action='API/edit_friendship.php' method='post'> \
-                        <input type='hidden' name='userID' value='"+ notifications[i].userID +"' /> \
-                        "+ outgoing +" \
-                        <button type='submit' \
-                                name='delete' \
-                                class='deny-notification' \
-                                value='"+ notifications[i].userID +"'> \
-                            <i class='fa fa-times'></i> \
-                        </button>\
-                    <form>\
-                </div> \
-            </li> \
-        ");
-    }
-}
-
-function showChatNotifications(notifications) {
-    $("#unreadChatlist").html("");
-    for (i in notifications) {
-        $("#unreadChatlist").append(" \
-            <li class='friend-item'> \
-                <form action='chat.php' method='get'> \
-                    <button type='submit' \
-                            name='chatID' \
-                            value='"+ notifications[i].userID +"'> \
-                        <div class='friend'> \
-                            <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
-                            <div class='friend-name'> \
-                                "+ notifications[i].name +"<br/> \
-                                <span style='color: #666'>"+ notifications[i].content +"</span> \
-                            </div> \
-                        </div> \
-                    </button> \
-                </form> \
-            </li> \
-        ");
-    }
-}
-
-function loadNotifications() {
-    $.post(
-        "API/loadFriendRequestNotifications.php"
-    ).done(function(data) {
-        if (data && data != "[]") {
-            showFriendNotifications(JSON.parse(data));
-        }
-    });
-    $.post(
-        "API/loadChatNotifications.php"
-    ).done(function(data) {
-        if (data && data != "[]") {
-            showChatNotifications(JSON.parse(data));
-        }
-    });
-
-    setTimeout(loadNotifications, 10000);
-}
-$(document).ready(function() {
-    loadNotifications();
-});
+// function showChatNotifications(notifications) {
+//     $("#unreadChatlist").html("");
+//     for (i in notifications) {
+//         $("#unreadChatlist").append(" \
+//             <li class='friend-item'> \
+//                 <form action='chat.php' method='get'> \
+//                     <button type='submit' \
+//                             name='chatID' \
+//                             value='"+ notifications[i].userID +"'> \
+//                         <div class='friend'> \
+//                             <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
+//                             <div class='friend-name'> \
+//                                 "+ notifications[i].name +"<br/> \
+//                                 <span style='color: #666'>"+ notifications[i].content +"</span> \
+//                             </div> \
+//                         </div> \
+//                     </button> \
+//                 </form> \
+//             </li> \
+//         ");
+//     }
+// }
+//
+// function loadNotifications() {
+//     $.post(
+//         "API/loadChatNotifications.php"
+//     ).done(function(data) {
+//         if (data && data != "[]") {
+//             $("#unread-messages-section").show();
+//             showChatNotifications(JSON.parse(data));
+//         } else {
+//             $("#unread-messages-section").hide();
+//         }
+//     });
+//
+//     setTimeout(loadNotifications, 10000);
+// }
+// $(document).ready(function() {
+//     loadNotifications();
+// });



--- a/website/public/js/profile.js
+++ b/website/public/js/profile.js
@@ -0,0 +1,8 @@
+function loadPost(postID) {
+    $.get(
+        "API/loadPost.php",
+        $(postID).serialize()
+    ).done(function (data) {
+        $('#modal-response').innerHTML= JSON.parse(data);
+    });
+}
--- a/website/public/login.php
+++ b/website/public/login.php
@@ -6,6 +6,8 @@
    include_once("../queries/login.php");
    include_once("../queries/checkInput.php");
    include_once("../queries/emailconfirm.php");
+    include_once("../queries/requestpassword.php");
+    include_once("../queries/register.php");
 ?>
 <body>
 <?php
@@ -19,17 +21,43 @@

    // Define variables and set to empty values
    $uname = $psw ="";
-    $loginErr ="";
+    $loginErr = $resetErr ="";

-    // Trying to login
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-        try{
-            $uname = ($_POST["uname"]);
-            validateLogin($_POST["uname"], $_POST["psw"]);
-        } catch(loginException $e) {
-            $loginErr = $e->getMessage();
+        switch ($_POST["submit"]) {
+            case "login":
+                try {
+                    $uname = ($_POST["uname"]);
+                    validateLogin($_POST["uname"], $_POST["psw"]);
+                } catch(loginException $e) {
+                    $loginErr = $e->getMessage();
+                }
+                break;
+            case "reset":
+                try {
+                    resetEmail($_POST["forgotEmail"]);
+                    sendPasswordRecovery($_POST["forgotEmail"]);
+                } catch (emailException $e){
+                    $resetErr = $e->getMessage();
+                    echo "<script>
+                            window.onload = function() {
+                              $('#myModal').show();
+                            }
+                          </script>";
+                }
+                break;
+
        }
    }
+//    // Trying to login
+//    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+//        try{
+//            $uname = ($_POST["uname"]);
+//            validateLogin($_POST["uname"], $_POST["psw"]);
+//        } catch(loginException $e) {
+//            $loginErr = $e->getMessage();
+//        }
+//    }

 /* This view adds login view */
 include("../views/login-view.php");
--- a/website/public/profile.php
+++ b/website/public/profile.php
@@ -2,8 +2,12 @@
 <html>
 <head>
    <?php include("../views/head.php"); ?>
+
+    <script src="js/masonry.js"></script>
+<!--    <script src="js/profile.js"></script>-->
    <style>
        @import url("styles/profile.css");
+        @import url("styles/post-popup.css");
    </style>
 </head>
 <body>
@@ -11,6 +15,7 @@
 include("../queries/user.php");
 include("../queries/friendship.php");
 include("../queries/nicetime.php");
+include("../queries/post.php");

 if(empty($_GET["username"])) {
    $userID = $_SESSION["userID"];
@@ -26,8 +31,10 @@ $posts = selectAllUserPosts($userID);

 if ($userID == $_SESSION["userID"]) {
    $friendship_status = -1;
+    $masonry_mode = 1;
 } else {
    $friendship_status = $user["friend_status"];
+    $masonry_mode = 0;
 }

 /*
@@ -52,7 +59,7 @@ include("../views/footer.php");
        userID = <?= $userID ?>;
        placeFriendButtons();

-        masonry();
+        masonry(<?= $masonry_mode ?>);
 //        alert("blap");
 //        $.post("API/getPosts.php", { usr : userID }, "json")
 //            .done(function(data) {
--- a/website/public/resetpassword.php
+++ b/website/public/resetpassword.php
@@ -0,0 +1,57 @@
+<?php
+include_once("../queries/connect.php");
+include_once("../views/messagepage.php");
+include_once("../views/resetpassword.php");
+if ($_SERVER["REQUEST_METHOD"] == "GET") {
+    if (array_key_exists("u", $_GET) and array_key_exists("h", $_GET)) {
+        if (verifyLink($_GET["u"], $_GET["h"])) {
+            messagePage(passwordResetFields());
+        } else {
+            messagePage("Wachtwoorden komen niet overeen.");
+        }
+    } else {
+        messagePage("Ongeldige links");
+    }
+} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
+    if (verifyLink($_POST["u"], $_POST["h"])) {
+        if ($_POST["password"] == $_POST["password-confirm"]) {
+            changePassword();
+            messagePage("Wachtwoord gewijzigd");
+        } else {
+            messagePage("Ongeldige link");
+
+        }
+    }
+} else {
+    messagePage("Ongeldige link");
+
+}
+
+function changePassword() {
+    $stmt = $GLOBALS["db"]->prepare("
+        UPDATE
+            `user`
+        SET
+            `password` = :password
+        WHERE
+            `userID` = :userID
+    ");
+    $stmt->bindValue(":password", password_hash($_POST["password"], PASSWORD_DEFAULT));
+    $stmt->bindParam(":userID", $_POST["u"]);
+    $stmt->execute();
+}
+
+function verifyLink(int $userID, string $hash) {
+    $stmt = $GLOBALS["db"]->prepare("
+        SELECT
+            `password`
+        FROM 
+            `user`
+        WHERE
+            `userID` = :userID
+        ");
+    $stmt->bindParam(":userID", $userID);
+    $stmt->execute();
+    $password = $stmt->fetch()["password"];
+    return password_verify($password, $hash);
+}
--- a/website/public/styles/index.css
+++ b/website/public/styles/index.css
@@ -3,11 +3,11 @@ a.button {
    border-radius: 5px;
    color: black;
    cursor: pointer;
-    height: 50%;
    padding: 8px 20px;
-    width: 50%;
    font-family: Arial;
-    font-size: 20px;
+    font-size: 22px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }

 /* Body */
@@ -28,12 +28,13 @@ body {
 form {
    /*background-color: #a87a87;*/
    border-radius: 12px;
-    height: 75%;
+    height: 85%;
    margin: auto;
    width: 80%;
    overflow-y:auto;
 }

+
 /* inlog titel */
 h1 {
    padding: 8px;
@@ -48,6 +49,11 @@ h2 {
    font-size: 2.0em;
 }

+h3 {
+    padding: 16px;
+    text-align: center;
+    font-size: 1.5em;
+}

 input[type=text], input[type=password], input[type=email], input[type="date"] {
    box-sizing: border-box;
@@ -60,14 +66,22 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
    width: 55%;
 }

-button[type=submit] {
+.center{
+    text-align: center;
+}
+
+button {
    background-color: #C8CABD;
+    border-radius: 5px;
    color: black;
    cursor: pointer;
+    height: 50%;
+    padding: 8px 20px;
+    margin: 10px;
    font-family: Arial;
    font-size: 22px;
-    height: 30px;
-    width: 120px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }

 .error {
@@ -80,31 +94,6 @@ label {
    display: block;
 }

-.left-arrow {
-    display: inline-block;
-    position: relative;
-    background-color: #C8CABD;
-    height: 25px;
-    width: 120px;
-    padding: 3px 3px 3px 3px;
-    text-align: center;
-    border-radius: 0px 5px 5px 0px;
-    font-size: 22px;
-
-}
-.left-arrow:after {
-    content: '';
-    display: block;
-    position: absolute;
-    right: 100%;
-    top: 0;
-    bottom: 0;
-    border-top: 12px solid transparent;
-    border-right: 20px solid #C8CABD;
-    border-bottom: 12px solid transparent;
-    border-left: 0px solid transparent;
-}
-
 /* padding voor registreer container */
 .login_containerregister {
    padding: 16px;
@@ -137,24 +126,84 @@ label {
    background-repeat: repeat-x;
    background-attachment: fixed;*/
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-    height: 500px;
+    height: 400px;
    margin: 34px auto;
    overflow-y: auto;
    padding: 20px;
    width: 45%;
 }

-/*.platform {
-  width: 40%;
-  margin: 34px auto;
-}*/
-
-@-webkit-keyframes animatezoom {
-    from {-webkit-transform: scale(0)}
-    to {-webkit-transform: scale(1)}
-}
-
 ul {
    font-family: Arial;
    font-size: 16px;
 }
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    position: relative;
+    background-color: #FFFFFF;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 500px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 2px 16px;
+    background-color: #FBC02D;
+    color: black;
+}
+
+.modal-body {padding: 2px 16px;}
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #FBC02D;
+    color: black;
+}
--- a/website/public/styles/post-popup.css
+++ b/website/public/styles/post-popup.css
@@ -0,0 +1,72 @@
+/* modal based on: http://www.w3schools.com/howto/howto_css_modals.asp */
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 80px;
+    left: 256px;
+    width: calc(100% - 256px); /* Full width */
+    height: calc(100% - 80px); /* Full height */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    overflow-y: auto;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    margin: 5% auto;
+    width: 70%; /* Could be more or less, depending on screen size */
+    overflow-y: auto;
+}
+
+.modal-close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    margin: auto;
+}
+
+.modal-close:hover,
+.modal-close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-content img {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.post-header h4 {
+    font-size: 20pt;
+}
+
+.post-content {
+    margin: 30px auto;
+    width: 90%;
+}
+
+.commentfield {
+    margin-bottom: 20px;
+}
+
+.commentfield textarea {
+    width: 100%;
+}
+
+.comment {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-top: 1px solid #4CAF50;
+}
+
+.commentinfo {
+    font-size: 10pt;
+}
+
+.commentcontent {
+    margin: 5px auto;
+    width: 95%;
+}
--- a/website/public/styles/resetpassword.css
+++ b/website/public/styles/resetpassword.css
@@ -0,0 +1,17 @@
+.password-change {
+    height: 100%;
+    background-color: #FBC02D;
+    margin: auto;
+}
+
+.top-logo {
+    text-align: center;
+}
+
+.item-box {
+    margin: 30px auto auto;
+    display: block;
+}
+.password-change img {
+    width: 50%;
+}
--- a/website/public/styles/search.css
+++ b/website/public/styles/search.css
@@ -25,5 +25,5 @@
 }

 li.search-item:hover{
-    background-color: #EEE;
+    background-color: #FBC02D;
 }
--- a/website/queries/checkInput.php
+++ b/website/queries/checkInput.php
@@ -97,6 +97,18 @@ function validateEmail($variable){
    }
 }

+/* checks if an input is a valid email. */
+function resetEmail($variable){
+    if (empty($variable)) {
+        throw new emailException("Verplicht!");
+    } else if (!filter_var($variable, FILTER_VALIDATE_EMAIL)) {
+        throw new emailException("Geldige email invullen");
+    } else if (getResetEmail() == 0){
+        throw new emailException("Email bestaat niet!");
+    }
+}
+
+
 /* checks if two passwords matches. */
 function matchPassword(){
    if ($_POST["password"] != $_POST["confirmpassword"]) {
--- a/website/queries/friendship.php
+++ b/website/queries/friendship.php
@@ -1,13 +1,51 @@
 <?php

-require("connect.php");
+require_once ("connect.php");
+
+function selectFriends($userID) {
+    return selectLimitedFriends($userID, 9999);
+}
+
+function selectLimitedFriends($userID, $limit) {
+    $stmt = $GLOBALS["db"]->prepare("
+        SELECT
+            `userID`,
+            `username`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
+            IFNULL(
+                `profilepicture`,
+                '../img/avatar-standard.png'
+            ) AS profilepicture,
+            `onlinestatus`,
+            `role`
+        FROM
+            `user`
+        INNER JOIN
+            `friendship`
+        WHERE
+            (`friendship`.`user1ID` = :userID AND
+            `friendship`.`user2ID` = `user`.`userID` OR 
+            `friendship`.`user2ID` = :userID AND
+            `friendship`.`user1ID` = `user`.`userID`) AND
+            `user`.`role` != 'banned' AND
+            `friendship`.`status` = 'confirmed'
+        LIMIT :limitCount
+    ");
+
+    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
+    $stmt->bindParam(':limitCount', $limit, PDO::PARAM_INT);
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
+}
+

 function selectAllFriends($userID) {
    $stmt = $GLOBALS["db"]->prepare("
        SELECT
            `userID`,
            `username`,
-            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `name`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
            IFNULL(
                `profilepicture`,
                '../img/avatar-standard.png'
@@ -39,22 +77,7 @@ function selectAllFriendRequests() {
        SELECT
            `userID`,
            `username`,
-            CASE `status` IS NULL
-              WHEN TRUE THEN 0
-              WHEN FALSE THEN
-                CASE `status` = 'confirmed'
-                WHEN TRUE THEN
-                  1
-                WHEN FALSE THEN
-                  CASE `user1ID` = :userID
-                  WHEN TRUE THEN
-                    2
-                  WHEN FALSE THEN
-                    3
-                  END
-                END
-            END AS `friend_state`,
-            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `name`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
            IFNULL(
                `profilepicture`,
                '../img/avatar-standard.png'
--- a/website/queries/group_member.php
+++ b/website/queries/group_member.php
@@ -1,6 +1,10 @@
 <?php

 function selectAllGroupsFromUser($userID) {
+    selectLimitedGroupsFromUser($userID, 9999);
+}
+
+function selectLimitedGroupsFromUser($userID, $limit) {
    $stmt = $GLOBALS["db"]->prepare("
    SELECT
        `group_page`.`name`,
@@ -13,10 +17,13 @@ function selectAllGroupsFromUser($userID) {
        `group_member`.`userID` = :userID AND
        `group_member`.`groupID` = `group_page`.`groupID` AND
        `group_page`.`status` != 'hidden'
+    LIMIT :limitCount
    ");

    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
+    $stmt->bindParam(':limitCount', $limit, PDO::PARAM_INT);
    $stmt->execute();

-    return $stmt;
+    return json_encode($stmt->fetchAll());
 }
+
--- a/website/queries/post.php
+++ b/website/queries/post.php
@@ -0,0 +1,97 @@
+<?php
+
+function selectPostById($postID) {
+    $stmt = $GLOBALS["db"]->prepare("
+        SELECT
+            `user`.`fname`,
+            `user`.`lname`,
+            `user`.`username`,
+            `post`.`groupID`,
+            `post`.`title`,
+            `post`.`content`,
+            `post`.`creationdate`
+        FROM
+            `post`
+        INNER JOIN
+            `user`
+        ON
+            `post`.`author` = `user`. `userID`
+        WHERE
+            `post`.`postID` = :postID
+    ");
+
+    $stmt->bindParam(':postID', $postID);
+    $stmt->execute();
+    return $stmt;
+}
+
+function selectCommentsByPostId($postID) {
+    $stmt = $GLOBALS["db"]->prepare("
+        SELECT
+            `comment`.`commentID`,
+            `comment`.`postID`,
+            `comment`.`author`,
+            `comment`.`content`,
+            `comment`.`creationdate`,
+            `user`.`fname`,
+            `user`.`lname`,
+            `user`.`username`
+        FROM
+            `comment`
+        INNER JOIN
+            `user`
+        ON
+            `comment`.`author` = `user`.`userID`
+        WHERE
+            `comment`.`postID` = :postID
+    ");
+
+    $stmt->bindParam(':postID', $postID);
+    $stmt->execute();
+    return $stmt;
+}
+
+function makePost($userID, $groupID, $title, $content) {
+    $stmt = $GLOBALS["db"]->prepare("
+        INSERT INTO
+            `post` (
+                `author`,
+                `groupID`,
+                `title`,
+                `content`
+            )
+            VALUES (
+                :userID,
+                :groupID,
+                :title,
+                :content
+            )
+    ");
+
+    $stmt->bindParam(':userID', $userID);
+    $stmt->bindParam(':groupID', $groupID);
+    $stmt->bindParam(':title', $title);
+    $stmt->bindParam(':content', $content);
+    $stmt->execute();
+}
+
+function makeComment($postID, $userID, $content) {
+    $stmt = $_GLOBAL["db"]->prepare("
+        INSERT INTO
+            `comment` (
+                `postID`, 
+                `author`, 
+                `content`
+            ) 
+            VALUES (
+                :postID,
+                :userID,
+                :content
+            )
+    ");
+
+    $stmt->bindParam(':postID', $postID);
+    $stmt->bindParam(':userID', $userID);
+    $stmt->bindParam(':content', $content);
+    $stmt->execute();
+}
--- a/website/queries/private_message.php
+++ b/website/queries/private_message.php
@@ -79,11 +79,11 @@ function getNewChatMessages($lastID, $destination) {
 function selectAllUnreadChat() {
    $stmt = $GLOBALS["db"]->prepare("
    SELECT
-      LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `name`,
+      LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
      `user`.`userID`,
      IFNULL(
-        `profilepicture`,
-        '../img/notbad.jpg'
+          `profilepicture`,
+          '../img/notbad.jpg'
      ) AS profilepicture,
      LEFT(`private_message`.`content`, 15) as `content`
    FROM
@@ -93,15 +93,18 @@ function selectAllUnreadChat() {
    WHERE
      (`friendship`.user2ID = `private_message`.`origin` AND
       `friendship`.user1ID = `private_message`.`destination` AND
-       `friendship`.chatLastVisted1 < `private_message`.`creationdate` OR
+       (`friendship`.chatLastVisted1 < `private_message`.`creationdate` OR
+       `friendship`.chatLastVisted1 IS NULL) OR
       `friendship`.user1ID = `private_message`.`origin` AND
-      `friendship`.user2ID = `private_message`.`destination` AND
-       `friendship`.chatLastVisted2 < `private_message`.`creationdate`) AND
+       `friendship`.user2ID = `private_message`.`destination` AND
+       (`friendship`.chatLastVisted2 < `private_message`.`creationdate` OR
+       `friendship`.chatLastVisted2 IS NULL)) AND
      `private_message`.`origin` = `user`.`userID` AND
      `private_message`.`destination` = :userID AND
      `user`.`role` != 'banned'
    
    GROUP BY `user`.`userID`
+
    ");

    $stmt->bindParam(':userID', $_SESSION["userID"]);
--- a/website/queries/register.php
+++ b/website/queries/register.php
@@ -32,6 +32,22 @@ function getExistingEmail() {

 }

+function getResetEmail() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `email`
+    FROM
+      `user`
+    WHERE
+      `email` LIKE :email
+    ");
+
+    $stmt->bindParam(":email", $_POST["forgotEmail"]);
+    $stmt->execute();
+    return $stmt->rowCount();
+
+}
+
 function registerAccount() {
    $stmt = $GLOBALS["db"]->prepare("
    INSERT INTO
--- a/website/queries/requestpassword.php
+++ b/website/queries/requestpassword.php
@@ -0,0 +1,54 @@
+<?php
+include_once "../queries/connect.php";
+
+function sendPasswordRecovery(string $email) {
+    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $stmt = $GLOBALS["db"]->prepare("
+        SELECT 
+            `userID`,
+            `username`
+        FROM 
+            `user`
+        WHERE 
+            `email` = :email
+        ");
+        $stmt->bindParam(":email", $email);
+        $stmt->execute();
+        if (!$stmt->rowCount()) {
+            return;
+        }
+        $result = $stmt->fetch();
+        $userID = $result["userID"];
+        $username = $result["username"];
+        $hash = md5(random_int(0, 1000000));
+        $hashedHash = password_hash($hash, PASSWORD_DEFAULT);
+        setHashToDatabase($userID, $hash);
+        doSendPasswordRecovery($userID, $email, $username, $hashedHash);
+    } else {
+        // TODO: Be angry!
+    }
+}
+
+function doSendPasswordRecovery(int $userID, string $email, string $username, string $hash) {
+    $resetLink = "https://myhyvesbookplus.nl/resetpassword.php?u=$userID&h=$hash";
+
+    $subject = "Reset uw wachtwoord";
+    $body = "Hallo $username,\r\n\r\nKlik op de onderstaande link om uw wachtwoord te resetten.\r\n\r\n$resetLink\r\n\r\nGroeten MyHyvesbook+";
+    $header = "From: MyHyvesbook+ <noreply@myhyvesbookplus.nl>";
+    mail($email, $subject, $body, $header);
+}
+
+function setHashToDatabase(int $userID, string $hash) {
+    $stmt = $GLOBALS["db"]->prepare("
+    UPDATE
+        `user`
+    SET
+        `password` = :hash
+    WHERE
+        `userID` = :userID
+    ");
+    $stmt->bindParam(":hash", $hash);
+    $stmt->bindParam(":userID", $userID);
+    $stmt->execute();
+    return $stmt->rowCount();
+}
--- a/website/queries/user.php
+++ b/website/queries/user.php
@@ -323,7 +323,10 @@ function searchSomeUsers($n, $m, $search)
    $stmt = $GLOBALS["db"]->prepare("
    SELECT
        `username`,
-        `profilepicture`,
+        IFNULL(
+            `profilepicture`,
+            '../img/notbad.jpg'
+        ) AS profilepicture,
        `fname`,
        `lname`
    FROM
--- a/website/views/chat-view.php
+++ b/website/views/chat-view.php
@@ -16,7 +16,7 @@

                    // Set default values of a friend.
                    $username = $friend["username"];
-                    $name = $friend["name"];
+                    $name = $friend["fullname"];
                    $userID = $friend["userID"];
                    $pf = "img/avatar-standard.png";

@@ -37,9 +37,8 @@
                        </li>
                    ";
                }
-
-                $chatID = $_GET["chatID"];
-                if (isset($chatID) && $chatID != "") {
+                if (isset($_GET["username"]) && $_GET["username"] != "") {
+                    $chatID = $_GET["username"];
                    echo "<script>$(document).ready(function(){switchUser('$chatID')});</script>";
                }
                ?>
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -2,6 +2,7 @@
 <title>MyHyvesbook+</title>
 <!-- Add your javascript files here. -->
 <script src="js/jquery.js"></script>
+<script src="js/main.js"></script>
 <script src="js/header.js"></script>
 <script src="js/menu.js"></script>
 <script src="js/notifications.js"></script>
--- a/website/views/login-view.php
+++ b/website/views/login-view.php
@@ -7,8 +7,9 @@
    <h1>Welkom bij MyHyvesbook+</h1>
    <!-- Login content  -->
    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
-          return= $correct
-          method="post">
+          return=$correct
+          method="post"
+          name="login">

        <!-- Login name -->
        <div class="login_containerlogin">
@@ -37,15 +38,79 @@
        <!-- Button for logging in -->
        <div class="login_containerlogin">
            <button type="submit"
-                   value="Login"
-                   name="submit"
-                   id="frm1_submit">
-            Login
+                    value="login"
+                    name="submit"
+                    id="frm1_submit">
+            Inloggen
            </button>
        </div>
    </form>
+</div>
+
    <!-- Button for going to the register screen -->
    <div class="login_containerlogin">
-      <a href="https://myhyvesbookplus.nl/register" class="button">Registreer een account</a>
+        <a href="https://myhyvesbookplus.nl/register" class="button">Registreer een account</a>
+
+        <!-- Trigger/Open The Modal -->
+        <button id="myBtn" class="button">Wachtwoord vergeten</button>
+
+        <!-- The Modal -->
+        <div id="myModal" class="modal">
+            <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+                  return= $correct
+                  method="post"
+                  name="forgotPassword">
+
+            <!-- Modal content -->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <span class="close">&times;</span>
+                    <h3>Voer uw emailadres in</h3>
+                </div>
+                <div class="modal-body">
+                    <input type="text"
+                           placeholder="Voer uw email in"
+                           name="forgotEmail"
+                           title="Voer een email in">
+                </div>
+                <div class="modal-footer">
+                    <div class="login_containerfault"><span><?php echo $resetErr; ?></span></div>
+                    <button type="submit"
+                            value="reset"
+                            name="submit"
+                            id="frm1_submit">
+                        Reset password
+                    </button>
+                </div>
+            </div>
+
+            </form>
+        </div>
    </div>
-</div>
+<script>
+    // Get the modal
+    var modal = document.getElementById('myModal');
+
+    // Get the button that opens the modal
+    var btn = document.getElementById("myBtn");
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks the button, open the modal
+    btn.onclick = function() {
+        modal.style.display = "block";
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+        modal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+</script>
--- a/website/views/login_head.php
+++ b/website/views/login_head.php
@@ -7,7 +7,7 @@
    <link rel="stylesheet"
          type="text/css"
          href="styles/index.css">
-    <script src="js/jqeury.js"></script>
+    <script src="js/jquery.js"></script>
    <script src="js/registerAndLogin.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
 </head>
--- a/website/views/menu.php
+++ b/website/views/menu.php
@@ -1,134 +1,25 @@
 <nav class="menu">
    <section id="friends-menu-section">
-        <?php
-
-        // Load file.
-        require_once("../queries/friendship.php");
-        require_once("../queries/user.php");
-
-        // Get confirmed friends of the user and a random non-friend.
-        $friends = selectAllFriends($_SESSION["userID"])->fetchAll();
-        $randomUser = selectRandomNotFriendUser($_SESSION["userID"])["username"];
-        $i = 0;
-
-        if (sizeof($friends) == 0) {
-            echo "
-                <ul class=\"nav-list\"><li class='friend-item'>
-                    <form action='profile.php' method='get'>
-                        <button type='submit'
-                                name='username'
-                                value='$randomUser'>
-                            <div class='friend'>
-                                Maak nieuwe vrienden :)
-                            </div>
-                        </button>
-                    </form>
-                </li><ul class=\"nav-list\">
-            ";
-        } else {
-            echo "
-                <h4>
-                    Vrienden
-                </h4>
-                <ul class=\"nav-list\">
-            ";
-
-            foreach ($friends as $i => $friend) {
-                $username = $friend["username"];
-                $name = $friend["name"];
-                $extraItem = "";
-                $pf = $friend["profilepicture"];
-
-                if ($i >= 5)
-                    $extraItem = "extra-menu-items";
-
-                echo "
-                    <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'/>
-                                    <div class='friend-name'>
-                                        $name<br/>
-                                        <span style='color: #666'>$username</span>
-                                    </div>
-                                </div>
-                            </button>
-                        </form>
-                    </li>
-                ";
-            }
-
-            if (sizeof($friends) > 5) {
-                echo "
-                    <li class='more-item' id='more-friends-click'>
-                        Meer vrienden..
-                    </li> 
-                ";
-            }
-        }
-        ?>
+        <h4>
+            Vrienden
+        </h4>
+        <ul id="menu-friends-list" class="nav-list">
+        </ul>
+        <h4><form action="search.php">
+            <input type="hidden"
+                   value="friends"
+                   name="filter" />
+            <button value=""
+                    name="search">
+                Alle vrienden...
+            </button>
+        </form></h4>
    </section>
    <section id="groups-menu-section">
-        <?php
-
-        // Load file.
-        require_once("../queries/group_member.php");
-
-        // Get all the friends of a user.
-        $groups = selectAllGroupsFromUser($_SESSION["userID"]);
-
-        if (sizeof($groups) > 0) {
-            echo "
-                    <h4>
-                        Groepen
-                    </h4>
-                    <ul class=\"nav-list\">
-                ";
-
-            foreach ($groups as $i => $group) {
-                // Set default values of a friend.
-                $name = $group["name"];
-                $extraItem = "";
-                $picture = $group["picture"];
-
-                // Change values if needed.
-                if ($i > 3)
-                    $extraItem = "extra-menu-items";
-
-                echo "
-                    <li class='group-item $extraItem'>
-                        <form action='group.php' method='get'>
-                            <button type='submit'
-                                    name='groupname'
-                                    value='$name'>
-                                <div class='group'>
-                                    <img alt='PF' class='group-picture' src='$picture'/>
-                                    $name
-                                </div>
-                            </button>
-                        </form>
-                    </li>
-                ";
-            }
-
-            if (sizeof($groups) > 3) {
-                echo "
-                        <li class='more-item' id='more-groups-click'>
-                            Meer groepen..
-                        </li> 
-                    ";
-            }
-        }
-        ?>
-    </section>
-    <section>
-        <ul>
-            <li class="more-item" id="menu-back">
-                Terug naar het overzicht
-            </li>
+        <h4>
+            Groepen
+        </h4>
+        <ul id="menu-groups-list" class="nav-list">
        </ul>
    </section>
 </nav>
--- a/website/views/messagepage.php
+++ b/website/views/messagepage.php
@@ -0,0 +1,23 @@
+<?php 
+function messagePage(string $content) {
+    $webpage = ("
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <style>
+            @import url(styles/main.css);
+            @import url(styles/settings.css);
+            @import url(styles/resetpassword.css);
+        </style>
+    </head>
+    <body>
+    <div class='password-change'>
+        <div class='top-logo'><a href='login.php'><img src='img/top-logo.png' alt='MyHyvesbook+'/></a></div>
+        <div class='item-box platform'>$content</div>
+    </div>
+    </body>
+    </html>
+    ");
+
+    echo $webpage;
+    }
--- a/website/views/notification-center.php
+++ b/website/views/notification-center.php
@@ -5,19 +5,19 @@
        <a href="profile.php"><i class="fa fa-user" data-title="Profiel"></i></a>
        <a href="logout.php"><i class="fa fa-sign-out" data-title="Uitloggen"></i></a>
    </section>
-    <section>
+    <section id="friend-request-section">
        <h4>
            Vriendchapsverzoeken
        </h4>
-        <ul class="nav-list" id="friendrequestslist">
+        <ul class="nav-list" id="friend-requests-list">

        </ul>
    </section>
-    <section>
+    <section id="unread-messages-section">
        <h4>
            Nieuwe berichten
        </h4>
-        <ul class="nav-list" id="unreadChatlist">
+        <ul class="nav-list" id="unread-chat-list">

        </ul>
    </section>
--- a/website/views/post-view.php
+++ b/website/views/post-view.php
@@ -0,0 +1,52 @@
+<?php
+$postID = $_GET['postID'];
+$post = selectPostById($postID)->fetch(PDO::FETCH_ASSOC);
+$fullname = $post['fname'] . " " . $post['lname'] . " (" . $post['username'] . ")";
+
+echo("
+<div class='post-header header'>
+    <h4>" . $post['title'] . "</h4>
+    <span class='postinfo'>
+        gepost door $fullname,
+            <span class='posttime' title='" . $post['creationdate'] . "'>
+                " . nicetime($post['creationdate']) . "
+            </span>
+    </span>
+</div>
+
+<div class='post-content'>
+    <p>" . $post['content'] . "</p>
+</div>
+"); ?>
+
+<div class='post-comments'>
+    <div class="commentfield">
+        <form name="newcomment" method="post">
+            <textarea placeholder="Laat een reactie achter..."></textarea> <br>
+            <input type="submit" value="Reageer!">
+        </form>
+    </div>
+
+    <?php
+    $q = selectCommentsByPostId($postID);
+    while($comment = $q->fetch(PDO::FETCH_ASSOC)) {
+        $commentauthor = $comment['fname'] . " " . $comment['lname'] . " (" . $comment['username'] . ")";
+        $commentdate = $comment['creationdate'];
+        $commentnicetime = nicetime($commentdate);
+        $commentcontent = $comment['content'];
+
+        echo("
+        <div class='comment'>
+            <div class='commentinfo'>
+                $commentauthor
+                <span class='commentdate', title='$commentdate'>
+                    $commentnicetime
+                </span>
+            </div>
+            <div class='commentcontent'>
+                $commentcontent
+            </div>
+        </div>
+        ");
+    } ?>
+</div>
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -43,6 +43,7 @@
    </div>

    <div class="posts">
+
 <!--        --><?php
 //            if ($_SESSION["userID"] === $userID) {
 //         ?>
@@ -67,5 +68,47 @@
 //                ";
 //            }
 //        ?>
+<!--        --><?php
+//            if ($_SESSION["userID"] === $userID) {
+//         ?>
+<!--                <div class="post platform">-->
+<!--                    <form>-->
+<!--                        <input type="text" class="newpost" placeholder="Titel">-->
+<!--                        <textarea class="newpost" placeholder="Schrijf een berichtje..."></textarea>-->
+<!--                        <input type="submit" value="Plaats!">-->
+<!--                    </form>-->
+<!--                </div>-->
+<!--        --><?php
+//            }
+//
+//            while($post = $posts->fetch()) {
+//                $nicetime = nicetime($post["creationdate"]);
+//                $postID = $post["postID"];
+//                echo "
+//                    <div class='post platform' onclick='requestPost(this)'>
+//                        <h2>${post["title"]}</h2>
+//                        <p>${post["content"]}</p>
+//                        <p class=\"subscript\" title='" . $post["creationdate"] ."'>${nicetime} geplaatst.</p>
+//                        <form>
+//                            <input type='hidden'
+//                                   name='postID'
+//                                   value='$postID'
+//                            />
+//                        </form>
+//                    </div>
+//                ";
+//            }
+//        ?>
+    </div>
+
+    <div class="modal">
+        <div class="modal-content platform">
+            <div class="modal-close">
+                &times;
+            </div>
+            <div class="modal-response" id="modal-response">
+                <span class="modal-default">Aan het laden...</span>
+            </div>
+        </div>
    </div>
 </div>
--- a/website/views/register-view.php
+++ b/website/views/register-view.php
@@ -126,7 +126,7 @@
        <!-- Button for registering -->
        <div class="login_containerlogin">
            <!-- Button for going back to login screen -->
-            <a href="https://myhyvesbookplus.nl/login.php" class="left-arrow">Login</a>
+            <a href="https://myhyvesbookplus.nl/login.php" class="button">Annuleren</a>

            <button type="submit"
                   value="Registreer uw account"
--- a/website/views/resetpassword.php
+++ b/website/views/resetpassword.php
@@ -0,0 +1,38 @@
+<?php
+function passwordResetFields() {
+    $username = $_GET['u'];
+    $hash = $_GET['h'];
+    $content ="
+    <form class='settings' method = 'post' >
+        <h5 > Voer een nieuw wachtwoord in </h5 >
+        <input type = 'hidden'
+               name = 'u'
+               value = '$username'
+                   >
+        <input type = 'hidden'
+               name = 'h'
+               value = '$hash'
+                   >
+        <ul >
+            <li >
+                <label > Nieuw wachtwoord </label >
+                <input type = 'password'
+                       name = 'password'
+                       placeholder = 'Nieuw wachtwoord'
+                           >
+            </li >
+            <li >
+                <label > Bevestig wachtwoord </label >
+                <input type = 'password'
+                       name = 'password-confirm'
+                       placeholder = 'Bevestig wachtwoord'
+                           >
+            </li >
+            <li >
+                <label ></label >
+                <button type = 'submit' > Verander wachtwoord </button >
+            </li >
+        </ul >
+    </form >";
+    return $content;
+}
--- a/website/views/search-view.php
+++ b/website/views/search-view.php
@@ -38,7 +38,7 @@ $group_count = countSomeGroups($search)->fetchColumn();
            </label>
            <input type="text"
                   name="search"
-                   placeholder="zoek"
+                   placeholder="Zoek"
                   value=<?php echo "$search";?>
            >
            <label for="filter">