Add accent color picker

server/boot/db.js

@@ -59,7 +59,7 @@ module.exports = function () {
       } else {
         const userVersion = row.user_version
 
-        if (userVersion === 0) {
+        if (userVersion < 1) {
           db.run('ALTER TABLE samples ADD COLUMN fade_in REAL DEFAULT 0')
           db.run('ALTER TABLE samples ADD COLUMN loop_points_enabled INTEGER DEFAULT 0')
           db.run('ALTER TABLE samples ADD COLUMN loop_start REAL DEFAULT 0')
@@ -67,6 +67,12 @@ module.exports = function () {
 
           db.run('PRAGMA user_version = 1')
         }
+
+        if (userVersion < 2) {
+          db.run('ALTER TABLE users ADD COLUMN preferences TEXT DEFAULT "{}"')
+
+          db.run('PRAGMA user_version = 2')
+        }
       }
     })
   })

server/routes/users.js

@@ -9,7 +9,11 @@ router.get('/users/current', (req, res) => {
     return res.sendStatus(401)
   }
 
-  db.get('SELECT is_admin as isAdmin, dark_mode as darkMode, can_upload as canUpload, * FROM users WHERE id = ?', [req.user.id], (err, row) => {
+  db.get(`SELECT
+    is_admin as isAdmin,
+    dark_mode as darkMode,
+    can_upload as canUpload,
+    * FROM users WHERE id = ?`, [req.user.id], (err, row) => {
     if (err) {
       logger.error(err)
       return res.sendStatus(500)
@@ -24,6 +28,7 @@ router.get('/users/current', (req, res) => {
       user.isAdmin = row.isAdmin === 1
       user.darkMode = row.darkMode === 1
       user.canUpload = row.canUpload === 1
+      user.preferences = JSON.parse(row.preferences)
     }
 
     res.json({ user: user })
@@ -287,4 +292,23 @@ router.delete('/users/:userId', (req, res) => {
   })
 })
 
+router.patch('/users/preferences', (req, res) => {
+  if (!req.user) {
+    return res.sendStatus(401)
+  }
+
+  const preferences = JSON.stringify(req.body.preferences)
+
+  db.serialize(() => {
+    db.run('UPDATE users SET preferences = ? WHERE id = ?', [preferences, req.user.id], (err) => {
+      if (err) {
+        logger.error(err)
+        return res.sendStatus(500)
+      } else {
+        return res.sendStatus(200)
+      }
+    })
+  })
+})
+
 module.exports = router

src/components/AccountPage.vue

@@ -8,6 +8,10 @@
       </v-col>
     </v-row>
 
+    <h2 class="headline font-weight-bold mb-3">
+      User Management
+    </h2>
+
     <v-col cols="12">
       <v-row>
         ID: {{ currentUser.id }}
@@ -26,7 +30,7 @@
     >
       <template #activator="{ on, attrs }">
         <v-btn
-          class="my-3"
+          class="mt-5 mb-10"
           v-bind="attrs"
           v-on="on"
           @click="resetChangePasswordForm"
@@ -77,12 +81,35 @@
       </v-form>
     </v-dialog>
 
+    <h2 class="headline font-weight-bold mb-3">
+      Preferences
+    </h2>
+
+    <h3 class="font-weight-bold">
+      Dark Mode
+    </h3>
+
     <v-switch
       v-model="$vuetify.theme.dark"
-      label="Dark Mode"
+      :label="`${$vuetify.theme.dark ? 'On' : 'Off'}`"
       @change="toggleDarkMode"
     />
 
+    <h3 class="mb-5 font-weight-bold">
+      Accent Color
+    </h3>
+
+    <v-color-picker
+      v-model="accentColor"
+    />
+
+    <v-btn
+      class="mt-5"
+      @click="updateAccentColor"
+    >
+      Apply
+    </v-btn>
+
     <v-snackbar
       v-model="snackbar"
       timeout="3000"

src/components/AppBar.vue

@@ -7,7 +7,7 @@
       dense
     >
       <v-app-bar-nav-icon
-        @click="getCurrentUser"
+        @click="checkForAdmin"
       />
     </v-app-bar>
     <v-navigation-drawer

src/components/account.js

@@ -6,6 +6,7 @@ export default {
     changePasswordDialog: false,
     isPasswordValid: false,
     password: '',
+    accentColor: '#607d8b',
     snackbar: false,
     snackbarText: '',
     rules: {
@@ -21,6 +22,7 @@ export default {
         .then(response => {
           if (response.status === 200) {
             this.currentUser = response.data.user
+            this.accentColor = this.currentUser.preferences.accentColor
           }
         })
     },
@@ -45,6 +47,14 @@ export default {
       this.$http.patch('/users/dark-mode', {
         darkMode: this.$vuetify.theme.dark
       })
+    },
+    updateAccentColor () {
+      const preferences = { accentColor: this.accentColor }
+      this.$http.patch('/users/preferences', {
+        preferences: preferences
+      })
+      this.$vuetify.theme.themes.dark.primary = this.accentColor
+      this.$vuetify.theme.themes.light.primary = this.accentColor
     }
   }
 }

src/components/appbar.js

@@ -6,6 +6,9 @@ export default {
     isAdmin: false,
     loggedIn: false
   }),
+  created () {
+    this.getUserPreferences()
+  },
   methods: {
     home () {
       this.$router.push('/')
@@ -24,7 +27,7 @@ export default {
           }
         })
     },
-    getCurrentUser () {
+    checkForAdmin () {
       this.loggedIn = false
       this.drawyer = true
       this.$http.get('/users/current')
@@ -32,12 +35,21 @@ export default {
           if (response.status === 200) {
             this.loggedIn = true
             this.isAdmin = response.data.user.isAdmin
-            this.$vuetify.theme.dark = response.data.user.darkMode
           }
         })
         .catch(() => {
           this.isAdmin = false
         })
+    },
+    getUserPreferences () {
+      this.$http.get('/users/current')
+        .then(response => {
+          if (response.status === 200) {
+            const preferences = response.data.user.preferences
+            this.$vuetify.theme.themes.dark.primary = preferences.accentColor
+            this.$vuetify.theme.themes.light.primary = preferences.accentColor
+          }
+        })
     }
   }
 }

src/components/noise.js

@@ -489,6 +489,9 @@ export default {
           if (response.status === 200) {
             this.canUpload = response.data.user.canUpload
             this.$vuetify.theme.dark = response.data.user.darkMode
+            const preferences = response.data.user.preferences
+            this.$vuetify.theme.themes.dark.primary = preferences.accentColor
+            this.$vuetify.theme.themes.light.primary = preferences.accentColor
           }
         })
     },

src/plugins/vuetify.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify/lib/framework'
+import Vuetify from 'vuetify/lib'
 
 import colors from 'vuetify/lib/util/colors'