From b92980efeca831c879c969e673cd60f93d0e3ace Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 15:26:49 +0100
Subject: [web] show proxy address, add websocket toggle

---
 web/src/js/components/Header/OptionMenu.jsx | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'web/src/js/components/Header')

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 })}
-- 
cgit v1.2.3


From 795e76eee298e23079f7e979119defc4c187b833 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 17:37:11 +0100
Subject: [web] style options menu

The other menus are WIP.
---
 web/src/js/components/Header/FlowMenu.jsx   |  15 ++--
 web/src/js/components/Header/MainMenu.jsx   |  21 +++---
 web/src/js/components/Header/MenuToggle.jsx |  69 +++++++++++++++++
 web/src/js/components/Header/OptionMenu.jsx | 112 ++++++++++++----------------
 web/src/js/components/Header/ViewMenu.jsx   |  32 --------
 5 files changed, 132 insertions(+), 117 deletions(-)
 create mode 100644 web/src/js/components/Header/MenuToggle.jsx
 delete mode 100644 web/src/js/components/Header/ViewMenu.jsx

(limited to 'web/src/js/components/Header')

diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index e78a49aa..e0c59afe 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -18,15 +18,12 @@ FlowMenu.propTypes = {
 function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
     return (
         <div>
-            <div className="menu-row">
-                <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
-                <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
-                <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
-                <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
-                <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
-                <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
-            </div>
-            <div className="clearfix"/>
+            <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
+            <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
+            <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
+            <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
+            <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
+            <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
         </div>
     )
 }
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 5ab3fa9d..6a4e12bf 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -1,20 +1,17 @@
-import React, { Component, PropTypes } from 'react'
-import { connect } from 'react-redux'
-import FilterInput from './FilterInput'
-import { update as updateSettings } from '../../ducks/settings'
-import { setFilter, setHighlight } from '../../ducks/flows'
+import React, { Component, PropTypes } from "react"
+import { connect } from "react-redux"
+import FilterInput from "./FilterInput"
+import { update as updateSettings } from "../../ducks/settings"
+import { setFilter, setHighlight } from "../../ducks/flows"
 
 MainMenu.title = "Start"
 
 export default function MainMenu() {
     return (
-        <div>
-            <div className="menu-row">
-                <FlowFilterInput/>
-                <HighlightInput/>
-                <InterceptInput/>
-            </div>
-            <div className="clearfix"></div>
+        <div className="menu-main">
+            <FlowFilterInput/>
+            <HighlightInput/>
+            <InterceptInput/>
         </div>
     )
 }
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx
new file mode 100644
index 00000000..726db7bd
--- /dev/null
+++ b/web/src/js/components/Header/MenuToggle.jsx
@@ -0,0 +1,69 @@
+import { PropTypes } from "react"
+import { connect } from "react-redux"
+import { update as updateSettings } from "../../ducks/settings"
+import { toggleVisibility } from "../../ducks/eventLog"
+
+MenuToggle.propTypes = {
+    value: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+export function MenuToggle({ value, onChange, children }) {
+    return (
+        <div className="entry">
+            <label>
+                <input type="checkbox"
+                       value={value}
+                       onChange={onChange}/>
+                {children}
+            </label>
+        </div>
+    )
+}
+
+
+SettingsToggle.propTypes = {
+    setting: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+export function SettingsToggle({ setting, children, settings, updateSettings }) {
+    return (
+        <MenuToggle
+            value={settings[setting] || false} // we don't have settings initially, so just pass false.
+            onChange={() => updateSettings({ [setting]: !settings[setting] })}
+        >
+            {children}
+        </MenuToggle>
+    )
+}
+SettingsToggle = connect(
+    state => ({
+        settings: state.settings,
+    }),
+    {
+        updateSettings,
+    }
+)(SettingsToggle)
+
+
+export function EventlogToggle({ toggleVisibility, eventLogVisible }) {
+    return (
+        <MenuToggle
+            value={eventLogVisible}
+            onChange={toggleVisibility}
+        >
+            Display Event Log
+        </MenuToggle>
+    )
+}
+EventlogToggle = connect(
+    state => ({
+        eventLogVisible: state.eventLog.visible,
+    }),
+    {
+        toggleVisibility,
+    }
+)(EventlogToggle)
+
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index f1d19f48..4fb5dc1f 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,75 +1,59 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import ToggleButton from '../common/ToggleButton'
-import ToggleInputButton from '../common/ToggleInputButton'
-import { update as updateSettings } from '../../ducks/settings'
+import {SettingsToggle, EventlogToggle} from './MenuToggle'
+import DocsLink from '../common/DocsLink'
 
 OptionMenu.title = 'Options'
 
-OptionMenu.propTypes = {
-    settings: PropTypes.object.isRequired,
-    updateSettings: PropTypes.func.isRequired,
-}
-
-function OptionMenu({ settings, updateSettings }) {
+export default function OptionMenu() {
     return (
         <div>
-            <div className="menu-row">
-                <ToggleButton text="showhost"
-                    checked={settings.showhost}
-                    onToggle={() => updateSettings({ showhost: !settings.showhost })}
-                />
-                <ToggleButton text="no_upstream_cert"
-                    checked={settings.no_upstream_cert}
-                    onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
-                />
-                <ToggleButton text="rawtcp"
-                    checked={settings.rawtcp}
-                    onToggle={() => updateSettings({ rawtcp: !settings.rawtcp })}
-                />
-                <ToggleButton text="http2"
-                    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 })}
-                />
-                <ToggleButton text="anticomp"
-                    checked={settings.anticomp}
-                    onToggle={() => updateSettings({ anticomp: !settings.anticomp })}
-                />
-                <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
-                    checked={!!settings.stickyauth}
-                    txt={settings.stickyauth}
-                    onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
-                />
-                <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
-                    checked={!!settings.stickycookie}
-                    txt={settings.stickycookie}
-                    onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
-                />
-                <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
-                    checked={!!settings.stream_large_bodies}
-                    txt={settings.stream_large_bodies}
-                    inputType="number"
-                    onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
-                />
+            <div className="menu-group">
+                <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
+                <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
+                <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
+                <div className="description">Protocol Support</div>
+            </div>
+            <div className="menu-group">
+                <SettingsToggle setting="anticache">
+                    Disable Caching <DocsLink resource="features/anticache.html"/>
+                </SettingsToggle>
+                <SettingsToggle setting="anticomp">
+                    Disable Compression <i className="fa fa-question-circle" title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
+                </SettingsToggle>
+                <div className="entry"/>
+                <div className="description">HTTP Options</div>
             </div>
-            <div className="clearfix"/>
+            <div className="menu-group">
+                <SettingsToggle setting="showhost">
+                    Use Host Header <i className="fa fa-question-circle" title="Use the Host header to construct URLs for display."></i>
+                </SettingsToggle>
+                <EventlogToggle/>
+                <div className="entry"/>
+                <div className="description">View Options</div>
+            </div>
+            { /*
+            <ToggleButton text="no_upstream_cert"
+                checked={settings.no_upstream_cert}
+                onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
+            />
+            <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
+                checked={!!settings.stickyauth}
+                txt={settings.stickyauth}
+                onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
+            />
+            <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
+                checked={!!settings.stickycookie}
+                txt={settings.stickycookie}
+                onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
+            />
+            <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
+                checked={!!settings.stream_large_bodies}
+                txt={settings.stream_large_bodies}
+                inputType="number"
+                onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
+            />
+            */}
         </div>
     )
 }
-
-export default connect(
-    state => ({
-        settings: state.settings,
-    }),
-    {
-        updateSettings,
-    }
-)(OptionMenu)
diff --git a/web/src/js/components/Header/ViewMenu.jsx b/web/src/js/components/Header/ViewMenu.jsx
deleted file mode 100644
index 22b370d1..00000000
--- a/web/src/js/components/Header/ViewMenu.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import ToggleButton from '../common/ToggleButton'
-import { toggleVisibility } from '../../ducks/eventLog'
-
-ViewMenu.title = 'View'
-ViewMenu.route = 'flows'
-
-ViewMenu.propTypes = {
-    eventLogVisible: PropTypes.bool.isRequired,
-    toggleEventLog: PropTypes.func.isRequired,
-}
-
-function ViewMenu({ eventLogVisible, toggleEventLog }) {
-    return (
-        <div>
-            <div className="menu-row">
-                <ToggleButton text="Show Event Log" checked={eventLogVisible} onToggle={toggleEventLog} />
-            </div>
-            <div className="clearfix"></div>
-        </div>
-    )
-}
-
-export default connect(
-    state => ({
-        eventLogVisible: state.eventLog.visible,
-    }),
-    {
-        toggleEventLog: toggleVisibility,
-    }
-)(ViewMenu)
-- 
cgit v1.2.3


From 6540aedaab107a7eecf57d2275e578d97fc77335 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 18:49:28 +0100
Subject: [web] style start menu

---
 web/src/js/components/Header/FilterDocs.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/src/js/components/Header')

diff --git a/web/src/js/components/Header/FilterDocs.jsx b/web/src/js/components/Header/FilterDocs.jsx
index c237e230..49fb5fbc 100644
--- a/web/src/js/components/Header/FilterDocs.jsx
+++ b/web/src/js/components/Header/FilterDocs.jsx
@@ -47,7 +47,7 @@ export default class FilterDocs extends Component {
                             <a href="http://docs.mitmproxy.org/en/stable/features/filters.html"
                                 target="_blank">
                                 <i className="fa fa-external-link"></i>
-                            &nbsp mitmproxy docs</a>
+                            &nbsp; mitmproxy docs</a>
                         </td>
                     </tr>
                 </tbody>
-- 
cgit v1.2.3


From d1c7b203f08d4b1e1ee3c7a50762a4f08843feef Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 19:59:54 +0100
Subject: [web] style flow menu

---
 web/src/js/components/Header/FlowMenu.jsx   | 62 +++++++++++++++----
 web/src/js/components/Header/MenuToggle.jsx |  2 +-
 web/src/js/components/Header/OptionMenu.jsx | 92 +++++++++++++++--------------
 3 files changed, 100 insertions(+), 56 deletions(-)

(limited to 'web/src/js/components/Header')

diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index e0c59afe..420cb054 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -1,13 +1,13 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import Button from '../common/Button'
-import { MessageUtils } from '../../flow/utils.js'
-import * as flowsActions from '../../ducks/flows'
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import Button from "../common/Button"
+import { MessageUtils } from "../../flow/utils.js"
+import * as flowsActions from "../../ducks/flows"
 
 FlowMenu.title = 'Flow'
 
 FlowMenu.propTypes = {
-    flow: PropTypes.object.isRequired,
+    flow: PropTypes.object,
     acceptFlow: PropTypes.func.isRequired,
     replayFlow: PropTypes.func.isRequired,
     duplicateFlow: PropTypes.func.isRequired,
@@ -16,14 +16,52 @@ FlowMenu.propTypes = {
 }
 
 function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
+    if (!flow)
+        return <div/>
     return (
         <div>
-            <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
-            <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
-            <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
-            <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
-            <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
-            <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
+            <div className="menu-group">
+                <div className="menu-content">
+                    <Button title="[r]eplay flow" icon="fa-repeat text-primary" onClick={() => replayFlow(flow)}>
+                        Replay
+                    </Button>
+                    <Button title="[D]uplicate flow" icon="fa-copy text-info"
+                            onClick={() => duplicateFlow(flow)}>
+                        Duplicate
+                    </Button>
+                    <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]"
+                            icon="fa-history text-warning" onClick={() => revertFlow(flow)}>
+                        Revert
+                    </Button>
+                    <Button title="[d]elete flow" icon="fa-trash text-danger" onClick={() => removeFlow(flow)}>
+                        Delete
+                    </Button>
+                </div>
+                <div className="menu-legend">Flow Modification</div>
+            </div>
+            <div className="menu-group">
+                <div className="menu-content">
+                    <Button title="download" icon="fa-download"
+                            onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}>
+                        Download
+                    </Button>
+                </div>
+                <div className="menu-legend">Export</div>
+            </div>
+            <div className="menu-group">
+                <div className="menu-content">
+                    <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
+                    icon="fa-play text-success" onClick={() => acceptFlow(flow)}
+                    >
+                Resume
+            </Button>
+
+                </div>
+                <div className="menu-legend">Interception</div>
+            </div>
+
+
+
         </div>
     )
 }
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx
index 726db7bd..8977f3b9 100644
--- a/web/src/js/components/Header/MenuToggle.jsx
+++ b/web/src/js/components/Header/MenuToggle.jsx
@@ -11,7 +11,7 @@ MenuToggle.propTypes = {
 
 export function MenuToggle({ value, onChange, children }) {
     return (
-        <div className="entry">
+        <div className="menu-entry">
             <label>
                 <input type="checkbox"
                        value={value}
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 4fb5dc1f..d6a8dfc2 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,7 +1,7 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import {SettingsToggle, EventlogToggle} from './MenuToggle'
-import DocsLink from '../common/DocsLink'
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import { SettingsToggle, EventlogToggle } from "./MenuToggle"
+import DocsLink from "../common/DocsLink"
 
 OptionMenu.title = 'Options'
 
@@ -9,51 +9,57 @@ export default function OptionMenu() {
     return (
         <div>
             <div className="menu-group">
-                <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
-                <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
-                <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
-                <div className="description">Protocol Support</div>
+                <div className="menu-content">
+                    <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
+                    <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
+                    <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
+                </div>
+                <div className="menu-legend">Protocol Support</div>
             </div>
             <div className="menu-group">
-                <SettingsToggle setting="anticache">
-                    Disable Caching <DocsLink resource="features/anticache.html"/>
-                </SettingsToggle>
-                <SettingsToggle setting="anticomp">
-                    Disable Compression <i className="fa fa-question-circle" title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
-                </SettingsToggle>
-                <div className="entry"/>
-                <div className="description">HTTP Options</div>
+                <div className="menu-content">
+                    <SettingsToggle setting="anticache">
+                        Disable Caching <DocsLink resource="features/anticache.html"/>
+                    </SettingsToggle>
+                    <SettingsToggle setting="anticomp">
+                        Disable Compression <i className="fa fa-question-circle"
+                                               title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
+                    </SettingsToggle>
+                </div>
+                <div className="menu-legend">HTTP Options</div>
             </div>
             <div className="menu-group">
-                <SettingsToggle setting="showhost">
-                    Use Host Header <i className="fa fa-question-circle" title="Use the Host header to construct URLs for display."></i>
-                </SettingsToggle>
-                <EventlogToggle/>
-                <div className="entry"/>
-                <div className="description">View Options</div>
+                <div className="menu-content">
+                    <SettingsToggle setting="showhost">
+                        Use Host Header <i className="fa fa-question-circle"
+                                           title="Use the Host header to construct URLs for display."></i>
+                    </SettingsToggle>
+                    <EventlogToggle/>
+                </div>
+                <div className="menu-legend">View Options</div>
             </div>
             { /*
-            <ToggleButton text="no_upstream_cert"
-                checked={settings.no_upstream_cert}
-                onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
-            />
-            <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
-                checked={!!settings.stickyauth}
-                txt={settings.stickyauth}
-                onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
-            />
-            <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
-                checked={!!settings.stickycookie}
-                txt={settings.stickycookie}
-                onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
-            />
-            <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
-                checked={!!settings.stream_large_bodies}
-                txt={settings.stream_large_bodies}
-                inputType="number"
-                onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
-            />
-            */}
+             <ToggleButton text="no_upstream_cert"
+             checked={settings.no_upstream_cert}
+             onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
+             />
+             <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
+             checked={!!settings.stickyauth}
+             txt={settings.stickyauth}
+             onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
+             />
+             <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
+             checked={!!settings.stickycookie}
+             txt={settings.stickycookie}
+             onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
+             />
+             <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
+             checked={!!settings.stream_large_bodies}
+             txt={settings.stream_large_bodies}
+             inputType="number"
+             onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
+             />
+             */}
         </div>
     )
 }
-- 
cgit v1.2.3


From d854e08653ccee12119266e2cc3f5d6c279341e5 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 22:52:17 +0100
Subject: [web] various fixes

---
 web/src/js/components/Header/FileMenu.jsx   |  8 ++++----
 web/src/js/components/Header/FlowMenu.jsx   | 27 ++++++++++++++++-----------
 web/src/js/components/Header/MenuToggle.jsx |  2 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

(limited to 'web/src/js/components/Header')

diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 53c63ea1..ec32c857 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -21,23 +21,23 @@ function FileMenu ({clearFlows, loadFlows, saveFlows}) {
         <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
             <a href="#" onClick={e => FileMenu.onNewClick(e, clearFlows)}>
                 <i className="fa fa-fw fa-file"></i>
-                New
+                &nbsp;New
             </a>
             <FileChooser
                 icon="fa-folder-open"
-                text="Open..."
+                text="&nbsp;Open..."
                 onOpenFile={file => loadFlows(file)}
             />
             <a href="#" onClick={e =>{ e.preventDefault(); saveFlows();}}>
                 <i className="fa fa-fw fa-floppy-o"></i>
-                Save...
+                &nbsp;Save...
             </a>
 
             <Divider/>
 
             <a href="http://mitm.it/" target="_blank">
                 <i className="fa fa-fw fa-external-link"></i>
-                Install Certificates...
+                &nbsp;Install Certificates...
             </a>
         </Dropdown>
     )
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 420cb054..a404fdb7 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -8,21 +8,23 @@ FlowMenu.title = 'Flow'
 
 FlowMenu.propTypes = {
     flow: PropTypes.object,
-    acceptFlow: PropTypes.func.isRequired,
+    resumeFlow: PropTypes.func.isRequired,
+    killFlow: PropTypes.func.isRequired,
     replayFlow: PropTypes.func.isRequired,
     duplicateFlow: PropTypes.func.isRequired,
     removeFlow: PropTypes.func.isRequired,
     revertFlow: PropTypes.func.isRequired
 }
 
-function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
+function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
     if (!flow)
         return <div/>
     return (
         <div>
             <div className="menu-group">
                 <div className="menu-content">
-                    <Button title="[r]eplay flow" icon="fa-repeat text-primary" onClick={() => replayFlow(flow)}>
+                    <Button title="[r]eplay flow" icon="fa-repeat text-primary"
+                            onClick={() => replayFlow(flow)}>
                         Replay
                     </Button>
                     <Button title="[D]uplicate flow" icon="fa-copy text-info"
@@ -33,7 +35,8 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
                             icon="fa-history text-warning" onClick={() => revertFlow(flow)}>
                         Revert
                     </Button>
-                    <Button title="[d]elete flow" icon="fa-trash text-danger" onClick={() => removeFlow(flow)}>
+                    <Button title="[d]elete flow" icon="fa-trash text-danger"
+                            onClick={() => removeFlow(flow)}>
                         Delete
                     </Button>
                 </div>
@@ -51,17 +54,18 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
             <div className="menu-group">
                 <div className="menu-content">
                     <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
-                    icon="fa-play text-success" onClick={() => acceptFlow(flow)}
-                    >
-                Resume
-            </Button>
-
+                            icon="fa-play text-success" onClick={() => resumeFlow(flow)}>
+                        Resume
+                    </Button>
+                    <Button disabled={!flow || !flow.intercepted} title="kill intercepted flow [x]"
+                            icon="fa-times text-danger" onClick={() => killFlow(flow)}>
+                        Abort
+                    </Button>
                 </div>
                 <div className="menu-legend">Interception</div>
             </div>
 
 
-
         </div>
     )
 }
@@ -71,7 +75,8 @@ export default connect(
         flow: state.flows.byId[state.flows.selected[0]],
     }),
     {
-        acceptFlow: flowsActions.accept,
+        resumeFlow: flowsActions.resume,
+        killFlow: flowsActions.kill,
         replayFlow: flowsActions.replay,
         duplicateFlow: flowsActions.duplicate,
         removeFlow: flowsActions.remove,
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx
index 8977f3b9..91f093c6 100644
--- a/web/src/js/components/Header/MenuToggle.jsx
+++ b/web/src/js/components/Header/MenuToggle.jsx
@@ -14,7 +14,7 @@ export function MenuToggle({ value, onChange, children }) {
         <div className="menu-entry">
             <label>
                 <input type="checkbox"
-                       value={value}
+                       checked={value}
                        onChange={onChange}/>
                 {children}
             </label>
-- 
cgit v1.2.3