1
|
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
|
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
|
import { Platform } from "react-native"
|
19
|
|
20
|
|
21
|
const LoginPage = () => {
|
22
|
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
|
dispatch(login({username, password}))
|
30
|
//TODO - add error handling
|
31
|
}
|
32
|
|
33
|
return (
|
34
|
<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
|
>
|
69
|
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
|
)
|
126
|
}
|
127
|
|
128
|
export default LoginPage
|