fix(settings): update state handling for settings to prevent default settings from overwriting user settings (#619)

Author: sereneblue

src/options/App.vue

@@ -182,6 +182,7 @@
               v-model.number="settings.config.reloadIPStartupDelay"
               type="number"
               min="0"
+              autocomplete="off"
               class="block form-input"
             />
           </div>

src/popup/App.vue

@@ -162,6 +162,7 @@
                 name="profile.interval.min"
                 type="number"
                 min="1"
+                autocomplete="off"
                 class="block w-full form-input text-mini"
               />
             </div>
@@ -175,6 +176,7 @@
                 name="profile.interval.max"
                 type="number"
                 min="1"
+                autocomplete="off"
                 class="block w-full form-input text-mini"
               />
             </div>
@@ -327,6 +329,7 @@
                 v-model="tmp.rangeFrom"
                 name="headers.spoofIP.rangeFrom"
                 class="block w-full form-input text-mini"
+                autocomplete="off"
                 :class="{ error: errors.rangeFrom }"
               />
             </div>
@@ -338,6 +341,7 @@
                 v-model="tmp.rangeTo"
                 name="headers.spoofIP.rangeTo"
                 class="block w-full form-input text-mini"
+                autocomplete="off"
                 :class="{ error: errors.rangeTo }"
               />
             </div>
@@ -491,6 +495,7 @@
                   @input="changeSetting($event)"
                   name="options.protectKBFingerprint.delay"
                   :value="settings.options.protectKBFingerprint.delay"
+                  autocomplete="off"
                   type="number"
                   min="1"
                   max="1000"
@@ -1005,6 +1010,12 @@ export default class App extends Vue {
       function(request: any): void {
         if (request.action === 'tempStore') {
           Vue.set(this.tmp, 'store', request.data);
+        } else if (request.action === 'updateIPRules') {
+          this['$store'].dispatch('syncSettings', { ipRules: request.data });
+        } else if (request.action === 'updateWhitelist') {
+          this['$store'].dispatch('syncSettings', { whitelist: request.data });
+        } else if (request.action === 'save') {
+          this['$store'].dispatch('syncSettings', request.data);
         }
       }.bind(this)
     );

src/store/actions.ts

@@ -110,6 +110,10 @@ export const initialize = async ({ commit }) => {
   commit(mtypes.INITIALIZE, settings);
 };
 
+export const syncSettings = ({ commit }, payload) => {
+  commit(mtypes.SYNC, payload);
+};
+
 export const toggleChameleon = ({ commit }, payload) => {
   commit(mtypes.TOGGLE_CHAMELEON, payload);
   webext.enableChameleon(payload);

src/store/mutation-types.ts

@@ -4,4 +4,5 @@ export const INITIALIZE: string = 'INITIALIZE';
 export const TOGGLE_CHAMELEON: string = 'TOGGLE_CHAMELEON';
 export const TOGGLE_NOTIFICATIONS: string = 'TOGGLE_NOTIFICATIONS';
 export const TOGGLE_THEME: string = 'TOGGLE_THEME';
+export const SYNC: string = 'SYNC';
 export const UPDATE_EXCLUSIONS: string = 'UPDATE_EXCLUSIONS';

src/store/mutations.ts

@@ -31,6 +31,9 @@ export default {
   [mtypes.TOGGLE_THEME](state, payload) {
     state.config.theme = state.config.theme == 'light' ? 'dark' : 'light';
   },
+  [mtypes.SYNC](state, payload) {
+    stateMerge(state, payload);
+  },
   [mtypes.UPDATE_EXCLUSIONS](state, payload) {
     state.excluded = payload;
   },