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