diff --git a/src/common/theme.ts b/src/common/theme.ts index 8dc4191cd..de17324e4 100644 --- a/src/common/theme.ts +++ b/src/common/theme.ts @@ -37,6 +37,9 @@ const colors = { white: { main: '#ffffff', }, + red: { + error: '#ED1D1D', + }, } const borders = { @@ -67,6 +70,9 @@ export const themeOptions: ThemeOptions = { light: colors.blue.mainDark, dark: darken(colors.blue.dark, 0.2), }, + error: { + main: colors.red.error, + }, }, shape: { borderRadius: 3, diff --git a/src/components/client/auth/profile/UpdateBirthdateModal.tsx b/src/components/client/auth/profile/UpdateBirthdateModal.tsx index 77415531c..f43047a58 100644 --- a/src/components/client/auth/profile/UpdateBirthdateModal.tsx +++ b/src/components/client/auth/profile/UpdateBirthdateModal.tsx @@ -53,17 +53,6 @@ const parseDateString = (value: string, originalValue: string) => { const maxDate = new Date(new Date().setFullYear(new Date().getFullYear() - 18)) -const validationSchema: yup.SchemaOf> = yup - .object() - .defined() - .shape({ - birthday: yup - .date() - .transform(parseDateString) - .max(maxDate, 'profile:birthdateModal.ageInvalid') - .required(), - }) - function UpdateBirthdateModal({ isOpen, handleClose, @@ -76,6 +65,17 @@ function UpdateBirthdateModal({ const { t } = useTranslation() const [loading, setLoading] = useState(false) + const validationSchema: yup.SchemaOf> = yup + .object() + .defined() + .shape({ + birthday: yup + .date() + .transform(parseDateString) + .max(maxDate, t('profile:birthdateModal.ageInvalid')) + .required(), + }) + const dateBefore18Years = new Date(new Date().setFullYear(new Date().getFullYear() - 18)) const initialValues: Pick = { @@ -119,7 +119,11 @@ function UpdateBirthdateModal({ validationSchema={validationSchema}> - + diff --git a/src/components/common/form/FormDatePicker.tsx b/src/components/common/form/FormDatePicker.tsx index dad77eb72..dcf46c096 100644 --- a/src/components/common/form/FormDatePicker.tsx +++ b/src/components/common/form/FormDatePicker.tsx @@ -3,17 +3,27 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns' import { format } from 'date-fns' import { useField, useFormikContext } from 'formik' import { useTranslation } from 'next-i18next' +import theme from 'common/theme' import { DATE_VALUE_FORMAT, getDateFormat } from 'common/util/date' +interface FormDatePickerProps { + name: string + label: string + maxDate?: Date +} + +const errorValidationColor = theme.palette.error as unknown as string + /** * MUI date picker to be connected with Formik. Propagates updates to the passed Formik field name * @param name - name of the Formik field to bind * @param label - prompt text + * @param maxDate - optional maximal selectable date * @returns */ -export default function FormDatePicker({ name, label }: { name: string; label: string }) { - const [field] = useField(name) +export default function FormDatePicker({ name, label, maxDate }: FormDatePickerProps) { + const [field, meta] = useField(name) const { setFieldValue } = useFormikContext() const { i18n } = useTranslation() @@ -42,7 +52,19 @@ export default function FormDatePicker({ name, label }: { name: string; label: s label={label} value={new Date(field?.value)} onChange={(newValue) => updateValue(newValue)} - slotProps={{ textField: { size: 'small' } }} + slotProps={{ textField: { size: 'small', helperText: maxDate && meta.error } }} + sx={ + maxDate && meta.error + ? { + '&.MuiOutlinedInput-root': { + '& fieldset, &:hover fieldset, &.Mui-focused fieldset': { + borderColor: errorValidationColor, + }, + }, + } + : undefined + } + maxDate={maxDate} /> )