add protection to routes and login/logout behavior

app/src/App.vue

@@ -9,8 +9,8 @@
                             {{ $t('user_interface_link') }} <icon iname="user" class="sm"/>
                         </b-button>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item" v-bind:hidden="!connected">
-                        <b-button to="/logout" variant="outline-dark" block size="sm">
+                        <b-button @click.prevent="logout" to="/logout" variant="outline-dark" block size="sm" >
                             {{ $t('logout') }} <icon iname="sign-out" class="sm"/>
                         </b-button>
                     </li>
@@ -41,6 +41,29 @@
     </div>
 </template>
 
+<script>
+import api from '@/helpers/api'
+
+
+export default {
+    name: 'App',
+    computed: {
+        connected: function () {
+            return this.$store.state.connected
+        }
+    },
+    methods: {
+        async logout() {
+            const disconnected = await api.logout()
+            if (disconnected) {
+                this.$store.commit('CONNECTED', false);
+                this.$router.push('/login')
+            }
+        }
+    },
+}
+</script>
+
 <style lang="scss">
 @import '@/scss/main.scss';
 
@@ -50,7 +73,7 @@ header {
     margin-bottom: 2rem;
 
     .navbar {
-        padding: 1rem;
+        padding: 1rem 0;
 
         img {
             width: 70px;

app/src/plugins/router.js

@@ -1,12 +1,26 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from '../routes'
+import store from './store'
 
 
 Vue.use(VueRouter)
 
-export default new VueRouter({
+const router = new VueRouter({
-    mode: 'history',
+    // mode: 'history', // this allow all routes to be real ones (without '#')
     base: process.env.BASE_URL,
     routes
 })
+
+// Before each route request hook
+router.beforeEach((to, from, next) => {
+    // Allow if connected or route is not protected
+    if (store.state.connected || to.meta.noAuth) {
+        next()
+    } else {
+        next({path: '/login', query: {redirect: to.path}})
+    }
+})
+
+
+export default router;

app/src/routes.js

@@ -1,9 +1,10 @@
 import Home from './views/Home'
 import Login from './views/Login'
 
+
 const routes = [
     {path: '/', component: Home},
-    {path: '/login', component: Login},
+    {path: '/login', component: Login, meta: {noAuth: true}},
 ]
 
 export default routes

app/src/views/Login.vue

@@ -8,26 +8,56 @@
                     <icon iname="lock" class="sm"/>
                 </b-input-group-text>
             </template>
-            <b-form-input required type="password" v-model="password" id="input-password" :placeholder="$t('administration_password')"></b-form-input>
+            <b-form-input required id="input-password"
-            <b-input-group-append>
+                v-model="password"
+                type="password"
+                :placeholder="$t('administration_password')"
+                :state="state"
+            ></b-form-input>
+            <template v-slot:append>
                 <b-button type="submit" variant="success">{{ $t('login') }}</b-button>
-            </b-input-group-append>
+            </template>
         </b-input-group>
+        <b-form-invalid-feedback :state="state">
+            {{ $t('wrong_password') }}
+        </b-form-invalid-feedback>
     </b-form>
 </template>
 
 <script>
+import api from '@/helpers/api'
+
+
 export default {
     name: 'Login',
     data: () => {
         return {
-            password: ''
+            password: '',
+            state: null,
         }
     },
     methods: {
-        login: function () {
+        async login() {
-            console.log(this.password);
+            const connected = await api.login(this.password)
+            if (connected) {
+                this.$store.commit('CONNECTED', true);
+                this.$router.push(this.$route.query.redirect || '/')
+            } else {
+                this.$store.commit('CONNECTED', false);
+                this.state = false
             }
         }
+    },
+    // TODO checkInstall
+    // beforeRouteEnter (to, from, next) {
+    // },
 }
 </script>
+
+<style lang="scss" scoped>
+.input-group.is-invalid {
+  ~ .invalid-feedback {
+    display: block;
+  }
+}
+</style>