loginScreen.js 3.54 KB
import React, { useState } from "react";
import {
  StyleSheet,
  TextInput,
  Button,
  Image,
  Dimensions,
  View,
  Text,
  ActivityIndicator,
} from "react-native";
import EditScreenInfo from "../components/EditScreenInfo";
// import { Text, View } from '../components/Themed';
import { TouchableOpacity } from "react-native";
import { ScrollView, Toast } from "native-base";
import { ERROR_TOAST_PROPS } from "../util/util";
import { screenWidth, styles } from "../util/styles";
import TTS_logo from "../assets/images/TTS_logo.jpeg";

export const LoginScreen = ({ onLogin, navigation }) => {
  return (
    <ScrollView style={styles.loginScreenContainer}>
      <View style={{ alignContent: "center", justifyContent: "center" }}>
        <Text
          style={{
            padding: 10,
            textAlign: "center",
            fontWeight: "bold",
            fontSize: 30,
          }}
        >
          Driver App
        </Text>
        <Image
          source={TTS_logo}
          style={{
            height: screenWidth - 30,
            width: screenWidth - 30,
            margin: "auto",
          }}
        />
      </View>

      <Text
        style={{
          padding: 10,
          textAlign: "center",
          // fontWeight: 'bold',
          fontSize: 40,
        }}
      >
        Login
      </Text>
      <View
        style={{ flexDirection: "row", padding: 10, justifyContent: "center" }}
      >
        <Text style={{ textAlign: "center" }}>Don't have an account? </Text>
        <Text
          style={{ fontWeight: "bold", textAlign: "center" }}
          onPress={() => navigation.replace("Signup")}
        >
          Sign up
        </Text>
      </View>
      <View style={styles.formContainer}>
        <LoginForm onLogin={onLogin} />
      </View>
    </ScrollView>
  );
};

const LoginForm = ({ onLogin, navigation }) => {
  var passwordInput;

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const [loading, setLoading] = useState(false);

  const onSubmit = () => {
    console.log({ username, password });
    setLoading(true);
    if (!username || !password) {
      Toast.show({
        title: "Please fill in all the fields!",
        ...ERROR_TOAST_PROPS,
      });
    } else {
      onLogin(username, password);
    }
    setLoading(false);
  };

  return (
    <View>
      <TextInput
        style={styles.input}
        defaultValue={username}
        onChangeText={(e) => {
          console.log(e);
          setUsername(e);
        }}
        autoCapitalize="none"
        onSubmitEditing={() => passwordInput.focus()}
        autoCorrect={false}
        keyboardType="email-address"
        returnKeyType="next"
        placeholder="Email"
        // placeholderTextColor='rgba(225,225,225,0.7)'
      />

      <TextInput
        style={styles.input}
        defaultValue={password}
        onChangeText={(e) => setPassword(e)}
        returnKeyType="go"
        autoCapitalize="none"
        ref={(input) => (passwordInput = input)}
        placeholder="Password"
        onSubmitEditing={onSubmit}
        // placeholderTextColor='rgba(225,225,225,0.7)'
        secureTextEntry
      />

      <TouchableOpacity
        style={styles.buttonContainer}
        // onPress={onButtonPress}
        // disabled={!username || !password}

        onPress={onSubmit}
        disabled={loading}
      >
        {loading ? (
          <ActivityIndicator />
        ) : (
          <Text style={styles.buttonText}>LOGIN</Text>
        )}
      </TouchableOpacity>
    </View>
    // define your styles
  );
};