Find this useful? Enter your email to receive occasional updates for securing PHP code.

Signing you up...

Thank you for signing up!

PHP Decode

<?= $this->extend('Layout/Starter') ?> <?= $this->section('content') ?> <div class="pa..

Decoded Output download

<?= $this->extend('Layout/Starter') ?> 
 
<?= $this->section('content') ?> 
<div class="panda"> 
    <audio style="display: none;" controls autoplay  preload="auto"> 
              <source src="prince.mp3"> 
</audio> 
 <!DOCTYPE html> 
<html lang="en"> 
<!-- coding by Gogila._ --> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Sign-Up/Login Form | @Gogila._</title> 
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> 
  <link rel="stylesheet" href="style.css"> 
</head> 
 
<body> 
  <div class="wrapper"> 
    <div class="login-box"> 
      <div class="login-header"> 
        <span>Login</span> 
      </div> 
       
 
  <div id="registerModal" class="modal"> 
    <div class="modal-content"> 
      <span class="close" onclick="closeModal('registerModal')">&times;</span> 
      <h2>Register</h2> 
      <div class="input_box"> 
        <input type="text" id="registerUser" class="input-field" required> 
        <label for="registerUser" class="label">Username</label> 
      </div> 
      <div class="input_box"> 
        <input type="email" id="registerEmail" class="input-field" required> 
        <label for="registerEmail" class="label">Email</label> 
      </div> 
      <div class="input_box"> 
        <input type="password" id="registerPass" class="input-field" required oninput="checkPasswordStrengthRegister(this.value)"> 
        <label for="registerPass" class="label">Password</label> 
        <i class="bx bx-lock-alt icon" id="togglePasswordRegister"></i> 
      </div> 
      <div id="passwordStrengthRegister" class="password-strength"></div> 
 
      <div class="input_box"> 
        <input type="submit" class="input-submit" value="Register" onclick="handleRegister()"> 
      </div> 
    </div> 
  </div> 
 
  <div id="forgotPasswordModal" class="modal"> 
    <div class="modal-content"> 
      <span class="close" onclick="closeModal('forgotPasswordModal')">&times;</span> 
      <h2>Forgot Password</h2> 
      <div class="input_box"> 
        <input type="email" id="forgotEmail" class="input-field" required> 
        <label for="forgotEmail" class="label">Email</label> 
      </div> 
      <div class="input_box"> 
        <input type="submit" class="input-submit" value="Reset Password" onclick="handleForgotPassword()"> 
      </div> 
    </div> 
  </div> 
 
  <script src="script.js"></script> 
</body> 
 
</html> 
<style> 
   
/* POPPINS FONT */ 
 
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 
 
* { 
  margin: 0; 
 
  padding: 0; 
 
  box-sizing: border-box; 
 
  font-family: "Poppins", sans-serif; 
} 
 
/* ===== COLOR VARIABLES ===== */ 
 
:root { 
  --primary-color: #6657f4; 
 
  --second-color: #ffffff; 
 
  --black-color: #000000; 
} 
 
/* ===== BODY - BACKGROUND IMAGE ===== */ 
 
body { 
  background: #9a90f5; 
} 
 
/* ===== Reusable CSS ===== */ 
 
a { 
  text-decoration: none; 
  color: var(--second-color); 
} 
a:hover { 
  text-decoration: underline; 
} 
 
/* ===== WRAPPER ===== */ 
 
.wrapper { 
  width: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  min-height: 100vh; 
  background-color: rgba(0, 0, 0, 0.2); 
} 
 
.login-box { 
  position: relative; 
  width: 450px; 
  border: 3px solid var(--primary-color); 
  border-radius: 15px; 
  padding: 7.5em 2.5em 4em 2.5em; 
  background-color: #ffffff; 
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3); 
} 
 
.login-header { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: var(--primary-color); 
  width: 140px; 
  height: 70px; 
  border-radius: 0 0 20px 20px; 
} 
 
.login-header span { 
  font-size: 30px; 
  color: var(--black-color); 
} 
 
.login-header::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: -30px; 
  width: 30px; 
  height: 30px; 
  border-top-right-radius: 50%; 
  background: transparent; 
  box-shadow: 15px 0 0 0 var(--primary-color); 
} 
 
.login-header::after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  right: -30px; 
  width: 30px; 
  height: 30px; 
  border-top-left-radius: 50%; 
  background: transparent; 
  box-shadow: -15px 0 0 0 var(--primary-color); 
} 
 
.input_box { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  margin: 20px 0; 
} 
 
.input-field { 
  width: 100%; 
  height: 55px; 
  font-size: 16px; 
  background: transparent; 
  color: #000000; 
  padding-inline: 20px 50px; 
  border: 2px solid var(--primary-color); 
  border-radius: 30px; 
  outline: none; 
} 
 
#user { 
  margin-bottom: 10px; 
} 
 
.label { 
  position: absolute; 
  top: 15px; 
  left: 20px; 
  transition: 0.2s ease-in-out; 
} 
 
.input-field:focus ~ .label, 
.input-field:valid ~ .label { 
  position: absolute; 
  top: -10px; 
  left: 20px; 
  font-size: 14px; 
  background-color: var(--primary-color); 
  border-radius: 30px; 
  color: black; 
  padding: 0 10px; 
} 
 
.icon { 
  position: absolute; 
  top: 18px; 
  right: 25px; 
  font-size: 20px; 
  cursor: pointer; 
} 
 
.bx-hide { 
  content: "\eb2c"; /* Hide icon */ 
} 
 
.bx-show { 
  content: "\eb25"; /* Show icon */ 
} 
 
.remember-forgot { 
  display: flex; 
  justify-content: space-between; 
  font-size: 15px; 
} 
 
.input-submit { 
  width: 100%; 
  height: 50px; 
  background: #6657f4; 
  font-size: 16px; 
  font-weight: 500; 
  border: none; 
  border-radius: 30px; 
  cursor: pointer; 
  transition: 0.3s ease-in-out; 
} 
 
.input-submit:hover { 
  background: #1d0db2; 
} 
 
.register { 
  text-align: center; 
} 
 
.register a { 
  font-weight: 500; 
} 
 
a { 
  color: #6657f4; 
} 
 
@media only screen and (max-width: 564px) { 
  .wrapper { 
    padding: 20px; 
  } 
  .login-box { 
    padding: 7.5em 1.5em 4em 2.5em; 
  } 
} 
 
/* For tablets and larger phones */ 
@media only screen and (max-width: 1024px) { 
  .wrapper { 
    padding: 50px; 
  } 
  .login-box { 
    width: 80%; /* Adjust width */ 
    padding: 5em 1.5em 3em 1.5em; /* Adjust padding */ 
  } 
  .modal-content { 
    width: 70%; /* Adjust modal width */ 
  } 
} 
 
/* For smaller screens like phones */ 
@media only screen and (max-width: 564px) { 
  .wrapper { 
    padding: 15px; 
  } 
  .login-box { 
    padding: 7.5em 1.5em 4em 2.5em; 
  } 
  .modal-content { 
    width: 90%; /* Adjust modal width */ 
  } 
   
    .remember-forgot { 
   font-size: 11px; 
   margin: 0 10px; 
  } 
/* Hide the default checkbox */ 
input[type="checkbox"] { 
    width: 11px; /* Set width */ 
    height: 11px; /* Set height */ 
  } 
} 
 
.error-message { 
  color: red; 
  font-size: 12px; 
  margin-top: 5px; 
} 
 
/* Modal styles */ 
.modal { 
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0, 0, 0, 0.4); 
} 
 
.modal-content { 
  background-color: #fefefe; 
  margin: 15% auto; 
  padding: 20px; 
  border: 1px solid #888; 
  width: 80%; 
} 
 
.close { 
  color: #aaa; 
  float: right; 
  font-size: 28px; 
  font-weight: bold; 
} 
 
.close:hover, 
.close:focus { 
  color: black; 
  text-decoration: none; 
  cursor: pointer; 
} 
 
</style> 
 
<body> 
     
      <div class="input_box"> 
      <?= form_open() ?> 
        <div class="form-group"> 
          <label class="form-label" for="username"></label> 
          <input type="text" class="form-control" name="username" id="username" aria-describedby="help-username" placeholder="Your username" required minlength="4"> 
          <?php if ($validation->hasError('username')) : ?> 
          <small id="help-username" class="form-text text-danger"><?= $validation->getError('username') ?></small> 
          <i class="bx bx-user icon"></i 
          <?php endif; ?> 
        </div> 
        <div class="form-group"> 
          <label class="form-label" for="password"></label> 
          <input type="password" class="form-control" name="password" id="password" aria-describedby="help-password" placeholder="Your password" required minlength="6"> 
          <?php if ($validation->hasError('password')) : ?> 
          <small id="help-password" class="form-text text-danger"><?= $validation->getError('password') ?></small> 
          <?php endif; ?> 
          <button type="submit" class="btn">><i class="bi bi-box-arrow-in-right" ></i><font color ="#9a90f5"> Log in</button> 
        </div> 
</div> 
 
<p class="text-center text-dark after-card"> 
            <small class="bg-dark text-white px-auto p-2 rounded"> 
         ><font color ="#9a90f5">           ? 
                <a href="<?= site_url('register') ?>" class="text-white"><font color ="#9a90f5"> </a> 
        </small> 
      </p> 
            <marquee behavior="alternate"> </marquee> 
 
             
 
 
<script> 
 document.addEventListener("DOMContentLoaded", (event) => { 
  const savedUsername = localStorage.getItem("rememberedUsername"); 
 
  if (savedUsername) { 
    document.getElementById("user").value = savedUsername; 
 
    document.getElementById("remember").checked = true; 
  } 
 
  document 
 
    .getElementById("togglePassword") 
 
    .addEventListener("click", function () { 
      const passwordField = document.getElementById("pass"); 
 
      const type = 
        passwordField.getAttribute("type") === "password" ? "text" : "password"; 
 
      passwordField.setAttribute("type", type); 
 
      this.classList.toggle("bx-hide"); 
 
      this.classList.toggle("bx-show"); 
    }); 
 
  document 
 
    .querySelector(".forgot a") 
 
    .addEventListener("click", function (event) { 
      event.preventDefault(); 
 
      openModal("forgotPasswordModal"); 
    }); 
 
  document 
    .querySelector(".register a") 
    .addEventListener("click", function (event) { 
      event.preventDefault(); 
      openModal("registerModal"); 
    }); 
 
  function openModal(modalId) { 
    document.getElementById(modalId).style.display = "block"; 
  } 
 
  function closeModal(modalId) { 
    document.getElementById(modalId).style.display = "none"; 
  } 
 
  window.onclick = function (event) { 
    if (event.target.classList.contains("modal")) { 
      event.target.style.display = "none"; 
    } 
  }; 
 
  window.closeModal = closeModal; 
}); 
 
function showError(element, message) { 
  const errorSpan = document.createElement("span"); 
  errorSpan.className = "error-message"; 
  errorSpan.textContent = message; 
  element.parentElement.appendChild(errorSpan); 
} 
 
function clearErrors() { 
  const errors = document.querySelectorAll(".error-message"); 
  errors.forEach((error) => error.remove()); 
} 
 
async function handleLogin() { 
  clearErrors(); 
 
  const username = document.getElementById("user").value; 
  const password = document.getElementById("pass").value; 
  const rememberMe = document.getElementById("remember").checked; 
 
  let valid = true; 
 
  if (!username) { 
    showError(document.getElementById("user"), "Username is required"); 
    valid = false; 
  } 
 
  if (!password) { 
    showError(document.getElementById("pass"), "Password is required"); 
    valid = false; 
  } 
 
  if (!valid) { 
    return; 
  } 
 
  if (rememberMe) { 
    localStorage.setItem("rememberedUsername", username); 
  } else { 
    localStorage.removeItem("rememberedUsername"); 
  } 
 
  try { 
    const response = await fetch("/login", { 
      method: "POST", 
      headers: { 
        "Content-Type": "application/json" 
      }, 
      body: JSON.stringify({ username, password }) 
    }); 
 
    const result = await response.json(); 
 
    if (response.ok) { 
      alert("Logged in successfully"); 
    } else { 
      showError(document.getElementById("pass"), result.message); 
    } 
  } catch (error) { 
    showError( 
      document.getElementById("pass"), 
      "Login failed. Please try again." 
    ); 
  } 
} 
 
async function handleRegister() { 
  clearErrors(); 
 
  const username = document.getElementById("registerUser").value; 
  const email = document.getElementById("registerEmail").value; 
  const password = document.getElementById("registerPass").value; 
 
  let valid = true; 
 
  if (!username) { 
    showError(document.getElementById("registerUser"), "Username is required"); 
    valid = false; 
  } 
 
  if (!email) { 
    showError(document.getElementById("registerEmail"), "Email is required"); 
    valid = false; 
  } 
 
  if (!password) { 
    showError(document.getElementById("registerPass"), "Password is required"); 
    valid = false; 
  } 
 
  if (!valid) { 
    return; 
  } 
 
  try { 
    const response = await fetch("/register", { 
      method: "POST", 
      headers: { 
        "Content-Type": "application/json" 
      }, 
      body: JSON.stringify({ username, email, password }) 
    }); 
 
    const result = await response.json(); 
 
    if (response.ok) { 
      alert("Registration successful"); 
      closeModal("registerModal"); 
    } else { 
      showError(document.getElementById("registerPass"), result.message); 
    } 
  } catch (error) { 
    showError( 
      document.getElementById("registerPass"), 
      "Registration failed. Please try again." 
    ); 
  } 
} 
 
async function handleForgotPassword() { 
  clearErrors(); 
 
  const email = document.getElementById("forgotEmail").value; 
 
  if (!email) { 
    showError(document.getElementById("forgotEmail"), "Email is required"); 
    return; 
  } 
 
  try { 
    const response = await fetch("/forgot-password", { 
      method: "POST", 
      headers: { 
        "Content-Type": "application/json" 
      }, 
      body: JSON.stringify({ email }) 
    }); 
 
    const result = await response.json(); 
 
    if (response.ok) { 
      alert("Password reset link sent to your email"); 
      closeModal("forgotPasswordModal"); 
    } else { 
      showError(document.getElementById("forgotEmail"), result.message); 
    } 
  } catch (error) { 
    showError( 
      document.getElementById("forgotEmail"), 
      "Password reset failed. Please try again." 
    ); 
  } 
} 
 
function checkPasswordStrength(password) { 
  const strengthIndicator = document.getElementById("passwordStrength"); 
  updatePasswordStrength(password, strengthIndicator); 
} 
 
function checkPasswordStrengthRegister(password) { 
  const strengthIndicator = document.getElementById("passwordStrengthRegister"); 
  updatePasswordStrength(password, strengthIndicator); 
} 
 
function updatePasswordStrength(password, strengthIndicator) { 
  // Reset indicator 
  strengthIndicator.textContent = ""; 
 
  // Define criteria 
  const minLength = 8; 
  const minUpper = 1; 
  const minLower = 1; 
  const minNumbers = 1; 
  const minSpecial = 1; 
 
  let strength = 0; 
 
  // Check length 
  if (password.length >= minLength) { 
    strength++; 
  } 
 
  // Check uppercase letters 
  if (/[A-Z]/.test(password) && password.match(/[A-Z]/g).length >= minUpper) { 
    strength++; 
  } 
 
  // Check lowercase letters 
  if (/[a-z]/.test(password) && password.match(/[a-z]/g).length >= minLower) { 
    strength++; 
  } 
 
  // Check numbers 
  if (/\d/.test(password) && password.match(/\d/g).length >= minNumbers) { 
    strength++; 
  } 
 
  // Check special characters 
  if ( 
    /[^a-zA-Z0-9]/.test(password) && 
    password.match(/[^a-zA-Z0-9]/g).length >= minSpecial 
  ) { 
    strength++; 
  } 
 
  // Update strength indicator 
  switch (strength) { 
    case 0: 
    case 1: 
      strengthIndicator.textContent = "Weak"; 
      strengthIndicator.style.color = "red"; 
      break; 
    case 2: 
    case 3: 
      strengthIndicator.textContent = "Medium"; 
      strengthIndicator.style.color = "orange"; 
      break; 
    case 4: 
    case 5: 
      strengthIndicator.textContent = "Strong"; 
      strengthIndicator.style.color = "green"; 
      break; 
    default: 
      break; 
  } 
} 
 
     
     
     
    </script> 
 
 
 
<?= $this->endSection() ?>

Did this file decode correctly?

Original Code

<?= $this->extend('Layout/Starter') ?>

<?= $this->section('content') ?>
<div class="panda">
    <audio style="display: none;" controls autoplay  preload="auto">
              <source src="prince.mp3">
</audio>
 <!DOCTYPE html>
<html lang="en">
<!-- coding by Gogila._ -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign-Up/Login Form | @Gogila._</title>
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="login-box">
      <div class="login-header">
        <span>Login</span>
      </div>
      

  <div id="registerModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal('registerModal')">&times;</span>
      <h2>Register</h2>
      <div class="input_box">
        <input type="text" id="registerUser" class="input-field" required>
        <label for="registerUser" class="label">Username</label>
      </div>
      <div class="input_box">
        <input type="email" id="registerEmail" class="input-field" required>
        <label for="registerEmail" class="label">Email</label>
      </div>
      <div class="input_box">
        <input type="password" id="registerPass" class="input-field" required oninput="checkPasswordStrengthRegister(this.value)">
        <label for="registerPass" class="label">Password</label>
        <i class="bx bx-lock-alt icon" id="togglePasswordRegister"></i>
      </div>
      <div id="passwordStrengthRegister" class="password-strength"></div>

      <div class="input_box">
        <input type="submit" class="input-submit" value="Register" onclick="handleRegister()">
      </div>
    </div>
  </div>

  <div id="forgotPasswordModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal('forgotPasswordModal')">&times;</span>
      <h2>Forgot Password</h2>
      <div class="input_box">
        <input type="email" id="forgotEmail" class="input-field" required>
        <label for="forgotEmail" class="label">Email</label>
      </div>
      <div class="input_box">
        <input type="submit" class="input-submit" value="Reset Password" onclick="handleForgotPassword()">
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>
<style>
  
/* POPPINS FONT */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;
}

/* ===== COLOR VARIABLES ===== */

:root {
  --primary-color: #6657f4;

  --second-color: #ffffff;

  --black-color: #000000;
}

/* ===== BODY - BACKGROUND IMAGE ===== */

body {
  background: #9a90f5;
}

/* ===== Reusable CSS ===== */

a {
  text-decoration: none;
  color: var(--second-color);
}
a:hover {
  text-decoration: underline;
}

/* ===== WRAPPER ===== */

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
}

.login-box {
  position: relative;
  width: 450px;
  border: 3px solid var(--primary-color);
  border-radius: 15px;
  padding: 7.5em 2.5em 4em 2.5em;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
}

.login-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  width: 140px;
  height: 70px;
  border-radius: 0 0 20px 20px;
}

.login-header span {
  font-size: 30px;
  color: var(--black-color);
}

.login-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  border-top-right-radius: 50%;
  background: transparent;
  box-shadow: 15px 0 0 0 var(--primary-color);
}

.login-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  width: 30px;
  height: 30px;
  border-top-left-radius: 50%;
  background: transparent;
  box-shadow: -15px 0 0 0 var(--primary-color);
}

.input_box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.input-field {
  width: 100%;
  height: 55px;
  font-size: 16px;
  background: transparent;
  color: #000000;
  padding-inline: 20px 50px;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  outline: none;
}

#user {
  margin-bottom: 10px;
}

.label {
  position: absolute;
  top: 15px;
  left: 20px;
  transition: 0.2s ease-in-out;
}

.input-field:focus ~ .label,
.input-field:valid ~ .label {
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 14px;
  background-color: var(--primary-color);
  border-radius: 30px;
  color: black;
  padding: 0 10px;
}

.icon {
  position: absolute;
  top: 18px;
  right: 25px;
  font-size: 20px;
  cursor: pointer;
}

.bx-hide {
  content: "\eb2c"; /* Hide icon */
}

.bx-show {
  content: "\eb25"; /* Show icon */
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.input-submit {
  width: 100%;
  height: 50px;
  background: #6657f4;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.input-submit:hover {
  background: #1d0db2;
}

.register {
  text-align: center;
}

.register a {
  font-weight: 500;
}

a {
  color: #6657f4;
}

@media only screen and (max-width: 564px) {
  .wrapper {
    padding: 20px;
  }
  .login-box {
    padding: 7.5em 1.5em 4em 2.5em;
  }
}

/* For tablets and larger phones */
@media only screen and (max-width: 1024px) {
  .wrapper {
    padding: 50px;
  }
  .login-box {
    width: 80%; /* Adjust width */
    padding: 5em 1.5em 3em 1.5em; /* Adjust padding */
  }
  .modal-content {
    width: 70%; /* Adjust modal width */
  }
}

/* For smaller screens like phones */
@media only screen and (max-width: 564px) {
  .wrapper {
    padding: 15px;
  }
  .login-box {
    padding: 7.5em 1.5em 4em 2.5em;
  }
  .modal-content {
    width: 90%; /* Adjust modal width */
  }
  
    .remember-forgot {
   font-size: 11px;
   margin: 0 10px;
  }
/* Hide the default checkbox */
input[type="checkbox"] {
    width: 11px; /* Set width */
    height: 11px; /* Set height */
  }
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

</style>

<body>
    
      <div class="input_box">
      <?= form_open() ?>
        <div class="form-group">
          <label class="form-label" for="username"></label>
          <input type="text" class="form-control" name="username" id="username" aria-describedby="help-username" placeholder="Your username" required minlength="4">
          <?php if ($validation->hasError('username')) : ?>
          <small id="help-username" class="form-text text-danger"><?= $validation->getError('username') ?></small>
          <i class="bx bx-user icon"></i
          <?php endif; ?>
        </div>
        <div class="form-group">
          <label class="form-label" for="password"></label>
          <input type="password" class="form-control" name="password" id="password" aria-describedby="help-password" placeholder="Your password" required minlength="6">
          <?php if ($validation->hasError('password')) : ?>
          <small id="help-password" class="form-text text-danger"><?= $validation->getError('password') ?></small>
          <?php endif; ?>
          <button type="submit" class="btn">><i class="bi bi-box-arrow-in-right" ></i><font color ="#9a90f5"> Log in</button>
        </div>
</div>

<p class="text-center text-dark after-card">
            <small class="bg-dark text-white px-auto p-2 rounded">
         ><font color ="#9a90f5">           ?
                <a href="<?= site_url('register') ?>" class="text-white"><font color ="#9a90f5"> </a>
        </small>
      </p>
            <marquee behavior="alternate"> </marquee>

            


<script>
 document.addEventListener("DOMContentLoaded", (event) => {
  const savedUsername = localStorage.getItem("rememberedUsername");

  if (savedUsername) {
    document.getElementById("user").value = savedUsername;

    document.getElementById("remember").checked = true;
  }

  document

    .getElementById("togglePassword")

    .addEventListener("click", function () {
      const passwordField = document.getElementById("pass");

      const type =
        passwordField.getAttribute("type") === "password" ? "text" : "password";

      passwordField.setAttribute("type", type);

      this.classList.toggle("bx-hide");

      this.classList.toggle("bx-show");
    });

  document

    .querySelector(".forgot a")

    .addEventListener("click", function (event) {
      event.preventDefault();

      openModal("forgotPasswordModal");
    });

  document
    .querySelector(".register a")
    .addEventListener("click", function (event) {
      event.preventDefault();
      openModal("registerModal");
    });

  function openModal(modalId) {
    document.getElementById(modalId).style.display = "block";
  }

  function closeModal(modalId) {
    document.getElementById(modalId).style.display = "none";
  }

  window.onclick = function (event) {
    if (event.target.classList.contains("modal")) {
      event.target.style.display = "none";
    }
  };

  window.closeModal = closeModal;
});

function showError(element, message) {
  const errorSpan = document.createElement("span");
  errorSpan.className = "error-message";
  errorSpan.textContent = message;
  element.parentElement.appendChild(errorSpan);
}

function clearErrors() {
  const errors = document.querySelectorAll(".error-message");
  errors.forEach((error) => error.remove());
}

async function handleLogin() {
  clearErrors();

  const username = document.getElementById("user").value;
  const password = document.getElementById("pass").value;
  const rememberMe = document.getElementById("remember").checked;

  let valid = true;

  if (!username) {
    showError(document.getElementById("user"), "Username is required");
    valid = false;
  }

  if (!password) {
    showError(document.getElementById("pass"), "Password is required");
    valid = false;
  }

  if (!valid) {
    return;
  }

  if (rememberMe) {
    localStorage.setItem("rememberedUsername", username);
  } else {
    localStorage.removeItem("rememberedUsername");
  }

  try {
    const response = await fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ username, password })
    });

    const result = await response.json();

    if (response.ok) {
      alert("Logged in successfully");
    } else {
      showError(document.getElementById("pass"), result.message);
    }
  } catch (error) {
    showError(
      document.getElementById("pass"),
      "Login failed. Please try again."
    );
  }
}

async function handleRegister() {
  clearErrors();

  const username = document.getElementById("registerUser").value;
  const email = document.getElementById("registerEmail").value;
  const password = document.getElementById("registerPass").value;

  let valid = true;

  if (!username) {
    showError(document.getElementById("registerUser"), "Username is required");
    valid = false;
  }

  if (!email) {
    showError(document.getElementById("registerEmail"), "Email is required");
    valid = false;
  }

  if (!password) {
    showError(document.getElementById("registerPass"), "Password is required");
    valid = false;
  }

  if (!valid) {
    return;
  }

  try {
    const response = await fetch("/register", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ username, email, password })
    });

    const result = await response.json();

    if (response.ok) {
      alert("Registration successful");
      closeModal("registerModal");
    } else {
      showError(document.getElementById("registerPass"), result.message);
    }
  } catch (error) {
    showError(
      document.getElementById("registerPass"),
      "Registration failed. Please try again."
    );
  }
}

async function handleForgotPassword() {
  clearErrors();

  const email = document.getElementById("forgotEmail").value;

  if (!email) {
    showError(document.getElementById("forgotEmail"), "Email is required");
    return;
  }

  try {
    const response = await fetch("/forgot-password", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ email })
    });

    const result = await response.json();

    if (response.ok) {
      alert("Password reset link sent to your email");
      closeModal("forgotPasswordModal");
    } else {
      showError(document.getElementById("forgotEmail"), result.message);
    }
  } catch (error) {
    showError(
      document.getElementById("forgotEmail"),
      "Password reset failed. Please try again."
    );
  }
}

function checkPasswordStrength(password) {
  const strengthIndicator = document.getElementById("passwordStrength");
  updatePasswordStrength(password, strengthIndicator);
}

function checkPasswordStrengthRegister(password) {
  const strengthIndicator = document.getElementById("passwordStrengthRegister");
  updatePasswordStrength(password, strengthIndicator);
}

function updatePasswordStrength(password, strengthIndicator) {
  // Reset indicator
  strengthIndicator.textContent = "";

  // Define criteria
  const minLength = 8;
  const minUpper = 1;
  const minLower = 1;
  const minNumbers = 1;
  const minSpecial = 1;

  let strength = 0;

  // Check length
  if (password.length >= minLength) {
    strength++;
  }

  // Check uppercase letters
  if (/[A-Z]/.test(password) && password.match(/[A-Z]/g).length >= minUpper) {
    strength++;
  }

  // Check lowercase letters
  if (/[a-z]/.test(password) && password.match(/[a-z]/g).length >= minLower) {
    strength++;
  }

  // Check numbers
  if (/\d/.test(password) && password.match(/\d/g).length >= minNumbers) {
    strength++;
  }

  // Check special characters
  if (
    /[^a-zA-Z0-9]/.test(password) &&
    password.match(/[^a-zA-Z0-9]/g).length >= minSpecial
  ) {
    strength++;
  }

  // Update strength indicator
  switch (strength) {
    case 0:
    case 1:
      strengthIndicator.textContent = "Weak";
      strengthIndicator.style.color = "red";
      break;
    case 2:
    case 3:
      strengthIndicator.textContent = "Medium";
      strengthIndicator.style.color = "orange";
      break;
    case 4:
    case 5:
      strengthIndicator.textContent = "Strong";
      strengthIndicator.style.color = "green";
      break;
    default:
      break;
  }
}

    
    
    
    </script>



<?= $this->endSection() ?>

Function Calls

None

Variables

None

Stats

MD5 2b1ba58111c77694914bc132588afea7
Eval Count 0
Decode Time 74 ms