implement login and register page

app/app.vue

@@ -1,3 +1,9 @@
+<style>
+    body{
+        background-color: #f7f7f7;
+        color: #1a1a1a;
+    }
+</style>
 <template>
     <div id="app">
         <lesspass-header></lesspass-header>

app/header/login.vue

@@ -19,10 +19,12 @@
     <div id="login-bar">
         <div class="container">
             <nav class="nav nav-inline pull-right">
-                <a class="nav-link" v-link="{ path: '/login/' }">
+                <a class="nav-link" v-bind:class="{ 'bg-primary': $route.path=='/login/'}"
+                   v-link="{ path: '/login/' }">
                     <i class="fa fa-lock"></i> {{ $t('login.login') }}
                 </a>
-                <a class="nav-link bg-primary" v-link="{ path: '/register/' }">
+                <a class="nav-link" v-bind:class="{ 'bg-primary': $route.path=='/register/'}"
+                   v-link="{ path: '/register/' }">
                     <i class="fa fa-user-plus"></i> {{ $t('login.register') }}
                 </a>
             </nav>

app/header/navbar.vue

@@ -1,7 +1,7 @@
 <style>
     #navbar {
         background-color: #f7f7f7;
-        color: #666666;
+        color: #1a1a1a;
         padding-top: 1em;
     }
 

app/lesspass/login.vue

@@ -1,7 +1,54 @@
 <template>
     <div id="login">
         <div class="container">
-            login
+            <div class="row">
+                <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
+                    <form>
+                        <fieldset class="form-group">
+                            <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">
+                        </fieldset>
+                        <fieldset 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">
+                        </fieldset>
+                        <button type="submit" class="btn btn-primary btn-sm btn-block" @click="signin()">
+                            {{$t('header.Sign_in')}}
+                        </button>
+                    </form>
+                </div>
+            </div>
         </div>
     </div>
-</template>
+</template>
+<script>
+    import auth from '../services/auth.js';
+    import router from '../routes.js';
+
+    export default {
+        data: function () {
+            return {
+                user: auth.user,
+                credentials: {
+                    email: '',
+                    password: ''
+                }
+            }
+        },
+        methods: {
+            signin() {
+                var credentials = {
+                    email: this.credentials.email,
+                    password: this.credentials.password
+                };
+                auth.login(this, credentials, function () {
+                    router.go('/');
+                });
+            }
+        }
+    }
+</script>

app/lesspass/register.vue

@@ -1,7 +1,34 @@
 <template>
-    <div id="register">
+    <div id="login">
         <div class="container">
-            register
+            {{$t('register.beta')}}
         </div>
     </div>
-</template>
+</template>
+<script>
+    import auth from '../services/auth.js';
+    import router from '../routes.js';
+
+    export default {
+        data: function () {
+            return {
+                user: auth.user,
+                credentials: {
+                    email: '',
+                    password: ''
+                }
+            }
+        },
+        methods: {
+            register() {
+                var credentials = {
+                    email: this.credentials.email,
+                    password: this.credentials.password
+                };
+                auth.register(this, credentials, function () {
+                    router.go('/login/');
+                })
+            }
+        }
+    }
+</script>

app/main.js

@@ -1,6 +1,10 @@
 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 Resource from 'vue-resource';
+Vue.use(Resource);
+
 import './locales';
 import './routes'

app/services/auth.js

@@ -11,8 +11,8 @@ module.exports = {
             function (response) {
                 localStorage.setItem('token', response.data.token);
                 self.user.authenticated = true;
+                logging.success(this.$t('login.welcome'));
                 if (callback) {
-                    logging.success(this.$t('login.welcome'));
                     callback();
                 }
             },
@@ -22,11 +22,12 @@ module.exports = {
         );
     },
 
-    register(context, user) {
-        var self = this;
+    register(context, user, callback) {
         context.$http.post('/api/users/', user).then(
             function (response) {
-                logging.warning(this.$t('register.beta'));
+                if (callback) {
+                    callback();
+                }
             },
             function (error) {
                 logging.warning(this.$t('register.beta'));

assets/images/logo-white.svg

@@ -15,7 +15,7 @@
    width="400"
    height="90"
    sodipodi:docname="logo-white.svg"
-   inkscape:export-filename="/home/guillaume/workspace/lesspass/lesspass/app/1-header/logo-green.png"
+   inkscape:export-filename="/home/guillaume/workspace/lesspass/lesspass/app/1-header/logo.png"
    inkscape:export-xdpi="80"
    inkscape:export-ydpi="80">
   <metadata
@@ -152,7 +152,7 @@
      inkscape:snap-bbox="false"
      showborder="true" />
   <path
-     style="opacity:0.90000000000000002;fill:#167fd9;fill-opacity:0.94117647;stroke:none;filter:url(#filter3097)"
+     style="opacity:0.90000000000000002;fill:#0275d8;fill-opacity:0.94117647;stroke:none;filter:url(#filter3097)"
      d="m 101.39259,-192.98373 c -5.751278,0.27568 -11.432799,2.6203 -15.843752,7.03125 l -50.96875,50.96874 c -9.410033,9.41003 -9.410033,24.55872 0,33.96875 l 50.96875,50.96875 c 9.410033,9.41003 24.558722,9.41003 33.968752,0 l 50.96875,-50.96875 c 9.41003,-9.41003 9.41003,-24.55872 0,-33.96875 l -50.96875,-50.96874 c -4.99908,-4.99908 -11.60689,-7.34369 -18.125,-7.03125 z m 0,30 c 0.38173,-0.0196 0.76987,0 1.15625,0 12.364,0 22.46875,10.13598 22.46875,22.49999 0,10.2795 -7.00683,18.97639 -16.46875,21.625 l 0,20.625 6.21875,0 c 0.126,0 0.21875,0.0928 0.21875,0.21875 l 0,10.25 c 0,0.1259 -0.0928,0.21875 -0.21875,0.21875 l -6.21875,0 0,3.875 6.21875,0 c 0.12098,-0.035 0.21875,0.0928 0.21875,0.21875 l 0,10.21875 c 0,0.1259 -0.0928,0.25 -0.21875,0.25 l -6.21875,0 -7.8125,0 -4.218752,0 0,-45.875 c -9.46194,-2.64861 -16.46875,-11.34551 -16.46875,-21.625 0,-11.97763 9.510121,-21.89377 21.343752,-22.49999 z m 1.15625,8.8125 c -7.596242,0 -13.656252,6.09122 -13.656252,13.68749 0,7.59632 6.06001,13.625 13.656252,13.625 7.59627,0 13.625,-6.02868 13.625,-13.625 0,-7.59627 -6.02873,-13.68749 -13.625,-13.68749 z"
      id="rect3044"
      inkscape:connector-curvature="0"