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