All files / atlas-mobile-ts/src/components PasswordForm.tsx

0% Statements 0/14
0% Branches 0/14
0% Functions 0/5
0% Lines 0/13

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                                                                                                                                                                                         
/* 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, { ReactElement } from "react"
import { StyleSheet, TextInput, View, Text, TextStyle, GestureResponderEvent } from "react-native"
import * as Yup from 'yup';
import { PrimaryButton, SecondaryButton } from "./Buttons";
 
export interface PasswordFormValues {
    password: string;
    confirmPassword: string;
  }
  
interface PasswordFormProps {
    initialValues?: PasswordFormValues, 
    onFormSubmit: (formValues: PasswordFormValues) => void, 
    cancel: () => void, 
    SubmitButton?: React.FC<{onPress: (event: GestureResponderEvent) => void}>
    CancelButton?: React.FC<{onPress: (event: GestureResponderEvent) => void}>
    fieldStyle?: TextStyle
}
 
const credsSchema = Yup.object({
    password: Yup.string().trim().required("You must enter a password.").matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w~@#$%^&*+=`|{}:;!.?\"()\[\]-]{8,}$/, "Your password must be a minimum of 8 characters and contain 1 special character and 1 number."),
    confirmPassword: Yup.string().trim().required("You must confirm your password.").oneOf([Yup.ref('password'), null], "Your passwords must match.")
})
 
export const PasswordForm: React.FC<PasswordFormProps> = ({initialValues, onFormSubmit, cancel, SubmitButton, CancelButton, children, fieldStyle}) => {
    const renderChildButtons = (handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void) => {
        return React.Children.map(children, (child, index) => {
            return React.cloneElement(child as ReactElement<any, string| React.JSXElementConstructor<any>>, {
                handleSubmit: handleSubmit,
                cancel: cancel
            })
    })}
 
    return (
        <Formik
        initialValues={initialValues ? initialValues : {password: '', confirmPassword: ''}}
        validationSchema={credsSchema}
        enableReinitialize={true}
        onSubmit={values => onFormSubmit(values)}>
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
            <View style={{margin: 20}}>
                <TextInput 
                  style={fieldStyle ? fieldStyle : styles.textInput}
                  placeholder="Password" 
                  secureTextEntry={true} 
                  value={values.password}
                  onChangeText={handleChange('password')}
                  onBlur={handleBlur('password')} />
                {errors.password && touched.password ? <Text style={styles.errorText}>{errors.password}</Text> : null}
                <TextInput 
                  style={fieldStyle ? fieldStyle : styles.textInput}
                  placeholder="Confirm password"
                  secureTextEntry={true} 
                  value={values.confirmPassword}
                  onChangeText={handleChange('confirmPassword')} 
                  onBlur={handleBlur('confirmPassword')} />
                {errors.confirmPassword && touched.confirmPassword ? <Text style={styles.errorText}>{errors.confirmPassword}</Text> : null}
                {children}
            </View>
          )}
    </Formik>
    )
}
 
const styles = StyleSheet.create({
    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'
      },
})