debugging with Ivan

1 files changed, 98 insertions, 33 deletions

diff --git a/src/screens/onboarding/RevampedOnboarding.tsx b/src/screens/onboarding/RevampedOnboarding.tsx
index bae2777c..e7ad9e41 100644
--- a/src/screens/onboarding/RevampedOnboarding.tsx
+++ b/src/screens/onboarding/RevampedOnboarding.tsx
@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/core';
 import { RouteProp } from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import { Input } from 'react-native-elements';
 import { current } from 'immer';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {
@@ -21,7 +22,7 @@ import {
   TaggInput,
   TaggSquareButton,
 } from '../../components';
-import {emailRegex, nameRegex, phoneRegex, usernameRegex} from '../../constants';
+import {emailRegex, nameRegex, passwordRegex, phoneRegex, usernameRegex} from '../../constants';
 import {
   ERROR_NEXT_PAGE,
   ERROR_PHONE_IN_USE,
@@ -31,6 +32,7 @@ import {OnboardingStackParams} from '../../routes';
 import {sendOtpStatusCode} from '../../services';
 import {BackgroundGradientType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import { createIconSetFromFontello } from 'react-native-vector-icons';
 
 type RevampedOnboardingRouteProp = RouteProp<OnboardingStackParams, 'RevampedOnboarding'>;
 type RevampedOnboardingNavigationProp = StackNavigationProp<
@@ -51,12 +53,18 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({route}) => {
     const [form, setForm] = useState({
       fname: '',
       lname: '',
+      username: '',
       phone: '',
       email: '',
+      password: '',
+      confirm: '',
       isValidFname: false,
       isValidLname: false,
       isValidPhone: false,
+      isValidUser: false,
       isValidEmail: false, 
+      isValidPassword: false,
+      passwordsMatch: false,
       attemptedSubmit: false,
       token: '',
     });
@@ -112,11 +120,13 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({route}) => {
       let isValidName: boolean = nameRegex.test(name);
       switch(nameType) {
         case 0:
+          console.log("First name")
           setForm({
             ...form,
             fname: name,
             isValidFname: isValidName,
           });
+          console.log(isValidName)
         case 1:
           setForm({
             ...form,
@@ -127,8 +137,8 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({route}) => {
           let isvalidUserName = usernameRegex.test(name);
           setForm({
             ...form,
-            fname: name,
-            isValidFname: isValidName,
+            username: name,
+            isValidUser: isValidName,
           });
         // case 3: 
         // let isValidPhone: boolean = phoneRegex.test(name);
@@ -158,36 +168,51 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({route}) => {
         isValidEmail,
       });
     };
+    const handlePasswordUpdate = (password: string) => {
+      let isValidPassword: boolean = passwordRegex.test(password);
+      let passwordsMatch: boolean = form.password === form.confirm;
+      setForm({
+        ...form,
+        password,
+        isValidPassword,
+        passwordsMatch,
+      });
+    };
 
     const formSteps: {
       placeholder: string,
-      valid: boolean,
+      valid: () => boolean,
       onChangeText: (text: string, nameType: number) => void,
     }[] = [
       {
         placeholder: 'First Name',
-        valid: form.isValidFname,
-        onChangeText: handleNameUpdate,
+        valid: () => form.isValidFname,
+        onChangeText: (text, _) => handleNameUpdate(text, 0),
       },
       {
         placeholder: 'Last Name',
-        valid: form.isValidLname,
-        onChangeText: handleNameUpdate,
+        valid: () => form.isValidLname,
+        onChangeText: (text, _) => handleNameUpdate(text, 1),
       },
       {
         placeholder: 'Phone',
-        valid: form.isValidPhone,
+        valid: () => form.isValidPhone,
         onChangeText: handlePhoneUpdate,
       },
       {
-        placeholder: 'Email',
-        valid: form.isValidEmail,
+        placeholder: 'School Email',
+        valid: () => form.isValidEmail,
         onChangeText: handleEmailUpdate,
       },
       {
         placeholder: 'Username',
-        valid: form.isValidLname,
-        onChangeText: handleNameUpdate,
+        valid: () => form.isValidLname,
+        onChangeText: (text, _) => handleNameUpdate(text, 1),
+      },
+      {
+        placeholder: 'Password',
+        valid: () => form.isValidLname,
+        onChangeText: handlePasswordUpdate,
       },
       // ...
     ]
@@ -205,51 +230,80 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({route}) => {
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
+
       {/* getting rid of registration progress in onboarding*/}
       {/* <RegistrationWizard style={styles.wizard} step="one" /> */}
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
+                <View style={styles.footer}>
+        {(currentStep != 0) &&
+        <ArrowButton
+          direction="backward"
+          onPress={() => setCurrentStep(currentStep - 1)}
+        />
+    }
+      </View>
         {/* <View style={{backgroundColor: 'thistle', position: 'absolute', top: 0, marginTop: '45%', height: 0}}> */}
         {(step.placeholder === "Phone" && !isPhoneVerified) ? (
+         <>
          <TaggInput
-          maxLength={10} // currently only support US phone numbers
-          accessibilityHint="Enter your phone number."
-          accessibilityLabel="Phone number input field."
-          placeholder="Phone Number"
-          autoCompleteType="tel"
-          textContentType="telephoneNumber"
-          autoCapitalize="none"
-          keyboardType="number-pad"
-          onChangeText={handlePhoneUpdate}
-          blurOnSubmit={false}
-          valid={form.isValidPhone}
-          invalidWarning={'Please enter a valid 10 digit number.'}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-          onSubmitEditing={goNext}
-        /> 
+              maxLength={10} // currently only support US phone numbers
+              accessibilityHint="Enter your phone number."
+              accessibilityLabel="Phone number input field."
+              placeholder="Phone Number"
+              autoCompleteType="tel"
+              textContentType="telephoneNumber"
+              autoCapitalize="none"
+              keyboardType="number-pad"
+              onChangeText={handlePhoneUpdate}
+              autoFocus={true}
+              blurOnSubmit={false}
+              valid={form.isValidPhone}
+              invalidWarning={'Please enter a valid 10 digit number.'}
+              attemptedSubmit={form.attemptedSubmit}
+              width={280}
+              onSubmitEditing={goNext} 
+              />
+                <TaggSquareButton
+                  onPress={goNext}
+                  title={'Verify'}
+                  buttonStyle={'normal'}
+                  buttonColor={'white'}
+                  labelColor={'blue'} />
+              </>
         ) : (
       <>
       <Text style={styles.formHeader}>SIGN UP</Text>
       <View style = {{position: 'absolute', top: 50}}>
             <TaggInput
             key = {step.placeholder}
+            style={styles.input}
             accessibilityHint={`Enter your ${step.placeholder.toLowerCase()}`}
             accessibilityLabel={`${step.placeholder} input field.`}
-            placeholder={step.placeholder}
+            placeholder={currentStep + " " + step.placeholder}
             autoCompleteType="name"
             textContentType="name"
             returnKeyType="next"
             onChangeText={step.onChangeText}
-            onSubmitEditing={() => setCurrentStep(currentStep + 1)}
+            onSubmitEditing={() => 
+              { console.log("step bool:" + step.placeholder + " " + form.isValidFname)
+                if (step.valid()) {setCurrentStep(currentStep + 1)}}}
+            autoFocus= {true}
             blurOnSubmit={false}
-            valid={step.valid}
+            valid={step.valid()}
             invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`}
             attemptedSubmit={form.attemptedSubmit}
             width={280}
           />
-          {/* {footer('username')} */}
+        <TaggSquareButton
+          onPress={() => {if (step.valid()) {setCurrentStep(currentStep + 1)}}}
+          autoFocus= {true}
+          title={'Next'}
+          buttonStyle={'normal'}
+          buttonColor={'white'}
+          labelColor={'blue'}
+        />
           </View>
           </>)}
           <View style = {{position: 'absolute', bottom: 150}}>
@@ -267,6 +321,17 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent: 'center',
     },
+    input: {
+      width: '100%',
+      minWidth: '60%',
+      height: 40,
+      fontSize: 16,
+      fontWeight: '600',
+      color: '#fff',
+      paddingLeft: 13,
+      borderBottomWidth: 1,
+      borderBottomColor: '#fff'
+    },
     button: {
       width: 40, 
       aspectRatio: 10,