# 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'
          },
    })