reimplement router

app/app.vue

@@ -1,36 +1,29 @@
 <template>
     <div id="app">
-        <lesspass-navbar></lesspass-navbar>
-        <lesspass-header></lesspass-header>
-        <lesspass-features></lesspass-features>
-        <!--<lesspass-headlines></lesspass-headlines>-->
-        <lesspass-howitworks></lesspass-howitworks>
-        <lesspass-feedback></lesspass-feedback>
-        <lesspass-image></lesspass-image>
-        <lesspass-footer></lesspass-footer>
+        <router-view></router-view>
     </div>
 </template>
-<script>
-    import LesspassNavbar from './navbar/navbar.vue';
-    import LesspassHeader from './header/header.vue';
-    import LesspassFeatures from './features/features.vue';
-    import LesspassHowitworks from './howitworks/howitworks.vue';
-    import LesspassFeedback from './feedback/feedback.vue';
-    import LesspassImage from './image-separator/image-separator.vue';
-    import LesspassFooter from './footer/footer.vue';
+<!--<script>-->
+    <!--import LesspassNavbar from './navbar/navbar.vue';-->
+    <!--import LesspassHeader from './header/header.vue';-->
+    <!--import LesspassFeatures from './features/features.vue';-->
+    <!--import LesspassHowitworks from './howitworks/howitworks.vue';-->
+    <!--import LesspassFeedback from './feedback/feedback.vue';-->
+    <!--import LesspassImage from './image-separator/image-separator.vue';-->
+    <!--import LesspassFooter from './footer/footer.vue';-->
 
-    export default {
-        data: function () {
-            return {}
-        },
-        components: {
-            LesspassNavbar,
-            LesspassHeader,
-            LesspassFeatures,
-            LesspassHowitworks,
-            LesspassFeedback,
-            LesspassImage,
-            LesspassFooter
-        }
-    }
-</script>
+    <!--export default {-->
+        <!--data: function () {-->
+            <!--return {}-->
+        <!--},-->
+        <!--components: {-->
+            <!--LesspassNavbar,-->
+            <!--LesspassHeader,-->
+            <!--LesspassFeatures,-->
+            <!--LesspassHowitworks,-->
+            <!--LesspassFeedback,-->
+            <!--LesspassImage,-->
+            <!--LesspassFooter-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->

app/landing-page/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <div id="app">
+        <lesspass-header></lesspass-header>
+        <lesspass-features></lesspass-features>
+        <lesspass-howitworks></lesspass-howitworks>
+        <lesspass-feedback></lesspass-feedback>
+        <lesspass-image></lesspass-image>
+        <lesspass-footer></lesspass-footer>
+    </div>
+</template>
+<script>
+    import LesspassHeader from './header/header.vue';
+    import LesspassFeatures from './features/features.vue';
+    import LesspassHowitworks from './howitworks/howitworks.vue';
+    import LesspassFeedback from './feedback/feedback.vue';
+    import LesspassImage from './image-separator/image-separator.vue';
+    import LesspassFooter from './footer/footer.vue';
+
+    export default {
+        data: function () {
+            return {}
+        },
+        components: {
+            LesspassHeader,
+            LesspassFeatures,
+            LesspassHowitworks,
+            LesspassFeedback,
+            LesspassImage,
+            LesspassFooter
+        }
+    }
+</script>

app/lesspass/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="container">
+        <div class="row m-y-3">
+            <div class="col-lg-12">
+                <form>
+                    <input class="form-control" id="search-input" placeholder="Search..." autocomplete="off"
+                           type="text">
+                    <div class="dropdown-menu bd-search-results" id="search-results"></div>
+                </form>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-12">
+                <ol>
+                    <li v-for="entry in entries">
+                        {{ entry.title }}
+                    </li>
+                </ol>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                entries: []
+            }
+        }
+    }

app/main.js

@@ -1,15 +1,6 @@
-require('../node_modules/bootstrap/dist/css/bootstrap.css');
-require('../node_modules/font-awesome/css/font-awesome.min.css');
-require('../node_modules/bootstrap/dist/js/umd/collapse.js');
-
-var Vue = require('vue');
-var App = require('./app.vue');
-
-require('./locales.js');
-
-new Vue({
-    el: 'body',
-    components: {
-        App
-    }
-});
+import 'bootstrap/dist/css/bootstrap.css';
+import 'font-awesome/css/font-awesome.min.css';
+import 'bootstrap/dist/js/umd/collapse.js';
+import Vue from 'vue';
+import './locales';
+import './routes'

app/routes.js

@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+import App from './app.vue';
+import LandingPage from './landing-page/index.vue';
+import LessPass from './lesspass/index.vue';
+
+Vue.use(Router);
+
+var router = new Router();
+
+
+var Foo = Vue.extend({
+    template: '<p>This is foo!</p>'
+});
+
+var Bar = Vue.extend({
+    template: '<p>This is bar!</p>'
+});
+
+router.map({
+    '/': {
+        auth: true,
+        component: LessPass
+    },
+    '/presentation/': {
+        component: LandingPage
+    }
+});
+
+router.redirect({
+    '*': '/'
+});
+
+router.start(App, '#app');
+
+var Auth = require('./services/auth.js');
+
+Auth.checkAuth();
+
+router.beforeEach(function (transition) {
+    if (transition.to.auth && !Auth.user.authenticated) {
+        transition.redirect('/presentation/')
+    } else {
+        transition.next()
+    }
+});
+
+module.exports = router;

app/services/auth.js

@@ -0,0 +1,55 @@
+import logging from './logging.js';
+
+module.exports = {
+    user: {
+        authenticated: false
+    },
+
+    login(context, credentials, callback) {
+        var self = this;
+        context.$http.post('/api/sessions/', credentials).then(
+            function (response) {
+                localStorage.setItem('token', response.data.token);
+                self.user.authenticated = true;
+                if (callback) {
+                    logging.success(this.$t('login.welcome'));
+                    callback();
+                }
+            },
+            function () {
+                logging.error(this.$t('login.credentials_invalids'));
+            }
+        );
+    },
+
+    register(context, user) {
+        var self = this;
+        context.$http.post('/api/users/', user).then(
+            function (response) {
+                logging.warning(this.$t('register.beta'));
+            },
+            function (error) {
+                logging.warning(this.$t('register.beta'));
+            }
+        );
+    },
+
+    logout(callback) {
+        localStorage.removeItem('token');
+        this.user.authenticated = false;
+        if (callback) {
+            callback();
+        }
+    },
+
+    checkAuth() {
+        var jwt = localStorage.getItem('token');
+        this.user.authenticated = !!jwt;
+    },
+
+    getAuthHeader() {
+        return {
+            'Authorization': 'Bearer ' + localStorage.getItem('token')
+        }
+    }
+};

app/services/logging.js

@@ -0,0 +1,35 @@
+import toastr from 'toastr';
+import 'toastr/build/toastr.min.css';
+
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": false,
+    "positionClass": "toast-top-center",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "10000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+};
+
+module.exports = {
+    error(message){
+        toastr.error(message);
+    },
+    success(message){
+        toastr.success(message);
+    },
+    warning(message){
+        toastr.warning(message);
+    },
+    clear(){
+        toastr.clear();
+    }
+};

index.html

@@ -25,7 +25,7 @@
     <meta name="theme-color" content="#252830">
 </head>
 <body>
-<App></App>
+<div id="app"></div>
 <script src="dist/bundle.js"></script>
 </body>
 </html>

package.json

@@ -36,7 +36,8 @@
     "toastr": "^2.1.2",
     "vue": "^1.0.16",
     "vue-i18n": "^2.4.0",
-    "vue-resource": "^0.7.0"
+    "vue-resource": "^0.7.0",
+    "vue-router": "^0.7.11"
   },
   "devDependencies": {
     "babel-core": "^6.5.1",