Use the same method everywhere to calculate the avatar url

src/App.vue

@@ -16,7 +16,7 @@
 						<a @click="refreshApp()" class="button is-primary noshadow">Update Now</a>
 					</div>
 					<div class="user">
-						<img :src="gravatar()" class="avatar" alt=""/>
+						<img :src="user.infos.getAvatarUrl()" class="avatar" alt=""/>
 						<div class="dropdown is-right is-active">
 							<div class="dropdown-trigger">
 								<button class="button noshadow" @click="userMenuActive = !userMenuActive">
@@ -274,9 +274,6 @@
 			logout() {
 				auth.logout()
 			},
-			gravatar() {
-				return 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=50&d=mp'
-			},
 			loadNamespaces() {
 				this.namespaceService = new NamespaceService()
 				this.namespaceService.getAll()

src/auth/index.js

@@ -1,5 +1,6 @@
 import {HTTP} from '../http-common'
 import router from '../router'
+import UserModel from '../models/user'
 // const API_URL = 'http://localhost:8082/api/v1/'
 // const LOGIN_URL = 'http://localhost:8082/login'
 
@@ -106,9 +107,8 @@ export default {
 		this.getUserInfos()
 		this.user.authenticated = false
 		if (jwt) {
-			let infos = this.user.infos
 			let ts = Math.round((new Date()).getTime() / 1000)
-			if (infos.exp >= ts) {
+			if (this.user.infos.exp >= ts) {
 				this.user.authenticated = true
 			}
 		}
@@ -117,8 +117,8 @@ export default {
 	getUserInfos() {
 		let jwt = localStorage.getItem('token')
 		if (jwt) {
-			this.user.infos = this.parseJwt(localStorage.getItem('token'))
+			this.user.infos = new UserModel(this.parseJwt(localStorage.getItem('token')))
-			return this.parseJwt(localStorage.getItem('token'))
+			return this.user.infos
 		} else {
 			return {}
 		}

src/components/global/user.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="user">
-		<img :src="gravatar()" class="avatar" alt="" v-tooltip="user.username"/>
+		<img :src="user.getAvatarUrl(avatarSize)" class="avatar" alt="" v-tooltip="user.username"/>
 		<span v-if="showUsername" class="username">{{ user.username }}</span>
 	</div>
 </template>
@@ -24,11 +24,6 @@
 				default: 50,
 			}
 		},
-		methods: {
-			gravatar() {
-				return 'https://www.gravatar.com/avatar/' + this.user.avatarUrl + '?s=' + this.avatarSize
-			}
-		}
 	}
 </script>
 

src/components/tasks/ShowListTasks.vue

@@ -76,7 +76,7 @@
 								<span class="tag" v-for="label in l.labels" :style="{'background': label.hex_color, 'color': label.textColor}" :key="label.id">
 									<span>{{ label.title }}</span>
 								</span>
-								<img :src="gravatar(a)" :alt="a.username" v-for="(a, i) in l.assignees" class="avatar" :key="l.id + 'assignee' + a.id + i"/>
+								<img :src="a.getAvatarUrl(27)" :alt="a.username" v-for="(a, i) in l.assignees" class="avatar" :key="l.id + 'assignee' + a.id + i"/>
 								<i v-if="l.dueDate > 0" :class="{'overdue': l.dueDate <= new Date() && !l.done}" v-tooltip="formatDate(l.dueDate)"> - Due {{formatDateSince(l.dueDate)}}</i>
 								<priority-label :priority="l.priority"/>
 							</router-link>
@@ -271,9 +271,6 @@
 				this.taskEditTask = theTask
 				this.isTaskEdit = true
 			},
-			gravatar(user) {
-				return 'https://www.gravatar.com/avatar/' + user.avatarUrl + '?s=27'
-			},
 			getTaskByID(id) {
 				for (const t in this.tasks) {
 					if (this.tasks[t].id === parseInt(id)) {

src/models/user.js

@@ -17,4 +17,8 @@ export default class UserModel extends AbstractModel {
 			updated: null,
 		}
 	}
+
+	getAvatarUrl(size = 50) {
+		return `https://www.gravatar.com/avatar/${this.avatarUrl}?s=${size}&d=mp`
+	}
 }