aswi2023one-team-to-rule-them-all-gitlab/src/pages/LoginPage.tsx @ 1980ed09

import {
    Center,
    Box,
    Heading,
    VStack,
    FormControl,
    Link,
    Input,
    Button,
    HStack,
    Text,
    KeyboardAvoidingView
} from "native-base"
import { useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { login } from "../stores/actions/userThunks"
import { AppDispatch, RootState } from "../stores/store"
import { Platform } from "react-native"


const LoginPage = () => {
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const status = useSelector((state: RootState) => state.user.loggedIn)

    const dispatch = useDispatch<AppDispatch>()

    const loginUser = () => {
        dispatch(login({username, password}))
        //TODO - add error handling
    }

    return (
        <KeyboardAvoidingView
            h={ {
                base: "400px",
                lg: "auto"
            } }
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
        >
            <Center w="100%">
                <Box
                    safeArea
                    p="2"
                    py="8"
                    w="90%"
                    maxW="290"
                >
                    <Heading
                        size="2xl"
                        color="primary.500"
                        textAlign="center"
                        _dark={ {
                            color: "primary.100"
                        } }
                    >
                        Inventaria Rudolphina
                    </Heading>
                    <Heading
                        mt="10"
                        textAlign="center"
                        _dark={ {
                            color: "primary.500"
                        } }

                        fontWeight="bold"
                        size="xl"
                    >
                        Log in
                    </Heading>
                    <Text
                        mt="1"
                        textAlign="center"
                    >
                        Please log in to continue
                    </Text>

                    <VStack space={ 3 } mt="1">
                        <FormControl>
                            <FormControl.Label>Username</FormControl.Label>
                            <Input
                                // value={username}
                                textContentType={"username"}
                                rounded={ "xl" }
                                autoComplete={"username"}
                                onSubmitEditing={ () => { loginUser() } }
                                onChangeText={ (username) => setUsername(username) }
                            />
                            <FormControl.Label>Password</FormControl.Label>
                            <Input
                                type="password"
                                autoComplete={ "password" }
                                id={ "password" }
                                returnKeyType={ "go" }
                                rounded={ "xl" }
                                onSubmitEditing={ () => loginUser() }
                                onChangeText={ (password) => setPassword(password) }
                            />
                            <Button
                                mt="2"
                                bg={ "primary.500" }
                                onPress={ loginUser }
                                rounded={ "xl"}
                            >
                                Sign in
                            </Button>
                        </FormControl>
                    </VStack>
                </Box>
            </Center>
        </KeyboardAvoidingView>
    )
}

export default LoginPage