2017-01-18 16:08:50 +01:00
16 changed files with 697 additions and 387 deletions
--- a/website/public/img/notbad.jpg
+++ b/website/public/img/notbad.jpg
--- a/website/public/js/menu.js
+++ b/website/public/js/menu.js
@@ -1,5 +1,6 @@
 $(document).ready(function() {
    $(".extra-menu-items").hide();
+    $("#menu-back").hide();

    // Show more friends
    $("#more-friends-click").click(function() {
--- a/website/public/login.php
+++ b/website/public/login.php
@@ -1,13 +1,44 @@
 <!DOCTYPE html>
 <html>
 <?php
-include("../views/login_head.php");
+    include("../views/login_head.php");
+    include_once("../queries/connect.php");
+    include_once("../queries/login.php");
 ?>
 <body>
 <?php
-/*
- * This view adds login view
- */
+    session_start();
+
+    // Define variables and set to empty values
+    $uname = $psw ="";
+    $loginErr ="";
+
+    // Trying to login
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        // Empty username or password field
+        if (empty($_POST["uname"]) || empty($_POST["psw"])) {
+            $loginErr = "Gebruikersnaam of wachtwoord is niet ingevuld";
+
+        }
+        else {
+            $uname=strtolower($_POST["uname"]);
+            $psw=$_POST["psw"];
+            $hash=hashPassword()["password"];
+            $userid=hashPassword()["userID"];
+            
+            // If there's an account, go to the profile page
+            if(password_verify($psw.$uname, $hash)) {
+               $_SESSION["userID"] = $userid;
+               header("location: /profile.php");
+
+            } else {
+               $loginErr = "Inloggegevens zijn niet correct";
+            }
+
+        }
+    }
+
+/* This view adds login view */
 include("../views/login-view.php");
 ?>
 </body>
--- a/website/public/register.php
+++ b/website/public/register.php
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+<?php
+    include("../views/login_head.php");
+    include_once("../queries/connect.php");
+    include_once("../queries/register.php");
+
+?>
+<body>
+<?php
+    session_start();
+
+    // define variables and set to empty values
+    $name = $surname = $bday = $username = $password = $confirmpassword = $location = $housenumber = $email = "";
+    $genericErr = $nameErr = $surnameErr = $bdayErr = $usernameErr = $passwordErr = $confirmpasswordErr = $locationErr = $housenumberErr = $emailErr = "";
+    $correct = true;
+
+    // Saves information of filling in the form
+    if (isset($_POST["name"])) {
+        $name = $_POST["name"];
+    }
+
+    if (isset($_POST["surname"])) {
+        $surname = $_POST["surname"];
+    }
+
+    if (isset($_POST["bday"])) {
+        $bday = $_POST["bday"];
+    }
+
+    if (isset($_POST["username"])) {
+        $username = $_POST["username"];
+    }
+
+    if (isset($_POST["password"])) {
+        $password = $_POST["password"];
+    }
+
+    if (isset($_POST["location"])) {
+        $location = $_POST["location"];
+    }
+
+    if (isset($_POST["housenumber"])) {
+        $housenumber = $_POST["housenumber"];
+    }
+
+    if (isset($_POST["email"])) {
+        $email = $_POST["email"];
+    }
+
+    // Trying to register an account
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        if (empty($_POST["name"])) {
+            $nameErr = "Naam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
+                $nameErr = "Alleen letters en spaties zijn toegestaan!";
+                $correct = false;
+
+            }
+        }
+
+        if (empty($_POST["surname"])) {
+            $surnameErr = "Achternaam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
+                $surnameErr = "Alleen letters en spaties zijn toegestaan!";
+                $correct = false;
+
+            }
+        }
+        if (empty($_POST["bday"])) {
+            $bdayErr = "Geboortedatum is verplicht!";
+            $correct = false;
+
+        }
+
+        if (empty($_POST["username"])) {
+            $usernameErr = "Gebruikersnaam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (strlen($username) < 6) {
+                $usernameErr = "Gebruikersnaam moet minstens 6 karakters bevatten";
+                $correct = false;
+
+            } else if (getExistingUsername() == 1){
+                $usernameErr = "Gebruikersnaam bestaat al";
+                $correct = false; 
+
+            }
+        }
+
+        if (empty($_POST["password"])) {
+            $passwordErr = "Wachtwoord is verplicht!";
+            $correct = false;
+
+        } else {
+            if (strlen($password) < 8) {
+                $passwordErr = "Wachtwoord moet minstens 8 karakters bevatten";
+                $correct = false;
+
+            }
+        }
+
+        if (empty($_POST["confirmpassword"])) {
+            $confirmpasswordErr = "Herhaal wachtwoord!";
+            $correct = false;
+
+        }
+
+        if ($_POST["password"] != $_POST["confirmpassword"]) {
+            $confirmpasswordErr = "Wachtwoorden matchen niet";
+            $correct = false;
+
+        }
+
+        if (empty($_POST["location"])) {
+            $locationErr = "Straatnaam is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!preg_match("/^[a-zA-Z ]*$/",$location)) {
+                $locationErr = "Alleen letters en spaties zijn toegestaan!";
+                $correct = false;
+
+            }
+        }
+
+        if (empty($_POST["email"])) {
+            $emailErr = "Email is verplicht!";
+            $correct = false;
+
+        } else {
+            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+                $emailErr = "Geldige email invullen!";
+                $correct = false;
+
+            } else if (getExistingEmail() == 1){
+                $emailErr = "Email bestaat al";
+                $correct = false;
+
+            }
+        }
+
+        // Checks if everything is filled in correctly
+        if ($correct == false){
+            $genericErr = "Bepaalde velden zijn verkeerd of niet ingevuld!";
+
+        } else {
+            registerAccount();
+            header("location: login.php");
+
+        }
+    }
+
+/* This view adds register view */
+include("../views/register-view.php");
+?>
+</body>
+</html>
--- a/website/public/styles/index.css
+++ b/website/public/styles/index.css
@@ -13,6 +13,19 @@ a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
 }

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

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

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

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

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

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

 /* inlog titel */
@@ -152,6 +172,13 @@ label {
    text-align: center;
 }

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

@keyframes animatezoom {
--- a/website/public/template_sql.php
+++ b/website/public/template_sql.php
@@ -4,7 +4,6 @@
 <body>
 <?php

-// database gegevens zijn elders opgeslagen
 include_once("../queries/connect.php");
 include_once("../queries/friendship.php");

--- a/website/queries/friendship.php
+++ b/website/queries/friendship.php
@@ -15,8 +15,9 @@ function selectAllFriends($db, $userID) {
        `friendship`.`user1ID` = $userID AND
        `friendship`.`user2ID` = `user`.`userID` OR
        `friendship`.`user2ID` = $userID AND
-        `friendship`.`user1ID` = `user`.`userID`"
-    );
+        `friendship`.`user1ID` = `user`.`userID` AND
+        `user`.`role` != 3
+    ");
 }


--- a/website/queries/group_member.php
+++ b/website/queries/group_member.php
@@ -0,0 +1,21 @@
+<?php
+
+function selectAllGroupsFromUser($db, $userID) {
+    return $db->query("
+    SELECT
+        `group_page`.`name`,
+        `group_page`.`picture`
+    FROM
+        `group_page`
+    INNER JOIN
+        `group_member`
+    WHERE
+        `group_member`.`userID` = $userID AND
+        `group_member`.`groupID` = `group_page`.`groupID` AND
+        `group_page`.`status` != 0
+    ");
+}
+
+
+
+?>
--- a/website/queries/group_page.php
+++ b/website/queries/group_page.php
@@ -0,0 +1,56 @@
+<?php
+
+function selectGroupById($db, $groupID) {
+    return $db->query("
+    SELECT
+        `group_page`.`name`,
+        `group_page`.`picture`,
+        `group_page`.`description`,
+        `group_page`.`status`,
+        `group_page`.`creationdate`
+    FROM
+        `group_page`
+    WHERE
+        `group_page`.`groupID` = $groupID
+    ");
+}
+
+function select20GroupsFromN($db, $n) {
+    return $db->query("
+    SELECT
+        `group_page`.`groupID`,
+        `group_page`.`name`,
+        `group_page`.`picture`,
+        `group_page`.`description`,
+        `group_page`.`status`,
+        `group_page`.`creationdate`
+    FROM
+        `group_page`
+    ORDER BY
+        `group_page`.`name` ASC
+    LIMIT
+        $n, 20
+    ");
+}
+
+function select20GroupsByStatusFromN($db, $n, $status) {
+    return $db->query("
+    SELECT
+        `group_page`.`groupID`,
+        `group_page`.`name`,
+        `group_page`.`picture`,
+        `group_page`.`description`,
+        `group_page`.`status`,
+        `group_page`.`creationdate`
+    FROM
+        `group_page`
+    WHERE
+    	`group_page`.`status` = $status
+    ORDER BY
+        `group_page`.`name` ASC
+    LIMIT
+        $n, 20
+    ");
+}
+
+?>
--- a/website/queries/login.php
+++ b/website/queries/login.php
@@ -0,0 +1,19 @@
+<?php
+
+function hashPassword() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `password`,
+      `userID`
+    FROM
+      `user`
+    WHERE
+      `username` LIKE :username
+    ");
+
+    $stmt->bindParam(":username", $_POST["uname"]);
+    $stmt->execute();
+    return $stmt->fetch(PDO::FETCH_ASSOC);
+}
+
+?>
--- a/website/queries/register.php
+++ b/website/queries/register.php
@@ -0,0 +1,62 @@
+<?php
+
+function getExistingUsername() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      `username`
+    FROM
+      `user`
+    WHERE
+      `username` LIKE :username
+    ");
+
+    $stmt->bindParam(":username", $_POST["username"]);
+    $stmt->execute();
+    return $stmt->rowCount();
+
+}
+
+function getExistingEmail() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT * FROM `user` WHERE `email` = :email
+    ");
+
+    $stmt->bindParam(":email", $_POST["email"]);
+    $stmt->execute();
+    return $stmt->rowCount();
+}
+
+function registerAccount() {
+    $stmt = $GLOBALS["db"]->prepare("
+    INSERT INTO
+      `user`(fname,
+             lname,
+             birthdate,
+             username,
+             password,
+             location,
+             email)
+    VALUES(
+      :fname,
+      :lname,
+      :bday,
+      :username,
+      :password,
+      :location,
+      :email
+    )");
+
+    $hash=password_hash($_POST["password"].(strtolower($_POST["username"])), PASSWORD_DEFAULT);
+
+    $stmt->bindParam(":fname", $_POST["name"]);
+    $stmt->bindParam(":lname", $_POST["surname"]);
+    $stmt->bindParam(":bday", $_POST["bday"]);
+    $stmt->bindParam(":username", $_POST["username"]);
+    $stmt->bindParam(":password", $hash);
+    $stmt->bindParam(":location", $_POST["location"]);
+    $stmt->bindParam(":email", $_POST["email"]);
+
+    $stmt->execute();
+    $stmt->rowCount();
+}
+?>
--- a/website/views/login-view.php
+++ b/website/views/login-view.php
@@ -1,256 +1,49 @@
-<?php
-    // define variables and set to empty values
-    $name = $surname = $bday = $username = $password = $confirmpassword = $streetname = $housenumber = $email = "";
-    $passwordErr = $confirmpasswordErr = "";
-    $correct = true;
-
-    if (isset($_POST["name"])) {
-      $name = $_POST["name"];
-    }
-
-    if (isset($_POST["surname"])) {
-      $surname = $_POST["surname"];
-    }
-
-    if (isset($_POST["bday"])) {
-      $bday = $_POST["bday"];
-    }
-
-    if (isset($_POST["username"])) {
-      $username = $_POST["username"];
-    }
-
-    if (isset($_POST["password"])) {
-      $password = $_POST["password"];
-    }
-
-    if (isset($_POST["streetname"])) {
-      $streetname = $_POST["streetname"];
-    }
-
-    if (isset($_POST["housenumber"])) {
-      $housenumber = $_POST["housenumber"];
-    }
-
-    if (isset($_POST["email"])) {
-      $email = $_POST["email"];
-    }
-
-    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-      if ($_POST["password"]!= $_POST["confirmpassword"]) {
-          $passwordErr = "Wachtwoorden matchen niet";
-          $confirmpasswordErr = "Wachtwoorden matchen niet";
-          $correct = false;
-          ?>
-          <script>window.onload = function() {
-            document.getElementById('id01').style.display='block'
-          }</script>
-          <?php
-      }
-    }
-?>
 <div>
    <img style="width:50%;margin-left:25%"
         src="img/top-logo.png"
         alt="MyHyvesbook+">
 </div>

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

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

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

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

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