Merge pull request #4 from manghidev/changes

feat: improve error handling and add fallback for serial generation

Author: manghidev

js/app.js

@@ -12,7 +12,7 @@ const translations = {
         initialMessage: "Haz clic en \"Generar Serial\"",
         generating: "Generando...",
         errorPrefix: "Error:",
-        errorMessage: "Asegúrate de que tu navegador soporta Web Crypto API y los valores son válidos.",
+        errorMessage: "Intenta recargar la página o usa un navegador más reciente.",
         copyError: "No se pudo copiar el serial. Por favor, cópialo manualmente.",
         generatorTab: "Generar Serial",
         decoderTab: "Decodificar Fecha",
@@ -36,7 +36,7 @@ const translations = {
         initialMessage: "Click \"Generate Serial\"",
         generating: "Generating...",
         errorPrefix: "Error:",
-        errorMessage: "Make sure your browser supports Web Crypto API and the values are valid.",
+        errorMessage: "Try refreshing the page or use a more recent browser.",
         copyError: "Could not copy the serial. Please copy it manually.",
         generatorTab: "Generate Serial",
         decoderTab: "Decode Date",
@@ -81,6 +81,11 @@ async function generateHighEntropySerialNumber(
     totalRandomLength = 24,
     prefix = null
 ) {
+    // Verificar si Web Crypto API está disponible
+    if (!window.crypto || !window.crypto.getRandomValues) {
+        throw new Error('Web Crypto API no está disponible en este navegador');
+    }
+
     // Validaciones y Ajustes de Parámetros
     const validatedSegmentLength = Math.max(1, Math.min(12, segmentLength));
     const validatedTotalRandomLength = Math.max(6, Math.min(50, totalRandomLength));
@@ -96,8 +101,13 @@ async function generateHighEntropySerialNumber(
 
     const getSecureRandomByte = () => {
         if (byteBufferIndex >= BYTE_BUFFER_SIZE) {
-            window.crypto.getRandomValues(byteBuffer);
-            byteBufferIndex = 0;
+            try {
+                window.crypto.getRandomValues(byteBuffer);
+                byteBufferIndex = 0;
+            } catch (error) {
+                console.error('Error con getRandomValues:', error);
+                throw new Error('No se pudieron generar valores aleatorios seguros');
+            }
         }
         return byteBuffer[byteBufferIndex++];
     };
@@ -142,6 +152,61 @@ async function generateHighEntropySerialNumber(
     return finalSerialParts.join('-');
 }
 
+// Función de respaldo usando Math.random() si Web Crypto API falla
+function generateFallbackSerialNumber(
+    segmentLength = 6,
+    totalRandomLength = 24,
+    prefix = null
+) {
+    console.warn('Usando generador de respaldo con Math.random()');
+    
+    // Validaciones y Ajustes de Parámetros
+    const validatedSegmentLength = Math.max(1, Math.min(12, segmentLength));
+    const validatedTotalRandomLength = Math.max(6, Math.min(50, totalRandomLength));
+
+    // Configuración de Caracteres
+    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const charsLength = chars.length;
+
+    // 1. Generar la Parte de la Marca de Tiempo
+    const timestampPart = Date.now().toString(36).toUpperCase();
+
+    // 2. Generar los Caracteres Aleatorios usando Math.random()
+    let rawRandomChars = '';
+    for (let i = 0; i < validatedTotalRandomLength; i++) {
+        const randomIndex = Math.floor(Math.random() * charsLength);
+        rawRandomChars += chars[randomIndex];
+    }
+
+    // 3. Formato de la Parte Aleatoria con Guiones
+    let formattedRandomPart = '';
+    let currentPos = 0;
+
+    while (currentPos < validatedTotalRandomLength) {
+        const remainingLength = validatedTotalRandomLength - currentPos;
+        const currentSegmentLength = Math.min(validatedSegmentLength, remainingLength);
+        
+        formattedRandomPart += rawRandomChars.substring(currentPos, currentPos + currentSegmentLength);
+        currentPos += currentSegmentLength;
+
+        if (currentPos < validatedTotalRandomLength) {
+            formattedRandomPart += '-';
+        }
+    }
+
+    // 4. Construir el Serial Final
+    const finalSerialParts = [];
+
+    if (prefix && String(prefix).trim().length > 0) {
+        finalSerialParts.push(String(prefix).toUpperCase().trim());
+    }
+
+    finalSerialParts.push(timestampPart);
+    finalSerialParts.push(formattedRandomPart);
+
+    return finalSerialParts.join('-');
+}
+
 // Función para decodificar la fecha de un serial
 function decodeSerialTimestamp(serial) {
     if (!serial || typeof serial !== 'string') {
@@ -298,25 +363,59 @@ function updateUI() {
 
 // Función para manejar la generación del serial
 async function handleGenerateSerial() {
+    console.log('handleGenerateSerial called'); // Debug
+    
     const t = translations[currentLanguage];
     const serialOutput = document.getElementById('serialOutput');
     const copyButton = document.getElementById('copyButton');
 
+    if (!serialOutput) {
+        console.error('serialOutput element not found');
+        return;
+    }
+    
+    if (!copyButton) {
+        console.error('copyButton element not found');
+        return;
+    }
+    
     serialOutput.textContent = t.generating;
     serialOutput.style.color = '#72ef72'; // Resetear color a verde
     copyButton.classList.remove('copied'); // Asegurar que el botón de copiar no esté en estado "copiado"
     copyButton.textContent = t.copyButton; // Resetear texto del botón de copiar
 
     try {
-        const segmentLen = parseInt(document.getElementById('segmentLength').value);
-        const totalRandomLen = parseInt(document.getElementById('totalRandomLength').value);
-        const prefixVal = document.getElementById('prefix').value.trim();
-
-        const generatedSerial = await generateHighEntropySerialNumber(
-            segmentLen,
-            totalRandomLen,
-            prefixVal
-        );
+        const segmentLenElement = document.getElementById('segmentLength');
+        const totalRandomLenElement = document.getElementById('totalRandomLength');
+        const prefixElement = document.getElementById('prefix');
+        
+        if (!segmentLenElement || !totalRandomLenElement || !prefixElement) {
+            throw new Error('No se pudieron encontrar los elementos del formulario');
+        }
+        
+        const segmentLen = parseInt(segmentLenElement.value) || 6;
+        const totalRandomLen = parseInt(totalRandomLenElement.value) || 24;
+        const prefixVal = prefixElement.value.trim();
+
+        console.log('Generating serial with params:', { segmentLen, totalRandomLen, prefixVal }); // Debug
+
+        let generatedSerial;
+        try {
+            generatedSerial = await generateHighEntropySerialNumber(
+                segmentLen,
+                totalRandomLen,
+                prefixVal
+            );
+        } catch (cryptoError) {
+            console.warn('Web Crypto API falló, usando método de respaldo:', cryptoError);
+            generatedSerial = generateFallbackSerialNumber(
+                segmentLen,
+                totalRandomLen,
+                prefixVal
+            );
+        }
+        
+        console.log('Generated serial:', generatedSerial); // Debug
 
         currentSerial = generatedSerial;
         serialOutput.textContent = generatedSerial;
@@ -351,6 +450,18 @@ function copyToClipboard() {
 
 // Inicialización cuando el DOM esté listo
 document.addEventListener('DOMContentLoaded', () => {
+    console.log('DOM Content Loaded'); // Debug
+    
+    // Verificar que todos los elementos críticos existan
+    const requiredElements = ['title', 'generateButton', 'serialOutput', 'copyButton'];
+    const missingElements = requiredElements.filter(id => !document.getElementById(id));
+    
+    if (missingElements.length > 0) {
+        console.error('Elementos críticos faltantes:', missingElements);
+        alert('Error: La página no se cargó correctamente. Elementos faltantes: ' + missingElements.join(', '));
+        return;
+    }
+    
     // Cargar preferencias del localStorage
     const savedLanguage = localStorage.getItem('preferredLanguage') || 'en-US';
     const savedTab = localStorage.getItem('preferredTab') || 'generator';