Add basic Login component

This commit is contained in:
rui hildt 2020-05-11 18:39:04 +02:00
parent 36a4448ffe
commit cd1e23f2ea
7 changed files with 14398 additions and 20 deletions

11
config-overrides.js Normal file
View File

@ -0,0 +1,11 @@
const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
// If you are using less-loader@5 or older version, please spread the lessOptions to options directly.
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@base-color': '#005CAF', '@body-bg': '#D3E2F9' },
},
}),
);

14266
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -6,15 +6,21 @@
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"customize-cra": "^1.0.0-alpha.0",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"react": "^16.13.1", "react": "^16.13.1",
"react-app-rewired": "^2.1.6",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1" "react-scripts": "3.4.1",
"rsuite": "^4.5.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-app-rewired start",
"build": "react-scripts build", "dev": "BROWSER=firefox-developer-edition react-app-rewired start",
"test": "react-scripts test", "build": "react-app-rewired build",
"eject": "react-scripts eject" "test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
@ -26,8 +32,8 @@
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 chrome version",
"last 1 safari version" "last 1 safari version"
] ]
} }

View File

@ -1,11 +0,0 @@
import React from 'react';
function App() {
return (
<div>
<p>It works</p>
</div>
);
}
export default App;

View File

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import {render } from 'react-dom';
import App from './App'; import App from './screens/App';
ReactDOM.render( import 'rsuite/lib/styles/index.less';
render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,

30
src/screens/App.js Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import 'rsuite/lib/styles/index.less';
import { Container } from 'rsuite';
import Login from './Login';
const containerStyle = {
maxWidth: 700,
margin: '0 auto',
borderRadius: 7,
background: 'white',
marginTop: 50
};
const baseStyle = {
// background: 'linear-gradient(107deg, rgba(209,64,26,1) 0%, rgba(255,135,135,1) 63%, rgba(0,212,255,1) 63%, rgba(0,153,255,1) 83%)',
// height: '100vh',
}
function App() {
return (
<div style={baseStyle}>
<Container style={containerStyle}>
<Login />
</Container>
</div>
);
}
export default App;

74
src/screens/Login.js Normal file
View File

@ -0,0 +1,74 @@
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;