Fix some bugs

frontend/.eslintrc.js

@@ -18,6 +18,5 @@ module.exports = {
         'prettier'
     ],
     // add your custom rules here
-  rules: {
+    rules: {}
-  }
 }

frontend/Caddyfile

@@ -0,0 +1,20 @@
+:8080
+root dist
+file_server {
+    # If we visit /404.html directly we receive a 404 response, and not a 200.
+    hide 404.html
+}
+encode gzip
+
+handle_errors {
+    @404 {
+        expression {http.error.status_code} == 404
+    }
+    rewrite @404 /404.html
+    file_server
+}
+
+log {
+    format single_field common_log
+}
+

frontend/assets/variables.scss

@@ -1,4 +0,0 @@
-// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
-//
-// The variables you want to modify
-// $font-size-root: 20px;

frontend/components/LoginForm.vue

@@ -52,13 +52,9 @@ export default {
     }),
     methods: {
         userLogin() {
-            try {
             this.$auth.loginWith('local', {
                 data: this.form,
             })
-            } catch (err) {
-                console.log(err)
-            }
         },
     },
 }

frontend/components/Navbar.vue

@@ -2,6 +2,13 @@
     <v-app-bar fixed app color="primary" dark>
         <v-btn to="/" text rounded>Simple Notes</v-btn>
         <v-spacer />
+        <client-only>
+            <v-btn aria-label="theme switcher" icon @click="toggleTheme">
+                <v-icon
+                    >{{ $vuetify.theme.dark ? mdiBrightness2 : mdiBrightness5 }}
+                </v-icon>
+            </v-btn>
+        </client-only>
         <v-menu bottom left>
             <template v-slot:activator="{ on }">
                 <v-btn aria-label="menu" icon v-on="on">
@@ -10,6 +17,7 @@
             </template>
 
             <v-list>
+                <client-only>
                     <v-list-item v-if="isAuthenticated" to="/notes">
                         My notes
                     </v-list-item>
@@ -19,27 +27,37 @@
                     <v-list-item v-else>
                         <v-btn to="/account" text rounded>Account</v-btn>
                     </v-list-item>
+                </client-only>
             </v-list>
         </v-menu>
     </v-app-bar>
 </template>
 
 <script>
-import { mdiDotsVertical } from '@mdi/js'
+import { mdiDotsVertical, mdiBrightness5, mdiBrightness2 } from '@mdi/js'
 import { mapGetters } from 'vuex'
 
 export default {
     name: 'Navbar',
+    data: () => ({
+        mdiDotsVertical,
+        mdiBrightness5,
+        mdiBrightness2,
+    }),
     computed: {
         ...mapGetters(['isAuthenticated', 'loggedInUser']),
     },
-    data: () => ({
-        mdiDotsVertical,
-    }),
     methods: {
         async logout() {
             await this.$auth.logout()
         },
+        toggleTheme() {
+            this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+            localStorage.setItem(
+                'theme',
+                this.$vuetify.theme.dark ? 'dark' : 'light'
+            )
+        },
     },
 }
 </script>

frontend/nuxt.config.js

@@ -1,4 +1,5 @@
 import colors from 'vuetify/es5/util/colors'
+const env = require('dotenv').config().parsed
 
 export default {
     mode: 'universal',
@@ -6,8 +7,8 @@ export default {
      ** Headers of the page
      */
     head: {
-        titleTemplate: '%s - ' + process.env.npm_package_name,
+        titleTemplate: '%s - ' + 'SimpleNotes',
-        title: process.env.npm_package_name || '',
+        title: 'SimpleNotes' || '',
         htmlAttrs: {
             lang: 'en',
         },
@@ -45,7 +46,7 @@ export default {
     /*
      ** Plugins to load before mounting the App
      */
-    plugins: ['~/plugins/axios'],
+    plugins: ['~/plugins/theme.client.js'],
     /*
      ** Nuxt.js dev-modules
      */
@@ -68,7 +69,23 @@ export default {
      ** Axios module configuration
      ** See https://axios.nuxtjs.org/options
      */
-    axios: {},
+    axios: {
+        headers: {
+            common: {
+                Accept: 'application/json',
+            },
+            delete: {},
+            get: {},
+            head: {},
+            post: {},
+            put: {},
+            patch: {},
+        },
+    },
+
+    env: {
+        API_HOST: env.API_HOST,
+    },
 
     auth: {
         redirect: {
@@ -107,7 +124,6 @@ export default {
      ** https://github.com/nuxt-community/vuetify-module
      */
     vuetify: {
-        customVariables: ['~/assets/variables.scss'],
         defaultAssets: false,
         theme: {
             dark: false,

frontend/package.json

@@ -9,6 +9,7 @@
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
+    "serve": "caddy run",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
@@ -24,6 +25,7 @@
     "@nuxtjs/eslint-module": "^1.1.0",
     "@nuxtjs/vuetify": "^1.0.0",
     "babel-eslint": "^10.1.0",
+    "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-nuxt": "^0.5.2",

frontend/pages/account.vue

@@ -1,14 +1,19 @@
 <template>
     <v-col cols="12" sm="8" md="6">
-        <v-card color="primary" dark>
+        <v-card color="primary" class="white--text">
             <v-btn icon to="/" aria-label="Go back">
-                <v-icon>{{ mdiArrowLeft }}</v-icon>
+                <v-icon color="white">{{ mdiArrowLeft }}</v-icon>
             </v-btn>
             <v-card-title class="text-center justify-center py-6">
-                <h1 class="font-weight-bold display-2">Account</h1>
+                <h1
+                    :class="{ 'white--text': !$vuetify.theme.dark }"
+                    class="font-weight-bold display-2"
+                >
+                    Account
+                </h1>
             </v-card-title>
 
-            <v-tabs v-model="tab" background-color="transparent" dark grow>
+            <v-tabs v-model="tab" grow>
                 <v-tab v-for="tab in tabs" :key="tab">
                     {{ tab }}
                 </v-tab>

frontend/plugins/axios.js

@@ -1,7 +0,0 @@
-export default function ({ $axios }) {
-    $axios.onRequest((config) => {
-        console.log('Making request to ' + config.url)
-    })
-
-    $axios.setBaseURL(process.env.API_URL)
-}

frontend/plugins/theme.client.js

@@ -0,0 +1,4 @@
+export default function ({ $vuetify }) {
+    const theme = localStorage.getItem('theme') ?? 'light'
+    $vuetify.theme.dark = theme === 'dark'
+}

frontend/yarn.lock

@@ -3009,7 +3009,7 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^8.1.0:
+dotenv@^8.1.0, dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==