Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 5c86e446

Přidáno uživatelem Michal Schwob před téměř 2 roky(ů)

Login page base

Zobrazit rozdíly:

App.tsx
1 1
import { StatusBar } from 'expo-status-bar'
2 2
import { StyleSheet, Text, View } from 'react-native'
3
import { NativeBaseProvider, Box } from "native-base"
3 4
import LoginPage from './src/pages/LoginPage'
4 5

  
5 6
export default function App() {
6 7
  return (
7
    <View style={styles.container}>
8
      <Text>Open up App.js to start working on your app!</Text>
9
      <StatusBar style="auto" />
10
      <LoginPage />
11
    </View>
8
      <NativeBaseProvider>
9
        <LoginPage />
10
      </NativeBaseProvider>
12 11
  );
13 12
}
14 13

  
package.json
9 9
    "web": "expo start --web"
10 10
  },
11 11
  "dependencies": {
12
    "@reduxjs/toolkit": "^1.9.3",
12 13
    "axios": "^1.3.4",
13 14
    "expo": "~48.0.9",
14 15
    "expo-status-bar": "~1.4.4",
16
    "native-base": "^3.4.28",
15 17
    "react": "18.2.0",
16 18
    "react-native": "0.71.4",
19
    "react-native-safe-area-context": "4.5.0",
20
    "react-native-svg": "13.4.0",
21
    "redux": "^4.2.1",
17 22
    "typescript": "^4.9.4"
18 23
  },
19 24
  "devDependencies": {
src/pages/LoginPage.tsx
1
import {Fragment} from "react"
2
import { Button } from "react-native/Libraries/Components/Button"
3
import { Text } from "react-native/Libraries/Components/Text"
1
import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base"
4 2
import { axiosInstance } from "../api/api"
5 3

  
6 4
let text: number = 199
7 5
const fakeLogin = async () => {
6
    text = 101
7
    console.log("zmacknuto")
8 8
    axiosInstance.post(
9
        '/api/login',
9
        '/api/login/',
10 10
        {"username": "viktorie", "password": "Golem123."}
11 11
    ).then((response) => {
12 12
        text = response.status
13
        console.log(response)
14
    })
15
}
16

  
17
const fakeRequest = async () => {
18
    text = 101
19
    console.log("request")
20
    axiosInstance.get(
21
        '/api/users'
22
    ).then((response) => {
23
        text = response.status
24
        console.log(response)
13 25
    })
14 26
}
15 27
const LoginPage = () => {
16 28
    return (
17
        <Fragment>
18
            <Button onPress={fakeLogin} title="Login" color="#841584" accessibilityLabel="Press to login"/>
19
            <Text>{text}</Text>
20
        </Fragment>
21
)
29
        <Center w="100%">
30
            <Box safeArea p="2" py="8" w="90%" maxW="290">
31
                <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
32
                    color: "warmGray.50"
33
                }}>
34
                    Welcome
35
                </Heading>
36
                <Heading mt="1" _dark={{
37
                    color: "warmGray.200"
38
                }} color="coolGray.600" fontWeight="medium" size="xs">
39
                    Sign in to continue!
40
                </Heading>
41

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

  
24 81
export default LoginPage

Také k dispozici: Unified diff