text: import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
  
  class Login extends Component {
    render() {
      return (
        <div className="app flex-row align-items-center">
          <Container>
            <Row className="justify-content-center">
              <Col md="8">
                <CardGroup>
                  <Card className="p-4">
                    <CardBody>
                      <Form>
                        <h1>Masuk</h1>
                        <p className="text-muted">Silahkan masukkan akun anda</p>
                        <InputGroup className="mb-3">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="icon-user"></i>
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input type="text" placeholder="Nama Pengguna (username)" autoComplete="username" />
                        </InputGroup>
                        <InputGroup className="mb-4">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="icon-lock"></i>
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input type="password" placeholder="Kata sandi" autoComplete="current-password" />
                        </InputGroup>
                        <Row>
                          <Col xs="6" className="text-left">
                            <Button color="link" className="px-0">Lupa password?</Button>
                          </Col>
                          <Col xs="6" className="text-right">
                            <Button color="primary" className="px-4">Masuk</Button>
                          </Col>
                        </Row>
                      </Form>
                    </CardBody>
                  </Card>
                  <Card className="text-white bg-primary py-5">
                    <CardBody className="text-center">
                      <div>
                        <h2>Daftar</h2>
                        <p>Belum memiliki akun? Silahkan klik tombol Daftar dibawah ini untuk mendaftar.</p>
                        <Link to="/register">
                          <Button color="primary" className="mt-3" active tabIndex={-1}>Daftar</Button>
                        </Link>
                      </div>
                    </CardBody>
                  </Card>
                </CardGroup>
              </Col>
            </Row>
          </Container>
        </div>
      );
    }
  }
  
  export default Login;
  