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

import {
    Center,
    Heading,
    VStack,
    FormControl,
    Input,
    Button,
    Text,
    KeyboardAvoidingView,
    useToast
} from "native-base"
import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { checkAuth, login } from "../stores/actions/userThunks"
import { AppDispatch, RootState } from "../stores/store"
import { Platform } from "react-native"
import { log } from "../logging/logger"
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"


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

    const dispatch = useDispatch<AppDispatch>()

    const toast = useToast()
    const loginUser = () => {
        log.debug("LoginPage", "loginUser", "dispatching login")
        dispatch(login({username, password}))
        //TODO - add error handling
    }

    useEffect(() => {
        dispatch(checkAuth())
    }, [])

    useEffect(() => {
        if (lastError) {
            toast.show({
                title: "Error",
                description: lastError,
                placement: "top",
                duration: 3000,
            })
        }
    }, [lastError]);

    return (
        <KeyboardAvoidingView
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
            flex={ 1 }
            justifyContent={ "center" }
            h={ {lg: "auto"} }
            keyboardVerticalOffset={ 100 }
        >

            <Center w="100%">
                <VStack
                    p="2"
                    w="80%"
                    justifyContent={ "space-between" }
                >
                    <ApplicationHeading />
                    <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>
                    { lastError && (
                        <Text
                            mt="1"
                            textAlign="center"
                            color="error.500"
                        >
                            { lastError }
                        </Text>
                    ) }

                    <VStack space={ 3 } >
                        <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>
                </VStack>
            </Center>
        </KeyboardAvoidingView>
    )
}

export default LoginPage