Revize c8be2597
Přidáno uživatelem Fantič před více než 1 rok
src/pages/LoginPage.tsx | ||
---|---|---|
9 | 9 |
Button, |
10 | 10 |
HStack, |
11 | 11 |
Text, |
12 |
KeyboardAvoidingView |
|
12 |
KeyboardAvoidingView, |
|
13 |
useToast |
|
13 | 14 |
} from "native-base" |
14 |
import { useCallback, useEffect, useState } from "react" |
|
15 |
import { useCallback, useContext, useEffect, useState } from "react"
|
|
15 | 16 |
import { useDispatch, useSelector } from "react-redux" |
16 | 17 |
import { checkAuth, login } from "../stores/actions/userThunks" |
17 | 18 |
import { AppDispatch, RootState } from "../stores/store" |
... | ... | |
19 | 20 |
import { log } from "../logging/logger" |
20 | 21 |
import * as SplashScreen from "expo-splash-screen" |
21 | 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" |
|
22 | 26 |
|
23 | 27 |
|
24 | 28 |
const LoginPage = () => { |
25 | 29 |
const [username, setUsername] = useState("") |
26 | 30 |
const [password, setPassword] = useState("") |
31 |
|
|
27 | 32 |
const lastError = useSelector((state: RootState) => state.user.lastError) |
28 | 33 |
|
34 |
const toast = useToast(); |
|
35 |
|
|
36 |
|
|
37 |
useEffect(() => { |
|
38 |
if (lastError) { |
|
39 |
toast.closeAll() |
|
40 |
toast.show({ |
|
41 |
render: ({ |
|
42 |
id |
|
43 |
}) => { |
|
44 |
return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />; |
|
45 |
}, |
|
46 |
duration: 3000 |
|
47 |
}); |
|
48 |
} |
|
49 |
|
|
50 |
}, [lastError]) |
|
51 |
|
|
29 | 52 |
const dispatch = useDispatch<AppDispatch>() |
30 | 53 |
|
31 | 54 |
const loginUser = () => { |
32 | 55 |
log.debug("LoginPage", "loginUser", "dispatching login") |
33 |
dispatch(login({username, password})) |
|
34 |
//TODO - add error handling |
|
56 |
dispatch(login({ username, password })) |
|
35 | 57 |
} |
36 | 58 |
|
37 |
|
|
38 | 59 |
useEffect(() => { |
39 | 60 |
dispatch(checkAuth()) |
40 | 61 |
}, []) |
41 | 62 |
|
42 | 63 |
return ( |
43 | 64 |
<KeyboardAvoidingView |
44 |
behavior={ Platform.OS === "ios" ? "padding" : "height" }
|
|
45 |
flex={ 1 }
|
|
46 |
justifyContent={ "center" }
|
|
47 |
h={ {
|
|
65 |
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
66 |
flex={1}
|
|
67 |
justifyContent={"center"}
|
|
68 |
h={{ |
|
48 | 69 |
base: "400px", |
49 | 70 |
lg: "auto" |
50 |
} }
|
|
71 |
}} |
|
51 | 72 |
> |
52 | 73 |
<Center w="100%"> |
53 | 74 |
<VStack |
54 | 75 |
p="2" |
55 | 76 |
w="80%" |
56 |
justifyContent={ "center" }
|
|
77 |
justifyContent={"center"}
|
|
57 | 78 |
> |
58 | 79 |
<ApplicationHeading /> |
59 | 80 |
<Heading |
60 | 81 |
mt="10" |
61 | 82 |
textAlign="center" |
62 |
_dark={ {
|
|
83 |
_dark={{ |
|
63 | 84 |
color: "primary.500" |
64 |
} }
|
|
85 |
}} |
|
65 | 86 |
|
66 | 87 |
fontWeight="bold" |
67 | 88 |
size="xl" |
... | ... | |
74 | 95 |
> |
75 | 96 |
Please log in to continue |
76 | 97 |
</Text> |
77 |
{ lastError && (
|
|
98 |
{lastError && ( |
|
78 | 99 |
<Text |
79 | 100 |
mt="1" |
80 | 101 |
textAlign="center" |
81 | 102 |
color="error.500" |
82 | 103 |
> |
83 |
{ lastError }
|
|
104 |
{lastError}
|
|
84 | 105 |
</Text> |
85 |
) }
|
|
106 |
)} |
|
86 | 107 |
|
87 |
<VStack space={ 3 } >
|
|
108 |
<VStack space={3} >
|
|
88 | 109 |
<FormControl> |
89 | 110 |
<FormControl.Label>Username</FormControl.Label> |
90 | 111 |
<Input |
91 | 112 |
// value={username} |
92 | 113 |
textContentType={"username"} |
93 |
rounded={ "xl" }
|
|
114 |
rounded={"xl"}
|
|
94 | 115 |
autoComplete={"username"} |
95 |
onSubmitEditing={ () => { loginUser() } }
|
|
96 |
onChangeText={ (username) => setUsername(username) }
|
|
116 |
onSubmitEditing={() => { loginUser() }}
|
|
117 |
onChangeText={(username) => setUsername(username)}
|
|
97 | 118 |
/> |
98 | 119 |
<FormControl.Label>Password</FormControl.Label> |
99 | 120 |
<Input |
100 | 121 |
type="password" |
101 |
autoComplete={ "password" }
|
|
102 |
id={ "password" }
|
|
103 |
returnKeyType={ "go" }
|
|
104 |
rounded={ "xl" }
|
|
105 |
onSubmitEditing={ () => loginUser() }
|
|
106 |
onChangeText={ (password) => setPassword(password) }
|
|
122 |
autoComplete={"password"}
|
|
123 |
id={"password"}
|
|
124 |
returnKeyType={"go"}
|
|
125 |
rounded={"xl"}
|
|
126 |
onSubmitEditing={() => loginUser()}
|
|
127 |
onChangeText={(password) => setPassword(password)}
|
|
107 | 128 |
/> |
108 | 129 |
<Button |
109 | 130 |
mt="2" |
110 |
bg={ "primary.500" }
|
|
111 |
onPress={ loginUser }
|
|
112 |
rounded={ "xl"}
|
|
131 |
bg={"primary.500"}
|
|
132 |
onPress={loginUser}
|
|
133 |
rounded={"xl"} |
|
113 | 134 |
> |
114 | 135 |
Sign in |
115 | 136 |
</Button> |
Také k dispozici: Unified diff
re #10818 Vývoj Toast info/error: basic components style