➕ Add login logic

Will refactor in future commit, just a skeleton of whats needed.

web/src/App.vue

@@ -1,30 +1,11 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
+  <!--  <div id="nav">-->
+  <!--    <router-link to="/">Home</router-link>-->
+  <!--    |-->
+  <!--    <router-link to="/about">About</router-link>-->
+  <!--    |-->
+  <!--    <router-link to="/login">Login</router-link>-->
+  <!--  </div>-->
   <router-view/>
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>

web/src/router/index.ts

@@ -1,25 +1,43 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
 import Home from '../views/Home.vue'
+import store from '../store/index'
 
 const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    {
+        path: '/',
+        name: 'Home',
+        component: Home,
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: () => import('../views/Login.vue'),
+    },
+    {
+        path: '/dashboard',
+        name: 'Dashboard',
+        component: () => import('../views/Dashboard.vue'),
+        meta: {
+            requiresAuth: true
+        }
+    }
 ]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
+    history: createWebHistory(process.env.BASE_URL),
+    routes
+})
+
+router.beforeEach((to, from, next) => {
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+        if (store.getters.isLoggedIn) {
+            next()
+            return
+        }
+        next('/login')
+    } else {
+        next()
+    }
 })
 
 export default router

web/src/store/index.ts

@@ -1,12 +1,48 @@
-import { createStore } from 'vuex'
+import {createStore} from 'vuex'
+import axios, {AxiosResponse} from "axios";
 
 export default createStore({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+    state: {
+        status: false,
+        user: {}
+    },
+    mutations: {
+        auth_success(state, user) {
+            state.status = true
+            state.user = user
+        },
+        auth_error(state) {
+            state.status = false
+        },
+        logout(state) {
+            state.status = false
+            state.user = {}
+        },
+    },
+    actions: {
+        login({commit}, user: { username: string, password: string }) {
+            return new Promise((resolve, reject) => {
+                axios({url: 'http://backend:6000/api/auth/login', data: {user}, method: 'POST'})
+                    .then((resp: AxiosResponse) => {
+                        commit("auth_success", user.username);
+                        resolve(resp)
+                    })
+                    .catch((err: Error) => {
+                        commit('auth_error')
+                        reject(err)
+                    })
+            })
+        },
+        logout({commit}) {
+            return new Promise((resolve, reject) => {
+                let user = null;
+                commit("logout");
+                resolve()
+            })
+        },
+    },
+    modules: {},
+    getters: {
+        isLoggedIn: state => !!state.status,
+    }
 })