Merge branch 'joey-testing' into 'master'

Modal for register

See merge request !134

website/public/login.php

@@ -19,6 +19,14 @@
             </script>";
     }
 
+    // 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";
+
     // Define variables and set to empty values
     $user = $psw ="";
     $loginErr = $resetErr ="";
@@ -46,7 +54,96 @@
                           </script>";
                 }
                 break;
+            case "register":
+                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){
+                    echo "<script>
+                            window.onload = function() {
+                              $('#registerModal').show();
+                            }
+                          </script>";
+                    $genericErr = $e->getMessage();
+                }
         }
     }
 //    // Trying to login

website/public/styles/index.css

@@ -28,10 +28,12 @@ body {
 form {
     /*background-color: #a87a87;*/
     border-radius: 12px;
-    height: 85%;
+    height: 80%;
     margin: auto;
-    width: 80%;
+    width: 600px;
     overflow-y:auto;
+    overflow-x: hidden;
+
 }
 
 
@@ -130,7 +132,7 @@ label {
     margin: 34px auto;
     overflow-y: auto;
     padding: 20px;
-    width: 45%;
+    width: 600px;
 }
 
 select{
@@ -164,7 +166,7 @@ ul {
     margin: auto;
     padding: 0;
     border: 1px solid #888;
-    width: 500px;
+    width: 589px;
     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;
@@ -204,7 +206,9 @@ ul {
     color: black;
 }
 
-.modal-body {padding: 2px 16px;}
+.modal-body {
+    padding: 2px 16px;
+}
 
 .modal-footer {
     background-color: #FBC02D;

website/queries/login.php

@@ -13,6 +13,7 @@ function getUser() {
       `email` LIKE :username
     ");
 
+    $stmt->bindParam(":username", test_input($_POST["user"]));
     $stmt->execute();
     return $stmt->fetch(PDO::FETCH_ASSOC);
 }

website/views/login-view.php

@@ -18,7 +18,7 @@
                    placeholder="Voer uw gebruikersnaam/email in"
                    name="user"
                    value="<?php echo $user ?>"
-                   title="Moet 6 of meer karakters bevatten"
+                   title="Moet een geldige gebruiker zijn"
                    >
         </div>
 
@@ -86,32 +86,232 @@
 
         </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++) {
+                                    $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>
+                            *<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 modal
-    var modal = document.getElementById('myModal');
-
     // Get the button that opens the modal
+    var modal = document.getElementById('myModal');
     var btn = document.getElementById("myBtn");
 
+    // Get the modal
+    var registerModal = document.getElementById('registerModal');
+    var registerBtn = document.getElementById("registerBtn");
+
     // Get the <span> element that closes the modal
     var span = document.getElementsByClassName("close")[0];
+    var registerSpan = document.getElementsByClassName("close")[1];
 
     // 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 <span> (x), close the modal
     span.onclick = function() {
         modal.style.display = "none";
     }
-
+    registerSpan.onclick = function() {
-    // When the user clicks anywhere outside of the modal, close it
+        registerModal.style.display = "none";
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
     }
 </script>