add login page in vue-router migration

src/components/Login.vue

@@ -1,99 +1,68 @@
-<style>
-    .card-block {
-        position: relative;
-    }
-
-    .alert {
-        position: absolute;
-        z-index: 20;
-        width: 100%;
-        top: 0;
-        left: 0;
-    }
-</style>
 <template>
-    <div>
-        <div class="card-header card-header-dark">
-            <div class="row">
-                <div class="login-header">
-                    <div class="col-xs-1">
-                        <span class="link" v-on:click="go('index')">
-                            <i class="fa fa-chevron-circle-left white" aria-hidden="true"></i>
-                        </span>
-                    </div>
-                    <div class="col-xs-10 text-xs-center">
-                        Connect to LessPass Database
-                    </div>
-                </div>
+    <form v-on:submit.prevent="login">
+        <div class="form-group row" v-if="showError">
+            <div class="col-xs-12 text-muted text-danger">
+                {{ errorMessage }}
             </div>
         </div>
-        <div class="card-block">
-            <form v-on:submit.prevent="login">
-                <div class="form-group row" v-if="showError">
-                    <div class="col-xs-12 text-muted text-danger">
-                        {{ errorMessage }}
-                    </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="inner-addon left-addon">
+                    <i class="fa fa-user"></i>
+                    <input id="login"
+                           class="form-control"
+                           name="login"
+                           type="email"
+                           placeholder="Email"
+                           v-model="user.email">
                 </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="inner-addon left-addon">
-                            <i class="fa fa-user"></i>
-                            <input id="login"
-                                   class="form-control"
-                                   name="login"
-                                   type="email"
-                                   placeholder="Email"
-                                   v-model="user.email">
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="inner-addon left-addon">
-                            <i class="fa fa-lock"></i>
-                            <input id="password"
-                                   name="password"
-                                   type="password"
-                                   class="form-control"
-                                   placeholder="Password"
-                                   v-model="user.password">
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="inner-addon left-addon">
-                            <i class="fa fa-globe"></i>
-                            <input class="form-control" type="text" id="baseURL" v-model="$store.state.baseURL">
-                            <small id="siteHelp" class="form-text text-muted">You can use your self hosted LessPass
-                                Database
-                            </small>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <button id="loginButton" class="btn btn-primary" type="submit">
-                            Sign In
-                        </button>
-                        <button id="registerButton" class="btn btn-secondary" type="button" v-on:click="go('register')">
-                            Register
-                        </button>
-                    </div>
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="inner-addon left-addon">
+                    <i class="fa fa-lock"></i>
+                    <input id="password"
+                           name="password"
+                           type="password"
+                           class="form-control"
+                           placeholder="Password"
+                           v-model="user.password">
                 </div>
-                <div class="form-group row">
-                    <button class="btn btn-link" type="button" v-on:click="go('forgotPassword')">
-                        Forgot you password ?
-                    </button>
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="inner-addon left-addon">
+                    <i class="fa fa-globe"></i>
+                    <input class="form-control" type="text" id="baseURL" v-model="$store.state.baseURL">
+                    <small id="siteHelp" class="form-text text-muted">You can use your self hosted LessPass
+                        Database
+                    </small>
                 </div>
-            </form>
+            </div>
         </div>
-    </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <button id="loginButton" class="btn btn-primary" type="submit">
+                    Sign In
+                </button>
+                <button id="registerButton" class="btn btn-secondary" type="button" v-on:click="go('register')">
+                    Register
+                </button>
+            </div>
+        </div>
+        <div class="form-group row">
+            <button class="btn btn-link" type="button" v-on:click="go('forgotPassword')">
+                Forgot you password ?
+            </button>
+        </div>
+    </form>
 </template>
 <script type="text/ecmascript-6">
     import Auth from '../api/auth';
     import Storage from '../api/storage';
-    import {mapGetters, mapActions} from 'vuex';
+    import {mapGetters} from 'vuex';
 
     export default {
         data() {
@@ -111,7 +80,7 @@
             };
         },
 
-        methods: Object.assign(mapActions(['go']), {
+        methods: {
             showErrorMessage(errorMessage){
                 this.errorMessage = errorMessage;
                 this.showError = true;
@@ -128,15 +97,15 @@
                 var baseURL = this.baseURL;
                 var email = this.user.email;
                 if (!email || !this.user.password || !baseURL) {
-                    this.showErrorMessage('email, password and url ');
+                    this.showErrorMessage('email, password and url are mandatory');
                     return;
                 }
                 this.auth.login(this.user, baseURL)
                         .then(()=> {
                             this.storage.save({baseURL: baseURL, email: email});
                             this.$store.dispatch('userAuthenticated', {email: email});
-                            this.$store.dispatch('go', 'index');
                             this.$store.dispatch('loadPasswords');
+                            this.$router.push({ name: 'home'});
                         })
                         .catch(err => {
                             if (err.response === undefined) {
@@ -152,7 +121,7 @@
                             }
                         });
             }
-        }),
+        },
         computed: mapGetters([
             'baseURL'
         ])

src/components/Menu.vue

@@ -5,16 +5,21 @@
         color: #FFF;
     }
 
-    #menu-title {
-        cursor: pointer;
+    .menu-link {
+        color: white;
+    }
+
+    .menu-link:hover, .menu-link:focus, .menu-link:active {
+        text-decoration: none;
+        color: white;
     }
 </style>
 <template>
     <div id="menu">
-        <div class="card-header" v-show="isAuthenticated">
+        <!--<div class="card-header" v-show="isAuthenticated">
             <div class="row">
                 <div class="col-xs-6">
-                    <span id="menu-title" v-on:click="go('index')">LessPass</span>
+                    <router-link to="/">LessPass</router-link>
                 </div>
                 <div class="col-xs-6 text-xs-right">
                     <div class="btn-group">
@@ -31,18 +36,17 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div>-->
         <div class="card-header card-header-dark" v-show="isGuest">
             <div class="row">
                 <div class="index-header">
                     <div class="col-xs-6">
-                        LessPass
+                        <router-link class="menu-link" to="/">LessPass</router-link>
                     </div>
                     <div class="col-xs-6 text-xs-right">
-                        <button type="button" class="btn" v-on:click="go('login')"
-                                style="background-color:transparent; padding:0; color:white;">
+                        <router-link class="menu-link" to="/login">
                             <i class="fa fa-user-secret white" aria-hidden="true"></i>
-                        </button>
+                        </router-link>
                     </div>
                 </div>
             </div>
@@ -64,3 +68,12 @@
         ])
     }
 </script>
+
+module.exports = function (string, context) {
+for (var key in context) {
+var find = `\\$\\{(${key})\\}`;
+var re = new RegExp(find, 'g');
+string = string.replace(re, context[key]);
+}
+return string
+};

src/routes.js

@@ -11,8 +11,9 @@ import Passwords from './components/Passwords';
 Vue.use(VueRouter);
 
 const routes = [
-    {path: '/', component: PasswordGenerator},
-    {path: '/password/reset/confirm/:uid/:token', name:'passwordResetConfirm', component: PasswordResetConfirm},
+    {path: '/', name: 'home', component: PasswordGenerator},
+    {path: '/login', component: Login},
+    {path: '/password/reset/confirm/:uid/:token', name: 'passwordResetConfirm', component: PasswordResetConfirm},
 ];
 
 const router = new VueRouter({