Merge branch 'mitmweb-options' of https://github.com/MatthewShao/mitmproxy into mitmweb-options

6 files changed, 104 insertions, 25 deletions

diff --git a/web/src/js/ducks/connection.js b/web/src/js/ducks/connection.js
index ffa2c309..151277fb 100644
--- a/web/src/js/ducks/connection.js
+++ b/web/src/js/ducks/connection.js
@@ -1,6 +1,6 @@
 export const ConnectionState = {
     INIT: Symbol("init"),
-    FETCHING: Symbol("fetching"), // WebSocket is established, but still startFetching resources.
+    FETCHING: Symbol("fetching"), // WebSocket is established, but still fetching resources.
     ESTABLISHED: Symbol("established"),
     ERROR: Symbol("error"),
     OFFLINE: Symbol("offline"), // indicates that there is no live (websocket) backend.
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index 48e3708b..3277fb9e 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -1,14 +1,12 @@
-import { fetchApi } from '../utils'
-import  * as optionActions from './ui/option'
+import { fetchApi } from "../utils"
+import * as optionsEditorActions from "./ui/optionsEditor"
+import _ from "lodash"
 
-export const RECEIVE        = 'OPTIONS_RECEIVE'
-export const UPDATE         = 'OPTIONS_UPDATE'
+export const RECEIVE = 'OPTIONS_RECEIVE'
+export const UPDATE = 'OPTIONS_UPDATE'
 export const REQUEST_UPDATE = 'REQUEST_UPDATE'
-export const UNKNOWN_CMD    = 'OPTIONS_UNKNOWN_CMD'
 
-const defaultState = {
-
-}
+const defaultState = {}
 
 export default function reducer(state = defaultState, action) {
     switch (action.type) {
@@ -27,18 +25,22 @@ export default function reducer(state = defaultState, action) {
     }
 }
 
-export function update(options) {
+let sendUpdate = (option, value, dispatch) => {
+    fetchApi.put('/options', { [option]: value }).then(response => {
+        if (response.status === 200) {
+            dispatch(optionsEditorActions.updateSuccess(option))
+        } else {
+            response.text().then(error => {
+                dispatch(optionsEditorActions.updateError(option, error))
+            })
+        }
+    })
+}
+sendUpdate = _.throttle(sendUpdate, 700, { leading: true, trailing: true })
+
+export function update(option, value) {
     return dispatch => {
-        let option = Object.keys(options)[0]
-        dispatch({ type: optionActions.OPTION_UPDATE_START, option, value: options[option] })
-        fetchApi.put('/options', options).then(response => {
-            if (response.status === 200) {
-                dispatch({ type: optionActions.OPTION_UPDATE_SUCCESS, option})
-            } else {
-                response.text().then( text => {
-                    dispatch({type: optionActions.OPTION_UPDATE_ERROR, error: text, option})
-                })
-            }
-        })
+        dispatch(optionsEditorActions.startUpdate(option, value))
+        sendUpdate(option, value, dispatch);
     }
 }
diff --git a/web/src/js/ducks/settings.js b/web/src/js/ducks/settings.js
index a2e360de..38c36842 100644
--- a/web/src/js/ducks/settings.js
+++ b/web/src/js/ducks/settings.js
@@ -3,7 +3,6 @@ import { fetchApi } from '../utils'
 export const RECEIVE        = 'SETTINGS_RECEIVE'
 export const UPDATE         = 'SETTINGS_UPDATE'
 export const REQUEST_UPDATE = 'REQUEST_UPDATE'
-export const UNKNOWN_CMD    = 'SETTINGS_UNKNOWN_CMD'
 
 const defaultState = {
 
diff --git a/web/src/js/ducks/ui/index.js b/web/src/js/ducks/ui/index.js
index cdee7ebb..f5e6851f 100644
--- a/web/src/js/ducks/ui/index.js
+++ b/web/src/js/ducks/ui/index.js
@@ -2,12 +2,12 @@ import { combineReducers } from 'redux'
 import flow from './flow'
 import header from './header'
 import modal from './modal'
-import option from './option'
+import optionsEditor from './optionsEditor'
 
 // TODO: Just move ducks/ui/* into ducks/?
 export default combineReducers({
     flow,
     header,
     modal,
-    option,
+    optionsEditor,
 })
diff --git a/web/src/js/ducks/ui/keyboard.js b/web/src/js/ducks/ui/keyboard.js
index 0e3491fa..e3f8c33c 100644
--- a/web/src/js/ducks/ui/keyboard.js
+++ b/web/src/js/ducks/ui/keyboard.js
@@ -1,6 +1,7 @@
 import { Key } from "../../utils"
 import { selectTab } from "./flow"
 import * as flowsActions from "../flows"
+import * as modalActions from "./modal"
 
 
 export function onKeyDown(e) {
@@ -46,7 +47,11 @@ export function onKeyDown(e) {
                 break
 
             case Key.ESC:
-                dispatch(flowsActions.select(null))
+                if(getState().ui.modal.activeModal){
+                    dispatch(modalActions.hideModal())
+                } else {
+                    dispatch(flowsActions.select(null))
+                }
                 break
 
             case Key.LEFT: {
diff --git a/web/src/js/ducks/ui/optionsEditor.js b/web/src/js/ducks/ui/optionsEditor.js
new file mode 100644
index 00000000..23dfe01a
--- /dev/null
+++ b/web/src/js/ducks/ui/optionsEditor.js
@@ -0,0 +1,73 @@
+import { HIDE_MODAL } from "./modal"
+
+export const OPTION_UPDATE_START = 'UI_OPTION_UPDATE_START'
+export const OPTION_UPDATE_SUCCESS = 'UI_OPTION_UPDATE_SUCCESS'
+export const OPTION_UPDATE_ERROR = 'UI_OPTION_UPDATE_ERROR'
+
+const defaultState = {
+    /* optionName -> {isUpdating, value (client-side), error} */
+}
+
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+        case OPTION_UPDATE_START:
+            return {
+                ...state,
+                [action.option]: {
+                    isUpdate: true,
+                    value: action.value,
+                    error: false,
+                }
+            }
+
+        case OPTION_UPDATE_SUCCESS:
+            return {
+                ...state,
+                [action.option]: undefined
+            }
+
+        case OPTION_UPDATE_ERROR:
+            let val = state[action.option].value;
+            if (typeof(val) === "boolean") {
+                // If a boolean option errs, reset it to its previous state to be less confusing.
+                // Example: Start mitmweb, check "add_upstream_certs_to_client_chain".
+                val = !val;
+            }
+            return {
+                ...state,
+                [action.option]: {
+                    value: val,
+                    isUpdating: false,
+                    error: action.error
+                }
+            }
+
+        case HIDE_MODAL:
+            return {}
+
+        default:
+            return state
+    }
+}
+
+export function startUpdate(option, value) {
+    return {
+        type: OPTION_UPDATE_START,
+        option,
+        value,
+    }
+}
+export function updateSuccess(option) {
+    return {
+        type: OPTION_UPDATE_SUCCESS,
+        option,
+    }
+}
+
+export function updateError(option, error) {
+    return {
+        type: OPTION_UPDATE_ERROR,
+        option,
+        error,
+    }
+}