UI tweaks, finish proxy settings input

assets/css/styles.scss

@@ -84,6 +84,11 @@ button {
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
+
+  &[disabled], &.disabled {
+    opacity: 0.7;
+    cursor: default;
+  }
 }
 
 fieldset {
@@ -220,7 +225,7 @@ input[type="checkbox"] {
   background-color: var(--err-color);
 }
 
-.disabled {
+.disabled, input[disabled] {
   background-color: var(--err-color);
   color: #b2b2b2;
 }

pages/index.vue

@@ -190,7 +190,7 @@
     <pw-section class="gray" label="History">
       <ul>
         <li>
-          <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
+          <button :class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
         </li>
       </ul>
       <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">

pages/settings.vue

@@ -31,29 +31,26 @@
       </ul>
     </pw-section>
 
-      <!--<pw-section class="blue" label="Proxy">
-          <ul>
-              <li>
-                  <p>
-                      <input :checked="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"
-                             id="enableProxy"
-                             type="checkbox">
-                      <label for="enableProxy">Enable proxy</label>
-                  </p>
-              </li>
-          </ul>
+    <pw-section class="blue" label="Proxy">
+      <ul>
+        <li>
+          <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+            Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
+          </pw-toggle>
+        </li>
+      </ul>
 
-          <ul>
-              <li>
-                  <label for="url">URL</label>
-                  <input id="url" type="url" v-model="url">
-              </li>
-              <li>
-                  <label for="key">Key</label>
-                  <input id="key" type="password" v-model="url">
-              </li>
-          </ul>
-      </pw-section>-->
+      <ul>
+        <li>
+          <label for="url">URL</label>
+          <input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
+        </li>
+        <li>
+          <label for="key">Key</label>
+          <input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
+        </li>
+      </ul>
+    </pw-section>
   </div>
 </template>
 <script>
@@ -62,6 +59,12 @@
   import toggle from "../components/toggle";
 
   export default {
+    components: {
+        'pw-section': section,
+        'pw-toggle': toggle,
+        'swatch': swatch
+    },
+
     data() {
       return {
         // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
@@ -113,21 +116,30 @@
             "vibrant": false
           },
         ],
+
         settings: {
           THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
           THEME_COLOR: '',
           THEME_COLOR_VIBRANT: true,
 
+          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
           PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
-          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
+          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
+          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
         }
       }
     },
-    components: {
-      'pw-section': section,
-      'pw-toggle': toggle,
-      'swatch': swatch
+
+    watch: {
+        proxySettings: {
+            deep: true,
+            handler (value) {
+              this.applySetting('PROXY_URL', value.url);
+              this.applySetting('PROXY_KEY', value.key);
+            }
+        }
     },
+
     methods: {
       applyTheme(name) {
         this.applySetting('THEME_CLASS', name);
@@ -164,6 +176,15 @@
     },
     beforeMount() {
       this.settings.THEME_COLOR = this.getActiveColor();
+    },
+
+    computed: {
+      proxySettings () {
+          return {
+              url: this.settings.PROXY_URL,
+              key: this.settings.PROXY_KEY
+          }
+      }
     }
   }
 

pages/websocket.vue

@@ -4,11 +4,11 @@
       <ul>
         <li>
           <label for="url">URL</label>
-          <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
+          <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
         </li>
         <li>
           <label for="action" class="hide-on-small-screen">&nbsp;</label>
-          <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
+          <button :disabled="!urlValid" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
         </li>
       </ul>
     </pw-section>
@@ -27,11 +27,11 @@
       <ul>
         <li>
           <label for="message">Message</label>
-          <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
+          <input id="message" name="message" type="text" v-model="communication.input" :disabled="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
         </li>
         <li>
           <label for="send" class="hide-on-small-screen">&nbsp;</label>
-          <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
+          <button name="send" :disabled="!connectionState" @click="sendMessage">Send</button>
         </li>
       </ul>
     </pw-section>

store/postwoman.js

@@ -31,9 +31,14 @@ export const SETTINGS_KEYS = [
      */
     "PROXY_ENABLED",
 
-
+    /**
+     * The URL of the proxy to connect to for requests.
+     */
     "PROXY_URL",
-    "PROXY_AUTH"
+    /**
+     * The security key of the proxy.
+     */
+    "PROXY_KEY"
 ];
 
 export const state = () => ({
@@ -52,9 +57,9 @@ export const mutations = {
         // Add your settings key to the SETTINGS_KEYS array at the
         // top of the file.
         // This is to ensure that application settings remain documented.
-        if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings key does not include the key " + key);
+        if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
 
         state.settings[key] = value;
     }
 
-};
+};