diff options
| -rw-r--r-- | web/src/css/dropdown.less | 4 | ||||
| -rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 33 | ||||
| -rw-r--r-- | web/src/js/components/Footer.jsx | 33 | ||||
| -rw-r--r-- | web/src/js/components/Header/FileMenu.jsx | 97 | ||||
| -rw-r--r-- | web/src/js/components/common/Dropdown.jsx | 9 |
5 files changed, 83 insertions, 93 deletions
diff --git a/web/src/css/dropdown.less b/web/src/css/dropdown.less new file mode 100644 index 00000000..663373b3 --- /dev/null +++ b/web/src/css/dropdown.less @@ -0,0 +1,4 @@ +hr .divider { + margin-top: 5px; + margin-bottom: 5px; +} diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index cd593023..5b07969c 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -30,6 +30,12 @@ function Edit({ content, onChange }) { Edit = ContentLoader(Edit) class ViewServer extends Component { + static propTypes = { + showFullContent: PropTypes.bool.isRequired, + maxLines: PropTypes.number.isRequired, + setContentViewDescription : PropTypes.func.isRequired, + setContent: PropTypes.func.isRequired + } componentWillMount(){ this.setContentView(this.props) @@ -40,6 +46,7 @@ class ViewServer extends Component { this.setContentView(nextProps) } } + setContentView(props){ try { this.data = JSON.parse(props.content) @@ -50,25 +57,31 @@ class ViewServer extends Component { props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '') props.setContent(this.data.lines) } + render() { const {content, contentView, message, maxLines} = this.props let lines = this.props.showFullContent ? this.data.lines : this.data.lines.slice(0, maxLines) - return <div> + return ( + <div> <pre> {lines.map((line, i) => <div key={`line${i}`}> - {line.map((tuple, j) => - <span key={`tuple${j}`} className={tuple[0]}> - {tuple[1]} - </span> - )} + {line.map((element, j) => { + let style, text = element + return ( + <span key={`tuple${j}`} className={style}> + {element} + </span> + ) + })} </div> )} </pre> - {ViewImage.matches(message) && - <ViewImage {...this.props} /> - } - </div> + {ViewImage.matches(message) && + <ViewImage {...this.props} /> + } + </div> + ) } } diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 2bda70e1..96e7b7db 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -7,40 +7,41 @@ Footer.propTypes = { } function Footer({ settings }) { + let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickyauth, stickycookie, stream} = settings; return ( <footer> - {settings.mode && settings.mode != "regular" && ( - <span className="label label-success">{settings.mode} mode</span> + {mode && mode != "regular" && ( + <span className="label label-success">{mode} mode</span> )} - {settings.intercept && ( - <span className="label label-success">Intercept: {settings.intercept}</span> + {intercept && ( + <span className="label label-success">Intercept: {intercept}</span> )} - {settings.showhost && ( + {showhost && ( <span className="label label-success">showhost</span> )} - {settings.no_upstream_cert && ( + {no_upstream_cert && ( <span className="label label-success">no-upstream-cert</span> )} - {settings.rawtcp && ( + {rawtcp && ( <span className="label label-success">raw-tcp</span> )} - {!settings.http2 && ( + {!http2 && ( <span className="label label-success">no-http2</span> )} - {settings.anticache && ( + {anticache && ( <span className="label label-success">anticache</span> )} - {settings.anticomp && ( + {anticomp && ( <span className="label label-success">anticomp</span> )} - {settings.stickyauth && ( - <span className="label label-success">stickyauth: {settings.stickyauth}</span> + {stickyauth && ( + <span className="label label-success">stickyauth: {stickyauth}</span> )} - {settings.stickycookie && ( - <span className="label label-success">stickycookie: {settings.stickycookie}</span> + {stickycookie && ( + <span className="label label-success">stickycookie: {stickycookie}</span> )} - {settings.stream && ( - <span className="label label-success">stream: {formatSize(settings.stream)}</span> + {stream && ( + <span className="label label-success">stream: {formatSize(stream)}</span> )} </footer> ) diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index 6053b2d3..53c63ea1 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -1,71 +1,46 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' -import classnames from 'classnames' import FileChooser from '../common/FileChooser' -import Dropdown from '../common/Dropdown' +import Dropdown, {Divider} from '../common/Dropdown' import * as flowsActions from '../../ducks/flows' +FileMenu.propTypes = { + clearFlows: PropTypes.func.isRequired, + loadFlows: PropTypes.func.isRequired, + saveFlows: PropTypes.func.isRequired +} +FileMenu.onNewClick = (e, clearFlows) => { + e.preventDefault(); + if (confirm('Delete all flows?')) + clearFlows() +} -class FileMenu extends Component { - - static propTypes = { - clearFlows: PropTypes.func.isRequired, - loadFlows: PropTypes.func.isRequired, - saveFlows: PropTypes.func.isRequired - } - - constructor(props, context) { - super(props, context) - - this.onNewClick = this.onNewClick.bind(this) - this.onOpenClick = this.onOpenClick.bind(this) - this.onOpenFile = this.onOpenFile.bind(this) - this.onSaveClick = this.onSaveClick.bind(this) - } - - onNewClick(e) { - e.preventDefault() - if (confirm('Delete all flows?')) { - this.props.clearFlows() - } - } - - onOpenFile(file) { - this.props.loadFlows(file) - } - - onSaveClick(e) { - e.preventDefault() - this.props.saveFlows() - } - - render() { - return ( - <Dropdown className="pull-left" btnClass="special" text="mitmproxy"> - <a href="#" onClick={this.onNewClick}> - <i className="fa fa-fw fa-file"></i> - New - </a> - <FileChooser - icon="fa-folder-open" - text="Open..." - onOpenFile={this.onOpenFile} - /> - <a href="#" onClick={this.onSaveClick}> - <i className="fa fa-fw fa-floppy-o"></i> - Save... - </a> - - <span name="divider"/> - - <a href="http://mitm.it/" target="_blank"> - <i className="fa fa-fw fa-external-link"></i> - Install Certificates... - </a> - </Dropdown> - ) - } +function FileMenu ({clearFlows, loadFlows, saveFlows}) { + return ( + <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 + </a> + <FileChooser + icon="fa-folder-open" + text="Open..." + onOpenFile={file => loadFlows(file)} + /> + <a href="#" onClick={e =>{ e.preventDefault(); saveFlows();}}> + <i className="fa fa-fw fa-floppy-o"></i> + Save... + </a> + + <Divider/> + + <a href="http://mitm.it/" target="_blank"> + <i className="fa fa-fw fa-external-link"></i> + Install Certificates... + </a> + </Dropdown> + ) } export default connect( diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx index 9180767f..9db131d4 100644 --- a/web/src/js/components/common/Dropdown.jsx +++ b/web/src/js/components/common/Dropdown.jsx @@ -1,6 +1,8 @@ import React, { Component, PropTypes } from 'react' import classnames from 'classnames' +export function Divider () { return <hr className="divider"/>} + export default class Dropdown extends Component { static propTypes = { @@ -43,12 +45,7 @@ export default class Dropdown extends Component { {text} </a> <ul className="dropdown-menu" role="menu"> - {children.map(item => - item.name == "divider" ? - <li role="presentation" className="divider"/> - : - <li> {item} </li> - )} + {children.map ( (item, i) => <li key={i}> {item} </li> )} </ul> </div> ) |