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 |
ca53e9f1
|
Schwobik
|
textContentType={"username"}
|
84 |
|
|
autoComplete={"username"}
|
85 |
|
|
onSubmitEditing={ () => { loginUser() } }
|
86 |
ddc84a2f
|
Schwobik
|
onChangeText={ (username) => setUsername(username) }
|
87 |
|
|
/>
|
88 |
|
|
</FormControl>
|
89 |
|
|
<FormControl>
|
90 |
|
|
<FormControl.Label>Password</FormControl.Label>
|
91 |
ca53e9f1
|
Schwobik
|
<Input
|
92 |
|
|
type="password"
|
93 |
|
|
autoComplete={ "password" }
|
94 |
|
|
id={ "password" }
|
95 |
|
|
returnKeyType={ "done" }
|
96 |
|
|
onSubmitEditing={ () => loginUser() }
|
97 |
|
|
onChangeText={ (password) => setPassword(password) }
|
98 |
ddc84a2f
|
Schwobik
|
/>
|
99 |
|
|
</FormControl>
|
100 |
|
|
<Button
|
101 |
|
|
mt="2"
|
102 |
|
|
colorScheme="indigo"
|
103 |
ca53e9f1
|
Schwobik
|
onPress={ loginUser }
|
104 |
ddc84a2f
|
Schwobik
|
>
|
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
|