diff options
Diffstat (limited to 'web/src/js/components')
| -rw-r--r-- | web/src/js/components/Footer.jsx | 9 | ||||
| -rw-r--r-- | web/src/js/components/Header.jsx | 9 | ||||
| -rw-r--r-- | web/src/js/components/Header/FlowMenu.jsx | 10 | ||||
| -rw-r--r-- | web/src/js/components/Header/MainMenu.jsx | 39 | ||||
| -rw-r--r-- | web/src/js/components/Header/OptionMenu.jsx | 33 | ||||
| -rw-r--r-- | web/src/js/components/ProxyApp.jsx | 7 | ||||
| -rw-r--r-- | web/src/js/components/common/Button.jsx | 6 |
7 files changed, 64 insertions, 49 deletions
diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 1f6de2d7..82d6d8a1 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -1,11 +1,12 @@ import React from 'react' +import { connect } from 'react-redux' import { formatSize } from '../utils.js' Footer.propTypes = { settings: React.PropTypes.object.isRequired, } -export default function Footer({ settings }) { +function Footer({ settings }) { return ( <footer> {settings.mode && settings.mode != "regular" && ( @@ -44,3 +45,9 @@ export default function Footer({ settings }) { </footer> ) } + +export default connect( + state => ({ + settings: state.settings.settings, + }) +)(Footer) diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index 93ca5154..ab25eb41 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -12,10 +12,6 @@ import {setActiveMenu} from '../ducks/ui.js' class Header extends Component { static entries = [MainMenu, ViewMenu, OptionMenu] - static propTypes = { - settings: PropTypes.object.isRequired, - } - handleClick(active, e) { e.preventDefault() this.props.setActiveMenu(active.title) @@ -24,7 +20,7 @@ class Header extends Component { } render() { - const { settings, updateLocation, query, selectedFlow, activeMenu} = this.props + const { updateLocation, query, selectedFlow, activeMenu} = this.props let entries = [...Header.entries] if(selectedFlow) @@ -47,10 +43,9 @@ class Header extends Component { </nav> <div className="menu"> <Active - settings={settings} updateLocation={updateLocation} query={query} - /> + /> </div> </header> ) diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 96f42652..abecf0dc 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -15,10 +15,12 @@ function FlowMenu({ flow }) { return ( <div> <div className="menu-row"> - <Button disabled title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} /> - <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} /> - <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)}/> - <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/> + <Button disabled={!flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => FlowActions.accept(flow)} /> + <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} /> + <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} /> + <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)}/> + <Button disabled={!flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => FlowActions.revert(flow)} /> + <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/> </div> <div className="clearfix"/> </div> diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 7b0b542c..a466a980 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -1,8 +1,8 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import FilterInput from './FilterInput' import { Query } from '../../actions.js' -import {setInterceptPattern} from "../../ducks/settings" -import { connect } from 'react-redux' +import { updateSettings } from '../../ducks/settings' class MainMenu extends Component { @@ -10,14 +10,16 @@ class MainMenu extends Component { static route = 'flows' static propTypes = { - settings: React.PropTypes.object.isRequired, + query: PropTypes.object.isRequired, + settings: PropTypes.object.isRequired, + updateLocation: PropTypes.func.isRequired, + onSettingsChange: PropTypes.func.isRequired, } constructor(props, context) { super(props, context) this.onSearchChange = this.onSearchChange.bind(this) this.onHighlightChange = this.onHighlightChange.bind(this) - this.onInterceptChange = this.onInterceptChange.bind(this) } onSearchChange(val) { @@ -28,16 +30,8 @@ class MainMenu extends Component { this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val }) } - onInterceptChange(val) { - this.props.setInterceptPattern(val); - } - render() { - const { query, settings } = this.props - - const search = query[Query.SEARCH] || '' - const highlight = query[Query.HIGHLIGHT] || '' - const intercept = settings.intercept || '' + const { query, settings, onSettingsChange } = this.props return ( <div> @@ -47,7 +41,7 @@ class MainMenu extends Component { placeholder="Search" type="search" color="black" - value={search} + value={query[Query.SEARCH] || ''} onChange={this.onSearchChange} /> <FilterInput @@ -55,7 +49,7 @@ class MainMenu extends Component { placeholder="Highlight" type="tag" color="hsl(48, 100%, 50%)" - value={highlight} + value={query[Query.HIGHLIGHT] || ''} onChange={this.onHighlightChange} /> <FilterInput @@ -63,8 +57,8 @@ class MainMenu extends Component { placeholder="Intercept" type="pause" color="hsl(208, 56%, 53%)" - value={intercept} - onChange={this.onInterceptChange} + value={settings.intercept || ''} + onChange={intercept => onSettingsChange({ intercept })} /> </div> <div className="clearfix"></div> @@ -73,6 +67,11 @@ class MainMenu extends Component { } } -export default connect(undefined, { - setInterceptPattern -})(MainMenu); +export default connect( + state => ({ + settings: state.settings.settings, + }), + { + onSettingsChange: updateSettings, + } +)(MainMenu); diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 44f309fd..f871ec92 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -1,61 +1,72 @@ import React, { PropTypes } from 'react' +import { connect } from 'react-redux' import ToggleButton from '../common/ToggleButton' import ToggleInputButton from '../common/ToggleInputButton' -import { SettingsActions } from '../../actions.js' +import { updateSettings } from '../../ducks/settings' OptionMenu.title = 'Options' OptionMenu.propTypes = { settings: PropTypes.object.isRequired, + onSettingsChange: PropTypes.func.isRequired, } -export default function OptionMenu({ settings }) { +function OptionMenu({ settings, onSettingsChange }) { // @todo use settings.map return ( <div> <div className="menu-row"> <ToggleButton text="showhost" checked={settings.showhost} - onToggle={() => SettingsActions.update({ showhost: !settings.showhost })} + onToggle={() => onSettingsChange({ showhost: !settings.showhost })} /> <ToggleButton text="no_upstream_cert" checked={settings.no_upstream_cert} - onToggle={() => SettingsActions.update({ no_upstream_cert: !settings.no_upstream_cert })} + onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })} /> <ToggleButton text="rawtcp" checked={settings.rawtcp} - onToggle={() => SettingsActions.update({ rawtcp: !settings.rawtcp })} + onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })} /> <ToggleButton text="http2" checked={settings.http2} - onToggle={() => SettingsActions.update({ http2: !settings.http2 })} + onToggle={() => onSettingsChange({ http2: !settings.http2 })} /> <ToggleButton text="anticache" checked={settings.anticache} - onToggle={() => SettingsActions.update({ anticache: !settings.anticache })} + onToggle={() => onSettingsChange({ anticache: !settings.anticache })} /> <ToggleButton text="anticomp" checked={settings.anticomp} - onToggle={() => SettingsActions.update({ anticomp: !settings.anticomp })} + onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })} /> <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter" checked={!!settings.stickyauth} txt={settings.stickyauth || ''} - onToggleChanged={txt => SettingsActions.update({ stickyauth: !settings.stickyauth ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })} /> <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter" checked={!!settings.stickycookie} txt={settings.stickycookie || ''} - onToggleChanged={txt => SettingsActions.update({ stickycookie: !settings.stickycookie ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })} /> <ToggleInputButton name="stream" placeholder="stream..." checked={!!settings.stream} txt={settings.stream || ''} inputType="number" - onToggleChanged={txt => SettingsActions.update({ stream: !settings.stream ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })} /> </div> <div className="clearfix"/> </div> ) } + +export default connect( + state => ({ + settings: state.settings.settings, + }), + { + onSettingsChange: updateSettings, + } +)(OptionMenu) diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 39cadff5..5d795b57 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -111,11 +111,11 @@ class ProxyAppMain extends Component { } render() { - const { showEventLog, location, children, settings } = this.props + const { showEventLog, location, children } = this.props const query = this.getQuery() return ( <div id="container" tabIndex="0" onKeyDown={this.onKeyDown}> - <Header ref="header" settings={settings} updateLocation={this.updateLocation} query={query} /> + <Header ref="header" updateLocation={this.updateLocation} query={query} /> {React.cloneElement( children, { ref: 'view', location, query, updateLocation: this.updateLocation } @@ -123,7 +123,7 @@ class ProxyAppMain extends Component { {showEventLog && ( <EventLog key="eventlog"/> )} - <Footer settings={settings}/> + <Footer /> </div> ) } @@ -132,6 +132,5 @@ class ProxyAppMain extends Component { export default connect( state => ({ showEventLog: state.eventLog.visible, - settings: state.settings.settings, }) )(ProxyAppMain) diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index cc2fe9dd..574288df 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -5,9 +5,11 @@ Button.propTypes = { text: PropTypes.string.isRequired } -export default function Button({ onClick, text, icon }) { +export default function Button({ onClick, text, icon, disabled }) { return ( - <div className={"btn btn-default"} onClick={onClick}> + <div className={"btn btn-default"} + onClick={onClick} + disabled={disabled}> <i className={"fa fa-fw " + icon}/> {text} |