diff --git a/public/locales/bg/auth.json b/public/locales/bg/auth.json index b9b555868..3a2bf1688 100644 --- a/public/locales/bg/auth.json +++ b/public/locales/bg/auth.json @@ -17,13 +17,7 @@ }, "pages": { "forgotten-password": { - "instructions": "За да смените паролата си, моля въведете вашия email и ще ви изпратим потвърждение с инареукции." + "instructions": "За да смените паролата си, моля въведете вашия email и ще ви изпратим потвърждение с инструкции." } - }, - "validation":{ - "email": "Невалиден email", - "required": "Задължително поле", - "password-min": "Паролата трябва да бъде поне {{count}} символа", - "password-match": "Паролата не съвпада" } } diff --git a/public/locales/bg/validation.json b/public/locales/bg/validation.json new file mode 100644 index 000000000..86ac99d42 --- /dev/null +++ b/public/locales/bg/validation.json @@ -0,0 +1,10 @@ +{ + "invalid": "Невалидно поле", + "required": "Задължително поле", + "email": "Невалиден email", + "password-min": "Паролата трябва да бъде поне {{min}} символа", + "password-match": "Паролата не съвпада", + "field-too-short": "Полето трябва да бъде поне {{min}} символа", + "field-too-long": "Полето трябва да бъде най-много {{max}} символа", + "one-of": "Невалидна стойност" +} diff --git a/public/locales/en/auth.json b/public/locales/en/auth.json index 58b6f42a9..68376e8e7 100644 --- a/public/locales/en/auth.json +++ b/public/locales/en/auth.json @@ -19,11 +19,5 @@ "forgotten-password": { "instructions": "To reset your password, please type your email address below. We will then send you an email with instructions to follow." } - }, - "validation":{ - "email": "Invalid email", - "required": "Required field", - "password-min": "Password should be at least {{count}} characters", - "password-match": "Password doesn't match" } } diff --git a/public/locales/en/validation.json b/public/locales/en/validation.json new file mode 100644 index 000000000..466bf429f --- /dev/null +++ b/public/locales/en/validation.json @@ -0,0 +1,10 @@ +{ + "invalid": "Field is invalid", + "required": "Required field", + "email": "Invalid email", + "password-min": "Password should be at least {{min}} characters", + "password-match": "Password doesn't match", + "field-too-short": "Field should be at least {{min}} symbols", + "field-too-long": "Field should be maximum {{max}} symbols", + "one-of": "Invalid value" +} diff --git a/src/common/form/README.md b/src/common/form/README.md new file mode 100644 index 000000000..375dbd672 --- /dev/null +++ b/src/common/form/README.md @@ -0,0 +1,150 @@ +# Forms and validation + +## Form definition + +```tsx +import React from 'react' +import * as yup from 'yup' +import { useTranslation } from 'react-i18next' +import { Grid, TextField, Button } from '@material-ui/core' + +import { AlertStore } from 'stores/AlertStore' +import useForm, { translateError, customValidators } from 'common/form/useForm' + +export type FormData = { + email: string +} + +const validationSchema: yup.SchemaOf = yup.object().defined().shape({ + email: yup.string().email().required(), +}) + +const defaults: FormData = { + email: '', +} + +export type MyFormProps = { initialValues?: FormData } + +export default function MyForm({ initialValues = defaults }: MyFormProps) { + const { t } = useTranslation() + + const { formik } = useForm({ + initialValues, + validationSchema, + onSubmit: (values) => { + console.log(values) + }, + }) + + return ( +
+ + + + + + + + +
+ ) +} +``` + +## Form usage + +```tsx + + + +``` + +## Validation + +### Default translations + +Simple strings are mapped directly to their respective translation + +```json +{ + "invalid": "Field is invalid", + "required": "Required field" +} +``` + +```tsx +setLocale({ + mixed: { + default: 'validation:invalid', + required: 'validation:required', + }, + string: { + email: 'validation:email', + }, +}) +``` + +### Default translations with interpolation + +Complex translation keys are being evaluated upon translation + +```json +{ + "field-too-short": "Field should be at least {{min}} symbols", + "field-too-long": "Field should be maximum {{max}} symbols" +} +``` + +```tsx +setLocale({ + string: { + min: ({ min }: { min: number }) => ({ + key: 'validation:field-too-short', + values: { min }, + }), + max: ({ max }: { max: number }) => ({ + key: 'validation:field-too-long', + values: { max }, + }), + }, +}) +``` + +#### Custom translations in validation schema + +Commonly used translations with the same translation key + +```tsx +yup.string().min(6 customValidators.passwordMin) +``` + +#### Inline translations in validation schema + +Custom translations with keys defined right next to the form + +```tsx +const validationSchema: yup.SchemaOf = yup + .object() + .defined() + .shape({ + password: yup.string().min(6, ({ min }) => ({ + key: 'validation:password-min', + values: { min }, + })), + }) +``` diff --git a/src/common/form/models.ts b/src/common/form/models.ts deleted file mode 100644 index 0cd9c61c6..000000000 --- a/src/common/form/models.ts +++ /dev/null @@ -1,24 +0,0 @@ -export type LoginForm = { - email: string - password: string -} -export type RegisterForm = { - firstName: string - lastName: string - email: string - password: string -} -export type ForgottenPasswordForm = { - email: string -} -export type ChangePasswordForm = { - password: string - confirmPassword: string -} - -export enum ValidationSchema { - LOGIN = 'login', - REGISTER = 'register', - FORGOTTEN_PASSWORD = 'forgotten-password', - CHANGE_PASSWORD = 'change-password', -} diff --git a/src/common/form/schemas.ts b/src/common/form/schemas.ts deleted file mode 100644 index 77551169d..000000000 --- a/src/common/form/schemas.ts +++ /dev/null @@ -1,37 +0,0 @@ -import * as yup from 'yup' -import { ValidationSchema } from './models' - -export default function getValidationSchema(schema: ValidationSchema) { - const LoginSchema = yup.object().shape({ - email: yup.string().email().required(), - password: yup.string().min(6).required(), - }) - - const RegisterSchema = yup.object().shape({ - firstName: yup.string().required(), - lastName: yup.string().required(), - email: yup.string().email().required(), - password: yup.string().min(6).required(), - }) - - const ForgottenPasswordSchema = yup.object().shape({ - email: yup.string().email().required(), - }) - - const ChangePasswordSchema = yup.object().shape({ - password: yup.string().min(6).required(), - confirmPassword: yup - .string() - .required() - .oneOf([yup.ref('password'), null]), - }) - - const mapSchema: any = { - login: () => LoginSchema, - register: () => RegisterSchema, - 'forgotten-password': () => ForgottenPasswordSchema, - 'change-password': () => ChangePasswordSchema, - } - - return mapSchema[schema]() -} diff --git a/src/common/form/useForm.ts b/src/common/form/useForm.ts new file mode 100644 index 000000000..d7c015881 --- /dev/null +++ b/src/common/form/useForm.ts @@ -0,0 +1,13 @@ +import { FormikConfig, useFormik } from 'formik' + +export { translateError, customValidators } from 'common/form/validation' + +export default function useForm({ + validateOnChange = false, + validateOnBlur = false, + ...formikProps +}: FormikConfig) { + const formik = useFormik({ validateOnChange, validateOnBlur, ...formikProps }) + + return { formik } +} diff --git a/src/common/form/useFormikHook.ts b/src/common/form/useFormikHook.ts deleted file mode 100644 index d6e325fbc..000000000 --- a/src/common/form/useFormikHook.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { useEffect } from 'react' -import { useTranslation } from 'react-i18next' -import { useFormik } from 'formik' -import * as yup from 'yup' -import { ValidationSchema } from './models' -import getValidationSchema from './schemas' - -export default function useFormikHook({ - initialValues, - onSubmitHandler, - schema, -}: { - initialValues: T - onSubmitHandler: (values: T) => void - schema: ValidationSchema -}) { - const { t, i18n } = useTranslation() - - yup.setLocale({ - mixed: { - default: 'field is invalid', - required: () => t('auth:validation.required'), - oneOf: ({ path }: { path: string }) => { - if (path === 'confirmPassword') { - return t('auth:validation.password-match') - } - return - }, - }, - string: { - min: ({ min }: { min: number }) => t('auth:validation.password-min', { count: min }), - email: () => t('auth:validation.email'), - }, - }) - - const formik = useFormik({ - initialValues, - validationSchema: getValidationSchema(schema), - validateOnChange: false, - validateOnBlur: false, - onSubmit: onSubmitHandler, - }) - - //Workaround for translate properly error message when the languages have been changed - useEffect(() => { - i18n.on('languageChanged', (lng) => { - Object.keys(formik.errors).forEach((fieldName) => { - if (Object.keys(formik.touched).includes(fieldName)) { - formik.validateForm() - } - }) - }) - return () => { - i18n.off('languageChanged', (lng) => { - return - }) - } - }, [formik.errors]) - - return { formik } -} diff --git a/src/common/form/validation.ts b/src/common/form/validation.ts new file mode 100644 index 000000000..64d61775d --- /dev/null +++ b/src/common/form/validation.ts @@ -0,0 +1,53 @@ +import { setLocale } from 'yup' +import { useTranslation } from 'react-i18next' + +export const translateError = ( + field: (string | undefined) | { key: string; values?: any }, +): string | undefined => { + const { t } = useTranslation() + console.log(field) + if (!field) { + return undefined + } + if (typeof field === 'string') { + return t(field) + } + return t(field.key, field.values) +} + +// Default translations: +// return 'validation:' + +// Default translations with interpolation: +// return { key: 'validation:', values: { min, max } } + +// Custom translations in validation schema: +// yup.string().min(6 customValidators.passwordMin) + +// Inline translations in validation schema: +// yup.string().min(6, ({ min }) => ({ key: 'validation:password-min', values: { min } })) + +export const customValidators = { + passwordMin: ({ min }: { min: number }) => ({ + key: 'validation:password-min', + values: { min }, + }), +} + +setLocale({ + mixed: { + default: 'validation:invalid', + required: 'validation:required', + }, + string: { + min: ({ min }: { min: number }) => ({ + key: 'validation:field-too-short', + values: { min }, + }), + max: ({ max }: { max: number }) => ({ + key: 'validation:field-too-long', + values: { max }, + }), + email: 'validation:email', + }, +}) diff --git a/src/components/auth/changePassword/ChangePasswordForm.tsx b/src/components/auth/changePassword/ChangePasswordForm.tsx new file mode 100644 index 000000000..a9bdb8386 --- /dev/null +++ b/src/components/auth/changePassword/ChangePasswordForm.tsx @@ -0,0 +1,82 @@ +import React from 'react' +import * as yup from 'yup' +import { useTranslation } from 'react-i18next' +import { Grid, TextField, Button } from '@material-ui/core' + +import useForm, { translateError, customValidators } from 'common/form/useForm' + +export type ChangePasswordFormData = { + password: string + confirmPassword: string +} + +const validationSchema: yup.SchemaOf = yup + .object() + .defined() + .shape({ + password: yup.string().min(6, customValidators.passwordMin).required(), + confirmPassword: yup + .string() + .min(6, customValidators.passwordMin) + .required() + .oneOf([yup.ref('password'), null], 'validation:password-match'), + }) + +const defaults: ChangePasswordFormData = { + password: '', + confirmPassword: '', +} + +export type ChangePasswordFormProps = { initialValues?: ChangePasswordFormData } + +export default function ChangePasswordForm({ initialValues = defaults }: ChangePasswordFormProps) { + const { t } = useTranslation() + + const onSubmit = (values: ChangePasswordFormData) => { + console.log(values) + } + + const { formik } = useForm({ initialValues, onSubmit, validationSchema }) + + return ( +
+ + + + + + + + + + + +
+ ) +} diff --git a/src/components/auth/changePassword/ChangePasswordPage.tsx b/src/components/auth/changePassword/ChangePasswordPage.tsx new file mode 100644 index 000000000..51bde6bd2 --- /dev/null +++ b/src/components/auth/changePassword/ChangePasswordPage.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import { Container } from '@material-ui/core' + +import Layout from 'components/layout/Layout' +import ChangePasswordForm from 'components/auth/changePassword/ChangePasswordForm' + +export default function ChangePasswordPage() { + const { t } = useTranslation() + + return ( + + + + + + ) +} diff --git a/src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx b/src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx new file mode 100644 index 000000000..227e0cb51 --- /dev/null +++ b/src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx @@ -0,0 +1,62 @@ +import React from 'react' +import * as yup from 'yup' +import { useTranslation } from 'react-i18next' +import { Typography, Grid, TextField, Button } from '@material-ui/core' + +import useForm, { translateError } from 'common/form/useForm' + +export type ForgottenPasswordForm = { + email: string +} + +const validationSchema: yup.SchemaOf = yup.object().defined().shape({ + email: yup.string().email().required(), +}) + +const defaults: ForgottenPasswordForm = { + email: '', +} + +export type ForgottenPasswordFormProps = { initialValues?: ForgottenPasswordForm } + +export default function ForgottenPasswordForm({ + initialValues = defaults, +}: ForgottenPasswordFormProps) { + const { t } = useTranslation() + + const onSubmit = (values: ForgottenPasswordForm) => { + console.log(values) + } + + const { formik } = useForm({ initialValues, onSubmit, validationSchema }) + + return ( +
+ + {t('auth:pages.forgotten-password.instructions')} + + + + + + + + + +
+ ) +} diff --git a/src/components/auth/forgottenPassword/ForgottenPasswordPage.tsx b/src/components/auth/forgottenPassword/ForgottenPasswordPage.tsx new file mode 100644 index 000000000..d93f968a8 --- /dev/null +++ b/src/components/auth/forgottenPassword/ForgottenPasswordPage.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import { Container } from '@material-ui/core' + +import Layout from 'components/layout/Layout' +import ForgottenPasswordForm from 'components/auth/forgottenPassword/ForgottenPasswordForm' + +export default function ForgottenPasswordPage() { + const { t } = useTranslation() + + return ( + + + + + + ) +} diff --git a/src/components/auth/login/LoginForm.tsx b/src/components/auth/login/LoginForm.tsx new file mode 100644 index 000000000..1c595f454 --- /dev/null +++ b/src/components/auth/login/LoginForm.tsx @@ -0,0 +1,81 @@ +import React from 'react' +import * as yup from 'yup' +import { useTranslation } from 'react-i18next' +import { Grid, TextField, Button } from '@material-ui/core' + +import { AlertStore } from 'stores/AlertStore' +import useForm, { translateError, customValidators } from 'common/form/useForm' + +export type LoginFormData = { + email: string + password: string +} + +const validationSchema: yup.SchemaOf = yup + .object() + .defined() + .shape({ + email: yup.string().email().required(), + password: yup.string().min(6, customValidators.passwordMin).required(), + }) + +const defaults: LoginFormData = { + email: '', + password: '', +} + +export type LoginFormProps = { initialValues?: LoginFormData } + +export default function LoginForm({ initialValues = defaults }: LoginFormProps) { + const { t } = useTranslation() + + const onSubmit = (values: LoginFormData) => { + console.log(values) + AlertStore.show(t('auth:alerts.invalid-login'), 'error') + } + + const { formik } = useForm({ initialValues, onSubmit, validationSchema }) + + return ( +
+ + + + + + + + + + + +
+ ) +} diff --git a/src/components/auth/login/LoginPage.tsx b/src/components/auth/login/LoginPage.tsx new file mode 100644 index 000000000..7a38c2465 --- /dev/null +++ b/src/components/auth/login/LoginPage.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import { Container, Grid, Box } from '@material-ui/core' + +import { routes } from 'common/routes' +import Link from 'components/shared/Link' +import Layout from 'components/layout/Layout' +import LoginForm from 'components/auth/login/LoginForm' + +export default function LoginPage() { + const { t } = useTranslation() + + return ( + + + + + + {t('nav.forgottenPassword')} + + + + + ) +} diff --git a/src/components/auth/register/RegisterForm.tsx b/src/components/auth/register/RegisterForm.tsx new file mode 100644 index 000000000..4e8ad312c --- /dev/null +++ b/src/components/auth/register/RegisterForm.tsx @@ -0,0 +1,114 @@ +import React from 'react' +import * as yup from 'yup' +import { useTranslation } from 'react-i18next' +import { Grid, TextField, Button } from '@material-ui/core' + +import useForm, { translateError, customValidators } from 'common/form/useForm' + +export type RegisterFormData = { + firstName: string + lastName: string + email: string + password: string +} + +const validationSchema: yup.SchemaOf = yup + .object() + .defined() + .shape({ + firstName: yup.string().min(3).max(10).required(), + lastName: yup.string().min(3).max(10).required(), + email: yup.string().email().required(), + password: yup.string().min(6, customValidators.passwordMin).required(), + }) + +const defaults: RegisterFormData = { + firstName: '', + lastName: '', + email: '', + password: '', +} +export type RegisterFormProps = { initialValues?: RegisterFormData } + +export default function RegisterForm({ initialValues = defaults }: RegisterFormProps) { + const { t } = useTranslation() + + const onSubmit = (values: RegisterFormData) => { + console.log(values) + } + + const { formik } = useForm({ initialValues, onSubmit, validationSchema }) + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ) +} diff --git a/src/components/auth/register/RegisterPage.tsx b/src/components/auth/register/RegisterPage.tsx new file mode 100644 index 000000000..f4110d255 --- /dev/null +++ b/src/components/auth/register/RegisterPage.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import { Container } from '@material-ui/core' + +import Layout from 'components/layout/Layout' +import RegisterForm from 'components/auth/register/RegisterForm' + +export default function RegisterPage() { + const { t } = useTranslation() + + return ( + + + + + + ) +} diff --git a/src/components/changePassword/ChangePasswordPage.tsx b/src/components/changePassword/ChangePasswordPage.tsx deleted file mode 100644 index 7506f4929..000000000 --- a/src/components/changePassword/ChangePasswordPage.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react' -import { useTranslation } from 'react-i18next' -import { Container, Grid, TextField, Button } from '@material-ui/core' - -import Layout from 'components/layout/Layout' -import { ChangePasswordForm, ValidationSchema } from 'common/form/models' -import useFormikHook from 'common/form/useFormikHook' - -export default function ChangePasswordPage() { - const { t } = useTranslation() - - const initialValues: ChangePasswordForm = { - password: '', - confirmPassword: '', - } - const onSubmitHandler = (values: ChangePasswordForm) => { - console.log(values) - } - - const { formik } = useFormikHook({ - initialValues, - onSubmitHandler, - schema: ValidationSchema.CHANGE_PASSWORD, - }) - - return ( - - -
- - - - - - - - - - - -
- - - ) -} diff --git a/src/components/forgottenPassword/ForgottenPasswordPage.tsx b/src/components/forgottenPassword/ForgottenPasswordPage.tsx deleted file mode 100644 index c84e5b475..000000000 --- a/src/components/forgottenPassword/ForgottenPasswordPage.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react' -import { useTranslation } from 'react-i18next' -import { Typography, Container, Grid, TextField, Button } from '@material-ui/core' - -import Layout from 'components/layout/Layout' -import useFormikHook from 'common/form/useFormikHook' -import { ForgottenPasswordForm, ValidationSchema } from 'common/form/models' - -export default function ForgottenPasswordPage() { - const { t } = useTranslation() - - const initialValues: ForgottenPasswordForm = { - email: '', - } - const onSubmitHandler = (values: ForgottenPasswordForm) => { - console.log(values) - } - - const { formik } = useFormikHook({ - initialValues, - onSubmitHandler, - schema: ValidationSchema.FORGOTTEN_PASSWORD, - }) - - return ( - - -
- - {t('auth:pages.forgotten-password.instructions')} - - - - - - - - - -
- - - ) -} diff --git a/src/components/login/LoginPage.tsx b/src/components/login/LoginPage.tsx deleted file mode 100644 index 1c7f31c46..000000000 --- a/src/components/login/LoginPage.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import { useTranslation } from 'react-i18next' -import { Container, Grid, TextField, Button, Box } from '@material-ui/core' - -import { routes } from 'common/routes' -import Layout from 'components/layout/Layout' -import Link from 'components/shared/Link' -import { AlertStore } from 'stores/AlertStore' -import { LoginForm, ValidationSchema } from 'common/form/models' -import useFormikHook from 'common/form/useFormikHook' - -export default function LoginPage() { - const { t } = useTranslation() - - const initialValues: LoginForm = { - email: '', - password: '', - } - const onSubmitHandler = (values: LoginForm) => { - console.log(values) - AlertStore.show(t('auth:alerts.invalid-login'), 'error') - } - - const { formik } = useFormikHook({ - initialValues, - onSubmitHandler, - schema: ValidationSchema.LOGIN, - }) - - return ( - - -
- - - - - - - - - - - -
- - - {t('nav.forgottenPassword')} - - - - - ) -} diff --git a/src/components/register/RegisterPage.tsx b/src/components/register/RegisterPage.tsx deleted file mode 100644 index 1dcb2700a..000000000 --- a/src/components/register/RegisterPage.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react' -import { useTranslation } from 'react-i18next' -import { Container, Grid, TextField, Button } from '@material-ui/core' - -import Layout from 'components/layout/Layout' -import { RegisterForm, ValidationSchema } from 'common/form/models' -import useFormikHook from 'common/form/useFormikHook' - -export default function RegisterPage() { - const { t } = useTranslation() - - const initialValues: RegisterForm = { - firstName: '', - lastName: '', - email: '', - password: '', - } - const onSubmitHandler = (values: RegisterForm) => { - console.log(values) - } - - const { formik } = useFormikHook({ - initialValues, - onSubmitHandler, - schema: ValidationSchema.REGISTER, - }) - - return ( - - -
- - - - - - - - - - - - - - - - - -
- - - ) -} diff --git a/src/pages/change-password.tsx b/src/pages/change-password.tsx index 7b51eae96..a2baf8bb8 100644 --- a/src/pages/change-password.tsx +++ b/src/pages/change-password.tsx @@ -1,10 +1,10 @@ import { GetStaticProps } from 'next' import { serverSideTranslations } from 'common/useNextLocale' -import Page from 'components/changePassword/ChangePasswordPage' +import Page from 'components/auth/changePassword/ChangePasswordPage' export const getStaticProps: GetStaticProps = async ({ locale }) => ({ props: { - i18nResources: await serverSideTranslations(locale, ['common', 'auth']), + i18nResources: await serverSideTranslations(locale, ['common', 'auth', 'validation']), }, }) diff --git a/src/pages/forgotten-password.tsx b/src/pages/forgotten-password.tsx index d743d2a41..b35c50f39 100644 --- a/src/pages/forgotten-password.tsx +++ b/src/pages/forgotten-password.tsx @@ -1,10 +1,10 @@ import { GetStaticProps } from 'next' import { serverSideTranslations } from 'common/useNextLocale' -import Page from 'components/forgottenPassword/ForgottenPasswordPage' +import Page from 'components/auth/forgottenPassword/ForgottenPasswordPage' export const getStaticProps: GetStaticProps = async ({ locale }) => ({ props: { - i18nResources: await serverSideTranslations(locale, ['common', 'auth']), + i18nResources: await serverSideTranslations(locale, ['common', 'auth', 'validation']), }, }) diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 941aedede..d78dd5494 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,10 +1,10 @@ import { GetStaticProps } from 'next' -import LoginPage from 'components/login/LoginPage' +import LoginPage from 'components/auth/login/LoginPage' import { serverSideTranslations } from 'common/useNextLocale' export const getStaticProps: GetStaticProps = async ({ locale }) => ({ props: { - i18nResources: await serverSideTranslations(locale, ['common', 'auth']), + i18nResources: await serverSideTranslations(locale, ['common', 'auth', 'validation']), }, }) diff --git a/src/pages/register.tsx b/src/pages/register.tsx index 9d9d22c3c..b66455ce7 100644 --- a/src/pages/register.tsx +++ b/src/pages/register.tsx @@ -1,10 +1,10 @@ import { GetStaticProps } from 'next' -import RegisterPage from 'components/register/RegisterPage' +import RegisterPage from 'components/auth/register/RegisterPage' import { serverSideTranslations } from 'common/useNextLocale' export const getStaticProps: GetStaticProps = async ({ locale }) => ({ props: { - i18nResources: await serverSideTranslations(locale, ['common', 'auth']), + i18nResources: await serverSideTranslations(locale, ['common', 'auth', 'validation']), }, })