update password generator component

Dockerfile

@@ -1,3 +0,0 @@
-FROM node:4-onbuild
-
-EXPOSE 8080

app/app.vue

@@ -1,66 +1,47 @@
 <style>
     @import '../node_modules/bootstrap/dist/css/bootstrap.css';
+    @import '../node_modules/toastr/build/toastr.min.css';
+
+    #toast-container > div {
+        opacity: 1;
+        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+        filter: alpha(opacity=100);
+    }
 
     body {
         font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-size: 14px;
         line-height: 1.5;
-        color: #CFD2DA;
-        background-color: #262B30;
-        overflow-y: scroll;
+        color: #cfd2da;
+        background-color: #252830;
     }
 
     .blue {
         color: #0275D8;
     }
-
-    #header {
-        padding: 0;
-    }
-
-    #header #logo {
-        width: 30px;
-        height: 30px;
-    }
-
 </style>
 
 <template>
     <div>
-        <div id="header" class="container m-t-1">
-            <nav class="navbar navbar-dark ">
-                <a class="navbar-brand" href="#/">
-                    <img id="logo" alt="lesspass" class="img-fluid" src="./assets/images/logo.png">
-                </a>
-                <a class="navbar-brand" href="#/"> LessPass
-                </a>
-                <ul class="nav navbar-nav pull-xs-right">
-                    <li class="nav-item">
-                        <a class="btn btn-primary" v-link="'entries'" v-if="!user.authenticated">
-                            {{ $t('header.login') }}
-                        </a>
-                        <a class="btn btn-primary-outline" v-link="'login'" v-if="user.authenticated" @click="logout()">
-                            logout
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-        </div>
+        <lesspass-header></lesspass-header>
         <router-view></router-view>
     </div>
 </template>
 <script>
-    import auth from './services/auth'
+    var $ = require('jquery');
+    window.jQuery = $;
+    window.Tether = require('tether');
+    window.$ = $;
+    var bootstrap = require('bootstrap/dist/js/umd/collapse.js');
+
+    import LesspassHeader from './components/header.vue';
+
     export default {
         data: function () {
-            return {
-                user: auth.user
-            }
+            return {}
         },
-        methods: {
-            logout() {
-                auth.logout()
-            }
+        components: {
+            LesspassHeader
         }
     }
 </script>

app/components/auth/auth.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row m-y-2">
-            <div class="col-lg-4 col-lg-offset-4">
-                <router-view></router-view>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-lg-4 col-lg-offset-4">
-                <p v-if="$route.path=='/auth/login'">
-                    {{$t('login.dont_have_an_account')}}
-                    <a v-link="{ path: '/auth/register' }">{{$t('login.register')}}</a>
-                </p>
-                <p v-if="$route.path=='/auth/register'">
-                    {{$t('login.already_have_an_account')}}
-                    <a v-link="{ path: '/auth/login' }">{{$t('login.login')}}</a>
-                </p>
-            </div>
-        </div>
-    </div>
-</template>

app/components/auth/login.vue

@@ -1,48 +0,0 @@
-<!--<style>
-    #login .form-control {
-        background-color: #31353A;
-        color: #8F9394;
-        border: 1px solid #31353A;
-    }
-</style>-->
-<template>
-    <div id="login" class="p-y-2">
-        <h2>{{$t('login.login')}}</h2>
-        <p>{{$t('login.why')}}</p>
-        <div class="alert alert-danger" v-if="error">
-            <p>{{{$t('login.credentials_invalids')}}}</p>
-        </div>
-        <div class="form-group">
-            <input type="text" class="form-control" placeholder="{{$t('login.enter_email')}}"
-                   v-model="credentials.username">
-        </div>
-        <div class="form-group">
-            <input type="password" class="form-control" placeholder="{{$t('login.enter_password')}}"
-                   v-model="credentials.password">
-        </div>
-        <button class="btn btn-primary" @click="submit()">{{$t('login.lets_go')}}</button>
-    </div>
-</template>
-<script>
-    import auth from '../../services/auth'
-    export default {
-        data: function () {
-            return {
-                credentials: {
-                    username: '',
-                    password: ''
-                },
-                error: ''
-            }
-        },
-        methods: {
-            submit() {
-                var credentials = {
-                    username: this.credentials.username,
-                    password: this.credentials.password
-                };
-                auth.login(this, credentials, '/entries')
-            }
-        }
-    }
-</script>

app/components/auth/register.vue

@@ -1,44 +0,0 @@
-<!--<style>
-    #register .form-control {
-        background-color: #31353A;
-        color: #8F9394;
-        border: 1px solid #31353A;
-    }
-</style>-->
-<template>
-    <div id="register" class="p-y-2">
-        <h2>{{$t('login.register')}}</h2>
-        <div class="form-group m-t-2">
-            <input type="text" class="form-control" placeholder="{{$t('login.enter_email')}}"
-                   v-model="credentials.username">
-        </div>
-        <div class="form-group">
-            <input type="password" class="form-control" placeholder="{{$t('login.enter_password')}}"
-                   v-model="credentials.password">
-        </div>
-        <button class="btn btn-primary" @click="submit()">{{$t('login.create_account')}}</button>
-    </div>
-</template>
-<script>
-    import auth from '../../services/auth'
-    export default {
-        data: function () {
-            return {
-                credentials: {
-                    username: '',
-                    password: ''
-                },
-                error: ''
-            }
-        },
-        methods: {
-            submit() {
-                var credentials = {
-                    username: this.credentials.username,
-                    password: this.credentials.password
-                };
-
-            }
-        }
-    }
-</script>

app/components/bootstrap-hr.vue

@@ -1,15 +0,0 @@
-<style>
-    .bootstrap-hr {
-        margin-top: 1em;
-        margin-bottom: 3em;
-        border: 0 none -moz-use-text-color;
-        border-top: 1px solid #434857;
-    }
-</style>
-<template>
-    <div class="container">
-        <div class="col-xs-6 col-xs-offset-3">
-            <hr class="bootstrap-hr">
-        </div>
-    </div>
-</template>

app/components/entries.vue → app/components/dashboard.vue

@@ -1,5 +1,7 @@
 <template>
-    entries
+    <div class="container">
+        entries
+    </div>
 </template>
 
 <script>

app/components/header.vue

@@ -0,0 +1,123 @@
+<style>
+    .header {
+        background-color: #D8E4EA;
+        height: 86px;
+    }
+
+    .header {
+        color: #252830;
+    }
+
+    .navbar {
+        padding: 1.5rem 0;
+    }
+</style>
+<template>
+    <div class="collapse" id="SignInCollapseNavbar">
+        <div class="bg-inverse p-a-1">
+            <div class="container">
+                <div class="col-lg-12">
+                    <div class="alert alert-danger" v-if="error">
+                        <p>{{{$t('header.credentials_invalids')}}}</p>
+                    </div>
+                    <form class="form-inline pull-md-right">
+                        <div class="form-group form">
+                            <label class="sr-only" for="email">{{$t('header.Email')}}</label>
+                            <input type="email" class="form-control form-control-sm" id="email"
+                                   placeholder="{{$t('header.Email')}}"
+                                   v-model="credentials.email">
+                        </div>
+                        <div class="form-group">
+                            <label class="sr-only" for="password">{{$t('header.Password')}}</label>
+                            <input type="password" class="form-control form-control-sm" id="password"
+                                   placeholder="{{$t('header.Password')}}"
+                                   v-model="credentials.password">
+                        </div>
+                        <div class="form-group row">
+                            <div class="col-lg-12">
+                                <button type="submit" class="btn btn-primary btn-sm btn-block" @click="signin()">
+                                    {{$t('header.Sign_in')}}
+                                </button>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <div class="col-lg-12">
+                                <button type="submit" class="btn btn-primary-outline btn-sm btn-block"
+                                        @click="register()">
+                                    {{$t('header.Register')}}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="header">
+        <nav class="navbar">
+            <div class="container">
+                <ul class="nav navbar-nav">
+                    <li class="nav-item">
+                        <a class="" href="#">
+                            <img src="../assets/images/logo_text.png" alt="logo">
+                        </a>
+                    </li>
+                </ul>
+                <ul class="nav navbar-nav pull-xs-right">
+                    <li class="nav-item" v-if="!user.authenticated">
+                        <button class="navbar-toggler" type="button" data-toggle="collapse"
+                                data-target="#SignInCollapseNavbar">
+                            &#9776;
+                        </button>
+                    </li>
+                    <li class="nav-item" v-if="user.authenticated">
+                        <a class="btn btn-primary" @click="logout()">
+                            logout
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    </div>
+</template>
+<script>
+    import auth from '../services/auth'
+    import {router} from '../main'
+
+    export default {
+        data: function () {
+            return {
+                user: auth.user,
+                credentials: {
+                    email: '',
+                    password: ''
+                },
+                error: ''
+            }
+        },
+        methods: {
+            signin() {
+                var credentials = {
+                    email: this.credentials.email,
+                    password: this.credentials.password
+                };
+                auth.login(this, credentials, function(){
+                    $('#SignInCollapseNavbar').collapse('hide');
+                    router.go('/');
+                });
+            },
+            register() {
+                var credentials = {
+                    email: this.credentials.email,
+                    password: this.credentials.password
+                };
+                auth.register(this, credentials)
+            },
+            logout() {
+                auth.logout(function(){
+                    router.go('/presentation/');
+                })
+            }
+        }
+    }
+</script>

app/components/headlines.vue

@@ -1,12 +1,33 @@
 <style>
-    #headlines {
-        padding-top: 2em;
-        padding-bottom: 1em;
+    .headlines {
+        color: #252830;
+        background-color: #D8E4EA;
+        padding: 5em 0 7em;
+    }
+
+    .headlines .title {
+        font-size: 1.5rem;
+    }
+
+    .headlines .subtitle {
+        font-size: 1.3rem;
+    }
+
+    @media (min-width: 550px) {
+        .headlines .title {
+            font-size: 2.5rem;
+        }
     }
 </style>
 <template>
-    <div id="headlines" class="container text-xs-center">
-        <h1 class="blue">{{ $t('headlines.title') }}</h1>
-        <h2 class="hidden-xs-down">{{ $t('headlines.subtitle') }}</h2>
-    </div>
+    <section class="headlines text-xs-center">
+        <div class="container">
+            <div class="col-lg-10 col-lg-offset-1">
+                <h2 class="title text-primary">{{{ $t('header.title') }}}</h2>
+                <h4 class="subtitle hidden-xs-down">
+                    <span class="text-primary"> LessPass</span> {{ $t('header.subtitle') }}
+                </h4>
+            </div>
+        </div>
+    </section>
 </template>

app/components/index.vue

@@ -1,8 +1,5 @@
 <template>
     <lesspass-headlines></lesspass-headlines>
-    <bootstrap-hr class="hidden-xs-down"></bootstrap-hr>
-    <lesspass-jumbotron></lesspass-jumbotron>
-    <bootstrap-hr id="passwordGeneratorHr"></bootstrap-hr>
     <password-generator></password-generator>
     <lesspass-features></lesspass-features>
     <lesspass-faq></lesspass-faq>
@@ -12,11 +9,9 @@
 
 <script>
     import LesspassHeadlines from './headlines.vue';
-    import LesspassJumbotron from './jumbotron.vue';
     import PasswordGenerator from './password-generator.vue';
     import LesspassFeatures from './features.vue';
     import LesspassFaq from './faq.vue';
-    import BootstrapHr from './bootstrap-hr.vue';
     import LesspassFooter from './footer.vue';
 
     export default {
@@ -25,12 +20,10 @@
         },
         components: {
             LesspassHeadlines,
-            LesspassJumbotron,
             PasswordGenerator,
             LesspassFeatures,
             LesspassFaq,
-            LesspassFooter,
-            BootstrapHr
+            LesspassFooter
         }
     }
 </script>

app/components/jumbotron.vue

@@ -1,34 +0,0 @@
-<style>
-    .jumbotron {
-        color: black;
-    }
-</style>
-<template>
-    <div class="container">
-        <div class="jumbotron">
-            <div class="row">
-                <div class="col-lg-8">
-                    <div v-if="$t('lang') == 'en'">
-                        <img src="../assets/images/story-en.png" class="img-fluid" alt="what is lesspass"/>
-                    </div>
-                    <div v-if="$t('lang') == 'fr'">
-                        <img src="../assets/images/story-fr.png" class="img-fluid" alt="qu'est ce que lesspass"/>
-                    </div>
-                    <small>&copy; Nanou</small>
-                </div>
-                <div class="col-lg-4 m-t-1">
-                    <p class="lead">
-                        <a href='https://lesspass.com/'>LessPass</a> {{ $t('jumbotron.what_is_lesspass') }}
-                    </p>
-                    <p class="lead">
-                        <a href='https://lesspass.com/'>LessPass</a> {{ $t('jumbotron.what_is_lesspass2') }}
-                    </p>
-
-                    <p class="text-xs-center">
-                        <a href="#passwordGeneratorHr" class="hidden-xs-down btn btn-primary">{{ $t('jumbotron.use_btn') }}</a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

app/components/login.vue

@@ -1,69 +0,0 @@
-<style>
-
-    .form-signin .form-signin-heading,
-    .form-signin .checkbox {
-        margin-bottom: 10px;
-    }
-
-    .form-signin .checkbox {
-        font-weight: normal;
-    }
-
-    .form-signin .form-control {
-        position: relative;
-        height: auto;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        padding: 10px;
-        font-size: 16px;
-    }
-
-    .form-signin .form-control:focus {
-        z-index: 2;
-    }
-
-    .form-signin input[type="email"] {
-        margin-bottom: -1px;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .form-signin input[type="password"] {
-        margin-bottom: 10px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-</style>
-
-<template>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-4 col-md-offset-1 m-t-3">
-                <form class="form-signin">
-                    <h2 class="form-signin-heading">Please sign in</h2>
-                    <label for="inputEmail" class="sr-only">Email address</label>
-                    <input id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""
-                           type="email">
-                    <label for="inputPassword" class="sr-only">Password</label>
-                    <input id="inputPassword" class="form-control" placeholder="Password" required="" type="password">
-
-                    <button class="btn btn-primary btn-block" type="submit">Log in</button>
-                </form>
-            </div>
-
-            <div class="col-md-4 col-md-offset-2 m-t-3">
-                <form class="form-signin">
-                    <h2 class="form-signin-heading">Sign up for free</h2>
-                    <label for="signUpEmail" class="sr-only">Email address</label>
-                    <input id="signUpEmail" class="form-control" placeholder="Email address" required="" autofocus=""
-                           type="email">
-                    <label for="signUpPassword" class="sr-only">Password</label>
-                    <input id="signUpPassword" class="form-control" placeholder="Password" required="" type="password">
-
-                    <button class="btn btn-primary btn-block" type="submit">Get started</button>
-                </form>
-            </div>
-        </div>
-    </div>
-</template>

app/components/password-generator.vue

@@ -1,34 +1,44 @@
-<!--<style>
-    #passwordGenerator .form-control {
-        background-color: #31353A;
-        color: #8F9394;
-        border: 1px solid #31353A;
-    }
-</style>-->
 <template>
-    <div class="container m-y-3">
-        <form id="passwordGenerator">
+    <div class="container m-t-3">
+        <form>
             <div class="form-group row">
-                <label for="email" class="sr-only form-control-label">{{ $t('passwordgenerator.email') }}</label>
-                <div class="col-sm-3">
-                    <input type="email" class="form-control" id="email"
-                           placeholder="{{ $t('passwordgenerator.email') }}" v-model="email"
+                <div class="col-lg-3 m-b-1">
+                    <label for="pg-email" class="sr-only">
+                        {{ $t('passwordgenerator.email') }}
+                    </label>
+                    <input id="pg-email"
+                           class="form-control"
+                           type="text"
+                           placeholder="{{ $t('passwordgenerator.email') }}"
+                           value="{{email}}"
+                           v-model="email"
                            v-on:blur="updateMasterPassword">
                 </div>
-                <label for="password" class="sr-only form-control-label">{{ $t('passwordgenerator.password') }}</label>
-                <div class="col-sm-3">
-                    <input type="password" class="form-control" id="password"
+                <div class="col-lg-3 m-b-1">
+                    <label for="pg-masterpassword" class="sr-only">
+                        {{ $t('passwordgenerator.password') }}
+                    </label>
+                    <input id="pg-masterpassword"
+                           class="form-control"
+                           type="password"
                            placeholder="{{ $t('passwordgenerator.password') }}"
-                           v-model="password" v-on:blur="updateMasterPassword">
+                           v-model="password"
+                           v-on:blur="updateMasterPassword">
                 </div>
-                <label for="site" class="sr-only form-control-label">{{ $t('passwordgenerator.site') }}</label>
-                <div class="col-sm-3">
-                    <input type="text" class="form-control" id="site"
+                <div class="col-lg-3 m-b-1">
+                    <label for="pg-site" class="sr-only">
+                        {{ $t('passwordgenerator.site') }}
+                    </label>
+                    <input id="pg-site"
+                           class="form-control"
+                           type="text"
                            placeholder="{{ $t('passwordgenerator.site_placeholder') }}"
                            v-model="site">
                 </div>
-                <label for="generatedPassword" class="sr-only form-control-label">Generated Password</label>
-                <div class="col-sm-3">
+                <div class="col-lg-3 m-b-1">
+                    <label for="generatedPassword" class="sr-only">
+                        {{ $t('passwordgenerator.generated_password') }}
+                    </label>
                     <div class="input-group">
                         <input type="text" id="generatedPassword" class="form-control" v-model="generatedPassword">
                         <span class="input-group-btn">
@@ -42,45 +52,78 @@
             </div>
             <div class="form-group row">
                 <div class="col-lg-12">
-                    <div class="checkbox">
-                        <label>
-                            <input type="checkbox" v-model="showAdvancedOptions"> {{
-                            $t('passwordgenerator.advanced_options') }}
-                        </label>
+                    <a data-toggle="collapse" data-parent="#accordion" href="#advancedOptions"
+                       aria-expanded="true" aria-controls="advancedOptions">
+                        {{ $t('passwordgenerator.advanced_options') }}
+                    </a>
+
+                    <div id="advancedOptions" class="panel-collapse collapse" role="tabpanel"
+                         aria-labelledby="advancedOptions">
+                        <div class="row">
+                            <div class="col-lg-3">
+                                <label class="c-input c-checkbox">
+                                    <input type="checkbox" id="lowercase" value="lowercase"
+                                           v-model="passwordInfo.settings" checked>
+                                    <span class="c-indicator"></span>
+                                    {{ $t('passwordgenerator.lowercase_options') }}
+                                </label>
+                            </div>
+                            <div class="col-lg-3">
+                                <label class="c-input c-checkbox">
+                                    <input type="checkbox" id="uppercase" value="uppercase"
+                                           v-model="passwordInfo.settings" checked>
+                                    <span class="c-indicator"></span>
+                                    {{ $t('passwordgenerator.uppercase_options') }}
+                                </label>
+                            </div>
+                            <div class="col-lg-3">
+                                <label class="c-input c-checkbox">
+                                    <input type="checkbox" id="numbers" value="numbers" v-model="passwordInfo.settings"
+                                           checked>
+                                    <span class="c-indicator"></span>
+                                    {{ $t('passwordgenerator.numbers_options') }}
+                                </label>
+                            </div>
+                            <div class="col-lg-3">
+                                <label class="c-input c-checkbox">
+                                    <input type="checkbox" id="symbols" value="symbols" v-model="passwordInfo.settings"
+                                           checked>
+                                    <span class="c-indicator"></span>
+                                    {{ $t('passwordgenerator.symbols_options') }}
+                                </label>
+                            </div>
+                        </div>
+                        <div class="row m-t-1">
+                            <div class="col-lg-2 col-md-3 m-b-1">
+                                <label for="passwordLength" class="sr-only">
+                                    {{ $t('passwordgenerator.length') }}
+                                </label>
+                                <div class="input-group input-group-sm">
+                                    <span class="input-group-addon" id="passwordLengthAddon">
+                                        {{ $t('passwordgenerator.length') }}
+                                    </span>
+                                    <input type="number" class="form-control" id="passwordLength"
+                                           aria-describedby="passwordLengthAddon" v-model="passwordInfo.length"
+                                           value="12" min="6" max="64">
+                                </div>
+                            </div>
+                            <div class="col-lg-2 col-md-3 m-b-1">
+                                <label for="passwordCounter" class="sr-only">
+                                    {{ $t('passwordgenerator.counter') }}
+                                </label>
+                                <div class="input-group input-group-sm">
+                                    <span class="input-group-addon" id="passwordCounterAddon">
+                                        {{ $t('passwordgenerator.counter') }}
+                                    </span>
+                                    <input type="number" class="form-control" id="passwordCounter"
+                                           aria-describedby="passwordCounterAddon" v-model="passwordInfo.counter"
+                                           value="1" min="1" max="100">
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="form-group row" v-if="showAdvancedOptions">
-                <div class="col-lg-12">
-                    <label class="checkbox-inline">
-                        <input type="checkbox" id="lowercase" value="lowercase" v-model="passwordInfo.settings" checked>
-                        {{ $t('passwordgenerator.lowercase_options') }}
-                    </label>
-                    <label class="checkbox-inline">
-                        <input type="checkbox" id="uppercase" value="uppercase" v-model="passwordInfo.settings" checked>
-                        {{ $t('passwordgenerator.uppercase_options') }}
-                    </label>
-                    <label class="checkbox-inline">
-                        <input type="checkbox" id="numbers" value="numbers" v-model="passwordInfo.settings" checked>
-                        {{ $t('passwordgenerator.numbers_options') }}
-                    </label>
-                    <label class="checkbox-inline">
-                        <input type="checkbox" id="symbols" value="symbols" v-model="passwordInfo.settings" checked>
-                        {{ $t('passwordgenerator.symbols_options') }}
-                    </label>
-                </div>
-            </div>
-            <div class="form-group row" v-if="showAdvancedOptions">
-                <label for="passwordLength" class="col-xs-2 col-sm-1 form-control-label">{{
-                    $t('passwordgenerator.length') }}</label>
-                <div class="col-xs-8 col-sm-4">
-                    <input id="passwordLength" type="range" value="12" min="6" max="64" v-model="passwordInfo.length"
-                           class="form-control">
-                </div>
-                <div class="col-xs-2 col-sm-1">
-                    {{ passwordInfo.length }}
-                </div>
-            </div>
         </form>
     </div>
 </template>
@@ -101,7 +144,7 @@
                     length: 12,
                     settings: ["lowercase", "uppercase", "numbers", "symbols"]
                 },
-                showAdvancedOptions: false
+                masterPassword: ''
             }
         },
         methods: {

app/locales/locales.js

@@ -2,7 +2,12 @@ const locales = {
     "en": {
         "lang": "en",
         "header": {
-            "login": "login"
+            "Email":"Email",
+            "Password":"Password",
+            "Sign_in": "Sign_in",
+            "Register": "Register",
+            "title": "Next generation<br>password manager",
+            "subtitle": "replaces all your tools that record your passwords as LastPass, 1Password, Keepass, Excel spreadsheet, post it, etc ..."
         },
         "headlines": {
             "title": "Next generation password manager",
@@ -37,6 +42,8 @@ const locales = {
             "uppercase_options": "UPPERCASE (A-Z)",
             "numbers_options": "numbers (0-9)",
             "symbols_options": "symbols (@&%?)",
+            "counter": "Counter",
+            "generated_password": "Generated password",
             "length": "Length"
         },
         "faq": {
@@ -75,13 +82,19 @@ const locales = {
             "dont_have_an_account": "Don't have an account ?",
             "already_have_an_account": "Already have an account ?",
             "create_account": "Create an account",
-            "credentials_invalids": "The email address or password you entered is not valid. If you don't have an account yet, you can <a href='#/auth/register'>register</a>."
+            "welcome": "Login successful, welcome on LessPass",
+            "credentials_invalids": "The email address or password you entered is not valid."
         }
     },
     "fr": {
         "lang": "fr",
         "header": {
-            "login": "connexion"
+            "Email":"Email",
+            "Password":"Mot de passe",
+            "Sign_in": "Connexion",
+            "Register": "S'enregistrer",
+            "title": "Gestionnaire de mot de passe nouvelle génération",
+            "subtitle": "remplace tous vos outils qui sauvegardent vos mots de passe comme Lastpass, 1password, Keepass, tableur Excel, post it, etc..."
         },
         "headlines": {
             "title": "Gestionnaire de mot de passe nouvelle génération",
@@ -116,6 +129,8 @@ const locales = {
             "uppercase_options": "MAJUSCULES (A-Z)",
             "numbers_options": "nombres (0-9)",
             "symbols_options": "caractères spéciaux (@&%?)",
+            "counter": "Compteur",
+            "generated_password": "Mot de passe généré",
             "length": "Longueur"
         },
         "faq": {
@@ -153,7 +168,8 @@ const locales = {
             "dont_have_an_account": "Vous n'avez pas encore de compte ?",
             "already_have_an_account": "Vous avez déjà un compte ?",
             "create_account": "Créez un compte",
-            "credentials_invalids": "L' adresse e-mail et mot de passe ne sont pas valides. Si vous ne possédez pas encore de compte, vous pouvez vous <a href='#/auth/register'>inscrire</a>."
+            "welcome": "Connexion réussie, bienvenue sur LessPass",
+            "credentials_invalids": "L' adresse e-mail et/ou mot de passe sont invalides"
         }
     }
 };

app/main.js

@@ -6,10 +6,7 @@ import i18n from 'vue-i18n';
 import locales from './locales/locales';
 import App from './app.vue';
 import IndexView from './components/index.vue';
-import AuthView from './components/auth/auth.vue';
-import LoginView from './components/auth/login.vue';
-import RegisterView from './components/auth/register.vue';
-import EntriesView from './components/entries.vue';
+import Dashboard from './components/dashboard.vue';
 import auth from './services/auth';
 Vue.use(Resource);
 Vue.use(Router);
@@ -31,22 +28,11 @@ export var router = new Router();
 
 router.map({
     '/': {
-        component: IndexView
-    },
-    '/entries': {
         auth: true,
-        component: EntriesView
+        component: Dashboard
     },
-    '/auth': {
-        component: AuthView,
-        subRoutes: {
-            '/login': {
-                component: LoginView
-            },
-            '/register': {
-                component: RegisterView
-            }
-        }
+    '/presentation/': {
+        component: IndexView
     }
 });
 
@@ -62,7 +48,7 @@ router.start(App, '#app');
 
 router.beforeEach(function (transition) {
     if (transition.to.auth && !auth.user.authenticated) {
-        transition.redirect('/auth/login')
+        transition.redirect('/presentation/')
     } else {
         transition.next()
     }

app/services/auth.js

@@ -1,36 +1,34 @@
 import {router} from '../main'
+import logging from './logging'
 
 export default {
     user: {
         authenticated: false
     },
 
-    login(context, credentials, redirect) {
+    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 (redirect) {
-                    router.go(redirect)
+                if (callback) {
+                    logging.success(this.$t('login.welcome'));
+                    callback();
                 }
             },
-            function (error) {
-                context.error = true;
+            function () {
+                logging.error(this.$t('login.credentials_invalids'));
             }
         );
     },
 
-    register(context, user, redirect) {
+    register(context, user) {
         var self = this;
         context.$http.post('/api/users/', user).then(
             function (response) {
                 localStorage.setItem('token', response.data.token);
-
-                self.user.authenticated = true;
-                if (redirect) {
-                    router.go(redirect)
-                }
+                router.go('/');
             },
             function (error) {
                 context.error = true;
@@ -38,10 +36,12 @@ export default {
         );
     },
 
-    logout() {
+    logout(callback) {
         localStorage.removeItem('token');
         this.user.authenticated = false;
-        router.go('/')
+        if (callback) {
+            callback();
+        }
     },
 
     checkAuth() {

app/services/logging.js

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

package.json

@@ -30,6 +30,8 @@
     "clipboard": "^1.5.5",
     "font-awesome": "^4.5.0",
     "jquery": "^2.2.0",
+    "tether": "^1.1.1",
+    "toastr": "^2.1.2",
     "vue": "^1.0.15",
     "vue-i18n": "^2.3.3",
     "vue-resource": "^0.7.0",