Axel Axt
166 lines
5.4 KiB
PHP
166 lines
5.4 KiB
PHP
<?php require __DIR__ . '/../../includes/navbar.php'; ?>
|
|
|
|
<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
|
|
<div class="row mx-0 login-box">
|
|
|
|
<!-- 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" 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">
|
|
Establezca una nueva contraseña.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- DERECHA -->
|
|
|
|
<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-4">Nueva Contraseña</h4>
|
|
|
|
<form method="POST" action="?opt=restablecer_contrasenia" novalidate>
|
|
|
|
<input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
|
|
|
|
<!-- PASSWORD -->
|
|
|
|
<div class="position-relative mb-3">
|
|
|
|
<div class="form-floating">
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
class="form-control pe-5"
|
|
id="passwordInput"
|
|
placeholder="Nueva contraseña"
|
|
required
|
|
>
|
|
|
|
<label for="passwordInput">
|
|
Nueva contraseña
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-toggle-password"
|
|
data-target="passwordInput"
|
|
>
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<!-- CONFIRMAR -->
|
|
|
|
<div class="position-relative mb-4">
|
|
|
|
<div class="form-floating">
|
|
<input
|
|
type="password"
|
|
name="confirmar_password"
|
|
class="form-control pe-5"
|
|
id="confirmPasswordInput"
|
|
placeholder="Confirmar contraseña"
|
|
required
|
|
>
|
|
|
|
<label for="confirmPasswordInput">
|
|
Confirmar contraseña
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-toggle-password"
|
|
data-target="confirmPasswordInput"
|
|
>
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<!-- BOTON -->
|
|
|
|
<button type="submit" class="btn btn-success btn-lg w-100">
|
|
Guardar nueva contraseña
|
|
</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>
|
|
|
|
<script src="js/login/logInValidator.js"></script>
|
|
|
|
<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>
|