Axel Axt
149 lines
4.9 KiB
PHP
149 lines
4.9 KiB
PHP
<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
|
|
<div class="row mx-0 login-box">
|
|
|
|
<!-- COLUMNA IZQUIERDA -->
|
|
|
|
<div class="col-lg-6 col-md-6 d-flex flex-column justify-content-center text-white p-5"
|
|
style="background: linear-gradient(135deg, #0f172a, #1e3a5f, #3b82b8); border-radius: 16px 0 0 16px;">
|
|
|
|
<div class="text-center mb-4">
|
|
<img src="imgs/logo.png" alt="ByteCenter" style="width: 120px;">
|
|
</div>
|
|
|
|
<h1 class="fw-bold text-center text-white">
|
|
<a href="?opt=login" class="text-decoration-none fw-semibold text-white">
|
|
ByteCenter
|
|
</a>
|
|
</h1>
|
|
|
|
<p class="mt-3 fs-5 text-center">Bienvenido de nuevo!
|
|
<br>Inicie sesión para continuar.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- COLUMNA DERECHA (FORMULARIO) -->
|
|
|
|
<div class="col-lg-6 col-md-6 d-flex align-items-center p-5 bg-white" style="border-radius: 0 16px 16px 0;">
|
|
|
|
<div class="w-100">
|
|
|
|
<h4 class="text-center mb-5">Iniciar Sesión</h4>
|
|
|
|
<!-- FORMULARIO -->
|
|
|
|
<form method="POST" id="form-login" action="?opt=login" novalidate>
|
|
|
|
<div class="form-floating mb-4">
|
|
<input type="text" name="usuario"
|
|
class="form-control input-lg"
|
|
id="floatingUserInput"
|
|
placeholder="Nombre de Usuario">
|
|
<label for="floatingUserInput">Usuario</label>
|
|
</div>
|
|
|
|
<div class="position-relative mb-3">
|
|
|
|
<div class="form-floating">
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
class="form-control input-lg pe-5"
|
|
id="floatingPasswordInput"
|
|
placeholder="Contraseña"
|
|
>
|
|
|
|
<label for="floatingPasswordInput">
|
|
Contraseña
|
|
</label>
|
|
</div>
|
|
|
|
<!-- BOTÓN OJO -->
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-toggle-password"
|
|
data-target="floatingPasswordInput"
|
|
>
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<a href="?opt=recuperar_cuenta" class="text-decoration-none fw-semibold">
|
|
Olvidé mi contraseña
|
|
</a>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-100 btn-lg mt-3">
|
|
Entrar
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<!-- ERROR -->
|
|
|
|
<script>
|
|
const serverErrors = <?php
|
|
if (!empty($_SESSION['flash_error'])) {
|
|
$errorsArray = explode('<br>', $_SESSION['flash_error']);
|
|
unset($_SESSION['flash_error']);
|
|
echo json_encode($errorsArray);
|
|
} else {
|
|
echo '[]';
|
|
}
|
|
?>;
|
|
</script>
|
|
|
|
<!-- SUCCES -->
|
|
|
|
<script>
|
|
const serverSuccess = <?php
|
|
if (!empty($_SESSION['flash_success'])) {
|
|
$successArray = explode('<br>', $_SESSION['flash_success']);
|
|
unset($_SESSION['flash_success']);
|
|
echo json_encode($successArray);
|
|
} else {
|
|
echo '[]';
|
|
}
|
|
?>;
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validar mediante js -->
|
|
|
|
<script src="js/login/logInValidator.js"></script>
|
|
|
|
<!-- Ojo de contrasenia -->
|
|
|
|
<script>
|
|
|
|
document.querySelectorAll(".btn-toggle-password").forEach(button => {
|
|
|
|
button.addEventListener("click", () => {
|
|
|
|
const input = document.getElementById(button.dataset.target);
|
|
const icon = button.querySelector("i");
|
|
|
|
if (input.type === "password") {
|
|
|
|
input.type = "text";
|
|
|
|
icon.classList.remove("fa-eye");
|
|
icon.classList.add("fa-eye-slash");
|
|
|
|
} else {
|
|
|
|
input.type = "password";
|
|
|
|
icon.classList.remove("fa-eye-slash");
|
|
icon.classList.add("fa-eye");
|
|
}
|
|
});
|
|
});
|
|
</script>
|