Spaces:

broadfield-dev
/

KeyLock-RSA-JS

Sleeping

App Files Files Community

broadfield-dev commited on Jun 7

Commit

423febb

verified ·

1 Parent(s): a87a13d

Update index.html

Browse files

Files changed (1) hide show

index.html +150 -65

index.html CHANGED Viewed

@@ -1,82 +1,167 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Plugin API Client Example</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; }
-    </style>
 </head>
 <body>
-    <h1>KeyLock Plugin Client</h1>
-    <p>This page demonstrates how to send an encrypted image to the decoder plugin API.</p>
-    <div class="container">
-        <div>
-            <label for="api-url"><b>API Endpoint URL:</b></label>
-            <input type="text" id="api-url" value="http://'0.0.0.0':7860/api/decode" style="width: 100%;">
-        </div>
-        <div>
-            <label for="image-upload"><b>Upload KeyLock Image:</b></label>
-            <input type="file" id="image-upload" accept="image/png">
-        </div>
-        <button id="submit-button">Decode Image</button>
-        <div>
-            <h3>Result:</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;
-            if (!file) {
-                resultDiv.textContent = 'Please select an image file first.';
-                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 || 'An unknown error occurred.');
-                }
-                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>

 <!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>