75 lines
1.4 KiB
JavaScript
75 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
|
|
import {
|
|
Container,
|
|
Header,
|
|
Navbar,
|
|
Nav,
|
|
Icon,
|
|
Content,
|
|
FlexboxGrid,
|
|
Panel,
|
|
Form,
|
|
FormGroup,
|
|
ControlLabel,
|
|
FormControl,
|
|
Button,
|
|
ButtonToolbar,
|
|
} from 'rsuite';
|
|
|
|
function Login() {
|
|
return (
|
|
<Container>
|
|
<Header>
|
|
<Navbar appearance='inverse'>
|
|
<Navbar.Header>
|
|
<p className='navbar-brand logo'>Meeting Planner</p>
|
|
</Navbar.Header>
|
|
<Navbar.Body>
|
|
<Nav pullRight>
|
|
<Nav.Item
|
|
icon={<Icon size="2x" icon='user-circle' />}
|
|
></Nav.Item>
|
|
</Nav>
|
|
</Navbar.Body>
|
|
</Navbar>
|
|
</Header>
|
|
<Content>
|
|
<FlexboxGrid justify='center'>
|
|
<FlexboxGrid.Item>
|
|
<Panel header={<h3>Login</h3>} bordered>
|
|
<Form fluid>
|
|
<FormGroup>
|
|
<ControlLabel>
|
|
Username or email address
|
|
</ControlLabel>
|
|
<FormControl name='name' />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<ControlLabel>Password</ControlLabel>
|
|
<FormControl
|
|
name='password'
|
|
type='password'
|
|
/>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<ButtonToolbar>
|
|
<Button appearance='primary'>
|
|
Sign in
|
|
</Button>
|
|
<Button appearance='link'>
|
|
Forgot password?
|
|
</Button>
|
|
</ButtonToolbar>
|
|
</FormGroup>
|
|
</Form>
|
|
</Panel>
|
|
</FlexboxGrid.Item>
|
|
</FlexboxGrid>
|
|
</Content>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default Login;
|