# 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;