Modularize shared account property components

Signed-off-by: Christopher Ng <[email protected]>

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

@@ -213,6 +213,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 +263,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 +272,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 <[email protected]>
+	- @copyright 2022 Christopher Ng <[email protected]>
 	-
 	- @author Christopher Ng <[email protected]>
 	-
-	- @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-input="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,59 @@
+<!--
+	- @copyright 2022 Christopher Ng <[email protected]>
+	-
+	- @author Christopher Ng <[email protected]>
+	-
+	- @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')"
+		: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', {})
+
+export default {
+	name: 'DisplayNameSection',
+
+	components: {
+		AccountPropertySection,
+	},
+
+	data() {
+		return {
+			displayName: { ...displayName, readable: NAME_READABLE_ENUM[displayName.name] },
+		}
+	},
+
+	methods: {
+		onSave(value) {
+			emit('settings:display-name:updated', value)
+		},
+	}
+}
+</script>