meeting-planner/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Redesign login screen and add help box

Browse Source
This commit is contained in:
rui hildt 2020-05-13 11:19:37 +02:00
parent 1c9dbf0615
commit b8fa7cdd98
2 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/screens/App.js
View File

@ -10,7 +10,8 @@ const containerStyle = {
margin: '0 auto', margin: '0 auto',
borderRadius: 7, borderRadius: 7,
background: 'white', background: 'white',
marginTop: 50, marginTop: '10vh',
marginBottom: '10vh',
}; };
function App() { function App() {

78
src/screens/Login.js
View File

@ -1,55 +1,57 @@
import React from 'react'; import React from 'react';
import { import {
Container,
Content, Content,
FlexboxGrid, FlexboxGrid,
Panel, Panel,
Form, Form,
FormGroup, FormGroup,
ControlLabel,
FormControl, FormControl,
HelpBlock,
Button, Button,
ButtonToolbar,
} from 'rsuite'; } from 'rsuite';
const boxStyle = {
margin: '50px 10px',
};
function Login() { function Login() {
return ( return (
<Container> <Content>
<Content> <FlexboxGrid justify='center'>
<FlexboxGrid justify='center'> <FlexboxGrid.Item>
<FlexboxGrid.Item> <Panel
<Panel header={<h3>Login</h3>} bordered> header={<h3>Login</h3>}
<Form fluid> bordered
<FormGroup> style={boxStyle}
<ControlLabel> >
Username or email address <Form horizontal>
</ControlLabel> <FormGroup>
<FormControl name='name' /> <FormControl
</FormGroup> name='email'
<FormGroup> type='email'
<ControlLabel>Password</ControlLabel> placeholder='email'
<FormControl />
name='password' </FormGroup>
type='password' <FormGroup>
/> <FormControl
</FormGroup> name='password'
<FormGroup> type='password'
<ButtonToolbar> placeholder='password'
<Button appearance='primary'> />
Sign in <HelpBlock tooltip>
</Button> Minimum password length is 8 characters
<Button appearance='link'> </HelpBlock>
Forgot password? </FormGroup>
</Button> <FormGroup>
</ButtonToolbar> <Button appearance='primary' block>Sign in</Button>
</FormGroup> </FormGroup>
</Form> <Button appearance='link'>Forgot password?</Button>
</Panel> </Form>
</FlexboxGrid.Item> </Panel>
</FlexboxGrid> </FlexboxGrid.Item>
</Content> </FlexboxGrid>
</Container> </Content>
); );
} }