Some error messages added in the RegisterForm

podkrepi-bg · Oct 11, 2023 · 143840f · 143840f
1 parent 770cd55
commit 143840f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 29 deletions.
diff --git a/src/components/client/one-time-donation/FormikStepper.tsx b/src/components/client/one-time-donation/FormikStepper.tsx
@@ -90,7 +90,7 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
       }}
       validateOnMount
       validateOnBlur>
-      {({ isSubmitting, handleSubmit, values }) => (
+      {({ isSubmitting, handleSubmit, isValid, values }) => (
         <Form
           onSubmit={handleSubmit}
           style={{
@@ -131,7 +131,7 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
               </Grid>
               <Grid item xs={12} md={6}>
                 <LoadingButton
-                  disabled={isSubmitting || hideNextButton(values.isAnonymous)}
+                  disabled={!isValid || isSubmitting || hideNextButton(values.isAnonymous)}
                   fullWidth
                   type="submit"
                   variant="contained"

diff --git a/src/components/client/one-time-donation/RegisterDialog.tsx b/src/components/client/one-time-donation/RegisterDialog.tsx
@@ -1,4 +1,4 @@
-import { Button, CircularProgress, Grid, Typography } from '@mui/material'
+import { Button, CircularProgress, FormHelperText, Grid, Typography } from '@mui/material'
 import React, { useContext, useState } from 'react'
 import { signIn } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
@@ -38,10 +38,14 @@ export default function RegisterForm() {
       setLoading(true)
       // Register in Keycloak
 
-      if (values.terms && values.gdpr) {
+      if (values.terms && values.gdpr && values.password === values.confirmPassword) {
         await register(values)
+      } else if (!values.terms) {
+        throw new Error('Terms not accepted')
+      } else if (!values.gdpr) {
+        throw new Error('GDPR not accepted')
       } else {
-        throw new Error('Terms or GDPR not accepted')
+        throw new Error('Confirm password doesn`t match')
       }
 
       // Authenticate
@@ -101,10 +105,24 @@ export default function RegisterForm() {
             label="auth:account.confirm-password"
             autoComplete="new-password"
           />
+          {formik.values.registerPassword !== formik.values.confirmPassword &&
+            formik.touched.confirmPassword && (
+              <FormHelperText sx={{ color: 'red' }}>
+                {t('validation:password-match')}
+              </FormHelperText>
+            )}
         </Grid>
         <Grid item xs={12}>
           <AcceptTermsField name="terms" />
+          {!formik.values.terms && formik.touched.terms && (
+            <FormHelperText sx={{ color: 'red' }}>{t('validation:terms-of-use')}</FormHelperText>
+          )}
           <AcceptPrivacyPolicyField name="gdpr" />
+          {!formik.values.gdpr && formik.touched.gdpr && (
+            <FormHelperText sx={{ color: 'red' }}>
+              {t('validation:terms-of-service')}
+            </FormHelperText>
+          )}
           <AcceptNewsLetterField name="newsletter" />
         </Grid>
         <Grid item xs={12}>

diff --git a/src/components/client/one-time-donation/helpers/validation-schema.ts b/src/components/client/one-time-donation/helpers/validation-schema.ts
@@ -1,5 +1,5 @@
 import * as yup from 'yup'
-import { name, phone, email, password, customValidators } from 'common/form/validation'
+import { name, phone, email, password } from 'common/form/validation'
 import { FirstStep, SecondStep, ThirdStep } from 'gql/donations'
 
 export const validateFirst: yup.SchemaOf<FirstStep> = yup
@@ -18,29 +18,23 @@ export const validateFirst: yup.SchemaOf<FirstStep> = yup
     }),
   })
 
-export const validateSecond: yup.SchemaOf<SecondStep> = yup
-  .object()
-  .defined()
-  .shape({
-    isAnonymous: yup.boolean().required(),
-    personsEmail: email.notRequired(),
-    personsFirstName: name.notRequired(),
-    personsLastName: name.notRequired(),
-    personsPhone: phone.notRequired(),
-    loginEmail: email.notRequired(),
-    loginPassword: password.notRequired(),
-    registerEmail: email.notRequired(),
-    registerFirstName: yup.string().notRequired(),
-    registerLastName: yup.string().notRequired(),
-    registerPassword: password.notRequired(),
-    confirmPassword: yup
-      .string()
-      .oneOf([yup.ref('registerPassword')], customValidators.confirmPassword)
-      .notRequired(),
-    terms: yup.boolean().oneOf([true], customValidators.terms).notRequired(),
-    gdpr: yup.boolean().oneOf([true], customValidators.gdpr).notRequired(),
-    newsletter: yup.boolean().notRequired(),
-  })
+export const validateSecond: yup.SchemaOf<SecondStep> = yup.object().defined().shape({
+  isAnonymous: yup.boolean().required(),
+  personsEmail: email.notRequired(),
+  personsFirstName: name.notRequired(),
+  personsLastName: name.notRequired(),
+  personsPhone: phone.notRequired(),
+  loginEmail: email.notRequired(),
+  loginPassword: password.notRequired(),
+  registerEmail: email.notRequired(),
+  registerFirstName: yup.string().notRequired(),
+  registerLastName: yup.string().notRequired(),
+  registerPassword: password.notRequired(),
+  confirmPassword: yup.string().notRequired(),
+  terms: yup.boolean().notRequired(),
+  gdpr: yup.boolean().notRequired(),
+  newsletter: yup.boolean().notRequired(),
+})
 
 export const validateThird: yup.SchemaOf<ThirdStep> = yup.object().defined().shape({
   message: yup.string().notRequired(),