[TMA263] Added Phone Verification UI (#74)

* [TMA263] Added Phone Verification UI

* include email field

Co-authored-by: george <grus6928@gmail.com>
Co-authored-by: hsalhab <husam_salhab@brown.edu>

1 files changed, 43 insertions, 5 deletions

diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 515059f9..c0fde48d 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -21,7 +21,7 @@ import {
   Background,
 } from '../../components';
 
-import {nameRegex} from '../../constants';
+import {nameRegex, emailRegex} from '../../constants';
 
 type RegistrationScreenTwoRouteProp = RouteProp<
   OnboardingStackParams,
@@ -45,9 +45,10 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
 }) => {
   // refs for changing focus
   const lnameRef = useRef();
+  const emailRef = useRef();
 
   const params = route.params;
-  const email: string = params!.email;
+  const phone: string = params!.phone;
   /**
    * Handles focus change to the next input field.
    * @param field key for field to move focus onto
@@ -58,6 +59,10 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
         const lnameField: any = lnameRef.current;
         lnameField.focus();
         break;
+      case 'email':
+        const emailField: any = emailRef.current;
+        emailField.focus();
+        break;
       default:
         return;
     }
@@ -66,9 +71,11 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
   // registration form state
   const [form, setForm] = useState({
     fname: '',
-    lname: '',
+    lname: '',    
+    email: '',
     isValidFname: false,
     isValidLname: false,
+    isValidEmail: false,
     attemptedSubmit: false,
     token: '',
   });
@@ -97,6 +104,18 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
     });
   };
 
+    /*
+   * Handles changes to the email field value and verifies the input by updating state and running a validation function.
+   */
+  const handleEmailUpdate = (email: string) => {
+    let isValidEmail: boolean = emailRegex.test(email);
+    setForm({
+      ...form,
+      email,
+      isValidEmail,
+    });
+  };
+
   /**
    * Handles a click on the "next" arrow button by navigating to RegistrationThree if First Name and Last Name are filled
    */
@@ -108,11 +127,12 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
       });
     }
     try {
-      if (form.isValidFname && form.isValidLname) {
+      if (form.isValidFname && form.isValidLname && form.isValidEmail) {
         navigation.navigate('RegistrationThree', {
           firstName: form.fname,
           lastName: form.lname,
-          email: email,
+          email: form.email,
+          phone: phone,
         });
       } else {
         setForm({...form, attemptedSubmit: false});
@@ -187,6 +207,24 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
           width={280}
           onSubmitEditing={goToRegisterThree}
         />
+        <TaggInput
+          accessibilityHint="Enter your email."
+          accessibilityLabel="Email input field."
+          placeholder="Email"
+          autoCompleteType="email"
+          textContentType="emailAddress"
+          autoCapitalize="none"
+          returnKeyType="next"
+          keyboardType="email-address"
+          onChangeText={handleEmailUpdate}
+          blurOnSubmit={false}
+          ref={emailRef}
+          valid={form.isValidEmail}
+          invalidWarning={'Please enter a valid email address.'}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+          onSubmitEditing={goToRegisterThree}
+        />
       </KeyboardAvoidingView>
       <Footer />
     </Background>