From 830db377e4cc99299c1e9f7d7e5095c05cff92b7 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 6 May 2021 13:08:34 -0700 Subject: debugging with Ivan --- src/screens/onboarding/RevampedOnboarding.tsx | 131 +++++++++++++++++++------- 1 file changed, 98 insertions(+), 33 deletions(-) (limited to 'src') 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; type RevampedOnboardingNavigationProp = StackNavigationProp< @@ -51,12 +53,18 @@ const RevampedOnboarding: React.FC = ({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 = ({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 = ({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 = ({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 = ({route}) => { style={styles.container} gradientType={BackgroundGradientType.Light}> + {/* getting rid of registration progress in onboarding*/} {/* */} + + {(currentStep != 0) && + setCurrentStep(currentStep - 1)} + /> + } + {/* */} {(step.placeholder === "Phone" && !isPhoneVerified) ? ( + <> + 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} + /> + + ) : ( <> SIGN UP 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')} */} + {if (step.valid()) {setCurrentStep(currentStep + 1)}}} + autoFocus= {true} + title={'Next'} + buttonStyle={'normal'} + buttonColor={'white'} + labelColor={'blue'} + /> )} @@ -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, -- cgit v1.2.3-70-g09d2