Made Changes Required For CSOC Vue Tasks

.eslintrc.js

@@ -19,6 +19,12 @@ module.exports = {
     'vue/singleline-html-element-content-newline': 0,
     'vue/html-self-closing': 0,
     'vue/html-closing-bracket-newline': 0,
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
   parserOptions: {
     parser: '@typescript-eslint/parser',

.npmrc

@@ -1 +1,3 @@
 shamefully-hoist=true
+auto-install-peers=true
+strict-peer-dependencies=false

components/addTask.vue

@@ -2,6 +2,7 @@
   <aside class="mx-auto flex justify-between mt-24 px-4">
     <label for="add task" class="flex-1">
       <input
+        v-model.trim="newTask"
         type="text"
         name="add task"
         class="
@@ -34,6 +35,7 @@
         border border-green-500
         hover:border-transparent
         rounded
+        addBorder
       "
       @click="addTask"
     >
@@ -46,7 +48,11 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
-  emits: ['newTask'],
+  // emits: ['newTask'],
+  data() {
+    return { newTask: '' }
+  },
+
   methods: {
     addTask() {
       /**
@@ -55,7 +61,38 @@ export default defineComponent({
        * @todo 2. Add the task in the dom.
        * @hint use emit to make a event that parent can observe
        */
+
+      if (this.newTask === '') {
+        this.$toast.error('Please fill the Add task Field....')
+        return
+      }
+
+      const data = {
+        title: this.newTask,
+      }
+      const headerForApiRequets = {
+        headers: { Authorization: 'Token ' + this.$store.getters.token },
+      }
+      this.$toast.info('Please wait...')
+
+      this.$axios
+        .$post('todo/create/', data, headerForApiRequets)
+        .then(() => {
+          this.$toast.success('Task added successfully...')
+          this.newTask = ''
+          this.$emit('newTask')
+          // this.$router.go()
+        })
+        .catch(() => {
+          this.$toast.error('Task not Added Succesfully')
+        })
     },
   },
 })
 </script>
+
+<style scoped>
+.addBorder {
+  border-color: #7bf1a8;
+}
+</style>

components/navbar.vue

@@ -30,6 +30,7 @@
               block
               whitespace-no-wrap
               hover:bg-gray-400
+              logout
             "
             href="#"
             @click="logout"
@@ -55,7 +56,14 @@ export default defineComponent({
     logout() {
       this.$store.commit('setToken', null)
       this.$router.replace('/login')
+      this.$toast.success('Logged out successfully!')
     },
   },
 })
 </script>
+<style scoped>
+.logout {
+  background-color: white;
+  border-radius: 10%;
+}
+</style>

middleware/auth.ts

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

package.json

@@ -49,4 +49,4 @@
     "node": ">=12",
     "pnpm": ">=3"
   }
-}
+}