Modularize shared account property components

Signed-off-by: Christopher Ng <chrng8@gmail.com>

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

@@ -135,7 +135,6 @@ public function getForm(): TemplateResponse {
 			$totalSpace = \OC_Helper::humanFileSize($storageInfo['total']);
 		}
 
-		$languageParameters = $this->getLanguageMap($user);
 		$localeParameters = $this->getLocales($user);
 		$messageParameters = $this->getMessageParameters($account);
 
@@ -148,12 +147,6 @@ public function getForm(): TemplateResponse {
 			'federationEnabled' => $federationEnabled,
 			'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
 			'avatarScope' => $account->getProperty(IAccountManager::PROPERTY_AVATAR)->getScope(),
-			'displayNameChangeSupported' => $user->canChangeDisplayName(),
-			'displayName' => $account->getProperty(IAccountManager::PROPERTY_DISPLAYNAME)->getValue(),
-			'displayNameScope' => $account->getProperty(IAccountManager::PROPERTY_DISPLAYNAME)->getScope(),
-			'email' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getValue(),
-			'emailScope' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getScope(),
-			'emailVerification' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getVerified(),
 			'phone' => $account->getProperty(IAccountManager::PROPERTY_PHONE)->getValue(),
 			'phoneScope' => $account->getProperty(IAccountManager::PROPERTY_PHONE)->getScope(),
 			'address' => $account->getProperty(IAccountManager::PROPERTY_ADDRESS)->getValue(),
@@ -167,7 +160,7 @@ public function getForm(): TemplateResponse {
 			'groups' => $this->getGroups($user),
 			'isFairUseOfFreePushService' => $this->isFairUseOfFreePushService(),
 			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
-		] + $messageParameters + $languageParameters + $localeParameters;
+		] + $messageParameters + $localeParameters;
 
 		$personalInfoParameters = [
 			'userId' => $uid,
@@ -213,6 +206,7 @@ private function isFairUseOfFreePushService(): bool {
 	 */
 	private function getProperty(IAccount $account, string $property): array {
 		$property = [
+			'name' => $account->getProperty($property)->getName(),
 			'value' => $account->getProperty($property)->getValue(),
 			'scope' => $account->getProperty($property)->getScope(),
 			'verified' => $account->getProperty($property)->getVerified(),
@@ -262,6 +256,7 @@ static function (IGroup $group) {
 	 */
 	private function getEmailMap(IAccount $account): array {
 		$systemEmail = [
+			'name' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getName(),
 			'value' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getValue(),
 			'scope' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getScope(),
 			'verified' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getVerified(),
@@ -270,6 +265,7 @@ private function getEmailMap(IAccount $account): array {
 		$additionalEmails = array_map(
 			function (IAccountProperty $property) {
 				return [
+					'name' => $property->getName(),
 					'value' => $property->getValue(),
 					'scope' => $property->getScope(),
 					'verified' => $property->getVerified(),

apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue → apps/settings/src/components/PersonalInfo/BiographySection.vue

@@ -1,9 +1,9 @@
 <!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
 	-
 	- @author Christopher Ng <chrng8@gmail.com>
 	-
-	- @license GNU AGPL version 3 or any later version
+	- @license AGPL-3.0-or-later
 	-
 	- This program is free software: you can redistribute it and/or modify
 	- it under the terms of the GNU Affero General Public License as
@@ -12,7 +12,7 @@
 	-
 	- 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
+	- 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
@@ -21,49 +21,31 @@
 -->
 
 <template>
-	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="biography"
-			:scope.sync="biography.scope" />
-
-		<Biography :biography.sync="biography.value"
-			:scope.sync="biography.scope" />
-	</section>
+	<AccountPropertySection :property="biography"
+		:placeholder="t('settings', 'Your biography')"
+		:multi-line="true" />
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import Biography from './Biography'
-import HeaderBar from '../shared/HeaderBar'
+import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
 
 const { biography } = loadState('settings', 'personalInfoParameters', {})
 
 export default {
 	name: 'BiographySection',
 
 	components: {
-		Biography,
-		HeaderBar,
+		AccountPropertySection,
 	},
 
 	data() {
 		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY,
-			biography,
+			biography: { ...biography, readable: NAME_READABLE_ENUM[biography.name] },
 		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-section {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-}
-</style>

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

@@ -0,0 +1,62 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- 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>
+	<AccountPropertySection :property="displayName"
+		:placeholder="t('settings', 'Your full name')"
+		:is-editable="displayNameChangeSupported"
+		:empty-string-valid="false"
+		:on-save="onSave" />
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import { emit } from '@nextcloud/event-bus'
+
+import AccountPropertySection from './shared/AccountPropertySection.vue'
+
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+
+const { displayName } = loadState('settings', 'personalInfoParameters', {})
+const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
+
+export default {
+	name: 'DisplayNameSection',
+
+	components: {
+		AccountPropertySection,
+	},
+
+	data() {
+		return {
+			displayName: { ...displayName, readable: NAME_READABLE_ENUM[displayName.name] },
+			displayNameChangeSupported,
+		}
+	},
+
+	methods: {
+		onSave(value) {
+			emit('settings:display-name:updated', value)
+		},
+	}
+}
+</script>