Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added simple login page, with some validation #61

Closed
wants to merge 1 commit into from
Closed

added simple login page, with some validation #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14,466 changes: 14,466 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions frontend/package.json
View file
Open in desktop
Expand Up @@ -7,12 +7,15 @@
"@material-ui/icons": "^4.4.3",
"@material-ui/styles": "^4.5.0",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"react-social-login-buttons": "^3.0.0",
"reactstrap": "^8.1.1",
"redux": "^4.0.4",
"redux-actions": "^2.6.5",
"redux-saga": "^1.1.1",
Expand Down Expand Up @@ -52,12 +55,11 @@
"redux-mock-store": "^1.5.3",
"redux-saga-tester": "^1.0.574"
},

"jest": {
"collectCoverageFrom" : [
"src/**/*.{js,jsx}" ,
"!src/index.js" ,
"!src/serviceWorker.js"
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!src/index.js",
"!src/serviceWorker.js"
]
}
}
2 changes: 2 additions & 0 deletions frontend/public/index.html
View file
Open in desktop
Expand Up @@ -3,6 +3,8 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></link>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/App.js
View file
Open in desktop
Expand Up @@ -7,6 +7,10 @@ import WaitingPage from './pages/WaitingPage/WaitingPage';
import GroupPage from './pages/GroupPage/GroupPage';
import DetailPage from './pages/DetailPage/DetailPage';
import FinalPage from './pages/FinalPage/FinalPage';
import LoginPage from './pages/LoginPage/LoginPage'


import 'bootstrap/dist/css/bootstrap.css';

function App() {
return (
Expand All @@ -19,6 +23,7 @@ function App() {
<Route component={GroupPage} path="/group" exact />
<Route component={DetailPage} path="/detail" exact />
<Route component={FinalPage} path="/final" exact />
<Route component={LoginPage} path="/login" exact/>
</Switch>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions frontend/src/index.js
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@ import createSagaMiddleware from 'redux-saga';
import rootReducer, { rootSaga } from './modules';
import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css'
const sagaMiddleware = createSagaMiddleware();

const store = createStore(
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/pages/LoginPage/LoginPage.css
View file
Open in desktop
@@ -0,0 +1,8 @@
.login-form{
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
height: 100%;

}
78 changes: 78 additions & 0 deletions frontend/src/pages/LoginPage/LoginPage.js
View file
Open in desktop
@@ -0,0 +1,78 @@
import React, {Component} from 'react';
import './LoginPage.css'

class LoginPage extends Component {
constructor() {
super();
this.state = {
username: '',
password: '',
error: '',
};

this.handlePassChange = this.handlePassChange.bind(this);
this.handleUserChange = this.handleUserChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.dismissError = this.dismissError.bind(this);
}

dismissError() {
this.setState({ error: '' });
}

handleSubmit(evt) {
evt.preventDefault();

if (!this.state.username) {
return this.setState({ error: 'Username is required' });
}

if (!this.state.password) {
return this.setState({ error: 'Password is required' });
}

return this.setState({ error: '' });
}

handleUserChange(e) {
this.setState({
username: e.target.value,
});
};

handlePassChange(e) {
this.setState({
password: e.target.value,
});
}

render() {

return (


<div className="login-form">
<form onSubmit={this.handleSubmit}>
{
this.state.error &&
<h3 data-test="error" onClick={this.dismissError}>
<button onClick={this.dismissError}>✖</button>
{this.state.error}
</h3>
}
<div class="form-group">
<label>User Name</label>
<input type="text" data-test="username" value={this.state.username} onChange={this.handleUserChange} />
</div>
<label>Password</label>
<input type="password" data-test="password" value={this.state.password} onChange={this.handlePassChange} />

<input type="submit" value="Log In" data-test="submit" />
</form>
</div>

);
}
}

export default LoginPage;