(feat): added captcha for invalid login

Views/template/header.phtml

@@ -88,9 +88,6 @@
                 <div class="col-sm" id="loginStatus">
                     <?php
 
-                    if ($view->loginError) {
-                        require_once('Views/template/loginError.phtml');
-                    }
                     if(!$view->user->isLoggedIn()) {
                         require_once('Views/template/loginModal.phtml');
                     }

Views/template/loginError.phtml

@@ -0,0 +1,18 @@
+<span class="ms-5 me-5 row alert alert-danger" role="alert"><?= $view->loginError ?></span>
+<div class="row captcha-container">
+    <!-- CAPTCHA Display -->
+    <div class="form-floating mb-3 col">
+        <input type="text" class="form-control" id="captchaCode" value="<?php
+        // Generate a simple 5-character CAPTCHA
+        $captcha = substr(str_shuffle("ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"), 0, 5);
+        echo $captcha;
+        ?>" readonly>
+        <label for="captchaCode">CAPTCHA Code</label>
+    </div>
+
+    <!-- CAPTCHA Input -->
+    <div class="form-floating mb-3 col">
+        <input type="text" class="form-control" id="captchaInput" name="captchaInput" placeholder="Enter CAPTCHA" required>
+        <label for="captchaInput">Enter CAPTCHA</label>
+    </div>
+</div>

Views/template/loginModal.phtml

@@ -1,7 +1,11 @@
-<button type="button" class="btn bg-primary btn-outline-primary text-light m-auto" data-bs-toggle="modal" data-bs-target="#loginModal">
+<button type="button" class="btn bg-primary btn-outline-primary text-light m-auto" data-bs-toggle="modal"
+        data-bs-target="#loginModal">
     Login
 </button>
-<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
+<?= isset($view->loginError) ? '<div class="modal-backdrop fade show"></div>' : '' ?>
+<div class="modal fade <?= isset($view->loginError) ? 'show' : '' ?>" id="loginModal" tabindex="-1"
+     aria-labelledby="loginModalLabel" aria-hidden="<?= isset($view->loginError) ? 'false' : 'true' ?>"
+     style="<?= isset($view->loginError) ? 'display: block;' : '' ?>">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -12,17 +16,23 @@
                 <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
                     <div class="mb-3">
                         <label for="username" class="form-label">Username</label>
-                        <input type="text" class="form-control" id="username" name="username" placeholder="Username" required>
+                        <input type="text" class="form-control" id="username" name="username" placeholder="Username"
+                               required>
                     </div>
                     <div class="mb-3">
                         <label for="password" class="form-label">Password</label>
-                        <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
+                        <input type="password" class="form-control" id="password" name="password" placeholder="Password"
+                               required>
                     </div>
-                    <button type="submit" class="btn bg-primary btn-outline-primary text-light" name="loginButton">Login</button>
+                    <?php if (isset($view->loginError)) { include('Views/template/loginError.phtml');} ?>
+                    <button type="submit" class="btn bg-primary btn-outline-primary text-light" name="loginButton">Login
+                    </button>
                 </form>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-warning btn-outline-warning text-light" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-warning btn-outline-warning text-light" data-bs-dismiss="modal">
+                    Close
+                </button>
             </div>
         </div>
     </div>

index.php

@@ -1,10 +1,10 @@
 <?php
 // load required classes
 require_once('Models/UserDataSet.php');
-require_once("logincontroller.php");
 // make a view class
 $view = new stdClass();
 $view->pageTitle = 'Home';
+require_once("logincontroller.php");
 
 
 //if (isset($_POST['applyAdvFilters'])) {

logincontroller.php

@@ -4,17 +4,31 @@ require_once("Models/User.php");
 
 $user = new User();
 $userDataSet = new UserDataSet();
-
 if (isset($_POST["loginButton"])) {
     $username = $_POST["username"];
     $password = hash("sha256", $_POST["password"]);
+    if (isset($view->loginError)) {
+        $generatedCaptcha = $_POST["generatedCaptcha"];
+        $userCaptcha = $_POST["captcha"];
 
+        if ($generatedCaptcha !== $userCaptcha) {
+            $view->loginError = "Incorrect CAPTCHA.";
+            return;
+        }
+    }
     // create a new student dataset object that we can generate data from
+    // Error handling is VERY hacky, because of the lack of JS usage.
     if($userDataSet->checkUserCredentials($username, $password)) {
         $user->Authenticate($username, $password);
-    }
-    else {
-        echo "Error in Uname / Pass";
+        // Unset modal boolean to hide it's usage.
+        unset($_GET['modal']);
+    } else {
+    // Add error message and redirect to display modal
+    $view->loginError = "Invalid username or password.";
+    // Set modal boolean to header to allow modal to reappear
+    $queryParams = http_build_query(['modal' => 'true']);
+    header("Location: {$_SERVER['PHP_SELF']}?$queryParams");
+    exit;
 }
 }
 
@@ -22,3 +36,7 @@ if (isset($_POST["logoutButton"]))
 {
     $user->logout();
 }
+
+if (isset($_GET['modal']) && $_GET['modal'] === 'true') {
+    $view->loginError = $view->loginError ?? "Please solve the Captcha and try again.";
+}