Favicon

Lars

See merge request !206

website/public/.htaccess

@@ -1,7 +1,7 @@
 Options +FollowSymLinks
 RewriteEngine On
 
-ErrorDocument 404 /error404.jpg
+ErrorDocument 404 /error/404.php
 
 RewriteCond %{SCRIPT_FILENAME} !-d
 RewriteCond %{SCRIPT_FILENAME} !-f

website/public/API/adminChangeUser.php

@@ -0,0 +1,31 @@
+<?php
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/group_page.php");
+require_once ("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    (getRoleByID($_SESSION["userID"]) == 'admin' ||
+     getRoleByID($_SESSION["userID"]) == 'owner')) {
+    $userinfo = getRoleByID($_SESSION['userID']);
+
+    if (isset($_POST["actions"]) && isset($_POST["userID"])) {
+        changeUserStatusByID($_POST["userID"], $_POST["actions"]);
+    } else if (isset($_POST["actions"]) && isset($_POST["groupID"])) {
+        changeGroupStatusByID($_POST["groupID"], $_POST["actions"]);
+    } else if (isset($_POST["batchactions"]) && isset($_POST["checkbox-user"])) {
+        if ($userinfo == 'owner') {
+            changeMultipleUserStatusByID($_POST["checkbox-user"], $_POST["batchactions"]);
+        } else {
+            changeMultipleUserStatusByIDAdmin($_POST["checkbox-user"], $_POST["batchactions"]);
+        }
+    } else if (isset($_POST["groupbatchactions"]) && isset($_POST["checkbox-group"])) {
+        changeMultipleGroupStatusByID($_POST["checkbox-group"], $_POST["groupbatchactions"]);
+    } else if (isset($_POST['bancommentuserID']) && isset($_POST['bancommenttext'])) {
+        editBanCommentByID($_POST['bancommentuserID'], $_POST['bancommenttext']);
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/adminPageNumber.php

@@ -0,0 +1,44 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/user.php");
+require_once ("../../queries/group_page.php");
+
+if (isset($_SESSION["userID"]) &&
+    (getRoleByID($_SESSION["userID"]) == 'admin' ||
+     getRoleByID($_SESSION["userID"]) == 'owner')) {
+    $search = "";
+    if (isset($_POST["search"])) {
+        $search = test_input($_POST["search"]);
+    }
+
+    $pagetype = "user";
+    if (isset($_POST['pagetype'])) {
+        $pagetype = test_input($_POST['pagetype']);
+    }
+
+    $status = array();
+    if (isset($_POST['status'])) {
+        $status = $_POST["status"];
+    }
+
+    $groupstatus = array();
+    if (isset($_POST['groupstatus'])) {
+        $groupstatus = $_POST["groupstatus"];
+    }
+
+    $entries = 20;
+    $currentpage = 1;
+    if (isset($_POST['currentpage'])) {
+        $currentpage = (int) test_input($_POST["currentpage"]);
+    }
+
+    $offset = (int) $currentpage * $entries - $entries;
+
+    include ("../../views/adminpanel-page.php");
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/adminSearchUsers.php

@@ -0,0 +1,50 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/user.php");
+require_once ("../../queries/group_page.php");
+
+if (isset($_SESSION["userID"]) &&
+    (getRoleByID($_SESSION["userID"]) == 'admin' ||
+     getRoleByID($_SESSION["userID"]) == 'owner')) {
+    $offset = 0;
+    $entries = 20;
+    if (isset($_POST["currentpage"])) {
+        $offset = (int)test_input($_POST["currentpage"]) * $entries - $entries;
+    }
+
+    $search = "";
+    if (isset($_POST["search"])) {
+        $search = test_input($_POST["search"]);
+    }
+
+    $pagetype = "user";
+    if (isset($_POST['pagetype'])) {
+        $pagetype = test_input($_POST['pagetype']);
+    }
+
+    $status = array();
+    if (isset($_POST['status'])) {
+        $status = $_POST["status"];
+    }
+
+    $groupstatus = array();
+    if (isset($_POST['groupstatus'])) {
+        $groupstatus = $_POST["groupstatus"];
+    }
+
+    $userinfo = getRoleByID($_SESSION['userID']);
+
+    if ($pagetype == "user") {
+        include("../../views/adminpanel-table.php");
+    } else if ($pagetype == "group") {
+        include("../../views/adminpanel-grouptable.php");
+    } else {
+        echo "Search failed!";
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/deletePost.php

@@ -0,0 +1,20 @@
+<?php
+session_start();
+
+require_once "../../queries/post.php";
+require_once "../../queries/user.php";
+if (!isset($_SESSION["userID"])) {
+    echo "logged out";
+} else if (getRoleByID($_SESSION["userID"]) != 'frozen' and
+           getRoleByID($_SESSION["userID"]) != 'banned') {
+
+    if (empty($_POST["postID"]) or empty($_SESSION["userID"])) {
+        header('HTTP/1.1 500 Non enough arguments');
+    }
+
+    deletePost($_POST["postID"], $_SESSION["userID"]);
+    return;
+
+} else {
+    echo "frozen";
+}

website/public/API/editFriendship.php

@@ -0,0 +1,34 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/friendship.php");
+require_once("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'frozen' &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    if (empty($_POST["usr"]) OR empty($_POST["action"]) OR !in_array($_POST["action"], array("request", "accept", "delete"))) {
+        header('HTTP/1.1 500 Non enough arguments');
+    }
+
+    $friendship_status = getFriendshipStatus($_POST["usr"]);
+
+    if ($_POST["action"] == "request" AND $friendship_status == 0) {
+        if (!requestFriendship($_POST["usr"])) {
+            header('HTTP/1.1 500 Query (request) failed');
+        }
+    } else if ($_POST["action"] == "delete" AND in_array($friendship_status, array(1, 2, 3))) {
+        if (!removeFriendship($_POST["usr"])) {
+            header('HTTP/1.1 500 Query (delete) failed');
+        }
+    } else if ($_POST["action"] == "accept" AND $friendship_status == 3) {
+        if (!acceptFriendship($_POST["usr"])) {
+            header('HTTP/1.1 500 Query (accept) failed');
+        }
+    } else {
+        header('HTTP/1.1 500 Not the right friendship status');
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/editMembership.php

@@ -0,0 +1,40 @@
+<?php
+
+session_start();
+
+if(empty($_POST["grp"]) or empty($_POST["role"])) {
+    header('HTTP/1.1 500 Non enough arguments');
+}
+
+if(in_array($_POST["role"], array('request', 'member', 'banned', 'mod', 'admin'))) {
+    header('HTTP/1.1 500 Wrong argument given for role');
+}
+
+require_once ("../../queries/group_member.php");
+require_once ("../../queries/group_page.php");
+require_once ("../../queries/group_member.php");
+
+$currentRole = selectGroupRole($_POST["grp"]);
+$groupStatus = selectGroupStatus($_POST["grp"]);
+echo "role: $currentRole status: $groupStatus ";
+
+if($_POST["role"] == 'request' and $currentRole == 'none') {
+    if($groupStatus = 'public') {
+        // Add member to public group
+        addMember($_POST["grp"], $_SESSION["userID"], 'member');
+        echo "ADDED";
+    } else if($groupStatus = 'membersonly') {
+        // Send request to members only group
+        addMember($_POST["grp"], $_SESSION["userID"], 'request');
+    } else {
+        // Can't invite yourself to hidden groups
+        header('HTTP/1.1 500 This group is hidden');
+    }
+    header('HTTP/1.1 200');
+} else if($_POST["role"] == 'none' and $currentRole != 'none') {
+    // Remove yourself from a group
+    deleteMember($_POST["grp"], $_SESSION["userID"]);
+} else {
+    echo "failure";
+    header('HTTP/1.1 500 Wrong argument given for role');
+}

website/public/API/getFriendshipStatus.php

@@ -0,0 +1,30 @@
+<?php
+
+# -2: Query failed.
+# -1: user1 and 2 are the same user
+# 0 : no record found
+# 1 : confirmed
+# 2 : user1 sent request (you)
+# 3 : user2 sent request (other)
+
+session_start();
+
+require_once ("../../queries/friendship.php");
+require_once("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    if (empty($_POST["usr"])) {
+        header('HTTP/1.1 500 Non enough arguments');
+    }
+
+    $friendship_status = getFriendshipStatus($_POST["usr"]);
+
+    if ($friendship_status == -2) {
+        header('HTTP/1.1 500 Query failed');
+    }
+
+    echo $friendship_status;
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/getGrouprole.php

@@ -0,0 +1,12 @@
+<?php
+
+session_start();
+
+if(empty($_POST["grp"])) {
+    header('HTTP/1.1 500 Non enough arguments');
+}
+
+require_once("../../queries/group_page.php");
+
+echo selectGroupRole($_POST["grp"]);
+

website/public/API/getPosts.php

@@ -0,0 +1,37 @@
+<?php
+
+if(!isset($_POST["offset"]) or !isset($_POST["limit"])) {
+    header('HTTP/1.1 500 Not enough arguments');
+}
+if(!isset($_POST["usr"]) and !isset($_POST["grp"])) {
+    header('HTTP/1.1 500 Not enough arguments');
+}
+
+session_start();
+
+require_once ("../../queries/post.php");
+require_once ("../../queries/nicetime.php");
+require_once("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    if(empty($_POST["usr"])) {
+        $posts = selectSomePosts(0, $_POST["grp"], $_POST["offset"], $_POST["limit"]);
+    } else {
+        $posts = selectSomePosts($_POST["usr"], 0, $_POST["offset"], $_POST["limit"]);
+    }
+
+    if(!$posts) {
+        echo false;
+    } else {
+        $results = $posts->fetchAll(PDO::FETCH_ASSOC);
+
+        for($i = 0; $i < sizeof($results); $i++) {
+            $results[$i]["nicetime"] = nicetime($results[$i]["creationdate"]);
+        }
+
+        echo json_encode($results);
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/loadChatNotifications.php

@@ -0,0 +1,15 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/private_message.php");
+require_once("../../queries/user.php");
+
+// Check if the user is allowed to load them.
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    echo selectAllUnreadChat();
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/loadFriendRequest.php

@@ -0,0 +1,16 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+require_once ("../../queries/user.php");
+
+// Check if the user is allowed to load them.
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'frozen' &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    echo selectAllFriendRequests();
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/loadFriends.php

@@ -0,0 +1,28 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/friendship.php");
+require_once("../../queries/user.php");
+
+// Check if the user is allowed to load them.
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    if (isset($_SESSION["userID"])) {
+        // Echo the limited or unlimited users.
+        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"]);
+        }
+    } else {
+        echo "[]";
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}
+

website/public/API/loadGroups.php

@@ -0,0 +1,22 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/group_member.php");
+
+require_once("../../queries/user.php");
+
+// Check if the user is allowed to load them.
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    // Echo the limited or unlimited groups.
+    if (isset($_POST["limit"])) {
+        echo selectLimitedGroupsFromUser($_SESSION["userID"], (int)test_input($_POST["limit"]));
+    } else {
+        echo selectAllGroupsFromUser($_SESSION["userID"]);
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/loadMessages.php

@@ -5,9 +5,20 @@ session_start();
 require_once("../../queries/connect.php");
 require_once("../../queries/private_message.php");
 require_once("../../queries/checkInput.php");
+require_once("../../queries/friendship.php");
+require_once("../../queries/user.php");
 
-if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
+// Check if the user is allowed to get the messages.
-    echo getNewChatMessages(test_input($_POST["lastID"]), test_input($_POST["destination"]));
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    // Check if the users wants new messages or old ones, and give the right one back.
+    if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
+        setLastVisited(test_input($_POST["destination"]));
+        echo getNewChatMessages(test_input($_POST["lastID"]), test_input($_POST["destination"]));
+    } else {
+        setLastVisited(test_input($_POST["destination"]));
+        echo getOldChatMessages(test_input($_POST["destination"]));
+    }
 } else {
-    echo getOldChatMessages(test_input($_POST["destination"]));
+    header('HTTP/1.0 403 Forbidden');
 }

website/public/API/loadNotifications.php

@@ -1,8 +0,0 @@
-<?php
-
-session_start();
-
-require_once ("../../queries/connect.php");
-require_once ("../../queries/friendship.php");
-
-echo selectAllFriendRequests();

website/public/API/loadPost.php

@@ -0,0 +1,21 @@
+<?php
+
+session_start();
+
+require_once("../../queries/connect.php");
+require_once("../../queries/post.php");
+require_once("../../queries/checkInput.php");
+require_once("../../queries/nicetime.php");
+
+require_once("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+    if (isset($_GET['postID'])) {
+        include("../../views/post-view.php");
+    } else {
+        echo "Kan de post niet laden";
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/postComment.php

@@ -0,0 +1,37 @@
+<?php
+
+session_start();
+
+require_once("../../queries/post.php");
+require_once("../../queries/connect.php");
+require_once("../../queries/checkInput.php");
+require_once("../../queries/user.php");
+
+if (!isset($_SESSION["userID"])) {
+    echo "logged out";
+} else if (getRoleByID($_SESSION["userID"]) != 'frozen' &&
+           getRoleByID($_SESSION["userID"]) != 'banned') {
+    if ($_POST['button'] == 'reaction') {
+        if (empty($_POST['newcomment-content'])) {
+            echo 0;
+        } else {
+            if (makeComment($_POST['postID'],
+                $_SESSION['userID'],
+                test_input($_POST['newcomment-content']))) {
+                echo 1;
+            } else {
+                echo 0;
+            }
+        }
+    } else if ($_POST['button'] == 'nietslecht') {
+        if (makeNietSlecht($_POST["postID"], $_SESSION["userID"])) {
+            echo 1;
+        } else {
+            echo 0;
+        }
+    } else {
+        echo 0;
+    }
+} else {
+    echo "frozen";
+}

website/public/API/postPost.php

@@ -0,0 +1,52 @@
+<?php
+
+session_start();
+
+require_once("../../queries/post.php");
+require_once("../../queries/group_page.php");
+require_once("../../queries/connect.php");
+require_once("../../queries/checkInput.php");
+require_once("../../queries/user.php");
+
+if (!isset($_SESSION["userID"])) {
+    echo "logged out";
+} else if (getRoleByID($_SESSION["userID"]) != 'frozen' &&
+           getRoleByID($_SESSION["userID"]) != 'banned') {
+
+    if (empty($_SESSION["userID"])) {
+        header('HTTP/1.1 500 Non enough arguments');
+    }
+
+    if (empty(test_input($_POST["title"])) or
+        empty(test_input($_POST["content"]))
+    ) {
+        echo "empty";
+    } else {
+        if (empty($_POST["group"])) {
+            // User Post
+            makePost(
+                $_SESSION["userID"],
+                null,
+                test_input($_POST["title"]),
+                test_input($_POST["content"])
+            );
+        } else {
+            // Group Post
+
+            // Check if the user is an admin or mod of the group.
+            if (!in_array(selectGroupRole($_POST["group"]), array('mod', 'admin'))) {
+                header('HTTP/1.1 500 Non enough rights');
+                return;
+            }
+
+            makePost(
+                $_SESSION["userID"],
+                $_POST["group"],
+                test_input($_POST["title"]),
+                test_input($_POST["content"])
+            );
+        }
+    }
+} else {
+    echo "frozen";
+}

website/public/API/searchGroups.php

@@ -0,0 +1,35 @@
+<?php
+
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/group_member.php");
+require_once ("../../queries/group_page.php");
+require_once ("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+
+    $n = 0;
+    if (isset($_POST["n"])) {
+        $n = (int)test_input($_POST["n"]);
+    }
+    $m = 20;
+    if (isset($_POST["m"])) {
+        $m = (int)test_input($_POST["m"]);
+    }
+    $search = "";
+    if (isset($_POST["search"])) {
+        $search = test_input($_POST["search"]);
+    }
+
+    if (isset($_POST["filter"]) && $_POST["filter"] == "personal") {
+        echo searchSomeOwnGroups($n, $m, $search);
+    } else {
+        echo searchSomeGroups($n, $m, $search);
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/searchPageNumber.php

@@ -0,0 +1,53 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/user.php");
+require_once ("../../queries/group_page.php");
+require_once ("../../queries/friendship.php");
+require_once ("../../queries/group_member.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {$user_perpage = $group_perpage = 20;
+
+    $user_currentpage = $group_currentpage = 1;
+    if (isset($_POST['user-pageselect'])) {
+        $user_currentpage = test_input($_POST['user-pageselect']);
+    }
+    if (isset($_POST['group-pageselect'])) {
+        $group_currentpage = test_input($_POST['group-pageselect']);
+    }
+
+    $user_n = $user_currentpage * $user_perpage - $user_perpage;
+    $group_n = $group_currentpage * $group_perpage - $group_perpage;
+
+    $search = "";
+    if (isset($_POST['search'])) {
+        $search = test_input($_POST['search']);
+    }
+
+    $filter = "all";
+    if (isset($_POST['filter'])) {
+        $filter = test_input($_POST['filter']);
+    }
+
+    if ($filter == "all") {
+        $user_count = countSomeUsers($search)->fetchColumn();
+        $group_count = countSomeGroups($search)->fetchColumn();
+    } else {
+        $user_count = countSomeFriends($search);
+        $group_count = countSomeOwnGroups($search);
+    }
+
+
+    $option = "user";
+    if (isset($_POST['option'])) {
+        $option = test_input($_POST['option']);
+    }
+
+    include ("../../views/searchPageNumber.php");
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/searchUsers.php

@@ -0,0 +1,35 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/friendship.php");
+require_once ("../../queries/user.php");
+
+if (isset($_SESSION["userID"]) &&
+    getRoleByID($_SESSION["userID"]) != 'banned') {
+
+    $n = 0;
+    $m = 20;
+
+    $page = 1;
+    if (isset($_POST["user-pageselect"])) {
+        $page = (int)test_input($_POST['user-pageselect']);
+    }
+
+    $n = ($page - 1) * $m;
+
+    $search = "";
+    if (isset($_POST["search"])) {
+        $search = test_input($_POST["search"]);
+    }
+
+    if (isset($_POST["filter"]) && $_POST["filter"] == "personal") {
+        echo searchSomeFriends($n, $m, $search);
+    } else {
+        echo searchSomeUsers($n, $m, $search);
+    }
+} else {
+    header('HTTP/1.0 403 Forbidden');
+}

website/public/API/sendMessage.php

@@ -4,14 +4,26 @@ session_start();
 require_once("../../queries/connect.php");
 require_once("../../queries/private_message.php");
 require_once("../../queries/checkInput.php");
+require_once("../../queries/user.php");
 
-if (!empty(test_input($_POST["destination"])) &&
+// Check if the user is allowed to send a message.
-    !empty(test_input($_POST["content"]))) {
+if (!isset($_SESSION["userID"])) {
-    if (sendMessage(test_input($_POST["destination"]), test_input($_POST["content"]))) {
+    echo "logged out";
-        echo 1;
+} else if (getRoleByID($_SESSION["userID"]) != 'frozen' &&
+           getRoleByID($_SESSION["userID"]) != 'banned') {
+    if (!empty(test_input($_POST["destination"])) &&
+        !empty(test_input($_POST["content"]))
+    ) {
+        // Send the message.
+        // Returns false when it didn't succeed sending the message.
+        if (sendMessage(test_input($_POST["destination"]), test_input($_POST["content"]))) {
+            echo 1;
+        } else {
+            echo 0;
+        }
     } else {
         echo 0;
     }
 } else {
-    echo 0;
+    echo "frozen";
 }

website/public/admin.php

@@ -1,10 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("../views/head.php"); ?>
+    <?php
+    require_once ("../queries/user.php");
+    require_once ("../queries/group_page.php");
+    require_once ("../views/head.php"); ?>
     <style>
         @import url("styles/adminpanel.css");
     </style>
+<script src="js/admin.js" charset="utf-8"></script>
 </head>
 <body>
 <?php
@@ -12,6 +16,15 @@
  * This view adds the main layout over the screen.
  * Header and menu.
  */
+include_once ("../queries/user.php");
+
+// auth
+$role = getRoleByID($_SESSION['userID']);
+
+if ($role != 'admin' AND $role != 'owner') {
+    header("location:profile.php");
+}
+
 include("../views/main.php");
 
 /* Add your view files here. */

website/public/bits/friend-item.php

@@ -0,0 +1,94 @@
+<?php
+
+session_start();
+
+include_once ("../../queries/friendship.php");
+
+// Initialize variables to given or default values.
+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 friend, return them as list item.
+foreach($friends as $i => $friend) {
+    $friendshipStatus = getFriendshipStatus($friend->userID);
+    ?>
+    <li class='friend-item'>
+        <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 <?= $friend->onlinestatus ?>' src='<?= $friend->profilepicture ?>'/>
+                    <div class='friend-name'>
+                        <?= $friend->fullname ?><br/>
+                        <span style='color: #666'><?php
+                            if (isset($friend->username)) {
+                                echo $friend->usernameshort;
+                            } else if (isset($friend->content)) {
+                                echo $friend->content;
+                            }
+                            ?></span>
+                    </div>
+                </div>
+            </button>
+        </form>
+        <?php
+        // Add friendship options if possible.
+        if ($friendshipStatus > 1) {
+            if ($friendshipStatus == 2) {
+                $denyName = "Annuleer";
+            } else {
+                $denyName = "Weiger";
+            }
+            ?>
+                <div class='notification-options'>
+            <?php
+            if ($friendshipStatus == 3) {
+                ?>
+                <button name='accept'
+                        onclick="editFriendship('<?= $friend->userID ?>', 'accept')"
+                        class='accept-notification'
+                        value='1'>
+                    <i class='fa fa-check'></i>Accepteer
+                </button>
+                <?php
+            }
+
+            ?>
+                <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> <?= $denyName ?>
+                </button>
+            </div>
+            <?php
+        }
+        ?>
+    </li>
+    <?php
+}
+
+
+?>
+
+

website/public/bits/group-item.php

@@ -0,0 +1,25 @@
+<?php
+
+session_start();
+
+include_once ("../../queries/group_member.php");
+
+$groups = json_decode($_POST["groups"]);
+
+// Add each group as list item.
+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
+}

website/public/bits/niet-slecht.php

@@ -0,0 +1,8 @@
+<?php
+if (isset($_GET["groupname"])) {
+    $url = "https://myhyvesbookplus.nl/~lars/group.php?groupname=" . $_GET["groupname"];
+} else {
+    $url = "https://myhyvesbookplus.nl/";
+}
+?>
+<a href="<?= $url ?>" target='_blank'><img style="width: 100%; height: auto;" src="../external/nietslecht_button.png" alt='\"Niet slecht\" ons op MyHyvesbook+' /></a>

website/public/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+	<browserconfig>
+		<msapplication>
+			<tile>
+				<square70x70logo src="tiny.png"/>
+				<square150x150logo src="square.jpg"/>
+				<wide310x150logo src="wide.jpg"/>
+				<square310x310logo src="large.jpg"/>
+				<TileColor>#000000</TileColor>
+			</tile>
+		</msapplication>
+	</browserconfig>

website/public/createGroup.php

@@ -0,0 +1,36 @@
+<?php
+require_once "../queries/createGroup.php";
+require_once "../queries/connect.php";
+require_once "../queries/alerts.php"?>
+<!DOCTYPE html>
+<html>
+<head>
+    <?php include("../views/head.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");
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    try {
+        createGroup();
+    } catch (AlertMessage $e) {
+
+    }
+    $groupname = $_POST["groupName"];
+    header("location: group.php?groupname=$groupname");
+}
+/* Add your view files here. */
+include("../views/createGroup.php");
+
+/* This adds the footer. */
+include("../views/footer.php");
+?>
+</body>
+</html>

website/public/emailconfirm.php

@@ -0,0 +1,49 @@
+<?php
+include_once("../queries/connect.php");
+include_once("../views/messagepage.php");
+if (array_key_exists("u", $_GET) and array_key_exists("h", $_GET)) {
+   $checkHash = prepareQuery("
+   SELECT
+      `email`,
+      `role`
+   FROM
+      `user`
+   WHERE
+      `userID` = :userID
+   ");
+   $checkHash->bindParam(":userID", $_GET["u"]);
+   $checkHash->execute();
+   $result = $checkHash->fetch();
+   $email = $result["email"];
+   $role = $result["role"];
+   if ($role == "unconfirmed") {
+       doActivate($email);
+   } else {
+        messagePage("Ongeldige link.");
+   }
+
+} else {
+    messagePage("Ongeldige link.");
+}
+
+function doActivate(string $email) {
+    if (password_verify($email, $_GET["h"])) {
+        $confirmUser = prepareQuery("
+        UPDATE
+            `user`
+        SET
+            `role` = :role
+        WHERE
+            `userID` = :userID
+        ");
+        $confirmUser->bindValue(":role", "user");
+        $confirmUser->bindParam(":userID", $_GET["u"]);
+        $confirmUser->execute();
+        if ($confirmUser->rowCount()) {
+            messagePage("Email bevestigd <br />
+            <a href='index.php'>Klik hier om terug te gaan naar de login pagina.</a>");
+        }
+    } else {
+        messagePage("Ongeldige link.");
+    }
+}

website/public/error/404.php

@@ -0,0 +1,9 @@
+<?php
+require_once "../../views/messagepage.php";
+
+messagePage("
+<div class='error-page'>
+    <h1>404</h1>
+    <h4>Verkeerde link...</h4><br />
+    <img height='25%' width='25%' src='../img/zelda.png'>
+</div>");

website/public/group.php

@@ -4,10 +4,25 @@
     <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/profile.css");
+        @import url("styles/post-popup.css");
+        @import url('https://fonts.googleapis.com/css?family=Anton');
     </style>
 </head>
 <body>
 <?php
+
+include_once("../queries/group_page.php");
+
+if(isset($_SESSION["userID"]) and !$group = selectGroupByName($_GET["groupname"])) {
+    header("HTTP/1.0 404 Not Found");
+    header("Location: error/404.php");
+    die();
+}
+
+
+$members = selectGroupMembers($group["groupID"]);
+
+
 /*
  * This view adds the main layout over the screen.
  * Header, menu, footer.
@@ -19,6 +34,26 @@ include("../views/group.php");
 
 /* This adds the footer. */
 include("../views/footer.php");
+
+$masonry_mode = 0;
+if ($group["role"] == "mod" OR $group["role"] == "admin") {
+    $masonry_mode = 2;
+}
 ?>
+
+<script src="js/masonry.js"></script>
+<script src="js/groupButtons.js"></script>
+<script src="js/post.js"></script>
+<script>
+    $(document).ready(function() {
+        userID = 0;
+        groupID = <?= $group["groupID"] ?>;
+
+        placeGroupButtons();
+
+        masonry(<?= $masonry_mode ?>);
+    });
+</script>
+
 </body>
 </html>

website/public/groupAdmin.php

@@ -0,0 +1,72 @@
+<?php
+require_once "../queries/picture.php";
+require_once "../queries/groupAdmin.php";
+require_once "../queries/alerts.php";
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <?php include("../views/head.php"); ?>
+<style>
+    /*Insert own stylesheet here ;)*/
+    @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");
+$alertClass;
+$alertMessage;
+
+// Select which button has been pressed.
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    try {
+        switch ($_POST["form"]) {
+            case "group":
+                updateGroupSettings($_POST["groupID"]);
+                break;
+            case "picture":
+                if (checkGroupAdmin($_POST["groupID"], $_SESSION["userID"])) {
+                    updateAvatar($_POST["groupID"]);
+                }
+                break;
+            case "mod":
+                if (!array_key_exists("userID", $_POST)) {
+                    throw new AngryAlert("Geen gebruiker geselecteerd.");
+                }
+                upgradeUser($_POST["groupID"], $_POST["userID"], "mod");
+                break;
+            case "admin":
+                if (!array_key_exists("userID", $_POST)) {
+                    throw new AngryAlert("Geen gebruiker geselecteerd.");
+                }
+                upgradeUser($_POST["groupID"], $_POST["userID"], "admin");
+                break;
+            case "deadmin":
+                if (!array_key_exists("userID", $_POST)) {
+                    throw new AngryAlert("Geen gebruiker geselecteerd.");
+                }
+                upgradeUser($_POST["groupID"], $_POST["userID"], "member");
+                break;
+            case "delete":
+                deleteGroup();
+                break;
+        }
+    } catch (AlertMessage $w) {
+        $alertClass = $w->getClass();
+        $alertMessage = $w->getMessage();
+    }
+}
+
+/* Add your view files here. */
+include("../views/groupAdmin.php");
+
+/* This adds the footer. */
+include("../views/footer.php");
+?>
+</body>
+</html>

website/public/index.php

@@ -1,5 +1,9 @@
-<html>
+<?php
-<head>
+
-    <meta http-equiv="refresh" content="0; url=login.php" />
+session_start();
-</head>
+
-</html>
+if (isset($_SESSION["userID"])) {
+    header("Location: profile.php");
+} else {
+    header("Location: login.php");
+}

website/public/js/admin.js

@@ -1,44 +1,116 @@
-window.onload = function() {
+$(window).on("load", function () {
     changeFilter();
-};
+    searchFromOne();
 
-function checkAll(allbox) {
+    $(".admin-searchinput").keyup(function(){
-    var checkboxes = document.getElementsByClassName('checkbox-list');
+        searchFromOne();
+    });
+    // all inputs and labels directly under admin filter and groupfilter
+    $("#admin-filter, #admin-groupfilter > input, label").change(function(){
+        searchFromOne();
+    });
+    $("#pagetype").change(function(){
+        searchFromOne();
+    });
 
-    for (var i = 0; i < checkboxes.length; i++) {
+    /* Update hidden input to be equal to submit pressed,
-        if (checkboxes[i].type == 'checkbox') {
+        because serialize doesn't take submit values. */
-            checkboxes[i].checked = allbox.checked;
+    $('#admin-batchform > button').click(function () {
-        }
+        $('#batchinput').prop('value', $(this).prop('value'));
-    }
+    });
+
+    $('#admin-groupbatchform > button').click(function () {
+        $('#groupbatchinput').prop('value', $(this).prop('value'));
+    });
+});
+
+// Toggles all checkboxes based on one.
+function checkAll() {
+    $('.checkbox-list').each(function () {
+        $(this).prop('checked', $('#checkall').prop('checked'));
+    });
 }
 
-function checkCheckAll(allbox) {
+// Simple function that checks if checkall should stay checked.
-    var checkboxes = document.getElementsByClassName('checkbox-list');
+function checkCheckAll() {
     var checked = true;
 
-    for (var i = 0; i < checkboxes.length; i++) {
+    $('.checkbox-list').each(function () {
-        if (checkboxes[i].type == 'checkbox') {
+        if ($(this).prop('checked') == false) {
-            if (checkboxes[i].checked == false) {
+            checked = false;
-                checked = false;
+            return;
-                break;
-            }
         }
-    }
+    });
-    allbox.checked = checked;
+
+    $('#checkall').prop('checked', checked);
 }
 
+// Toggle of filter options.
 function changeFilter() {
-    if (document.getElementById('group').checked) {
+    if ($('#pagetype').find(":selected").val() == "group") {
         document.getElementById('admin-filter').style.display = 'none';
         document.getElementById('admin-groupfilter').style.display = 'inline-block';
 
-        document.getElementById('admin-batchactions').style.display = 'none';
+        document.getElementById('admin-batchform').style.display = 'none';
-        document.getElementById('admin-groupbatchactions').style.display = 'inline-block';
+        document.getElementById('admin-groupbatchform').style.display = 'inline-block';
     } else {
         document.getElementById('admin-filter').style.display = 'inline-block';
         document.getElementById('admin-groupfilter').style.display = 'none';
 
-        document.getElementById('admin-batchactions').style.display = 'inline-block';
+        document.getElementById('admin-batchform').style.display = 'inline-block';
-        document.getElementById('admin-groupbatchactions').style.display = 'none';
+        document.getElementById('admin-groupbatchform').style.display = 'none';
     }
 }
+
+// Sets the search page to one, relevant when changing filter or search.
+function searchFromOne() {
+    $('#currentpage').prop('value', 1);
+    adminSearch();
+}
+
+// AJAX live search.
+function adminSearch() {
+    $.post(
+        "API/adminSearchUsers.php",
+        $("#admin-searchform").serialize()
+    ).done(function (data) {
+        $("#usertable").html(data);
+        updatePageN();
+    })
+}
+
+// AJAX live update.
+function adminUpdate(form) {
+    $.post(
+        "API/adminChangeUser.php",
+        $(form).serialize()
+    ).done(function () {
+        adminSearch();
+    })
+}
+
+// AJAX pagenumber functionality.
+function updatePageN() {
+    $.post(
+        "API/adminPageNumber.php",
+        $("#admin-searchform").serialize()
+    ).done(function (data) {
+        $("#admin-pageinfo").html(data);
+    })
+}
+
+// Intended for the edit button to show a form.
+function toggleBancomment(button) {
+    $(button).siblings("div").toggle();
+    $(button).toggle();
+}
+
+// AJAX value editing.
+function editComment(form) {
+    $.post(
+        "API/adminChangeUser.php",
+        $(form).serialize()
+    ).done(function (data) {
+        adminSearch();
+    });
+}

website/public/js/chat.js

@@ -1,62 +1,144 @@
+var previousDate = new Date("1970-01-01 00:00:00");
+var previousTime = "00:00";
+var gettingMessages = false;
+var previousType = "robot";
+
 $(document).ready(function() {
-    loadMessages();
+    setInterval(loadMessages, 1000);
     sayEmpty();
     $(".chat-field").hide();
 });
 
+// This function loads the new messages and runs the addMessages function to show them.
 function loadMessages() {
-    $.post(
+    // If the function is not running elsewhere, run it here.
-        "API/loadMessages.php",
+    if (!gettingMessages) {
-        $("#lastIDForm").serialize()
+        gettingMessages = true;
-    ).done(function(data) {
+        // Get the messages.
-        if (data && data != "[]") {
+        $.post(
-            messages = JSON.parse(data);
+            "API/loadMessages.php",
-            addMessages(messages);
+            $("#lastIDForm").serialize()
-            $("#lastID").val(messages[messages.length - 1].messageID);
+        ).done(function (data) {
-            $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
+            // Post the messages in the chat.
-        }
+            if (data && data != "[]") {
-    });
+                messages = JSON.parse(data);
+                addMessages(messages);
+                $("#lastID").val(messages[messages.length - 1].messageID);
+            }
 
-    setTimeout(loadMessages, 1000);
+            loadUnreadMessages();
+
+            gettingMessages = false;
+        });
+    } else {
+        setTimeout(loadMessages, 500);
+    }
 }
 
-
+// Send a message to a friend of the user.
 function sendMessage() {
     $.post(
         "API/sendMessage.php",
         $("#sendMessageForm").serialize()
-    );
+    ).done(function(response) {
+        if (response == "frozen") {
+            alert("Je account is bevroren, dus je kan niet chat berichten versturen. Contacteer een admin als je denkt dat dit onjuist is.");
+        } else if (response == "logged out") {
+            window.location.href = "login.php?url=" + window.location.pathname;
+        }
+        // Load messages if the message has been send, so it shows in the chat.
+        loadMessages();
+    });
 
     $("#newContent").val("");
+    $("#newContent").focus();
 }
 
+// Add messages to the chat.
 function addMessages(messages) {
-    for(i in messages) {
+    var messagesText = "";
+
+    // Loop over all the messages.
+    for(var i in messages) {
+        // Initialize message variables.
+        var thisDate = new Date(messages[i].creationdate.replace(/ /,"T"));
+        var thisTime = thisDate.getHours() + ":" + ('0' + thisDate.getMinutes()).slice(-2);
+        var type;
+        thisDate.setHours(0,0,0,0);
+
+        // See where the message has been send from, so it shows on the right side.
         if (messages[i].destination == $(".destinationID").val()) {
             type = "chat-message-self";
         } else {
             type = "chat-message-other";
         }
 
-        $("#chat-history").append('\
+        // If it is the first message, open the message box and maybe add a year.
-            <div class="chat-message"> \
+        if (i == 0) {
-                <div class="' + type + '">\
+            if (thisDate.getTime() > previousDate.getTime()) {
-                ' + messages[i].content + '\
+                messagesText += '\
-                </div> \
+                    <div class="day-message"> \
-            </div>\
+                        <div class="day-message-content">\
-        ');
+                        ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
+                        </div> \
+                    </div>';
+            }
+            previousDate = thisDate;
+            previousTime = thisTime;
+            previousType = type;
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
+        // If it is not the first message, and has a different date/time/type then the previous message,
+        } else if (type != previousType || thisTime != previousTime || thisDate.getTime() > previousDate.getTime()) {
+            // Close the previous message.
+            messagesText += '<div class="chat-time">\
+                    ' + thisTime + '\
+                    </div></div></div>';
+
+            previousTime = thisTime;
+            previousType = type;
+            // If the date is different, add a new date.
+            if (thisDate > previousDate) {
+                previousDate = thisDate;
+                messagesText += '\
+                    <div class="day-message"> \
+                        <div class="day-message-content">\
+                        ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
+                        </div> \
+                    </div>';
+            }
+
+            // Open the new message.
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
+        }
+
+        // Add the content of the message in the new box.
+        messagesText += fancyText(messages[i].content) + "<br />";
     }
+
+    // Close the last message
+    messagesText += '<div class="chat-time">\
+                    ' + thisTime + '\
+                    </div></div></div>';
+
+    // Add all the new created messaged to the chat.
+    $("#chat-history").append(messagesText);
+
+    // Scroll down, so the user can see the new messages.
+    $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight - $('#chat-history')[0].clientHeight);
 }
 
+// Switch to a different user.
 function switchUser(userID) {
+    previousDate = new Date("1970-01-01 00:00:00");
     $(".chat-field").show();
     $(".destinationID").val(userID);
     $("#chat-history").html("");
     $("#lastID").val("");
-    $(".chat-left .friend-item").removeClass("active-friend-chat");
+    $("#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");
 }
 
+// Insert a message in the chat, this is used when it is empty.
 function sayEmpty() {
-    $("#chat-history").html("Begin nu met chatten!");
+    $("#chat-history").html("Probeer ook eens foto's en video's te sturen");
 }

website/public/js/dobPicker.js

@@ -1,123 +0,0 @@
-/**
- * jQuery DOB Picker
- * Website: https://github.com/tyea/dobpicker
- * Version: 1.0
- * Author: Tom Yeadon
- * License: BSD 3-Clause
- */
-
-jQuery.extend({
-
-	dobPicker: function(params) {
-
-		// set the defaults		
-		if (typeof(params.dayDefault)==='undefined') params.dayDefault = 'Day';
-		if (typeof(params.monthDefault)==='undefined') params.monthDefault = 'Month';
-		if (typeof(params.yearDefault)==='undefined') params.yearDefault = 'Year';
-		if (typeof(params.minimumAge)==='undefined') params.minimumAge = 12;
-		if (typeof(params.maximumAge)==='undefined') params.maximumAge = 80;
-
-		// set the default messages		
-		$(params.daySelector).append('<option value="">' + params.dayDefault + '</option>');
-		$(params.monthSelector).append('<option value="">' + params.monthDefault + '</option>');
-		$(params.yearSelector).append('<option value="">' + params.yearDefault + '</option>');
-
-		// populate the day select
-		for (i = 1; i <= 31; i++) {
-			if (i <= 9) {
-				var val = '0' + i;
-			} else {
-				var val = i;
-			}
-			$(params.daySelector).append('<option value="' + val + '">' + i + '</option>');
-		}
-
-		// populate the month select		
-		var months = [
-			"January",
-			"February",
-			"March",
-			"April",
-			"May",
-			"June",
-			"July",
-			"August",
-			"September",
-			"October",
-			"November",
-			"December"
-		];
-			
-		for (i = 1; i <= 12; i++) {
-			if (i <= 9) {
-				var val = '0' + i;
-			} else {
-				var val = i;
-			}
-			$(params.monthSelector).append('<option value="' + val + '">' + months[i - 1] + '</option>');
-		}
-
-		// populate the year select
-		var date = new Date();
-		var year = date.getFullYear();
-		var start = year - params.minimumAge;
-		var count = start - params.maximumAge;
-		
-		for (i = start; i >= count; i--) {
-			$(params.yearSelector).append('<option value="' + i + '">' + i + '</option>');
-		}
-		
-		// do the logic for the day select
-		$(params.daySelector).change(function() {
-			
-			$(params.monthSelector)[0].selectedIndex = 0;
-			$(params.yearSelector)[0].selectedIndex = 0;
-			$(params.yearSelector + ' option').removeAttr('disabled');
-			
-			if ($(params.daySelector).val() >= 1 && $(params.daySelector).val() <= 29) {
-			
-				$(params.monthSelector + ' option').removeAttr('disabled');
-				
-			} else if ($(params.daySelector).val() == 30) {
-			
-				$(params.monthSelector + ' option').removeAttr('disabled');
-				$(params.monthSelector + ' option[value="02"]').attr('disabled', 'disabled');
-				
-			} else if($(params.daySelector).val() == 31) {
-			
-				$(params.monthSelector + ' option').removeAttr('disabled');
-				$(params.monthSelector + ' option[value="02"]').attr('disabled', 'disabled');
-				$(params.monthSelector + ' option[value="04"]').attr('disabled', 'disabled');
-				$(params.monthSelector + ' option[value="06"]').attr('disabled', 'disabled');
-				$(params.monthSelector + ' option[value="09"]').attr('disabled', 'disabled');
-				$(params.monthSelector + ' option[value="11"]').attr('disabled', 'disabled');
-				
-			}
-			
-		});
-		
-		// do the logic for the month select
-		$(params.monthSelector).change(function() {
-			
-			$(params.yearSelector)[0].selectedIndex = 0;
-			$(params.yearSelector + ' option').removeAttr('disabled');
-			
-			if ($(params.daySelector).val() == 29 && $(params.monthSelector).val() == '02') {
-			
-				$(params.yearSelector + ' option').each(function(index) {
-					if (index !== 0) {
-						var year = $(this).attr('value');
-						var leap = !((year % 4) || (!(year % 100) && (year % 400)));
-						if (leap === false) {
-							$(this).attr('disabled', 'disabled');
-						}
-					}
-				});
-				
-			}
-			
-		});
-		
-	}
-	
-});

website/public/js/dobPicker.min.js

@@ -1 +0,0 @@
-jQuery.extend({dobPicker:function(a){for("undefined"==typeof a.dayDefault&&(a.dayDefault="Day"),"undefined"==typeof a.monthDefault&&(a.monthDefault="Month"),"undefined"==typeof a.yearDefault&&(a.yearDefault="Year"),"undefined"==typeof a.minimumAge&&(a.minimumAge=12),"undefined"==typeof a.maximumAge&&(a.maximumAge=80),$(a.daySelector).append('<option value="">'+a.dayDefault+"</option>"),$(a.monthSelector).append('<option value="">'+a.monthDefault+"</option>"),$(a.yearSelector).append('<option value="">'+a.yearDefault+"</option>"),i=1;i<=31;i++){if(i<=9)var b="0"+i;else var b=i;$(a.daySelector).append('<option value="'+b+'">'+i+"</option>")}var c=["January","February","March","April","May","June","July","August","September","October","November","December"];for(i=1;i<=12;i++){if(i<=9)var b="0"+i;else var b=i;$(a.monthSelector).append('<option value="'+b+'">'+c[i-1]+"</option>")}var d=new Date,e=d.getFullYear(),f=e-a.minimumAge,g=f-a.maximumAge;for(i=f;i>=g;i--)$(a.yearSelector).append('<option value="'+i+'">'+i+"</option>");$(a.daySelector).change(function(){$(a.monthSelector)[0].selectedIndex=0,$(a.yearSelector)[0].selectedIndex=0,$(a.yearSelector+" option").removeAttr("disabled"),$(a.daySelector).val()>=1&&$(a.daySelector).val()<=29?$(a.monthSelector+" option").removeAttr("disabled"):30==$(a.daySelector).val()?($(a.monthSelector+" option").removeAttr("disabled"),$(a.monthSelector+' option[value="02"]').attr("disabled","disabled")):31==$(a.daySelector).val()&&($(a.monthSelector+" option").removeAttr("disabled"),$(a.monthSelector+' option[value="02"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="04"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="06"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="09"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="11"]').attr("disabled","disabled"))}),$(a.monthSelector).change(function(){$(a.yearSelector)[0].selectedIndex=0,$(a.yearSelector+" option").removeAttr("disabled"),29==$(a.daySelector).val()&&"02"==$(a.monthSelector).val()&&$(a.yearSelector+" option").each(function(a){if(0!==a){var b=$(this).attr("value"),c=!(b%4||!(b%100)&&b%400);c===!1&&$(this).attr("disabled","disabled")}})})}});

website/public/js/friendButtons.js

@@ -0,0 +1,72 @@
+function placeFriendButtons() {
+    $.post("API/getFriendshipStatus.php", { usr: userID })
+        .done(function(data) {
+            var friendshipStatus = data;
+            var $buttonContainer = $("div.friend-button-container");
+            $("#start-profile-chat").hide();
+                $buttonContainer.html("");
+                var value1 = "";
+                var class1 = "empty-button";
+                var icon1 = "";
+                var text1 = "";
+
+                var value2 = "";
+                var class2 = "empty-button";
+                var icon2 = "";
+                var text2 = "";
+
+                switch (friendshipStatus) {
+                    case "0":
+                        value1 = "request";
+                        class1 = "green";
+                        text1 = "Word vrienden";
+                        icon1 = "fa-user-plus";
+                        break;
+                    case "1":
+                        value1 = userID;
+                        class1 = "green";
+                        text1 = "Chat";
+                        icon1 = "fa-comment";
+                        value2 = "delete";
+                        class2 = "red";
+                        text2 = "Ontvriend";
+                        icon2 = "fa-user-times";
+                        break;
+                    case "2":
+                        value1 = "delete";
+                        class1 = "red";
+                        text1 = "Trek verzoek in";
+                        icon1 = "fa-times";
+                        break;
+                    case "3":
+                        value1 = "accept";
+                        class1 = "green";
+                        text1 = "Accepteer";
+                        icon1 = "fa-check";
+                        value2 = "delete";
+                        class2 = "red";
+                        text2 = "Weiger";
+                        icon2 = "fa-times";
+                        break;
+                }
+
+                $buttonContainer.append(
+                    "<div><button class='"+ class1 +" fancy-button friend-button' value='"+ value1 +"'>" +
+                    "<span>"+ text1 +"</span>" +
+                    "<i class='fa fa-fw "+ icon1 +"'></i> " +
+                    "</button></div>");
+                $buttonContainer.append(
+                    "<div><button class='"+ class2 +" fancy-button friend-button' value='"+ value2 +"'>" +
+                    "<span>"+ text2 +"</span>" +
+                    "<i class='fa fa-fw "+ icon2 +"'></i> " +
+                    "</button></div>");
+
+
+            $buttonContainer.find("button").click(function() {
+                if (isNaN(this.value))
+                    editFriendship(userID, this.value);
+                else if (this.value != "")
+                    window.location.href = "chat.php?username=" + this.value;
+            });
+        });
+}

website/public/js/groupButtons.js

@@ -0,0 +1,44 @@
+function placeGroupButtons() {
+    $.post("API/getGrouprole.php", { grp: groupID })
+        .done(function(data) {
+            var $buttonContainer = $("div.group-button-container");
+
+            if (data == 'none') {
+                $buttonContainer.append(
+                    "<button class='green group-button fancy-button' value='request'>" +
+                    "<span>Treed toe</span><i class='fa fa-plus'></i>" +
+                    "</button>");
+            } else if (data == 'request') {
+                $buttonContainer.append(
+                    "<button class='red group-button fancy-button' value='none'>" +
+                    "<span>Trek verzoek in</span><i class='fa fa-times'></i>" +
+                    "</button>");
+            } else if (data == 'admin') {
+                $buttonContainer.append(
+                    "<button class='group-button fancy-button' value='admin'>" +
+                        "<span>Instellingen</span><i class='fa fa-cogs'></i>" +
+                        "</button>"
+                );
+            } else {
+                $buttonContainer.append(
+                    "<button class='red group-button fancy-button' value='none'>" +
+                    "<span>Verlaat groep</span><i class='fa fa-sign-out'></i>" +
+                    "</button>");
+            }
+
+            $buttonContainer.children().click(function() {
+                if (this.value == 'admin') {
+                    window.location.href='groupAdmin.php?groupID=' + groupID;
+                } else {
+                    $.post("API/editMembership.php", {grp: groupID, role: this.value})
+                        .done(function () {
+                            $buttonContainer.children().remove();
+                            placeGroupButtons();
+                            updateMenus();
+                        }).fail(function () {
+                    });
+                }
+            });
+
+    });
+}

website/public/js/header.js

@@ -1,33 +1,55 @@
 $(document).ready(function() {
-    // Hide notification center.
+    // Toggle menu
-    $("#profile-menu-popup").hide();
+    $("#own-profile-picture, #open-notifications").click(function() {
+        if ($("#notification-center").css('display') == "none") {
+            // Make the menu visible and move the content to the left.
+            $(".modal").width("calc(100% - 512px)");
+            $(".content").css("margin-right", "256px");
+            $("#notification-center").css("right", "0px");
+            $("#notification-center").css("display", "block");
+            $("#contact-menu").css("display", "block");
 
-    // $("#own-profile-picture").click(function() {
+            // Add cookie so the menu stays open on other pages
-    //     $("#profile-menu-popup").toggle();
+            if (window.innerWidth > 1080) {
-    //     $("#profile-hello-popup").toggle();
+                $("#chat-history").css("margin-right", "266px");
-    // });
+                $("#chat-history").css("width", "calc(100% - 512px - 75px)");
-
+                document.cookie = "menu=open; path=/";
-    $("#own-profile-picture").click(function() {
+            } else {
-        if($("#notification-center").css('right') == "-256px") {
+                document.cookie = "menu=closed; path=/";
-            $(".content").animate({
+            }
-                marginRight: "256px"
-            }, 500);
-            $(".chat-right").animate({
-                width: "100%"
-            }, 500);
-            $("#notification-center").animate({
-                right: "0px"
-            }, 500);
         } else {
-            $(".chat-right").animate({
+            $(".modal").width("calc(100% - 256px)");
-                width: "100%"
+            $(".content").css("margin-right", "0px");
-            }, 500);
+            $("#notification-center").css("display", "none");
-            $(".content").animate({
+
-                marginRight: "0px"
+            if (window.innerWidth > 1080) {
-            }, 500);
+                $("#chat-history").css("margin-right", "10px");
-            $("#notification-center").animate({
+                $("#chat-history").css("width", "calc(100% - 256px - 85px)");
-                right: "-256px"
+            } else {
-            }, 500);
+                // Make the menu invisible and move the content to the right.
+                $("#contact-menu").css("display", "none");
+            }
+
+            // Change menu cookie to close
+            document.cookie = "menu=closed; path=/";
         }
     });
+
+    if (getCookie("menu") == "open") {
+        // Make the menu visible and move the content to the left.
+        $(".modal").width("calc(100% - 512px)");
+        $(".content").css("margin-right", "256px");
+        $("#notification-center").css("right", "0px");
+        $("#notification-center").css("display", "block");
+        $("#contact-menu").css("display", "block");
+
+        // Add cookie so the menu stays open on other pages
+        if (window.innerWidth > 1080) {
+            $("#chat-history").css("margin-right", "266px");
+            $("#chat-history").width("calc(100% - 587px)");
+            document.cookie = "menu=open; path=/";
+        } else {
+            document.cookie = "menu=closed; path=/";
+        }
+    }
 });

website/public/js/loginRegisterModals.js

@@ -0,0 +1,68 @@
+
+// Get the modal
+var modal = document.getElementById('myModal');
+var registerModal = document.getElementById('registerModal');
+var facebookModal = document.getElementById("fbModal");
+
+// Get the button that opens the modal
+var registerBtn = document.getElementById("registerBtn");
+var btn = document.getElementById("myBtn");
+
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+var registerSpan = document.getElementsByClassName("close")[1];
+var facebookCLose = document.getElementsByClassName("close")[2];
+
+/**
+ * When the user clicks the button, open the modal
+ */
+btn.onclick = function () {
+    modal.style.display = "block";
+
+}
+registerBtn.onclick = function () {
+    registerModal.style.display = "block";
+}
+
+/**
+ * WHen the user clicks on (X), close the modal
+ */
+span.onclick = function () {
+    modal.style.display = "none";
+}
+registerSpan.onclick = function () {
+    registerModal.style.display = "none";
+}
+facebookCLose.onclick = function () {
+    facebookModal.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";
+    }
+    if (event.target == registerModal) {
+        registerModal.style.display = "none";
+    }
+    if (event.target == facebookModal) {
+        facebookModal.style.display = "none";
+    }
+}
+
+/**
+ * When ESC is pressed, close modal
+ */
+document.addEventListener('keyup', function(e) {
+    if (e.keyCode == 27) {
+        modal.style.display = "none";
+        registerModal.style.display = "none";
+
+    }
+});
+/**
+ * Created by joey on 2-2-17.
+ */

website/public/js/main.js

@@ -0,0 +1,104 @@
+var days = ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"];
+var months = ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"]
+
+function fancyText(text) {
+    // Add links, images, gifs and (youtube) video's.
+    text = text.replace(/(https?:\/\/.[^ \n<>"]*)/ig, function(link) {
+        // Add images
+        if (link.match(/(https?:\/\/.[^ ]*\.(?:png|jpg|jpeg|gif))/ig)) {
+            return "<img alt='" + link + "' src='" + link + "' />";
+        }
+        // Add mp4 video's
+        else if (link.match(/(https?:\/\/.[^ ]*\.(?:mp4))/ig)) {
+            return "<video width='100%'>" +
+                        "<source src='"+ link +"' type='video/mp4'>" +
+                        "<b>Je browser ondersteund geen video</b>" +
+                "</video><button class='gray' onclick='$(this).prev().get(0).play();'><i class='fa fa-play'></i></button>";
+        }
+        // Add ogg video's
+        else if (link.match(/(https?:\/\/.[^ ]*\.(?:ogg))/ig)) {
+            return "<video width='100%'>" +
+                "<source src='"+ link +"' type='video/ogg'>" +
+                "<b>Je browser ondersteund geen video</b>" +
+                "</video><button class='gray' onclick='$(this).prev().get(0).play();'><i class='fa fa-play'></i></button>";
+        }
+        // Add youtube video's
+        else if (link.match(/(https?:\/\/.(www.)?youtube|youtu.be)*watch/ig)) {
+            return '<iframe width="100%"' +
+                    ' src="https://www.youtube.com/embed/' + link.substr(link.length - 11) +
+                    '" frameborder="0" allowfullscreen></iframe>';
+        }
+        // Add links
+        else {
+            return "<a href='" + link + "' target='_blank'>" + link + "</a>";
+        }
+    });
+
+    return text;
+}
+
+// This function gets the value of a cookie when given a key.
+// If it didn´t find any compatible cookie, it returns false.
+function getCookie(key) {
+    cookies = document.cookie.split("; ");
+    for (var i in cookies) {
+        cookie = cookies[i].split("=");
+        if (cookie[0] == key) {
+            return cookie[1];
+        }
+    }
+    return false;
+}
+
+// Edit the friendship status of two users.
+function editFriendship(userID, value) {
+    $.post("API/editFriendship.php", { usr: userID, action: value })
+    .done(function() {
+        placeFriendButtons();
+        updateMenus();
+    });
+}
+
+// Show the given friends in the given list.
+// The friends are giving in JSON, and the list is giving with a hashtag.
+function showFriends(friends, list) {
+    if(friends && friends != "[]") {
+        $(list).load("bits/friend-item.php", {
+            "friends": friends
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+// Show the given friends in the given list.
+// This function supports more options given as parameters. This adds extra functionality.
+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;
+    }
+}
+
+// Show the given groups in the given list.
+function showGroups(groups, list) {
+    if(groups && groups != "[]") {
+        $(list).load("bits/group-item.php", {
+            "groups": groups
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}

website/public/js/masonry.js

@@ -1,76 +1,227 @@
 margin = 20;
 
-$(window).on("load", function() {
+// scrolling modal taken from http://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen
-    console.log("LOADED");
+function scrollbarMargin(width, overflow) {
-    container = $("div.posts");
+    $('body').css({
-    posts = container.children();
+        marginRight: width,
-    posts.remove();
+        overflow: overflow
+    });
+    $('.profile-menu').css({
+        marginRight: width
+    });
+}
 
-    column = $('<div class="column"></div>').append(posts);
+function requestPost(postID) {
-    container.append(column);
+    $(".modal").show();
 
-    mansonry();
+    $.get("API/loadPost.php", { postID : postID }).done(function(data) {
-    mansonry();
+        $('.modal-default').hide();
+        var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
+        scrollbarMargin(scrollBarWidth, 'hidden');
+        $('#modal-response').show();
+        $('#modal-response').html(fancyText(data));
+    });
+}
+
+function postPost() {
+    title = $("input.newpost[name='title']").val();
+    content = $("textarea.newpost[name='content']").val();
+    console.log(masonryMode);
+    if (masonryMode == 2) {
+        $.post("API/postPost.php", { title: title,
+                                     content : content,
+                                     group : groupID })
+            .done(function(data) {
+                if (data == "empty") {
+                    $('#alertbox').show();
+                    $('#alerttext').html("Geen titel of inhoud; vul a.u.b. in.");
+                    window.scrollTo(0,0);
+                } else if (data == "logged out") {
+                    window.location.href = "login.php?url=" + window.location.pathname;
+                } else if (data == "frozen") {
+                    alert("Je account is bevroren, dus je kan geen posts plaatsen. Contacteer een admin als je denkt dat dit onjuist is.");
+                } else {
+                    $('#alertbox').hide();
+                    masonry(masonryMode);
+                }
+            });
+    } else {
+        $.post("API/postPost.php", { title: title,
+                                     content : content })
+            .done(function(data) {
+                if (data == "empty") {
+                    $('#alertbox').show();
+                    $('#alerttext').html("Geen titel of inhoud; vul a.u.b. in.");
+                    window.scrollTo(0,0);
+                } else if (data == "logged out") {
+                    window.location.href = "login.php?url=" + window.location.pathname;
+                } else if (data == "frozen") {
+                    alert("Je account is bevroren, dus je kan geen posts plaatsen. Contacteer een admin als je denkt dat dit onjuist is.");
+                } else {
+                    $('#alertbox').hide();
+                    masonry(masonryMode);
+                }
+            });
+    }
+
+
+}
+
+var masonryMode = 0;
+var windowWidth;
+var columnCount;
+var columns;
+var postLimit;
+var postAmount = 0;
+var noposts = false;
+
+$(document).ready(function () {
+    windowWidth = $(window).width();
+    columnCount = Math.floor($(".posts").width() / 250);
+    columns = new Array(columnCount);
+    postLimit = columnCount * 7;
 });
 
+$(window).on("load", function() {
+    $(".modal-close").click(function (){closeModal()});
+
+    // http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom
+    window.onscroll = function(ev) {
+        if($(window).scrollTop() + $(window).height() == $(document).height() ) {
+            loadMorePosts(userID, groupID, postAmount, postLimit);
+        }
+    };
+
+    $(document).keyup(function(e) {
+        if (e.keyCode == 27) {
+            closeModal();
+        }
+    });
+
+    $('.modal').click(function() {
+        closeModal();
+    });
+
+    $('.modal-content').click(function(event){
+        event.stopPropagation();
+    });
+
+});
+
+function closeModal() {
+    $(".modal").hide();
+    scrollbarMargin(0, 'auto');
+    $('#modal-response').hide();
+    $('.modal-default').show();
+}
+
 $(window).resize(function() {
     clearTimeout(window.resizedFinished);
     window.resizeFinished = setTimeout(function() {
-        mansonry();
+        if ($(window).width() != windowWidth) {
+            windowWidth = $(window).width();
+
+            if (columnCount != Math.floor($(".posts").width() / 250)) {
+                columnCount = Math.floor($(".posts").width() / 250);
+                masonry(masonryMode);
+            }
+        }
     }, 250);
 });
 
-function mansonry() {
+var $container = $(".posts");
 
-    columnCount = Math.floor($(".posts").width() / 250);
+function masonry(mode) {
-    console.log("columns: " + columnCount);
+    masonryMode = mode;
+    $container.children().remove();
+
+    // reinit posts
+    noposts = false;
+    postAmount = 0;
 
     /*
      * Initialise columns.
      */
-    var columns = new Array(columnCount);
+
     for (i = 0; i < columnCount; i++) {
-        columns[i] = [0, []];
+        $column = $("<div class=\"column\">");
-        console.log(columns[i]);
+        $column.width(100/columnCount + "%");
+        $container.append($column);
+        columns[i] = [0, $column];
+    }
+
+    if(mode > 0) {
+        $postInput = $("<div class=\"post platform\">");
+        $form = $("<form class=\"newpost\" action=\"API/postPost.php\" method=\"post\" onsubmit=\"postPost(); return false;\">");
+        $postInput.append($form);
+
+        if(mode == 2) {
+            $form.append($("<input class=\"newpost\" type=\"hidden\" name=\"group\" value=\"" + groupID + "\">"));
+        }
+
+        $form.append($("<input class=\"newpost\" name=\"title\" placeholder=\"Titel\" type=\"text\">"));
+        $form.append($("<textarea class=\"newpost\" name=\"content\" placeholder=\"Schrijf een berichtje...\" maxlength='1000'></textarea><span></span>"));
+        $form.append($("<button type=\"submit\"><i class='fa fa-sticky-note-o'></i> Plaats!</button>"));
+        columns[0][1].append($postInput);
+
+        columns[0][0] = $postInput.height() + margin;
     }
 
     /*
      * Function will find the column with the shortest height.
      */
-    function getShortestColumn(columns) {
-        column = columns[0];
 
-        for (i = 1; i < columnCount; i++) {
-            if (column[0] > columns[i][0]) {
-                column = columns[i];
-            }
-        }
-
-        return column;
-    }
 
     /*
-     * Rearange the objects.
+     * Get the posts from the server.
      */
-    j = 0;
+    loadMorePosts(userID, groupID, 0, postLimit);
-    posts.each(function(i) {
+}
-        post = posts[i];
+
-        shortestColumn = getShortestColumn(columns);
+function getShortestColumn(columns) {
-        shortestColumn[0] = shortestColumn[0] + $(post).height() + margin;
+    column = columns[0];
-        shortestColumn[1].push(post);
+
-
+    for (i = 1; i < columnCount; i++) {
-    });
+        if (column[0] > columns[i][0]) {
-    
+            column = columns[i];
-    container.children().remove();
+        }
-    /*
+    }
-     * Display the objects again in the correct order.
+    return column;
-     */
+}
-    for (i = 0; i < columnCount; i++) {
+
-        column = $('<div class="column"></div>').append(columns[i][1]);
+function loadMorePosts(uID, gID, offset, limit) {
-        console.log(column);
+    if (noposts) {
-        container.append(column);
+        return;
-
+    }
-    }
+
-
+    $.post("API/getPosts.php", { usr : uID,
-    $("div.posts div.column").width(100/columnCount + "%");
+                                 grp : gID,
+                                 offset : offset,
+                                 limit : limit})
+        .done(function(data) {
+            if (!data) {
+                $('.noposts').show();
+                noposts = true;
+                return;
+            }
+
+            posts = JSON.parse(data);
+
+            /*
+             * Rearange the objects.
+             */
+            $.each(posts, function() {
+                $post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
+                $post.append($("<h2>").html(this["title"]));
+                $post.append($("<p>").html(fancyText(this["content"])));
+                $post.append($("<p class=\"subscript\">").text(this["nicetime"]));
+                $post.append($("<p class=\"subscript\">").text("comments: " + this["comments"] + ", niet slechts: " + this["niet_slechts"]));
+
+                shortestColumn = getShortestColumn(columns);
+                shortestColumn[1].append($post);
+                shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
+            });
+        });
+
+    postAmount += limit;
 }

website/public/js/menu.js

@@ -1,39 +1,126 @@
+var menuFriendsData;
+var menuGroupsData;
+var notificationMessagesData;
+var notificationRequestsData;
+var updatingMenus = 0;
+
+// On document load, load menus and loops loading menus every 10 seconds.
 $(document).ready(function() {
-    $(".extra-menu-items").hide();
+    updateMenus();
-    $("#menu-back").hide();
+    setInterval(updateMenus, 10000);
-
-    // Show more friends
-    $("#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();
-    });
-
-    // 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();
-    });
 });
+
+
+// Update the menu  and notification items.
+function updateMenus() {
+    if (updatingMenus <= 0) {
+        loadMenuFriends(5);
+        loadNotificationFriends();
+        loadUnreadMessages();
+        loadMenuGroups();
+    }
+}
+
+
+// Get the friends and insert them in the menu.
+function loadMenuFriends(limit) {
+    updatingMenus ++;
+    $.post(
+        "API/loadFriends.php",
+        {
+            limit: 5
+        }
+    ).done(function(data) {
+        if (data == "" || data == "[]") {
+            $("#friends-menu-section").hide();
+        } else {
+            $("#friends-menu-section").show();
+        }
+        if (menuFriendsData != data) {
+            menuFriendsData = data;
+            if (!showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
+                $("#friends-menu-section").hide();
+            }
+        }
+    }).fail(function() {
+        $("#friends-menu-section").hide();
+    }).always(function() {
+        updatingMenus --;
+    });
+}
+
+// Get the groups and insert them in the menu.
+function loadMenuGroups() {
+    updatingMenus ++;
+    $.post(
+        "API/loadGroups.php",
+        {
+            limit: 5
+        }
+    ).done(function(data) {
+
+        if (data == "" || data == "[]") {
+            $("#groups-menu-section").hide();
+        } else {
+            $("#groups-menu-section").show();
+        }
+        if (menuGroupsData != data) {
+            menuGroupsData = data;
+            if (!showGroups(data, "#menu-groups-list")) {
+                $("#groups-menu-section").hide();
+            }
+        }
+    }).fail(function() {
+        $("#groups-menu-section").hide();
+    }).always(function() {
+        updatingMenus --;
+    });
+}
+
+// Get the friends requests and insert them in the notification center.
+function loadNotificationFriends() {
+    updatingMenus ++;
+    $.post(
+        "API/loadFriendRequest.php"
+    ).done(function(data) {
+        if (data == "" || data == "[]") {
+            $("#friend-request-section").hide();
+        } else {
+            $("#friend-request-section").show();
+        }
+        if (notificationRequestsData != data) {
+            notificationRequestsData = data;
+            if (!showFriendsPlus(data, "#friend-requests-list", 5, "profile.php", "GET")) {
+                $("#friend-request-section").hide();
+            }
+        }
+    }).fail(function() {
+        $("#friend-request-section").hide();
+    }).always(function() {
+        updatingMenus --;
+    });
+}
+
+// Get the unread messages and insert them in the notification center.
+function loadUnreadMessages() {
+    updatingMenus ++;
+    $.post(
+        "API/loadChatNotifications.php"
+    ).done(function(data) {
+        if (data == "" || data == "[]") {
+            $("#unread-messages-section").hide();
+        } else {
+            $("#unread-messages-section").show();
+        }
+        if (notificationMessagesData != data) {
+            notificationMessagesData = data;
+            if (!showFriendsPlus(data, "#unread-chat-list", 5, "chat.php", "GET")) {
+                $("#unread-messages-section").hide();
+            }
+        }
+    }).fail(function() {
+        $("#unread-messages-section").hide();
+    }).always(function() {
+        updatingMenus --;
+    });
+}

website/public/js/notifications.js

@@ -1,34 +0,0 @@
-function showNotifications(notifications, id) {
-    $("#friendrequestslist").html("");
-    for (i in notifications) {
-        $("#friendrequestslist").append(" \
-            <li class='friend-item $extraItem'> \
-                <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> \
-            </li> \
-        ");
-    }
-}
-
-function loadNotifications() {
-    $.post(
-        "API/loadNotifications.php"
-    ).done(function(data) {
-        if (data && data != "[]") {
-            showNotifications(JSON.parse(data), "friendrequestslist");
-        }
-    });
-
-    setTimeout(loadNotifications, 10000);
-}
-
-loadNotifications();
-

website/public/js/post.js

@@ -0,0 +1,41 @@
+
+function postComment(buttonValue) {
+    formData = $("#newcommentform").serializeArray();
+    formData.push({name: "button", value: buttonValue});
+    $.post(
+        "API/postComment.php",
+        formData
+    ).done(function (response) {
+        if (response == "frozen") {
+            alert("Je account is bevroren, dus je kan geen comments plaatsen of \"niet slechten\". Contacteer een admin als je denkt dat dit onjuist is.");
+        } else if (response == "logged out") {
+            window.location.href = "login.php?url=" + window.location.pathname;
+        }
+    });
+
+    $("#newcomment").val("");
+
+    //reload post
+    $.get(
+        "API/loadPost.php",
+        $("#newcommentform").serialize()
+    ).done(function (data) {
+        $('#modal-response').html(fancyText(data));
+    });
+}
+
+function deletePost(postID) {
+    var formData = [{name: "postID", value: postID}];
+    $.post(
+        "API/deletePost.php",
+        formData
+    ).done(function (response) {
+        if (response == "frozen") {
+            alert("Je account is bevroren, dus je kan geen posts verwijderen. Contacteer een admin als je denkt dat dit onjuist is.");
+        } else if (response == "logged out") {
+            window.location.href = "login.php?url=" + window.location.pathname;
+        }
+    });
+    closeModal();
+    masonry(masonryMode);
+}

website/public/js/registerAndLogin.js

@@ -1,8 +1,23 @@
 function checkLoggedIn() {
-    if (confirm("You are already logged in!\nDo you want to logout?\nPress ok to logout.") == true) {
+    if (confirm("U bent al ingelogd!\nWilt u uitloggen?\nKlik ok om uit te loggen.") == true) {
         window.location.href = "logout.php";
     } else {
         window.location.href = "profile.php";
     }
-    document.getElementById("demo").innerHTML = x;
+}
+
+function emailAlert(){
+    alert("Bevestigingsemail is gestuurd!\n");
+}
+
+function bannedAlert(){
+    alert("Uw account is geband!");
+}
+
+function frozenAlert(){
+    alert("Uw account is bevroren!\n");
+}
+
+function emailNotConfirmed(){
+    alert("Uw account is nog niet bevestigd!\nEr is een nieuwe email gestuurd om uw account te bevestigen");
 }

website/public/js/search.js

@@ -0,0 +1,44 @@
+$(window).on('load', function () {
+    pageNumber();
+});
+
+// Search for the users and put them in the user list.
+function searchUsers() {
+    $.post(
+        "API/searchUsers.php",
+        $('#search-form').serialize()
+    ).done(function(data) {
+        if (!showFriends(data, "#search-users-list", 0, "profile.php", "GET")) {
+            $("#search-users-list").text("Niemand gevonden");
+        }
+    });
+}
+
+// Search for the groups and put them in the group list.
+function searchGroups() {
+    $.post(
+        "API/searchGroups.php",
+        $('#search-form').serialize()
+    ).done(function(data) {
+        if (!showGroups(data, "#search-groups-list")) {
+            $("#search-groups-list").text("Geen groepen gevonden");
+        }
+    });
+}
+
+// Get the page numbers and return them in the select.
+function pageNumber() {
+    var input = input2 = $('#search-form').serialize();
+    $.post(
+        "API/searchPageNumber.php",
+        input + "&option=user"
+    ).done(function (data) {
+        $('#user-pageselect').html(data);
+    });
+    $.post(
+        "API/searchPageNumber.php",
+        input2 + "&option=group"
+    ).done(function (data) {
+        $('#group-pageselect').html(data);
+    });
+}

website/public/login.php

@@ -5,48 +5,20 @@
     require_once("../queries/connect.php");
     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");
+    require_once("../queries/Facebook/autoload.php");
+
 ?>
 <body>
 <?php
-    session_start();
 
-    if(isset($_SESSION["userID"])){
+include("../views/homeLoginRegister.php");
-      echo "<script>
-                window.onload=checkLoggedIn();
-            </script>";
-    }
-
-    // Define variables and set to empty values
-    $uname = $psw ="";
-    $loginErr ="";
-
-    // Trying to login
-    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-        // Empty username or password field
-        if (empty($_POST["uname"]) || empty($_POST["psw"])) {
-            $loginErr = "Gebruikersnaam of wachtwoord is niet ingevuld";
-
-        }
-        else {
-            $uname = strtolower(test_input($_POST["uname"]));
-            $psw = test_input($_POST["psw"]);
-            $hash = getUser()["password"];
-            $userid = getUser()["userID"];
-
-            // If there's an account, go to the profile page
-            if(password_verify($psw, $hash)) {
-               $_SESSION["userID"] = $userid;
-               header("location: profile.php");
-
-            } else {
-               $loginErr = "Inloggegevens zijn niet correct";
-            }
-
-        }
-    }
 
 /* This view adds login view */
 include("../views/login-view.php");
 ?>
+<script src="js/loginRegisterModals.js"></script>;
 </body>
 </html>

website/public/logout.php

@@ -1,15 +1,4 @@
-<!DOCTYPE html>
-<html>
 <?php
-    include("../views/login_head.php");
+session_start();
-    require_once("../queries/connect.php");
+session_destroy();
-    include_once("../queries/login.php");
+header("Location: login.php");
-?>
-<body>
-<?php
-    session_start();
-    unset($_SESSION["userID"]);
-    header("Location: login.php");
-?>
-</body>
-</html>

website/public/manifest.json

@@ -0,0 +1,44 @@
+{
+  "name": "Web Application Manifest Sample",
+  "icons": [
+    {
+      "src": "launcher-icon-0-75x.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "launcher-icon-1x.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "launcher-icon-1-5x.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "launcher-icon-2x.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "launcher-icon-3x.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "launcher-icon-4x.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ],
+  "start_url": "index.html",
+  "display": "standalone",
+  "orientation": "portrait"
+}

website/public/profile.php

@@ -2,16 +2,22 @@
 <html>
 <head>
     <?php include("../views/head.php"); ?>
-    <script src="/js/masonry.js"></script>
+
+    <script src="js/masonry.js"></script>
+    <script src="js/post.js"></script>
     <style>
         @import url("styles/profile.css");
+        @import url("styles/post-popup.css");
+        @import url('https://fonts.googleapis.com/css?family=Anton');
     </style>
 </head>
 <body>
 <?php
-include("../queries/user.php");
+include_once("../queries/user.php");
-include("../queries/friendship.php");
+include_once("../queries/friendship.php");
-include("../queries/nicetime.php");
+include_once("../queries/nicetime.php");
+include_once("../queries/post.php");
+include_once("../queries/calcAge.php");
 
 if(empty($_GET["username"])) {
     $userID = $_SESSION["userID"];
@@ -19,10 +25,25 @@ if(empty($_GET["username"])) {
     $userID = getUserID($_GET["username"]);
 }
 
-$user = selectUser($userID);
+
+if (isset($_SESSION["userID"]) and !$user = selectUser($_SESSION["userID"], $userID)) {
+    header("HTTP/1.0 404 Not Found");
+    header("Location: error/404.php");
+    die();
+}
+
 $profile_friends = selectAllFriends($userID);
 $profile_groups = selectAllUserGroups($userID);
-$posts = selectAllUserPosts($userID);
+$showProfile = $user["showProfile"] || ($user["status"] == 'confirmed') || $_SESSION["userID"] == $userID;
+
+
+if ($userID == $_SESSION["userID"]) {
+    $friendship_status = -1;
+    $masonry_mode = 1;
+} else {
+    $friendship_status = $user["friend_status"];
+    $masonry_mode = 0;
+}
 
 /*
  * This view adds the main layout over the screen.
@@ -36,5 +57,17 @@ include("../views/profile.php");
 /* This adds the footer. */
 include("../views/footer.php");
 ?>
+
+<script src="js/friendButtons.js"></script>
+<script src="js/masonry.js"></script>
+<script>
+    $(document).ready(function() {
+        userID = <?= $userID ?>;
+        groupID = 0;
+        placeFriendButtons();
+
+        masonry(<?= $masonry_mode ?>);
+    });
+</script>
 </body>
 </html>

website/public/register.php

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html>
-<?php
-    include("../views/login_head.php");
-    require_once("../queries/connect.php");
-    include_once("../queries/register.php");
-    include_once("../queries/checkInput.php");
-?>
-<body>
-<?php
-    session_start();
-    if(isset($_SESSION["userID"])){
-        header("location: profile.php");
-    }
-    // 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;
-
-    // Trying to register an account
-    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-        checkInputChoice("name", "lettersAndSpace");
-        checkInputChoice("surname", "lettersAndSpace");
-
-        if (empty($_POST["bday"])) {
-            $bdayErr = "Geboortedatum is verplicht!";
-            $correct = false;
-
-        } else {
-          $bday = test_input($_POST["bday"]);
-        }
-
-        checkInputChoice("username", "username");
-        checkInputChoice("password", "longerEight");
-        checkInputChoice("confirmpassword", "");
-        matchPassword();
-        checkInputChoice("location", "lettersAndSpace");
-        checkInputChoice("email", "email");
-        registerCheck();
-    }
-/* This view adds register view */
-include("../views/register-view.php");
-?>
-</body>
-</html>

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 = prepareQuery("
+        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 = prepareQuery("
+        SELECT
+            `password`
+        FROM 
+            `user`
+        WHERE
+            `userID` = :userID
+        ");
+    $stmt->bindParam(":userID", $userID);
+    $stmt->execute();
+    $password = $stmt->fetch()["password"];
+    return password_verify($password, $hash);
+}

website/public/search.php

@@ -9,6 +9,8 @@
     <style>
         @import url("styles/search.css");
     </style>
+
+    <script src="js/search.js"></script>
 </head>
 <body>
 <?php

website/public/settings.php

@@ -2,7 +2,7 @@
 <html>
 <head>
     <?php
-    include("../views/head.php");
+    include_once("../views/head.php");
     include_once("../queries/connect.php");
     include_once("../queries/settings.php");
     ?>
@@ -12,27 +12,32 @@
 </head>
 <body>
 <?php
+$alertClass;
+$alertMessage;
 
-include("../views/main.php");
+// Select which button has been pressed.
-$notImplemented = new settingsMessage("angry", "Deze functie werkt nog niet :(");
-
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    switch ($_POST["form"]) {
+    try {
-        case "profile":
+        switch ($_POST["form"]) {
-            $result = updateSettings();
+            case "profile":
-            break;
+                checkUpdateSettings();
-        case "password":
+                break;
-            $result = changePassword();
+            case "password":
-            break;
+                changePassword();
-        case "email":
+                break;
-            $result = changeEmail();
+            case "email":
-            break;
+                changeEmail();
-        case "picture":
+                break;
-            updateProfilePicture();
+            case "picture":
-            $result = new settingsMessage("happy", "Deze melding doet nog niks nuttigs.");
+                updateAvatar();
-            break;
+                break;
+        }
+    } catch (AlertMessage $w) {
+        $alertClass = $w->getClass();
+        $alertMessage = $w->getMessage();
     }
 }
+include("../views/main.php");
 
 include("../views/settings-view.php");
 

website/public/styles/adminbutton.css

@@ -0,0 +1,3 @@
+#quick-links i {
+    font-size: 32px;
+}

website/public/styles/adminpanel.css

@@ -1,91 +1,68 @@
-.admin-panel {
-    margin: auto;
-    min-width: 800px;
-}
-
-.admin-title {
-    margin: 10px;
-    padding-bottom: 5px;
-    border-bottom: 4px solid #FBC02D;
-}
 
 .admin-panel input[type="radio"], input[type="checkbox"] {
-    height: auto;
+    vertical-align: middle;
+    height: 28px;
+    width: 28px;
+    margin: 2px;
 }
 
-.admin-batchactions, .admin-groupbatchactions {
+.table-checkbox {
-    display: inline-block;
+    width: 28px;
-    padding: 8px;
-    vertical-align: top;
-    border-radius: 10px;
-    border: 4px solid #FBC02D;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .admin-searchform {
     display: inline-block;
+    width: 100%;
 }
 
 .admin-searchbar {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-}
-
-.admin-searchinput {
-    margin-bottom: 10px;
-}
-
-.admin-filter, .admin-filtertype, .admin-groupfilter {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-    margin-right: 50px;
-    margin-left: 50px;
-}
-
-.admin-filter, .admin-groupfilter {
-    width: 120px;
-}
-
-.admin-users {
-    margin: 10px;
-}
-
-.admin-userheading {
-    width: auto;
-    float: left;
-}
-
-.admin-pageui {
-    text-align: right;
-    float: right;
-    width: auto;
     margin-bottom: 20px;
 }
 
-.usertitle {
+.admin-pageui {
-    width: 150px;
+    display: inline-block;
+    width: 100%;
+}
+
+.admin-pageselector {
+    display: inline-block;
+}
+
+.admin-users {
+    margin-top: 50px;
 }
 
 .usertable {
     width: 100%;
 }
 
-.usertable .table-checkbox {width: 20px}
+.table-checkbox {width: 20px}
-.usertable .table-username {width: 150px}
+.table-username {width: 150px}
-.usertable .table-status {width: 100px}
+.table-status {width: 100px}
-.usertable .table-action {width: 200px}
+.table-action {width: 200px}
 
 .usertable th, td {
     border-bottom: 1px solid #ddd;
     padding: 3px;
+    word-wrap: break-word;
 }
 
-.usertable tr {
+.usertable th, tr {
     text-align: left;
 }
 
 .usertable tr:hover {
     background-color: #f5f5f5;
 }
+
+.bancomment {
+    width: 80%;
+}
+
+.bancommentedit {
+    display: none;
+}
+
+.bancommentform input[type="text"] {
+    width: 80%;
+}

website/public/styles/chat.css

@@ -1,39 +1,76 @@
+
+body {
+    overflow: hidden;
+}
+
 /* Overall chat-screen */
 .chat {
     position: fixed;
+
     top: 80px;
     left: 256px;
-    padding: 15px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
-    display: inline-flex;
+
+    padding: 20px 0;
+
+    display: inline-block;
 }
 
-.chat-left {
+#chat-recent-panel {
     width: 256px;
     height: calc(100% - 100px);
-    margin: 0 10px;
-    overflow-y: auto;
-}
 
-.chat-right {
+    display: inline-block;
-    width: calc(100% - 256px - 40px);
+    float: left;
-    height: calc(100% - 80px);
+
-    margin-right: 10px;
+    overflow-y: auto;
 }
 
 /* Chat history. */
-.chat-history {
+#chat-history {
     overflow-y: auto;
-    height: 100%;
+    overflow-x: hidden;
+
+    width: calc(100% - 256px - 85px);
+    height: calc(100% - 80px);
+    margin-right: 10px;
+
     padding: 10px;
+
+    display: inline-block;
+    float: right;
+
+    word-wrap: break-word;
 }
 
 /* Chat-message takes the whole width of the chat area */
+.day-message {
+    width: 100%;
+    min-height: 40px;
+    padding: 10px 0;
+    clear: both;
+    text-align: center;
+}
+
+.day-message-content {
+    width: auto;
+    padding: 10px;
+
+    background-color: #F8F8F8;
+    color: #666;
+}
+
 .chat-message {
     width: 100%;
     min-height: 40px;
-    padding-top: 10px;
+    padding: 10px 0;
+    clear: both;
+}
+
+.chat-message::after {
+    content: '';
+    display: table;
     clear: both;
 }
 
@@ -46,20 +83,21 @@
 .chat-message-self {
     float: right;
     margin-right: 10px;
-    background-color: darkgreen;
+    background-color: #FBC02D;
-    color: white;
+    color: #333;
 }
 
 .chat-message-other {
     float: left;
     margin-left: 10px;
-    background-color: aquamarine;
+    background-color: #4CAF50;
+    color: white;
 }
 
 /* Chat reply field */
 
 .chat-field {
-    width: 100%;
+    width: calc(100% - 10px);
     display: table;
 }
 
@@ -77,7 +115,6 @@
     width: 100%;
     border: none;
     border-radius: 10px 0 0 10px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .chat-field input[type="submit"] {
@@ -87,10 +124,45 @@
     color: white;
     padding: 5px 10px;
     border-radius: 0 10px 10px 0;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .active-friend-chat {
-    background: aquamarine;
+    background: #4CAF50;
-    color: #333;
+    color: white;
+}
+
+.chat-message img {
+    max-width: 100%;
+}
+
+.chat-message a {
+    text-decoration: underline;
+}
+
+.chat-time {
+    color: #666666;
+    font-size: 12px;
+    margin-bottom: -3px;
+}
+
+.chat-message-other .chat-time {
+    text-align: right;
+}
+
+@media only screen and (max-width: 1080px) {
+    .chat-message-self, .chat-message-other {
+        max-width: 75%;
+    }
+    .chat {
+        left: 0;
+        width: 100%;
+    }
+    #chat-recent-panel {
+        left: 0;
+        width: 320px;
+    }
+    #chat-history {
+        left: 50%;
+        width: calc(100% - 390px);
+    }
 }

website/public/styles/footer.css

@@ -1,6 +1,5 @@
 footer {
-    width: calc(100% - 256px);
+    width: 100%;
-    margin-left: 256px;
 
     background-color: rgba(0,0,0,0.4);
 }

website/public/styles/header.css

@@ -7,7 +7,9 @@ header {
     height: 80px;
     width: 100%;
 
-    color: white;
+    color: #FFF;
+    font-weight: bold;
+    letter-spacing: 1px;
     background-color: #FBC02D;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
@@ -24,7 +26,8 @@ header {
 }
 
 #header-search {
-    padding-left: 42px;
+    margin: 24px 0 24px 32px;
+    vertical-align: middle;
 }
 
 
@@ -41,6 +44,16 @@ header div {
     width: 64px;
 }
 
-#own-profile-picture {
+#own-profile-picture, #open-notifications {
     cursor: pointer;
 }
+
+#open-notifications {
+    padding: 20px 20px 20px 0px;
+}
+
+@media only screen and (max-width: 1080px) {
+    #header-logo {
+        display: none;
+    }
+}

website/public/styles/index.css

@@ -1,20 +1,32 @@
 a.button {
     background-color: #C8CABD;
-    border-radius: 10px;
+    border-radius: 5px;
     color: black;
     cursor: pointer;
-    height: 50%;
+    padding: 8px 20px;
-    margin: 8px 0;
-    padding: 14px 20px;
-    width: 25%;
     font-family: Arial;
-    font-size: 16px;
+    font-size: 22px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
+}
+
+a.fbButton {
+    background-color: #3B5998;
+    border-radius: 5px;
+    color: black;
+    cursor: pointer;
+    padding: 8px 20px;
+    font-family: Arial;
+    font-size: 22px;
+    color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }
 
 /* Body */
 body {
-    height: 900px;
+    height: 100%;
-    background-color: #C8CABD;
+    background-color: #FBC02D;
     /*background-image: url(http://play.pokemonshowdown.com/fx/client-bg-shaymin.jpg);
     background-size: cover;
     background-attachment: fixed;*/
@@ -24,23 +36,6 @@ body {
     font-family: Arial, sans-serif;
 }
 
-/* The Close Button */
-.close {
-  /* Position it in the top right corner outside of the modal */
-    color: white;
-    font-size: 100px;
-    font-weight: bold;
-    position: absolute;
-    right: 25px;
-    top: 0;
-}
-
-/* Close button on hover */
-.close:hover,
-.close:focus {
-    color: red;
-    cursor: pointer;
-}
 
 /* inlogform */
 form {
@@ -48,10 +43,13 @@ form {
     border-radius: 12px;
     height: 80%;
     margin: auto;
-    width: 70%;
+    width: 600px;
-    overflow-y:auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+
 }
 
+
 /* inlog titel */
 h1 {
     padding: 8px;
@@ -61,87 +59,82 @@ h1 {
 
 /* registreer titel*/
 h2 {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
     font-size: 2.0em;
 }
 
+h3 {
+    padding: 8px;
+    text-align: center;
+    font-size: 1.5em;
+}
 
 input[type=text], input[type=password], input[type=email], input[type="date"] {
     box-sizing: border-box;
     border-color: #C8CABD;
     display: inline-block;
     height: 60%;
-    padding: 8px 20px;
-    margin: 4px 0;
-    width: 70%;
-}
-/*
-input[type=text], input[type=password], input[type=email], input[type="date"] {
-    border: 0px;
-    border-bottom: 4px solid lightgray;
-    border-radius: 0px;
-}*/
-
-button[type=submit] {
-    background-color: #C8CABD;
-    color: black  ;
-    cursor: pointer;
-    font-family: Arial;
     font-size: 16px;
-    width: 50%;
+    padding: 8px 10px;
+    margin: 4px 0;
+    width: 55%;
+}
+
+.middle{
+    text-align: center;
+}
+
+.center{
+    text-align: center;
+}
+
+button {
+    background-color: #C8CABD;
+    border-radius: 5px;
+    color: black;
+    cursor: pointer;
+    height: 50%;
+    padding: 8px 20px;
+    margin: 5px;
+    font-family: Arial;
+    font-size: 22px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }
 
 .error {
     font-family: Arial;
     font-size: 15px;
     color: red;
+    text-align: left;
 }
 
 label {
     display: block;
 }
 
-.left-arrow {
-    display: inline-block;
-    position: relative;
-    background-color: #C8CABD;
-    height: 30px;
-    width: 90px;
-    padding: 3px 3px 3px 0px;
-    text-align: center;
-    border-radius: 0px 10px 10px 0px;
-    font-size: 24px;
-
-}
-.left-arrow:after {
-    content: '';
-    display: block;
-    position: absolute;
-    right: 100%;
-    top: 0;
-    bottom: 0;
-    border-top: 15px solid transparent;
-    border-right: 20px solid #C8CABD;
-    border-bottom: 15px solid transparent;
-    border-left: 0px solid transparent;
-}
-
 /* padding voor registreer container */
 .login_containerregister {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
 }
 
 /* padding voor login_containers */
 .login_containerlogin {
-    padding:25px;
+    padding:8px;
     text-align: center;
 }
 
 /* padding voor foutmelding login */
 .login_containerfault {
-    padding: 16px;
+    padding: 4px;
+    text-align: center;
+    color: red;
+}
+
+.login_containerNoscript {
+    padding: 4px;
     text-align: center;
     color: red;
 }
@@ -159,24 +152,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: 550px;
+    height: 400px;
-    margin: 34px auto;
+    margin: 16px auto;
     overflow-y: auto;
     padding: 20px;
-    width: 50%;
+    width: 650px;
 }
 
-/*.platform {
+select{
-  width: 40%;
+    width: 18%;
-  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: 75px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: hidden; /* 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: 600px;
+    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
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 36px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 4px 16px;
+    background-color: #FBC02D;
+    color: black;
+}
+
+.modal-body {
+    padding: 2px 16px;
+}
+
+.modal-footer {
+    padding: 2px 8px;
+    background-color: #FBC02D;
+    color: black;
+}

website/public/styles/main.css

@@ -92,23 +92,31 @@ p {
     border-radius: 50%;
 }
 
+.online {
+    border: #4CAF50 solid 3px;
+}
+
+.offline {
+    border: #666666 solid 3px;
+}
+
 .group-picture {
     border-radius: 5px;
 }
 
 .item-box, .item-box-full-width {
-    margin: 20px 0 0 0;
     padding: 25px;
     background-color: #FFFFFF;
 }
 
 .item-box {
-    width: calc(50% - 60px);
+    width: calc(33% - 50px);
+    display: inline-table;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 1400px) {
     .item-box {
-        width: calc(100% - 50px);
+        width: calc(100% - 50px)!important;
     }
 }
 
@@ -166,6 +174,7 @@ textarea {
 
 textarea:hover, input:hover, select:hover {
     border-radius: 10px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
 }
 
 textarea:focus, input:focus, select:focus {
@@ -174,6 +183,19 @@ textarea:focus, input:focus, select:focus {
 }
 
 /* All buttons */
+button.red {
+    background-color: firebrick;
+}
+
+button.green {
+    background-color: forestgreen;
+}
+
+button.gray{
+    background-color: #FFF;
+    color: #333;
+}
+
 button,
 input[type="submit"],
 input[type="reset"] {
@@ -214,6 +236,7 @@ td {
 
 /* Custom title box, appears instantaneously */
 a[data-title]:hover,
+i[data-title]:hover,
 img[data-title]:hover,
 span[data-title]:hover,
 div[data-title]:hover {
@@ -221,6 +244,7 @@ div[data-title]:hover {
 }
 
 a[data-title]:hover:after,
+i[data-title]:hover:after,
 img[data-title]:hover:after,
 span[data-title]:hover:after,
 div[data-title]:hover:after {
@@ -232,8 +256,6 @@ div[data-title]:hover:after {
     top: 150%;
     z-index: 200;
     white-space: nowrap;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
     border-radius: 3px;
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     background-color: #333;
@@ -241,3 +263,45 @@ div[data-title]:hover:after {
     line-height: normal;
     font-family: Arial, sans-serif;
 }
+
+.friend-item, .group-item {
+    cursor: pointer;
+    transition-duration: 250ms;
+}
+
+.friend-item button, .group-item button {
+    background: none;
+    color: inherit;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    text-align: left;
+}
+
+.friend-item:hover, .group-item:hover {
+    background: #FBC02D;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.friend-name {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+@media only screen and (max-width: 1080px) {
+    body {
+        font-size: 28px!important;
+    }
+    button, input, select {
+        font-size: 28px;
+        height: 42px;
+    }
+    textarea {
+        font-size: 28px;
+    }
+    input[type="checkbox"], input[type="radio"] {
+        width: 28px;
+        height: 28px;
+    }
+
+}

website/public/styles/menu.css

@@ -5,16 +5,16 @@
 
     left: 0;
     top: 80px;
-    height: calc(100% - 80px);
+    height: calc(100% - 120px);
-    width: 256px;
+    width: 236px;
 
-    background-color: #EEE;
+    padding: 20px 10px;
-    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
 }
 
 .menu section {
-    margin: 0 5px 10px 5px;
+    margin-bottom: 10px;
-    background-color: white;
+    border-radius: 5px;
+    background-color: #FFFFFF;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
@@ -24,6 +24,7 @@
 
 .nav-list li {
     padding: 5px 20px;
+    border-radius: 4px;
 }
 
 .more-item {
@@ -33,28 +34,9 @@
     cursor: pointer;
 }
 
-.friend-item, .group-item {
-    cursor: pointer;
-    transition-duration: 250ms;
-}
-
-.friend-item:hover, .group-item:hover {
-    background: #FBC02D;
-    color: white;
-}
-
-.menu button {
-    background: none;
-    color: inherit;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    text-align: left;
-}
-
 #notification-center {
     left: auto;
-    width: 256px;
+    width: 236px;
     right: -256px;
 }
 
@@ -67,4 +49,55 @@
     color: #4CAF50;
     font-size: 42px;
     padding: 7px;
+    transition-duration: 250ms;
+}
+
+#quick-links i:hover {
+    color: #FBC02D;
+}
+
+.notification-options {
+    width: 100%;
+    display: none;
+}
+
+.notification-options button {
+    display: inline-block;
+    padding: 5px 20px;
+    width: auto;
+}
+
+.accept-notification:hover {
+    color: #4CAF50;
+}
+
+.deny-notification:hover {
+    color: firebrick;
+}
+
+.friend-item:hover .notification-options {
+    display: inline-block;
+}
+
+.menu button {
+    background: none;
+    color: inherit;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    text-align: left;
+}
+
+@media only screen and (max-width: 1080px) {
+    #contact-menu, #notification-center {
+        display: none;
+        background: rgba(0, 0, 0, 0.4);
+        width: calc(50% - 20px);
+    }
+    .content {
+        margin-left: 0;
+    }
+    #quick-links i {
+        font-size: 48px!important;
+    }
 }

website/public/styles/message-page.css

@@ -0,0 +1,28 @@
+body {
+    background-color: #FBC02D;
+}
+
+.password-change {
+    height: 100%;
+    margin: auto;
+}
+
+.top-logo {
+    text-align: center;
+}
+
+.item-box {
+    margin: 30px auto auto;
+    display: block;
+}
+.top-logo img {
+    width: 50%;
+}
+
+.error-page {
+    text-align: center;
+}
+
+.error-page img {
+    vertical-align: middle;
+}

website/public/styles/mobilefriendly.css

@@ -0,0 +1,47 @@
+/* MAIN */
+body {
+    font-size: 28px!important;
+}
+button {
+    font-size: 28px;
+}
+
+/* HEADER */
+#header-logo {
+    display: none;
+}
+
+/* PROFILE */
+.post-box {
+    width: calc(100% - 65px);
+}
+
+/* MENU */
+#contact-menu, #notification-center {
+    display: none;
+    background: rgba(0, 0, 0, 0.4);
+    width: calc(50% - 20px);
+}
+.content {
+    margin-left: 0;
+}
+#quick-links i {
+    font-size: 48px!important;
+}
+
+/* CHAT */
+.chat-message-self, .chat-message-other {
+    max-width: 75%;
+}
+.chat {
+    left: 0;
+    width: 100%;
+}
+#chat-recent-panel {
+    left: 0;
+    width: 320px;
+}
+#chat-history {
+    left: 50%;
+    width: calc(100% - 390px);
+}

website/public/styles/post-popup.css

@@ -0,0 +1,95 @@
+/* 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: 50px 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%;
+}
+
+.post-content a {
+    text-decoration: underline;
+}
+
+.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%;
+}
+
+.nietslecht-text {
+    font-family: Impact, Anton, sans-serif;
+    text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
+}
+
+.nietslecht {
+}
+
+.nietslecht img {
+    vertical-align: middle;
+    height: 24px;
+    width: 24px;
+}
+
+.deleteButton {
+    background-color: firebrick;
+    float: right;
+}

website/public/styles/profile.css

@@ -1,15 +1,105 @@
-.profile-box {
+/* New */
-    min-height: 150px;
+
-    padding: 25px;
+.alertbox {
-    background-color: #FFFFFF;
+    display: none;
+    background-color: firebrick;
 }
 
-.profile-box .profile-picture, .profile-box .group-picture {
+.alerttext {
+    color: white;
+}
+
+.user-box {
+    text-align: center;
+}
+
+.status-buttons-container {
+    position: relative;
+    float: left;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container, .group-button-container {
+    position: relative;
+    float: right;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container div, .status-buttons-container div {
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container button, .status-buttons-container button, .group-button-container button {
+    display: block;
+    float: right;
+
+    margin: 7px 0;
+
+    font-size: 18px;
+}
+.status-buttons-container button {
+    float: left;
+}
+
+.group-button-container button {
+    float: right;
+}
+
+.empty-button {
+    background: none;
+    cursor: auto;
+}
+.empty-button:active {
+    box-shadow: none;
+}
+
+.profile-info {
+    display: inline-block;
+
+    min-width: 250px;
+    width: auto;
+    padding-top: 30px;
+}
+
+.main-picture {
+    position: relative;
+    border-width: 5px;
+
+    display: inline-block;
     width: 150px;
     height: 150px;
-    margin: 0 20px 20px 0;
+    margin-bottom: -45px;
+
+    object-fit: cover;
+    vertical-align: middle;
 }
 
+.group-picture {
+    border: none;
+}
+
+.fancy-button span {
+    display: none;
+}
+
+.fancy-button:hover {
+    text-align: right;
+}
+
+.fancy-button i {
+    display: inline-block;
+}
+
+.fancy-button:hover span {
+    display: inline-block;
+    margin-right: 5px;
+}
+
+/* Old */
+
 .profile-box h1.profile-username {
     padding-top: 50px;
 }
@@ -18,24 +108,24 @@
 }
 
 div.posts {
-    padding-top: 20px;
     width: calc(100% + 20px);
     display: inline-flex;
 }
 
 div.posts div.post {
     display: block;
-    margin: 20px 0 0 0;
     padding: 10px;
     width: calc(100% - 40px);
     cursor: pointer;
     transition-duration: 250ms;
+    word-wrap: break-word;
+}
+
+div.posts div.post a {
+    text-decoration: underline;
 }
 
 div.posts div.post:hover {
-    /*margin: 15px 0 0 -5px;*/
-    /*padding: 15px;*/
-    /*z-index: 20;*/
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 
@@ -53,7 +143,7 @@ div.posts .post form input, div.posts .post form textarea {
     width: calc(100% - 15px);
 }
 
-div.posts .post form input[type="submit"] {
+div.posts .post form input[type="submit"], .post button{
     width: 100%;
 }
 
@@ -62,6 +152,17 @@ div.posts .post form textarea.newpost {
     height: 100px;
 }
 
+.post .post-date {
+    float: right;
+    color: #aaaaaa;
+    font-size: 0.8em;
+}
+
+.noposts {
+    display: none;
+    text-align: center;
+}
+
 @media only screen and (max-width: 1500px) {
     .post-box {
         width: calc(50% - 68px);
@@ -69,28 +170,12 @@ div.posts .post form textarea.newpost {
 }
 
 /* mobile */
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1080px) {
     .post-box {
         width: calc(100% - 65px);
     }
-}
+    .modal {
-
+        left: 0!important;
-.post .post-date {
+        width: 100%!important;
-    float: right;
+    }
-    color: #aaaaaa;
-    font-size: 0.8em;
-}
-
-.profile-button {
-    float: right;
-    padding: 10px;
-    border-radius: 5px;
-    background-color: #4CAF50;
-    color: #FFFFFF;
-    transition-duration: 250ms;
-    cursor: pointer;
-}
-
-.profile-button:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }

website/public/styles/search.css

@@ -15,3 +15,15 @@
     display: inline-block;
     vertical-align: top;
 }
+
+.user-pageselect, .searchleft h4, .group-pageselect, .searchright h4 {
+    display: inline-block;
+}
+
+.user-pageselect, .group-pageselect {
+    float: right;
+}
+
+li.search-item:hover{
+    background-color: #FBC02D;
+}

website/public/styles/settings.css

@@ -32,6 +32,11 @@
     text-align: right;
 }
 
+.settings-password, .settings-email {
+    width: calc(50% - 60px);
+    display: inline-flex;
+}
+
 .settings-password label, .settings-email label {
     text-align: left;
 }