Signup added and routes conigured

Author: AnkitKumarSingh11

src/App.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Route, BrowserRouter, Switch } from "react-router-dom";
 import Login from './components/auth/Login';
 import Signup from './components/auth/Signup';
+import LoggedinRoute from './components/LoggedinRoute';
 import Navigation from './components/Navigation';
 import PrivateRoute from './components/PrivateRoute';
 
@@ -14,7 +15,7 @@ class App extends Component {
         <Switch>
           {/* Authentication routes */}
           <Route path="/" exact={true} component={()=><p>Home page</p>} />
-          <Route path="/auth" exact={true} component={Login} />
+          <LoggedinRoute path="/auth" exact={true} component={Login} loggedin={this.props.loggedin} />
 
           {/* Private routes that require users to be authenticated */}
           <PrivateRoute path="/dashboard" loggedin={false} component={Signup} />

src/actions/auth_actions.js

@@ -58,8 +58,11 @@ export const loginUser = (username, password) => {
                 localStorage.setItem('token', data.token)
                 return dispatch(loginSuccess(data.user))
             }
-        }).catch(err => {
-            return dispatch(loginError(err))
+        }).catch(err => {   
+            dispatch(loginError("Some error has occurred"))
+            setTimeout(()=>{
+                dispatch(removeError())        
+            }, 0)
         })
     }
 }
@@ -85,6 +88,13 @@ const signup_error = (err) => {
     }
 }
 
+const removeuser = () => {
+    return {
+        type : 'REMOVE_USER'
+    }
+}
+
+
 //  signup action for registeration of the users
 export const signupUserAction = (fname, username, email, password) => {
     return async dispatch => {
@@ -101,6 +111,17 @@ export const signupUserAction = (fname, username, email, password) => {
         }).then(res => res.json())
         .then(data => {
             console.log(data)
+            if(data.message) {
+                dispatch(signup_error(data.message))
+                setTimeout(()=>{
+                    dispatch(removeError())        
+                }, 0)
+            }else{
+                dispatch(signup_success(data.user))
+                setTimeout(()=>{
+                    dispatch(removeuser())        
+                }, 0)
+            }
         }).catch(err => {
             console.log(err)
         })

src/components/LoggedinRoute.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+export const LoggedinRoute = ({ component: Component, loggedin, ...rest }) => {
+    return <Route
+    {...rest}
+    component = {
+        ({...props}) => {
+            if(loggedin) {
+                return <Redirect to="/" />
+            }else{
+                return <Component {...props} />
+            }
+        }
+    }
+    />
+}
+
+
+export default LoggedinRoute;

src/components/auth/Signup.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import { withAlert } from 'react-alert';
 import { connect } from 'react-redux';
+import { signupUserAction } from "../../actions/auth_actions";
 
 class Signup extends Component {
 
@@ -31,6 +32,16 @@ class Signup extends Component {
             this.props.alert.show('Password length must be greater than 7', {type:'error'})
             return;
         }
+        this.props.signupUserAction(this.state.fname, this.state.username, this.state.email, this.state.password)
+        
+        this.setState({
+            ...this.state,
+            fname : '',
+            username : '',
+            email : '',
+            password : ''
+        })
+        
     }
 
     //  updating state according to the input fields
@@ -42,28 +53,34 @@ class Signup extends Component {
 
     //  render method
     render () {
+        if(this.props.signup.error) {
+            this.props.alert.show(this.props.signup.error, {type:'error'})
+        }
+        if(this.props.signup.user !== null) {
+            this.props.alert.show("Account succesfully created. Login to continue.", {type:'success'})
+        }
         return (
             <div className="card" style={{borderRadius:"0"}}>
                 <div className="card-body">
                     <form onSubmit={this.formSubmit}>
                         <div className="form-group">
                             <label htmlFor="fname">Full Name</label>
-                            <input type="text" name="fname" id="fname" className="form-control" placeholder="John Doe" autoFocus onChange={this.onFieldsChange} />
+                            <input type="text" name="fname" id="fname" className="form-control" placeholder="John Doe" autoFocus onChange={this.onFieldsChange} value={this.state.fname} />
                         </div>
 
                         <div className="form-group">
                             <label htmlFor="username">Username</label>
-                            <input className="form-control" type="text" placeholder="ex. JohnDoe123" id="username" name="username" onChange={this.onFieldsChange} />
+                            <input className="form-control" type="text" placeholder="ex. JohnDoe123" id="username" name="username" onChange={this.onFieldsChange} value={this.state.username} />
                         </div>                       
 
                         <div className="form-group">
                             <label htmlFor="email">Email address</label>
-                            <input type="email" className="form-control" name="email" id="email" placeholder="johndoes123@xyz.com" onChange={this.onFieldsChange} />
+                            <input type="email" className="form-control" name="email" id="email" placeholder="johndoes123@xyz.com" onChange={this.onFieldsChange} value={this.state.email} />
                         </div>
 
                         <div className="form-group">
                             <label htmlFor="password">Password</label>
-                            <input type="password" name="password" id="password" className="form-control" placeholder="Enter a strong password" onChange={this.onFieldsChange} />
+                            <input type="password" name="password" id="password" className="form-control" placeholder="Enter a strong password" onChange={this.onFieldsChange} value={this.state.password} />
                         </div>
 
                         <div className="form-group">
@@ -76,4 +93,11 @@ class Signup extends Component {
     }
 }
 
-export default withAlert()(connect(null, {})(Signup));
+const mapStateToProps = state => {
+    console.log(state.signup);
+    return {
+        signup : state.signup
+    }
+}
+
+export default withAlert()(connect(mapStateToProps, {signupUserAction})(Signup));

src/reducers/auth.js

@@ -32,4 +32,35 @@ const loginReducer = (initial_state = state, action) => {
     }
 }
 
-export { loginReducer }
+
+//  signup reducer 
+const signupReducer = (initial_state = state, action) => {
+    switch(action.type) {
+        case 'SIGNUP_START' : return {
+            ...initial_state,
+            loading : true
+        }
+        case 'SIGNUP_SUCCESS' : return {
+            ...initial_state,
+            loading : false, 
+            user : action.payload
+        }
+        case 'SIGNUP_ERROR' : return {
+            ...initial_state,
+            loading : false,
+            error : action.payload
+        }
+        case 'REMOVE_ERROR' : return {
+            ...initial_state,
+            loading : false,
+            error : null
+        }
+        case 'REMOVE_USER' : return {
+            ...initial_state,
+            user : null
+        }
+        default : return initial_state
+    }
+}
+
+export { loginReducer, signupReducer }

src/reducers/index.js

@@ -1,7 +1,8 @@
 import {combineReducers} from 'redux';
 
-import { loginReducer } from "./auth";
+import { loginReducer, signupReducer } from "./auth";
 
 export default combineReducers({
-    auth : loginReducer
+    auth : loginReducer,
+    signup : signupReducer
 })