diff options
| -rw-r--r-- | src/screens/onboarding/RevampedOnboarding.tsx | 131 |
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, |