<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Open Sans", sans-serif;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        padding: 0 10px;
      }

      body::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #151516;
        background-position: center;
        background-size: cover;
      }

      .wrapper {
        width: 400px;
        border-radius: 8px;
        padding: 30px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .form {
        display: flex;
        flex-direction: column;
      }

      h2 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: #fff;
      }

      .input-field {
        position: relative;
        border-bottom: 2px solid #ccc;
        margin: 15px 0;
      }

      .input-field label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        color: #fff;
        font-size: 16px;
        pointer-events: none;
        transition: 0.15s ease;
      }

      .input-field input {
        width: 100%;
        height: 40px;
        background: transparent;
        border: none;
        outline: none;
        font-size: 16px;
        color: #fff;
      }

      .input-field input:focus ~ label,
      .input-field input:valid ~ label {
        font-size: 0.8rem;
        top: 10px;
        transform: translateY(-120%);
      }

      .wrapper a {
        color: #efefef;
        text-decoration: none;
      }

      .wrapper a:hover {
        text-decoration: underline;
      }

      button {
        background: #fff;
        color: #000;
        font-weight: 600;
        border: none;
        padding: 12px 20px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 16px;
        border: 2px solid transparent;
        transition: 0.3s ease;
        margin-top: 20px;
      }

      button:hover {
        color: #fff;
        border-color: #fff;
        background: rgba(255, 255, 255, 0.15);
      }

      .login {
        text-align: center;
        margin-top: 30px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <p
        style="display: none; color: rgb(255, 177, 177); font-size: 24px"
        class="alert"
      ></p>
      <div class="form">
        <h2>Register</h2>
        <div class="input-field">
          <input type="text" name="email" required />
          <label>Enter your email</label>
        </div>
        <div class="input-field">
          <input type="password" name="password" required />
          <label>Enter your password</label>
        </div>
        <div class="input-field">
          <input type="password" name="cpassword" required />
          <label>Confirm your password</label>
        </div>
        <button type="submit" class="register">Register</button>
        <div class="login">
          <p>Have an account? <a href="/login">Login</a></p>
        </div>
      </div>
    </div>

    <script>
      document.querySelector(".register").addEventListener("click", () => {
        const email = document.querySelector('input[name="email"]');
        const password = document.querySelector('input[name="password"]');
        const cpassword = document.querySelector('input[name="cpassword"]');

        const alertBox = document.querySelector(".alert");
        alertBox.style.display = "none";

        const infos = {
          email: email.value,
          password: password.value,
          cpassword: cpassword.value,
        };

        if (!infos.email || !infos.password || !infos.cpassword) {
          alertBox.style.display = "block";
          alertBox.textContent = "Please fill all blanks";
          return;
        }

        if (infos.password !== infos.cpassword) {
          alertBox.style.display = "block";
          alertBox.textContent = "Passwords not same";
          return;
        }

        fetch("/register", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(infos),
        })
          .then((response) => {
            if (!response.ok) {
              return "Somthing went wrong!";
            }

            return response.json();
          })
          .then((data) => {
            if (data.red) return (window.location.href = data.red);

            alertBox.style.display = "block";
            alertBox.textContent = data.msg;
          })
          .catch((error) => {
            console.log(error);
          });
      });
    </script>
  </body>
</html>
