coreui-free-react-admin-template

1
import React from 'react'
2
import { Link } from 'react-router-dom'
3
import {
4
  CButton,
5
  CCard,
6
  CCardBody,
7
  CCardGroup,
8
  CCol,
9
  CContainer,
10
  CForm,
11
  CFormInput,
12
  CInputGroup,
13
  CInputGroupText,
14
  CRow,
15
} from '@coreui/react'
16
import CIcon from '@coreui/icons-react'
17
import { cilLockLocked, cilUser } from '@coreui/icons'
18

19
const Login = () => {
20
  return (
21
    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
22
      <CContainer>
23
        <CRow className="justify-content-center">
24
          <CCol md={8}>
25
            <CCardGroup>
26
              <CCard className="p-4">
27
                <CCardBody>
28
                  <CForm>
29
                    <h1>Login</h1>
30
                    <p className="text-body-secondary">Sign In to your account</p>
31
                    <CInputGroup className="mb-3">
32
                      <CInputGroupText>
33
                        <CIcon icon={cilUser} />
34
                      </CInputGroupText>
35
                      <CFormInput placeholder="Username" autoComplete="username" />
36
                    </CInputGroup>
37
                    <CInputGroup className="mb-4">
38
                      <CInputGroupText>
39
                        <CIcon icon={cilLockLocked} />
40
                      </CInputGroupText>
41
                      <CFormInput
42
                        type="password"
43
                        placeholder="Password"
44
                        autoComplete="current-password"
45
                      />
46
                    </CInputGroup>
47
                    <CRow>
48
                      <CCol xs={6}>
49
                        <CButton color="primary" className="px-4">
50
                          Login
51
                        </CButton>
52
                      </CCol>
53
                      <CCol xs={6} className="text-right">
54
                        <CButton color="link" className="px-0">
55
                          Forgot password?
56
                        </CButton>
57
                      </CCol>
58
                    </CRow>
59
                  </CForm>
60
                </CCardBody>
61
              </CCard>
62
              <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
63
                <CCardBody className="text-center">
64
                  <div>
65
                    <h2>Sign up</h2>
66
                    <p>
67
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
68
                      tempor incididunt ut labore et dolore magna aliqua.
69
                    </p>
70
                    <Link to="/register">
71
                      <CButton color="primary" className="mt-3" active tabIndex={-1}>
72
                        Register Now!
73
                      </CButton>
74
                    </Link>
75
                  </div>
76
                </CCardBody>
77
              </CCard>
78
            </CCardGroup>
79
          </CCol>
80
        </CRow>
81
      </CContainer>
82
    </div>
83
  )
84
}
85

86
export default Login
87