v2
This commit is contained in:
parent
feeafa632b
commit
7f1ca93dfd
252
index.php
252
index.php
@ -1,7 +1,7 @@
|
|||||||
<?php
|
<?php
|
||||||
session_start();
|
session_start();
|
||||||
|
|
||||||
//Credenciales de admin de la api
|
// Credenciales de administrador para la API
|
||||||
$api_username = 'admin@comunica.presidencia.gob.cu';
|
$api_username = 'admin@comunica.presidencia.gob.cu';
|
||||||
$api_password = '**4fgTK85pb';
|
$api_password = '**4fgTK85pb';
|
||||||
$api_host = 'https://comunica.presidencia.gob.cu:5443/api/change_password';
|
$api_host = 'https://comunica.presidencia.gob.cu:5443/api/change_password';
|
||||||
@ -15,6 +15,7 @@ $db_pass = '**4fgTK85pbicomunica';
|
|||||||
// Variables para mensajes
|
// Variables para mensajes
|
||||||
$success = '';
|
$success = '';
|
||||||
$error = '';
|
$error = '';
|
||||||
|
$showForm = true;
|
||||||
|
|
||||||
// Procesar formulario cuando se envía
|
// Procesar formulario cuando se envía
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
@ -82,7 +83,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
'email' => $email
|
'email' => $email
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$success = "Contraseña actualizada exitosamente";
|
$success = "¡Contraseña actualizada exitosamente!";
|
||||||
|
$showForm = false;
|
||||||
} else {
|
} else {
|
||||||
$error = "Error en el servidor XMPP: " . htmlspecialchars($response);
|
$error = "Error en el servidor XMPP: " . htmlspecialchars($response);
|
||||||
}
|
}
|
||||||
@ -95,60 +97,238 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Cambiar Contrasenna</title>
|
<title>Cambiar Contraseña - IComunica</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-animation {
|
||||||
|
animation: successScale 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes successScale {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-toggle {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<body class="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div class="w-full max-w-md">
|
||||||
|
<!-- Logo y título -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<div class="flex items-center justify-center mb-4">
|
||||||
|
<div class="bg-blue-600 text-white p-3 rounded-full">
|
||||||
|
<i class="fa-solid fa-comments text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<span class="ml-3 text-2xl font-bold text-gray-800">IComunica</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-2xl font-bold text-gray-800">Cambiar Contraseña</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<body class="bg-gray-100 p-8">
|
<!-- Mensajes de éxito/error -->
|
||||||
|
<?php if ($success): ?>
|
||||||
<section class="bg-gray-50 dark:bg-gray-900">
|
<div class="success-animation bg-green-50 border border-green-200 rounded-lg p-6 mb-6 text-center">
|
||||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
<div class="text-green-600 mb-3">
|
||||||
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
|
<i class="fa-solid fa-circle-check text-4xl"></i>
|
||||||
<img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo">
|
</div>
|
||||||
IComunica
|
<h3 class="text-lg font-medium text-green-800 mb-2">¡Operación Exitosa!</h3>
|
||||||
|
<p class="text-green-700"><?= $success ?></p>
|
||||||
|
<div class="mt-4">
|
||||||
|
<a href="#" class="text-blue-600 hover:underline" onclick="location.reload()">
|
||||||
|
<i class="fa-solid fa-rotate-right mr-1"></i> Volver al inicio
|
||||||
</a>
|
</a>
|
||||||
<div class="w-full p-6 bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md dark:bg-gray-800 dark:border-gray-700 sm:p-8">
|
</div>
|
||||||
<h2 class="mb-1 text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
|
</div>
|
||||||
Cambiar Contraseña
|
<?php endif; ?>
|
||||||
</h2>
|
|
||||||
<form class="mt-4 space-y-4 lg:mt-5 md:space-y-5" action="#">
|
<?php if ($error): ?>
|
||||||
<div>
|
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||||
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tu usuario</label>
|
<div class="flex items-center">
|
||||||
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@icomunica.presidencia.gob.cu" required="">
|
<div class="text-red-600 mr-3">
|
||||||
|
<i class="fa-solid fa-circle-exclamation"></i>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contraseña</label>
|
<h3 class="text-sm font-medium text-red-800">Error</h3>
|
||||||
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
|
<p class="text-red-700 text-sm"><?= $error ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label for="new-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nueva contraseña</label>
|
|
||||||
<input type="new-password" name="new-password" id="new-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirma la contraseña</label>
|
|
||||||
<input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-start">
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- Formulario -->
|
||||||
|
<?php if ($showForm): ?>
|
||||||
|
<div class="card bg-white rounded-xl p-6 sm:p-8 shadow-lg">
|
||||||
|
<form method="POST">
|
||||||
|
<!-- Campo de usuario -->
|
||||||
|
<div class="mb-5">
|
||||||
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="email" name="email" id="email" required
|
||||||
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||||
|
placeholder="usuario@icomunica.presidencia.gob.cu">
|
||||||
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
|
<i class="fa-solid fa-user text-gray-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contraseña actual -->
|
||||||
|
<div class="mb-5">
|
||||||
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Contraseña Actual</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="password" name="password" id="password" required
|
||||||
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||||
|
placeholder="••••••••">
|
||||||
|
<span class="password-toggle" onclick="togglePassword('password')">
|
||||||
|
<i class="fa-solid fa-eye text-gray-400"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nueva contraseña -->
|
||||||
|
<div class="mb-5">
|
||||||
|
<label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">Nueva Contraseña</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="password" name="new-password" id="new-password" required
|
||||||
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||||
|
placeholder="••••••••">
|
||||||
|
<span class="password-toggle" onclick="togglePassword('new-password')">
|
||||||
|
<i class="fa-solid fa-eye text-gray-400"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Confirmar contraseña -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirmar Nueva Contraseña</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="password" name="confirm-password" id="confirm-password" required
|
||||||
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||||
|
placeholder="••••••••">
|
||||||
|
<span class="password-toggle" onclick="togglePassword('confirm-password')">
|
||||||
|
<i class="fa-solid fa-eye text-gray-400"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Términos y condiciones -->
|
||||||
|
<div class="flex items-start mb-6">
|
||||||
<div class="flex items-center h-5">
|
<div class="flex items-center h-5">
|
||||||
<input id="newsletter" aria-describedby="newsletter" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
|
<input id="newsletter" name="newsletter" type="checkbox" required
|
||||||
|
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300">
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 text-sm">
|
<div class="ml-3 text-sm">
|
||||||
<label for="newsletter" class="font-light text-gray-500 dark:text-gray-300">I acepto los <a class="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">Terminos y condicionesw</a></label>
|
<label for="newsletter" class="font-light text-gray-600">Acepto los <a href="#" class="font-medium text-blue-600 hover:underline">Términos y condiciones</a></label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Cambiar contraseña</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
<!-- Botón de envío -->
|
||||||
|
<button type="submit" class="btn-primary w-full text-white font-medium rounded-lg py-3 px-5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||||
|
<i class="fa-solid fa-key mr-2"></i> Cambiar contraseña
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Información de seguridad -->
|
||||||
|
<div class="mt-6 pt-6 border-t border-gray-200">
|
||||||
|
<div class="flex items-center text-sm text-gray-600">
|
||||||
|
<div class="mr-3 text-blue-600">
|
||||||
|
<i class="fa-solid fa-shield"></i>
|
||||||
|
</div>
|
||||||
|
<p>Tu seguridad es nuestra prioridad. Todas las comunicaciones están cifradas.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="mt-8 text-center text-sm text-gray-500">
|
||||||
|
<p>© 2023 IComunica - Sistema de Mensajería Instantánea</p>
|
||||||
|
<p class="mt-1">Presidencia de la República de Cuba</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Función para mostrar/ocultar contraseña
|
||||||
|
function togglePassword(fieldId) {
|
||||||
|
const passwordField = document.getElementById(fieldId);
|
||||||
|
const icon = passwordField.nextElementSibling.querySelector('i');
|
||||||
|
|
||||||
|
if (passwordField.type === 'password') {
|
||||||
|
passwordField.type = 'text';
|
||||||
|
icon.classList.remove('fa-eye');
|
||||||
|
icon.classList.add('fa-eye-slash');
|
||||||
|
} else {
|
||||||
|
passwordField.type = 'password';
|
||||||
|
icon.classList.remove('fa-eye-slash');
|
||||||
|
icon.classList.add('fa-eye');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar que las contraseñas coincidan
|
||||||
|
document.querySelector('form').addEventListener('submit', function(e) {
|
||||||
|
const newPassword = document.getElementById('new-password').value;
|
||||||
|
const confirmPassword = document.getElementById('confirm-password').value;
|
||||||
|
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Las contraseñas nuevas no coinciden. Por favor, verifique.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user