fix(settings): display birthday correctly regardless of browsers timezone

fix(settings): display birthday correctly regardless of browsers timezone

This also avoid shifting dates after user input.

Resolves #49828

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

[skip ci]

Author: odzhychko

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

@@ -26,7 +26,17 @@ vi.mock('../../service/PersonalInfo/PersonalInfoService.js', () => ({
 	savePrimaryAccountProperty,
 }))
 
+async function mountBirthdaySection() {
+	const BirthdaySection = await import('./BirthdaySection.vue')
+	return mount(BirthdaySection.default, {
+		mocks: {
+			t: (_app, text) => text,
+		},
+	})
+}
+
 afterEach(() => {
+	vi.unstubAllEnvs()
 	personalInfoParameters = undefined
 	vi.resetModules()
 })
@@ -42,12 +52,45 @@ describe('BirthdaySection', () => {
 		savePrimaryAccountProperty.mockReturnValue(Promise.resolve({
 			ocs: { meta: { status: 'ok' } },
 		}))
-		const BirthdaySection = await import('./BirthdaySection.vue')
-		const wrapper = mount(BirthdaySection.default, {
-			mocks: {
-				t: (_app, text) => text,
+		const wrapper = await mountBirthdaySection()
+
+		const input = wrapper.find('input')
+		await input.setValue('1987-12-01')
+
+		await expect.poll(() => savePrimaryAccountProperty.mock.calls.length).toBe(1)
+		expect(savePrimaryAccountProperty).toHaveBeenCalledWith(
+			'birthdate',
+			'1987-12-01T00:00:00.000Z',
+		)
+		expect(input.element.value).toBe('1987-12-01')
+	})
+
+	it('displays value when browser timezone is set', async () => {
+		vi.stubEnv('TZ', 'US/Pacific')
+		personalInfoParameters = {
+			birthdate: {
+				name: 'birthdate',
+				value: '1987-12-15T00:00:00.000Z',
 			},
-		})
+		}
+
+		const wrapper = await mountBirthdaySection()
+
+		expect(wrapper.find('input').element.value).toBe('1987-12-15')
+	})
+
+	it('saves value when browser timezone is set', async () => {
+		vi.stubEnv('TZ', 'US/Pacific')
+		personalInfoParameters = {
+			birthdate: {
+				name: 'birthdate',
+				value: null,
+			},
+		}
+		savePrimaryAccountProperty.mockReturnValue(Promise.resolve({
+			ocs: { meta: { status: 'ok' } },
+		}))
+		const wrapper = await mountBirthdaySection()
 
 		const input = wrapper.find('input')
 		await input.setValue('1987-12-01')

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

@@ -33,6 +33,16 @@ import HeaderBar from './shared/HeaderBar.vue'
 
 const { birthdate } = loadState('settings', 'personalInfoParameters', {})
 
+/**
+ * Convert a birthdate string value into a Date.
+ *
+ * @param {string } birthdateValue - e.g. "1987-12-01" or "1987-12-01T00:00:00.000Z"
+ * @return {Date}
+ */
+function birthdateValueToDate(birthdateValue) {
+	return new Date(birthdateValue)
+}
+
 export default {
 	name: 'BirthdaySection',
 
@@ -44,7 +54,7 @@ export default {
 	data() {
 		let initialValue = null
 		if (birthdate.value) {
-			initialValue = new Date(birthdate.value)
+			initialValue = birthdateValueToDate(birthdate.value)
 		}
 
 		return {
@@ -76,7 +86,10 @@ export default {
 
 	methods: {
 		onInput(e) {
-			this.value = e
+			const day = e.getDate().toString().padStart(2, '0')
+			const month = (e.getMonth() + 1).toString().padStart(2, '0')
+			const year = e.getFullYear()
+			this.birthdate.value = `${year}-${month}-${day}`
 			this.debouncePropertyChange(this.value)
 		},