Update web ui

Phala-Network · Jan 12, 2024 · ab17644 · ab17644
1 parent 978c94b
commit ab17644
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 13 deletions.
diff --git a/sidevm-quickjs/web/cors-proxy.py b/sidevm-quickjs/web/cors-proxy.py
@@ -8,6 +8,7 @@
 from http.server import BaseHTTPRequestHandler, HTTPServer
 from socketserver import ThreadingMixIn
 from urllib import request
+from urllib.error import HTTPError
 
 
 class ThreadedHTTPServer(ThreadingMixIn, HTTPServer):
@@ -45,9 +46,28 @@ def do_REQUEST(self, method):
                 self.end_headers()
                 self.wfile.write(response.read())
         except Exception as e:
-            self.send_response(500)
+            if isinstance(e, HTTPError):
+                # Make sure to send the original status code from the upstream server
+                self.send_response(e.code)
+                # Copy headers from the HTTPError object
+                for header, value in e.headers.items():
+                    if header.lower() != 'access-control-allow-origin':
+                        self.send_header(header, value)
+            else:
+                self.send_response(500)
+
+            # Include Access-Control-Allow-Origin in case of an exception too
+            self.send_header('Access-Control-Allow-Origin', '*')
             self.end_headers()
-            self.wfile.write(str(e).encode())
+
+            if isinstance(e, HTTPError):
+                # Copy the response body from the HTTPError object
+                self.wfile.write(e.read())
+            else:
+                # Sending a text response containing the error message
+                response_text = str(e) if isinstance(e, HTTPError) else 'Internal Server Error'
+                self.wfile.write(response_text.encode())
+
 
     def do_HEAD(self):
         self.do_REQUEST('HEAD')

diff --git a/sidevm-quickjs/web/index.html b/sidevm-quickjs/web/index.html
@@ -1,21 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <title>Play with QuickJS</title>
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f3f4f6;
+            color: #333;
+        }
         textarea {
             font-family: monospace;
             font-size: 14px;
-            width: 600px;
-            height: 300px;
+            width: 100%;
+            max-width: 600px;
+            height: 200px;
+            margin-bottom: 10px;
+        }
+        button {
+            padding: 10px 20px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-top: 10px;
+        }
+        .checkbox-container label {
+            margin-left: 10px;
+            font-size: 14px;
+        }
+        .checkbox-container {
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+        .container {
+            margin-bottom: 10px;
+        }
+        input[type='text'] {
+            font-size: 14px;
+            padding: 10px;
+            width: 100%;
+            max-width: 440px; /* adjust to line up with textarea width */
+        }
+        .output {
+            background-color: #eaeaea;
+            border: none;
+            padding: 10px;
+            width: 100%;
+            max-width: 600px;
+            resize: none;
         }
     </style>
 </head>
-
 <body>
-    <div class="result" id="result">
+    <div class="container">
         <textarea id="input-code">
 async function main() {
     const url = "https://httpbin.org/get";
@@ -32,11 +69,15 @@
     .finally(() => process.exit());
         </textarea>
         <br>
-        <button id="btn-run" disabled="true">Run</button>
+        <button id="btn-run">Run</button>
+        <div class="checkbox-container">
+            <input type="checkbox" id="use-proxy" name="use-proxy" />
+            <label for="use-proxy">Use CORS Proxy</label>
+            <input type="text" id="proxy-url" placeholder="Enter proxy URL" disabled value="http://localhost:3000"/>
+        </div>
         <p>Output:</p>
-        <textarea id="output"></textarea>
+        <textarea id="output" class="output"></textarea>
     </div>
 </body>
-
 </html>
 <script type="module" src="main.js"></script>
diff --git a/sidevm-quickjs/web/main.js b/sidevm-quickjs/web/main.js
@@ -21,20 +21,34 @@ async function runScript() {
         setOutput(output);
     } catch (error) {
         setOutput(error);
-    }
-    finally {
+    } finally {
         setRunable(true);
     }
 }
 
 async function main() {
     await init();
 
+    const useProxyCheckbox = document.getElementById('use-proxy');
+    const proxyUrlInput = document.getElementById('proxy-url');
+
+    useProxyCheckbox.addEventListener('change', (event) => {
+        proxyUrlInput.disabled = !event.target.checked;
+    });
+
     // Provide custom fetch implementation for phatjs
     setHook("fetch", (req) => {
-        // req = new Request("http://localhost:3000/" + req.url, req);
+        if (useProxyCheckbox.checked) {
+            const proxyUrl = proxyUrlInput.value.trim();
+            if (proxyUrl) {
+                let url = new URL(proxyUrl);
+                url.pathname += req.url;
+                req = new Request(url, req);
+            }
+        }
         return fetch(req);
     });
+
     setRunable(true, runScript);
 }