Projekt

Obecné

Profil

Stáhnout (4.28 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
    KeyboardAvoidingView
13
} from "native-base"
14 5ed9692c Schwobik
import { useState } from "react"
15
import { useDispatch, useSelector } from "react-redux"
16
import { login } from "../stores/actions/userThunks"
17
import { AppDispatch, RootState } from "../stores/store"
18 ddc84a2f Schwobik
import { Platform } from "react-native"
19 7e4b4e6a mschwob
20 5c86e446 mschwob
21 7e4b4e6a mschwob
const LoginPage = () => {
22 5ed9692c Schwobik
    const [username, setUsername] = useState("")
23
    const [password, setPassword] = useState("")
24
    const status = useSelector((state: RootState) => state.user.loggedIn)
25
26
    const dispatch = useDispatch<AppDispatch>()
27
28
    const loginUser = () => {
29 ddc84a2f Schwobik
        dispatch(login({username, password}))
30 5ed9692c Schwobik
        //TODO - add error handling
31
    }
32
33 7e4b4e6a mschwob
    return (
34 ddc84a2f Schwobik
        <KeyboardAvoidingView
35
            h={ {
36
                base: "400px",
37
                lg: "auto"
38
            } }
39
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
40
        >
41
            <Center w="100%">
42
                <Box
43
                    safeArea
44
                    p="2"
45
                    py="8"
46
                    w="90%"
47
                    maxW="290"
48
                >
49
                    <Heading
50
                        size="2xl"
51
                        color="primary.100"
52
                        textAlign="center"
53
                        _dark={ {
54
                            color: "primary.100"
55
                        } }
56
                    >
57
                        Inventaria Rudolphina
58
                    </Heading>
59
                    <Heading
60
                        mt="10"
61
                        textAlign="center"
62
                        _dark={ {
63
                            color: "primary.50"
64
                        } }
65
                        color="primary.50"
66
                        fontWeight="bold"
67
                        size="xl"
68 5ed9692c Schwobik
                    >
69 ddc84a2f Schwobik
                        Log in
70
                    </Heading>
71
                    <Text
72
                        mt="1"
73
                        textAlign="center"
74
                    >
75
                        Please log in to continue
76
                    </Text>
77
78
                    <VStack space={ 3 } mt="1">
79
                        <FormControl>
80
                            <FormControl.Label>Username</FormControl.Label>
81
                            <Input
82
                                // value={username}
83
                                onChangeText={ (username) => setUsername(username) }
84
                            />
85
                        </FormControl>
86
                        <FormControl>
87
                            <FormControl.Label>Password</FormControl.Label>
88
                            <Input type="password"
89
                                // value={password}
90
                                   onChangeText={ (password) => setPassword(password) }
91
                            />
92
                            <Link _text={ {
93
                                fontSize: "xs",
94
                                fontWeight: "500",
95
                                color: "indigo.500"
96
                            } } alignSelf="flex-end" mt="1">
97
                                Forget Password?
98
                            </Link>
99
                        </FormControl>
100
                        <Button
101
                            mt="2"
102
                            colorScheme="indigo"
103
                            onPress={ () => loginUser() }
104
                        >
105
                            Sign in
106
                        </Button>
107
                        <HStack mt="6" justifyContent="center">
108
                            <Text fontSize="sm" color="coolGray.600" _dark={ {
109
                                color: "warmGray.200"
110
                            } }>
111
                                I'm a new user.{ " " }
112
                            </Text>
113
                            <Link _text={ {
114
                                color: "indigo.500",
115
                                fontWeight: "medium",
116
                                fontSize: "sm"
117
                            } } href="#">
118
                                Sign Up
119
                            </Link>
120
                        </HStack>
121
                    </VStack>
122
                </Box>
123
            </Center>
124
        </KeyboardAvoidingView>
125 5c86e446 mschwob
    )
126 7e4b4e6a mschwob
}
127
128
export default LoginPage