Projekt

Obecné

Profil

Stáhnout (4.48 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, useToast
13
} from "native-base"
14
import { useCallback, useEffect, useState } from "react"
15
import { useDispatch, useSelector } from "react-redux"
16
import { checkAuth, login } from "../stores/actions/userThunks"
17
import { AppDispatch, RootState } from "../stores/store"
18
import { Platform } from "react-native"
19
import { log } from "../logging/logger"
20
import * as SplashScreen from "expo-splash-screen"
21
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
22
import {consumeError} from "../stores/reducers/userSlice"
23

    
24

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

    
30
    const dispatch = useDispatch<AppDispatch>()
31

    
32
    const toast = useToast()
33
    const loginUser = () => {
34
        log.debug("LoginPage", "loginUser", "dispatching login")
35
        dispatch(login({username, password}))
36
        //TODO - add error handling
37
    }
38

    
39
    useEffect(() => {
40
        dispatch(checkAuth())
41
    }, [])
42

    
43
    useEffect(() => {
44
        if (lastError) {
45
            toast.show({
46
                title: "Error",
47
                description: lastError,
48
                placement: "top",
49
                duration: 3000,
50
            })
51
            // dispatch(consumeError())
52
        }
53
    }, [lastError]);
54

    
55
    return (
56
        <KeyboardAvoidingView
57
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
58
            flex={ 1 }
59
            justifyContent={ "center" }
60
            h={ {
61
                base: "400px",
62
                lg: "auto"
63
            } }
64
        >
65

    
66
            <Center w="100%">
67
                <VStack
68
                    p="2"
69
                    w="80%"
70
                    justifyContent={ "center" }
71
                >
72
                    <ApplicationHeading />
73
                    <Heading
74
                        mt="10"
75
                        textAlign="center"
76
                        _dark={ {
77
                            color: "primary.500"
78
                        } }
79

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

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

    
138
export default LoginPage
(3-3/7)