coreui-free-react-admin-template

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

17
const Register = () => {
18
  return (
19
    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
20
      <CContainer>
21
        <CRow className="justify-content-center">
22
          <CCol md={9} lg={7} xl={6}>
23
            <CCard className="mx-4">
24
              <CCardBody className="p-4">
25
                <CForm>
26
                  <h1>Register</h1>
27
                  <p className="text-body-secondary">Create your account</p>
28
                  <CInputGroup className="mb-3">
29
                    <CInputGroupText>
30
                      <CIcon icon={cilUser} />
31
                    </CInputGroupText>
32
                    <CFormInput placeholder="Username" autoComplete="username" />
33
                  </CInputGroup>
34
                  <CInputGroup className="mb-3">
35
                    <CInputGroupText>@</CInputGroupText>
36
                    <CFormInput placeholder="Email" autoComplete="email" />
37
                  </CInputGroup>
38
                  <CInputGroup className="mb-3">
39
                    <CInputGroupText>
40
                      <CIcon icon={cilLockLocked} />
41
                    </CInputGroupText>
42
                    <CFormInput
43
                      type="password"
44
                      placeholder="Password"
45
                      autoComplete="new-password"
46
                    />
47
                  </CInputGroup>
48
                  <CInputGroup className="mb-4">
49
                    <CInputGroupText>
50
                      <CIcon icon={cilLockLocked} />
51
                    </CInputGroupText>
52
                    <CFormInput
53
                      type="password"
54
                      placeholder="Repeat password"
55
                      autoComplete="new-password"
56
                    />
57
                  </CInputGroup>
58
                  <div className="d-grid">
59
                    <CButton color="success">Create Account</CButton>
60
                  </div>
61
                </CForm>
62
              </CCardBody>
63
            </CCard>
64
          </CCol>
65
        </CRow>
66
      </CContainer>
67
    </div>
68
  )
69
}
70

71
export default Register
72