All files / login/components LoginForm.tsx

100% Statements 8/8
100% Branches 4/4
100% Functions 3/3
100% Lines 8/8
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 513x 3x 3x                                 3x     39x                   1x               1x                 3x  
import React from 'react';
import { View } from 'react-native';
import { CrossEditor, styles } from 'react-native-cross-components';
import { IEmailProps, IPasswordProps } from '../../types';
 
/**
 * Props for the {@link LoginForm} components.
 *
 * Required props include {@link IEmailProps.onEmailChanged} and {@link IPasswordProps.onPasswordChanged}.
 *
 * Allows you to customize {@link IEmailProps.initialEmail} / password as well as {@link IEmailProps.emailInputProps}.
 */
export interface ILoginFormProps extends IEmailProps, IPasswordProps {}
 
/**
 * Allows the user to ender credentials and passes them back through prop events.
 *
 * Props are {@link ILoginFormProps}
 */
export class LoginForm extends React.Component<ILoginFormProps> {
  render() {
    // TODO: E-mail validation
    return (
      <View style={[styles.container]}>
        {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='Password'
          clearButtonMode='always'
          secureTextEntry
          value={this.props.initialPassword || ''}
          onChangeText={(text: string) => this.props.onPasswordChanged(text)}
          {...this.props.passwordInputProps}
        />
        {/* <CrossLabel isCaption={true} style={{ color: 'red' }}>{this.props.message}</Caption> */}
      </View>
    );
  }
}
 
export default LoginForm;