Projekt

Obecné

Profil

Stáhnout (3.13 KB) Statistiky
| Větev: | Tag: | Revize:
1
import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base"
2
import { useState } from "react"
3
import { useDispatch, useSelector } from "react-redux"
4
import { login } from "../stores/actions/userThunks"
5
import { AppDispatch, RootState } from "../stores/store"
6

    
7

    
8
const LoginPage = () => {
9
    const [username, setUsername] = useState("")
10
    const [password, setPassword] = useState("")
11
    const status = useSelector((state: RootState) => state.user.loggedIn)
12

    
13
    const dispatch = useDispatch<AppDispatch>()
14

    
15
    const loginUser = () => {
16
        dispatch(login({ username, password }))
17
        //TODO - add error handling
18
        //TODO add redirect to home page
19
    }
20

    
21
    return (
22
        <Center w="100%">
23
            <Box safeArea p="2" py="8" w="90%" maxW="290">
24
                <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
25
                    color: "warmGray.50"
26
                }}>
27
                    Welcome
28
                </Heading>
29
                <Heading mt="1" _dark={{
30
                    color: "warmGray.200"
31
                }} color="coolGray.600" fontWeight="medium" size="xs">
32
                    Sign in to continue!
33
                </Heading>
34

    
35
                <VStack space={3} mt="5">
36
                    <FormControl>
37
                        <FormControl.Label>Username</FormControl.Label>
38
                        <Input
39
                            // value={username}
40
                            onChangeText={(username) => setUsername(username)}
41
                        />
42
                    </FormControl>
43
                    <FormControl>
44
                        <FormControl.Label>Password</FormControl.Label>
45
                        <Input type="password"
46
                            // value={password}
47
                            onChangeText={(password) => setPassword(password)}
48
                        />
49
                        <Link _text={{
50
                            fontSize: "xs",
51
                            fontWeight: "500",
52
                            color: "indigo.500"
53
                        }} alignSelf="flex-end" mt="1">
54
                            Forget Password?
55
                        </Link>
56
                    </FormControl>
57
                    <Button
58
                        mt="2"
59
                        colorScheme="indigo"
60
                        onPress={() => loginUser()}
61
                    >
62
                        Sign in
63
                    </Button>
64
                    <HStack mt="6" justifyContent="center">
65
                        <Text fontSize="sm" color="coolGray.600" _dark={{
66
                            color: "warmGray.200"
67
                        }}>
68
                            I'm a new user.{" "}
69
                        </Text>
70
                        <Link _text={{
71
                            color: "indigo.500",
72
                            fontWeight: "medium",
73
                            fontSize: "sm"
74
                        }} href="#">
75
                            Sign Up
76
                        </Link>
77
                    </HStack>
78
                </VStack>
79
            </Box>
80
        </Center>
81
    )
82
}
83

    
84
export default LoginPage
(2-2/2)