refactor: overhaul index.php structure and add styles and script for password validation and generation

assets/js/script.js

@@ -0,0 +1,173 @@
+// Elementos del DOM
+const passwordInput = document.getElementById('password-input');
+const togglePasswordBtn = document.getElementById('toggle-password');
+const strengthBar = document.getElementById('strength-bar');
+const strengthText = document.getElementById('strength-text');
+
+// Iconos de criterios de validación
+const lengthIcon = document.getElementById('length-icon');
+const uppercaseIcon = document.getElementById('uppercase-icon');
+const lowercaseIcon = document.getElementById('lowercase-icon');
+const numberIcon = document.getElementById('number-icon');
+const specialIcon = document.getElementById('special-icon');
+
+// Elementos para generación de contraseñas
+const uppercaseCheckbox = document.getElementById('uppercase-checkbox');
+const lowercaseCheckbox = document.getElementById('lowercase-checkbox');
+const numbersCheckbox = document.getElementById('numbers-checkbox');
+const symbolsCheckbox = document.getElementById('symbols-checkbox');
+const lengthSlider = document.getElementById('length-slider');
+const lengthValue = document.getElementById('length-value');
+const generateBtn = document.getElementById('generate-btn');
+const resultPassword = document.getElementById('result-password');
+const generatedPassword = document.getElementById('generated-password');
+const copyBtn = document.getElementById('copy-btn');
+
+// Caracteres para generar contraseñas
+const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
+const numberChars = '0123456789';
+const symbolChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+// Mostrar/ocultar contraseña
+togglePasswordBtn.addEventListener('click', function () {
+    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+    passwordInput.setAttribute('type', type);
+    this.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>';
+});
+
+// Validar contraseña en tiempo real
+passwordInput.addEventListener('input', validatePassword);
+
+// Actualizar valor del slider de longitud
+lengthSlider.addEventListener('input', function () {
+    lengthValue.textContent = this.value;
+});
+
+// Generar contraseña
+generateBtn.addEventListener('click', generatePassword);
+
+// Copiar contraseña generada
+copyBtn.addEventListener('click', copyPassword);
+
+// Función para validar la contraseña
+function validatePassword() {
+    const password = passwordInput.value;
+    let strength = 0;
+    let criteriaMet = 0;
+
+    // Criterios de validación
+    const hasMinLength = password.length >= 8;
+    const hasUppercase = /[A-Z]/.test(password);
+    const hasLowercase = /[a-z]/.test(password);
+    const hasNumber = /\d/.test(password);
+    const hasSpecial = /[!@#$%^&*]/.test(password);
+
+    // Actualizar iconos de criterios
+    updateCriteriaIcon(lengthIcon, hasMinLength);
+    updateCriteriaIcon(uppercaseIcon, hasUppercase);
+    updateCriteriaIcon(lowercaseIcon, hasLowercase);
+    updateCriteriaIcon(numberIcon, hasNumber);
+    updateCriteriaIcon(specialIcon, hasSpecial);
+
+    // Calcular fortaleza
+    if (hasMinLength) strength += 20;
+    if (hasUppercase) strength += 20;
+    if (hasLowercase) strength += 20;
+    if (hasNumber) strength += 20;
+    if (hasSpecial) strength += 20;
+
+    // Actualizar barra y texto de fortaleza
+    strengthBar.style.width = strength + '%';
+
+    if (strength <= 20) {
+        strengthBar.style.backgroundColor = '#ef4444';
+        strengthText.textContent = 'Fortaleza: Muy débil';
+    } else if (strength <= 40) {
+        strengthBar.style.backgroundColor = '#f97316';
+        strengthText.textContent = 'Fortaleza: Débil';
+    } else if (strength <= 60) {
+        strengthBar.style.backgroundColor = '#eab308';
+        strengthText.textContent = 'Fortaleza: Moderada';
+    } else if (strength <= 80) {
+        strengthBar.style.backgroundColor = '#84cc16';
+        strengthText.textContent = 'Fortaleza: Fuerte';
+    } else {
+        strengthBar.style.backgroundColor = '#10b981';
+        strengthText.textContent = 'Fortaleza: Muy fuerte';
+    }
+}
+
+// Función para actualizar iconos de criterios
+function updateCriteriaIcon(iconElement, isValid) {
+    if (isValid) {
+        iconElement.className = 'fas fa-check-circle valid';
+    } else {
+        iconElement.className = 'fas fa-times-circle invalid';
+    }
+}
+
+// Función para generar contraseña
+function generatePassword() {
+    // Verificar que al menos una opción esté seleccionada
+    if (!uppercaseCheckbox.checked && !lowercaseCheckbox.checked &&
+        !numbersCheckbox.checked && !symbolsCheckbox.checked) {
+        alert('Selecciona al menos un tipo de carácter para generar la contraseña.');
+        return;
+    }
+
+    // Construir el conjunto de caracteres disponibles
+    let availableChars = '';
+    if (uppercaseCheckbox.checked) availableChars += uppercaseChars;
+    if (lowercaseCheckbox.checked) availableChars += lowercaseChars;
+    if (numbersCheckbox.checked) availableChars += numberChars;
+    if (symbolsCheckbox.checked) availableChars += symbolChars;
+
+    // Generar la contraseña
+    const length = parseInt(lengthSlider.value);
+    let password = '';
+
+    for (let i = 0; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * availableChars.length);
+        password += availableChars[randomIndex];
+    }
+
+    // Mostrar la contraseña generada
+    generatedPassword.textContent = password;
+    resultPassword.classList.add('show');
+
+    // También poner la contraseña generada en el campo de validación
+    passwordInput.value = password;
+    passwordInput.type = 'text';
+    togglePasswordBtn.innerHTML = '<i class="far fa-eye-slash"></i>';
+    validatePassword();
+}
+
+// Función para copiar la contraseña al portapapeles
+function copyPassword() {
+    const passwordText = generatedPassword.textContent;
+
+    if (!passwordText) {
+        alert('No hay contraseña para copiar. Genera una contraseña primero.');
+        return;
+    }
+
+    // Usar la API del portapapeles
+    navigator.clipboard.writeText(passwordText).then(() => {
+        // Cambiar temporalmente el texto del botón
+        const originalText = copyBtn.innerHTML;
+        copyBtn.innerHTML = '<i class="fas fa-check"></i> ¡Copiada!';
+        copyBtn.style.backgroundColor = '#10b981';
+
+        setTimeout(() => {
+            copyBtn.innerHTML = originalText;
+            copyBtn.style.backgroundColor = '';
+        }, 2000);
+    }).catch(err => {
+        console.error('Error al copiar: ', err);
+        alert('No se pudo copiar la contraseña. Inténtalo de nuevo.');
+    });
+}
+
+// Validar contraseña al cargar la página (para estado inicial)
+validatePassword();