Completed all tasks

.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+auto-install-peers=true

components/addTask.vue

@@ -4,6 +4,7 @@
       <input
         type="text"
         name="add task"
+        v-model.trim="newTodo"
         class="
           todo-add-task-input
           px-4
@@ -15,10 +16,11 @@
           text-sm
           border border-blueGray-300
           outline-none
-          focus:outline-none focus:ring
+          focus:outline-none
+          focus:ring
           w-full
         "
-        placeholder="Enter Task"
+        placeholder="Enter your task here"
       />
     </label>
     <button
@@ -46,15 +48,42 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
-  emits: ['newTask'],
+  data() {
+    return {
+      newTodo: '',
+    }
+  },
   methods: {
-    addTask() {
-      /**
-       * @todo Complete this function.
-       * @todo 1. Send the request to add the task to the backend server.
-       * @todo 2. Add the task in the dom.
-       * @hint use emit to make a event that parent can observe
-       */
+    async addTask() {
+      let newTodo = this.newTodo
+      if (newTodo == '') {
+        this.$toast.error('New Todo cannot be empty.')
+        return
+      }
+
+      this.$toast.info('Adding Todo...')
+      this.newTodo = ''
+
+      const headerForAuthorization = {
+        Authorization: 'Token ' + this.$store.getters.token,
+      }
+      const dataForAPIRequest = {
+        title: newTodo,
+      }
+
+      this.$axios({
+        headers: headerForAuthorization,
+        url: 'todo/create/',
+        method: 'post',
+        data: dataForAPIRequest,
+      })
+        .then(() => {
+          this.$toast.success('Todo added successfully!')
+          this.$emit('newTask')
+        })
+        .catch(() =>
+          this.$toast.error('Addition failed. Please try again later.')
+        )
     },
   },
 })

components/navbar.vue

@@ -55,6 +55,7 @@ export default defineComponent({
     logout() {
       this.$store.commit('setToken', null)
       this.$router.replace('/login')
+      this.$toast.info('Logged out successfully!')
     },
   },
 })

components/searchBar.vue

@@ -0,0 +1,64 @@
+<template>
+  <aside class="mx-auto flex justify-between mt-2 px-4">
+    <label for="search task" class="flex-1">
+      <input
+        type="text"
+        name="search task"
+        v-model.trim="searchTodo"
+        @change="updateFilter"
+        class="
+          todo-search-task-input
+          px-4
+          py-2
+          placeholder-yellowGray-300
+          text-yellowGray-600
+          bg-white
+          rounded
+          text-sm
+          border border-yellowGray-300
+          outline-none
+          focus:outline-none focus:ring
+          w-full
+          pr-3
+          mr-3
+        "
+        placeholder="Filter tasks"
+      />
+    </label>
+    <button
+      type="button"
+      class="
+        px-4
+        py-2
+        bg-transparent
+        hover:bg-blue-500
+        text-blue-700 text-sm
+        hover:text-white
+        border border-blue-500
+        hover:border-transparent
+        rounded
+      "
+      @click="searchTodo = ''"
+    >
+      Clear Filter
+    </button>
+  </aside>
+</template>
+>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  data() {
+    return {
+      searchTodo: '',
+    }
+  },
+  methods : {
+    async updateFilter(){
+      this.$emit('updateFilter', this.searchTodo)
+    }
+  }
+})
+</script>

components/sortBar.vue

@@ -0,0 +1,59 @@
+<template>
+  <aside class="mx-auto flex justify-between mt-2 px-4">
+    <button
+      type="button"
+      class="
+        w-1/2
+        px-4
+        py-2
+        bg-transparent
+        hover:bg-yellow-500
+        text-yellow-600 text-sm
+        hover:text-white
+        border border-yellow-500
+        hover:border-transparent
+        rounded
+      "
+      @click="sortAsc"
+    >
+      Sort (A-Z)
+    </button>
+    <button
+      type="button"
+      class="
+        w-1/2
+        px-4
+        py-2
+        bg-transparent
+        hover:bg-yellow-500
+        text-yellow-600 text-sm
+        hover:text-white
+        border border-yellow-500
+        hover:border-transparent
+        rounded
+      "
+      @click="sortDesc"
+    >
+      Sort (Z-A)
+    </button>
+  </aside>
+</template>
+>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  data() {
+    return {}
+  },
+  methods: {
+    async sortAsc() {
+      this.$emit('sortAsc')
+    },
+    async sortDesc() {
+      this.$emit('sortDesc')
+    },
+  },
+})
+</script>

middleware/auth.ts

@@ -6,4 +6,11 @@ export default defineNuxtMiddleware((context) => {
    * @todo Redirect the user to main page if token is present in store
    * @hints check what propeties context has
    */
+
+  let path = context.route.fullPath;
+  let token = context.store.getters.token;
+
+  if (token === null && path === '/') context.redirect('login/');
+  else if (token != null && path != '/') context.redirect('/');  
+
 })