Add several UX improvements

config/default.json

@@ -4,9 +4,9 @@
     "sessionFileStorePath": "sessions",
     "sampleUploadPath": "samples",
     "maxSampleSize": 10737418240, // In bytes, 10GB by default
-    "sessionSecret": "cats",
+    "sessionSecret": "CHANGE_THIS",
     "logFile": "log/noisedash.log",
-    "tls": false,
+    "tls": false, // Keep this as false if using an external web server like nginx
     "tlsKey": "certs/key.pem",
     "tlsCert": "certs/cert.pem"
   }

server/routes/profiles.js

@@ -186,7 +186,7 @@ router.post('/profiles/default', (req, res) => {
       tremolo_frequency,
       tremolo_depth)
       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
-      'Default', req.user.id, 0, 30, -10, 'pink', 0, 'lowpass', 20000,
+      'Default', req.user.id, 0, 30, -10, 'pink', 0, 'lowpass', 1000,
       0, 0.5, 100, 5000, 0, 0.5, 0.5
     ],
     function (err) {

src/components/Admin.vue

@@ -16,12 +16,13 @@
         <v-btn
           v-bind="attrs"
           v-on="on"
-          @click="registerUserDialog = true"
+          @click="$refs.registerUserForm.reset()"
         >
           Register User
         </v-btn>
       </template>
       <v-form
+        ref="registerUserForm"
         v-model="isUserValid"
       >
         <v-card>

src/components/Noise.vue

@@ -78,12 +78,13 @@
               class="mx-3 my-3"
               :disabled="playDisabled"
               v-on="on"
-              @click="profileName = ''"
+              @click="$refs.profileForm.reset()"
             >
               Save Profile As...
             </v-btn>
           </template>
           <v-form
+            ref="profileForm"
             v-model="isProfileValid"
           >
             <v-card>
@@ -195,7 +196,7 @@
             max="0"
             min="-30"
             class="mx-3"
-            @change="updateVolume"
+            @input="updateVolume"
           />
           <div
             class="mx-3"
@@ -238,7 +239,7 @@
             max="20000"
             min="0"
             class="mx-3"
-            @change="updateFilterCutoff"
+            @input="updateFilterCutoff"
           />
           <div
             class="mx-3"
@@ -280,7 +281,7 @@
             min="0.01"
             step="0.01"
             class="mx-3"
-            @change="updateLFOFilterCutoffFrequency"
+            @input="updateLFOFilterCutoffFrequency"
           />
           <div
             class="mx-3"
@@ -298,7 +299,7 @@
             :min="lfoFilterCutoffMin"
             :max="lfoFilterCutoffMax"
             class="mx-3"
-            @change="updateLFOFilterCutoffRange"
+            @input="updateLFOFilterCutoffRange"
           />
           <div
             class="mx-3"
@@ -334,7 +335,7 @@
             ticks
             tick-size="4"
             class="mx-3"
-            @change="updateTremoloFrequency"
+            @input="updateTremoloFrequency"
           />
           <div
             class="mx-3"
@@ -355,7 +356,7 @@
             ticks
             tick-size="4"
             class="mx-3"
-            @change="updateTremoloDepth"
+            @input="updateTremoloDepth"
           />
           <div
             class="mx-3"
@@ -400,7 +401,7 @@
                 max="0"
                 min="-30"
                 class="mx-3"
-                @change="updateSampleVolume(sample.id, index)"
+                @input="updateSampleVolume(sample.id, index)"
               />
               <div
                 class="mx-3"
@@ -480,11 +481,13 @@
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
               v-on="on"
+              @click="$refs.uploadSampleForm.reset()"
             >
               Upload Sample
             </v-btn>
           </template>
           <v-form
+            ref="uploadSampleForm"
             v-model="isSampleUploadValid"
           >
             <v-card>

src/components/noise.js

@@ -23,13 +23,13 @@ export default {
     noiseColorItems: ['pink', 'white', 'brown'],
     volume: -10,
     isFilterEnabled: false,
-    filterCutoff: 20000,
+    filterCutoff: 1000,
     filterType: 'lowpass',
     filterTypeItems: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'],
     isLFOFilterCutoffEnabled: false,
     lfoFilterCutoffFrequency: 0.5,
     lfoFilterCutoffMin: 0,
-    lfoFilterCutoffMax: 20000,
+    lfoFilterCutoffMax: 5000,
     lfoFilterCutoffRange: [100, 5000],
     isTremoloEnabled: false,
     tremoloFrequency: 0.5,

src/router/index.js

@@ -70,7 +70,7 @@ router.beforeEach((to, from, next) => {
   } else if (to.name === 'Register') {
     instance.get('/setup')
       .then(response => {
-        if (!response.data.setup) {
+        if (response.status !== 200 || !response.data.setup) {
           next('/login')
         } else {
           next()