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',
borderRadius: 7,
background: 'white',
marginTop: 50,
marginTop: '10vh',
marginBottom: '10vh',
};
function App() {

78
src/screens/Login.js
View File

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