| /* |
| * Copyright (c) 2018 StreamNative. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import React, { Component } from 'react'; |
| 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>Login</h1> |
| <p className="text-muted">Sign In to your account</p> |
| <InputGroup className="mb-3"> |
| <InputGroupAddon addonType="prepend"> |
| <InputGroupText> |
| <i className="icon-user"></i> |
| </InputGroupText> |
| </InputGroupAddon> |
| <Input type="text" placeholder="Username" autoComplete="username" /> |
| </InputGroup> |
| <InputGroup className="mb-4"> |
| <InputGroupAddon addonType="prepend"> |
| <InputGroupText> |
| <i className="icon-lock"></i> |
| </InputGroupText> |
| </InputGroupAddon> |
| <Input type="password" placeholder="Password" autoComplete="current-password" /> |
| </InputGroup> |
| <Row> |
| <Col xs="6"> |
| <Button color="primary" className="px-4">Login</Button> |
| </Col> |
| <Col xs="6" className="text-right"> |
| <Button color="link" className="px-0">Forgot password?</Button> |
| </Col> |
| </Row> |
| </Form> |
| </CardBody> |
| </Card> |
| <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}> |
| <CardBody className="text-center"> |
| <div> |
| <h2>Sign up</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut |
| labore et dolore magna aliqua.</p> |
| <Button color="primary" className="mt-3" active>Register Now!</Button> |
| </div> |
| </CardBody> |
| </Card> |
| </CardGroup> |
| </Col> |
| </Row> |
| </Container> |
| </div> |
| ); |
| } |
| } |
| |
| export default Login; |