Full name section Vuetified

apps/settings/lib/Settings/Personal/PersonalInfo.php

@@ -145,14 +145,17 @@ public function getForm(): TemplateResponse {
 			'groups' => $this->getGroups($user),
 		] + $messageParameters + $languageParameters + $localeParameters;
 
-		$emails = $this->getEmails($account);
+		$personalInfoParameters = [
+			'displayNames' => $this->getDisplayNames($account),
+			'emails' => $this->getEmails($account),
+		];
 
 		$accountParameters = [
 			'displayNameChangeSupported' => $user->canChangeDisplayName(),
 			'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
 		];
 
-		$this->initialStateService->provideInitialState('emails', $emails);
+		$this->initialStateService->provideInitialState('personalInfoParameters', $personalInfoParameters);
 		$this->initialStateService->provideInitialState('accountParameters', $accountParameters);
 
 		return new TemplateResponse('settings', 'settings/personal/personal.info', $parameters, '');
@@ -196,6 +199,29 @@ static function (IGroup $group) {
 		return $groups;
 	}
 
+	/**
+	 * returns the primary display name in an
+	 * associative array
+	 *
+	 * NOTE may be extended to provide additional display names (i.e. aliases) in the future
+	 *
+	 * @param IAccount $account
+	 * @return array
+	 */
+	private function getDisplayNames(IAccount $account): array {
+		$primaryDisplayName = [
+			'value' => $account->getProperty(IAccountManager::PROPERTY_DISPLAYNAME)->getValue(),
+			'scope' => $account->getProperty(IAccountManager::PROPERTY_DISPLAYNAME)->getScope(),
+			'verified' => $account->getProperty(IAccountManager::PROPERTY_DISPLAYNAME)->getVerified(),
+		];
+
+		$displayNames = [
+			'primaryDisplayName' => $primaryDisplayName,
+		];
+
+		return $displayNames;
+	}
+
 	/**
 	 * returns the primary email and additional emails in an
 	 * associative array

apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue

@@ -0,0 +1,179 @@
+<!--
+	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license GNU AGPL version 3 or any later version
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="displayname">
+		<input
+			id="displayname"
+			ref="displayName"
+			type="text"
+			name="displayname"
+			:placeholder="t('settings', 'Your full name')"
+			:value="displayName"
+			autocapitalize="none"
+			autocomplete="on"
+			autocorrect="off"
+			required="true"
+			@input="onDisplayNameChange">
+
+		<div class="displayname__actions-container">
+			<transition name="fade">
+				<span v-if="showCheckmarkIcon" class="icon-checkmark" />
+				<span v-else-if="showErrorIcon" class="icon-error" />
+			</transition>
+		</div>
+	</div>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import debounce from 'debounce'
+
+import { savePrimaryDisplayName } from '../../../service/PersonalInfo/DisplayNameService'
+import { validateDisplayName } from '../../../utils/validate'
+
+// TODO Global avatar updating on events (e.g. updating the displayname) is currently being handled by global js, investigate using https://github.com/nextcloud/nextcloud-event-bus for global avatar updating
+
+export default {
+	name: 'DisplayName',
+
+	props: {
+		displayName: {
+			type: String,
+			required: true,
+		},
+		scope: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			initialDisplayName: this.displayName,
+			localScope: this.scope,
+			showCheckmarkIcon: false,
+			showErrorIcon: false,
+		}
+	},
+
+	methods: {
+		onDisplayNameChange(e) {
+			this.$emit('update:display-name', e.target.value)
+			this.debounceDisplayNameChange(e.target.value.trim())
+		},
+
+		debounceDisplayNameChange: debounce(async function(displayName) {
+			if (validateDisplayName(displayName)) {
+				await this.updatePrimaryDisplayName(displayName)
+			}
+		}, 500),
+
+		async updatePrimaryDisplayName(displayName) {
+			try {
+				const responseData = await savePrimaryDisplayName(displayName)
+				this.handleResponse({
+					displayName,
+					status: responseData.ocs?.meta?.status,
+				})
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: 'Unable to update full name',
+					error: e,
+				})
+			}
+		},
+
+		handleResponse({ displayName, status, errorMessage, error }) {
+			if (status === 'ok') {
+				// Ensure that local initialDiplayName state reflects server state
+				this.initialDisplayName = displayName
+				this.showCheckmarkIcon = true
+				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
+			} else {
+				showError(t('settings', errorMessage))
+				this.logger.error(errorMessage, error)
+				this.showErrorIcon = true
+				setTimeout(() => { this.showErrorIcon = false }, 2000)
+			}
+		},
+
+		onScopeChange(scope) {
+			this.$emit('update:scope', scope)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.displayname {
+		display: grid;
+		align-items: center;
+
+		input {
+			grid-area: 1 / 1;
+			height: 34px;
+			width: 100%;
+			margin: 3px 3px 3px 0;
+			padding: 7px 6px;
+			cursor: text;
+			font-family: var(--font-face);
+			border: 1px solid var(--color-border-dark);
+			border-radius: var(--border-radius);
+			background-color: var(--color-main-background);
+			color: var(--color-main-text);
+		}
+
+		.displayname__actions-container {
+			grid-area: 1 / 1;
+			justify-self: flex-end;
+			height: 30px;
+
+			display: flex;
+			gap: 0 2px;
+			margin-right: 5px;
+
+			.icon-checkmark,
+			.icon-error {
+				height: 30px !important;
+				min-height: 30px !important;
+				width: 30px !important;
+				min-width: 30px !important;
+				top: 0;
+				right: 0;
+				float: none;
+			}
+		}
+	}
+
+	.fade-enter,
+	.fade-leave-to {
+		opacity: 0;
+	}
+
+	.fade-enter-active {
+		transition: opacity 200ms ease-out;
+	}
+
+	.fade-leave-active {
+		transition: opacity 300ms ease-out;
+	}
+</style>

apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue

@@ -0,0 +1,90 @@
+<!--
+	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license GNU AGPL version 3 or any later version
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<section>
+		<HeaderBar
+			:account-property="accountProperty"
+			label-for="displayname"
+			:is-editable="displayNameChangeSupported"
+			:is-valid-section="isValidSection"
+			:handle-scope-change="savePrimaryDisplayNameScope"
+			:scope.sync="primaryDisplayName.scope" />
+
+		<template v-if="displayNameChangeSupported">
+			<DisplayName
+				:display-name.sync="primaryDisplayName.value"
+				:scope.sync="primaryDisplayName.scope" />
+		</template>
+
+		<span v-else>
+			{{ primaryDisplayName.value || t('settings', 'No full name set') }}
+		</span>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import DisplayName from './DisplayName'
+import HeaderBar from '../shared/HeaderBar'
+
+import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { savePrimaryDisplayNameScope } from '../../../service/PersonalInfo/DisplayNameService'
+import { validateDisplayName } from '../../../utils/validate'
+
+const { displayNames: { primaryDisplayName } } = loadState('settings', 'personalInfoParameters', {})
+const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
+
+export default {
+	name: 'DisplayNameSection',
+
+	components: {
+		DisplayName,
+		HeaderBar,
+	},
+
+	data() {
+		return {
+			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME,
+			displayNameChangeSupported,
+			primaryDisplayName,
+			savePrimaryDisplayNameScope,
+		}
+	},
+
+	computed: {
+		isValidSection() {
+			return validateDisplayName(this.primaryDisplayName.value)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	section {
+		padding: 10px 10px;
+
+		&::v-deep button:disabled {
+			cursor: default;
+		}
+	}
+</style>