vue

frontend/src/forms/Login.vue

@@ -1,5 +1,6 @@
 <template>
     <form @submit="login">
+        {{$store.getters.token}}
         <div class="form-group row">
             <label for="username" class="col-sm-2 col-form-label">Username</label>
             <div class="col-sm-10">
@@ -14,7 +15,7 @@
         </div>
         <div class="form-group row">
             <div class="col-sm-12">
-                <button v-on:click="login" type="submit" class="btn btn-primary btn-block mb-3">Sign in</button>
+                <button @click="login" type="submit" class="btn btn-primary btn-block mb-3">Sign in</button>
             </div>
         </div>
     </form>

frontend/src/forms/Notifier.vue

@@ -32,7 +32,9 @@
             </div>
 
             <div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
-                <button @click="saveNotifier" type="submit" class="btn btn-primary btn-block text-capitalize"><i class="fa fa-check-circle"></i> Save</button>
+                <button @click="saveNotifier" type="submit" class="btn btn-block text-capitalize" :class="{'btn-primary': !saved, 'btn-success': saved}">
+                    <i class="fa fa-check-circle"></i> {{saved ? "Saved" : "Save"}}
+                </button>
             </div>
 
             <div class="col-12 col-sm-12">
@@ -71,7 +73,8 @@
   },
   data () {
     return {
-        error: null
+        error: null,
+      saved: false,
     }
   },
   mounted() {
@@ -87,9 +90,14 @@
       form.enabled = this.notifier.enabled
       form.limits = parseInt(this.notifier.limits)
       form.method = this.notifier.method
+      alert(JSON.stringify(form))
       await Api.notifier_save(form)
       const notifiers = await Api.notifiers()
       this.$store.commit('setNotifiers', notifiers)
+      this.saved = true
+      setTimeout(() => {
+        this.saved = false
+      }, 2000)
     },
     async testNotifier(e) {
       e.preventDefault();
@@ -100,6 +108,7 @@
       form.enabled = this.notifier.enabled
       form.limits = parseInt(this.notifier.limits)
       form.method = this.notifier.method
+      alert(JSON.stringify(form))
       const tested = await Api.notifier_test(form)
       if (tested === "ok") {
         alert('This notifier seems to be working!')

frontend/src/main.js

@@ -3,7 +3,8 @@ import VueRouter from 'vue-router'
 import VueApexCharts from 'vue-apexcharts'
 
 import App from '@/App.vue'
-import store from '@/store'
+import Api from './components/API'
+import store from './store'
 
 import {library} from '@fortawesome/fontawesome-svg-core'
 import {fas} from '@fortawesome/fontawesome-free-solid';
@@ -44,6 +45,9 @@ const routes = [
     path: '/dashboard',
     name: 'Dashboard',
     component: Dashboard,
+    meta: {
+      requiresAuth: true
+    },
     children: [{
       path: '',
       component: DashboardIndex
@@ -92,6 +96,18 @@ const router = new VueRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (Api.token()) {
+      next()
+      return
+    }
+    next('/login')
+  } else {
+    next()
+  }
+})
+
 Vue.use(VueRouter);
 Vue.use(require('vue-moment'));
 

frontend/src/pages/Dashboard.vue

@@ -1,11 +1,7 @@
 <template>
-    <div>
+    <div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
-        <Login v-if="!authenticated"/>
+        <TopNav/>
-
+        <router-view></router-view>
-        <div v-if="authenticated" class="container col-md-7 col-sm-12 mt-md-5 bg-light">
-            <TopNav/>
-            <router-view></router-view>
-         </div>
     </div>
 </template>
 

frontend/src/pages/Login.vue

@@ -18,7 +18,9 @@
     FormLogin
   },
   data () {
+        return {
 
+        }
   },
   methods: {