remchi / bookworm-react Goto Github PK

decode() doesn't verify the authenticity of the jwt from localStorage (in index.js), so PrivateRoutes might be accessible with a forged jwt

Can I ask you why in the LoginForm.js we need the onChange method and why we can't get data from the form onSubmit?

I think it's really expensive to update the state everytime a user change an input, isn't it?

https://github.com/Remchi/bookworm-react/blob/master/src/components/forms/LoginForm.js#L17-L20

Can't we do something like this instead?

onSubmit = e => {
    this.setState({
      data: { email: document.getElementById("email").value, password: document.getElementById("password").value }
    });
}

Maybe something more beautiful...?

I don't know why but my page refreshed after I clicked on login button even when my fields are not validate. I set e.preventDefault() to onSubmit function and put errors on console.log, when my fields are not validate console.log print right error messages but when every field are valid console.log print undefined.

    onSubmit = (e) => {
        const errors = this.validate(this.state.data);
        this.setState({ errors });

        e.preventDefault();
        console.log('Err: ' + errors.email + ", " + errors.password)
    };

    validate = (data) => {
        const errors = {};

        if(!Validator.isEmail(data.email)) {
            errors.email = "invalid email";
        }
        
        if (!data.password) {
            errors.password = "Can't be blank";
        }
        
        return errors;
    };

Nice tutorial, this really helped me to understand better how react works.

Can you explain how can we do an oauth2 login? I know how to do that in backend, but never did it at de client side.

POST http://localhost:3000/api/users 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:58
Axios.(anonymous function) @ Axios.js:78
wrap @ bind.js:9
signup @ api.js:7
(anonymous) @ users.js:4
(anonymous) @ index.js:11
(anonymous) @ bindActionCreators.js:3
SignupPage._this.submit @ SignupPage.js:8
SignupForm._this.onSubmit @ SignupForm.js:32
apply @ _apply.js:15
baseInvoke @ _baseInvoke.js:21
apply @ _apply.js:16
(anonymous) @ _overRest.js:32
handleSubmit @ Form.js:122
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4477
batchedUpdates$1 @ react-dom.development.js:16660
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4556
interactiveUpdates$1 @ react-dom.development.js:16715
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
SignupForm.js:54 Uncaught TypeError: Cannot read property 'email' of undefined
at SignupForm.render (SignupForm.js:54)
at finishClassComponent

TypeError: Cannot read property 'catch' of undefined

LoginForm.onSubmit
C:/xampp/htdocs/bookworm-app/src/component/Forms/LoginForm.js:27

this.setState({ errors });
if (Object.keys(errors).length === 0) {
this.setState({ loading: true });
this.props
.submit(this.state.data)
.catch(err =>this.setState({ errors: err.response.data.errors, loading: false }));
}

Hello, when I try to save a book i get this error,

TypeError: Cannot read property 'catch' of undefined
BookForm._this.onSubmit
C:/code/bookworm/src/components/forms/BookForm.js:55
  52 | this.setState({ errors });
  53 | if (Object.keys(errors).length === 0) {
  54 |   this.setState({ loading: true });
 55 |   this.props
  56 |     .submit(this.state.data)
  57 |     .catch(err =>
  58 |       this.setState({ errors: err.response.data.errors, loading: false })

I run mongo db in cmd windows like this :
C:\Program Files\MongoDB\Server\3.4\bin\mongod --dbpath C:\code\bookworm-api --port 27017

Hey, I am interested in knowing that what plugin you were using in the videos of this project. I was seeing the videos and I noticed that all the code was being automatically formatted on save whether it is HTML, js or jsx.

You pronounced the name but I am not getting clearly. I searched for it but no luck.
Please tell me. Thanx.

This feature includes a lot of small tasks:

• react project set up with eslint
• react router and redux setup
• forms and form validation
• several page components: HomePage, SignupPage and DashboardPage
• node js express project setup with babel and eslint
• authentication with JWT
• API for user authentication
• user data, JWT generation
• authorise Routes

• signup form with client-side validation
• server-side validation: add check for email uniqueness
• send confirmation email (mailtrap.io for development)

How do I fix this?

Hi Remchi, Need mysql with express js for bookworm react

Hi ,
In server side middleware routing call is not working. It works well without routing. I am using express 4.16.4, node 10.15.2.

index.js
import express from "express";
import path from "path";
import mongoose from "mongoose";
import bodyParser from "body-parser";
import auth from "./routes/auth";

const app = express();
// app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
mongoose.connect("mongodb://localhost/bookworm", { useNewUrlParser: true });

console.log("post request");
app.use("api/auth", auth);

// app.post("/api/auth", (req, res) => {
// res.status(400).json({ errors: { global: "Invalid Credentials" } });
// });

app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"));
});

app.listen(8080, () => console.log("Running on localhost:8080"));

auth.js

import express from "express";
import User from "../models/User";

const router = express.Router();

router.route("/").post((req, res) => {
const { credentials } = req.body;
console.log(req.body);
User.findOne({ email: credentials.email }).then(user => {
if (user) {
res.json({ success: true });
} else {
res.status(400).json({ errors: { global: "Invalid Credentials" } });
}
});
});
export default router;

When user Logged in the state of User reducer should update with token and email. But in redux devtool action showing user object having email and token property data from server but state is empty. i am following your tutorial so below are codes the progress i have made up to.

code for api.js

import axios from 'axios'

export default {
user:{
login:(credential) => axios.post('/api/auth',{credential}).then(res => res.data.user)
}
}

code for auth.js

import {USER_LOGGED_IN} from '../types'
import api from '../api'

export const userLoggedIn = user => ({
type: USER_LOGGED_IN,
user
});
export const login = (credential) =>(dispatch) => api.user.login(credential).then(user => dispatch(userLoggedIn(user)))

code for reducer user.js

import { USER_LOGGED_IN } from "../types";

const initailState = {
email:'',
token:''
}
export default function user(state = initailState, action = {}) {
switch (action.type) {
case USER_LOGGED_IN:
return action.user;
default:
return state;
}
}

rootreducer code

import { combineReducers } from "redux";

import user from "./reducers/user";
// import books from "./reducers/books";

export default combineReducers({
user:()=>({})

});

Unhandled Rejection (TypeError): Cannot read property 'push' of undefined
at line
submit=(data)=>this.props.login(data).then(()=>this.props.histroy.push("/"))

Please Check.