diff --git a/packages/web/src/components/Form/index.jsx b/packages/web/src/components/Form/index.jsx
index 614873f7..352b0a69 100644
--- a/packages/web/src/components/Form/index.jsx
+++ b/packages/web/src/components/Form/index.jsx
@@ -46,7 +46,12 @@ function Form(props) {
return (
-
diff --git a/packages/web/src/components/InstallationForm/index.jsx b/packages/web/src/components/InstallationForm/index.jsx
index 80d66b6c..6e443302 100644
--- a/packages/web/src/components/InstallationForm/index.jsx
+++ b/packages/web/src/components/InstallationForm/index.jsx
@@ -2,35 +2,55 @@ import * as React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
-import { Alert } from '@mui/material';
+import Alert from '@mui/material/Alert';
import LoadingButton from '@mui/lab/LoadingButton';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
-import { enqueueSnackbar } from 'notistack';
import { useQueryClient } from '@tanstack/react-query';
import Link from '@mui/material/Link';
+import { getGeneralErrorMessage } from 'helpers/errors';
import useFormatMessage from 'hooks/useFormatMessage';
import useInstallation from 'hooks/useInstallation';
import * as URLS from 'config/urls';
import Form from 'components/Form';
import TextField from 'components/TextField';
-const validationSchema = yup.object().shape({
- fullName: yup.string().trim().required('installationForm.mandatoryInput'),
- email: yup
- .string()
- .trim()
- .email('installationForm.validateEmail')
- .required('installationForm.mandatoryInput'),
- password: yup.string().required('installationForm.mandatoryInput'),
- confirmPassword: yup
- .string()
- .required('installationForm.mandatoryInput')
- .oneOf([yup.ref('password')], 'installationForm.passwordsMustMatch'),
-});
+const getValidationSchema = (formatMessage) => {
+ const getMandatoryInputMessage = (inputNameId) =>
+ formatMessage('installationForm.mandatoryInput', {
+ inputName: formatMessage(inputNameId),
+ });
-const initialValues = {
+ return yup.object().shape({
+ fullName: yup
+ .string()
+ .trim()
+ .required(
+ getMandatoryInputMessage('installationForm.fullNameFieldLabel'),
+ ),
+ email: yup
+ .string()
+ .trim()
+ .required(getMandatoryInputMessage('installationForm.emailFieldLabel'))
+ .email(formatMessage('installationForm.validateEmail')),
+ password: yup
+ .string()
+ .required(getMandatoryInputMessage('installationForm.passwordFieldLabel'))
+ .min(6, formatMessage('installationForm.passwordMinLength')),
+ confirmPassword: yup
+ .string()
+ .required(
+ getMandatoryInputMessage('installationForm.confirmPasswordFieldLabel'),
+ )
+ .oneOf(
+ [yup.ref('password')],
+ formatMessage('installationForm.passwordsMustMatch'),
+ ),
+ });
+};
+
+const defaultValues = {
fullName: '',
email: '',
password: '',
@@ -39,7 +59,7 @@ const initialValues = {
function InstallationForm() {
const formatMessage = useFormatMessage();
- const install = useInstallation();
+ const { mutateAsync: install, isSuccess, isPending } = useInstallation();
const queryClient = useQueryClient();
const handleOnRedirect = () => {
@@ -48,21 +68,38 @@ function InstallationForm() {
});
};
- const handleSubmit = async (values) => {
- const { fullName, email, password } = values;
+ const handleSubmit = async ({ fullName, email, password }, e, setError) => {
try {
- await install.mutateAsync({
+ await install({
fullName,
email,
password,
});
} catch (error) {
- enqueueSnackbar(
- error?.message || formatMessage('installationForm.error'),
- {
- variant: 'error',
- },
- );
+ const errors = error?.response?.data?.errors;
+ if (errors) {
+ const fieldNames = Object.keys(defaultValues);
+ Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+ if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+ setError(fieldName, {
+ type: 'fieldRequestError',
+ message: fieldErrors.join(', '),
+ });
+ }
+ });
+ }
+
+ const generalError = getGeneralErrorMessage({
+ error,
+ fallbackMessage: formatMessage('installationForm.error'),
+ });
+
+ if (generalError) {
+ setError('root.general', {
+ type: 'requestError',
+ message: generalError,
+ });
+ }
}
};
@@ -82,11 +119,13 @@ function InstallationForm() {
{formatMessage('installationForm.title')}