test: use updated selector for create admin button in installation form

.gitea/workflows/registry.yml

@@ -1,52 +0,0 @@
-name: release-tag
-on:
-  push:
-    branches:
-      - 'main'
-jobs:
-  release-image:
-    runs-on: ubuntu-latest
-    env:
-      DOCKER_ORG: groot
-      DOCKER_LATEST: latest
-      RUNNER_TOOL_CACHE: /toolcache
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-
-      - name: Set up Docker BuildX
-        uses: docker/setup-buildx-action@v2
-        with: # replace it with your local IP
-          config-inline: |
-            [registry."git.send.nrw"] 
-              http = true
-              insecure = true                        
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
-        with:
-          registry: git.send.nrw # replace it with your local IP
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-          
-      - name: Get Meta
-        id: meta
-        run: |
-          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
-          echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT                          
-
-      - name: Build and push
-        uses: docker/build-push-action@v4
-        with:
-          context: ./docker
-          file: ./docker/Dockerfile.compose
-          entrypoint: ./docker/compose-entrypoint.sh
-          platforms: |
-            linux/amd64                                   
-          push: true
-          tags: | # replace it with your local IP and tags
-            git.send.nrw/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}
-            git.send.nrw/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ env.DOCKER_LATEST }}

docker-compose.yml

@@ -1,7 +1,10 @@
 version: '3.9'
 services:
   main:
-    image: git.send.nrw/groot/automatisch:latest
+    build:
+      context: ./docker
+      dockerfile: Dockerfile.compose
+    entrypoint: /compose-entrypoint.sh
     ports:
       - '3000:3000'
     depends_on:
@@ -25,7 +28,10 @@ services:
     volumes:
       - automatisch_storage:/automatisch/storage
   worker:
-    image: git.send.nrw/groot/automatisch:latest
+    build:
+      context: ./docker
+      dockerfile: Dockerfile.compose
+    entrypoint: /compose-entrypoint.sh
     depends_on:
       - main
     environment:

packages/backend/src/queues/action.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const actionQueue = new Queue('action', redisConnection);
+
+actionQueue.on('error', (error) => {
+  if (error.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed Redis and it is running.',
+      error
+    );
+
+    process.exit();
+  }
+
+  logger.error('Error happened in action queue!', error);
+});
 
-const actionQueue = generateQueue('action');
 export default actionQueue;

packages/backend/src/queues/delete-user.ee.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const deleteUserQueue = new Queue('delete-user', redisConnection);
+
+deleteUserQueue.on('error', (error) => {
+  if (error.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed Redis and it is running.',
+      error
+    );
+
+    process.exit();
+  }
+
+  logger.error('Error happened in delete user queue!', error);
+});
 
-const deleteUserQueue = generateQueue('delete-user');
 export default deleteUserQueue;

packages/backend/src/queues/email.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const emailQueue = new Queue('email', redisConnection);
+
+emailQueue.on('error', (error) => {
+  if (error.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed Redis and it is running.',
+      error
+    );
+
+    process.exit();
+  }
+
+  logger.error('Error happened in email queue!', error);
+});
 
-const emailQueue = generateQueue('email');
 export default emailQueue;

packages/backend/src/queues/flow.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const flowQueue = new Queue('flow', redisConnection);
+
+flowQueue.on('error', (error) => {
+  if (error.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed Redis and it is running.',
+      error
+    );
+
+    process.exit();
+  }
+
+  logger.error('Error happened in flow queue!', error);
+});
 
-const flowQueue = generateQueue('flow');
 export default flowQueue;

packages/backend/src/queues/queue.js

@@ -1,44 +0,0 @@
-import process from 'process';
-import { Queue } from 'bullmq';
-import redisConfig from '../config/redis.js';
-import logger from '../helpers/logger.js';
-
-const CONNECTION_REFUSED = 'ECONNREFUSED';
-
-const redisConnection = {
-  connection: redisConfig,
-};
-
-export const generateQueue = (queueName, options) => {
-  const queue = new Queue(queueName, redisConnection);
-
-  queue.on('error', (error) => queueOnError(error, queueName));
-
-  if (options?.runDaily) addScheduler(queueName, queue);
-
-  return queue;
-};
-
-const queueOnError = (error, queueName) => {
-  if (error.code === CONNECTION_REFUSED) {
-    const errorMessage =
-      'Make sure you have installed Redis and it is running.';
-
-    logger.error(errorMessage, error);
-
-    process.exit();
-  }
-
-  logger.error(`Error happened in ${queueName} queue!`, error);
-};
-
-const addScheduler = (queueName, queue) => {
-  const everydayAtOneOclock = '0 1 * * *';
-
-  queue.add(queueName, null, {
-    jobId: queueName,
-    repeat: {
-      pattern: everydayAtOneOclock,
-    },
-  });
-};

packages/backend/src/queues/remove-cancelled-subscriptions.ee.js

@@ -1,8 +1,40 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
 
-const removeCancelledSubscriptionsQueue = generateQueue(
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const removeCancelledSubscriptionsQueue = new Queue(
   'remove-cancelled-subscriptions',
-  { runDaily: true }
+  redisConnection
 );
 
+removeCancelledSubscriptionsQueue.on('error', (error) => {
+  if (error.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed Redis and it is running.',
+      error
+    );
+
+    process.exit();
+  }
+
+  logger.error(
+    'Error happened in remove cancelled subscriptions queue!',
+    error
+  );
+});
+
+removeCancelledSubscriptionsQueue.add('remove-cancelled-subscriptions', null, {
+  jobId: 'remove-cancelled-subscriptions',
+  repeat: {
+    pattern: '0 1 * * *',
+  },
+});
+
 export default removeCancelledSubscriptionsQueue;

packages/backend/src/queues/trigger.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const triggerQueue = new Queue('trigger', redisConnection);
+
+triggerQueue.on('error', (error) => {
+  if (error.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed Redis and it is running.',
+      error
+    );
+
+    process.exit();
+  }
+
+  logger.error('Error happened in trigger queue!', error);
+});
 
-const triggerQueue = generateQueue('trigger');
 export default triggerQueue;

packages/e2e-tests/fixtures/admin-setup-page.js

@@ -1,4 +1,4 @@
-import { BasePage } from "./base-page";
+import { BasePage } from './base-page';
 const { faker } = require('@faker-js/faker');
 const { expect } = require('@playwright/test');
 
@@ -6,16 +6,18 @@ export class AdminSetupPage extends BasePage {
   path = '/installation';
 
   /**
-  * @param {import('@playwright/test').Page} page
-  */
+   * @param {import('@playwright/test').Page} page
+   */
   constructor(page) {
     super(page);
 
     this.fullNameTextField = this.page.getByTestId('fullName-text-field');
     this.emailTextField = this.page.getByTestId('email-text-field');
     this.passwordTextField = this.page.getByTestId('password-text-field');
-    this.repeatPasswordTextField = this.page.getByTestId('repeat-password-text-field');
-    this.createAdminButton = this.page.getByTestId('signUp-button');
+    this.repeatPasswordTextField = this.page.getByTestId(
+      'repeat-password-text-field'
+    );
+    this.createAdminButton = this.page.getByTestId('installation-button');
     this.invalidFields = this.page.locator('p.Mui-error');
     this.successAlert = this.page.getByTestId('success-alert');
   }
@@ -46,7 +48,7 @@ export class AdminSetupPage extends BasePage {
     await this.repeatPasswordTextField.fill(testUser.wronglyRepeatedPassword);
   }
 
-  async submitAdminForm()  {
+  async submitAdminForm() {
     await this.createAdminButton.click();
   }
 
@@ -59,7 +61,10 @@ export class AdminSetupPage extends BasePage {
   }
 
   async expectSuccessMessageToContainLoginLink() {
-    await expect(await this.successAlert.locator('a')).toHaveAttribute('href', '/login');
+    await expect(await this.successAlert.locator('a')).toHaveAttribute(
+      'href',
+      '/login'
+    );
   }
 
   generateUser() {
@@ -69,7 +74,7 @@ export class AdminSetupPage extends BasePage {
       fullName: faker.person.fullName(),
       email: faker.internet.email(),
       password: faker.internet.password(),
-      wronglyRepeatedPassword: faker.internet.password()
+      wronglyRepeatedPassword: faker.internet.password(),
     };
   }
-};
+}

packages/web/src/components/Form/index.jsx

@@ -46,7 +46,12 @@ function Form(props) {
 
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
+      <form
+        onSubmit={methods.handleSubmit((data, event) =>
+          onSubmit?.(data, event, methods.setError),
+        )}
+        {...formProps}
+      >
         {render ? render(methods) : children}
       </form>
     </FormProvider>

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')}
       </Typography>
       <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
         mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
           <>
             <TextField
               label={formatMessage('installationForm.fullNameFieldLabel')}
@@ -95,19 +134,12 @@ function InstallationForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
-              helperText={
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage(
-                        'installationForm.fullNameFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.fullName}
+              helperText={errors?.fullName?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage('installationForm.emailFieldLabel')}
               name="email"
@@ -115,19 +147,12 @@ function InstallationForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
-              helperText={
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage(
-                        'installationForm.emailFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.email}
+              helperText={errors?.email?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage('installationForm.passwordFieldLabel')}
               name="password"
@@ -135,19 +160,12 @@ function InstallationForm() {
               margin="dense"
               type="password"
               data-test="password-text-field"
-              error={touchedFields.password && !!errors?.password}
-              helperText={
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage(
-                        'installationForm.passwordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.password}
+              helperText={errors?.password?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage(
                 'installationForm.confirmPasswordFieldLabel',
@@ -157,52 +175,53 @@ function InstallationForm() {
               margin="dense"
               type="password"
               data-test="repeat-password-text-field"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
-              helperText={
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'installationForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.confirmPassword}
+              helperText={errors?.confirmPassword?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
 
+            {errors?.root?.general && (
+              <Alert data-test="error-alert" severity="error" sx={{ mt: 2 }}>
+                {errors.root.general.message}
+              </Alert>
+            )}
+
+            {isSuccess && (
+              <Alert
+                data-test="success-alert"
+                severity="success"
+                sx={{ mt: 2 }}
+              >
+                {formatMessage('installationForm.success', {
+                  link: (str) => (
+                    <Link
+                      component={RouterLink}
+                      to={URLS.LOGIN}
+                      onClick={handleOnRedirect}
+                      replace
+                    >
+                      {str}
+                    </Link>
+                  ),
+                })}
+              </Alert>
+            )}
             <LoadingButton
               type="submit"
               variant="contained"
               color="primary"
-              sx={{ boxShadow: 2, mt: 3 }}
-              loading={install.isPending}
-              disabled={install.isSuccess}
+              sx={{ boxShadow: 2, mt: 2 }}
+              loading={isPending}
+              disabled={isSuccess}
               fullWidth
-              data-test="signUp-button"
+              data-test="installation-button"
             >
               {formatMessage('installationForm.submit')}
             </LoadingButton>
           </>
         )}
       />
-      {install.isSuccess && (
-        <Alert data-test="success-alert" severity="success" sx={{ mt: 3 }}>
-          {formatMessage('installationForm.success', {
-            link: (str) => (
-              <Link
-                component={RouterLink}
-                to={URLS.LOGIN}
-                onClick={handleOnRedirect}
-                replace
-              >
-                {str}
-              </Link>
-            ),
-          })}
-        </Alert>
-      )}
     </Paper>
   );
 }

packages/web/src/components/SignUpForm/index.ee.jsx

@@ -3,33 +3,52 @@ import { useNavigate } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
+import Alert from '@mui/material/Alert';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
+import { getGeneralErrorMessage } from 'helpers/errors';
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useRegisterUser from 'hooks/useRegisterUser';
 
-const validationSchema = yup.object().shape({
-  fullName: yup.string().trim().required('signupForm.mandatoryInput'),
-  email: yup
-    .string()
-    .trim()
-    .email('signupForm.validateEmail')
-    .required('signupForm.mandatoryInput'),
-  password: yup.string().required('signupForm.mandatoryInput'),
-  confirmPassword: yup
-    .string()
-    .required('signupForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
-});
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('signupForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });
 
-const initialValues = {
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.fullNameFieldLabel')),
+    email: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.emailFieldLabel'))
+      .email(formatMessage('signupForm.validateEmail')),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('signupForm.passwordFieldLabel'))
+      .min(6, formatMessage('signupForm.passwordMinLength')),
+    confirmPassword: yup
+      .string()
+      .required(
+        getMandatoryInputMessage('signupForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('signupForm.passwordsMustMatch'),
+      ),
+  });
+};
+
+const defaultValues = {
   fullName: '',
   email: '',
   password: '',
@@ -40,7 +59,6 @@ function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: registerUser, isPending: isRegisterUserPending } =
     useRegisterUser();
   const { mutateAsync: createAccessToken, isPending: loginLoading } =
@@ -52,7 +70,7 @@ function SignUpForm() {
     }
   }, [authentication.isAuthenticated]);
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async (values, e, setError) => {
     try {
       const { fullName, email, password } = values;
       await registerUser({
@@ -67,25 +85,28 @@ function SignUpForm() {
       const { token } = data;
       authentication.updateToken(token);
     } catch (error) {
-      const errors = error?.response?.data?.errors
-        ? Object.values(error.response.data.errors)
-        : [];
+      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(', '),
+            });
+          }
+        });
+      }
 
-      if (errors.length) {
-        for (const [error] of errors) {
-          enqueueSnackbar(error, {
-            variant: 'error',
-            SnackbarProps: {
-              'data-test': 'snackbar-sign-up-error',
-            },
-          });
-        }
-      } else {
-        enqueueSnackbar(error?.message || formatMessage('signupForm.error'), {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-sign-up-error',
-          },
+      const generalError = getGeneralErrorMessage({
+        error,
+        fallbackMessage: formatMessage('signupForm.error'),
+      });
+
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
         });
       }
     }
@@ -108,11 +129,13 @@ function SignUpForm() {
       </Typography>
 
       <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
         mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
           <>
             <TextField
               label={formatMessage('signupForm.fullNameFieldLabel')}
@@ -121,14 +144,9 @@ function SignUpForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
-              helperText={
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage('signupForm.fullNameFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.fullName}
+              helperText={errors?.fullName?.message}
+              required
             />
 
             <TextField
@@ -138,14 +156,9 @@ function SignUpForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
-              helperText={
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage('signupForm.emailFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.email}
+              helperText={errors?.email?.message}
+              required
             />
 
             <TextField
@@ -154,14 +167,9 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={touchedFields.password && !!errors?.password}
-              helperText={
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage('signupForm.passwordFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.password}
+              helperText={errors?.password?.message}
+              required
             />
 
             <TextField
@@ -170,19 +178,21 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
-              helperText={
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'signupForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.confirmPassword}
+              helperText={errors?.confirmPassword?.message}
+              required
             />
 
+            {errors?.root?.general && (
+              <Alert
+                data-test="alert-sign-up-error"
+                severity="error"
+                sx={{ mt: 2 }}
+              >
+                {errors.root.general.message}
+              </Alert>
+            )}
+
             <LoadingButton
               type="submit"
               variant="contained"

packages/web/src/helpers/errors.js

@@ -0,0 +1,18 @@
+// Helpers to extract errors received from the API
+
+export const getGeneralErrorMessage = ({ error, fallbackMessage }) => {
+  if (!error) {
+    return;
+  }
+
+  const errors = error?.response?.data?.errors;
+  const generalError = errors?.general;
+
+  if (generalError && Array.isArray(generalError)) {
+    return generalError.join(' ');
+  }
+
+  if (!errors) {
+    return error?.message || fallbackMessage;
+  }
+};

packages/web/src/locales/en.json

@@ -138,6 +138,7 @@
   "installationForm.submit": "Create admin",
   "installationForm.validateEmail": "Email must be valid.",
   "installationForm.passwordsMustMatch": "Passwords must match.",
+  "installationForm.passwordMinLength": "Password must be at least 6 characters long.",
   "installationForm.mandatoryInput": "{inputName} is required.",
   "installationForm.success": "The admin account has been created, and thus, the installation has been completed. You can now log in <link>here</link>.",
   "installationForm.error": "Something went wrong. Please try again.",
@@ -149,6 +150,7 @@
   "signupForm.submit": "Sign up",
   "signupForm.validateEmail": "Email must be valid.",
   "signupForm.passwordsMustMatch": "Passwords must match.",
+  "signupForm.passwordMinLength": "Password must be at least 6 characters long.",
   "signupForm.mandatoryInput": "{inputName} is required.",
   "signupForm.error": "Something went wrong. Please try again.",
   "loginForm.title": "Login",