added login stuff

.env.development

@@ -0,0 +1 @@
+VUE_APP_API_LOCATION=https://videon.k8s.kmlabz.com/api/

.env.production

@@ -0,0 +1 @@
+VUE_APP_API_LOCATION=https://videon.k8s.kmlabz.com/api/

package-lock.json

@@ -2490,6 +2490,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5475,8 +5483,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "lodash": "^4.17.20",
     "node-sass": "^5.0.0",

src/components/Login.vue

@@ -1,44 +1,66 @@
 <template>
   <div>
-    <form novalidate @submit.prevent="performLogin">
+
+    <form novalidate @submit.prevent="performLogin" @input="loginCredsChanged">
       <md-card-content>
+        <md-content class="text-alert" v-if="invalidLogin">Wrong username or password</md-content>
         <md-field>
           <label>Username</label>
-          <md-input :disabled="processing"></md-input>
+          <md-input :disabled="authInProgress" v-model="creds.name"></md-input>
         </md-field>
 
         <md-field>
           <label>Password</label>
-          <md-input :disabled="processing" type="password"></md-input>
+          <md-input :disabled="authInProgress" v-model="creds.password" type="password"></md-input>
         </md-field>
 
       </md-card-content>
 
       <md-card-actions>
-        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
+        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="authInProgress"
                              class="md-accent"></md-progress-spinner>
-        <md-button type="submit" class="md-primary" :disabled="processing">Login</md-button>
+        <md-button type="submit" class="md-primary" :disabled="authInProgress">Login</md-button>
       </md-card-actions>
     </form>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: "Login",
   data() {
     return {
-      processing: false
+      creds: {
+        name: "",
+        password: ""
+      },
+      invalidLogin: false
     }
   },
   methods: {
     performLogin() {
-      this.processing = true;
+      this.$store.dispatch("performLogin", this.creds).then(() => {
+        this.$router.push({name: 'Dashboard'});
+      }).catch(() => {
+        this.invalidLogin = true;
+      })
+    },
+    loginCredsChanged() {
+      this.invalidLogin = false;
     }
+  },
+  computed: {
+    ...mapGetters(['authInProgress'])
   }
 }
 </script>
 
 <style scoped>
+.text-alert {
+  color: red;
+  font-weight: bold;
+}
 
 </style>

src/components/Register.vue

@@ -5,41 +5,56 @@
 
         <md-field>
           <label>Username</label>
-          <md-input :disabled="processing"></md-input>
+          <md-input v-model="form.name" :disabled="authInProgress"></md-input>
         </md-field>
 
         <md-field :md-toggle-password="false">
           <label>Password</label>
-          <md-input type="password" :disabled="processing"></md-input>
+          <md-input v-model="form.password" type="password" :disabled="authInProgress"></md-input>
         </md-field>
 
         <md-field :md-toggle-password="false">
           <label>Confirm password</label>
-          <md-input :disabled="processing" type="password"></md-input>
+          <md-input v-model="form.passwordConfirm" :disabled="authInProgress" type="password"></md-input>
         </md-field>
 
       </md-card-content>
 
       <md-card-actions>
-        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
+        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="authInProgress"
                              class="md-accent"></md-progress-spinner>
-        <md-button type="submit" class="md-primary" :disabled="processing">Register</md-button>
+        <md-button type="submit" class="md-primary" :disabled="authInProgress && passwordGood">Register</md-button>
       </md-card-actions>
     </form>
   </div>
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
   name: "Register",
   data() {
     return {
-      processing: false
+      form: {
+        name: "",
+        password: "",
+        passwordConfirm: ""
+      }
     }
   },
   methods: {
     performRegister() {
-      this.processing = true;
+      const creds = {name: this.form.name, password: this.form.password};
+      this.$store.dispatch("performRegister", creds).then(() => {
+        this.$router.push({name: 'Dashboard'});
+      })
+    }
+  },
+  computed: {
+    ...mapGetters(['authInProgress']),
+    passwordGood() {
+      return this.form.password !== "" && this.form.password === this.form.passwordConfirm;
     }
   }
 }

src/components/WorkspaceDrawerContent.vue

@@ -13,7 +13,7 @@
       </md-list-item>
 
       <md-list-item>
-        <md-button class="md-raised md-accent">Logout</md-button>
+        <md-button class="md-raised md-accent" @click="performLogout">Logout</md-button>
       </md-list-item>
 
     </md-list>
@@ -23,7 +23,14 @@
 
 <script>
 export default {
-  name: "WorkspaceDrawerContent"
+  name: "WorkspaceDrawerContent",
+  methods: {
+    performLogout() {
+      this.$store.dispatch("performLogout").then(() => {
+        this.$router.push({name: "Welcome"})
+      })
+    }
+  }
 }
 </script>
 

src/main.js

@@ -1,4 +1,6 @@
 import Vue from 'vue'
+import axios from 'axios'
+
 import App from './App.vue'
 import router from './router'
 import store from './store'
@@ -39,9 +41,29 @@ Vue.use(MdRipple);
 Vue.use(MdDialog);
 Vue.use(MdSpeedDial);
 
+Vue.prototype.$api = axios.create({
+    baseURL: process.env.VUE_APP_API_LOCATION
+});
 
 new Vue({
     router,
     store,
-    render: h => h(App)
+    render: h => h(App),
+    created() {
+        this.$api.interceptors.response.use(undefined, function (err) {
+            return new Promise(function (resolve, reject) {
+                if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
+                    this.$store.dispatch("performLogout").then(() => {
+                        this.$router.push({name: 'Welcome'});
+                    });
+                }
+                reject(err);
+            });
+        });
+        this.$api.interceptors.request.use((config) => {
+            if (this.$store && this.$store.getters.isLoggedIn) {
+                config.headers["Authorization"] = "Bearer " + this.$store.state.auth.token;
+            }
+        })
+    }
 }).$mount('#app')

src/router/index.js

@@ -3,18 +3,30 @@ import VueRouter from 'vue-router'
 import Dashboard from '@/views/Dashboard'
 import Welcome from "@/views/Welcome";
 
-Vue.use(VueRouter)
+import store from '@/store'
+
+Vue.use(VueRouter);
 
 const routes = [
     {
-        path: '/',
+        path: '/welcome',
         name: 'Welcome',
-        component: Welcome
+        component: Welcome,
+        meta: {
+            allowVisit(loggedin) {
+                return !loggedin;
+            }
+        }
     },
     {
-        path: '/dashboard',
+        path: '/',
         name: 'Dashboard',
-        component: Dashboard
+        component: Dashboard,
+        meta: {
+            allowVisit(loggedin) {
+                return loggedin;
+            }
+        }
     },
     {
         path: '/about',
@@ -22,7 +34,12 @@ const routes = [
         // 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')
+        component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
+        meta: {
+            allowVisit() {
+                return true;
+            }
+        }
     }
 ]
 
@@ -32,4 +49,25 @@ const router = new VueRouter({
     routes
 })
 
+
+router.beforeEach((to, from, next) => {
+
+    const loggedin = store.getters.isLoggedIn;
+
+    const visitAllowed = to.matched.some(record => record.meta.allowVisit(loggedin))
+
+    if (visitAllowed) {
+        next();
+        return;
+    }
+
+    if (loggedin) {
+        next({name: 'Dashboard'})
+    } else {
+        next({name: 'Welcome'})
+    }
+
+})
+
+
 export default router

src/store/auth.js

@@ -0,0 +1,99 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+const JWT_KEY_NAME = "JWT";
+const baseURL = process.env.VUE_APP_API_LOCATION;
+
+Vue.use(Vuex)
+
+export default {
+    state() {
+        return {
+            auth: {
+                processing: false,
+                token: localStorage.getItem(JWT_KEY_NAME) || '',
+                name: ''
+            }
+        }
+    },
+    mutations: {
+        auth_started(state) {
+            state.auth.processing = true;
+        },
+        auth_success(state, token, name) {
+            state.auth.processing = false;
+            state.auth.token = token;
+            state.auth.name = name;
+        },
+        auth_fail(state) {
+            state.auth.processing = false;
+            state.auth.token = '';
+            state.auth.name = '';
+        },
+        logout(state) {
+            state.auth.token = '';
+            state.auth.name = '';
+        }
+    },
+    actions: {
+        performLogin({commit}, creds) {
+            return new Promise((resolve, reject) => {
+                commit('auth_started')
+                axios.post("auth/login", creds, {baseURL}).then(resp => {
+                    const token = resp.data.token;
+
+                    if (!token) {
+                        return reject();
+                    }
+
+                    const user = creds.name;
+                    localStorage.setItem(JWT_KEY_NAME, token)
+                    commit('auth_success', token, user)
+                    return resolve(resp);
+                }).catch(err => {
+                    commit('auth_fail')
+                    localStorage.removeItem(JWT_KEY_NAME)
+                    return reject(err);
+                })
+            })
+        },
+        performRegister({commit}, creds) {
+            return new Promise((resolve, reject) => {
+                commit('auth_started')
+                axios.post("auth/signup", creds, {baseURL}).then(resp => {
+                    const token = resp.data.token;
+
+                    if (!token) {
+                        return reject();
+                    }
+
+                    const user = creds.name;
+                    localStorage.setItem(JWT_KEY_NAME, token)
+                    commit('auth_success', token, user)
+                    resolve(resp)
+                }).catch(err => {
+                    commit('auth_fail')
+                    localStorage.removeItem(JWT_KEY_NAME)
+                    reject(err)
+                })
+            })
+        },
+        performLogout({commit}) {
+            return new Promise((resolve) => {
+                localStorage.removeItem(JWT_KEY_NAME)
+                commit('logout')
+                resolve();
+            });
+        }
+    },
+    modules: {},
+    getters: {
+        isLoggedIn(state) {
+            return !!state.auth.token;
+        },
+        authInProgress(state) {
+            return state.auth.processing;
+        }
+    }
+}

src/store/index.js

@@ -1,15 +1,24 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import auth from "@/store/auth";
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     state: {
+
     },
     mutations: {
+
     },
     actions: {
+
     },
     modules: {
+        auth
+    },
+    getters: {
+
     }
 })