Fixed gravatar

+ Login improvements

frontend/src/App.vue

@@ -8,8 +8,9 @@
         <router-link to="/publishers" class="item">Publishers</router-link>
         <div class="right menu">
           <img v-bind:src="gravatar" class="menu-avatar"/>
+          <div class="ui item"> {{ user.infos.username }}</div>
           <a class="ui item" @click="logout()">
-            Logout
+            <icon name="sign-out"></icon>
           </a>
         </div>
       </div>
@@ -38,12 +39,20 @@ export default {
       router.push({ name: 'login' })
     }
 
-    let user = auth.getUserInfos()
+    // Set the users avatar
-    this.gravatar = 'https://www.gravatar.com/avatar/' + user.avatar + '?s=40'
+    this.setAvatar()
+  },
+  watch: {
+    // call again the method if the route changes
+    '$route': 'setAvatar'
   },
   methods: {
     logout () {
       auth.logout()
+    },
+    setAvatar () {
+      auth.getUserInfos()
+      this.gravatar = 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=40&d=mm'
     }
   }
 }

frontend/src/auth/index.js

@@ -21,6 +21,7 @@ export default {
 
         // Tell others the user is autheticated
         this.user.authenticated = true
+        this.getUserInfos()
 
         // Hide the loader
         context.loading = false
@@ -47,9 +48,10 @@ export default {
 
   checkAuth () {
     let jwt = localStorage.getItem('token')
+    this.getUserInfos()
     this.user.authenticated = false
     if (jwt) {
-      let infos = this.getUserInfos()
+      let infos = this.user.infos
       let ts = Math.round((new Date()).getTime() / 1000)
       if (infos.exp >= ts) {
         this.user.authenticated = true
@@ -60,6 +62,7 @@ export default {
   getUserInfos () {
     let jwt = localStorage.getItem('token')
     if (jwt) {
+      this.user.infos = this.parseJwt(localStorage.getItem('token'))
       return this.parseJwt(localStorage.getItem('token'))
     } else {
       return {}

frontend/src/components/Login.vue

@@ -11,13 +11,13 @@
           <div class="field">
             <div class="ui left icon input">
               <i class="user icon"></i>
-              <input type="text" name="username" placeholder="Username" v-model="credentials.username">
+              <input v-focus type="text" name="username" placeholder="Username" v-model="credentials.username">
             </div>
           </div>
           <div class="field">
             <div class="ui left icon input">
               <i class="lock icon"></i>
-              <input type="password" name="password" placeholder="Password" v-model="credentials.password">
+              <input type="password" name="password" placeholder="Password" v-model="credentials.password" @keyup.enter="submit">
             </div>
           </div>
           <div class="ui fluid large blue submit button" @click="submit()">Login</div>
@@ -78,6 +78,7 @@
 <style scoped>
   body {
     background-color: #efefef;
+    margin-top: -1em;
   }
   body > .grid {
     height: 100%;

frontend/src/main.js

@@ -42,14 +42,14 @@ Vue.component('modal', Modal)
 // Paginate setup
 Vue.use(VuePaginate)
 
-/*
+// Globally set focus
-webpack.ProvidePlugin({
+Vue.directive('focus', {
-  // jquery
+  // When the bound element is inserted into the DOM...
-  $: 'jquery',
+  inserted: function (el) {
-  jQuery: 'jquery',
+    // Focus the element
-  // semantic-ui
+    el.focus()
-  semantic: 'semantic-ui-css'
+  }
-}) */
+})
 
 /* eslint-disable no-new */
 new Vue({