I was coding along with Zero To Mastery web dev course. The app is called smartbrain. There is a signin method which doesn't run when I'm adding if statement, it should go to homepage, but its bouncing back to signin page. It only goes to homepage if put the routing function outside the if loop.
server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const database = {
users: [
{
id: '123',
name: 'john',
email: 'john@gmail.com',
password: 'cookies',
entries: 0,
joined: new Date(),
},
{
id: '124',
name: 'sally',
email: 'sally@gmail.com',
password: 'bananas',
entries: 0,
joined: new Date(),
},
],
};
app.get('/', (req, res) => {
res.json(database.users);
});
app.post('/signin', (req, res) => {
if (
req.body.email === database.users[0].email &&
req.body.password ===
database.users[0].password
) {
res.json('success');
} else {
res.status(400).json('error logging in');
}
});
app.post('/register', (req, res) => {
const { name, email, password } = req.body;
database.users.push({
id: '125',
name: name,
email: email,
password: password,
entries: 0,
joined: new Date(),
});
res.json(
database.users[database.users.length - 1]
);
});
app.get('/profile/:id', (req, res) => {
let found = false;
const { id } = req.params;
database.users.forEach((user) => {
if (user.id === id) {
found = true;
return res.json(user);
}
});
if (!found) {
res.status(400).json('user not found');
}
});
app.post('/image', (req, res) => {
let found = false;
const { id } = req.body;
database.users.forEach((user) => {
if (user.id === id) {
found = true;
user.entries++;
return res.json(user.entries);
}
});
if (!found) {
res.status(400).json('user not found');
}
});
app.listen(3001, () => {
console.log('App is running');
});
signin.js
import { React, Component } from 'react';
class Signin extends Component {
constructor(props) {
super(props);
this.state = {
signInEmail: '',
signInPassword: '',
// validUser: false,
};
}
onEmailChange = (event) => {
this.setState({
signInEmail: event.target.value,
});
};
onPasswordChange = (event) => {
this.setState({
signInPassword: event.target.value,
});
};
onSubmitSignIn = () => {
// console.log(this.state);
fetch('http://localhost:3001/signin', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: this.state.signInEmail,
password: this.state.signInPassword,
}),
})
.then((response) => response.json())
.then(data => {
if (data==='success'){
this.props.onRouteChange('home');
}
})
// this.props.onRouteChange('home');
};
render() {
const { onRouteChange } = this.props;
// console.log(this.state);
return (
<article className='br3 ba b--black-10 mv4 w-80 w-50-m w-25-l mw6 shadow-5 center'>
<main className='pa4 black-80'>
<form className='measure center'>
<fieldset
id='sign_up'
className='ba b--transparent ph0 mh0'>
<legend className='f2 fw6 ph0 mh0 center'>
Sign In
</legend>
<div className='mt3'>
<label
className='db fw6 lh-copy f6'
htmlFor='email-address'>
Email
</label>
<input
className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-80'
type='email'
name='email-address'
id='email-address'
onChange={this.onEmailChange}
/>
</div>
<div className='mv3'>
<label
className='db fw6 lh-copy f6'
htmlFor='password'>
Password
</label>
<input
className='b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-80'
type='password'
name='password'
id='password'
onChange={this.onPasswordChange}
/>
</div>
{/* <label className='pa0 ma0 lh-copy f6 pointer'>
<input type='checkbox' /> Remember
me
</label> */}
</fieldset>
<div className=''>
<input
className='b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
type='submit'
value='Sign in'
onClick={this.onSubmitSignIn}
/>
</div>
<div className='lh-copy mt3'>
<p
onClick={() =>
onRouteChange('register')
}
className='f6 link dim black db pointer'>
Register
</p>
{/* <a
href='#0'
className='f6 link dim black db'>
Forgot your password?
</a> */}
</div>
</form>
</main>
</article>
);
}
}
export default Signin;
See the commented code
this.props.onRouteChange('home');
If I uncomment this and comment the one in if loop, I get a success response from my server and it goes to home page. Another thing is that if the this.props.onRouteChange('home'); is inside the if loop I can see my username password on url bar as a query string. Any solution???
app.js
import React, { Component } from 'react';
import Navigation from './Components/Navigation';
import Logo from './Components/Logo';
import ImageLinkForm from './Components/ImageLinkForm';
import Rank from './Components/Rank';
import FaceRecognition from './Components/FaceRecognition';
import Signin from './Components/Signin';
import Register from './Components/Register';
import Particles from 'react-particles-js';
import Clarifai from 'clarifai';
import './App.css';
const particlesConfig = {
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 500,
},
},
},
};
const app = new Clarifai.App({
apiKey: 'c14191b446b14919afd059c9a0666edf',
});
class App extends Component {
constructor() {
super();
this.state = {
input: '',
imageURL: '',
box: {},
route: 'signin',
isSignedIn: false,
};
}
// componentDidMount() {
// fetch('http://localhost:3001/')
// .then((response) => response.json())
// .then((data) => console.log(data));
// }
calculateFaceLocation = (data) => {
const clarifaiFace =
data.outputs[0].data.regions[0].region_info
.bounding_box;
const image =
document.getElementById('inputimage');
const width = Number(image.width);
const height = Number(image.height);
// console.log(width, height);
return {
leftCol: clarifaiFace.left_col * width,
topRow: clarifaiFace.top_row * height,
rightCol:
width - clarifaiFace.right_col * width,
bottomRow:
height - clarifaiFace.bottom_row * height,
};
};
displayFaceBox = (box) => {
console.log(box);
this.setState({
box: box,
});
};
handleInput = (event) => {
this.setState({
input: event.target.value,
});
};
handleDetect = () => {
this.setState({
imageURL: this.state.input,
});
app.models
.predict(
Clarifai.FACE_DETECT_MODEL,
this.state.input
)
.then((response) =>
this.displayFaceBox(
this.calculateFaceLocation(response)
)
)
.catch((err) => console.log(err));
};
onRouteChange = (route) => {
if (route === 'signout') {
this.setState({ isSignedIn: false });
} else if (route === 'home') {
this.setState({ isSignedIn: true });
}
this.setState({ route: route });
};
render() {
return (
<div className='App'>
<Particles
params={particlesConfig}
className='particles'
/>
<Navigation
onRouteChange={this.onRouteChange}
isSignedIn={this.state.isSignedIn}
/>
{this.state.route === 'home' ? (
<div>
<Logo />
<div style={{ marginTop: '-90px' }}>
<Rank />
<ImageLinkForm
handleInput={this.handleInput}
handleDetect={this.handleDetect}
/>
<FaceRecognition
imageURL={this.state.imageURL}
box={this.state.box}
/>
</div>
</div>
) : this.state.route === 'signin' ? (
<Signin
onRouteChange={this.onRouteChange}
/>
) : (
<Register
onRouteChange={this.onRouteChange}
/>
)}
</div>
);
}
}
export default App;