Make emails Vuetiful

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

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/src/components/PersonalInfo/EmailSection/AddButton.vue

@@ -0,0 +1,78 @@
+<!--
+	- @copyright 2021, Christopher Ng <[email protected]>
+	-
+	- @author Christopher Ng <[email protected]>
+	-
+	- @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>