import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    TextInput,
    View
} from 'react-native';
import Button from './Components/Button'


export default class SignIn extends Component {
     constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: ''
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <Text>Sign In</Text>
                <Text style={styles.label}>Username: </Text>
                <TextInput
                    style={styles.input}
                    onChangeText={(username) => this.setState({ username: username }) }
                    placeholder="Enter Username..."
                    value={this.state.username} />
                <Text style={styles.label}>Password: </Text>
                <TextInput
                    style={styles.input}
                    secureTextEntry={true}
                    onChangeText={(password) => this.setState({ password }) }
                    placeholder="Enter password..."
                    value={this.state.password} />
                <Button text={'Sign In'} onPress={this.onPress() }/>
            </View>
        );
    }
    onPress() {
        this.setState = {
            password: ''
        }
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        height: 40,
        padding: 4,
        borderColor: 'gray',
        borderWidth: 1,
        borderRadius: 5,
        margin: 5,
        width: 200,
        alignSelf: 'center'
    },
    label: {
        fontSize: 18
    }
})