import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';

class Register extends Component {
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <h1>Register</h1>
                  <p className="text-muted">Create your account</p>
                  <InputGroup className="mb-3">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>
                        <i className="icon-user"></i>
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input type="text" placeholder="Username" />
                  </InputGroup>
                  <InputGroup className="mb-3">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>@</InputGroupText>
                    </InputGroupAddon>
                    <Input type="text" placeholder="Email" />
                  </InputGroup>
                  <InputGroup className="mb-3">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>
                        <i className="icon-lock"></i>
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input type="password" placeholder="Password" />
                  </InputGroup>
                  <InputGroup className="mb-4">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>
                        <i className="icon-lock"></i>
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input type="password" placeholder="Repeat password" />
                  </InputGroup>
                  <Button color="success" block>Create Account</Button>
                </CardBody>
                <CardFooter className="p-4">
                  <Row>
                    <Col xs="12" sm="6">
                      <Button className="btn-facebook" block><span>facebook</span></Button>
                    </Col>
                    <Col xs="12" sm="6">
                      <Button className="btn-twitter" block><span>twitter</span></Button>
                    </Col>
                  </Row>
                </CardFooter>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Register;

@@ -95,16 +95,22 @@
 ntainer,
+ Form,
  Input, 
@@ -179,16 +179,16 @@
 strap';%0A
-
 %0Aclass R
@@ -466,32 +466,59 @@
 lassName=%22p-4%22%3E%0A
+                  %3CForm%3E%0A  
                 
@@ -555,16 +555,18 @@
         
+ 
+ 
 %3Cp class
@@ -617,32 +617,34 @@
                 
+  
 %3CInputGroup clas
@@ -669,32 +669,34 @@
                 
+ 
+ 
 %3CInputGroupAddon
@@ -709,32 +709,34 @@
 Type=%22prepend%22%3E%0A
+  
                 
@@ -774,32 +774,34 @@
                 
+  
 %3Ci className=%22ic
@@ -810,24 +810,26 @@
 -user%22%3E%3C/i%3E%0A
+  
             
@@ -868,32 +868,34 @@
                 
+  
 %3C/InputGroupAddo
@@ -909,32 +909,34 @@
                 
+ 
+ 
 %3CInput type=%22tex
@@ -960,20 +960,46 @@
 sername%22
+ autoComplete=%22username%22
  /%3E%0A
+  
         
@@ -1032,32 +1032,34 @@
                 
+  
 %3CInputGroup clas
@@ -1064,32 +1064,34 @@
 assName=%22mb-3%22%3E%0A
+  
                 
@@ -1146,32 +1146,34 @@
                 
+  
 %3CInputGroupText%3E
@@ -1203,32 +1203,34 @@
                 
+ 
+ 
 %3C/InputGroupAddo
@@ -1224,32 +1224,34 @@
 nputGroupAddon%3E%0A
+  
                 
@@ -1292,20 +1292,43 @@
 =%22Email%22
+ autoComplete=%22email%22
  /%3E%0A
+  
         
@@ -1361,32 +1361,34 @@
                 
+ 
+ 
 %3CInputGroup clas
@@ -1393,32 +1393,34 @@
 assName=%22mb-3%22%3E%0A
+  
                 
@@ -1475,32 +1475,34 @@
                 
+  
 %3CInputGroupText%3E
@@ -1518,32 +1518,34 @@
                 
+ 
+ 
 %3Ci className=%22ic
@@ -1550,32 +1550,34 @@
 icon-lock%22%3E%3C/i%3E%0A
+  
                 
@@ -1612,32 +1612,34 @@
                 
+  
 %3C/InputGroupAddo
@@ -1633,32 +1633,34 @@
 nputGroupAddon%3E%0A
+  
                 
@@ -1700,32 +1700,60 @@
 older=%22Password%22
+ autoComplete=%22new-password%22
  /%3E%0A            
@@ -1750,32 +1750,34 @@
                 
+  
 %3C/InputGroup%3E%0A  
@@ -1766,32 +1766,34 @@
   %3C/InputGroup%3E%0A
+  
                 
@@ -1836,32 +1836,34 @@
                 
+  
 %3CInputGroupAddon
@@ -1898,32 +1898,34 @@
                 
+ 
+ 
 %3CInputGroupText%3E
@@ -1917,32 +1917,34 @@
 InputGroupText%3E%0A
+  
                 
@@ -1995,32 +1995,34 @@
                 
+  
 %3C/InputGroupText
@@ -2015,32 +2015,34 @@
 InputGroupText%3E%0A
+  
                 
@@ -2076,32 +2076,34 @@
                 
+  
 %3CInput type=%22pas
@@ -2130,36 +2130,66 @@
 Repeat password%22
+ autoComplete=%22new-password%22
  /%3E%0A
+  
                 
@@ -2214,32 +2214,34 @@
                 
+ 
+ 
 %3CButton color=%22s
@@ -2270,32 +2270,58 @@
 ccount%3C/Button%3E%0A
+                  %3C/Form%3E%0A
                 

add missing form and autoComplete