<?php
require_once "labClass.php";
$con = new labClass();
?>
<div class="container mt-3" style="margin-top:2px;">
  <div class="mt-4 p-5 bg-white text-dark rounded">
    <h6>Login registration form:</h6>
    <sub id="dis"></sub>

    <div class="row">
      <!-- Username -->
      <div class="col">
        <h6>Description/Username:</h6>
        <input type="text" id="username" name="username"
               style="width:100%; height:40px; border-radius:12px; border-color:white;"
               placeholder="Enter username" required>
        <sup class="text-danger" id="uErr"></sup>
      </div>

      <!-- Password -->
      <div class="col">
        <h6>Password:</h6>
        <input type="password" id="password" name="password"
               style="width:100%; height:40px; border-radius:12px; border-color:white;"
               placeholder="Enter password" required>
        <sup class="text-danger" id="pErr"></sup>
      </div>

      <!-- Button -->
      <div class="col-sm justify-content-center">
        <div class="form-floating mb-3 mt-3">
          <button type="submit" id="submit" name="submit"
                  class="btn btn-primary" style="height:60px;"
                  onclick="saveUser()">Register</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="dispR">
  <?php
   require_once "secretinfoRstff.php";
  ?>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function saveUser() {
  var ecc = 0;
  var user = $('#user').val().trim();
  var username = $('#username').val().trim();
  var password = $('#password').val().trim();
  var submit = $('#submit').val();

  // Username validation
  if (username === "") {
    ecc++;
    $('#uErr').html("Username is required!");
  } else {
    $('#uErr').html("");
  }

  // Password validation
  /*if (password === "") {
    ecc++;
    $('#pErr').html("Password is required!");
  } else {
    $('#pErr').html("");
  }*/

  if (ecc === 0) {
    $.post("secretinfostffpro.php",
      { submit:submit,user:user,username:username,password:password },
      function (data) {
        $('#dispR').html(data).show();
      }
    );

    // Clear fields
    $('#username').val('');
    $('#password').val('');
  }
}
</script>
