Merge pull request #27379 from nextcloud/feat/26866/multiple-emails-ui

apps/settings/js/federationsettingsview.js

@@ -119,7 +119,10 @@
 		_registerEvents: function() {
 			var self = this;
 			_.each(this._inputFields, function(field) {
-				if (field === 'avatar') {
+				if (
+					field === 'avatar' ||
+					field === 'email'
+				) {
 					return;
 				}
 				self.$('#' + field).keyUpDelayedOrEnter(_.bind(self._onInputChanged, self), true);

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

@@ -7,6 +7,7 @@
  *
  * @author Arthur Schiwon <blizzz@arthur-schiwon.de>
  * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ * @author Christopher Ng <chrng8@gmail.com>
  * @author Georg Ehrke <oc.list@georgehrke.com>
  * @author Joas Schilling <coding@schilljs.com>
  * @author John Molakvoæ <skjnldsv@protonmail.com>
@@ -48,6 +49,8 @@
 use OCP\IUserManager;
 use OCP\L10N\IFactory;
 use OCP\Settings\ISettings;
+use OCP\Accounts\IAccountProperty;
+use OCP\AppFramework\Services\IInitialState;
 
 class PersonalInfo implements ISettings {
 
@@ -65,6 +68,8 @@ class PersonalInfo implements ISettings {
 	private $l10nFactory;
 	/** @var IL10N */
 	private $l;
+	/** @var IInitialState */
+	private $initialStateService;
 
 	public function __construct(
 		IConfig $config,
@@ -73,7 +78,8 @@ public function __construct(
 		IAccountManager $accountManager,
 		IAppManager $appManager,
 		IFactory $l10nFactory,
-		IL10N $l
+		IL10N $l,
+		IInitialState $initialStateService
 	) {
 		$this->config = $config;
 		$this->userManager = $userManager;
@@ -82,6 +88,7 @@ public function __construct(
 		$this->appManager = $appManager;
 		$this->l10nFactory = $l10nFactory;
 		$this->l = $l;
+		$this->initialStateService = $initialStateService;
 	}
 
 	public function getForm(): TemplateResponse {
@@ -138,6 +145,14 @@ public function getForm(): TemplateResponse {
 			'groups' => $this->getGroups($user),
 		] + $messageParameters + $languageParameters + $localeParameters;
 
+		$emails = $this->getEmails($account);
+
+		$accountParameters = [
+			'displayNameChangeSupported' => $user->canChangeDisplayName(),
+		];
+
+		$this->initialStateService->provideInitialState('emails', $emails);
+		$this->initialStateService->provideInitialState('accountParameters', $accountParameters);
 
 		return new TemplateResponse('settings', 'settings/personal/personal.info', $parameters, '');
 	}
@@ -180,6 +195,39 @@ static function (IGroup $group) {
 		return $groups;
 	}
 
+	/**
+	 * returns the primary email and additional emails in an
+	 * associative array
+	 *
+	 * @param IAccount $account
+	 * @return array
+	 */
+	private function getEmails(IAccount $account): array {
+		$primaryEmail = [
+			'value' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getValue(),
+			'scope' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getScope(),
+			'verified' => $account->getProperty(IAccountManager::PROPERTY_EMAIL)->getVerified(),
+		];
+
+		$additionalEmails = array_map(
+			function (IAccountProperty $property) {
+				return [
+					'value' => $property->getValue(),
+					'scope' => $property->getScope(),
+					'verified' => $property->getVerified(),
+				];
+			},
+			$account->getPropertyCollection(IAccountManager::COLLECTION_EMAIL)->getProperties()
+		);
+
+		$emails = [
+			'primaryEmail' => $primaryEmail,
+			'additionalEmails' => $additionalEmails,
+		];
+
+		return $emails;
+	}
+
 	/**
 	 * returns the user language, common language and other languages in an
 	 * associative array

apps/settings/src/components/PersonalInfo/EmailSection/AddButton.vue

@@ -0,0 +1,78 @@
+<!--
+	- @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>
+	<button
+		:disabled="disabled"
+		@click.stop.prevent="onClick">
+		<span class="icon icon-add" />
+		{{ t('settings', 'Add') }}
+	</button>
+</template>
+
+<script>
+export default {
+	name: 'AddButton',
+
+	props: {
+		disabled: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	methods: {
+		onClick(e) {
+			this.$emit('click', e)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	button {
+		height: 44px;
+		padding: 0 16px;
+		border: none;
+		background-color: transparent;
+
+		&:hover {
+			background-color: rgba(127, 127, 127, .15);
+		}
+
+		&:enabled {
+			opacity: 0.4 !important;
+
+			.icon {
+				opacity: 0.8 !important;
+			}
+		}
+
+		&:enabled:hover {
+			background-color: rgba(127, 127, 127, .25);
+			opacity: 0.8 !important;
+		}
+
+		.icon {
+			margin-right: 8px;
+		}
+	}
+</style>