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;