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