fix(settings): properly align items

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/settings/src/components/PersonalInfo/BirthdaySection.spec.js

@@ -4,7 +4,7 @@
  */
 
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 
 let personalInfoParameters
 vi.mock('@nextcloud/initial-state', () => ({
@@ -35,10 +35,19 @@ async function mountBirthdaySection() {
 	})
 }
 
+// The component reads its initial state at module scope, so every test has to import it freshly.
+// Transforming its module graph once up front keeps that import out of the tests' timeout budget.
+beforeAll(async () => {
+	await import('./BirthdaySection.vue')
+})
+
+beforeEach(() => {
+	vi.resetModules()
+})
+
 afterEach(() => {
 	vi.unstubAllEnvs()
 	personalInfoParameters = undefined
-	vi.resetModules()
 })
 
 describe('BirthdaySection', () => {

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

@@ -19,10 +19,6 @@
 				:scope="birthdate.scope"
 				@update:scope="onScopeChange" />
 		</div>
-
-		<p class="property__helper-text-message">
-			{{ t('settings', 'Enter your date of birth') }}
-		</p>
 	</section>
 </template>
 
@@ -31,7 +27,7 @@ import { loadState } from '@nextcloud/initial-state'
 import debounce from 'debounce'
 import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative'
 import VisibilityScopeControl from './shared/VisibilityScopeControl.vue'
-import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+import { NAME_READABLE_ENUM, SCOPE_ENUM } from '../../constants/AccountPropertyConstants.ts'
 import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
 import { handleError } from '../../utils/handlers.js'
 
@@ -63,6 +59,7 @@ export default {
 
 		return {
 			birthdate: {
+				scope: SCOPE_ENUM.PRIVATE,
 				...birthdate,
 				readable: NAME_READABLE_ENUM[birthdate.name],
 			},
@@ -161,7 +158,7 @@ export default {
 
 	&__scope {
 		position: absolute;
-		inset-block-start: 0;
+		inset-block-end: 0; // due to NcDateTimePickerNative's label handling, we need to use inset-block-end instead of block start
 		inset-inline-start: calc(100% + 8px);
 		display: flex;
 		align-items: center;

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

@@ -188,9 +188,5 @@ export default {
 	flex-direction: column;
 	gap: 6px;
 	padding: 6px 0;
-
-	&__add {
-		margin-inline-end: 52px;
-	}
 }
 </style>

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

@@ -67,10 +67,6 @@
 				</NcActionButton>
 			</NcActions>
 		</div>
-
-		<em v-if="isNotificationEmail" class="property-section__note">
-			{{ t('settings', 'Primary email for password reset and notifications') }}
-		</em>
 	</div>
 </template>
 

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

@@ -35,6 +35,7 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -47,7 +48,7 @@ import {
 	SCOPE_ENUM,
 	SCOPE_PROPERTY_ENUM,
 	UNPUBLISHED_READABLE_PROPERTIES,
-} from '../../../constants/AccountPropertyConstants.js'
+} from '../../../constants/AccountPropertyConstants.ts'
 import { savePrimaryAccountPropertyScope } from '../../../service/PersonalInfo/PersonalInfoService.js'
 import { handleError } from '../../../utils/handlers.ts'
 

apps/settings/src/constants/ProfileConstants.js

@@ -1,13 +1,10 @@
-/**
+/*
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-/*
- * SYNC to be kept in sync with `core/Db/ProfileConfig.php`
- */
-
 import { mdiEyeOffOutline, mdiEyeOutline, mdiLoginVariant } from '@mdi/js'
+import { t } from '@nextcloud/l10n'
 
 /** Enum of profile visibility constants */
 export const VISIBILITY_ENUM = Object.freeze({
@@ -18,6 +15,8 @@ export const VISIBILITY_ENUM = Object.freeze({
 
 /**
  * Enum of profile visibility constants to properties
+ *
+ * SYNC to be kept in sync with `core/Db/ProfileConfig.php`
  */
 export const VISIBILITY_PROPERTY_ENUM = Object.freeze({
 	[VISIBILITY_ENUM.SHOW]: {

apps/settings/src/views/ProfileContactSettings.vue

@@ -52,7 +52,7 @@ const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', t
 				{{ t('settings', 'Contact') }}
 			</h3>
 			<p class="profile-contact-settings__hint">
-				{{ t('settings', 'Notifications will be sent to your primary email') }}
+				{{ t('settings', 'Notifications and password reset requests will be sent to your primary email') }}
 			</p>
 			<EmailSection />
 			<PhoneSection />