GitMarkonics/src/components/Login.js at ca6d9197927a9297f40540b9e1d3db853ab6beac · CodeFlowOrg/GitMarkonics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React from "react";
import "./Login.css";
import Navbar from "./Navbar";
import {
    Button,
    Heading,
    HStack,
    Input,
    InputGroup,
    InputLeftElement,
    Link,
    VStack,
} from "@chakra-ui/react";
import { RiAccountPinBoxFill } from "react-icons/ri";
import { RiLockPasswordFill } from "react-icons/ri";


function Login() {
    return ( <
        >
        <
        Navbar / >
        <
        div className = "login" >
        <
        div className = "login__container" >
        <
        div className = "login__containerTop" >
        <
        div className = "login__img" > < /div> <
        p > Add a crisp to your bulky documents!! < /p> <
        h4 > Welcome to the website < /h4> < /
        div > <
        div className = "login__containerBottom" >
        <
        VStack className = "input__container"
        w = "65%"
        m = "auto" >
        <
        Heading fontSize = "1.2rem"
        color = "blue.500"
        fontWeight = "semibold"
        py = { 3 } >
        USER LOGIN <
        /Heading> <
        InputGroup w = "95%"
        borderRadius = "full"
        bgColor = "gray.200" >
        <
        InputLeftElement margin = "0 20px"
        pointerEvents = "none"
        children = { <
            RiAccountPinBoxFill color = "#C6C6E8"
            fontSize = "2.1rem" / >
        }
        /> <
        Input borderRadius = "full"
        type = "tel"
        placeholder = "Username"
        paddingLeft = "60px" /
        >
        <
        /InputGroup> <
        InputGroup className = "login__input"
        w = "95%"
        borderRadius = "full"
        bgColor = "gray.200" >
        <
        InputLeftElement margin = "0 20px"
        pointerEvents = "none"
        children = { <
            RiLockPasswordFill color = "#C6C6E8"
            fontSize = "2.1rem" / >
        }
        /> <
        Input type = "password"
        borderRadius = "full"
        placeholder = "Password"
        paddingLeft = "60px" /
        >
        <
        /InputGroup> <
        Link fontSize = "sm"
        textDecoration = "underline"
        color = "blue" >
        <
        a href = "/register" > Need Account ? < /a> < /
        Link > <
        HStack className = "login__btn"
        alignSelf = "flex-end" >
        <
        Button colorScheme = "pink"
        px = "6"
        size = "sm"
        fontWeight = "bold"
        className = "loginBtn" >
        LOGIN <
        /Button> <
        Link fontSize = "sm"
        textDecoration = "underline"
        color = "blue" >
        <
        a href = "/forget" > Forgot password ? < /a> < /
        Link > <
        /HStack> < /
        VStack > <
        /div> < /
        div > <
        /div> < /
        >
    );
}

export default Login;