Add note creation in frontend

web/src/components/NoteCreationForm.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <b-card class="mt-3" header="Create a note">
+            <b-form @submit.prevent="createNote">
+
+                <b-form-group id="title-group" label="Title:" label-for="title">
+                    <b-form-input
+                            id="title"
+                            size="lg"
+                            v-model="form.title"
+                            required
+                            placeholder="Enter a title"
+                            add-on-change
+                    ></b-form-input>
+                </b-form-group>
+
+                <b-form-group id="tags-group" label="Tags:" label-for="tags">
+                    <b-form-tags
+                            input-id="tags"
+                            v-model="form.tags"
+                            tag-variant="primary"
+                            separator=" ,;"
+                            remove-on-delete
+                            class="mb-2"
+                    ></b-form-tags>
+                </b-form-group>
+
+                <b-form-group id="content-group" label="Note:" label-for="content">
+                    <b-form-textarea
+                            id="content"
+                            v-model="form.content"
+                            placeholder="Enter something..."
+                            rows="3"
+                            max-rows="50"
+                            required
+                    ></b-form-textarea>
+                </b-form-group>
+
+                <b-button type="submit" variant="primary">Submit</b-button>
+            </b-form>
+
+            <b-alert :show="error" variant="danger" dismissible class="mt-3">
+                An error occurred while creating note
+            </b-alert>
+
+        </b-card>
+    </div>
+</template>
+
+<script>
+    import Api from '@/api'
+
+    export default {
+        name: "NoteCreationForm",
+        data() {
+            return {
+                form: {
+                    title: '',
+                    content: '',
+                    tags: []
+                },
+                error: false,
+            }
+        },
+        methods: {
+            createNote() {
+                this.error = false
+
+                Api.post('/notes', {
+                    title: this.form.title,
+                    content: this.form.content,
+                    tags: this.form.tags
+                })
+                    .then(response => {
+                        console.log(response)
+                    })
+                    .catch(error => {
+                        console.log(error)
+                        this.error = true
+                    })
+            }
+        }
+    }
+</script>

web/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+
 import Home from '../views/Home.vue'
 import Signup from '../views/Signup.vue'
 import Signin from '../views/Signin.vue'

web/src/views/NoteCreation.vue

@@ -2,18 +2,20 @@
     <div id="app">
         <Navbar/>
         <b-container class="mt-5">
-            <SigninForm/>
+            <NoteCreationForm/>
         </b-container>
     </div>
 </template>
 
 <script>
     import Navbar from "@/components/Navbar";
+    import NoteCreationForm from "@/components/NoteCreationForm";
 
     export default {
         name: 'Home',
         components: {
-            Navbar
+            Navbar,
+            NoteCreationForm
         }
     }
 </script>