Make sure to use the user name field everywhere

src/components/misc/user.vue

@@ -6,8 +6,8 @@
 			:width="avatarSize"
 			alt=""
 			class="avatar"
-			v-tooltip="user.username"/>
-		<span class="username" v-if="showUsername">{{ user.username }}</span>
+			v-tooltip="user.getDisplayName()"/>
+		<span class="username" v-if="showUsername">{{ user.getDisplayName() }}</span>
 	</div>
 </template>
 

src/components/sharing/linkSharing.vue

@@ -52,7 +52,7 @@
 							</div>
 						</td>
 						<td>
-							{{ s.sharedBy.username }}
+							{{ s.sharedBy.getDisplayName() }}
 						</td>
 						<td class="type">
 							<template v-if="s.right === rights.ADMIN">

src/components/sharing/userTeam.vue

@@ -46,7 +46,7 @@
 				<tbody>
 				<tr :key="s.id" v-for="s in sharables">
 					<template v-if="shareType === 'user'">
-						<td>{{ s.username }}</td>
+						<td>{{ s.getDisplayName() }}</td>
 						<td>
 							<template v-if="s.id === userInfo.id">
 								<b class="is-success">You</b>

src/components/tasks/edit-task.vue

@@ -107,7 +107,7 @@
 			<label class="label" for="">Assignees</label>
 			<ul class="assingees">
 				<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
-					{{ a.username }}
+					{{ a.getDisplayName() }}
 					<a @click="deleteAssigneeByIndex(index)">
 						<icon icon="times"/>
 					</a>

src/components/tasks/partials/comments.vue

@@ -17,7 +17,7 @@
 				<div class="media-content">
 					<div class="comment-info">
 						<img :src="c.author.getAvatarUrl(20)" alt="" class="image is-avatar" height="20" width="20"/>
-						<strong>{{ c.author.username }}</strong>&nbsp;
+						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
 						<span v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</span>
 						<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
 							· edited {{ formatDateSince(c.updated) }}

src/models/user.js

@@ -21,4 +21,12 @@ export default class UserModel extends AbstractModel {
 	getAvatarUrl(size = 50) {
 		return `${window.API_URL}/${this.username}/avatar?size=${size}`
 	}
+
+	getDisplayName() {
+		if (this.name !== '') {
+			return this.name
+		}
+
+		return this.username
+	}
 }

src/views/tasks/TaskDetailView.vue

@@ -346,7 +346,7 @@
 
 					<!-- Created / Updated [by] -->
 					<p class="created">
-						Created <span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span> by {{ task.createdBy.username }}
+						Created <span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span> by {{ task.createdBy.getDisplayName() }}
 						<template v-if="+new Date(task.created) !== +new Date(task.updated)">
 							<br/>
 							<!-- Computed properties to show the actual date every time it gets updated -->

src/views/teams/EditTeam.vue

@@ -106,7 +106,7 @@
 				<table class="table is-striped is-hoverable is-fullwidth">
 					<tbody>
 					<tr :key="m.id" v-for="m in team.members">
-						<td>{{ m.username }}</td>
+						<td>{{ m.getDisplayName() }}</td>
 						<td>
 							<template v-if="m.id === userInfo.id">
 								<b class="is-success">You</b>