Projekt

Obecné

Profil

Stáhnout (4.28 KB) Statistiky
| Větev: | Tag: | Revize:
1
import {
2
    Center,
3
    Heading,
4
    VStack,
5
    FormControl,
6
    Input,
7
    Button,
8
    Text,
9
    KeyboardAvoidingView,
10
    useToast
11
} from "native-base"
12
import { useEffect, useState } from "react"
13
import { useDispatch, useSelector } from "react-redux"
14
import { checkAuth, login } from "../stores/actions/userThunks"
15
import { AppDispatch, RootState } from "../stores/store"
16
import { Platform } from "react-native"
17
import { log } from "../logging/logger"
18
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
19

    
20

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

    
26
    const dispatch = useDispatch<AppDispatch>()
27

    
28
    const toast = useToast()
29
    const loginUser = () => {
30
        log.debug("LoginPage", "loginUser", "dispatching login")
31
        dispatch(login({username, password}))
32
        //TODO - add error handling
33
    }
34

    
35
    useEffect(() => {
36
        dispatch(checkAuth())
37
    }, [])
38

    
39
    useEffect(() => {
40
        if (lastError) {
41
            toast.show({
42
                title: "Error",
43
                description: lastError,
44
                placement: "top",
45
                duration: 3000,
46
            })
47
        }
48
    }, [lastError]);
49

    
50
    return (
51
        <KeyboardAvoidingView
52
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
53
            flex={ 1 }
54
            justifyContent={ "center" }
55
            h={ {lg: "auto"} }
56
            keyboardVerticalOffset={ 100 }
57
        >
58

    
59
            <Center w="100%">
60
                <VStack
61
                    p="2"
62
                    w="80%"
63
                    justifyContent={ "space-between" }
64
                >
65
                    <ApplicationHeading />
66
                    <Heading
67
                        mt="10"
68
                        textAlign="center"
69
                        _dark={ {
70
                            color: "primary.500"
71
                        } }
72

    
73
                        fontWeight="bold"
74
                        size="xl"
75
                    >
76
                        Log in
77
                    </Heading>
78
                    <Text
79
                        mt="1"
80
                        textAlign="center"
81
                    >
82
                        Please log in to continue
83
                    </Text>
84
                    { lastError && (
85
                        <Text
86
                            mt="1"
87
                            textAlign="center"
88
                            color="error.500"
89
                        >
90
                            { lastError }
91
                        </Text>
92
                    ) }
93

    
94
                    <VStack space={ 3 } >
95
                        <FormControl>
96
                            <FormControl.Label>Username</FormControl.Label>
97
                            <Input
98
                                // value={username}
99
                                textContentType={"username"}
100
                                rounded={ "xl" }
101
                                autoComplete={"username"}
102
                                onSubmitEditing={ () => { loginUser() } }
103
                                onChangeText={ (username) => setUsername(username) }
104
                            />
105
                            <FormControl.Label>Password</FormControl.Label>
106
                            <Input
107
                                type="password"
108
                                autoComplete={ "password" }
109
                                id={ "password" }
110
                                returnKeyType={ "go" }
111
                                rounded={ "xl" }
112
                                onSubmitEditing={ () => loginUser() }
113
                                onChangeText={ (password) => setPassword(password) }
114
                            />
115
                            <Button
116
                                mt="2"
117
                                bg={ "primary.500" }
118
                                onPress={ loginUser }
119
                                rounded={ "xl"}
120
                            >
121
                                Sign in
122
                            </Button>
123
                        </FormControl>
124
                    </VStack>
125
                </VStack>
126
            </Center>
127
        </KeyboardAvoidingView>
128
    )
129
}
130

    
131
export default LoginPage
(3-3/7)