import React, { Component } from 'react';
import {View, Image, TextInput} from 'react-native';
import { Container, Header, Content, Button, Icon, Body, Left, Right,
Text, Title, Card, CardItem } from 'native-base';
import styles from '../Style/Style.js'
import Foect from 'foect';
import IconNew from 'react-native-vector-icons/MaterialIcons';
export default class AnmeldeScreen extends Component {
constructor(props) {
super(props);
this.state = {
icEye: 'visibility-off',
password: true,
}
}
static navigationOptions = {
header: null
}
changePwdType = () => {
let newState;
if (this.state.password) {
newState = {
icEye: 'visibility',
password: false
}
} else {
newState = {
icEye: 'visibility-off',
password: true
}
}
// set new state value
this.setState(newState)
};
render () {
var {navigate} = this.props.navigation;
return (
<Container>
{/*---------------------------------------------------- H E A D E R ------------------------------------------------------------*/}
<Header>
<Left>
<Button transparent onPress={() => navigate("Start", {})}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title style={styles.titelintervall}>Registrieren</Title>
</Body>
<Right>
</Right>
</Header>
{/*---------------------------------------------------- C O N T E N T ------------------------------------------------------------*/}
<Content padder>
<Image source={require('../images/low-carb-camp-logo-breit.png')} style={styles.secondimagelogo} />
<Foect.Form
defaultValue={{
email: ''
}}
onValidSubmit={model => {
console.log(model);
}}
>
{ /* you can use form for triggering submit or checking form state(form.isSubmitted, form.isValid, ...) */ }
{ form => (
<View>
{ /* every Foect.Control must have a name and optionally validation rules */ }
<Foect.Control name="fullName" required minLength={2} maxLength={32}>
{ /* you can use control for getting/setting it's value, checking/updating(control.isValid, control.markAsTouched(), ...) it's state, checking it's errors(control.errors.required) */ }
{ control => (
<View>
<Text style={{ marginTop: 10, color: '#8BC051' }}>Dein Name</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
/* mark control as touched on blur */
onBlur={control.markAsTouched}
/* update control's value */
onChangeText={(text) => control.onChange(text)}
/* get control's value */
value={control.value}
placeholder="Hier vollständigen Namen eingeben"
/>
{ /* check control state and show error if necessary */ }
{ control.isTouched &&
control.isInvalid &&
<Text style={{ color: 'red' }}>Bitte trage deinen Namen ein.</Text> }
</View>
) }
</Foect.Control>
<Foect.Control name="email" required email>
{ control => (
<View>
<Text style={{ marginTop: 10, color: '#8BC051' }}>Email</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
keyboardType="email-address"
onBlur={control.markAsTouched}
onChangeText={(text) => control.onChange(text)}
value={control.value}
placeholder="Hier E-Mail eingeben"
/>
{ control.isTouched &&
control.isInvalid &&
<View>
<Text style={{ color: 'red'}}>{control.value} ist keine gültige E-Mail</Text>
</View> }
</View>
) }
</Foect.Control>
<Foect.Control name="password" required pattern={/(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}>
{ control => (
<View>
<Text style={{ marginTop: 10, color: '#8BC051' }}>Passwort
</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
secureTextEntry={true}
onBlur={control.markAsTouched}
onChangeText={(text) => control.onChange(text)}
value={control.value}
secureTextEntry={this.state.password}
placeholder="Passwort erstellen"
/>
<IconNew style={styles.icon}
name={this.state.icEye}
size={25}
color={this.props.iconColor}
onPress={this.changePwdType}
/>
{ control.isTouched &&
control.isInvalid &&
<View>
{ control.errors.pattern ?
<Text style={{ color: 'red' }}>Dein Passwort muss mindestens 8 Zeichen lang sein und mindestens ein Sonderzeichen oder eine Zahl enthalten.</Text> :
<Text style={{ color: 'red' }}>Bitte trage dein Passwort ein.</Text> }
</View> }
</View>
) }
</Foect.Control>
<Foect.Control name="confirmpassword">
{ control => (
<View>
<Text style={{ marginTop: 10, color: '#8BC051' }}>Passwort wiederholen
</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
secureTextEntry={true}
onBlur={control.markAsTouched}
onChangeText={(text) => control.onChange(text)}
value={control.value}
placeholder="Passwort bitte wiederholen"
/>
</View>
) }
</Foect.Control>
</View>
) }
</Foect.Form>
<View style={{marginTop: 10}}>
<Button full warning style={styles.buttonintervall} onPress={
() => navigate("Ziel", {})}>>>
<Text>Registrieren</Text>
</Button>
</View>
<Text style={styles.secondtextfb}> oder </Text>
<Card>
<CardItem>
<Icon name="logo-facebook" style={{color: '#234c6e'}} />
<Text>Über Facebook registrieren</Text>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
}