Projekt

Obecné

Profil

Stáhnout (4.28 KB) Statistiky
| Větev: | Tag: | Revize:
1 ddc84a2f Schwobik
import {
2
    Center,
3
    Heading,
4
    VStack,
5
    FormControl,
6
    Input,
7
    Button,
8
    Text,
9 d963a25c Michal Schwob
    KeyboardAvoidingView,
10
    useToast
11 ddc84a2f Schwobik
} from "native-base"
12 d963a25c Michal Schwob
import { useEffect, useState } from "react"
13 5ed9692c Schwobik
import { useDispatch, useSelector } from "react-redux"
14 06808454 Schwobik
import { checkAuth, login } from "../stores/actions/userThunks"
15 5ed9692c Schwobik
import { AppDispatch, RootState } from "../stores/store"
16 ddc84a2f Schwobik
import { Platform } from "react-native"
17 06808454 Schwobik
import { log } from "../logging/logger"
18
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
19 7e4b4e6a mschwob
20 5c86e446 mschwob
21 7e4b4e6a mschwob
const LoginPage = () => {
22 5ed9692c Schwobik
    const [username, setUsername] = useState("")
23
    const [password, setPassword] = useState("")
24 06808454 Schwobik
    const lastError = useSelector((state: RootState) => state.user.lastError)
25 5ed9692c Schwobik
26
    const dispatch = useDispatch<AppDispatch>()
27
28 7410d6c1 Michal Schwob
    const toast = useToast()
29 5ed9692c Schwobik
    const loginUser = () => {
30 06808454 Schwobik
        log.debug("LoginPage", "loginUser", "dispatching login")
31 ddc84a2f Schwobik
        dispatch(login({username, password}))
32 5ed9692c Schwobik
        //TODO - add error handling
33
    }
34
35 06808454 Schwobik
    useEffect(() => {
36
        dispatch(checkAuth())
37
    }, [])
38
39 7410d6c1 Michal Schwob
    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 7e4b4e6a mschwob
    return (
51 ddc84a2f Schwobik
        <KeyboardAvoidingView
52 06808454 Schwobik
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
53
            flex={ 1 }
54
            justifyContent={ "center" }
55 9fa2b717 Michal Schwob
            h={ {lg: "auto"} }
56
            keyboardVerticalOffset={ 100 }
57 ddc84a2f Schwobik
        >
58 7410d6c1 Michal Schwob
59 ddc84a2f Schwobik
            <Center w="100%">
60 06808454 Schwobik
                <VStack
61 ddc84a2f Schwobik
                    p="2"
62 06808454 Schwobik
                    w="80%"
63 9fa2b717 Michal Schwob
                    justifyContent={ "space-between" }
64 ddc84a2f Schwobik
                >
65 06808454 Schwobik
                    <ApplicationHeading />
66 ddc84a2f Schwobik
                    <Heading
67
                        mt="10"
68
                        textAlign="center"
69
                        _dark={ {
70 1980ed09 Schwobik
                            color: "primary.500"
71 ddc84a2f Schwobik
                        } }
72 1980ed09 Schwobik
73 ddc84a2f Schwobik
                        fontWeight="bold"
74
                        size="xl"
75 5ed9692c Schwobik
                    >
76 ddc84a2f Schwobik
                        Log in
77
                    </Heading>
78
                    <Text
79
                        mt="1"
80
                        textAlign="center"
81
                    >
82
                        Please log in to continue
83
                    </Text>
84 06808454 Schwobik
                    { lastError && (
85 d963a25c Michal Schwob
                        <Text
86
                            mt="1"
87
                            textAlign="center"
88
                            color="error.500"
89
                        >
90
                            { lastError }
91
                        </Text>
92 06808454 Schwobik
                    ) }
93 ddc84a2f Schwobik
94 06808454 Schwobik
                    <VStack space={ 3 } >
95 ddc84a2f Schwobik
                        <FormControl>
96
                            <FormControl.Label>Username</FormControl.Label>
97
                            <Input
98
                                // value={username}
99 ca53e9f1 Schwobik
                                textContentType={"username"}
100 1980ed09 Schwobik
                                rounded={ "xl" }
101 ca53e9f1 Schwobik
                                autoComplete={"username"}
102
                                onSubmitEditing={ () => { loginUser() } }
103 ddc84a2f Schwobik
                                onChangeText={ (username) => setUsername(username) }
104
                            />
105
                            <FormControl.Label>Password</FormControl.Label>
106 ca53e9f1 Schwobik
                            <Input
107
                                type="password"
108
                                autoComplete={ "password" }
109
                                id={ "password" }
110 1980ed09 Schwobik
                                returnKeyType={ "go" }
111
                                rounded={ "xl" }
112 ca53e9f1 Schwobik
                                onSubmitEditing={ () => loginUser() }
113
                                onChangeText={ (password) => setPassword(password) }
114 ddc84a2f Schwobik
                            />
115 1980ed09 Schwobik
                            <Button
116
                                mt="2"
117
                                bg={ "primary.500" }
118
                                onPress={ loginUser }
119
                                rounded={ "xl"}
120
                            >
121
                                Sign in
122
                            </Button>
123 ddc84a2f Schwobik
                        </FormControl>
124
                    </VStack>
125 06808454 Schwobik
                </VStack>
126 ddc84a2f Schwobik
            </Center>
127
        </KeyboardAvoidingView>
128 5c86e446 mschwob
    )
129 7e4b4e6a mschwob
}
130
131
export default LoginPage