1 files changed, 100 insertions, 0 deletions
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
new file mode 100644
index 00000000..b075b3c8
--- /dev/null
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -0,0 +1,100 @@
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import { FlowActions } from '../../actions.js'
+
+export default class FileMenu extends Component {
+
+    constructor(props, context) {
+        super(props, context)
+        this.state = { show: false }
+
+        this.close = this.close.bind(this)
+        this.onFileClick = this.onFileClick.bind(this)
+        this.onNewClick = this.onNewClick.bind(this)
+        this.onOpenClick = this.onOpenClick.bind(this)
+        this.onOpenFile = this.onOpenFile.bind(this)
+        this.onSaveClick = this.onSaveClick.bind(this)
+    }
+
+    close() {
+        this.setState({ show: false })
+        document.removeEventListener('click', this.close)
+    }
+
+    onFileClick(e) {
+        e.preventDefault()
+
+        if (this.state.show) {
+            return
+        }
+
+        document.addEventListener('click', this.close)
+        this.setState({ show: true })
+    }
+
+    onNewClick(e) {
+        e.preventDefault()
+        if (confirm('Delete all flows?')) {
+            FlowActions.clear()
+        }
+    }
+
+    onOpenClick(e) {
+        e.preventDefault()
+        this.fileInput.click()
+    }
+
+    onOpenFile(e) {
+        e.preventDefault()
+        if (e.target.files.length > 0) {
+            FlowActions.upload(e.target.files[0])
+            this.fileInput.value = ''
+        }
+    }
+
+    onSaveClick(e) {
+        e.preventDefault()
+        FlowActions.download()
+    }
+
+    render() {
+        return (
+            <div className={classnames('dropdown pull-left', { open: this.state.show })}>
+                <a href="#" className="special" onClick={this.onFileClick}>mitmproxy</a>
+                <ul className="dropdown-menu" role="menu">
+                    <li>
+                        <a href="#" onClick={this.onNewClick}>
+                            <i className="fa fa-fw fa-file"></i>
+                            New
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" onClick={this.onOpenClick}>
+                            <i className="fa fa-fw fa-folder-open"></i>
+                            Open...
+                        </a>
+                        <input
+                            ref={ref => this.fileInput = ref}
+                            className="hidden"
+                            type="file"
+                            onChange={this.onOpenFile}
+                        />
+                    </li>
+                    <li>
+                        <a href="#" onClick={this.onSaveClick}>
+                            <i className="fa fa-fw fa-floppy-o"></i>
+                            Save...
+                        </a>
+                    </li>
+                    <li role="presentation" className="divider"></li>
+                    <li>
+                        <a href="http://mitm.it/" target="_blank">
+                            <i className="fa fa-fw fa-external-link"></i>
+                            Install Certificates...
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        )
+    }
+}