authenticator/assets/js/script.js

// 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();