Minor refactor

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

6 files changed, 79 insertions, 77 deletions

diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
index 1ff7014ed73..e831740fc5c 100644
--- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
+++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
@@ -31,7 +31,7 @@
 			autocapitalize="none"
 			autocomplete="on"
 			autocorrect="off"
-			required="true"
+			required
 			@input="onDisplayNameChange">
 
 		<div class="displayname__actions-container">
@@ -104,7 +104,7 @@ export default {
 
 		handleResponse({ displayName, status, errorMessage, error }) {
 			if (status === 'ok') {
-				// Ensure that local initialDiplayName state reflects server state
+				// Ensure that local state reflects server state
 				this.initialDisplayName = displayName
 				this.showCheckmarkIcon = true
 				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
@@ -124,9 +124,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.displayname {
-		display: grid;
-		align-items: center;
+.displayname {
+	display: grid;
+	align-items: center;
 
 		input {
 			grid-area: 1 / 1;
@@ -142,38 +142,38 @@ export default {
 			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;
-			}
+	.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,
+.fade-leave-to {
+	opacity: 0;
+}
 
-	.fade-enter-active {
-		transition: opacity 200ms ease-out;
-	}
+.fade-enter-active {
+	transition: opacity 200ms ease-out;
+}
 
-	.fade-leave-active {
-		transition: opacity 300ms ease-out;
-	}
+.fade-leave-active {
+	transition: opacity 300ms ease-out;
+}
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
index 05b4836b615..f15e02fe1c9 100644
--- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
+++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
@@ -87,4 +87,5 @@ export default {
 			cursor: default;
 		}
 	}
+}
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 036c35425a2..d6328a8da33 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -23,6 +23,7 @@
 	<div>
 		<div class="email">
 			<input
+				id="email"
 				ref="email"
 				type="email"
 				:name="inputName"
@@ -31,7 +32,7 @@
 				autocapitalize="none"
 				autocomplete="on"
 				autocorrect="off"
-				required="true"
+				required
 				@input="onEmailChange">
 
 			<div class="email__actions-container">
@@ -277,7 +278,7 @@ export default {
 
 		handleResponse({ email, status, errorMessage, error }) {
 			if (status === 'ok') {
-				// Ensure that local initialEmail state reflects server state
+				// Ensure that local state reflects server state
 				this.initialEmail = email
 				this.showCheckmarkIcon = true
 				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
@@ -297,9 +298,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.email {
-		display: grid;
-		align-items: center;
+.email {
+	display: grid;
+	align-items: center;
 
 		input {
 			grid-area: 1 / 1;
@@ -320,48 +321,53 @@ export default {
 			justify-self: flex-end;
 			height: 30px;
 
-			display: flex;
-			gap: 0 2px;
-			margin-right: 5px;
+	.email__actions-container {
+		grid-area: 1 / 1;
+		justify-self: flex-end;
+		height: 30px;
 
-			.email__actions {
-				opacity: 0.4 !important;
+		display: flex;
+		gap: 0 2px;
+		margin-right: 5px;
 
-				&:hover {
-					opacity: 0.8 !important;
-				}
+		.email__actions {
+			opacity: 0.4 !important;
 
-				&::v-deep button {
-					height: 30px !important;
-					min-height: 30px !important;
-					width: 30px !important;
-					min-width: 30px !important;
-				}
+			&:hover {
+				opacity: 0.8 !important;
 			}
 
-			.icon-checkmark,
-			.icon-error {
+			&::v-deep button {
 				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;
+		.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-active {
-		transition: opacity 200ms ease-out;
-	}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
 
-	.fade-leave-active {
-		transition: opacity 300ms ease-out;
-	}
+.fade-enter-active {
+	transition: opacity 200ms ease-out;
+}
+
+.fade-leave-active {
+	transition: opacity 300ms ease-out;
+}
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
index a78bae03ed7..52bca9a2f49 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
@@ -171,4 +171,5 @@ export default {
 			cursor: default;
 		}
 	}
+}
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
index 32605c3fdcf..07fc5bbcdbd 100644
--- a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
@@ -22,7 +22,7 @@
 <template>
 	<button
 		:disabled="disabled"
-		@click.stop.prevent="onClick">
+		v-on="$listeners">
 		<span class="icon icon-add" />
 		{{ t('settings', 'Add') }}
 	</button>
@@ -38,12 +38,6 @@ export default {
 			default: true,
 		},
 	},
-
-	methods: {
-		onClick(e) {
-			this.$emit('click', e)
-		},
-	},
 }
 </script>
 
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index ab5afe060c8..e4ff0846a07 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -68,7 +68,7 @@ export default {
 		},
 		isEditable: {
 			type: Boolean,
-			required: true,
+			default: true,
 		},
 		isMultiValueSupported: {
 			type: Boolean,
@@ -76,7 +76,7 @@ export default {
 		},
 		isValidSection: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 		labelFor: {
 			type: String,