From a6913c11aaa8c2ae6c844327dcf4295869a37249 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Mon, 6 Jul 2020 16:09:00 +0200
Subject: [PATCH] Add /notes/new page

---
 frontend/pages/index.vue       | 21 +++++++---------
 frontend/pages/notes/index.vue |  5 ++++
 frontend/pages/notes/new.vue   | 44 ++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 frontend/pages/notes/new.vue

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 6534c4e..dab8902 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -7,14 +7,13 @@
                     :key="link.name"
                     class="text-blue-200"
                 >
-                    <nuxt-link
-                        v-if="link.url"
-                        :to="link.url"
-                        class="underline"
-                        >{{ link.name }}</nuxt-link
-                    >
-                    <button v-else class="underline" @click="link.action">
-                        {{ link.name }}
+                    <nuxt-link :to="link.url" class="underline">{{
+                        link.name
+                    }}</nuxt-link>
+                </li>
+                <li class="text-blue-200">
+                    <button class="underline" @click="logout">
+                        Sign Out
                     </button>
                 </li>
             </ul>
@@ -35,11 +34,11 @@ export default {
             { url: '/signin', name: 'Sign In' },
             { url: '/register', name: 'Register' },
             { url: '/notes', name: 'Notes' },
-            { action: 'logout', name: 'Sign Out' },
+            { url: '/404', name: '404' },
         ],
     }),
     options: {
-        auth: false, // FIXME: auth: 'guest'
+        auth: false,
     },
     methods: {
         async logout() {
@@ -49,5 +48,3 @@ export default {
     },
 }
 </script>
-
-<style scoped></style>
diff --git a/frontend/pages/notes/index.vue b/frontend/pages/notes/index.vue
index 7ddd58c..4b6f21a 100644
--- a/frontend/pages/notes/index.vue
+++ b/frontend/pages/notes/index.vue
@@ -1,6 +1,11 @@
 <template>
     <div class="container p-4 mx-auto bg-gray-800">
         <h1 class="text-center">My Notes</h1>
+        <nuxt-link
+            to="/notes/new"
+            class="bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+            >New note</nuxt-link
+        >
         <input
             id="search"
             name="search"
diff --git a/frontend/pages/notes/new.vue b/frontend/pages/notes/new.vue
new file mode 100644
index 0000000..3f81f95
--- /dev/null
+++ b/frontend/pages/notes/new.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="container mx-auto">
+        <form @submit.prevent="submit">
+            <textarea
+                v-model="content"
+                aria-label="markdown input"
+                name="content"
+                rows="30"
+                style="outline: none !important;"
+                class="w-full bg-gray-800 p-5"
+                spellcheck="false"
+            ></textarea>
+            <button
+                class="block bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+                type="submit"
+            >
+                Save
+            </button>
+        </form>
+    </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+    name: 'New',
+    data: () => ({
+        title: 'Test',
+        tags: [],
+        content: '',
+    }),
+    methods: {
+        ...mapActions('notes', ['create']),
+        submit() {
+            this.create({
+                title: this.title,
+                tags: this.tags,
+                content: this.content,
+            })
+        },
+    },
+}
+</script>