Made different files for login and register

website/public/login.php

@@ -28,7 +28,7 @@
     $year_date = "jaar";
 
     // Define variables and set to empty values
-    $user = $psw ="";
+    $user = $psw = $remember ="";
     $loginErr = $resetErr ="";
 
     if ($_SERVER["REQUEST_METHOD"] == "POST") {
@@ -55,107 +55,9 @@
                 }
                 break;
             case "register":
-                try {
+                include("register.php");
-                    $name = test_input(($_POST["name"]));
-                    checkInputChoice($name, "lettersAndSpaces");
-                } catch(lettersAndSpacesException $e){
-                    $correct = false;
-                    $nameErr = $e->getMessage();
-                }
-
-                try {
-                    $surname = test_input(($_POST["surname"]));
-                    checkInputChoice($surname, "lettersAndSpaces");
-                }
-                catch(lettersAndSpacesException $e){
-                    $correct = false;
-                    $surnameErr = $e->getMessage();
-                }
-
-                try{
-                    $day_date = test_input(($_POST["day_date"]));
-                    $month_date = test_input(($_POST["month_date"]));
-                    $year_date = test_input(($_POST["year_date"]));
-                    $bday = $year_date . "-" . $month_date . "-" . $day_date;
-                    checkInputChoice($bday, "bday");
-                } catch(bdayException $e){
-                    $correct = false;
-                    $bdayErr = $e->getMessage();
-                }
-
-                try{
-                    $username = str_replace(' ', '', test_input(($_POST["username"])));
-                    checkInputChoice($username, "username");
-                } catch(usernameException $e){
-                    $correct = false;
-                    $usernameErr = $e->getMessage();
-                }
-
-                try{
-                    $password = str_replace(' ', '', test_input(($_POST["password"])));
-                    checkInputChoice($password, "longerEight");
-                    matchPassword();
-                } catch(passwordException $e){
-                    $correct = false;
-                    $passwordErr = $e->getMessage();
-                } catch(confirmPasswordException $e){
-                    $correct = false;
-                    $confirmPasswordErr = $e->getMessage();
-                }
-
-                try{
-                    $location = test_input(($_POST["location"]));
-                    checkInputChoice($location, "lettersAndSpaces");
-                } catch(lettersAndSpacesException $e){
-                    $correct = false;
-                    $locationErr = $e->getMessage();
-                }
-
-                try{
-                    $email = test_input(($_POST["email"]));
-                    checkInputChoice($email, "email");
-                    $confirmEmail = test_input(($_POST["confirmEmail"]));
-                    matchEmail();
-                } catch(emailException $e){
-                    $correct = false;
-                    $emailErr = $e->getMessage();
-                } catch(confirmEmailException $e){
-                    $correct = false;
-                    $confirmEmailErr = $e->getMessage();
-                }
-
-                try{
-                    $captcha = $_POST['g-recaptcha-response'];
-                    checkCaptcha($captcha);
-                } catch(captchaException $e){
-                    $correct = false;
-                    $captchaErr = $e->getMessage();
-                }
-
-                try {
-                    getIp();
-                    registerCheck($correct);
-                    sendConfirmEmailUsername($username);
-                } catch(registerException $e){
-                    echo "<script>
-                            window.onload = function() {
-                              $('#registerModal').show();
-                            }
-                          </script>";
-                    $genericErr = $e->getMessage();
         }
     }
-    }
-//    // Trying to login
-//    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-//        try{
-//            $uname = ($_POST["uname"]);
-//            validateLogin($_POST["uname"], $_POST["psw"]);
-//        } catch(loginException $e) {
-//            $loginErr = $e->getMessage();
-//        }
-//    }
-
 /* This view adds login view */
 include("../views/login-view.php");
 ?>

website/public/register(stash).php

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<?php
+    include("../views/login_head.php");
+    require_once("../queries/connect.php");
+    include_once("../queries/register.php");
+    include_once("../queries/checkInput.php");
+    include_once("../queries/emailconfirm.php");
+?>
+<body>
+<?php
+    session_start();
+    if(isset($_SESSION["userID"])){
+        header("location: login.php");
+    }
+    // define variables and set to empty values
+    $name = $surname = $bday = $username = $password = $confirmpassword = $location = $housenumber = $email = $confirmEmail = $captcha = $ip = "";
+    $genericErr = $nameErr = $surnameErr = $bdayErr = $usernameErr = $passwordErr = $confirmpasswordErr = $locationErr = $housenumberErr = $emailErr = $confirmEmailErr = $captchaErr = "";
+    $correct = true;
+    $day_date = "dag";
+    $month_date = "maand";
+    $year_date = "jaar";
+
+    // Trying to register an account
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        try {
+            $name = test_input(($_POST["name"]));
+            checkInputChoice($name, "lettersAndSpaces");
+        } catch(lettersAndSpacesException $e){
+            $correct = false;
+            $nameErr = $e->getMessage();
+        }
+
+        try {
+            $surname = test_input(($_POST["surname"]));
+            checkInputChoice($surname, "lettersAndSpaces");
+        }
+        catch(lettersAndSpacesException $e){
+            $correct = false;
+            $surnameErr = $e->getMessage();
+        }
+
+        try{
+            $day_date = test_input(($_POST["day_date"]));
+            $month_date = test_input(($_POST["month_date"]));
+            $year_date = test_input(($_POST["year_date"]));
+            $bday = $year_date . "-" . $month_date . "-" . $day_date;
+            checkInputChoice($bday, "bday");
+        } catch(bdayException $e){
+            $correct = false;
+            $bdayErr = $e->getMessage();
+        }
+
+        try{
+            $username = str_replace(' ', '', test_input(($_POST["username"])));
+            checkInputChoice($username, "username");
+        } catch(usernameException $e){
+            $correct = false;
+            $usernameErr = $e->getMessage();
+        }
+
+        try{
+            $password = str_replace(' ', '', test_input(($_POST["password"])));
+            checkInputChoice($password, "longerEight");
+            matchPassword();
+        } catch(passwordException $e){
+            $correct = false;
+            $passwordErr = $e->getMessage();
+        } catch(confirmPasswordException $e){
+            $correct = false;
+            $confirmPasswordErr = $e->getMessage();
+        }
+
+        try{
+            $location = test_input(($_POST["location"]));
+            checkInputChoice($location, "lettersAndSpaces");
+        } catch(lettersAndSpacesException $e){
+            $correct = false;
+            $locationErr = $e->getMessage();
+        }
+
+        try{
+            $email = test_input(($_POST["email"]));
+            checkInputChoice($email, "email");
+            $confirmEmail = test_input(($_POST["confirmEmail"]));
+            matchEmail();
+        } catch(emailException $e){
+            $correct = false;
+            $emailErr = $e->getMessage();
+        } catch(confirmEmailException $e){
+            $correct = false;
+            $confirmEmailErr = $e->getMessage();
+        }
+
+        try{
+            $captcha = $_POST['g-recaptcha-response'];
+            checkCaptcha($captcha);
+        } catch(captchaException $e){
+            $correct = false;
+            $captchaErr = $e->getMessage();
+        }
+
+        try {
+            getIp();
+            registerCheck($correct);
+            sendConfirmEmailUsername($username);
+        } catch(registerException $e){
+            $genericErr = $e->getMessage();
+        }
+    }
+/* This view adds register view */
+include("../views/register-view.php");
+?>
+</body>
+</html>

website/public/register.php

@@ -1,115 +1,90 @@
-<!DOCTYPE html>
-<html>
 <?php
-    include("../views/login_head.php");
+try {
-    require_once("../queries/connect.php");
-    include_once("../queries/register.php");
-    include_once("../queries/checkInput.php");
-    include_once("../queries/emailconfirm.php");
-?>
-<body>
-<?php
-    session_start();
-    if(isset($_SESSION["userID"])){
-        header("location: login.php");
-    }
-    // define variables and set to empty values
-    $name = $surname = $bday = $username = $password = $confirmpassword = $location = $housenumber = $email = $confirmEmail = $captcha = $ip = "";
-    $genericErr = $nameErr = $surnameErr = $bdayErr = $usernameErr = $passwordErr = $confirmpasswordErr = $locationErr = $housenumberErr = $emailErr = $confirmEmailErr = $captchaErr = "";
-    $correct = true;
-    $day_date = "dag";
-    $month_date = "maand";
-    $year_date = "jaar";
-
-    // Trying to register an account
-    if ($_SERVER["REQUEST_METHOD"] == "POST") {
-        try {
     $name = test_input(($_POST["name"]));
     checkInputChoice($name, "lettersAndSpaces");
-        } catch(lettersAndSpacesException $e){
+} catch(lettersAndSpacesException $e){
     $correct = false;
     $nameErr = $e->getMessage();
-        }
+}
 
-        try {
+try {
     $surname = test_input(($_POST["surname"]));
     checkInputChoice($surname, "lettersAndSpaces");
-        }
+}
-        catch(lettersAndSpacesException $e){
+catch(lettersAndSpacesException $e){
     $correct = false;
     $surnameErr = $e->getMessage();
-        }
+}
 
-        try{
+try{
     $day_date = test_input(($_POST["day_date"]));
     $month_date = test_input(($_POST["month_date"]));
     $year_date = test_input(($_POST["year_date"]));
     $bday = $year_date . "-" . $month_date . "-" . $day_date;
     checkInputChoice($bday, "bday");
-        } catch(bdayException $e){
+} catch(bdayException $e){
     $correct = false;
     $bdayErr = $e->getMessage();
-        }
+}
 
-        try{
+try{
     $username = str_replace(' ', '', test_input(($_POST["username"])));
     checkInputChoice($username, "username");
-        } catch(usernameException $e){
+} catch(usernameException $e){
     $correct = false;
     $usernameErr = $e->getMessage();
-        }
+}
 
-        try{
+try{
     $password = str_replace(' ', '', test_input(($_POST["password"])));
     checkInputChoice($password, "longerEight");
     matchPassword();
-        } catch(passwordException $e){
+} catch(passwordException $e){
     $correct = false;
     $passwordErr = $e->getMessage();
-        } catch(confirmPasswordException $e){
+} catch(confirmPasswordException $e){
     $correct = false;
     $confirmPasswordErr = $e->getMessage();
-        }
+}
 
-        try{
+try{
     $location = test_input(($_POST["location"]));
     checkInputChoice($location, "lettersAndSpaces");
-        } catch(lettersAndSpacesException $e){
+} catch(lettersAndSpacesException $e){
     $correct = false;
     $locationErr = $e->getMessage();
-        }
+}
 
-        try{
+try{
     $email = test_input(($_POST["email"]));
     checkInputChoice($email, "email");
     $confirmEmail = test_input(($_POST["confirmEmail"]));
     matchEmail();
-        } catch(emailException $e){
+} catch(emailException $e){
     $correct = false;
     $emailErr = $e->getMessage();
-        } catch(confirmEmailException $e){
+} catch(confirmEmailException $e){
     $correct = false;
     $confirmEmailErr = $e->getMessage();
-        }
+}
 
-        try{
+try{
     $captcha = $_POST['g-recaptcha-response'];
     checkCaptcha($captcha);
-        } catch(captchaException $e){
+} catch(captchaException $e){
     $correct = false;
     $captchaErr = $e->getMessage();
-        }
+}
 
-        try {
+try {
     getIp();
     registerCheck($correct);
     sendConfirmEmailUsername($username);
-        } catch(registerException $e){
+} catch(registerException $e){
+    echo "<script>
+                            window.onload = function() {
+                              $('#registerModal').show();
+                            }
+                          </script>";
     $genericErr = $e->getMessage();
-        }
+}
-    }
-/* This view adds register view */
-include("../views/register-view.php");
-?>
-</body>
-</html>

website/public/styles/index.css

@@ -28,10 +28,10 @@ body {
 form {
     /*background-color: #a87a87;*/
     border-radius: 12px;
-    height: 80%;
+    height: 85%;
     margin: auto;
     width: 600px;
-    overflow-y:auto;
+    overflow-y: auto;
     overflow-x: hidden;
 
 }
@@ -46,13 +46,13 @@ h1 {
 
 /* registreer titel*/
 h2 {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
     font-size: 2.0em;
 }
 
 h3 {
-    padding: 16px;
+    padding: 8px;
     text-align: center;
     font-size: 1.5em;
 }
@@ -63,7 +63,7 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     display: inline-block;
     height: 60%;
     font-size: 16px;
-    padding: 8px 20px;
+    padding: 8px 10px;
     margin: 4px 0;
     width: 55%;
 }
@@ -79,7 +79,7 @@ button {
     cursor: pointer;
     height: 50%;
     padding: 8px 20px;
-    margin: 10px;
+    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);
@@ -90,6 +90,7 @@ button {
     font-family: Arial;
     font-size: 15px;
     color: red;
+    text-align: left;
 }
 
 label {
@@ -98,19 +99,19 @@ label {
 
 /* padding voor registreer container */
 .login_containerregister {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
 }
 
 /* padding voor login_containers */
 .login_containerlogin {
-    padding:16px;
+    padding:8px;
     text-align: center;
 }
 
 /* padding voor foutmelding login */
 .login_containerfault {
-    padding: 16px;
+    padding: 4px;
     text-align: center;
     color: red;
 }
@@ -129,7 +130,7 @@ label {
     background-attachment: fixed;*/
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     height: 400px;
-    margin: 34px auto;
+    margin: 16px auto;
     overflow-y: auto;
     padding: 20px;
     width: 600px;
@@ -149,12 +150,12 @@ ul {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
-    padding-top: 100px; /* Location of the box */
+    padding-top: 30px; /* Location of the box */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
+    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 */
 }
@@ -166,7 +167,7 @@ ul {
     margin: auto;
     padding: 0;
     border: 1px solid #888;
-    width: 589px;
+    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;
@@ -189,7 +190,7 @@ ul {
 .close {
     color: white;
     float: right;
-    font-size: 28px;
+    font-size: 36px;
     font-weight: bold;
 }
 
@@ -201,7 +202,7 @@ ul {
 }
 
 .modal-header {
-    padding: 2px 16px;
+    padding: 4px 16px;
     background-color: #FBC02D;
     color: black;
 }

website/queries/login.php

@@ -13,7 +13,7 @@ function getUser() {
       `email` LIKE :username
     ");
 
-    $stmt->bindParam(":username", test_input($_POST["user"]));
+    $stmt->bindValue(":username", test_input($_POST["user"]));
     $stmt->execute();
     return $stmt->fetch(PDO::FETCH_ASSOC);
 }
@@ -42,6 +42,9 @@ function validateLogin($username, $password){
                     </script>";
             } else {
                 $_SESSION["userID"] = $userID;
+                if($_POST[rememberMe] == 1){
+                    ini_set("session.gc_maxlifetime", "10");
+                }
                 header("location: profile.php");
             }
         } else {

website/views/bdayInput.php

@@ -0,0 +1,37 @@
+<select name="day_date" >
+    <option>dag</option>
+    <?php
+    for($i=1; $i<32; $i++) {
+        $i = sprintf("%02d", $i);
+        ?>
+        <option value="<?= $i ?>" <?php submitselect($day_date, $i)?>><?= $i ?></option>
+        <?php
+    }
+    ?>
+</select>
+<select name="month_date">
+    <option>Maand</option>
+    <option value="01" <?php submitselect($month_date, "01")?>>Januari</option>
+    <option value="02" <?php submitselect($month_date, "02")?>>Februari</option>
+    <option value="03" <?php submitselect($month_date, "03")?>>Maart</option>
+    <option value="04" <?php submitselect($month_date, "04")?>>April</option>
+    <option value="05" <?php submitselect($month_date, "05")?>>Mei</option>
+    <option value="06" <?php submitselect($month_date, "06")?>>Juni</option>
+    <option value="07" <?php submitselect($month_date, "07")?>>Juli</option>
+    <option value="08" <?php submitselect($month_date, "08")?>>Augustus</option>
+    <option value="09" <?php submitselect($month_date, "09")?>>September</option>
+    <option value="10" <?php submitselect($month_date, "10")?>>Oktober</option>
+    <option value="11" <?php submitselect($month_date, "11")?>>November</option>
+    <option value="12" <?php submitselect($month_date, "12")?>>December</option>
+</select>
+<select name="year_date">
+    <option>Jaar</option>
+    <?php
+    $year = (new DateTime)->format("Y");
+    for($i=$year; $i > $year - 100; $i--) {
+        ?>
+        <option value="<?= $i ?>" <?php submitselect($year_date, $i)?>><?= $i ?></option>
+        <?php
+    }
+    ?>
+</select>

website/views/forgotPasswordModal.php

@@ -0,0 +1,35 @@
+<!-- Trigger/Open The Modal -->
+<button id="myBtn" class="button">Wachtwoord vergeten</button>
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+          return= $correct
+          method="post"
+          name="forgotPassword">
+
+        <!-- Modal content -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <span class="close">&times;</span>
+                <h3>Voer uw emailadres in</h3>
+            </div>
+            <div class="modal-body">
+                <input type="text"
+                       placeholder="Voer uw email in"
+                       name="forgotEmail"
+                       title="Voer een email in">
+            </div>
+            <div class="modal-footer">
+                <div class="login_containerfault"><span><?php echo $resetErr; ?></span></div>
+                <button type="submit"
+                        value="reset"
+                        name="submit"
+                        id="frm1_submit">
+                    Reset password
+                </button>
+            </div>
+        </div>
+
+    </form>
+</div>

website/views/login-view.php

@@ -32,6 +32,11 @@
                    >
         </div>
 
+        <div class="login_containerlogin">
+            <label><b>Onthoud mij</b></label>
+            <input type="checkbox" name="rememberMe" value=1><br>
+        </div>
+
         <!-- Error message -->
         <div class="login_containerfault"><span><?php echo $loginErr; ?></span></div>
 
@@ -49,269 +54,52 @@
 
 <!-- Button for going to the register screen -->
 <div class="login_containerlogin">
-    <a href="https://myhyvesbookplus.nl/register" class="button">Registreer een account</a>
+<!--    <a href="https://myhyvesbookplus.nl/register" class="button">Registreer een account</a>-->
 
-    <!-- Trigger/Open The Modal -->
-    <button id="myBtn" class="button">Wachtwoord vergeten</button>
-
-    <!-- The Modal -->
-    <div id="myModal" class="modal">
-        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
-              return= $correct
-              method="post"
-              name="forgotPassword">
-
-        <!-- Modal content -->
-        <div class="modal-content">
-            <div class="modal-header">
-                <span class="close">&times;</span>
-                <h3>Voer uw emailadres in</h3>
-            </div>
-            <div class="modal-body">
-                <input type="text"
-                       placeholder="Voer uw email in"
-                       name="forgotEmail"
-                       title="Voer een email in">
-            </div>
-            <div class="modal-footer">
-                <div class="login_containerfault"><span><?php echo $resetErr; ?></span></div>
-                <button type="submit"
-                        value="reset"
-                        name="submit"
-                        id="frm1_submit">
-                    Reset password
-                </button>
-            </div>
-        </div>
-
-        </form>
-    </div>
-
-    <!-- Trigger/Open The Modal -->
-    <button id="registerBtn" class="button">Registreer een account</button>
-
-    <!-- The Modal -->
-    <div id="registerModal" class="modal">
-        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
-              return= $correct
-              method="post"
-              name="forgotPassword">
-
-            <!-- Modal content -->
-            <div class="modal-content">
-                <div class="modal-header">
-                    <span class="close">&times;</span>
-                    <h3>Registreer uw account</h3>
-                </div>
-                <div class="modal-body">
-                    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
-                          return= $correct
-                          method="post">
-
-                        <!-- 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="1996/01/01"-->
-                            <!--                   data-fv-date-max=""-->
-                            <!--                   data-date="" data-date-format="DD MMMM YYYY"-->
-                            <!--                   >-->
-                            <select name="day_date" >
-                                <option>dag</option>
     <?php
-                                for($i=1; $i<32; $i++) {
+        include("../views/forgotPasswordModal.php");
-                                    $i = sprintf("%02d", $i);
+        include("../views/registerModal.php");
     ?>
-                                    <option value="<?= $i ?>" <?php submitselect($day_date, $i)?>><?= $i ?></option>
-                                    <?php
-                                }
-                                ?>
-                            </select>
-                            <select name="month_date">
-                                <option>Maand</option>
-                                <option value="01" <?php submitselect($month_date, "01")?>>Januari</option>
-                                <option value="02" <?php submitselect($month_date, "02")?>>Februari</option>
-                                <option value="03" <?php submitselect($month_date, "03")?>>Maart</option>
-                                <option value="04" <?php submitselect($month_date, "04")?>>April</option>
-                                <option value="05" <?php submitselect($month_date, "05")?>>Mei</option>
-                                <option value="06" <?php submitselect($month_date, "06")?>>Juni</option>
-                                <option value="07" <?php submitselect($month_date, "07")?>>Juli</option>
-                                <option value="08" <?php submitselect($month_date, "08")?>>Augustus</option>
-                                <option value="09" <?php submitselect($month_date, "09")?>>September</option>
-                                <option value="10" <?php submitselect($month_date, "10")?>>Oktober</option>
-                                <option value="11" <?php submitselect($month_date, "11")?>>November</option>
-                                <option value="12" <?php submitselect($month_date, "12")?>>December</option>
-                            </select>
-                            <select name="year_date">
-                                <option>Jaar</option>
-                                <?php
-                                $year = (new DateTime)->format("Y");
-                                for($i=$year; $i > $year - 100; $i--) {
-                                    ?>
-                                    <option value="<?= $i ?>" <?php submitselect($year_date, $i)?>><?= $i ?></option>
-                                    <?php
-                                }
-                                ?>
-                            </select>
-                            *<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>
-                            <ul>
-                                <li>Minstens 6 karakters</li>
-                            </ul>
-                        </div>
-
-
-                        <!-- 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>
-                            <ul>
-                                <li>Minstens 8 karakters</li>
-                            </ul>
-                        </div>
-                        <!-- 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>Locatie</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="text"
-                                   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>
-
-                        <!-- Register email -->
-                        <div class="login_containerregister">
-                            <label><b>Herhaal email</b></label>
-                            <input type="text"
-                                   placeholder="Herhaal uw email"
-                                   name="confirmEmail"
-                                   value="<?php echo $confirmEmail ?>"
-                                   id="email"
-                                   title="Herhaal uw email">
-                            *<span class="error"> <?php echo $confirmEmailErr;?></span>
-                        </div>
-
-                        <div class="login_containerregister">
-                            <div class="g-recaptcha" data-sitekey="6Lc72xIUAAAAADumlWetgENm7NGd9Npyo0c_tYYQ"></div>
-                            <span class="error"> <?php echo $captchaErr;?></span>
-                        </div>
-
-                </div>
-                <div class="modal-footer">
-                    <div class="login_containerfault"><span><?php echo $resetErr; ?></span></div>
-                    <button type="submit"
-                            value="register"
-                            name="submit"
-                            id="frm1_submit">
-                        Registreer
-                    </button>
-                </div>
-            </div>
-
-        </form>
-    </div>
 </div>
 
 <script>
-    // Get the button that opens the modal
+// Get the button that opens the modal
-    var modal = document.getElementById('myModal');
+var modal = document.getElementById('myModal');
-    var btn = document.getElementById("myBtn");
+var btn = document.getElementById("myBtn");
 
-    // Get the modal
+// Get the modal
-    var registerModal = document.getElementById('registerModal');
+var registerModal = document.getElementById('registerModal');
-    var registerBtn = document.getElementById("registerBtn");
+var registerBtn = document.getElementById("registerBtn");
 
-    // Get the <span> element that closes the modal
+// Get the <span> element that closes the modal
-    var span = document.getElementsByClassName("close")[0];
+var span = document.getElementsByClassName("close")[0];
-    var registerSpan = document.getElementsByClassName("close")[1];
+var registerSpan = document.getElementsByClassName("close")[1];
 
-    // When the user clicks the button, open the modal
+// When the user clicks the button, open the modal
-    btn.onclick = function() {
+    btn.onclick = function () {
         modal.style.display = "block";
     }
-    registerBtn.onclick = function() {
+
+    registerBtn.onclick = function () {
         registerModal.style.display = "block";
     }
 
-    // When the user clicks on <span> (x), close the modal
+// When the user clicks on <span> (x), close the modal
-    span.onclick = function() {
+    span.onclick = function () {
         modal.style.display = "none";
     }
-    registerSpan.onclick = function() {
+    registerSpan.onclick = function () {
         registerModal.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";
+        }
+    }
 </script>

website/views/register-view.php

@@ -41,14 +41,6 @@
         <!-- Register birthday -->
         <div class="login_containerregister">
             <label><b>Geboortedatum(Dag/Maand/Jaar)</b></label>
-<!--            <input type="date"-->
-<!--                   name="bday"-->
-<!--                   value="--><?php //echo $bday ?><!--"-->
-<!--                   id="bday"-->
-<!--                   placeholder="1996/01/01"-->
-<!--                   data-fv-date-max=""-->
-<!--                   data-date="" data-date-format="DD MMMM YYYY"-->
-<!--                   >-->
             <select name="day_date" >
                     <option>dag</option>
                 <?php

website/views/registerModal.php

@@ -0,0 +1,155 @@
+<!-- Trigger/Open The Modal -->
+<button id="registerBtn" class="button">Registreer een account</button>
+
+<!-- The Modal -->
+<div id="registerModal" class="modal">
+    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+          return= $correct
+          method="post"
+          name="forgotPassword">
+
+        <!-- Modal content -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <span class="close">&times;</span>
+                <h3>Registreer uw account</h3>
+            </div>
+            <div class="modal-body">
+                <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+                      return= $correct
+                      method="post">
+
+                    <!-- 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>
+                        <?php
+                        include("../views/bdayInput.php");
+                        ?>
+                        *<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>
+                        <ul>
+                            <li>Minstens 6 karakters</li>
+                        </ul>
+                    </div>
+
+
+                    <!-- 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>
+                        <ul>
+                            <li>Minstens 8 karakters</li>
+                        </ul>
+                    </div>
+                    <!-- 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>Locatie</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="text"
+                               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>
+
+                    <!-- Register email -->
+                    <div class="login_containerregister">
+                        <label><b>Herhaal email</b></label>
+                        <input type="text"
+                               placeholder="Herhaal uw email"
+                               name="confirmEmail"
+                               value="<?php echo $confirmEmail ?>"
+                               id="email"
+                               title="Herhaal uw email">
+                        *<span class="error"> <?php echo $confirmEmailErr;?></span>
+                    </div>
+
+                    <div class="login_containerregister">
+                        <div class="g-recaptcha" data-sitekey="6Lc72xIUAAAAADumlWetgENm7NGd9Npyo0c_tYYQ"></div>
+                        <span class="error"> <?php echo $captchaErr;?></span>
+                    </div>
+
+            </div>
+            <div class="modal-footer">
+                <div class="login_containerfault"><span><?php echo $resetErr; ?></span></div>
+                <button type="submit"
+                        value="register"
+                        name="submit"
+                        id="frm1_submit">
+                    Registreer
+                </button>
+            </div>
+        </div>
+
+    </form>
+</div>