From ca6113cd16836c1d15155b49cbcf3af0631f731a Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Wed, 10 Jun 2020 00:35:20 +0530 Subject: [PATCH 1/7] Add Navbar component Add Routing Add Registration component, actions & reducers --- src/components/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/App.js b/src/components/App.js index 9008503..500b2c2 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,7 +4,6 @@ import Routes from '../Routes' import { history } from '../store' import '../styles/App.css' - export default class App extends Component { render() { return ( From c3e4139c184ee9a06b5a8261ca5371c6ed3559c2 Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Wed, 10 Jun 2020 01:18:07 +0530 Subject: [PATCH 2/7] Add login component Modify routing Modify Login action --- src/PrivateRoute.js | 6 +- src/Routes.js | 4 +- src/components/Login.js | 126 +++++++++++++++++++++++++++++++++++++++ src/components/Navbar.js | 4 +- 4 files changed, 134 insertions(+), 6 deletions(-) create mode 100644 src/components/Login.js diff --git a/src/PrivateRoute.js b/src/PrivateRoute.js index 36c0304..27a154f 100644 --- a/src/PrivateRoute.js +++ b/src/PrivateRoute.js @@ -1,15 +1,15 @@ import React, { Component } from 'react' import { Route, Redirect } from 'react-router-dom' import Navbar from './components/Navbar' -import { register } from './urls' +import { login } from './urls' export const PrivateRoute = ({ component: Component, ...rest }) => ( <> - + ( localStorage.getItem('token') ? - : + : )} /> ) diff --git a/src/Routes.js b/src/Routes.js index ac4a727..e314b9f 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -1,8 +1,9 @@ import React, { Component } from 'react' import { Route, Switch, Redirect } from 'react-router-dom' +import Login from './components/Login' import Register from './components/Register' import Info from './components/Info' -import { register, dashboard } from './urls' +import { login, register, dashboard } from './urls' import {PrivateRoute} from './PrivateRoute' import { AuthRoute } from './AuthRoute' @@ -11,6 +12,7 @@ export default class Routes extends Component { return ( + } /> diff --git a/src/components/Login.js b/src/components/Login.js new file mode 100644 index 0000000..43148cf --- /dev/null +++ b/src/components/Login.js @@ -0,0 +1,126 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' +import { postLogin } from '../actions/login' +import { Form, Grid, Image, Divider, Icon } from 'semantic-ui-react' +import PropTypes from 'prop-types' +import login from './../styles/Login.css' +import orgLogo from '../assets/org-logo.jpg' +import { register } from '../urls' + +class Login extends Component { + constructor(props){ + super(props) + this.state = { + username: '', + password: '', + showPassword: false, + error: null + } + this.submitLogin = this.submitLogin.bind(this); + this.onChange = this.onChange.bind(this); + } + + handleShow = (e) => this.setState({ + showPassword: !this.state.showPassword + }) + + submitLogin = () => { + const data = { + username: this.state.username, + password: this.state.password + } + this.props.postLogin(data, this.callback) + if(this.state.error === null){ + this.props.history.push('/') + } + } + + callback = () => { + this.setState({ + error: this.props.loginerror?true:false, + }) + } + + onChange = (e) => { + this.setState({ [e.target.name]: e.target.value}); + } + + componentWillUnmount() { + this.setState({ + error: null, + username: '', + password:'' + }) + } + + render() { + const { showPassword } = this.state + console.log(this.state) + return ( + <> + + + +
+ Login + +
+ + { + showPassword ? + } + label='Password' + placeholder='Enter your password...' /> + : } + name="password" + value={this.state.password} + onChange={this.onChange} + label='Password' + placeholder='Enter your password...' /> + } + LOG IN + + + Don't have an account? Register here. +
+ + +
+ +
+ + + + + + ) + } +} + +Login.propTypes = { + postLogin: PropTypes.func.isRequired, +} + +const mapStateToProps = state => ({ + login: state.login.login, + loginerror: state.login.loginerror +}) + +export default connect( + mapStateToProps, + { postLogin, } +)(Login) \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 7abe413..8ed2dd6 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -19,10 +19,10 @@ class Navbar extends Component { this.change = this.change.bind(this) } componentDidMount() { - if(localStorage.getItem('token') !== null){ + // if(localStorage.getItem('token') !== null){ this.props.getInfo() this.props.getUser() - } + // } } change = (e) => { From 2b6d101fd5c5b01705d7c3b5edac3e12ca49c639 Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Mon, 15 Jun 2020 20:28:23 +0530 Subject: [PATCH 3/7] Remove warnings Modify form validation --- package-lock.json | 15 ++++-- package.json | 3 ++ src/components/Login.js | 98 +++++++++++++++++++++++++------------- src/components/Register.js | 2 +- 4 files changed, 78 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 565c589..3d9a7b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6462,9 +6462,9 @@ "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=" }, "http-proxy": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz", - "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==", + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", "requires": { "eventemitter3": "^4.0.0", "follow-redirects": "^1.0.0", @@ -10185,6 +10185,12 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz", + "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==", + "dev": true + }, "pretty-bytes": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz", @@ -13397,8 +13403,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "string_decoder": { "version": "1.1.1", diff --git a/package.json b/package.json index dedd894..8dbeef0 100644 --- a/package.json +++ b/package.json @@ -42,5 +42,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "prettier": "2.0.5" } } diff --git a/src/components/Login.js b/src/components/Login.js index 43148cf..12b4d1f 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { Link } from 'react-router-dom' import { postLogin } from '../actions/login' -import { Form, Grid, Image, Divider, Icon } from 'semantic-ui-react' +import { Form, Grid, Image, Divider, Icon, Message, Button } from 'semantic-ui-react' import PropTypes from 'prop-types' import login from './../styles/Login.css' import orgLogo from '../assets/org-logo.jpg' @@ -14,6 +14,8 @@ class Login extends Component { this.state = { username: '', password: '', + usernameerror: null, + passworderror: null, showPassword: false, error: null } @@ -26,11 +28,36 @@ class Login extends Component { }) submitLogin = () => { - const data = { - username: this.state.username, - password: this.state.password + + let err = false + if(this.state.username===''){ + this.setState({ + usernameerror: true, + }) + err = true + } + if(this.state.password===''){ + this.setState({ + passworderror: true, + }) + err = true + } + + if(err === false){ + const data = { + username: this.state.username, + password: this.state.password + } + this.props.postLogin(data, this.callback) + this.setState({ + username: '', + password:'', + usernameerror: null, + passworderror: null + }) } - this.props.postLogin(data, this.callback) + + if(this.state.error === null){ this.props.history.push('/') } @@ -40,23 +67,20 @@ class Login extends Component { this.setState({ error: this.props.loginerror?true:false, }) + setTimeout(() => { + this.setState({ + error: null + }) + }, 5000) } onChange = (e) => { this.setState({ [e.target.name]: e.target.value}); } - componentWillUnmount() { - this.setState({ - error: null, - username: '', - password:'' - }) - } render() { const { showPassword } = this.state - console.log(this.state) return ( <> @@ -72,28 +96,34 @@ class Login extends Component { onChange={this.onChange} label='Username' placeholder='Enter your username...' /> - { - showPassword ? - } - label='Password' - placeholder='Enter your password...' /> - : } - name="password" - value={this.state.password} - onChange={this.onChange} - label='Password' - placeholder='Enter your password...' /> - } - LOG IN + } + name="password" + value={this.state.password} + onChange={this.onChange} + label='Password' + placeholder='Enter your password...' /> + + + {/* form validation */} + { + this.state.usernameerror ? + + : null + } + { + this.state.passworderror ? + + : null + } Don't have an account? Register here. diff --git a/src/components/Register.js b/src/components/Register.js index 2d3254d..40cdda9 100644 --- a/src/components/Register.js +++ b/src/components/Register.js @@ -115,7 +115,7 @@ class Register extends Component { error: this.props.registererror?true:false, submitted: true }) - setTimeout(()=>{ + setTimeout(() => { this.setState({ error: null, submitted: false From 27544256c3eb8120fb6bb4fda613e8a014d51e49 Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Mon, 15 Jun 2020 21:18:49 +0530 Subject: [PATCH 4/7] Modify callback() function to fix redirect --- src/components/Login.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Login.js b/src/components/Login.js index 12b4d1f..e094d17 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -28,7 +28,7 @@ class Login extends Component { }) submitLogin = () => { - + console.log("hello") let err = false if(this.state.username===''){ this.setState({ @@ -54,12 +54,7 @@ class Login extends Component { password:'', usernameerror: null, passworderror: null - }) - } - - - if(this.state.error === null){ - this.props.history.push('/') + }) } } @@ -67,6 +62,10 @@ class Login extends Component { this.setState({ error: this.props.loginerror?true:false, }) + if(!this.state.error){ + this.props.history.push('/') + } + console.log(this.state.error) setTimeout(() => { this.setState({ error: null From 920cf504373c672d5071de2795514f2b3eaf53ea Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Thu, 18 Jun 2020 19:54:34 +0530 Subject: [PATCH 5/7] Add form validation to Login UI --- src/components/Login.js | 22 +++++++++++++++++--- src/index.js | 45 ----------------------------------------- 2 files changed, 19 insertions(+), 48 deletions(-) diff --git a/src/components/Login.js b/src/components/Login.js index e094d17..ed7f0d1 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -28,18 +28,27 @@ class Login extends Component { }) submitLogin = () => { - console.log("hello") let err = false if(this.state.username===''){ this.setState({ usernameerror: true, }) + setTimeout(() => { + this.setState({ + usernameerror: false, + }) + }, 10000) err = true } if(this.state.password===''){ this.setState({ passworderror: true, }) + setTimeout(() => { + this.setState({ + passworderror: false, + }) + }, 10000) err = true } @@ -65,7 +74,6 @@ class Login extends Component { if(!this.state.error){ this.props.history.push('/') } - console.log(this.state.error) setTimeout(() => { this.setState({ error: null @@ -94,6 +102,7 @@ class Login extends Component { value={this.state.username} onChange={this.onChange} label='Username' + required placeholder='Enter your username...' /> - + {/* form validation */} diff --git a/src/index.js b/src/index.js index 0aafac8..b8707c6 100644 --- a/src/index.js +++ b/src/index.js @@ -13,48 +13,3 @@ ReactDOM.render ( , document.getElementById('root') ) - -// serviceWorker.register() - -// export default class AppRouter extends Component { -// constructor(props) { -// super(props) -// this.store = createStore(rootReducers,applyMiddleware(thunk)) -// } - -// render() { -// console.log("hello") -// return ( -// -// {/* */} -// -// -// -// {/* */} -// , document.getElementById('root') -// ) -// } -// } - - - - -// export default class AppRouter extends Component{ -// render() { -// return( -// -// -// -// -// -// -// -// ) -// } -// } - - - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA From 5da258a100d3395b69082ce5ad4b21aea629bd78 Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Mon, 22 Jun 2020 19:15:05 +0530 Subject: [PATCH 6/7] Add new line to end of file Remove unnecessary comments --- package.json | 3 --- src/components/Login.js | 2 +- src/components/Navbar.js | 6 ++---- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 8dbeef0..dedd894 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "devDependencies": { - "prettier": "2.0.5" } } diff --git a/src/components/Login.js b/src/components/Login.js index ed7f0d1..42dddc4 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -168,4 +168,4 @@ const mapStateToProps = state => ({ export default connect( mapStateToProps, { postLogin, } -)(Login) \ No newline at end of file +)(Login) diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 8ed2dd6..03191a6 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -19,10 +19,8 @@ class Navbar extends Component { this.change = this.change.bind(this) } componentDidMount() { - // if(localStorage.getItem('token') !== null){ - this.props.getInfo() - this.props.getUser() - // } + this.props.getInfo() + this.props.getUser() } change = (e) => { From b5a0ef7b0b506dbbf3e7c97dca04f4ad9244e53a Mon Sep 17 00:00:00 2001 From: Bismita Guha Date: Fri, 26 Jun 2020 18:06:30 +0530 Subject: [PATCH 7/7] style: Modified variable names and PR related changes --- src/components/Register.js | 4 ++-- src/index.js | 45 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/components/Register.js b/src/components/Register.js index 40cdda9..1674c4c 100644 --- a/src/components/Register.js +++ b/src/components/Register.js @@ -35,7 +35,7 @@ class Register extends Component { showPassword: !this.state.showPassword }) - handleShow2 = (e) => this.setState({ + handleShowConfirm = (e) => this.setState({ showConfirmPassword: !this.state.showConfirmPassword }) @@ -183,7 +183,7 @@ class Register extends Component { placeholder='Enter your password...' /> } + icon={} name="confirm_password" value={this.state.confirm_password} onChange={this.onChange} diff --git a/src/index.js b/src/index.js index b8707c6..30c0264 100644 --- a/src/index.js +++ b/src/index.js @@ -13,3 +13,48 @@ ReactDOM.render ( , document.getElementById('root') ) + +// serviceWorker.register() + +// export default class AppRouter extends Component { +// constructor(props) { +// super(props) +// this.store = createStore(rootReducers,applyMiddleware(thunk)) +// } + +// render() { +// console.log("hello") +// return ( +// +// {/* */} +// +// +// +// {/* */} +// , document.getElementById('root') +// ) +// } +// } + + + + +// export default class AppRouter extends Component{ +// render() { +// return( +// +// +// +// +// +// +// +// ) +// } +// } + + + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA