updated TaggInput to take externalStyles and updated error message color in onboarding

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,
   },