Spaces:

broadfield-dev
/

KeyLock-RSA-JS

Sleeping

App Files Files Community

broadfield-dev commited on Jun 7

Commit

8fac768

verified ·

1 Parent(s): c5dfcc1

Update index.html

Browse files

Files changed (1) hide show

index.html +64 -98

index.html CHANGED Viewed

@@ -1,116 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>KeyLock JS Decoder Example</title>
-  <style>
-    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: #333; }
-    h1, h2 { color: #111; }
-    .container { display: flex; flex-direction: column; gap: 20px; }
-    .step { border: 1px solid #ddd; padding: 15px; border-radius: 8px; background: #fafafa; }
-    label { font-weight: bold; display: block; margin-bottom: 5px; }
-    input[type="file"] { display: block; }
-    textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 14px; }
-    button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; }
-    button:disabled { background-color: #aaa; cursor: not-allowed; }
-    button:hover:not(:disabled) { background-color: #0056b3; }
-    #image-preview { max-width: 300px; max-height: 200px; margin-top: 10px; border: 1px solid #ccc; display: none; }
-    #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; }
-  </style>
 </head>
 <body>
-  <h1>KeyLock JS Decoder Example</h1>
-  <p>This page demonstrates how to use the <code>keylock-decoder.js</code> module to securely decode credentials from an image on the client-side.</p>
-  <div class="container">
-    <div class="step">
-      <h2>Step 1: Upload your KeyLock Auth Image</h2>
-      <input type="file" id="stego-image-input" accept="image/png">
-      <img id="image-preview" alt="Image preview for decoding">
-    </div>
-    <div class="step">
-      <h2>Step 2: Provide your Private Key</h2>
-      <textarea id="private-key-input" rows="10" placeholder="Paste your -----BEGIN PRIVATE KEY-----... here"></textarea>
-    </div>
-    <div class="step">
-      <h2>Step 3: Decode!</h2>
-      <button id="decode-button" disabled>Decode Credentials</button>
-      <h3>Result:</h3>
-      <div id="result-output">Awaiting input...</div>
     </div>
-  </div>
-  <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 on the image ensures it's fully rendered before we might use it
-          imagePreview.onload = () => {
-              isImageLoaded = true;
-              checkInputs();
-          };
-        };
-        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.';
-      try {
-        // The image must be loaded and available in the DOM
-        const credentials = await decodeAuthFromImage(imagePreview, keyInput.value);
-        // Success! Display the credentials and do something with them.
-        resultOutput.style.color = 'green';
-        resultOutput.textContent = `✅ Success!\n\n${JSON.stringify(credentials, null, 2)}`;
-        // In a real app, you would now use these credentials:
-        // e.g., make an authenticated API call.
-        console.log("Decoded Credentials:", credentials);
-        alert(`Successfully decoded user: ${credentials.USERNAME || 'N/A'}`);
-      } catch (error) {
-        console.error("Decoding failed:", error);
-        resultOutput.style.color = 'red';
-        resultOutput.textContent = `❌ Error: ${error.message}`;
-      } finally {
-        decodeButton.textContent = 'Decode Credentials';
-        checkInputs(); // Re-enable button if inputs are still valid
-      }
-    });
-  </script>
 </body>
 </html>

 <!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://localhost:3000/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>