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

import {
    Center,
    Box,
    Heading,
    VStack,
    FormControl,
    Link,
    Input,
    Button,
    HStack,
    Text,
    KeyboardAvoidingView,
    useToast
} from "native-base"
import { useCallback, useContext, 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 * as SplashScreen from "expo-splash-screen"
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
import { InfoToast } from "../components/toast/InfoToast"
import { ErrorToast } from "../components/toast/ErrorToast"
import { SuccessToast } from "../components/toast/SuccessToast"


const LoginPage = () => {
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")

    const lastError = useSelector((state: RootState) => state.user.lastError)
    const toast = useToast();

    useEffect(() => {
        if (lastError) {
            toast.closeAll()
            toast.show({
                render: ({
                    id
                }) => {
                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
                },
                duration: 3000
            });
        }
    }, [lastError])

    const dispatch = useDispatch<AppDispatch>()

    const loginUser = () => {
        log.debug("LoginPage", "loginUser", "dispatching login")
        dispatch(login({ username, password }))
    }

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

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            flex={1}
            justifyContent={"center"}
            h={{
                base: "400px",
                lg: "auto"
            }}
        >
            <Center w="100%">
                <VStack
                    p="2"
                    w="80%"
                    justifyContent={"center"}
                >
                    <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