Projekt

Obecné

Profil

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