HTML Validation: Personal settings

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

@@ -35,8 +35,7 @@
 					:key="version"
 					:user="userId"
 					:aria-label="t('settings', 'Your profile picture')"
-					:disabled-menu="true"
-					:disabled-tooltip="true"
+					:disable-tooltip="true"
 					:show-user-status="false"
 					:size="180" />
 				<div v-else class="icon-loading" />

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

@@ -23,13 +23,14 @@
 <template>
 	<div>
 		<div class="email">
-			<input :id="inputId"
+			<input :id="inputIdWithDefault"
 				ref="email"
 				type="email"
 				autocomplete="email"
+				:aria-label="inputPlaceholder"
 				:placeholder="inputPlaceholder"
 				:value="email"
-				:aria-describedby="helperText ? `${inputId}-helper-text` : ''"
+				:aria-describedby="helperText ? `${inputIdWithDefault}-helper-text` : undefined"
 				autocapitalize="none"
 				spellcheck="false"
 				@input="onEmailChange">
@@ -73,7 +74,7 @@
 		</div>
 
 		<p v-if="helperText"
-			:id="`${inputId}-helper-text`"
+			:id="`${inputIdWithDefault}-helper-text`"
 			class="email__helper-text-message email__helper-text-message--error">
 			<AlertCircle class="email__helper-text-message__icon" :size="18" />
 			{{ helperText }}
@@ -144,6 +145,11 @@ export default {
 			type: Number,
 			default: VERIFICATION_ENUM.NOT_VERIFIED,
 		},
+		inputId: {
+			type: String,
+			required: false,
+			default: '',
+		},
 	},
 
 	data() {
@@ -194,18 +200,13 @@ export default {
 			return !this.initialEmail
 		},
 
-		inputId() {
-			if (this.primary) {
-				return 'email'
-			}
-			return `email-${this.index}`
+		inputIdWithDefault() {
+			return this.inputId || `account-property-email--${this.index}`
 		},
 
 		inputPlaceholder() {
-			if (this.primary) {
-				return t('settings', 'Your email address')
-			}
-			return t('settings', 'Additional email address {index}', { index: this.index + 1 })
+			// Primary email has implicit linked <label>
+			return !this.primary ? t('settings', 'Additional email address {index}', { index: this.index + 1 }) : undefined
 		},
 
 		isNotificationEmail() {

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

@@ -24,15 +24,15 @@
 	<section>
 		<HeaderBar :input-id="inputId"
 			:readable="primaryEmail.readable"
-			:handle-scope-change="savePrimaryEmailScope"
 			:is-editable="true"
 			:is-multi-value-supported="true"
 			:is-valid-section="isValidSection"
 			:scope.sync="primaryEmail.scope"
 			@add-additional="onAddAdditionalEmail" />
 
 		<template v-if="displayNameChangeSupported">
-			<Email :primary="true"
+			<Email :input-id="inputId"
+				:primary="true"
 				:scope.sync="primaryEmail.scope"
 				:email.sync="primaryEmail.value"
 				:active-notification-email.sync="notificationEmail"
@@ -68,7 +68,7 @@ import Email from './Email.vue'
 import HeaderBar from '../shared/HeaderBar.vue'
 
 import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE, NAME_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js'
-import { savePrimaryEmail, savePrimaryEmailScope, removeAdditionalEmail } from '../../../service/PersonalInfo/EmailService.js'
+import { savePrimaryEmail, removeAdditionalEmail } from '../../../service/PersonalInfo/EmailService.js'
 import { validateEmail } from '../../../utils/validate.js'
 import { handleError } from '../../../utils/handlers.js'
 
@@ -89,7 +89,6 @@ export default {
 			additionalEmails: additionalEmails.map(properties => ({ ...properties, key: this.generateUniqueKey() })),
 			displayNameChangeSupported,
 			primaryEmail: { ...primaryEmail, readable: NAME_READABLE_ENUM[primaryEmail.name] },
-			savePrimaryEmailScope,
 			notificationEmail,
 		}
 	},

apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue

@@ -22,9 +22,7 @@
 
 <template>
 	<div class="language">
-		<select :id="inputId"
-			:placeholder="t('settings', 'Language')"
-			@change="onLanguageChange">
+		<select :id="inputId" @change="onLanguageChange">
 			<option v-for="commonLanguage in commonLanguages"
 				:key="commonLanguage.code"
 				:selected="language.code === commonLanguage.code"

apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue

@@ -22,9 +22,7 @@
 
 <template>
 	<div class="locale">
-		<select :id="inputId"
-			:placeholder="t('settings', 'Locale')"
-			@change="onLocaleChange">
+		<select :id="inputId" @change="onLocaleChange">
 			<option v-for="currentLocale in localesForLanguage"
 				:key="currentLocale.code"
 				:selected="locale.code === currentLocale.code"

apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue

@@ -43,17 +43,17 @@
 				:placeholder="placeholder"
 				:type="type"
 				:value="value"
-				:aria-describedby="helperText ? `${name}-helper-text` : ''"
+				:aria-describedby="helperText ? `${name}-helper-text` : undefined"
 				autocapitalize="none"
 				spellcheck="false"
 				:autocomplete="autocomplete"
 				@input="onPropertyChange">
 
 			<div class="property__actions-container">
-				<transition name="fade">
+				<Transition name="fade">
 					<Check v-if="showCheckmarkIcon" :size="20" />
 					<AlertOctagon v-else-if="showErrorIcon" :size="20" />
-				</transition>
+				</Transition>
 			</div>
 		</div>
 		<span v-else>

apps/settings/src/service/PersonalInfo/EmailService.js

@@ -131,26 +131,6 @@ export const updateAdditionalEmail = async (prevEmail, newEmail) => {
 	return res.data
 }
 
-/**
- * Save the federation scope for the primary email of the user
- *
- * @param {string} scope the federation scope
- * @return {object}
- */
-export const savePrimaryEmailScope = async (scope) => {
-	const userId = getCurrentUser().uid
-	const url = generateOcsUrl('cloud/users/{userId}', { userId })
-
-	await confirmPassword()
-
-	const res = await axios.put(url, {
-		key: `${ACCOUNT_PROPERTY_ENUM.EMAIL}${SCOPE_SUFFIX}`,
-		value: scope,
-	})
-
-	return res.data
-}
-
 /**
  * Save the federation scope for the additional email of the user
  *