1 files changed, 132 insertions, 0 deletions
diff --git a/apps/settings/src/components/PersonalInfo/BirthdaySection.vue b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue
new file mode 100644
index 00000000000..f55f09c95e5
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue
@@ -0,0 +1,132 @@
+<!--
+ - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<section>
+		<HeaderBar :scope="birthdate.scope"
+			:input-id="inputId"
+			:readable="birthdate.readable" />
+
+		<NcDateTimePickerNative :id="inputId"
+			type="date"
+			label=""
+			:value="value"
+			@input="onInput" />
+
+		<p class="property__helper-text-message">
+			{{ t('settings', 'Enter your date of birth') }}
+		</p>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService'
+import { handleError } from '../../utils/handlers'
+
+import debounce from 'debounce'
+
+import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative'
+import HeaderBar from './shared/HeaderBar.vue'
+
+const { birthdate } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'BirthdaySection',
+
+	components: {
+		NcDateTimePickerNative,
+		HeaderBar,
+	},
+
+	data() {
+		let initialValue = null
+		if (birthdate.value) {
+			initialValue = new Date(birthdate.value)
+		}
+
+		return {
+			birthdate: {
+				...birthdate,
+				readable: NAME_READABLE_ENUM[birthdate.name],
+			},
+			initialValue,
+		}
+	},
+
+	computed: {
+		inputId() {
+			return `account-property-${birthdate.name}`
+		},
+		value: {
+			get() {
+				return new Date(this.birthdate.value)
+			},
+			/** @param {Date} value The date to set */
+			set(value) {
+				const day = value.getDate().toString().padStart(2, '0')
+				const month = (value.getMonth() + 1).toString().padStart(2, '0')
+				const year = value.getFullYear()
+				this.birthdate.value = `${year}-${month}-${day}`
+			},
+		},
+	},
+
+	methods: {
+		onInput(e) {
+			this.value = e
+			this.debouncePropertyChange(this.value)
+		},
+
+		debouncePropertyChange: debounce(async function(value) {
+			await this.updateProperty(value)
+		}, 500),
+
+		async updateProperty(value) {
+			try {
+				const responseData = await savePrimaryAccountProperty(
+					this.birthdate.name,
+					value,
+				)
+				this.handleResponse({
+					value,
+					status: responseData.ocs?.meta?.status,
+				})
+			} catch (error) {
+				this.handleResponse({
+					errorMessage: t('settings', 'Unable to update date of birth'),
+					error,
+				})
+			}
+		},
+
+		handleResponse({ value, status, errorMessage, error }) {
+			if (status === 'ok') {
+				this.initialValue = value
+			} else {
+				this.$emit('update:value', this.initialValue)
+				handleError(error, errorMessage)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+	padding: 10px 10px;
+
+	:deep(button:disabled) {
+		cursor: default;
+	}
+
+	.property__helper-text-message {
+		color: var(--color-text-maxcontrast);
+		padding: 4px 0;
+		display: flex;
+		align-items: center;
+	}
+}
+</style>