refactor login and nav bars

src/App.vue

@@ -28,15 +28,18 @@
 <template>
   <div id="app">
     <login-bar></login-bar>
+    <lesspass-navbar></lesspass-navbar>
     <router-view></router-view>
   </div>
 </template>
 <script type="text/ecmascript-6">
-  import LoginBar from './landing-page/LoginBar/LoginBar';
+  import LoginBar from './app/LoginBar';
+  import LesspassNavbar from './app/Navbar/Navbar';
 
   export default {
     components: {
       LoginBar,
+      LesspassNavbar,
     },
   };
 </script>

src/app/Login.vue

@@ -3,20 +3,21 @@
     <div class="container">
       <div class="row p-t-3">
         <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 bg-card-white">
+          <h2>{{{ $t('login.login') }}}</h2>
           <form v-on:submit.prevent>
             <fieldset class="form-group">
               <label class="sr-only" for="email">{{$t('login.Email')}}</label>
-              <input type="email" class="form-control form-control-sm" id="email"
+              <input type="email" class="form-control" id="email"
                      placeholder="{{$t('login.Email')}}"
                      v-model="credentials.email">
             </fieldset>
             <fieldset class="form-group">
               <label class="sr-only" for="password">{{$t('login.Password')}}</label>
-              <input type="password" class="form-control form-control-sm" id="password"
+              <input type="password" class="form-control" id="password"
                      placeholder="{{$t('login.Password')}}"
                      v-model="credentials.password">
             </fieldset>
-            <button type="submit" class="btn btn-primary btn-sm btn-block" @click="signin()">
+            <button type="submit" class="btn btn-primary btn-block" @click="signin()">
               {{$t('login.Sign_in')}}
             </button>
           </form>

src/landing-page/LoginBar/LoginBar.vue → src/app/LoginBar.vue

@@ -16,9 +16,9 @@
   }
 </style>
 <template>
-  <div id="login-bar">
+  <div id="login-bar" v-if="!user.authenticated">
     <div class="container">
-      <nav class="nav nav-inline pull-right" v-if="!user.authenticated">
+      <nav class="nav nav-inline pull-right">
         <a class="nav-link" v-bind:class="{ 'bg-primary': $route.path=='/login/'}"
            v-link="{ path: '/app/' }">
           <i class="fa fa-lock"></i> {{ $t('login.login') }}
@@ -28,18 +28,11 @@
           <i class="fa fa-user-plus"></i> {{ $t('login.register') }}
         </a>
       </nav>
-      <nav class="nav nav-inline pull-right" v-if="user.authenticated">
-        <a href="/" class="nav-link" v-on:click.stop.prevent="logout()">
-          <i class="fa fa-sign-out"></i> {{ $t('login.logout') }}
-        </a>
-      </nav>
     </div>
   </div>
 </template>
 <script type="text/ecmascript-6">
-  import auth from '../../services/auth';
-  import logging from '../../services/logging';
-
+  import auth from '../services/auth';
 
   export default {
     data() {
@@ -47,14 +40,6 @@
         user: auth.user,
       };
     },
-    methods: {
-      logout() {
-        auth.logout(() => {
-          logging.success(this.$t('login.logout_ok'));
-          this.$router.go('/');
-        });
-      },
-    },
   };
 </script>
 

src/app/Navbar/Navbar.vue

@@ -0,0 +1,58 @@
+<style>
+  #navbar {
+    background-color: white;
+    border-bottom: 1px solid #e8e8e8;
+    margin: 0;
+  }
+
+  #navbar #navbar__logo {
+    height: 32px;
+  }
+
+  #navbar .navbar {
+    padding: 1em 0;
+  }
+</style>
+<template>
+  <div id="navbar">
+    <div class="container">
+      <nav class="navbar">
+        <ul class="nav navbar-nav">
+          <li class="nav-item">
+            <a href="https://lesspass.com/">
+              <img id="navbar__logo" src="logo.png" alt="logo">
+            </a>
+          </li>
+        </ul>
+        <ul class="nav navbar-nav pull-xs-right">
+          <li class="nav-item" v-if="user.authenticated">
+            <a class="nav-link" href="/logout/" v-on:click.stop.prevent="logout()">
+               <i class="fa fa-sign-out"></i> {{ $t('login.logout') }}
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+<script type="text/ecmascript-6">
+  import auth from '../../services/auth';
+  import logging from '../../services/logging';
+
+
+  export default {
+    data() {
+      return {
+        user: auth.user,
+      };
+    },
+    methods: {
+      logout() {
+        auth.logout(() => {
+          logging.success(this.$t('login.logout_ok'));
+          this.$router.go('/');
+        });
+      },
+    },
+  };
+</script>

src/landing-page/LandingPage.vue

@@ -7,8 +7,6 @@
 </style>
 <template>
   <div id="landing-page">
-    <lesspass-navbar></lesspass-navbar>
-
     <div id="header" class="container">
       <div class="row">
         <div class="col-md-5">
@@ -27,7 +25,6 @@
   </div>
 </template>
 <script type="text/ecmascript-6">
-  import LesspassNavbar from './Navbar/Navbar';
   import LesspassHeadlines from './Headlines/Headlines';
   import PasswordGenerator from './PasswordGenerator/PasswordGenerator';
   import LesspassFeatures from './Features/Features';
@@ -40,7 +37,6 @@
       return {};
     },
     components: {
-      LesspassNavbar,
       LesspassHeadlines,
       PasswordGenerator,
       LesspassFeatures,

src/landing-page/Navbar/Navbar.vue

@@ -1,30 +0,0 @@
-<style>
-  #navbar {
-    background-color: white;
-    border-bottom: 1px solid #e8e8e8;
-    margin: 0;
-  }
-
-  #navbar #navbar__logo {
-    height: 32px;
-  }
-
-  #navbar .navbar {
-    padding: 1em 0;
-  }
-</style>
-<template>
-  <div id="navbar">
-    <div class="container">
-      <nav class="navbar">
-        <ul class="nav navbar-nav">
-          <li class="nav-item">
-            <a href="https://lesspass.com/">
-              <img id="navbar__logo" src="./logo.png" alt="logo">
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</template>

src/locales.js

@@ -58,7 +58,7 @@ const locales = {
       Sign_in: 'Sign In',
       register: 'Register',
       logout: 'Logout',
-      logout_ok: 'Logout successful, thank you for spending some time with lesspass',
+      logout_ok: 'Logout successful, thank you for spending some time on LessPass',
       welcome: 'Login successful, welcome on LessPass',
       credentials_invalids: '<strong>Invalid Email or Password.</strong><br> Please try again.',
     },