/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput
} from 'react-native';
import {
    InputGroup,
    Input,
    Button
} from 'native-base';

export default class app extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image
                    source={require('./images/logo@1x.png')}
                />
                <Text style={styles.companyName}>
                    Future Message Service
                </Text>
                <View style={styles.main}>
                    <InputGroup borderType="regular" style={styles.account}>
                        <Input placeholder="Email"/>
                    </InputGroup>
                    <InputGroup borderType="regular" style={styles.password}>
                        <Input placeholder="Password"/>
                    </InputGroup>
                    <Button transparent>
                        <Text style={styles.signup}>
                            Sign Up
                        </Text>
                    </Button>
                    <Button block style={styles.login}>
                        Login !
                    </Button>
                </View>

                <View style={styles.forgot}>
                    <Button transparent>
                        <Text style={styles.signup}>
                            Forgot password ?
                        </Text>
                    </Button>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    companyName: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    main: {
        marginTop: 40,
        width: 250
    },
    account: {
        borderBottomColor: 'transparent',
        borderTopLeftRadius: 4,
        borderTopRightRadius: 4
    },
    password: {
        borderBottomLeftRadius: 4,
        borderBottomRightRadius: 4
    },
    signup: {
        fontSize: 14,
        textAlign: 'left',
        color: '#2987CD'
    },
    login: {
        marginTop: 25,
        backgroundColor: '#2987CD'
    },
    forgot: {
        position: 'absolute',
        left: 10,
        right: 0,
        bottom: 10,
        flexDirection:'row'
    }
});

AppRegistry.registerComponent('app', () => app);