➕ 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">
+  <!--  <div id="nav">-->
-    <router-link to="/">Home</router-link> |
+  <!--    <router-link to="/">Home</router-link>-->
-    <router-link to="/about">About</router-link>
+  <!--    |-->
-  </div>
+  <!--    <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,19 +1,25 @@
-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
+        component: Home,
     },
     {
-    path: '/about',
+        path: '/login',
-    name: 'About',
+        name: 'Login',
-    // route level code-splitting
+        component: () => import('../views/Login.vue'),
-    // 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: '/dashboard',
+        name: 'Dashboard',
+        component: () => import('../views/Dashboard.vue'),
+        meta: {
+            requiresAuth: true
+        }
     }
 ]
 
@@ -22,4 +28,16 @@ const router = createRouter({
     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: {
+        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: {
+    modules: {},
+    getters: {
+        isLoggedIn: state => !!state.status,
     }
 })