# All files / new-password/components PasswordForm.tsx

100% Statements 12/12
100% Branches 6/6
100% Functions 5/5
100% Lines 11/11

    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
    1043x
    3x
    3x

    3x
    3x

    3x

    12x

    1x

    1x

    1x

    3x
     import React from 'react';
    import { View } from 'react-native';
    import {
      CrossButton,
      Colors,
      ICrossButtonProps,
    } from 'react-native-cross-components';
    import styles from '../../styles';
    import { CrossEditor } from 'react-native-cross-components';
    import { IEmailProps, IPasswordProps, ICodeProps } from '../../types';

    /**
     * Props for the {@link PasswordForm} component.
     *
     * Required properties: {@link onSavePress}.
     *
     * Allows you to customize {@link ICodeProps}, {@link IEmailProps} and {@link IPasswordProps}.
     */
    export interface IPasswordFormProps
      extends IEmailProps,
        IPasswordProps,
        ICodeProps {
      /**
       * Occurs when the user press "save" button. Required.
       */
      onSavePress: () => void;
      testID?: string;
      /**
       * Optional props for the register button. Typically used to change the `title` prop.
       *
       * Read more:
       * https://crossplatformsweden.github.io/react-native-components/interfaces/_components_buttons_crossbutton_.icrossbuttonprops.html
       *
       * @example
       *  <PasswordForm confirmButtonProps={{title: 'Enlist'}}>
       *     <Text>Custom layouts here</Text>
       *  </PasswordForm>
       */
      saveButtonProps?: ICrossButtonProps | undefined;
    }

    /**
     * Allows the user to ender credentials and passes them back through prop events.
     *
     * Props are {@link IPasswordFormProps}
     *
     * @example
     *  <PasswordForm
     *      onSavePress={(code) => console.log('Confirmed', code)}
     *      saveButtonProps={{title: 'Enlist'}}
     *      codeInputProps={{label: 'WouldntYouLikeToKnow'}}>
     *     <Text>Custom layouts here</Text>
     *  </PasswordForm>
     */
    export class PasswordForm extends React.Component<IPasswordFormProps> {
      render() {
        return (
          <View style={[styles.container]} testID={this.props.testID}>
            {this.props.children}{' '}
            <CrossEditor
              label='E-mail'
              placeholder='E-mail'
              autoCapitalize='none'
              clearButtonMode='always'
              autoCorrect={false}
              value={this.props.initialEmail || ''}
              onChangeText={(text: string) => this.props.onEmailChanged(text)}
              {...this.props.emailInputProps}
            />
            <CrossEditor
              label='Confirmation code'
              placeholder='Enter the code that was sent to you'
              autoCapitalize='none'
              clearButtonMode='always'
              autoCorrect={false}
              value={this.props.code || ''}
              onChangeText={this.props.onCodeChanged}
              {...this.props.codeInputProps}
            />
            <CrossEditor
              label='New Password'
              clearButtonMode='always'
              secureTextEntry
              value={this.props.initialPassword || ''}
              onChangeText={(text: string) => this.props.onPasswordChanged(text)}
              {...this.props.passwordInputProps}
            />
            <CrossButton
              style={styles.marginTop10}
              buttonStyle={styles.buttonStyle}
              onPress={async () => await this.props.onSavePress()}
              mode='contained'
              title='Save'
              backgroundColor={Colors.NextButton}
              iconName='sign-in'
              {...this.props.saveButtonProps}
            />
          </View>
        );
      }
    }

    export default PasswordForm;