diff options
Diffstat (limited to 'src/screens/onboarding/BasicInfoOnboarding.tsx')
| -rw-r--r-- | src/screens/onboarding/BasicInfoOnboarding.tsx | 153 |
1 files changed, 100 insertions, 53 deletions
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx index 3fa33f63..3058a04e 100644 --- a/src/screens/onboarding/BasicInfoOnboarding.tsx +++ b/src/screens/onboarding/BasicInfoOnboarding.tsx @@ -38,7 +38,11 @@ import { ERROR_T_AND_C_NOT_ACCEPTED, } from '../../constants/strings'; import {OnboardingStackParams} from '../../routes'; -import {sendOtpStatusCode, sendRegister} from '../../services'; +import { + sendOtpStatusCode, + sendRegister, + verifyExistingInformation, +} from '../../services'; import {BackgroundGradientType} from '../../types'; import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; @@ -63,12 +67,20 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { const [currentStep, setCurrentStep] = useState(0); const [tcAccepted, setTCAccepted] = useState(false); const [passVisibility, setPassVisibility] = useState(false); + const [invalidWithError, setInvalidWithError] = useState( + 'Please enter a valid ', + ); const [autoCapitalize, setAutoCap] = useState< 'none' | 'sentences' | 'words' | 'characters' | undefined >('none'); const [fadeValue, setFadeValue] = useState<Animated.Value<number>>( new Animated.Value(0), ); + + useEffect(() => { + setValid(false); + }, [invalidWithError]); + const fadeButtonValue = useValue<number>(0); const [form, setForm] = useState({ fname: '', @@ -209,30 +221,37 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { const formSteps: { placeholder: string; onChangeText: (text: string) => void; + value: string; }[] = [ { placeholder: 'First Name', onChangeText: (text) => handleNameUpdate(text, 0), + value: form.fname, }, { placeholder: 'Last Name', onChangeText: (text) => handleNameUpdate(text, 1), + value: form.lname, }, { placeholder: 'Phone', onChangeText: handlePhoneUpdate, + value: form.phone, }, { placeholder: 'School Email', onChangeText: handleEmailUpdate, + value: form.email, }, { placeholder: 'Username', onChangeText: (text) => handleNameUpdate(text, 2), + value: form.username, }, { placeholder: 'Password', onChangeText: handlePasswordUpdate, + value: form.password, }, ]; const resetForm = (formStep: String) => { @@ -277,9 +296,33 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { } }; const step = formSteps[currentStep]; - const advance = () => { + useEffect(() => { + setInvalidWithError( + 'Please enter a valid ' + step.placeholder.toLowerCase(), + ); + }, [currentStep]); + const advance = async () => { setAttemptedSubmit(true); if (valid) { + if (step.placeholder === 'School Email') { + const verifiedInfo = await verifyExistingInformation( + form.email, + undefined, + ); + if (!verifiedInfo) { + setInvalidWithError('Email is taken'); + return; + } + } else if (step.placeholder === 'Username') { + const verifiedInfo = await verifyExistingInformation( + undefined, + form.username, + ); + if (!verifiedInfo) { + setInvalidWithError('Username is taken'); + return; + } + } setCurrentStep(currentStep + 1); setAttemptedSubmit(false); setValid(false); @@ -421,6 +464,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { returnKeyType="done" selectionColor="white" onChangeText={step.onChangeText} + value={step.value} onSubmitEditing={advance} autoFocus={true} blurOnSubmit={false} @@ -428,7 +472,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { warning: styles.passWarning, }} valid={valid} - invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`} + invalidWarning={invalidWithError} attemptedSubmit={attemptedSubmit} /> <Animated.View style={{opacity: fadeButtonValue}}> @@ -443,58 +487,61 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => { </Animated.View> </> ) : ( - <Animated.View - style={[styles.formContainer, {opacity: fadeValue}]}> - <TaggInput - accessibilityHint="Enter a password." - accessibilityLabel="Password input field." - placeholder="Password" - autoCompleteType="password" - textContentType="oneTimeCode" - returnKeyType="done" - selectionColor="white" - onChangeText={handlePasswordUpdate} - onSubmitEditing={advanceRegistration} - blurOnSubmit={false} - autoFocus={true} - secureTextEntry={!passVisibility} - valid={valid} - externalStyles={{ - warning: styles.passWarning, - }} - invalidWarning={ - 'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.' - } - attemptedSubmit={attemptedSubmit} - style={ - attemptedSubmit && !valid - ? [styles.input, styles.invalidColor] - : styles.input - } - /> - <TouchableOpacity - accessibilityLabel="Show password button" - accessibilityHint="Select this if you want to display your tagg password" - style={styles.showPassContainer} - onPress={() => setPassVisibility(!passVisibility)}> - <Text style={styles.showPass}>Show Password</Text> - </TouchableOpacity> - <LoadingIndicator /> - <TermsConditions - style={styles.tc} - accepted={tcAccepted} - onChange={setTCAccepted} - /> - <Animated.View style={{opacity: fadeButtonValue}}> - <TaggSquareButton - onPress={advanceRegistration} - title={'Next'} - buttonStyle={'normal'} - buttonColor={'white'} - labelColor={'blue'} + <> + <Text style={styles.formHeader}>SIGN UP</Text> + <Animated.View + style={[styles.formContainer, {opacity: fadeValue}]}> + <TaggInput + accessibilityHint="Enter a password." + accessibilityLabel="Password input field." + placeholder="Password" + autoCompleteType="password" + textContentType="oneTimeCode" + returnKeyType="done" + selectionColor="white" + onChangeText={handlePasswordUpdate} + onSubmitEditing={advanceRegistration} + blurOnSubmit={false} + autoFocus={true} + secureTextEntry={!passVisibility} + valid={valid} + externalStyles={{ + warning: styles.passWarning, + }} + invalidWarning={ + 'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.' + } + attemptedSubmit={attemptedSubmit} + style={ + attemptedSubmit && !valid + ? [styles.input, styles.invalidColor] + : styles.input + } /> + <TouchableOpacity + accessibilityLabel="Show password button" + accessibilityHint="Select this if you want to display your tagg password" + style={styles.showPassContainer} + onPress={() => setPassVisibility(!passVisibility)}> + <Text style={styles.showPass}>Show Password</Text> + </TouchableOpacity> + <LoadingIndicator /> + <TermsConditions + style={styles.tc} + accepted={tcAccepted} + onChange={setTCAccepted} + /> + <Animated.View style={{opacity: fadeButtonValue}}> + <TaggSquareButton + onPress={advanceRegistration} + title={'Next'} + buttonStyle={'normal'} + buttonColor={'white'} + labelColor={'blue'} + /> + </Animated.View> </Animated.View> - </Animated.View> + </> )} </> )} |