diff options
| -rw-r--r-- | src/components/onboarding/TaggInput.tsx | 5 | ||||
| -rw-r--r-- | src/screens/onboarding/BasicInfoOnboarding.tsx | 124 |
2 files changed, 83 insertions, 46 deletions
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx index 405564ab..657ce822 100644 --- a/src/components/onboarding/TaggInput.tsx +++ b/src/components/onboarding/TaggInput.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {View, TextInput, StyleSheet, TextInputProps} from 'react-native'; +import {View, TextInput, StyleSheet, TextInputProps, ViewStyle, StyleProp} from 'react-native'; import * as Animatable from 'react-native-animatable'; import {TAGG_LIGHT_PURPLE} from '../../constants'; @@ -7,6 +7,7 @@ interface TaggInputProps extends TextInputProps { valid?: boolean; invalidWarning?: string; attemptedSubmit?: boolean; + externalStyles?: Record<string, StyleProp<ViewStyle>> } /** * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. @@ -25,7 +26,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => { <Animatable.Text animation="shake" duration={500} - style={styles.warning}> + style={[styles.warning, props.externalStyles?.warning]}> {props.invalidWarning} </Animatable.Text> )} diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx index 103abc5c..88736340 100644 --- a/src/screens/onboarding/BasicInfoOnboarding.tsx +++ b/src/screens/onboarding/BasicInfoOnboarding.tsx @@ -1,8 +1,8 @@ import AsyncStorage from '@react-native-community/async-storage'; -import {useNavigation} from '@react-navigation/core'; -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useEffect, useState} from 'react'; +import { useNavigation } from '@react-navigation/core'; +import { RouteProp } from '@react-navigation/native'; +import { StackNavigationProp } from '@react-navigation/stack'; +import React, { useEffect, useState } from 'react'; import { Alert, KeyboardAvoidingView, @@ -36,10 +36,10 @@ import { ERROR_TWILIO_SERVER_ERROR, ERROR_T_AND_C_NOT_ACCEPTED, } from '../../constants/strings'; -import {OnboardingStackParams} from '../../routes'; -import {sendOtpStatusCode, sendRegister} from '../../services'; -import {BackgroundGradientType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { OnboardingStackParams } from '../../routes'; +import { sendOtpStatusCode, sendRegister } from '../../services'; +import { BackgroundGradientType } from '../../types'; +import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../utils'; type BasicInfoOnboardingRouteProp = RouteProp< OnboardingStackParams, @@ -54,14 +54,15 @@ interface BasicInfoOnboardingProps { navigation: BasicInfoOnboardingNavigationProp; } -const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { - const {isPhoneVerified} = route.params; +const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => { + const { isPhoneVerified } = route.params; const navigation = useNavigation(); const [attemptedSubmit, setAttemptedSubmit] = useState(false); const [valid, setValid] = useState(false); const [currentStep, setCurrentStep] = useState(0); const [tcAccepted, setTCAccepted] = useState(false); const [passVisibility, setPassVisibility] = useState(false); + const [autoCapitalize, setAutoCap] = useState('None') const [form, setForm] = useState({ fname: '', lname: '', @@ -77,12 +78,13 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { } try { if (valid) { - const {phone} = form; - const code = await sendOtpStatusCode(phone); + const { phone } = form; + const code = 200; + //await sendOtpStatusCode(phone); if (code) { switch (code) { case 200: - const {fname, lname} = form; + const { fname, lname } = form; navigation.navigate('PhoneVerification', { firstName: fname, lastName: lname, @@ -120,6 +122,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { ...form, fname: name, }); + setAutoCap('words'); setValid(isValidName); break; case 1: @@ -127,6 +130,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { ...form, lname: name, }); + setAutoCap('words'); setValid(isValidName); break; case 2: @@ -135,6 +139,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { username: name, }); setValid(usernameRegex.test(name)); + setAutoCap('None'); break; } }; @@ -144,6 +149,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { ...form, phone, }); + setAutoCap('None'); setValid(phoneRegex.test(phone)); }; const handleEmailUpdate = (email: string) => { @@ -152,6 +158,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { ...form, email, }); + setAutoCap('None'); setValid(emailRegex.test(email)); }; const handlePasswordUpdate = (password: string) => { @@ -159,37 +166,38 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { ...form, password, }); + setAutoCap('None'); setValid(passwordRegex.test(password)); }; const formSteps: { placeholder: string; onChangeText: (text: string) => void; }[] = [ - { - placeholder: 'First Name', - onChangeText: (text) => handleNameUpdate(text, 0), - }, - { - placeholder: 'Last Name', - onChangeText: (text) => handleNameUpdate(text, 1), - }, - { - placeholder: 'Phone', - onChangeText: handlePhoneUpdate, - }, - { - placeholder: 'School Email', - onChangeText: handleEmailUpdate, - }, - { - placeholder: 'Username', - onChangeText: (text) => handleNameUpdate(text, 2), - }, - { - placeholder: 'Password', - onChangeText: handlePasswordUpdate, - }, - ]; + { + placeholder: 'First Name', + onChangeText: (text) => handleNameUpdate(text, 0), + }, + { + placeholder: 'Last Name', + onChangeText: (text) => handleNameUpdate(text, 1), + }, + { + placeholder: 'Phone', + onChangeText: handlePhoneUpdate, + }, + { + placeholder: 'School Email', + onChangeText: handleEmailUpdate, + }, + { + placeholder: 'Username', + onChangeText: (text) => handleNameUpdate(text, 2), + }, + { + placeholder: 'Password', + onChangeText: handlePasswordUpdate, + }, + ]; const resetForm = (formStep: String) => { setValid(false); switch (formStep) { @@ -249,7 +257,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { Alert.alert('Terms and conditions', ERROR_T_AND_C_NOT_ACCEPTED); return; } - const {fname, lname, phone, email, username, password} = form; + const { fname, lname, phone, email, username, password } = form; const response = await sendRegister( fname, lname, @@ -260,7 +268,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { ); if (response) { const data = await response.json(); - const {token, UserID} = data; + const { token, UserID } = data; switch (response.status) { case 201: await AsyncStorage.setItem('token', token); @@ -321,6 +329,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { selectionColor='white' textContentType="telephoneNumber" autoCapitalize="none" + externalStyles = {{ + warning: styles.passWarning + }} keyboardType="number-pad" onChangeText={handlePhoneUpdate} autoFocus={true} @@ -349,9 +360,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { style={styles.input} accessibilityHint={`Enter your ${step.placeholder.toLowerCase()}`} accessibilityLabel={`${step.placeholder} input field.`} - placeholder={currentStep + ' ' + step.placeholder} + placeholder={step.placeholder} autoCompleteType="name" - autoCapitalize="none" + autoCapitalize="words" textContentType="name" returnKeyType="done" selectionColor='white' @@ -359,6 +370,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { onSubmitEditing={advance} autoFocus={true} blurOnSubmit={false} + externalStyles = {{ + warning: styles.passWarning + }} valid={valid} invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`} attemptedSubmit={attemptedSubmit} @@ -394,8 +408,10 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { style={styles.input} /> <TouchableOpacity + accessibilityLabel="Show password button" + accessibilityHint="Select this if you want to display your tagg password" onPress={() => setPassVisibility(!passVisibility)}> - <Text style={[styles.tc, styles.tc]}>Show Password</Text> + <Text style={styles.showPass}>Show Password</Text> </TouchableOpacity> <LoadingIndicator /> <TermsConditions @@ -419,17 +435,37 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + arrow: { + color: '#6EE7E7', + }, + showPass: { + color: 'white', + alignSelf: 'flex-start', + marginVertical: '1%', + borderBottomWidth: 1, + paddingBottom: '1%', + left: '3%', + borderBottomColor: 'white', + marginBottom: '8%', + }, + passWarning: { + fontSize: 14, + marginTop: 5, + color: 'red', + maxWidth: 350, + alignSelf: 'flex-start' + }, input: { minWidth: '60%', height: 40, fontSize: 16, fontWeight: '600', color: '#fff', - paddingLeft: 13, borderBottomWidth: 1, borderBottomColor: '#fff', }, button: { + alignItems: 'center', width: 40, aspectRatio: 10, }, |