Create login-handler.js

login-handler.js

@@ -0,0 +1,129 @@
+import { KeyLock } from '../dist/keylock.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const keylock = new KeyLock();
+
+    // --- DOM Elements ---
+    const imageUploadInput = document.getElementById('image-upload-input');
+    const imageUploadBox = document.getElementById('image-upload-box');
+    const imagePreview = document.getElementById('image-preview');
+    const uploadPrompt = document.getElementById('upload-prompt');
+    const statusDisplay = document.getElementById('status-display');
+    const privateKeyInputDecode = document.getElementById('private-key-input-decode');
+
+    const generateImgButton = document.getElementById('generate-img-button');
+    const payloadInput = document.getElementById('payload-input');
+    const publicKeyInputEncode = document.getElementById('public-key-input-encode');
+    const generatedImageArea = document.getElementById('generated-image-area');
+    const generatedImagePreview = document.getElementById('generated-image-preview');
+    const downloadGeneratedImage = document.getElementById('download-generated-image');
+
+    const generateKeysButton = document.getElementById('generate-keys-button');
+    const outputPublicKey = document.getElementById('output-public-key');
+    const outputPrivateKey = document.getElementById('output-private-key');
+
+    // --- Helper Functions ---
+    function setStatus(message, type = 'info') {
+        statusDisplay.innerHTML = `<p>${message}</p>`;
+        statusDisplay.className = type;
+    }
+
+    // --- Event Listeners ---
+
+    // 1. DECODER: Handle image upload
+    imageUploadInput.addEventListener('change', async (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const privateKey = privateKeyInputDecode.value;
+        if (!privateKey) {
+            setStatus('<strong>Error:</strong> Please provide your Private Key to decode the image.', 'error');
+            return;
+        }
+
+        // Show preview
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            imagePreview.src = e.target.result;
+            imagePreview.classList.remove('hidden');
+            uploadPrompt.classList.add('hidden');
+        };
+        reader.readAsDataURL(file);
+
+        setStatus('Decoding in progress...', 'info');
+
+        try {
+            const payload = await keylock.decode(file, privateKey);
+            let payloadHtml = "<strong>Authentication Success</strong><ul>";
+            for (const [key, value] of Object.entries(payload)) {
+                // Obfuscate sensitive values like passwords/keys
+                const isSensitive = ['pass', 'secret', 'key', 'token'].some(k => key.toLowerCase().includes(k));
+                const displayValue = isSensitive ? '•'.repeat(8) : value;
+                payloadHtml += `<li><strong>${key}:</strong> ${displayValue}</li>`;
+            }
+            payloadHtml += "</ul>";
+            setStatus(payloadHtml, 'success');
+        } catch (error) {
+            console.error('Decoding failed:', error);
+            setStatus(`<strong>Login Failed:</strong> ${error.message}`, 'error');
+        }
+    });
+    
+    // Allow drag-and-drop
+    imageUploadBox.addEventListener('dragover', (e) => { e.preventDefault(); e.stopPropagation(); });
+    imageUploadBox.addEventListener('drop', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        imageUploadInput.files = e.dataTransfer.files;
+        imageUploadInput.dispatchEvent(new Event('change'));
+    });
+    imageUploadBox.addEventListener('click', () => imageUploadInput.click());
+
+
+    // 2. ENCODER: Handle image generation
+    generateImgButton.addEventListener('click', async () => {
+        const publicKey = publicKeyInputEncode.value;
+        const payloadStr = payloadInput.value;
+
+        if (!publicKey || !payloadStr) {
+            alert('Please provide the recipient\'s public key and a JSON payload.');
+            return;
+        }
+
+        try {
+            const payload = JSON.parse(payloadStr);
+            generateImgButton.textContent = 'Generating...';
+            generateImgButton.disabled = true;
+
+            const imageUrl = await keylock.encode(payload, publicKey);
+
+            generatedImagePreview.src = imageUrl;
+            downloadGeneratedImage.href = imageUrl;
+            generatedImageArea.classList.remove('hidden');
+
+        } catch (error) {
+            console.error('Encoding failed:', error);
+            alert(`Encoding failed: ${error.message}. Make sure the payload is valid JSON.`);
+        } finally {
+            generateImgButton.textContent = 'Generate Encrypted Image';
+            generateImgButton.disabled = false;
+        }
+    });
+
+    // 3. KEYGEN: Handle key pair generation
+    generateKeysButton.addEventListener('click', async () => {
+        generateKeysButton.textContent = 'Generating...';
+        generateKeysButton.disabled = true;
+        try {
+            const keys = await KeyLock.generateKeys();
+            outputPublicKey.value = keys.publicKey;
+            outputPrivateKey.value = keys.privateKey;
+        } catch (error) {
+            console.error('Key generation failed:', error);
+            alert(`Key generation failed: ${error.message}`);
+        } finally {
+            generateKeysButton.textContent = 'Generate Keys';
+            generateKeysButton.disabled = false;
+        }
+    });
+});