All files / atlas-mobile-ts/src/components/Auth/RegistrationSteps RegisterCredential.tsx

0% Statements 0/19
0% Branches 0/8
0% Functions 0/4
0% Lines 0/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117                                                                                                                                                                                                                                         
/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written and maintained by the Click & Push Development team 
 * <dev@clicknpush.ca>, January 2022
 */
 
import { Formik } from 'formik';
import React from 'react';
import { Dimensions, StyleSheet, TextInput, View } from 'react-native';
import 'react-native-get-random-values';
import { Text } from 'react-native-paper';
import { testTag } from '../../../utils/GlobalUtils';
import { credsSchema, RegisterCredsValues } from '../../../utils/RegistrationUtils';
import { PrimaryButton } from '../../Buttons';
import { RegisterStepProps } from '../RegisterMain';
 
/**
 * This component displays a form for the new user's email and password to-be.
 */
const RegisterCredentials: React.FC<RegisterStepProps> = ({changeStep, setFormValues, formValues}) => {
    /**
    * The initial measurement values are set to the current email and username values of the parent form data object
    */
    const initialValues: RegisterCredsValues = {email: formValues.email, username: formValues.username};
 
    /* 
    * Updates the form values and progresses to the password step
    */
    const next = (newFormValues: RegisterCredsValues) => {
      setFormValues({...formValues, email: newFormValues.email, username: newFormValues.username});
      console.log("[Registration]: Registration form values updated")
      changeStep(2, "Next, we'll have you set a password.");
    }
    
    return (
        <Formik 
            initialValues={initialValues}
            validationSchema={credsSchema}
            enableReinitialize={true}
            onSubmit={values => next(values)}>
            {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
              <View style={{margin: 20}}>
                  <TextInput 
                    {...testTag('regUsername')}
                    style={styles.textInput}
                    placeholder="Username" 
                    value={values.username}
                    onChangeText={handleChange('username')}
                    onBlur={handleBlur('username')} />
                  {errors.username && touched.username ? <Text style={styles.errorText}>{errors.username}</Text> : null}
                  <TextInput 
                    {...testTag('regEmail')}
                    style={styles.textInput}
                    placeholder="Email" 
                    value={values.email}
                    onChangeText={handleChange('email')} 
                    onBlur={handleBlur('email')} />
                  {errors.email && touched.email ? <Text style={styles.errorText}>{errors.email}</Text> : null}
                  <PrimaryButton accessibilityLabel='regCredsNext' style={{marginTop: 30}} onPress={handleSubmit as any} text="Next"/>
              </View>
            )}
        </Formik>
    ) 
}
 
const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
      flex: 1,
      justifyContent: 'flex-start',
      resizeMode: 'cover',
    },
  
    textContainer: { 
      marginHorizontal: 20,
      marginBottom: 30,
      borderRadius: 50,
    },
  
    textInput: {
      marginVertical: 7,
      paddingLeft: 30,
      borderRadius: 50,
      overflow: 'hidden',
      backgroundColor: 'white',
      height: 50
    },
 
    errorText: {
      alignSelf: 'flex-end',
      color: 'red',
      fontSize: 15,
      marginBottom: 10,
    },
 
    errorInput: {
      borderWidth: 2,
      borderColor: 'red'
    },
  
    nextBtn: {
      marginHorizontal: 20,
      marginBottom: 60,
      borderRadius: 50,
      justifyContent: 'center',
      backgroundColor: '#df3f3f',
      margin: 5,
      height: 50,
      alignItems: 'center'
    },
  })
 
export default RegisterCredentials;