Login ui for the website

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 }) => (
     <>
-    <Navbar login={true}/>
+    <Navbar/>
     <Route {...rest} render={props => (
         localStorage.getItem('token')
         ? <Component {...props} />
-        : <Redirect to={register()}/>
+        : <Redirect to={login()} />
     )} />
     </>
 )

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 (
             <Switch>
                 <PrivateRoute exact path={dashboard()} component={Info} />
+                <AuthRoute path={login()} component={Login} />
                 <AuthRoute path={register()} component={Register} />
                 <Route render={() => <Redirect to='/' />} />    
             </Switch>

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 (

src/components/Login.js

@@ -0,0 +1,171 @@
+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, Message, Button } 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: '',
+            usernameerror: null,
+            passworderror: null,
+            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 = () => {
+        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
+        }
+
+        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
+            })            
+        }
+    }
+
+    callback = () => {
+        this.setState({
+            error: this.props.loginerror?true:false,
+        })
+        if(!this.state.error){
+            this.props.history.push('/')
+        }
+        setTimeout(() => {
+            this.setState({
+                error: null
+            })
+        }, 5000)
+    }
+
+    onChange = (e) => {
+        this.setState({ [e.target.name]: e.target.value});
+    }
+
+
+    render() {
+        const { showPassword } = this.state
+        return (
+            <>
+            <Grid>
+                <Grid.Row>
+                    <Grid.Column width={5}>
+                    <div className='login'>
+                    <span><b>Login</b></span>
+                    <Divider />
+                        <Form>
+                            <Form.Input
+                                name="username"
+                                value={this.state.username}
+                                onChange={this.onChange}
+                                label='Username'
+                                required
+                                placeholder='Enter your username...' />
+                            <Form.Input
+                                type={showPassword ? 'text': 'password'}
+                                icon={<Icon name={showPassword ? 'eye slash outline': 'eye'} onClick={this.handleShow} link />}
+                                name="password"
+                                value={this.state.password}
+                                onChange={this.onChange}
+                                label='Password'
+                                required
+                                placeholder='Enter your password...' />
+                            <Button
+                                fluid
+                                primary
+                                type='button'
+                                onClick={this.submitLogin}
+                                disabled={!this.state.username || !this.state.password}
+                                >LOG IN</Button>
+                        </Form>
+
+                        {/* form validation */}
+                        {
+                            this.state.usernameerror ?
+                            <Message
+                            error
+                            content="Username cannot be empty!"
+                            />
+                            : null
+                        }
+                        {
+                            this.state.passworderror ?
+                            <Message
+                            error
+                            content="Password cannot be empty!"
+                            />
+                            : null
+                        }
+                    <Divider />
+                    <span>Don't have an account? <Link to={register()}>Register here.</Link></span>
+                    </div>
+                    </Grid.Column>
+                    <Grid.Column width={10}>
+                        <div className='logo'>
+                        <Image src={orgLogo} />
+                        </div>
+                    </Grid.Column>
+                </Grid.Row>
+
+            </Grid>
+            </>
+        )
+    }
+}
+
+Login.propTypes = {
+    postLogin: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = state => ({
+    login: state.login.login,
+    loginerror: state.login.loginerror
+})
+
+export default connect(
+    mapStateToProps,
+    { postLogin, }
+)(Login)

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) => {

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
     })
 
@@ -115,7 +115,7 @@ class Register extends Component {
             error: this.props.registererror?true:false,
             submitted: true
         })
-        setTimeout(()=>{
+        setTimeout(() => {
             this.setState({
                 error: null,
                 submitted: false
@@ -183,7 +183,7 @@ class Register extends Component {
                                 placeholder='Enter your password...' />
                             <Form.Input
                                 type={showConfirmPassword ? 'text' : 'password'}
-                                icon={<Icon name={showConfirmPassword ? 'eye slash outline': 'eye'} onClick={this.handleShow2} link />}
+                                icon={<Icon name={showConfirmPassword ? 'eye slash outline': 'eye'} onClick={this.handleShowConfirm} link />}
                                 name="confirm_password"
                                 value={this.state.confirm_password}
                                 onChange={this.onChange}

src/index.js

@@ -37,7 +37,7 @@ ReactDOM.render (
 // }
 
 
-  
+
 
 // export default class AppRouter extends Component{
 //   render() {