<?php
  $pageTitle = "Bookmark - Register";
  $cssPath = "../css/register.css";
  $resetPath = "../css/reset.css";
  include("../header.php");
  include("../connect.php");
?>

<div class="logo">
  <img src="../img/bookmarkLogo.png" alt="Bookmark">
</div>

<div class="registerContainer">
  <div class="registerWindow">
    <h1>Register</h1>
    <br>
    <img class="dividerLine" src="../img/divider.png" alt="fancy divider">
    <br>
    <form name="register" action="regsuccess.php" method="POST" onsubmit="return validateForm(this)">
      <ul>
        <li>
          <label for="username">Username*: </label>
          <input type="text" name="username">
        </li>
        <li>
          <label for="email">E-Mail*: </label>
          <input type="text" name="email">
        </li>
        <li>
          <label for="name">Name: </label>
          <input type="text" name="name">
        </li>
        <li>
          <label for="surname">Surname: </label>
          <input type="text" name="surname">
        </li>
        <li>
          <label for="password">Password*: </label>
          <input type="password" name="password">
        </li>
        <li>
          <label for="confirmPw">Confirm password*: </label>
          <input type="password" name="confirmPw">
        </li>
        <li>
          <input type="submit" name="register" value="Register">
        </li>
      </ul>
      <p>* - field is required</p>
      <p id="warningUsername">Username is required!</p>
      <p id="warningNoEmail">E-Mail is required!</p>
      <p id="warningBadEmail">Please enter a valid E-mail!</p>
      <p id="warningPassword">Password is required!</p>
      <p id="warningConfPw">Passwords don't match!</p>
    </form>
  </div>
</div>

<script type="text/javascript">
  function validateForm(form) {
    var username = form.username.value;
    var email = form.email.value;
    var password = form.password.value;
    var confPw = form.confirmPw.value;
    var submit = false;

    if (username.length === 0) {
      document.getElementById("warningUsername").style.display = "flex";
      submit = false;
    } else {
      document.getElementById("warningUsername").style.display = "none";
      submit = true;
    }

    if (email.length === 0) {
      document.getElementById("warningNoEmail").style.display = "flex";
      submit = false;
    } else if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))) {
      document.getElementById("warningBadEmail").style.display = "flex";
      document.getElementById("warningNoEmail").style.display = "none";
      submit = false;
    } else {
      document.getElementById("warningBadEmail").style.display = "none";
      document.getElementById("warningNoEmail").style.display = "none";
      submit = true;
    }

    if (password.length === 0) {
      document.getElementById("warningPassword").style.display = "flex";
      submit = false;
    } else if (password !== confPw) {
      document.getElementById("warningConfPw").style.display = "flex";
      document.getElementById("warningPassword").style.display = "none";
      submit = false;
    } else {
      document.getElementById("warningConfPw").style.display = "none";
      document.getElementById("warningPassword").style.display = "none";
      submit = true;
    }

    return submit;
  }
</script>

<?php
  include("../footer.php");
?>