1119 - Confirm password in registration field is now required (#1214)

* Confirm password - required

* Extraction of functionality

* prettier fix

* Added confirmation password for RegisterDialog

src/common/form/validation.ts

@@ -1,5 +1,6 @@
 import { setLocale, string } from 'yup'
 import { TFunction } from 'next-i18next'
+import * as yup from 'yup'
 export type TranslatableField =
   | (string | undefined)
   | { key: string; values?: Record<string, string> }
@@ -39,6 +40,7 @@ export const customValidators = {
     values: { max },
   }),
   password: () => ({ key: 'validation:password' }),
+  confirmPassword: () => ({ key: 'validation:password-match' }),
   phone: () => ({ key: 'validation:phone' }),
   name: () => ({ key: 'validation:invalid' }),
 }
@@ -76,3 +78,8 @@ export const password = string()
   .min(8, customValidators.passwordMin)
   .max(30, customValidators.passwordMax)
   .matches(passwordRegex, customValidators.password)
+
+export const confirmPassword = string().oneOf(
+  [yup.ref('password')],
+  customValidators.confirmPassword,
+)

src/components/auth/register/RegisterForm.tsx

@@ -6,7 +6,7 @@ import { signIn } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'
-import { email, password, name } from 'common/form/validation'
+import { email, password, name, confirmPassword } from 'common/form/validation'
 import { useRegister } from 'service/auth'
 import { AlertStore } from 'stores/AlertStore'
 import GenericForm from 'components/common/form/GenericForm'
@@ -21,6 +21,7 @@ export type RegisterFormData = {
   lastName: string
   email: string
   password: string
+  confirmPassword: string
   terms: boolean
   gdpr: boolean
 }
@@ -33,7 +34,7 @@ const validationSchema: yup.SchemaOf<RegisterFormData> = yup
     lastName: name.required(),
     email: email.required(),
     password: password.required(),
-    'confirm-password': yup.string().oneOf([yup.ref('password')], 'validation:password-match'),
+    confirmPassword: confirmPassword.required('validation:password-match'),
     terms: yup.bool().required().oneOf([true], 'validation:terms-of-use'),
     gdpr: yup.bool().required().oneOf([true], 'validation:terms-of-service'),
   })
@@ -43,6 +44,7 @@ const defaults: RegisterFormData = {
   lastName: '',
   email: '',
   password: '',
+  confirmPassword: '',
   terms: false,
   gdpr: false,
 }
@@ -71,7 +73,7 @@ export default function RegisterForm({ initialValues = defaults }: RegisterFormP
       }
       if (resp?.ok) {
         AlertStore.show(t('auth:alerts.welcome'), 'success')
-        router.push(routes.profile.index)
+        await router.push(routes.profile.index)
       }
     } catch (error) {
       console.error(error)
@@ -111,7 +113,7 @@ export default function RegisterForm({ initialValues = defaults }: RegisterFormP
         </Grid>
         <Grid item xs={12}>
           <PasswordField
-            name="confirm-password"
+            name="confirmPassword"
             label="auth:account.confirm-password"
             autoComplete="new-password"
           />

src/components/one-time-donation/RegisterDialog.tsx

@@ -24,6 +24,7 @@ export default function RegisterForm() {
     lastName: formik.values.registerLastName as string,
     email: formik.values.registerEmail as string,
     password: formik.values.registerPassword as string,
+    confirmPassword: formik.values.confirmPassword as string,
     terms: formik.values.terms as boolean,
     gdpr: formik.values.gdpr as boolean,
   }
@@ -89,6 +90,13 @@ export default function RegisterForm() {
         <Grid item xs={12}>
           <PasswordField name="registerPassword" autoComplete="new-password" />
         </Grid>
+        <Grid item xs={12}>
+          <PasswordField
+            name="confirmPassword"
+            label="auth:account.confirm-password"
+            autoComplete="new-password"
+          />
+        </Grid>
         <Grid item xs={12}>
           <Button
             size="large"

src/gql/donations.d.ts

@@ -118,6 +118,7 @@ export type OneTimeDonation = {
   registerLastName?: string
   registerEmail?: string
   registerPassword?: string
+  confirmPassword?: string
   terms?: boolean
   gdpr?: boolean
 }