Added email confirmation field to registration (#115)

Co-authored-by: michelle <Michelle Wan>

Author: mwan-ep

src/RegistrationForm.tsx

@@ -10,6 +10,7 @@ interface FormValues {
   firstName: string,
   lastName: string,
   email: string,
+  emailConfirm: string,
   password: string,
   passwordConfirm: string,
 }
@@ -27,6 +28,7 @@ export const RegistrationForm: React.FC = (props) => {
     firstName: '',
     lastName: '',
     email: '',
+    emailConfirm: '',
     password: '',
     passwordConfirm: '',
   };
@@ -42,6 +44,12 @@ export const RegistrationForm: React.FC = (props) => {
     if (!values.email) {
       errors.email = t('required');
     }
+    if (!values.emailConfirm) {
+      errors.emailConfirm = t('required');
+    }
+    if (values.email && values.emailConfirm && values.email !== values.emailConfirm) {
+      errors.emailConfirm = t('email-slash-username-confirm-error');
+    }
     if (!values.password) {
       errors.password = t('required');
     }
@@ -138,6 +146,15 @@ export const RegistrationForm: React.FC = (props) => {
               {errors.email ? errors.email : null}
             </div>
           </div>
+          <div className={`epform__group ${errors.emailConfirm ? '--error' : ''}`}>
+            <label htmlFor="email"  className="epform__label">
+              {t('email-slash-username-confirmation')} *
+            </label>
+            <input id="email" name="emailConfirm" className="epform__input" type="email" onChange={handleChange} value={values.emailConfirm} />
+            <div className="epform__error">
+              {errors.emailConfirm ? errors.emailConfirm : null}
+            </div>
+          </div>
           <div className={`epform__group ${errors.password ? '--error' : ''}`}>
             <label htmlFor="password" className="epform__label">
               {t('password')} *

src/locales/en.json

@@ -91,11 +91,13 @@
   "password": "Password",
   "register": "Register",
   "invalid-email-or-password": "Your email or password is invalid.",
+  "email-slash-username-confirm-error": "The specified emails/usernames do not match.",
   "password-confirm-error": "The specified passwords do not match",
   "register-new-account": "Register a New Account",
   "first-name": "First Name",
   "last-name": "Last Name",
   "email-slash-username": "Email/Username",
+  "email-slash-username-confirmation": "Email/Username Confirmation",
   "password-confirmation": "Password Confirmation",
   "submit": "Submit",
   "required": "Required",