Language section Vuetified

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

@@ -148,6 +148,7 @@ public function getForm(): TemplateResponse {
 		$personalInfoParameters = [
 			'displayNames' => $this->getDisplayNames($account),
 			'emails' => $this->getEmails($account),
+			'languages' => $this->getLanguages($user),
 		];
 
 		$accountParameters = [
@@ -256,7 +257,7 @@ function (IAccountProperty $property) {
 	}
 
 	/**
-	 * returns the user language, common language and other languages in an
+	 * returns the user's active language, common languages, and other languages in an
 	 * associative array
 	 *
 	 * @param IUser $user
@@ -274,12 +275,12 @@ private function getLanguages(IUser $user): array {
 		$languages = $this->l10nFactory->getLanguages();
 
 		// associate the user language with the proper array
-		$userLangIndex = array_search($userConfLang, array_column($languages['commonlanguages'], 'code'));
-		$userLang = $languages['commonlanguages'][$userLangIndex];
+		$userLangIndex = array_search($userConfLang, array_column($languages['commonLanguages'], 'code'));
+		$userLang = $languages['commonLanguages'][$userLangIndex];
 		// search in the other languages
 		if ($userLangIndex === false) {
-			$userLangIndex = array_search($userConfLang, array_column($languages['languages'], 'code'));
-			$userLang = $languages['languages'][$userLangIndex];
+			$userLangIndex = array_search($userConfLang, array_column($languages['otherLanguages'], 'code'));
+			$userLang = $languages['otherLanguages'][$userLangIndex];
 		}
 		// if user language is not available but set somehow: show the actual code as name
 		if (!is_array($userLang)) {
@@ -290,7 +291,7 @@ private function getLanguages(IUser $user): array {
 		}
 
 		return array_merge(
-			['activelanguage' => $userLang],
+			['activeLanguage' => $userLang],
 			$languages
 		);
 	}

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,56 +124,56 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.displayname {
-		display: grid;
-		align-items: center;
-
-		input {
-			grid-area: 1 / 1;
-			height: 34px;
-			width: 100%;
-			margin: 3px 3px 3px 0;
-			padding: 7px 6px;
-			cursor: text;
-			font-family: var(--font-face);
-			border: 1px solid var(--color-border-dark);
-			border-radius: var(--border-radius);
-			background-color: var(--color-main-background);
-			color: var(--color-main-text);
-		}
+.displayname {
+	display: grid;
+	align-items: center;
+
+	input {
+		grid-area: 1 / 1;
+		width: 100%;
+		height: 34px;
+		margin: 3px 3px 3px 0;
+		padding: 7px 6px;
+		color: var(--color-main-text);
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+		background-color: var(--color-main-background);
+		font-family: var(--font-face);
+		cursor: 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>

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

@@ -80,11 +80,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	section {
-		padding: 10px 10px;
+section {
+	padding: 10px 10px;
 
-		&::v-deep button:disabled {
-			cursor: default;
-		}
+	&::v-deep button:disabled {
+		cursor: default;
 	}
+}
 </style>

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,71 +298,71 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.email {
-		display: grid;
-		align-items: center;
-
-		input {
-			grid-area: 1 / 1;
-			height: 34px;
-			width: 100%;
-			margin: 3px 3px 3px 0;
-			padding: 7px 6px;
-			cursor: text;
-			font-family: var(--font-face);
-			border: 1px solid var(--color-border-dark);
-			border-radius: var(--border-radius);
-			background-color: var(--color-main-background);
-			color: var(--color-main-text);
-		}
-
-		.email__actions-container {
-			grid-area: 1 / 1;
-			justify-self: flex-end;
-			height: 30px;
+.email {
+	display: grid;
+	align-items: center;
+
+	input {
+		grid-area: 1 / 1;
+		width: 100%;
+		height: 34px;
+		margin: 3px 3px 3px 0;
+		padding: 7px 6px;
+		color: var(--color-main-text);
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+		background-color: var(--color-main-background);
+		font-family: var(--font-face);
+		cursor: text;
+	}
 
-			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>

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

@@ -164,11 +164,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	section {
-		padding: 10px 10px;
+section {
+	padding: 10px 10px;
 
-		&::v-deep button:disabled {
-			cursor: default;
-		}
+	&::v-deep button:disabled {
+		cursor: default;
 	}
+}
 </style>