From ed02a70522f5df5bf1104bbda3e2c79ae95d6cfa Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 12:41:57 +0100
Subject: [PATCH 1/8] Add openid auth component

---
 src/components/home/contentNoAuth.vue |  3 ++-
 src/router/index.js                   |  6 ++++++
 src/views/user/OpenIdAuth.vue         | 11 +++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/views/user/OpenIdAuth.vue

diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index e9490002a..05a8dae21 100644
--- a/src/components/home/contentNoAuth.vue
+++ b/src/components/home/contentNoAuth.vue
@@ -32,7 +32,8 @@ export default {
 				this.$route.name !== 'user.password-reset.request' &&
 				this.$route.name !== 'user.password-reset.reset' &&
 				this.$route.name !== 'user.register' &&
-				this.$route.name !== 'link-share.auth'
+				this.$route.name !== 'link-share.auth' &&
+				this.$route.name !== 'openid.auth'
 			) {
 				this.$router.push({name: 'user.login'})
 			}
diff --git a/src/router/index.js b/src/router/index.js
index 163e29362..981bd97f8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import ErrorComponent from '../components/misc/error'
 // User Handling
 import LoginComponent from '../views/user/Login'
 import RegisterComponent from '../views/user/Register'
+import OpenIdAuth from '@/views/user/OpenIdAuth'
 // Tasks
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
@@ -267,5 +268,10 @@ export default new Router({
 			name: 'filters.create',
 			component: CreateSavedFilter,
 		},
+		{
+			path: '/auth/openid/:provider',
+			name: 'openid.auth',
+			component: OpenIdAuth,
+		},
 	],
 })
\ No newline at end of file
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
new file mode 100644
index 000000000..96967202c
--- /dev/null
+++ b/src/views/user/OpenIdAuth.vue
@@ -0,0 +1,11 @@
+<template>
+	<div>
+		{{ $route.params.provider }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Auth',
+}
+</script>
-- 
2.40.1


From ffed665bbba95a10505915eef4347d77d0aea965 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 13:24:50 +0100
Subject: [PATCH 2/8] Add authentication through openid

---
 src/store/modules/auth.js     | 34 ++++++++++++++++++++++++
 src/views/user/OpenIdAuth.vue | 50 ++++++++++++++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index a33d24ed1..befe20329 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -98,6 +98,40 @@ export default {
 					ctx.commit(LOADING, false, {root: true})
 				})
 		},
+		openIdAuth(ctx, {provider, code}) {
+			const HTTP = HTTPFactory()
+			ctx.commit(LOADING, true, {root: true})
+
+			const data = {
+				code: code,
+			}
+
+			// Delete an eventually preexisting old token
+			localStorage.removeItem('token')
+			return HTTP.post(`/auth/openid/${provider}/callback`, data)
+				.then(response => {
+					// Save the token to local storage for later use
+					localStorage.setItem('token', response.data.token)
+
+					// Tell others the user is autheticated
+					ctx.commit('isLinkShareAuth', false)
+					ctx.dispatch('checkAuth')
+					return Promise.resolve()
+				})
+				.catch(e => {
+					if (e.response) {
+						let errorMsg = e.response.data.message
+						if (e.response.status === 401) {
+							errorMsg = 'Wrong username or password.'
+						}
+						ctx.commit(ERROR_MESSAGE, errorMsg, {root: true})
+					}
+					return Promise.reject()
+				})
+				.finally(() => {
+					ctx.commit(LOADING, false, {root: true})
+				})
+		},
 
 		linkShareAuth(ctx, hash) {
 			const HTTP = HTTPFactory()
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
index 96967202c..4c359cd57 100644
--- a/src/views/user/OpenIdAuth.vue
+++ b/src/views/user/OpenIdAuth.vue
@@ -1,11 +1,59 @@
 <template>
 	<div>
-		{{ $route.params.provider }}
+		<div class="notification is-danger" v-if="errorMessage">
+			{{ errorMessage }}
+		</div>
+		<div class="notification is-info" v-if="loading">
+			Authenticating...
+		</div>
 	</div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
+
+import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+
 export default {
 	name: 'Auth',
+	computed: mapState({
+		errorMessage: ERROR_MESSAGE,
+		loading: LOADING,
+	}),
+	mounted() {
+		this.authenticateWithCode()
+	},
+	methods: {
+		authenticateWithCode() {
+			// This component gets mounted twice: The first time when the actual auth request hits the frontend,
+			// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
+			// but instead the "content-auth" component is used. Because this component is just a route and thus
+			// gets mounted as part of a <router-view/> which both the content-auth and content-no-auth components have,
+			// this re-mounts the component, even if the user is already authenticated.
+			// To make sure we only try to authenticate the user once, we set this "authenticating" lock in localStorage
+			// which ensures only one auth request is done at a time. We don't simply check if the user is already
+			// authenticated to not prevent the whole authentication if some user is already logged in.
+			if (localStorage.getItem('authenticating')) {
+				return
+			}
+			localStorage.setItem('authenticating', true)
+
+			this.$store.commit(ERROR_MESSAGE, '')
+
+			this.$store.dispatch('auth/openIdAuth', {
+				provider: this.$route.params.provider,
+				code: this.$route.query.code,
+			})
+				.then(() => {
+					this.$router.push({name: 'home'})
+				})
+				.catch(() => {
+					// Handled through global state
+				})
+				.finally(() => {
+					localStorage.removeItem('authenticating')
+				})
+		},
+	},
 }
 </script>
-- 
2.40.1


From 769a18c29df2434b5810842811334cc28730467e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 14:56:14 +0100
Subject: [PATCH 3/8] Parse auth config from /info

---
 src/store/modules/config.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index c9b65131f..aec9feb95 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,5 +1,6 @@
 import {CONFIG} from '../mutation-types'
 import {HTTPFactory} from '@/http-common'
+import {objectToCamelCase} from '@/helpers/case'
 
 export default {
 	namespaced: true,
@@ -20,6 +21,16 @@ export default {
 			privacyPolicyUrl: '',
 		},
 		caldavEnabled: false,
+		auth: {
+			local: {
+				enabled: false,
+			},
+			openidConnect: {
+				enabled: false,
+				redirectUrl: '',
+				providers: [],
+			},
+		},
 	}),
 	mutations: {
 		[CONFIG](state, config) {
@@ -36,6 +47,7 @@ export default {
 			state.legal.imprintUrl = config.legal.imprint_url
 			state.legal.privacyPolicyUrl = config.legal.privacy_policy_url
 			state.caldavEnabled = config.caldav_enabled
+			state.auth = objectToCamelCase(config.auth)
 		},
 	},
 	actions: {
-- 
2.40.1


From a3541ac1e9fb6d8318cc4b51dc2bb25ebc17c1c3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 15:20:27 +0100
Subject: [PATCH 4/8] Add showing openid providers on login

---
 src/views/user/Login.vue | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 7b65fd7f5..49ecf4d18 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -54,15 +54,16 @@
 
 				<div class="field is-grouped login-buttons">
 					<div class="control is-expanded">
-						<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">Login
+						<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
+							Login
 						</button>
-						<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">Register
+						<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">
+							Register
 						</router-link>
 					</div>
 					<div class="control">
-						<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">Reset
-							your
-							password
+						<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
+							Reset your password
 						</router-link>
 					</div>
 				</div>
@@ -70,6 +71,13 @@
 					{{ errorMessage }}
 				</div>
 			</form>
+
+			<div v-if="openidConnect.enabled && openidConnect.providers.length > 0" class="mt-4">
+				<a @click="redirectToProvider(p)" v-for="(p, k) in openidConnect.providers" :key="k" class="button is-fullwidth">
+					Log in with {{ p.name }}
+				</a>
+			</div>
+
 			<legal/>
 		</div>
 	</div>
@@ -128,6 +136,8 @@ export default {
 		errorMessage: ERROR_MESSAGE,
 		needsTotpPasscode: state => state.auth.needsTotpPasscode,
 		authenticated: state => state.auth.authenticated,
+		localAuthEnabled: state => state.config.auth.enabled,
+		openidConnect: state => state.config.auth.openidConnect,
 	}),
 	methods: {
 		submit() {
@@ -151,6 +161,12 @@ export default {
 				.catch(() => {
 				})
 		},
+		redirectToProvider(provider) {
+			const state = Math.random().toString(36).substring(2, 24)
+			localStorage.setItem('state', state)
+
+			window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${this.openidConnect.redirectUrl}${provider.key}&response_type=code&scope=&state=${state}`
+		},
 	},
 }
 </script>
-- 
2.40.1


From ab0c30013b65996e95b9e33b514efd83d9a96b62 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 15:31:13 +0100
Subject: [PATCH 5/8] Verify auth state before authenticating

---
 src/views/user/Login.vue      | 4 ++--
 src/views/user/OpenIdAuth.vue | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 49ecf4d18..98cc03a6f 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -6,7 +6,7 @@
 				You successfully confirmed your email! You can log in now.
 			</div>
 			<api-config/>
-			<form @submit.prevent="submit" id="loginform">
+			<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
 				<div class="field">
 					<label class="label" for="username">Username</label>
 					<div class="control">
@@ -136,7 +136,7 @@ export default {
 		errorMessage: ERROR_MESSAGE,
 		needsTotpPasscode: state => state.auth.needsTotpPasscode,
 		authenticated: state => state.auth.authenticated,
-		localAuthEnabled: state => state.config.auth.enabled,
+		localAuthEnabled: state => state.config.auth.local.enabled,
 		openidConnect: state => state.config.auth.openidConnect,
 	}),
 	methods: {
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
index 4c359cd57..ebab542d4 100644
--- a/src/views/user/OpenIdAuth.vue
+++ b/src/views/user/OpenIdAuth.vue
@@ -38,6 +38,13 @@ export default {
 			}
 			localStorage.setItem('authenticating', true)
 
+			const state = localStorage.getItem('state')
+			if(typeof this.$route.query.state === 'undefined' || this.$route.query.state !== state) {
+				localStorage.removeItem('authenticating')
+				this.$store.commit(ERROR_MESSAGE, 'State does not match, refusing to continue!')
+				return
+			}
+
 			this.$store.commit(ERROR_MESSAGE, '')
 
 			this.$store.dispatch('auth/openIdAuth', {
-- 
2.40.1


From 2429ba4e4ab077350c625056733fa5b69fd1af7f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 15:41:12 +0100
Subject: [PATCH 6/8] Fix setting auth config from api in state

---
 src/store/modules/config.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index aec9feb95..1c0b5b34e 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 import {CONFIG} from '../mutation-types'
 import {HTTPFactory} from '@/http-common'
 import {objectToCamelCase} from '@/helpers/case'
@@ -23,7 +25,7 @@ export default {
 		caldavEnabled: false,
 		auth: {
 			local: {
-				enabled: false,
+				enabled: true,
 			},
 			openidConnect: {
 				enabled: false,
@@ -47,7 +49,11 @@ export default {
 			state.legal.imprintUrl = config.legal.imprint_url
 			state.legal.privacyPolicyUrl = config.legal.privacy_policy_url
 			state.caldavEnabled = config.caldav_enabled
-			state.auth = objectToCamelCase(config.auth)
+			const auth = objectToCamelCase(config.auth)
+			state.auth.local.enabled = auth.local.enabled
+			state.auth.openidConnect.enabled = auth.openidConnect.enabled
+			state.auth.openidConnect.redirectUrl = auth.openidConnect.redirectUrl
+			Vue.set(state.auth.openidConnect, 'providers', auth.openidConnect.providers)
 		},
 	},
 	actions: {
-- 
2.40.1


From 274a5dd75b250ea1d64ec3a50064da6e32b697b0 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 22:06:13 +0100
Subject: [PATCH 7/8] Add showing and modifying user name

---
 src/components/home/topNavigation.vue |  2 +-
 src/models/user.js                    |  1 +
 src/models/userName.js                | 10 ++++++
 src/services/userName.js              | 10 ++++++
 src/store/modules/auth.js             |  3 ++
 src/views/Home.vue                    |  2 +-
 src/views/user/Settings.vue           | 50 +++++++++++++++++++++++++++
 7 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/models/userName.js
 create mode 100644 src/services/userName.js

diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 7660aca4d..bb8d54950 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -45,7 +45,7 @@
 				<div class="dropdown is-right is-active">
 					<div class="dropdown-trigger">
 						<button @click.stop="userMenuActive = !userMenuActive" class="button noshadow">
-							<span class="username">{{ userInfo.username }}</span>
+							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">
 									<icon icon="chevron-down"/>
 								</span>
diff --git a/src/models/user.js b/src/models/user.js
index aff002f18..c8f593f31 100644
--- a/src/models/user.js
+++ b/src/models/user.js
@@ -12,6 +12,7 @@ export default class UserModel extends AbstractModel {
 			id: 0,
 			email: '',
 			username: '',
+			name: '',
 			created: null,
 			updated: null,
 		}
diff --git a/src/models/userName.js b/src/models/userName.js
new file mode 100644
index 000000000..1e1cc5d4e
--- /dev/null
+++ b/src/models/userName.js
@@ -0,0 +1,10 @@
+
+import AbstractModel from './abstractModel'
+
+export default class UserNameModel extends AbstractModel {
+	defaults() {
+		return {
+			name: '',
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/services/userName.js b/src/services/userName.js
new file mode 100644
index 000000000..83a09cd72
--- /dev/null
+++ b/src/services/userName.js
@@ -0,0 +1,10 @@
+
+import AbstractService from './abstractService'
+
+export default class UserNameService extends AbstractService {
+	constructor() {
+		super({
+			update: '/user/settings/name',
+		})
+	}
+}
\ No newline at end of file
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index befe20329..d6f8a4401 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -16,6 +16,9 @@ export default {
 			state.info = info
 			state.avatarUrl = info.getAvatarUrl()
 		},
+		setUserName(state, name) {
+			state.info.name = name
+		},
 		authenticated(state, authenticated) {
 			state.authenticated = authenticated
 		},
diff --git a/src/views/Home.vue b/src/views/Home.vue
index dc24f637a..7a5647277 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="content has-text-centered">
-		<h2>Hi {{ userInfo.username }}!</h2>
+		<h2>Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!</h2>
 		<template v-if="!hasTasks">
 			<p>Click on a list or namespace on the left to get started.</p>
 			<router-link
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 48045c3ae..a67e680af 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -106,6 +106,38 @@
 			</div>
 		</div>
 
+		<!-- Name -->
+		<div class="card">
+			<header class="card-header">
+				<p class="card-header-title">
+					Update your name
+				</p>
+			</header>
+			<div class="card-content">
+				<div class="content">
+						<div class="field">
+							<label class="label" for="newEmail">Name</label>
+							<div class="control">
+								<input
+									@keyup.enter="updateName"
+									class="input"
+									id="newEmail"
+									placeholder="The new name"
+									type="text"
+									v-model="name"/>
+							</div>
+						</div>
+
+					<div class="bigbuttons">
+						<button :class="{ 'is-loading': userNameService.loading}" @click="updateName()"
+								class="button is-primary is-fullwidth">
+							Save
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<!-- Avatar -->
 		<avatar-settings/>
 
@@ -234,6 +266,8 @@ import EmailUpdateService from '../../services/emailUpdate'
 import EmailUpdateModel from '../../models/emailUpdate'
 import TotpModel from '../../models/totp'
 import TotpService from '../../services/totp'
+import UserNameService from '../../services/userName'
+import UserNameModel from '../../models/userName'
 
 import {mapState} from 'vuex'
 
@@ -260,6 +294,9 @@ export default {
 			totpDisablePassword: '',
 
 			caldavUrl: '',
+
+			name: '',
+			userNameService: UserNameService,
 		}
 	},
 	components: {
@@ -275,6 +312,9 @@ export default {
 		this.totpService = new TotpService()
 		this.totp = new TotpModel()
 
+		this.userNameService = new UserNameService()
+		this.name = this.$store.state.auth.info.name
+
 		this.totpStatus()
 		this.buildCaldavUrl()
 	},
@@ -359,6 +399,16 @@ export default {
 				})
 				.catch(e => this.error(e, this))
 		},
+		updateName() {
+			const name = new UserNameModel({name: this.name})
+
+			this.userNameService.update(name)
+				.then(() => {
+					this.$store.commit('auth/setUserName', this.name)
+					this.success({message: 'The name was successfully changed.'}, this)
+				})
+				.catch(e => this.error(e, this))
+		},
 		buildCaldavUrl() {
 			const apiBase = window.API_URL.replace('/api/v1', '')
 			this.caldavUrl = `${apiBase}/dav/principals/${this.userInfo.username}/`
-- 
2.40.1


From be568a6da088c6b80999332f91d51f7f10a4e74a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Nov 2020 22:18:37 +0100
Subject: [PATCH 8/8] Make sure to use the user name field everywhere

---
 src/components/misc/user.vue               | 4 ++--
 src/components/sharing/linkSharing.vue     | 2 +-
 src/components/sharing/userTeam.vue        | 2 +-
 src/components/tasks/edit-task.vue         | 2 +-
 src/components/tasks/partials/comments.vue | 2 +-
 src/models/user.js                         | 8 ++++++++
 src/views/tasks/TaskDetailView.vue         | 2 +-
 src/views/teams/EditTeam.vue               | 2 +-
 8 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index 7c3e1be3b..4e9c8e63f 100644
--- a/src/components/misc/user.vue
+++ b/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>
 
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 59cc923b1..605b43fa2 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/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">
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index b94f0f284..f291ed18b 100644
--- a/src/components/sharing/userTeam.vue
+++ b/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>
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 479f6a6bd..ea7235edf 100644
--- a/src/components/tasks/edit-task.vue
+++ 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>
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index f5445df02..920c9be8e 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/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) }}
diff --git a/src/models/user.js b/src/models/user.js
index c8f593f31..813214eef 100644
--- a/src/models/user.js
+++ b/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
+	}
 }
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index f0db72b25..842d70987 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/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 -->
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 65300c011..42a6683ae 100644
--- a/src/views/teams/EditTeam.vue
+++ b/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>
-- 
2.40.1