Fix match email validation (for closing account) (canada-ca#2954)

Author: FestiveKyle

frontend/src/admin/OrganizationInformation.js

@@ -31,7 +31,7 @@ import { FormField } from '../components/fields/FormField'
 import { LoadingMessage } from '../components/LoadingMessage'
 import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
 import {
-  getRequirment,
+  getRequirement,
   schemaToValidation,
 } from '../utilities/fieldRequirements'
 
@@ -194,12 +194,12 @@ export function OrganizationInformation({
   const org = data.findOrganizationBySlug
 
   const updateOrgValidationSchema = schemaToValidation({
-    acronymEN: getRequirment('acronym'),
-    acronymFR: getRequirment('acronym'),
+    acronymEN: getRequirement('acronym'),
+    acronymFR: getRequirement('acronym'),
   })
 
   const removeOrgValidationSchema = schemaToValidation({
-    orgName: getRequirment('field').matches(
+    orgName: getRequirement('field').matches(
       org.name,
       t`Organization name does not match.`,
     ),

frontend/src/auth/SignInPage.js

@@ -21,7 +21,7 @@ import { LoadingMessage } from '../components/LoadingMessage'
 import { useUserVar } from '../utilities/userState'
 import { activate } from '../utilities/i18n.config'
 import {
-  getRequirment,
+  getRequirement,
   schemaToValidation,
 } from '../utilities/fieldRequirements'
 import { SIGN_IN } from '../graphql/mutations'
@@ -36,8 +36,8 @@ export default function SignInPage() {
   const { from } = location.state || { from: { pathname: '/' } }
 
   const validationSchema = schemaToValidation({
-    email: getRequirment('email'),
-    password: getRequirment('passwordSignIn'),
+    email: getRequirement('email'),
+    password: getRequirement('passwordSignIn'),
   })
 
   const [signIn, { loading }] = useMutation(SIGN_IN, {

frontend/src/createOrganization/CreateOrganizationPage.js

@@ -19,7 +19,7 @@ import { CreateOrganizationField } from '../components/fields/CreateOrganization
 import { InfoButton, InfoBox, InfoPanel } from '../components/InfoPanel'
 import { LoadingMessage } from '../components/LoadingMessage'
 import {
-  getRequirment,
+  getRequirement,
   schemaToValidation,
 } from '../utilities/fieldRequirements'
 import { CREATE_ORGANIZATION } from '../graphql/mutations'
@@ -33,8 +33,8 @@ export default function CreateOrganizationPage() {
     isVisible: false,
   })
 
-  const fieldRequirement = getRequirment('field')
-  const acronymRequirement = getRequirment('acronym').required(
+  const fieldRequirement = getRequirement('field')
+  const acronymRequirement = getRequirement('acronym').required(
     i18n._(t`This field cannot be empty`),
   )
 

frontend/src/user/UserPage.js

@@ -232,12 +232,14 @@ export default function UserPage() {
         <Formik
           validateOnBlur={false}
           initialValues={{
-            confirmEmail: '',
+            matchEmail: '',
           }}
           initialTouched={{
-            confirmEmail: true,
+            matchEmail: true,
           }}
-          validationSchema={createValidationSchema(['confirmEmail'])}
+          validationSchema={createValidationSchema(['matchEmail'], {
+            matches: userName,
+          })}
           onSubmit={async () => {
             await closeAccount({})
             signOut()
@@ -265,7 +267,7 @@ export default function UserPage() {
                   </Text>
 
                   <FormField
-                    name="confirmEmail"
+                    name="matchEmail"
                     label={t`User Email`}
                     placeholder={userName}
                   />

frontend/src/utilities/fieldRequirements.js

@@ -7,14 +7,14 @@ import {
   string as stringProp,
 } from 'prop-types'
 
-const getSchema = () => {
+const getSchema = (options) => {
   return {
     email: string()
       .required(i18n._(t`Email cannot be empty`))
       .email(i18n._(t`Invalid email`)),
-    confirmEmail: string()
+    matchEmail: string()
       .required(i18n._(t`Email cannot be empty`))
-      .oneOf([ref('userName')], t`User email does not match`),
+      .matches(options?.matches, t`User email does not match`),
     displayName: string().required(i18n._(t`Display name cannot be empty`)),
     password: string()
       .required(i18n._(t`Password cannot be empty`))
@@ -59,28 +59,28 @@ const getSchema = () => {
   }
 }
 
-const filterSchema = (keyArray) => {
-  const schema = getSchema()
+const filterSchema = (keyArray, options) => {
+  const schema = getSchema(options)
 
   return keyArray.reduce((selectedSchema, currentKey) => {
     selectedSchema[currentKey] = schema[currentKey]
     return selectedSchema
   }, {})
 }
 
-export const getRequirment = (key) => {
-  return getSchema()[key]
+export const getRequirement = (key, options) => {
+  return getSchema(options)[key]
 }
 
 export const schemaToValidation = (schema) => {
   return object().shape(schema)
 }
 
-export const createValidationSchema = (keyArray) => {
-  return schemaToValidation(filterSchema(keyArray))
+export const createValidationSchema = (keyArray, options) => {
+  return schemaToValidation(filterSchema(keyArray, options))
 }
 
-getRequirment.propTypes = {
+getRequirement.propTypes = {
   keyArray: stringProp.isRequired,
 }