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

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.100"
                        textAlign="center"
                        _dark={ {
                            color: "primary.100"
                        } }
                    >
                        Inventaria Rudolphina
                    </Heading>
                    <Heading
                        mt="10"
                        textAlign="center"
                        _dark={ {
                            color: "primary.50"
                        } }
                        color="primary.50"
                        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"}
                                autoComplete={"username"}
                                onSubmitEditing={ () => { loginUser() } }
                                onChangeText={ (username) => setUsername(username) }
                            />
                        </FormControl>
                        <FormControl>
                            <FormControl.Label>Password</FormControl.Label>
                            <Input
                                type="password"
                                autoComplete={ "password" }
                                id={ "password" }
                                returnKeyType={ "done" }
                                onSubmitEditing={ () => loginUser() }
                                onChangeText={ (password) => setPassword(password) }
                            />
                        </FormControl>
                        <Button
                            mt="2"
                            colorScheme="indigo"
                            onPress={ loginUser }
                        >
                            Sign in
                        </Button>
                        <HStack mt="6" justifyContent="center">
                            <Text fontSize="sm" color="coolGray.600" _dark={ {
                                color: "warmGray.200"
                            } }>
                                I'm a new user.{ " " }
                            </Text>
                            <Link _text={ {
                                color: "indigo.500",
                                fontWeight: "medium",
                                fontSize: "sm"
                            } } href="#">
                                Sign Up
                            </Link>
                        </HStack>
                    </VStack>
                </Box>
            </Center>
        </KeyboardAvoidingView>
    )
}

export default LoginPage