Terms and GDPR added in the registerForm (podkrepi-bg#1617)

* Terms and GDPR added in the registerForm

* Format check added

* Some error messages added in the RegisterForm

README.md

@@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates:
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-73-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

public/locales/bg/auth.json

@@ -2,6 +2,7 @@
   "alerts": {
     "welcome": "Добре дошли!",
     "invalid-login": "Грешен потребител / парола.",
+    "register-error": "Моля, попълнете необходимата информация",
     "duplicate-email": "Потребител с такъв имейл вече съществува",
     "re-login": "Моля, влезте отново в профила си.",
     "forgotten-password-error": "Потребителя не е намерен, моля опитайте отново!",

public/locales/en/auth.json

@@ -2,6 +2,7 @@
   "alerts": {
     "welcome": "Welcome!",
     "invalid-login": "Wrong username / password.",
+    "register-error": "Please, fill in the necessary information",
     "re-login": "Please login into your account.",
     "forgotten-password-error": "User not found, please try again!",
     "forgotten-password-success": "Please check your email!",

src/common/form/validation.ts

@@ -44,6 +44,8 @@ export const customValidators = {
   phone: () => ({ key: 'validation:phone' }),
   name: () => ({ key: 'validation:invalid' }),
   paymentRef: () => ({ key: 'validation:payment-reference' }),
+  terms: () => ({ key: 'validation:terms-of-use' }),
+  gdpr: () => ({ key: 'validation:terms-of-service' }),
 }
 
 setLocale({

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'
@@ -12,6 +12,9 @@ import { useFormikContext } from 'formik'
 import { OneTimeDonation } from 'gql/donations'
 import { RegisterFormData } from 'components/client/auth/register/RegisterForm'
 import { StepsContext } from './helpers/stepperContext'
+import AcceptPrivacyPolicyField from 'components/common/form/AcceptPrivacyPolicyField'
+import AcceptTermsField from 'components/common/form/AcceptTermsField'
+import AcceptNewsLetterField from 'components/common/form/AcceptNewsletterField'
 
 export default function RegisterForm() {
   const { t } = useTranslation()
@@ -28,20 +31,30 @@ export default function RegisterForm() {
     confirmPassword: formik.values.confirmPassword as string,
     terms: formik.values.terms as boolean,
     gdpr: formik.values.gdpr as boolean,
+    newsletter: formik.values.newsletter as boolean,
   }
   const onClick = async () => {
     try {
       setLoading(true)
-
       // Register in Keycloak
-      await register(values)
+
+      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('Confirm password doesn`t match')
+      }
 
       // Authenticate
       const resp = await signIn<'credentials'>('credentials', {
         email: values.email,
         password: values.password,
         redirect: false,
       })
+
       if (resp?.error) {
         throw new Error(resp.error)
       }
@@ -54,7 +67,7 @@ export default function RegisterForm() {
     } catch (error) {
       console.error(error)
       setLoading(false)
-      AlertStore.show(t('auth:alerts.invalid-login'), 'error')
+      AlertStore.show(t('auth:alerts.register-error'), 'error')
     }
   }
 
@@ -92,6 +105,25 @@ 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}>
           <Button

src/components/client/one-time-donation/Steps.tsx

@@ -45,7 +45,11 @@ const initialValues: OneTimeDonation = {
   registerLastName: '',
   registerFirstName: '',
   registerPassword: '',
+  confirmPassword: '',
   isRecurring: false,
+  terms: false,
+  gdpr: false,
+  newsletter: false,
 }
 interface DonationStepperProps {
   onStepChange: () => void

src/components/client/one-time-donation/helpers/validation-schema.ts

@@ -30,6 +30,10 @@ export const validateSecond: yup.SchemaOf<SecondStep> = yup.object().defined().s
   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({

src/gql/donations.d.ts

@@ -143,6 +143,7 @@ export type OneTimeDonation = {
   confirmPassword?: string
   terms?: boolean
   gdpr?: boolean
+  newsletter?: boolean
 }
 
 export type DonationStep = {
@@ -162,6 +163,9 @@ export type SecondStep = {
   personsLastName?: string
   personsPhone?: string
   personsEmail?: string
+  terms?: boolean
+  gdpr?: boolean
+  newsletter?: boolean
 }
 
 export type ThirdStep = {