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

0% Statements 0/19
0% Branches 0/8
0% Functions 0/5
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

     ﻿/* 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 { StyleSheet, TextInput, View } from 'react-native';
    import 'react-native-get-random-values';
    import { Text } from 'react-native-paper';
    import { passwordSchema } from '../../../utils/RegistrationUtils';
    import { PrimaryButton, SecondaryButton } from '../../Buttons';
    import { RegisterStepProps } from '../RegisterMain';

    export interface PasswordValues {
      password: string;
      confirmPassword: string;
    }

    const RegisterPassword: React.FC<RegisterStepProps> = ({changeStep, setFormValues, formValues}) => {
      /**
     * The initial measurement values are set to the current password values of the parent form data object
     */
      const initialValues: PasswordValues = {password: formValues.password, confirmPassword: formValues.confirmPassword};

      const next = (newFormValues: PasswordValues) => {
        setFormValues({...formValues, password: newFormValues.password, confirmPassword: newFormValues.confirmPassword});
        changeStep(3, "Will you be using a Sagitta?");
      }

      const back = () => {
        changeStep(1, "Let's start with some basic account information");
      }

      return (
            <Formik
              initialValues={initialValues}
              validationSchema={passwordSchema}
              enableReinitialize={true}
              onSubmit={values => next(values)}>
              {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
                  <View style={{margin: 20}}>
                      <TextInput
                        style={PasswordFormStyles.textInput}
                        placeholder="Password"
                        secureTextEntry={true}
                        value={values.password}
                        onChangeText={handleChange('password')}
                        onBlur={handleBlur('password')} />
                      {errors.password && touched.password ? <Text style={PasswordFormStyles.errorText}>{errors.password}</Text> : null}
                      <TextInput
                        style={PasswordFormStyles.textInput}
                        placeholder="Confirm password"
                        secureTextEntry={true}
                        value={values.confirmPassword}
                        onChangeText={handleChange('confirmPassword')}
                        onBlur={handleBlur('confirmPassword')} />
                      {errors.confirmPassword && touched.confirmPassword ? <Text style={PasswordFormStyles.errorText}>{errors.confirmPassword}</Text> : null}
                      <PrimaryButton style={{marginTop: 30}} onPress={handleSubmit as any} text="Next"/>
                      <SecondaryButton onPress={back} text="Back"/>
                  </View>
                )}
          </Formik>
      )
    }

    export const PasswordFormStyles = StyleSheet.create({backBtn: {
        marginHorizontal: 20,
        marginBottom: 10,
        borderRadius: 50,
        borderColor: 'white',
        borderWidth: 2,
        justifyContent: 'center',
        backgroundColor: 'transparent',
        margin: 5,
        height: 50,
        alignItems: 'center'
      },
        textInput: {
          marginVertical: 7,
          paddingLeft: 30,
          borderRadius: 50,
          overflow: 'hidden',
          backgroundColor: 'white',
          height: 50
        },

        errorText: {
          alignSelf: 'flex-end',
          color: 'red',
          fontSize: 15
        },

        errorInput: {
          borderWidth: 2,
          borderColor: 'red'
        },
      })

    export default RegisterPassword;