kevin/portal_comunica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2

Browse Source
This commit is contained in:
kevin 2025-07-12 15:24:29 -04:00
parent feeafa632b
commit 7f1ca93dfd
1 changed files with 216 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
index.php
View File

@ -1,7 +1,7 @@
<?php
session_start();
//Credenciales de admin de la api
// Credenciales de administrador para la API
$api_username = 'admin@comunica.presidencia.gob.cu';
$api_password = '**4fgTK85pb';
$api_host = 'https://comunica.presidencia.gob.cu:5443/api/change_password';
@ -15,6 +15,7 @@ $db_pass = '**4fgTK85pbicomunica';
// Variables para mensajes
$success = '';
$error = '';
$showForm = true;
// Procesar formulario cuando se envía
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
@ -82,7 +83,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
'email' => $email
]);
$success = "Contraseña actualizada exitosamente";
$success = "¡Contraseña actualizada exitosamente!";
$showForm = false;
} else {
$error = "Error en el servidor XMPP: " . htmlspecialchars($response);
}
@ -95,60 +97,238 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Cambiar Contrasenna</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<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): ?>
<div class="success-animation bg-green-50 border border-green-200 rounded-lg p-6 mb-6 text-center">
<div class="text-green-600 mb-3">
<i class="fa-solid fa-circle-check text-4xl"></i>
</div>
<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>
</div>
</div>
<?php endif; ?>
<section class="bg-gray-50 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
<img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo">
IComunica
</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">
<h2 class="mb-1 text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Cambiar Contraseña
</h2>
<form class="mt-4 space-y-4 lg:mt-5 md:space-y-5" action="#">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tu usuario</label>
<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="">
<?php if ($error): ?>
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
<div class="flex items-center">
<div class="text-red-600 mr-3">
<i class="fa-solid fa-circle-exclamation"></i>
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contraseña</label>
<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="">
<h3 class="text-sm font-medium text-red-800">Error</h3>
<p class="text-red-700 text-sm"><?= $error ?></p>
</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>
<?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>
<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="">
<!-- 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>
<div class="flex items-start">
<!-- 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">
<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 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>
<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>
</html>