Spaces:

broadfield-dev
/

KeyLock-RSA-JS

Sleeping

App Files Files Community

broadfield-dev commited on Jun 7

Commit

06ed56c

verified ·

1 Parent(s): 30cc34f

Update index.html

Browse files

Files changed (1) hide show

index.html +55 -154

index.html CHANGED Viewed

@@ -1,167 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>KeyLock Client-Side Decoder Demo</title>
-  <style>
-    :root {
-      --primary-color: #007bff;
-      --primary-hover: #0056b3;
-      --border-color: #ddd;
-      --background-color: #fafafa;
-      --text-color: #333;
-      --error-color: #dc3545;
-      --success-color: #28a745;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      line-height: 1.6;
-      max-width: 800px;
-      margin: 20px auto;
-      padding: 0 15px;
-      color: var(--text-color);
-    }
-    main { display: flex; flex-direction: column; gap: 25px; }
-    h1 { color: #111; text-align: center; }
-    .step { border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; background: var(--background-color); }
-    label { font-weight: bold; display: block; margin-bottom: 8px; font-size: 1.1rem; }
-    input[type="file"] { display: block; }
-    textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 14px; min-height: 160px; }
-    button {
-      background-color: var(--primary-color);
-      color: white;
-      padding: 12px 20px;
-      border: none;
-      border-radius: 5px;
-      font-size: 1.1rem;
-      font-weight: bold;
-      cursor: pointer;
-      transition: background-color 0.2s, transform 0.1s;
-      width: 100%;
-    }
-    button:disabled { background-color: #aaa; cursor: not-allowed; }
-    button:hover:not(:disabled) { background-color: var(--primary-hover); }
-    button:active:not(:disabled) { transform: translateY(1px); }
-    #image-preview {
-        max-width: 100%;
-        height: auto;
-        max-height: 250px;
-        margin-top: 15px;
-        border: 2px dashed var(--border-color);
-        display: none;
-        object-fit: contain;
-        background: #f0f0f0;
-    }
-    #result-output {
-        margin-top: 10px;
-        background: #e9ecef;
-        padding: 15px;
-        border-radius: 5px;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        font-family: monospace;
-        min-height: 50px;
-        border: 1px solid var(--border-color);
-    }
-    .result-error { color: var(--error-color); border-left: 5px solid var(--error-color); }
-    .result-success { color: var(--success-color); border-left: 5px solid var(--success-color); }
-  </style>
 </head>
 <body>
-  <h1>🔐 KeyLock Client-Side Decoder</h1>
-  <p style="text-align:center;">This demo shows how an application can decode a KeyLock image entirely in the user's browser, using their private key. No data is sent to a server.</p>
-  <main>
-    <section class="step">
-      <label for="stego-image-input">1. Upload your KeyLock Auth Image</label>
-      <input type="file" id="stego-image-input" accept="image/png">
-      <img id="image-preview" alt="Uploaded image preview for decoding">
-    </section>
-    <section class="step">
-      <label for="private-key-input">2. Provide your Private Key</label>
-      <textarea id="private-key-input" placeholder="Paste your -----BEGIN PRIVATE KEY-----... here. The key never leaves your browser."></textarea>
-    </section>
-    <section class="step">
-      <label>3. Decode the Image</label>
-      <button id="decode-button" disabled>Decode Credentials</button>
-      <h3>Result:</h3>
-      <div id="result-output">Awaiting input...</div>
-    </section>
-  </main>
-  <script type="module">
-    // Import the main function from the decoder module
-    import { decodeAuthFromImage } from './keylock-decoder.js';
-    const imageInput = document.getElementById('stego-image-input');
-    const imagePreview = document.getElementById('image-preview');
-    const keyInput = document.getElementById('private-key-input');
-    const decodeButton = document.getElementById('decode-button');
-    const resultOutput = document.getElementById('result-output');
-    let isImageLoaded = false;
-    function checkInputs() {
-      decodeButton.disabled = !isImageLoaded || keyInput.value.trim() === '';
-    }
-    imageInput.addEventListener('change', (event) => {
-      const file = event.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          imagePreview.src = e.target.result;
-          imagePreview.style.display = 'block';
-          // The 'load' event ensures the image is fully rendered on the page
-          imagePreview.onload = () => {
-              isImageLoaded = true;
-              checkInputs();
-          };
-          imagePreview.onerror = () => {
-              isImageLoaded = false;
-              checkInputs();
-              alert("Error loading image file.");
-          }
-        };
-        reader.readAsDataURL(file);
-      } else {
-        isImageLoaded = false;
-        imagePreview.style.display = 'none';
-        checkInputs();
-      }
-    });
-    keyInput.addEventListener('input', checkInputs);
-    decodeButton.addEventListener('click', async () => {
-      decodeButton.disabled = true;
-      decodeButton.textContent = 'Processing...';
-      resultOutput.textContent = 'Decoding... please wait.';
-      resultOutput.className = ''; // Reset result styles
-      try {
-        const credentials = await decodeAuthFromImage(imagePreview, keyInput.value);
-        resultOutput.classList.add('result-success');
-        resultOutput.textContent = `✅ Success!\n\n${JSON.stringify(credentials, null, 2)}`;
-        // In a real app, you would now use the 'credentials' object
-        console.log("Decoded Credentials:", credentials);
-      } catch (error) {
-        console.error("Decoding failed:", error);
-        resultOutput.classList.add('result-error');
-        resultOutput.textContent = `❌ Error: ${error.message}`;
-      } finally {
-        decodeButton.textContent = 'Decode Credentials';
-        checkInputs(); // Re-evaluate if the button should be enabled
-      }
-    });
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>Secure Decoder Client Demo</title>
+    <style>
+        body { font-family: sans-serif; max-width: 700px; margin: 2rem auto; }
+        .container { display: flex; flex-direction: column; gap: 1rem; border: 1px solid #ccc; padding: 1.5rem; border-radius: 8px; }
+        button { font-size: 1rem; padding: 0.5rem 1rem; cursor: pointer; }
+        #result { background: #f0f0f0; padding: 1rem; border-radius: 5px; white-space: pre-wrap; font-family: monospace; }
+        input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px; }
+    </style>
 </head>
 <body>
+    <h1>Client for Secure Decoder Plugin</h1>
+    <p>This demo sends an encrypted image to a secure backend API. The backend holds the private key and returns the decrypted data.</p>
+    <div class="container">
+        <div>
+            <label for="api-url"><b>Your Deployed API Endpoint URL:</b></label>
+            <input type="text" id="api-url" placeholder="e.g., https://your-plugin.vercel.app/api/decode">
+        </div>
+        <div>
+            <label for="image-upload"><b>Upload Image (Encrypted with Plugin's Public Key):</b></label>
+            <input type="file" id="image-upload" accept="image/png">
+        </div>
+        <button id="submit-button">Send to Plugin for Decoding</button>
+        <div>
+            <h3>Result from Server:</h3>
+            <div id="result">...</div>
+        </div>
+    </div>
+    <script>
+        const apiUrlInput = document.getElementById('api-url');
+        const imageInput = document.getElementById('image-upload');
+        const submitButton = document.getElementById('submit-button');
+        const resultDiv = document.getElementById('result');
+        submitButton.addEventListener('click', async () => {
+            const file = imageInput.files[0];
+            const apiUrl = apiUrlInput.value.trim();
+            if (!file) { resultDiv.textContent = 'Please select an image file.'; return; }
+            if (!apiUrl) { resultDiv.textContent = 'Please provide the API endpoint URL.'; return; }
+            resultDiv.textContent = 'Uploading and decoding...';
+            submitButton.disabled = true;
+            const formData = new FormData();
+            formData.append('authImage', file);
+            try {
+                const response = await fetch(apiUrl, { method: 'POST', body: formData });
+                const result = await response.json();
+                if (!response.ok) throw new Error(result.error);
+                resultDiv.style.color = 'green';
+                resultDiv.textContent = JSON.stringify(result.data, null, 2);
+            } catch (error) {
+                resultDiv.style.color = 'red';
+                resultDiv.textContent = `Error: ${error.message}`;
+            } finally {
+                submitButton.disabled = false;
+            }
+        });
+    </script>
 </body>
 </html>