diff options
Diffstat (limited to 'web/src/js/components')
38 files changed, 127 insertions, 54 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 398438ab..a79bf9e5 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' @@ -11,8 +12,8 @@ ContentView.propTypes = { // It may seem a bit weird at the first glance: // Every view takes the flow and the message as props, e.g. // <Auto flow={flow} message={flow.request}/> - flow: React.PropTypes.object.isRequired, - message: React.PropTypes.object.isRequired, + flow: PropTypes.object.isRequired, + message: PropTypes.object.isRequired, } ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) diff --git a/web/src/js/components/ContentView/CodeEditor.jsx b/web/src/js/components/ContentView/CodeEditor.jsx index 8afc128f..f5961447 100644 --- a/web/src/js/components/ContentView/CodeEditor.jsx +++ b/web/src/js/components/ContentView/CodeEditor.jsx @@ -1,4 +1,5 @@ -import React, {PropTypes} from 'react' +import React from 'react' +import PropTypes from 'prop-types' import Codemirror from 'react-codemirror'; diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx index e7a6f379..4cafde28 100644 --- a/web/src/js/components/ContentView/ContentLoader.jsx +++ b/web/src/js/components/ContentView/ContentLoader.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { MessageUtils } from '../../flow/utils.js' export default View => class extends React.Component { diff --git a/web/src/js/components/ContentView/ContentViewOptions.jsx b/web/src/js/components/ContentView/ContentViewOptions.jsx index 1ec9013e..e3cc39cd 100644 --- a/web/src/js/components/ContentView/ContentViewOptions.jsx +++ b/web/src/js/components/ContentView/ContentViewOptions.jsx @@ -1,12 +1,13 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import ViewSelector from './ViewSelector' import UploadContentButton from './UploadContentButton' import DownloadContentButton from './DownloadContentButton' ContentViewOptions.propTypes = { - flow: React.PropTypes.object.isRequired, - message: React.PropTypes.object.isRequired, + flow: PropTypes.object.isRequired, + message: PropTypes.object.isRequired, } function ContentViewOptions({ flow, message, uploadContent, readonly, contentViewDescription }) { diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index db239195..136188d4 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes, Component } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { setContentViewDescription, setContent } from '../../ducks/ui/flow' import ContentLoader from './ContentLoader' @@ -21,7 +22,7 @@ function ViewImage({ flow, message }) { } Edit.propTypes = { - content: React.PropTypes.string.isRequired, + content: PropTypes.string.isRequired, } function Edit({ content, onChange }) { diff --git a/web/src/js/components/ContentView/DownloadContentButton.jsx b/web/src/js/components/ContentView/DownloadContentButton.jsx index 3f11f909..447db211 100644 --- a/web/src/js/components/ContentView/DownloadContentButton.jsx +++ b/web/src/js/components/ContentView/DownloadContentButton.jsx @@ -1,5 +1,5 @@ import { MessageUtils } from "../../flow/utils" -import { PropTypes } from 'react' +import PropTypes from 'prop-types' DownloadContentButton.propTypes = { flow: PropTypes.object.isRequired, diff --git a/web/src/js/components/ContentView/ShowFullContentButton.jsx b/web/src/js/components/ContentView/ShowFullContentButton.jsx index fd68991e..fd627ad9 100644 --- a/web/src/js/components/ContentView/ShowFullContentButton.jsx +++ b/web/src/js/components/ContentView/ShowFullContentButton.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { render } from 'react-dom'; import Button from '../common/Button'; diff --git a/web/src/js/components/ContentView/UploadContentButton.jsx b/web/src/js/components/ContentView/UploadContentButton.jsx index de349af4..0021593f 100644 --- a/web/src/js/components/ContentView/UploadContentButton.jsx +++ b/web/src/js/components/ContentView/UploadContentButton.jsx @@ -1,4 +1,4 @@ -import { PropTypes } from 'react' +import PropTypes from 'prop-types' import FileChooser from '../common/FileChooser' UploadContentButton.propTypes = { @@ -6,7 +6,7 @@ UploadContentButton.propTypes = { } export default function UploadContentButton({ uploadContent }) { - + return ( <FileChooser icon="fa-upload" diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx index 43a53995..4c99d5ed 100644 --- a/web/src/js/components/ContentView/ViewSelector.jsx +++ b/web/src/js/components/ContentView/ViewSelector.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes, Component } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { setContentView } from '../../ducks/ui/flow'; import Dropdown from '../common/Dropdown' diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx index 1a449511..a83cdb28 100644 --- a/web/src/js/components/EventLog.jsx +++ b/web/src/js/components/EventLog.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { toggleFilter, toggleVisibility } from '../ducks/eventLog' import ToggleButton from './common/ToggleButton' @@ -55,7 +56,7 @@ class EventLog extends Component { <div onMouseDown={this.onDragStart}> Eventlog <div className="pull-right"> - {['debug', 'info', 'web'].map(type => ( + {['debug', 'info', 'web', 'warn', 'error'].map(type => ( <ToggleButton key={type} text={type} checked={filters[type]} onToggle={() => toggleFilter(type)}/> ))} <i onClick={close} className="fa fa-close"></i> diff --git a/web/src/js/components/EventLog/EventList.jsx b/web/src/js/components/EventLog/EventList.jsx index d0b036e7..a77b7e36 100644 --- a/web/src/js/components/EventLog/EventList.jsx +++ b/web/src/js/components/EventLog/EventList.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import shallowEqual from 'shallowequal' import AutoScroll from '../helpers/AutoScroll' @@ -83,7 +84,12 @@ class EventLogList extends Component { } function LogIcon({ event }) { - const icon = { web: 'html5', debug: 'bug' }[event.level] || 'info' + const icon = { + web: 'html5', + debug: 'bug', + warn: 'exclamation-triangle', + error: 'ban' + }[event.level] || 'info' return <i className={`fa fa-fw fa-${icon}`}></i> } diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx index eddeed62..24c1f3a1 100644 --- a/web/src/js/components/FlowTable.jsx +++ b/web/src/js/components/FlowTable.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import shallowEqual from 'shallowequal' import AutoScroll from './helpers/AutoScroll' diff --git a/web/src/js/components/FlowTable/FlowRow.jsx b/web/src/js/components/FlowTable/FlowRow.jsx index 7961d502..71a30e39 100644 --- a/web/src/js/components/FlowTable/FlowRow.jsx +++ b/web/src/js/components/FlowTable/FlowRow.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' import columns from './FlowColumns' import { pure } from '../../utils' diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx index b201285f..59ad73e2 100644 --- a/web/src/js/components/FlowTable/FlowTableHead.jsx +++ b/web/src/js/components/FlowTable/FlowTableHead.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import classnames from 'classnames' import columns from './FlowColumns' @@ -7,8 +8,8 @@ import { setSort } from '../../ducks/flows' FlowTableHead.propTypes = { setSort: PropTypes.func.isRequired, - sortDesc: React.PropTypes.bool.isRequired, - sortColumn: React.PropTypes.string, + sortDesc: PropTypes.bool.isRequired, + sortColumn: PropTypes.string, } function FlowTableHead({ sortColumn, sortDesc, setSort }) { diff --git a/web/src/js/components/FlowView/Headers.jsx b/web/src/js/components/FlowView/Headers.jsx index 2e181383..92e11465 100644 --- a/web/src/js/components/FlowView/Headers.jsx +++ b/web/src/js/components/FlowView/Headers.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import ValueEditor from '../ValueEditor/ValueEditor' import { Key } from '../../utils' diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index 93c52660..4a31faf4 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' diff --git a/web/src/js/components/FlowView/Nav.jsx b/web/src/js/components/FlowView/Nav.jsx index 37c073ce..af5a879e 100644 --- a/web/src/js/components/FlowView/Nav.jsx +++ b/web/src/js/components/FlowView/Nav.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import classnames from 'classnames' diff --git a/web/src/js/components/FlowView/ToggleEdit.jsx b/web/src/js/components/FlowView/ToggleEdit.jsx index 6a691a3d..b47b45db 100644 --- a/web/src/js/components/FlowView/ToggleEdit.jsx +++ b/web/src/js/components/FlowView/ToggleEdit.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes, Component } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { startEdit, stopEdit } from '../../ducks/ui/flow' diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 58dd0dcb..08d15496 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -1,14 +1,15 @@ import React from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { formatSize } from '../utils.js' Footer.propTypes = { - settings: React.PropTypes.object.isRequired, + settings: PropTypes.object.isRequired, } function Footer({ settings }) { let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, websocket, anticache, anticomp, - stickyauth, stickycookie, stream_large_bodies, listen_host, listen_port, version} = settings; + stickyauth, stickycookie, stream_large_bodies, listen_host, listen_port, version, server} = settings; return ( <footer> {mode && mode != "regular" && ( @@ -48,9 +49,11 @@ function Footer({ settings }) { <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> + {server && ( + <span className="label label-primary" title="HTTP Proxy Server Address"> + {listen_host||"*"}:{listen_port} + </span> + )} <span className="label label-info" title="Mitmproxy Version"> v{version} </span> diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index c15c951f..ebe7453c 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import classnames from 'classnames' import MainMenu from './Header/MainMenu' @@ -6,6 +7,7 @@ import OptionMenu from './Header/OptionMenu' import FileMenu from './Header/FileMenu' import FlowMenu from './Header/FlowMenu' import {setActiveMenu} from '../ducks/ui/header' +import ConnectionIndicator from "./Header/ConnectionIndicator" class Header extends Component { static entries = [MainMenu, OptionMenu] @@ -38,10 +40,11 @@ class Header extends Component { {Entry.title} </a> ))} + <ConnectionIndicator/> </nav> - <menu> + <div> <Active/> - </menu> + </div> </header> ) } diff --git a/web/src/js/components/Header/ConnectionIndicator.jsx b/web/src/js/components/Header/ConnectionIndicator.jsx new file mode 100644 index 00000000..1ee42e25 --- /dev/null +++ b/web/src/js/components/Header/ConnectionIndicator.jsx @@ -0,0 +1,30 @@ +import React from "react" +import PropTypes from "prop-types" +import { connect } from "react-redux" +import { ConnectionState } from "../../ducks/connection" + + +ConnectionIndicator.propTypes = { + state: PropTypes.symbol.isRequired, + message: PropTypes.string, + +} +function ConnectionIndicator({ state, message }) { + switch (state) { + case ConnectionState.INIT: + return <span className="connection-indicator init">connecting…</span>; + case ConnectionState.FETCHING: + return <span className="connection-indicator fetching">fetching data…</span>; + case ConnectionState.ESTABLISHED: + return <span className="connection-indicator established">connected</span>; + case ConnectionState.ERROR: + return <span className="connection-indicator error" + title={message}>connection lost</span>; + case ConnectionState.OFFLINE: + return <span className="connection-indicator offline">offline</span>; + } +} + +export default connect( + state => state.connection, +)(ConnectionIndicator) diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index ec32c857..1975d1cb 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import FileChooser from '../common/FileChooser' import Dropdown, {Divider} from '../common/Dropdown' diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx index 12479c10..44496d5b 100644 --- a/web/src/js/components/Header/FilterInput.jsx +++ b/web/src/js/components/Header/FilterInput.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes, Component } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import classnames from 'classnames' import { Key } from '../../utils.js' diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index a404fdb7..fb61baf1 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from "react" +import React from "react" +import PropTypes from 'prop-types' import { connect } from "react-redux" import Button from "../common/Button" import { MessageUtils } from "../../flow/utils.js" diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 6a4e12bf..465649d7 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from "react" +import React, { Component } from "react" +import PropTypes from 'prop-types' import { connect } from "react-redux" import FilterInput from "./FilterInput" import { update as updateSettings } from "../../ducks/settings" diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx index 91f093c6..220a2b79 100644 --- a/web/src/js/components/Header/MenuToggle.jsx +++ b/web/src/js/components/Header/MenuToggle.jsx @@ -1,4 +1,4 @@ -import { PropTypes } from "react" +import PropTypes from 'prop-types' import { connect } from "react-redux" import { update as updateSettings } from "../../ducks/settings" import { toggleVisibility } from "../../ducks/eventLog" diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index d6a8dfc2..b33d578d 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from "react" +import React from "react" +import PropTypes from 'prop-types' import { connect } from "react-redux" import { SettingsToggle, EventlogToggle } from "./MenuToggle" import DocsLink from "../common/DocsLink" diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 5c9a2d30..e2bedc88 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import Splitter from './common/Splitter' import FlowTable from './FlowTable' diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx index 1c20b1a9..77b07027 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import _ from 'lodash' diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 18976de0..af5b3caa 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { connect } from 'react-redux' import { onKeyDown } from '../ducks/ui/keyboard' diff --git a/web/src/js/components/ValueEditor/ValidateEditor.jsx b/web/src/js/components/ValueEditor/ValidateEditor.jsx index 7415c1b8..27b8ca48 100755 --- a/web/src/js/components/ValueEditor/ValidateEditor.jsx +++ b/web/src/js/components/ValueEditor/ValidateEditor.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import ValueEditor from './ValueEditor' import classnames from 'classnames' diff --git a/web/src/js/components/ValueEditor/ValueEditor.jsx b/web/src/js/components/ValueEditor/ValueEditor.jsx index 852f82c4..9301c181 100644 --- a/web/src/js/components/ValueEditor/ValueEditor.jsx +++ b/web/src/js/components/ValueEditor/ValueEditor.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import _ from "lodash" import classnames from 'classnames' diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index f05a68d0..e02ae010 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from "react" +import React from "react" +import PropTypes from 'prop-types' import classnames from "classnames" Button.propTypes = { diff --git a/web/src/js/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx index 182811a3..70974133 100644 --- a/web/src/js/components/common/DocsLink.jsx +++ b/web/src/js/components/common/DocsLink.jsx @@ -1,4 +1,5 @@ -import { PropTypes } from 'react' +import React from "react" +import PropTypes from "prop-types" DocsLink.propTypes = { resource: PropTypes.string.isRequired, diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx index cc95a6dc..991e127e 100644 --- a/web/src/js/components/common/Dropdown.jsx +++ b/web/src/js/components/common/Dropdown.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' export const Divider = () => <hr className="divider"/> diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx index d59d2d6d..0b14a87e 100644 --- a/web/src/js/components/common/FileChooser.jsx +++ b/web/src/js/components/common/FileChooser.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' FileChooser.propTypes = { icon: PropTypes.string, @@ -20,7 +21,7 @@ export default function FileChooser({ icon, text, className, title, onOpenFile } ref={ref => fileInput = ref} className="hidden" type="file" - onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}} + onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput.value="";}} /> </a> ) diff --git a/web/src/js/components/common/ToggleButton.jsx b/web/src/js/components/common/ToggleButton.jsx index 6027728b..925d3c39 100644 --- a/web/src/js/components/common/ToggleButton.jsx +++ b/web/src/js/components/common/ToggleButton.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' ToggleButton.propTypes = { checked: PropTypes.bool.isRequired, diff --git a/web/src/js/components/common/ToggleInputButton.jsx b/web/src/js/components/common/ToggleInputButton.jsx index 5fa24c10..2607fb66 100644 --- a/web/src/js/components/common/ToggleInputButton.jsx +++ b/web/src/js/components/common/ToggleInputButton.jsx @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' import { Key } from '../../utils' |