From 3343b1c2401642c492b3f179966559e5831771b6 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sat, 21 Nov 2020 21:25:00 +0000
Subject: [PATCH] Add showing and modifying user name (#306)

Make sure to use the user name field everywhere

Add showing and modifying user name

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/306
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>
---
 src/components/home/topNavigation.vue      |  2 +-
 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                         |  9 ++++
 src/models/userName.js                     | 10 +++++
 src/services/userName.js                   | 10 +++++
 src/store/modules/auth.js                  |  3 ++
 src/views/Home.vue                         |  2 +-
 src/views/tasks/TaskDetailView.vue         |  2 +-
 src/views/teams/EditTeam.vue               |  2 +-
 src/views/user/Settings.vue                | 50 ++++++++++++++++++++++
 14 files changed, 92 insertions(+), 10 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 7660aca4..bb8d5495 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/components/misc/user.vue b/src/components/misc/user.vue
index 7c3e1be3..4e9c8e63 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 59cc923b..605b43fa 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 b94f0f28..f291ed18 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 479f6a6b..ea7235ed 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 f5445df0..920c9be8 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 aff002f1..813214ee 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,
 		}
@@ -20,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/models/userName.js b/src/models/userName.js
new file mode 100644
index 00000000..1e1cc5d4
--- /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 00000000..83a09cd7
--- /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 befe2032..d6f8a440 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 dc24f637..7a564727 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/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index f0db72b2..842d7098 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 65300c01..42a6683a 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>
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 48045c3a..a67e680a 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}/`