Update themes

api/test/FakeDataTest.kt

@@ -31,7 +31,7 @@ class FakeDataTest {
 
         val note = FullNoteCreateDTO(title, tags, chapters)
 
-        notesService.createNote(15, note)
+        notesService.createNote(1, note)
     }
 
-}
+}

api/test/NotesRetrievePerformanceTest.kt

@@ -16,9 +16,9 @@ import org.kodein.di.generic.singleton
 
 
 val hikariConfig = HikariConfig().apply {
-    jdbcUrl = "jdbc:mariadb://localhost:3306/Notes"
+    jdbcUrl = "jdbc:mariadb://localhost:3306/notes"
-    username = "test"
+    username = "notes"
-    password = "test"
+    password = "notes"
 }
 
 val dataSource = HikariDataSource(hikariConfig)

frontend/assets/main.css

@@ -11,7 +11,7 @@
 
 
 .page-enter-active, .page-leave-active {
-    transition: opacity .5s;
+    transition: opacity .2s;
 }
 .page-enter, .page-leave-to {
     opacity: 0;

frontend/components/Navbar.vue

@@ -1,7 +1,6 @@
 <template>
-    <v-app-bar fixed app color="primary" dark>
+    <v-app-bar fixed app color="primary">
         <v-btn to="/" text rounded>Simple Notes</v-btn>
-        <v-btn to="/" text rounded>{{ $colorMode.value }}</v-btn>
         <v-spacer />
         <client-only>
             <v-btn aria-label="theme switcher" icon @click="toggleTheme">
@@ -10,7 +9,7 @@
                 </v-icon>
             </v-btn>
         </client-only>
-        <v-menu bottom left>
+        <v-menu transition="scroll-y-transition" offset-y bottom left>
             <template v-slot:activator="{ on }">
                 <v-btn aria-label="menu" icon v-on="on">
                     <v-icon>{{ mdiDotsVertical }}</v-icon>
@@ -54,10 +53,12 @@ export default {
         },
         toggleTheme() {
             this.$vuetify.theme.dark = !this.$vuetify.theme.dark
-            localStorage.setItem(
+            const theme = this.$vuetify.theme.dark ? 'dark' : 'light'
-                'theme',
+            localStorage.setItem('theme', theme)
-                this.$vuetify.theme.dark ? 'dark' : 'light'
+            this.$cookies.set('theme', theme, {
-            )
+                path: '/',
+                maxAge: 60 * 60 * 24 * 7,
+            })
         },
     },
 }

frontend/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-app>
+    <v-app dark>
         <Navbar />
         <v-content>
             <v-container fill-height>

frontend/nuxt.config.js

@@ -56,7 +56,6 @@ export default {
         // Doc: https://github.com/nuxt-community/eslint-module
         '@nuxtjs/vuetify',
         '@nuxtjs/eslint-module',
-        '@nuxtjs/color-mode',
     ],
     /*
      ** Nuxt.js modules
@@ -67,6 +66,7 @@ export default {
         // Doc: https://github.com/nuxt-community/dotenv-module
         '@nuxtjs/dotenv',
         '@nuxtjs/auth',
+        'cookie-universal-nuxt',
     ],
     /*
      ** Axios module configuration
@@ -97,8 +97,15 @@ export default {
             home: '/',
         },
         watchLoggedIn: true,
-        cookie: false,
+        cookie: {
+            prefix: 'auth.',
+            options: {
+                path: '/',
+            },
+        },
         strategies: {
+            _scheme: 'local',
+            _name: 'local',
             local: {
                 endpoints: {
                     login: {
@@ -132,18 +139,22 @@ export default {
             dark: false,
             themes: {
                 dark: {
-                    primary: colors.blue.darken2,
+                    primary: '#21CFF3',
-                    accent: colors.grey.darken3,
+                    secondary: '#FF4081',
-                    secondary: colors.amber.darken3,
+                    accent: '#ffe18d',
-                    info: colors.teal.lighten1,
+                    success: '#4CAF50',
-                    warning: colors.amber.base,
+                    info: '#2196F3',
-                    error: colors.deepOrange.accent4,
+                    warning: '#FB8C00',
-                    success: colors.green.accent3,
+                    error: '#FF5252',
                 },
                 light: {
-                    primary: colors.blue.darken3,
+                    primary: '#1976D2',
-                    secondary: colors.teal.lighten1,
+                    secondary: '#e91e63',
-                    accent: colors.deepOrange.accent2,
+                    accent: '#30b1dc',
+                    success: '#4CAF50',
+                    info: '#2196F3',
+                    warning: '#FB8C00',
+                    error: '#FF5252',
                 },
             },
         },

frontend/package.json

@@ -16,6 +16,7 @@
     "@nuxtjs/auth": "^4.9.1",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/dotenv": "^1.4.0",
+    "cookie-universal-nuxt": "^2.1.4",
     "nuxt": "^2.0.0",
     "timeago.js": "^4.0.2"
   },

frontend/pages/account.vue

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

frontend/pages/notes.vue

@@ -7,6 +7,11 @@
             loading-text="Loading notes..."
             class="elevation-1"
             disable-sort
+            :footer-props="{
+                showFirstLastPage: false,
+                prevIcon: mdiChevronLeft,
+                nextIcon: mdiChevronRight,
+            }"
         >
             <template v-slot:top>
                 <v-toolbar flat color="secondary">
@@ -53,7 +58,7 @@
                     class="mr-2"
                     @click="editItem(item)"
                 >
-                    {{ mdiPencil }}}
+                    {{ mdiPencil }}
                 </v-icon>
                 <v-icon
                     aria-label="Delete Note"
@@ -66,7 +71,7 @@
                 </v-icon>
             </template>
             <template v-slot:no-data>
-                <v-btn color="primary" @click="initialize">Reset</v-btn>
+                <span>No notes yet</span>
             </template>
         </v-data-table>
     </v-col>
@@ -74,17 +79,27 @@
 
 <script>
 import { format } from 'timeago.js'
-import { mdiEye, mdiPencil, mdiDelete } from '@mdi/js'
+import {
+    mdiEye,
+    mdiPencil,
+    mdiDelete,
+    mdiChevronLeft,
+    mdiChevronRight,
+} from '@mdi/js'
 
 export default {
     name: 'Notes',
-    title: 'Notes',
+    async asyncData(context) {
+        const notes = await context.$axios.$get('/notes')
+        return { notes, loading: false }
+    },
     data: () => ({
         mdiEye,
         mdiPencil,
         mdiDelete,
+        mdiChevronLeft,
+        mdiChevronRight,
         loading: true,
-        notes: [],
         headers: [
             { text: 'Title', align: 'start', value: 'title' },
             { text: 'Last updated', value: 'updatedAt', align: 'end' },
@@ -92,18 +107,12 @@ export default {
             { text: 'Actions', value: 'actions' },
         ],
     }),
-    mounted() {
-        this.loadNotes()
-    },
     methods: {
         async loadNotes() {
-            await this.$axios
+            await this.$axios.$get('/notes').then((notes) => {
-                .get('/notes')
+                this.notes = notes
-                .then((e) => {
+                this.loading = false
-                    this.notes = e.data
+            })
-                    this.loading = false
-                })
-                .catch((_) => {})
         },
         editItem(item) {},
         async deleteItem(item) {
@@ -116,6 +125,9 @@ export default {
         },
         format,
     },
+    head: () => ({
+        title: 'My notes',
+    }),
 }
 </script>
 

frontend/yarn.lock

@@ -1153,6 +1153,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/json-schema@^7.0.3":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@@ -2470,6 +2475,22 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
+cookie-universal-nuxt@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.1.4.tgz#323f8645501f88cb2422127ad8ba2ee40187b716"
+  integrity sha512-xbn4Ozs9S0u2+0mQTZRwGlBL9MGNq8N4H6iGfprR5ufZFCS2hGef++3DBHSmHXZi30Wu3Q7RI/GkNMhz3cecmg==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie-universal "^2.1.4"
+
+cookie-universal@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.1.4.tgz#826a273da7eb9b08bfb0139bae12ea70770d564b"
+  integrity sha512-dwWXs7NGBzaBYDypu3jWH5M3NJW+zu5QdyJkFMHJvhLuyL4/eXG4105fwtTDwfIqyTunwVvQX4PHdtfPDS7URQ==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 cookie@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"