Projekt

Obecné

Profil

Stáhnout (4.63 KB) Statistiky
| Větev: | Tag: | Revize:
1
import {
2
    Center,
3
    Box,
4
    Heading,
5
    VStack,
6
    FormControl,
7
    Link,
8
    Input,
9
    Button,
10
    HStack,
11
    Text,
12
    KeyboardAvoidingView,
13
    useToast
14
} from "native-base"
15
import { useCallback, useContext, useEffect, useState } from "react"
16
import { useDispatch, useSelector } from "react-redux"
17
import { checkAuth, login } from "../stores/actions/userThunks"
18
import { AppDispatch, RootState } from "../stores/store"
19
import { Platform } from "react-native"
20
import { log } from "../logging/logger"
21
import * as SplashScreen from "expo-splash-screen"
22
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
23
import { InfoToast } from "../components/toast/InfoToast"
24
import { ErrorToast } from "../components/toast/ErrorToast"
25
import { SuccessToast } from "../components/toast/SuccessToast"
26

    
27

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

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

    
35
    useEffect(() => {
36
        if (lastError) {
37
            toast.closeAll()
38
            toast.show({
39
                render: ({
40
                    id
41
                }) => {
42
                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
43
                },
44
                duration: 3000
45
            });
46
        }
47
    }, [lastError])
48

    
49
    const dispatch = useDispatch<AppDispatch>()
50

    
51
    const loginUser = () => {
52
        log.debug("LoginPage", "loginUser", "dispatching login")
53
        dispatch(login({ username, password }))
54
    }
55

    
56
    useEffect(() => {
57
        dispatch(checkAuth())
58
    }, [])
59

    
60
    return (
61
        <KeyboardAvoidingView
62
            behavior={Platform.OS === "ios" ? "padding" : "height"}
63
            flex={1}
64
            justifyContent={"center"}
65
            h={{
66
                base: "400px",
67
                lg: "auto"
68
            }}
69
        >
70
            <Center w="100%">
71
                <VStack
72
                    p="2"
73
                    w="80%"
74
                    justifyContent={"center"}
75
                >
76
                    <ApplicationHeading />
77
                    <Heading
78
                        mt="10"
79
                        textAlign="center"
80
                        _dark={{
81
                            color: "primary.500"
82
                        }}
83

    
84
                        fontWeight="bold"
85
                        size="xl"
86
                    >
87
                        Log in
88
                    </Heading>
89
                    <Text
90
                        mt="1"
91
                        textAlign="center"
92
                    >
93
                        Please log in to continue
94
                    </Text>
95
                    {lastError && (
96
                        <Text
97
                            mt="1"
98
                            textAlign="center"
99
                            color="error.500"
100
                        >
101
                            {lastError}
102
                        </Text>
103
                    )}
104

    
105
                    <VStack space={3} >
106
                        <FormControl>
107
                            <FormControl.Label>Username</FormControl.Label>
108
                            <Input
109
                                // value={username}
110
                                textContentType={"username"}
111
                                rounded={"xl"}
112
                                autoComplete={"username"}
113
                                onSubmitEditing={() => { loginUser() }}
114
                                onChangeText={(username) => setUsername(username)}
115
                            />
116
                            <FormControl.Label>Password</FormControl.Label>
117
                            <Input
118
                                type="password"
119
                                autoComplete={"password"}
120
                                id={"password"}
121
                                returnKeyType={"go"}
122
                                rounded={"xl"}
123
                                onSubmitEditing={() => loginUser()}
124
                                onChangeText={(password) => setPassword(password)}
125
                            />
126
                            <Button
127
                                mt="2"
128
                                bg={"primary.500"}
129
                                onPress={loginUser}
130
                                rounded={"xl"}
131
                            >
132
                                Sign in
133
                            </Button>
134
                        </FormControl>
135
                    </VStack>
136
                </VStack>
137
            </Center>
138
        </KeyboardAvoidingView>
139
    )
140
}
141

    
142
export default LoginPage
(3-3/8)