I have a react component called "Login".
Upon successful login credentials the backend redirects to user page.
app.post(
"/Login",
passport.authenticate("local", {
failureRedirect: "/login",
failureFlash: true
}),
function(req, res) {
res.redirect("/User");
}
);
In the browser page though there is no change. This is a picture of the network stats:
On the picture you can see that second request for /User
is made but the browser doesnt load the the new page.
This is the Login
componnent:
import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import NavBar from "../components/styled/NavBar";
import { UserInput, Label, SubmitButt } from "../components/styled/Forms";
import styled from "styled-components";
const FormWrapper = styled.div`
padding: 10px;
border-radius: 5px;
background-color: #f2f2f2;
`;
const Form = styled.form``;
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
submitForm = async e => {
e.preventDefault();
const res = await fetch("/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password
})
});
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<React.Fragment>
<NavBar /> <h1>Hello from Login {this.props.location.msg}</h1>
<FormWrapper>
<Form>
<Label>Username</Label>
<UserInput
name="username"
type="text"
placeholder="Type your username here"
value={this.state.name}
onChange={this.onChange}
/>
<Label>Password</Label>
<UserInput
name="password"
type="password"
placeholder="Type your password here"
value={this.state.name}
onChange={this.onChange}
/>
<SubmitButt onClick={this.submitForm}>Submasdasdit</SubmitButt>
</Form>
</FormWrapper>
</React.Fragment>
);
}
}
export default Login;