Merge pull request #9 from Omarabdul3ziz/3bot

Adding OAuth with 3bot connect

.gitignore

@@ -3,4 +3,5 @@
 .vscode/
 node_modules/
 .env
-*.env
+*.env
+repo_*

services/client/src/App.vue

@@ -29,6 +29,11 @@
                 >GitHub</router-link
               >
             </li>
+            <li v-if="!loggedIn">
+              <router-link class="navbar-link" id="right" to="/tribot"
+                >3Bot</router-link
+              >
+            </li>
             <li v-if="loggedIn">
               <router-link class="navbar-link" id="right" to="/logout"
                 >Logout</router-link

services/client/src/main.js

@@ -36,3 +36,13 @@ new Vue({
   store,
   render: (h) => h(App),
 }).$mount("#app");
+
+// Does it help?
+const allowCrossDomain = function (req, res, next) {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Methods", "*");
+  res.header("Access-Control-Allow-Headers", "*");
+  next();
+};
+
+Vue.use(allowCrossDomain);

services/client/src/router/index.js

@@ -6,6 +6,7 @@ import Todo from "@/views/Todo.vue";
 import Login from "@/views/Login.vue";
 import Register from "@/views/Register.vue";
 import Github from "@/views/Github.vue";
+import Tribot from "@/views/Tribot.vue";
 import Logout from "@/views/Logout.vue";
 
 Vue.use(VueRouter);
@@ -21,9 +22,9 @@ const routes = [
     path: "/todo",
     name: "Todo",
     component: Todo,
-    // meta: {
-    //   requiresAuth: true,
-    // },
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: "/login",
@@ -49,6 +50,14 @@ const routes = [
       requiresVisitor: true,
     },
   },
+  {
+    path: "/tribot",
+    name: "Tribot",
+    component: Tribot,
+    meta: {
+      requiresVisitor: true,
+    },
+  },
   {
     path: "/logout",
     name: "Logout",

services/client/src/store/index.js

@@ -8,7 +8,7 @@ export default new Vuex.Store({
   state: {
     token: localStorage.getItem("access_token") || null,
     // access_token_cookie: Vue.$cookies.get("access_token_cookie") || null,
-    api_url: "http://localhost:8080",
+    api_url: "http://127.0.0.1:8080",
   },
   mutations: {
     updateToken(state, token) {

services/client/src/views/Home.vue

@@ -7,7 +7,21 @@
 </template>
 
 <script>
+import Vue from "vue";
+import VueCookie from "vue-cookie";
+
+Vue.use(VueCookie);
+
 export default {
   name: "Home",
+  beforeCreate() {
+    var token = this.$cookie.get("access_token_cookie");
+    console.log(token);
+    // add to local storage
+    localStorage.setItem("access_token", token); // token stores in cookies
+
+    // update the store state token
+    this.$store.commit("updateToken", token);
+  },
 };
 </script>

services/client/src/views/Logout.vue

@@ -6,7 +6,9 @@
 import Vue from "vue";
 import axios from "axios";
 import VueAxios from "vue-axios";
+import VueCookie from "vue-cookie";
 
+Vue.use(VueCookie);
 Vue.use(VueAxios, axios);
 export default {
   name: "Logout",
@@ -16,16 +18,30 @@ export default {
     };
   },
   created() {
-    this.distroyToken();
+    this.logout();
   },
   methods: {
+    logout() {
+      // remove token from cookie
+      this.$cookie.delete("access_token_cookie");
+
+      // remove token from localStorage
+      localStorage.clear(); // not the best practice but workes for now
+
+      // remove the token from store state
+      this.$store.commit("distroyToken");
+
+      // redirect
+      this.$router.push({ name: "Login" });
+    },
+
     distroyToken() {
       const path = this.baseUrl + "/auth/logout";
 
-      axios.defaults.headers.common["Authorization"] =
+      Vue.axios.defaults.headers.common["Authorization"] =
         "Bearer " + this.$store.state.token;
 
-      axios.get(path).then((response) => {
+      Vue.axios.get(path).then((response) => {
         // remove the cookie from server
         console.log(response.data.message);
 

services/client/src/views/Todo.vue

@@ -60,13 +60,13 @@ Vue.use(VueAxios, axios);
 export default {
   name: "Todo",
   beforeCreate() {
-      var token = this.$cookie.get("access_token_cookie");
-      console.log(token);
-      // add to local storage
-      localStorage.setItem("access_token", token); // token stores in cookies
+    var token = this.$cookie.get("access_token_cookie");
+    console.log(token);
+    // add to local storage
+    localStorage.setItem("access_token", token); // token stores in cookies
 
-      // update the store state token
-      this.$store.commit("updateToken", token);
+    // update the store state token
+    this.$store.commit("updateToken", token);
   },
 
   data() {
@@ -86,7 +86,6 @@ export default {
     },
   },
 
-
   created() {
     // this.loadToken();
     this.getTodos();