Modal added for resetting password

website/public/login.php

@@ -19,17 +19,42 @@
 
     // Define variables and set to empty values
     $uname = $psw ="";
-    $loginErr ="";
+    $loginErr = $resetErr ="";
 
-    // Trying to login
     if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        switch ($_POST["submit"]) {
+            case "login":
                 try {
                     $uname = ($_POST["uname"]);
                     validateLogin($_POST["uname"], $_POST["psw"]);
                 } catch(loginException $e) {
                     $loginErr = $e->getMessage();
                 }
+                break;
+            case "reset":
+                try {
+                    validateEmail($_POST["forgotEmail"]);
+                } catch (emailException $e){
+                    $resetErr = $e->getMessage();
+                    echo "<script>
+                            window.onload = function() {
+                              $('#myModal').show();
                             }
+                          </script>";
+                }
+                break;
+
+        }
+    }
+//    // Trying to login
+//    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+//        try{
+//            $uname = ($_POST["uname"]);
+//            validateLogin($_POST["uname"], $_POST["psw"]);
+//        } catch(loginException $e) {
+//            $loginErr = $e->getMessage();
+//        }
+//    }
 
 /* This view adds login view */
 include("../views/login-view.php");

website/public/styles/index.css

@@ -3,11 +3,11 @@ a.button {
     border-radius: 5px;
     color: black;
     cursor: pointer;
-    height: 50%;
     padding: 8px 20px;
-    width: 50%;
     font-family: Arial;
-    font-size: 20px;
+    font-size: 22px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }
 
 /* Body */
@@ -28,12 +28,13 @@ body {
 form {
     /*background-color: #a87a87;*/
     border-radius: 12px;
-    height: 75%;
+    height: 85%;
     margin: auto;
     width: 80%;
     overflow-y:auto;
 }
 
+
 /* inlog titel */
 h1 {
     padding: 8px;
@@ -48,6 +49,11 @@ h2 {
     font-size: 2.0em;
 }
 
+h3 {
+    padding: 16px;
+    text-align: center;
+    font-size: 1.5em;
+}
 
 input[type=text], input[type=password], input[type=email], input[type="date"] {
     box-sizing: border-box;
@@ -60,14 +66,22 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     width: 55%;
 }
 
-button[type=submit] {
+.center{
+    text-align: center;
+}
+
+button {
     background-color: #C8CABD;
+    border-radius: 5px;
     color: black;
     cursor: pointer;
+    height: 50%;
+    padding: 8px 20px;
+    margin: 10px;
     font-family: Arial;
     font-size: 22px;
-    height: 30px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-    width: 120px;
+
 }
 
 .error {
@@ -80,31 +94,6 @@ label {
     display: block;
 }
 
-.left-arrow {
-    display: inline-block;
-    position: relative;
-    background-color: #C8CABD;
-    height: 25px;
-    width: 120px;
-    padding: 3px 3px 3px 3px;
-    text-align: center;
-    border-radius: 0px 5px 5px 0px;
-    font-size: 22px;
-
-}
-.left-arrow:after {
-    content: '';
-    display: block;
-    position: absolute;
-    right: 100%;
-    top: 0;
-    bottom: 0;
-    border-top: 12px solid transparent;
-    border-right: 20px solid #C8CABD;
-    border-bottom: 12px solid transparent;
-    border-left: 0px solid transparent;
-}
-
 /* padding voor registreer container */
 .login_containerregister {
     padding: 16px;
@@ -137,24 +126,84 @@ label {
     background-repeat: repeat-x;
     background-attachment: fixed;*/
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-    height: 500px;
+    height: 400px;
     margin: 34px auto;
     overflow-y: auto;
     padding: 20px;
     width: 45%;
 }
 
-/*.platform {
-  width: 40%;
-  margin: 34px auto;
-}*/
-
-@-webkit-keyframes animatezoom {
-    from {-webkit-transform: scale(0)}
-    to {-webkit-transform: scale(1)}
-}
-
 ul {
     font-family: Arial;
     font-size: 16px;
 }
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    position: relative;
+    background-color: #FFFFFF;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 500px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 2px 16px;
+    background-color: #FBC02D;
+    color: black;
+}
+
+.modal-body {padding: 2px 16px;}
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #FBC02D;
+    color: black;
+}

website/views/login-view.php

@@ -8,7 +8,8 @@
     <!-- Login content  -->
     <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
           return=$correct
-          method="post">
+          method="post"
+          name="login">
 
         <!-- Login name -->
         <div class="login_containerlogin">
@@ -37,15 +38,79 @@
         <!-- Button for logging in -->
         <div class="login_containerlogin">
             <button type="submit"
-                   value="Login"
+                    value="login"
                     name="submit"
                     id="frm1_submit">
-            Login
+            Inloggen
             </button>
         </div>
     </form>
+</div>
+
     <!-- Button for going to the register screen -->
     <div class="login_containerlogin">
         <a href="https://myhyvesbookplus.nl/register" class="button">Registreer een account</a>
+
+        <!-- Trigger/Open The Modal -->
+        <button id="myBtn" class="button">Wachtwoord vergeten</button>
+
+        <!-- The Modal -->
+        <div id="myModal" class="modal">
+            <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+                  return= $correct
+                  method="post"
+                  name="forgotPassword">
+
+            <!-- Modal content -->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <span class="close">&times;</span>
+                    <h3>Voer uw emailadres in</h3>
+                </div>
+                <div class="modal-body">
+                    <input type="text"
+                           placeholder="Voer uw email in"
+                           name="forgotEmail"
+                           title="Voer een email in">
+                </div>
+                <div class="modal-footer">
+                    <div class="login_containerfault"><span><?php echo $resetErr; ?></span></div>
+                    <button type="submit"
+                            value="reset"
+                            name="submit"
+                            id="frm1_submit">
+                        Reset password
+                    </button>
                 </div>
             </div>
+
+            </form>
+        </div>
+    </div>
+<script>
+    // Get the modal
+    var modal = document.getElementById('myModal');
+
+    // Get the button that opens the modal
+    var btn = document.getElementById("myBtn");
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks the button, open the modal
+    btn.onclick = function() {
+        modal.style.display = "block";
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+        modal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+</script>

website/views/login_head.php

@@ -7,7 +7,7 @@
     <link rel="stylesheet"
           type="text/css"
           href="styles/index.css">
-    <script src="js/jqeury.js"></script>
+    <script src="js/jquery.js"></script>
     <script src="js/registerAndLogin.js"></script>
     <script src='https://www.google.com/recaptcha/api.js'></script>
 </head>

website/views/register-view.php

@@ -126,7 +126,7 @@
         <!-- Button for registering -->
         <div class="login_containerlogin">
             <!-- Button for going back to login screen -->
-            <a href="https://myhyvesbookplus.nl/login.php" class="left-arrow">Login</a>
+            <a href="https://myhyvesbookplus.nl/login.php" class="button">Annuleren</a>
 
             <button type="submit"
                    value="Registreer uw account"