[web] show proxy address, add websocket toggle

2 files changed, 16 insertions, 3 deletions

diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 1ae4ee73..ee26dad2 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -7,7 +7,8 @@ Footer.propTypes = {
 }
 
 function Footer({ settings }) {
-    let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickyauth, stickycookie, stream_large_bodies} = settings;
+    let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, websocket, anticache, anticomp,
+            stickyauth, stickycookie, stream_large_bodies, listen_host, listen_port} = settings;
     return (
         <footer>
             {mode && mode != "regular" && (
@@ -25,8 +26,11 @@ function Footer({ settings }) {
             {rawtcp && (
                 <span className="label label-success">raw-tcp</span>
             )}
-            {!http2 && (
-                <span className="label label-success">no-http2</span>
+            {http2 && (
+                <span className="label label-success">http2</span>
+            )}
+            {!websocket && (
+                <span className="label label-success">no-websocket</span>
             )}
             {anticache && (
                 <span className="label label-success">anticache</span>
@@ -43,6 +47,11 @@ function Footer({ settings }) {
             {stream_large_bodies && (
                 <span className="label label-success">stream: {formatSize(stream_large_bodies)}</span>
             )}
+            <div className="pull-right">
+            <span className="label label-primary" title="HTTP Proxy Server Address">
+            [{listen_host || "*"}:{listen_port}]
+            </span>
+            </div>
         </footer>
     )
 }
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 186a9c6a..f1d19f48 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -31,6 +31,10 @@ function OptionMenu({ settings, updateSettings }) {
                     checked={settings.http2}
                     onToggle={() => updateSettings({ http2: !settings.http2 })}
                 />
+                <ToggleButton text="websocket"
+                    checked={settings.websocket}
+                    onToggle={() => updateSettings({ websocket: !settings.websocket })}
+                />
                 <ToggleButton text="anticache"
                     checked={settings.anticache}
                     onToggle={() => updateSettings({ anticache: !settings.anticache })}