COPS-CSOC-2022 · BabyElias · Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022
diff --git a/components/addTask.vue b/components/addTask.vue
@@ -3,6 +3,7 @@
     <label for="add task" class="flex-1">
       <input
         type="text"
+        v-model.trim="newTask"
         name="add task"
         class="
           todo-add-task-input
@@ -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
@@ -47,14 +49,35 @@ import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   emits: ['newTask'],
+  data() {
+  return {
+    newTask: '',
+  }
+},
   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
-       */
+    if (this.newTask === '') {
+     this.$toast.error('Task cannot be empty')
+   } else {
+     this.$axios({
+       headers: {
+         Authorization: 'Token ' + this.$store.getters.token,
+       },
+       url: 'todo/create/',
+       method: 'post',
+       data: {
+         title: this.newTask,
+       },
+     })
+       .then(() => {
+         this.$emit('newTask')
+         this.$toast.success('Task added successfully')
+         this.newTask = ''
+       })
+       .catch(() => {
+         this.$toast.error('Error Occured.Please try again later.')
+       })
+   }
     },
   },
 })

diff --git a/components/navbar.vue b/components/navbar.vue
@@ -1,21 +1,39 @@
 <template>
-  <nav class="bg-blue-600">
+  <nav class="bg-yellow-600">
     <ul class="flex p-5 items-center justify-between">
       <transition>
         <ul v-if="auth" class="flex space-x-4 items-center justify-between">
           <li>
             <h1 class="font-bold text-white text-xl">Todo</h1>
           </li>
-          <li class="font-semibold text-white">
-            <nuxt-link to="/">Tasks</nuxt-link>
+          <li class=" text-black">
+            <nuxt-link to="/"><h1 class="rounded-b
+            bg-white
+            py-2
+            px-4
+            block
+            whitespace-no-wrap
+            hover:bg-gray-400">Tasks</h1></nuxt-link>
           </li>
         </ul>
         <ul v-else class="flex">
-          <li class="text-white mr-2">
-            <nuxt-link to="/login">Login</nuxt-link>
+          <li class="text-black mr-10">
+            <nuxt-link to="/login"><h1 class="rounded-b
+            bg-white
+            py-2
+            px-4
+            block
+            whitespace-no-wrap
+            hover:bg-gray-400">Login</h1></nuxt-link>
           </li>
-          <li class="text-white">
-            <nuxt-link to="/register">Register</nuxt-link>
+          <li class="text-black">
+            <nuxt-link to="/register"><h1 class="rounded-b
+            bg-white
+            py-2
+            px-4
+            block
+            whitespace-no-wrap
+            hover:bg-gray-400">Register</h1></nuxt-link>
           </li>
         </ul>
       </transition>
@@ -24,7 +42,7 @@
           <a
             class="
               rounded-b
-              bg-gray-200
+              bg-white
               py-2
               px-4
               block
@@ -55,6 +73,7 @@ export default defineComponent({
     logout() {
       this.$store.commit('setToken', null)
       this.$router.replace('/login')
+      this.$toast.info('Logged out successfully!')
     },
   },
 })

diff --git a/dist/200.html b/dist/200.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>csoc-week3-vue</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="csoc-week3-vue"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="csoc-week3-vue"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="csoc-week3-vue"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/_nuxt/icons/icon_64x64.5f6a36.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/_nuxt/icons/icon_512x512.5f6a36.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/_nuxt/manifest.aba6979e.json" data-hid="manifest"><link rel="modulepreload" href="/_nuxt/d6219d2.modern.js" as="script"><link rel="modulepreload" href="/_nuxt/90c9b97.modern.js" as="script"><link rel="preload" href="/_nuxt/css/4d6b80d.css" as="style"><link rel="modulepreload" href="/_nuxt/04f8120.modern.js" as="script"><link rel="modulepreload" href="/_nuxt/5c59adf.modern.js" as="script">
+  <link href="/_nuxt/css/4d6b80d.css" rel="stylesheet"></head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}}}</script>
+  <script src="/_nuxt/d6219d2.modern.js" type="module"></script><script src="/_nuxt/90c9b97.modern.js" type="module"></script><script src="/_nuxt/04f8120.modern.js" type="module"></script><script src="/_nuxt/5c59adf.modern.js" type="module"></script><script src="/_nuxt/e8ae126.js" nomodule></script><script src="/_nuxt/f753f3c.js" nomodule></script><script src="/_nuxt/c4393b5.js" nomodule></script><script src="/_nuxt/0dabfc7.js" nomodule></script><script>!function(){var t,e=document,n=e.createElement("script");!("noModule"in n)&&"onbeforeload"in n&&(t=!1,e.addEventListener("beforeload",function(e){if(e.target===n)t=!0;else if(!e.target.hasAttribute("nomodule")||!t)return;e.preventDefault()},!0),n.type="module",n.src=".",e.head.appendChild(n),n.remove())}()</script></body>
+</html>
diff --git a/dist/README.md b/dist/README.md
@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
diff --git a/dist/_nuxt/04f8120.modern.js b/dist/_nuxt/04f8120.modern.js
diff --git a/dist/_nuxt/0dabfc7.js b/dist/_nuxt/0dabfc7.js
diff --git a/dist/_nuxt/5c59adf.modern.js b/dist/_nuxt/5c59adf.modern.js
diff --git a/dist/_nuxt/90c9b97.modern.js b/dist/_nuxt/90c9b97.modern.js
diff --git a/dist/_nuxt/LICENSES b/dist/_nuxt/LICENSES
@@ -0,0 +1,45 @@
+/*!
+ * vue-client-only v0.0.0-semantic-release
+ * (c) 2021-present egoist <[email protected]>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <[email protected]>
+ * Released under the MIT License.
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+
+/*!
+  * vue-router v3.5.1
+  * (c) 2021 Evan You
+  * @license MIT
+  */
+
+/*!
+ * Vue.js v2.6.14
+ * (c) 2014-2021 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * vuex v3.6.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
diff --git a/dist/_nuxt/ba1b993.modern.js b/dist/_nuxt/ba1b993.modern.js
diff --git a/dist/_nuxt/c4393b5.js b/dist/_nuxt/c4393b5.js