webassembly/www/js/index.js

// Import our WebAssembly module
import init, { 
  keypair_new,
  keypair_pub_key,
  keypair_sign,
  keypair_verify,
  generate_symmetric_key,
  encrypt_symmetric,
  decrypt_symmetric
} from '../../pkg/webassembly.js';

// Helper function to convert ArrayBuffer to hex string
function bufferToHex(buffer) {
  return Array.from(new Uint8Array(buffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

// Helper function to convert hex string to Uint8Array
function hexToBuffer(hex) {
  const bytes = new Uint8Array(hex.length / 2);
  for (let i = 0; i < hex.length; i += 2) {
    bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
  }
  return bytes;
}

async function run() {
  // Initialize the WebAssembly module
  await init();
  
  console.log('WebAssembly crypto module initialized!');
  
  // Set up the keypair generation example
  document.getElementById('keypair-button').addEventListener('click', () => {
    try {
      const result = keypair_new();
      if (result === 0) {
        document.getElementById('keypair-result').textContent = 'Keypair generated successfully!';
        
        // Get and display the public key
        try {
          const pubKey = keypair_pub_key();
          document.getElementById('pubkey-display').textContent = `Public Key: ${bufferToHex(pubKey)}`;
        } catch (e) {
          document.getElementById('pubkey-display').textContent = `Error getting public key: ${e}`;
        }
      } else {
        document.getElementById('keypair-result').textContent = `Error generating keypair: ${result}`;
      }
    } catch (e) {
      document.getElementById('keypair-result').textContent = `Error: ${e}`;
    }
  });
  
  // Set up the signing example
  document.getElementById('sign-button').addEventListener('click', () => {
    const message = document.getElementById('sign-message').value;
    const messageBytes = new TextEncoder().encode(message);
    
    try {
      const signature = keypair_sign(messageBytes);
      const signatureHex = bufferToHex(signature);
      document.getElementById('signature-result').textContent = `Signature: ${signatureHex}`;
      
      // Store the signature for verification
      document.getElementById('verify-signature').value = signatureHex;
      document.getElementById('verify-message').value = message;
    } catch (e) {
      document.getElementById('signature-result').textContent = `Error signing: ${e}`;
    }
  });
  
  // Set up the verification example
  document.getElementById('verify-button').addEventListener('click', () => {
    const message = document.getElementById('verify-message').value;
    const messageBytes = new TextEncoder().encode(message);
    const signatureHex = document.getElementById('verify-signature').value;
    const signatureBytes = hexToBuffer(signatureHex);
    
    try {
      const isValid = keypair_verify(messageBytes, signatureBytes);
      document.getElementById('verify-result').textContent = 
        isValid ? 'Signature is valid!' : 'Signature is NOT valid!';
    } catch (e) {
      document.getElementById('verify-result').textContent = `Error verifying: ${e}`;
    }
  });
  
  // Set up the symmetric encryption example
  document.getElementById('encrypt-button').addEventListener('click', () => {
    try {
      // Generate key
      const key = generate_symmetric_key();
      
      // Display key
      const keyHex = bufferToHex(key);
      document.getElementById('sym-key-display').textContent = `Key: ${keyHex}`;
      
      // Store for decryption
      document.getElementById('decrypt-key').value = keyHex;
      
      // Encrypt the message
      const message = document.getElementById('encrypt-message').value;
      const messageBytes = new TextEncoder().encode(message);
      
      try {
        // New API: encrypt_symmetric only takes key and message
        const ciphertext = encrypt_symmetric(key, messageBytes);
        const ciphertextHex = bufferToHex(ciphertext);
        document.getElementById('encrypt-result').textContent = `Ciphertext: ${ciphertextHex}`;
        
        // Store for decryption
        document.getElementById('decrypt-ciphertext').value = ciphertextHex;
      } catch (e) {
        document.getElementById('encrypt-result').textContent = `Error encrypting: ${e}`;
      }
    } catch (e) {
      document.getElementById('encrypt-result').textContent = `Error: ${e}`;
    }
  });
  
  // Set up the symmetric decryption example
  document.getElementById('decrypt-button').addEventListener('click', () => {
    try {
      const keyHex = document.getElementById('decrypt-key').value;
      const ciphertextHex = document.getElementById('decrypt-ciphertext').value;
      
      const key = hexToBuffer(keyHex);
      const ciphertext = hexToBuffer(ciphertextHex);
      
      try {
        // New API: decrypt_symmetric only takes key and ciphertext
        const plaintext = decrypt_symmetric(key, ciphertext);
        const decodedText = new TextDecoder().decode(plaintext);
        document.getElementById('decrypt-result').textContent = `Decrypted: ${decodedText}`;
      } catch (e) {
        document.getElementById('decrypt-result').textContent = `Error decrypting: ${e}`;
      }
    } catch (e) {
      document.getElementById('decrypt-result').textContent = `Error: ${e}`;
    }
  });
}

run().catch(console.error);