Add register screen
This commit is contained in:
parent
b8fa7cdd98
commit
752be6b279
@ -3,6 +3,8 @@ import 'rsuite/lib/styles/index.less';
|
|||||||
import { Container } from 'rsuite';
|
import { Container } from 'rsuite';
|
||||||
|
|
||||||
import Login from './Login';
|
import Login from './Login';
|
||||||
|
import Register from './Register';
|
||||||
|
|
||||||
import TopBar from '../components/TopBar';
|
import TopBar from '../components/TopBar';
|
||||||
|
|
||||||
const containerStyle = {
|
const containerStyle = {
|
||||||
@ -18,7 +20,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<Container style={containerStyle}>
|
<Container style={containerStyle}>
|
||||||
<TopBar />
|
<TopBar />
|
||||||
<Login />
|
<Register />
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
78
src/screens/Register.js
Normal file
78
src/screens/Register.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Content,
|
||||||
|
FlexboxGrid,
|
||||||
|
Panel,
|
||||||
|
Form,
|
||||||
|
FormGroup,
|
||||||
|
FormControl,
|
||||||
|
HelpBlock,
|
||||||
|
Button,
|
||||||
|
Dropdown,
|
||||||
|
} from 'rsuite';
|
||||||
|
|
||||||
|
const boxStyle = {
|
||||||
|
margin: '50px 10px',
|
||||||
|
};
|
||||||
|
|
||||||
|
function Register() {
|
||||||
|
return (
|
||||||
|
<Content>
|
||||||
|
<FlexboxGrid justify='center'>
|
||||||
|
<FlexboxGrid.Item>
|
||||||
|
<Panel header={<h3>Register</h3>} bordered style={boxStyle}>
|
||||||
|
<Form horizontal>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControl
|
||||||
|
name='username'
|
||||||
|
type='plaintext'
|
||||||
|
placeholder='username'
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControl
|
||||||
|
name='email'
|
||||||
|
type='email'
|
||||||
|
placeholder='email'
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Dropdown title='Timezone'>
|
||||||
|
<Dropdown.Item>
|
||||||
|
Australian Central Time
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item>
|
||||||
|
Australian Eastern Time
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item>
|
||||||
|
Alaska Standard Time
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item>Bangladesh Standard Time </Dropdown.Item>
|
||||||
|
<Dropdown.Item>...</Dropdown.Item>
|
||||||
|
</Dropdown>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControl
|
||||||
|
name='password'
|
||||||
|
type='password'
|
||||||
|
placeholder='password'
|
||||||
|
/>
|
||||||
|
<HelpBlock tooltip>
|
||||||
|
Minimum password length is 8 characters
|
||||||
|
</HelpBlock>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Button appearance='primary' block>
|
||||||
|
Register
|
||||||
|
</Button>
|
||||||
|
</FormGroup>
|
||||||
|
</Form>
|
||||||
|
</Panel>
|
||||||
|
</FlexboxGrid.Item>
|
||||||
|
</FlexboxGrid>
|
||||||
|
</Content>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Register;
|
Loading…
Reference in New Issue
Block a user