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

import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } 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"


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
        //TODO add redirect to home page
    }

    return (
        <Center w="100%">
            <Box safeArea p="2" py="8" w="90%" maxW="290">
                <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
                    color: "warmGray.50"
                }}>
                    Welcome
                </Heading>
                <Heading mt="1" _dark={{
                    color: "warmGray.200"
                }} color="coolGray.600" fontWeight="medium" size="xs">
                    Sign in to continue!
                </Heading>

                <VStack space={3} mt="5">
                    <FormControl>
                        <FormControl.Label>Username</FormControl.Label>
                        <Input
                            // value={username}
                            onChangeText={(username) => setUsername(username)}
                        />
                    </FormControl>
                    <FormControl>
                        <FormControl.Label>Password</FormControl.Label>
                        <Input type="password"
                            // value={password}
                            onChangeText={(password) => setPassword(password)}
                        />
                        <Link _text={{
                            fontSize: "xs",
                            fontWeight: "500",
                            color: "indigo.500"
                        }} alignSelf="flex-end" mt="1">
                            Forget Password?
                        </Link>
                    </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>
    )
}

export default LoginPage