HomeScreen.js

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    Button,
    AsyncStorage,
    AppRegistry,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import { UserScreen } from './users/UserScreen'

import { 
    Permissions,
    Notifications,
} from 'expo';

export default class HomeScreen extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {username: "", password: "", reasons: []};
    }
    async login()
    {
       const { existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
       let finalStatus = existingStatus;
       let token = "";
       
       if (existingStatus !== 'granted')
       {
           const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
           finalStatus = status;
       }
       
       if (finalStatus !== 'granted')
       {
           token = "NOTHING";
       }
       else
       {
           token = await Notifications.getExpoPushTokenAsync();
           let response = await fetch("https://roasted-ravenclaw968.c9users.io/login", {
               method: "POST",
               headers: {
                   'Accept': 'application/json',
                   'Content-Type': 'application/json',
               },
               body: JSON.stringify({
                   session: {
                       username: this.state.username,
                       password: this.state.password,
                   },
                   mobile: token,
               }),
           });
           let responseJSON = await response.json();
           if (responseJSON.status == "Success")
           {
               await AsyncStorage.setItem("authorization", responseJSON.authorization);
               await AsyncStorage.setItem("id", responseJSON.user_id);
           }
           else
           {
               reasonList = []
               for (let i = 0; i < responseJSON.reason.length; i ++)
               {
                   reasonList.push(
                       <View>
                           <Text style = {{color: "white", fontSize: 20}}>{ responseJSON.reason[i] }</Text>
                       </View>
                   );
               }
               this.setState({username: this.state.username, password: this.state.password, reasons: reasonList})
           }
       }
    }
    signup()
    {

    }
    forgot_password()
    {

    }
    render()
    {
        return (
            <View style = {{flex: 1, backgroundColor: "#1a237e", flexDirection: "column", justifyContent: "flex-start", alignItems: "center"}}>
                <View style = {{height: 30}}>
                </View>
                <View>
                    <Image style = {{width: 250, height: 100}} source = {{uri: "https://s3-us-west-2.amazonaws.com/roasted-image-storage/RoastedU+4.png"}} />
                </View>
                { this.state.reasons }
                <View style = {{height: 30}}>
                </View>
                <View>
                    <TextInput style = {{color: "white", height: 35, width: 250, borderRadius: 10, backgroundColor: "#0a1159", paddingHorizontal: 8}} onChangeText = {(text) => this.setState({username: text, password: this.state.password})} placeholder = "Enter Username" placeholderTextColor = "white" />
                </View>
                <View style = {{height: 15}}>
                </View>
                <View>
                    <TextInput style = {{color: "white", height: 35, width: 250, borderRadius: 10, backgroundColor: "#0a1159", paddingHorizontal: 8}} onChangeText = {(text) => this.setState({username: this.state.username, password: text})} placeholder = "Enter Password" secureTextEntry = {true} placeholderTextColor = "white" />
                </View>
                <View style = {{height: 30}}>
                </View>
                <View style = {{backgroundColor: "#0a1159", borderRadius: 10}}>
                    <Button style = {{color: "white", backgroundColor: "white"}} onPress = {() => this.login()} title = "Login" color = "white"></Button>
                </View>
                <View style = {{height: 40}}>
                </View>
                <View>
                    <Button color = "white" title = "Sign Up" onPress = {() => this.signup()}></Button>
                </View>
                <View>
                    <Button color = "white" title = "Forgot Password" onPress = {() => this.forgot_password()}></Button>
                </View>
            </View>
        );
    }
}